From 599a5acf45566226733490701e1701ae06b7729f Mon Sep 17 00:00:00 2001
From: Lakshya Satpal <lakshyasatpal372@gmail.com>
Date: Sat, 6 Jan 2024 02:08:07 +0530
Subject: [PATCH] fix: site build error

Signed-off-by: Lakshya Satpal <lakshyasatpal372@gmail.com>
---
 site/gatsby-browser.js                        |   9 +-
 site/src/.prettierrc                          |   7 +
 site/src/components/Dropdown/index.js         |   2 +-
 site/src/components/Footer/index.js           |   2 +
 site/src/components/Navigation/index.js       |   2 +
 site/src/components/Sidebar/index.js          |   2 +
 site/src/pages/components/index.js            |   2 +
 site/src/pages/home/index.js                  |   2 +
 site/src/pages/identity/Content.js            |   2 +
 site/src/pages/identity/Heading.js            |   2 +
 site/src/pages/identity/Navigation.js         |   5 +-
 site/src/pages/identity/Next.js               |   2 +
 site/src/pages/identity/Previous.js           |   1 +
 site/src/pages/identity/Sidebar.js            |   2 +
 site/src/pages/identity/SubContent.js         |   1 +
 site/src/pages/identity/SubHeading.js         |   1 +
 site/src/pages/identity/SubText.js            |   1 +
 site/src/pages/identity/Text.js               |   2 +
 .../pages/identity/{colors => color}/code.js  |   2 +
 .../identity/{colors => color}/guidance.js    |   2 +
 .../pages/identity/{colors => color}/index.js |   2 +
 .../identity/{colors => color}/overview.js    |   2 +
 site/src/pages/identity/elevation/index.js    |   2 +
 site/src/pages/identity/page-layouts/index.js |   2 +
 site/src/pages/identity/spacing/index.js      |   2 +
 site/src/pages/identity/typography/code.js    |   2 +
 .../src/pages/identity/typography/guidance.js |   2 +
 site/src/pages/identity/typography/index.js   |   2 +
 .../src/pages/identity/typography/overview.js | 213 +++++++++---------
 site/src/pages/index.js                       |  50 ++--
 site/src/pages/patterns/index.js              |   2 +
 site/src/pages/visualise/index.js             |   2 +
 32 files changed, 201 insertions(+), 133 deletions(-)
 create mode 100644 site/src/.prettierrc
 rename site/src/pages/identity/{colors => color}/code.js (97%)
 rename site/src/pages/identity/{colors => color}/guidance.js (98%)
 rename site/src/pages/identity/{colors => color}/index.js (96%)
 rename site/src/pages/identity/{colors => color}/overview.js (99%)

diff --git a/site/gatsby-browser.js b/site/gatsby-browser.js
index 0b19a0c6..656de9db 100644
--- a/site/gatsby-browser.js
+++ b/site/gatsby-browser.js
@@ -1,4 +1,11 @@
+import React from 'react';
+
 import { ThemeProvider } from './src/components/Theme';
 import './src/styles/global.css';
+import { BrowserRouter } from 'react-router-dom';
 
-export const wrapRootElement = ({ element }) => <ThemeProvider>{element}</ThemeProvider>;
+export const wrapRootElement = ({ element }) => (
+  <BrowserRouter>
+    <ThemeProvider>{element}</ThemeProvider>
+  </BrowserRouter>
+);
diff --git a/site/src/.prettierrc b/site/src/.prettierrc
new file mode 100644
index 00000000..646b17cc
--- /dev/null
+++ b/site/src/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "none"
+}
diff --git a/site/src/components/Dropdown/index.js b/site/src/components/Dropdown/index.js
index 57ff31a4..39f881ed 100644
--- a/site/src/components/Dropdown/index.js
+++ b/site/src/components/Dropdown/index.js
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { React, useState } from 'react';
 import Sidebar from '../Sidebar';
 
 const Dropdown = () => {
diff --git a/site/src/components/Footer/index.js b/site/src/components/Footer/index.js
index 0684c6db..26e4e138 100644
--- a/site/src/components/Footer/index.js
+++ b/site/src/components/Footer/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Footer = () => {
   return (
     <div className="ml-[17.5rem] pt-[5rem]">
diff --git a/site/src/components/Navigation/index.js b/site/src/components/Navigation/index.js
index b92cbceb..69c12b5b 100644
--- a/site/src/components/Navigation/index.js
+++ b/site/src/components/Navigation/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { useContext } from 'react';
 import Search from '../../assets/images/Search.svg';
 import SearchDark from '../../assets/images/SearchDark.svg';
diff --git a/site/src/components/Sidebar/index.js b/site/src/components/Sidebar/index.js
index 97a59a3f..ce978a82 100644
--- a/site/src/components/Sidebar/index.js
+++ b/site/src/components/Sidebar/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import ChevronLightUp from '../../assets/images/Chevron-light-up.svg';
diff --git a/site/src/pages/components/index.js b/site/src/pages/components/index.js
index 19b93656..2f1c4c61 100644
--- a/site/src/pages/components/index.js
+++ b/site/src/pages/components/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Components = () => {
   return <div className="text-center text-bold">Components</div>;
 };
diff --git a/site/src/pages/home/index.js b/site/src/pages/home/index.js
index 176ee364..d1bba97f 100644
--- a/site/src/pages/home/index.js
+++ b/site/src/pages/home/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Home = () => {
   return <div className="text-center text-bold">Home</div>;
 };
diff --git a/site/src/pages/identity/Content.js b/site/src/pages/identity/Content.js
index 1bf13fda..8ef572fc 100644
--- a/site/src/pages/identity/Content.js
+++ b/site/src/pages/identity/Content.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Content = (props) => {
   return (
     <div className="w-[844px] pt-8 text-gray-700 text-sm font-normal font-openSans leading-loose">
diff --git a/site/src/pages/identity/Heading.js b/site/src/pages/identity/Heading.js
index da5fed2e..5a5c3b77 100644
--- a/site/src/pages/identity/Heading.js
+++ b/site/src/pages/identity/Heading.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Heading = (props) => {
   return (
     <div className="self-stretch text-gray-950 text-[52px] font-bold font-qanelas leading-[64px]">
diff --git a/site/src/pages/identity/Navigation.js b/site/src/pages/identity/Navigation.js
index f46cbe19..513843b3 100644
--- a/site/src/pages/identity/Navigation.js
+++ b/site/src/pages/identity/Navigation.js
@@ -1,6 +1,8 @@
-import { Link } from 'react-router-dom';
+import React from 'react';
+import { BrowserRouter, Link } from 'react-router-dom';
 
 const Navigation = (props) => {
+  console.log('naviation');
   return (
     <div className="w-[1120px] h-14 relative mt-[32px]">
       <div className="w-[1160px] h-0.5 left-[-50px] top-[54px] absolute bg-gray-200" />
@@ -9,6 +11,7 @@ const Navigation = (props) => {
           <Link
             to={`/identity/${props.type}/overview`}
             className="grow shrink basis-0 text-center text-emerald-700 text-base font-semibold font-openSans leading-7"
+            relative="path"
           >
             Overview
           </Link>
diff --git a/site/src/pages/identity/Next.js b/site/src/pages/identity/Next.js
index 08a2ea30..950d55e0 100644
--- a/site/src/pages/identity/Next.js
+++ b/site/src/pages/identity/Next.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Link } from 'react-router-dom';
 import nextIcon from '../../assets/images/Chevron-light.svg';
 
diff --git a/site/src/pages/identity/Previous.js b/site/src/pages/identity/Previous.js
index 0870dc84..5e0984fc 100644
--- a/site/src/pages/identity/Previous.js
+++ b/site/src/pages/identity/Previous.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Link } from 'react-router-dom';
 import PrevIcon from '../../assets/images/Chevron-light.svg';
 
diff --git a/site/src/pages/identity/Sidebar.js b/site/src/pages/identity/Sidebar.js
index 902ca55e..1fe06cb4 100644
--- a/site/src/pages/identity/Sidebar.js
+++ b/site/src/pages/identity/Sidebar.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Sidebar = (props) => {
   return (
     <div className="float-right w-[11.25rem] h-[3.75rem] px-4 py-6 bg-slate-200 bg-opacity-10 rounded-lg backdrop-blur-lg flex-col justify-start items-start gap-4 inline-flex">
diff --git a/site/src/pages/identity/SubContent.js b/site/src/pages/identity/SubContent.js
index cc29fdff..46638714 100644
--- a/site/src/pages/identity/SubContent.js
+++ b/site/src/pages/identity/SubContent.js
@@ -1,3 +1,4 @@
+import React from 'react';
 const SubContent = (props) => {
   return (
     <>
diff --git a/site/src/pages/identity/SubHeading.js b/site/src/pages/identity/SubHeading.js
index 31ff3616..a34ab2a4 100644
--- a/site/src/pages/identity/SubHeading.js
+++ b/site/src/pages/identity/SubHeading.js
@@ -1,3 +1,4 @@
+import React from 'react';
 const SubHeading = (props) => {
   return (
     <div className="w-[53.75rem] text-gray-950 text-[2rem] font-medium font-qanelas-medium leading-[3rem]">
diff --git a/site/src/pages/identity/SubText.js b/site/src/pages/identity/SubText.js
index 37b7cfb8..90d8f5c5 100644
--- a/site/src/pages/identity/SubText.js
+++ b/site/src/pages/identity/SubText.js
@@ -1,5 +1,6 @@
 import SubContent from './SubContent';
 import SubHeading from './SubHeading';
+import React from 'react';
 
 const SubText = (props) => {
   return (
diff --git a/site/src/pages/identity/Text.js b/site/src/pages/identity/Text.js
index 5ad79787..988d2faf 100644
--- a/site/src/pages/identity/Text.js
+++ b/site/src/pages/identity/Text.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Content from './Content';
 import Heading from './Heading';
 
diff --git a/site/src/pages/identity/colors/code.js b/site/src/pages/identity/color/code.js
similarity index 97%
rename from site/src/pages/identity/colors/code.js
rename to site/src/pages/identity/color/code.js
index 920625a6..67ba8c47 100644
--- a/site/src/pages/identity/colors/code.js
+++ b/site/src/pages/identity/color/code.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Next from '../Next';
 import Previous from '../Previous';
 import Sidebar from '../Sidebar';
diff --git a/site/src/pages/identity/colors/guidance.js b/site/src/pages/identity/color/guidance.js
similarity index 98%
rename from site/src/pages/identity/colors/guidance.js
rename to site/src/pages/identity/color/guidance.js
index 77da2318..b79b5fdd 100644
--- a/site/src/pages/identity/colors/guidance.js
+++ b/site/src/pages/identity/color/guidance.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Next from '../Next';
 import Previous from '../Previous';
 import Sidebar from '../Sidebar';
diff --git a/site/src/pages/identity/colors/index.js b/site/src/pages/identity/color/index.js
similarity index 96%
rename from site/src/pages/identity/colors/index.js
rename to site/src/pages/identity/color/index.js
index 39394cad..c2b044ab 100644
--- a/site/src/pages/identity/colors/index.js
+++ b/site/src/pages/identity/color/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { useParams } from 'react-router-dom';
 import Navigation from '../Navigation';
 import Text from '../Text';
diff --git a/site/src/pages/identity/colors/overview.js b/site/src/pages/identity/color/overview.js
similarity index 99%
rename from site/src/pages/identity/colors/overview.js
rename to site/src/pages/identity/color/overview.js
index 1fb6e4c9..6da12cca 100644
--- a/site/src/pages/identity/colors/overview.js
+++ b/site/src/pages/identity/color/overview.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Next from '../Next';
 import Previous from '../Previous';
 import Sidebar from '../Sidebar';
diff --git a/site/src/pages/identity/elevation/index.js b/site/src/pages/identity/elevation/index.js
index face50f5..a9d29aae 100644
--- a/site/src/pages/identity/elevation/index.js
+++ b/site/src/pages/identity/elevation/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Elevation = () => {
   return <div className="text-center text-bold">Elevation</div>;
 };
diff --git a/site/src/pages/identity/page-layouts/index.js b/site/src/pages/identity/page-layouts/index.js
index 3c1b487b..9c8f0bc4 100644
--- a/site/src/pages/identity/page-layouts/index.js
+++ b/site/src/pages/identity/page-layouts/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const PageLayout = () => {
   return <div className="text-center text-bold">Page Layout</div>;
 };
diff --git a/site/src/pages/identity/spacing/index.js b/site/src/pages/identity/spacing/index.js
index d4ec7f6b..b4d977a9 100644
--- a/site/src/pages/identity/spacing/index.js
+++ b/site/src/pages/identity/spacing/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Spacing = () => {
   return <div className="text-center text-bold">Spacing</div>;
 };
diff --git a/site/src/pages/identity/typography/code.js b/site/src/pages/identity/typography/code.js
index 30485a09..7f98be77 100644
--- a/site/src/pages/identity/typography/code.js
+++ b/site/src/pages/identity/typography/code.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Next from '../Next';
 import Previous from '../Previous';
 import Sidebar from '../Sidebar';
diff --git a/site/src/pages/identity/typography/guidance.js b/site/src/pages/identity/typography/guidance.js
index 6c19574c..0453512a 100644
--- a/site/src/pages/identity/typography/guidance.js
+++ b/site/src/pages/identity/typography/guidance.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Next from '../Next';
 import Previous from '../Previous';
 import Sidebar from '../Sidebar';
diff --git a/site/src/pages/identity/typography/index.js b/site/src/pages/identity/typography/index.js
index aca5ee26..ffa24cc1 100644
--- a/site/src/pages/identity/typography/index.js
+++ b/site/src/pages/identity/typography/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { useParams } from 'react-router-dom';
 import Navigation from '../Navigation';
 import Text from '../Text';
diff --git a/site/src/pages/identity/typography/overview.js b/site/src/pages/identity/typography/overview.js
index cd8d229f..7630e44c 100644
--- a/site/src/pages/identity/typography/overview.js
+++ b/site/src/pages/identity/typography/overview.js
@@ -1,125 +1,130 @@
+import React from 'react';
+
 import Next from '../Next';
 import Previous from '../Previous';
 import Sidebar from '../Sidebar';
-import SubText from '../SubText';
 import SubContent from '../SubContent';
-import Previous from '../Previous';
-import Next from '../Next';
+import SubText from '../SubText';
 
 const items = [
-    {
-     title: "Introduction"   
-    },
-    {
-     title: "Color Anatomy"   
-    },
-    {
-     title: "Layer Hierarchy"   
-    },
-    {
-     title: "The Basics"   
-    },
-    {
-     title: "Green Color Accessibility"   
-    }
-]
+  {
+    title: 'Introduction'
+  },
+  {
+    title: 'Color Anatomy'
+  },
+  {
+    title: 'Layer Hierarchy'
+  },
+  {
+    title: 'The Basics'
+  },
+  {
+    title: 'Green Color Accessibility'
+  }
+];
 
 const basics = [
-    {
-        title:'Theme',
-        description:'By definition, a theme is a cohesive and consistent look and feel for a product. This consistent look can be achieved with the use of harmonious color palettes, legible fonts and layout patterns. Currently, sistent outlines specifications for light and dark themes.'
-    },
-    {
-        title:'Value',
-        description:'A value is the unique visual attribute assigned to a token through the use of themes. This could range from hex codes to rgba values which are used to highlight specific colors in any given instance. We highly recommend that no exact values be referenced anywhere in the design in order to avoid errors and ensure consistency. Instead, tokens should be used to curate and implement the reusable values. More on tokens next.'
-    },
-    {
-        title:'Tokens',
-        description:'Tokens can be regarded as a shared language between design and development for communicating detailed information about how to build user interfaces. Generally, a rule of thumb is to represent the context (background, text, component), role (success, warning, brand, inverse), and modifier(s) (secondary, tertiary, hover) in a string of text that will represent set values gotten from the colors in the color palette.'
-    },
-    {
-        title:'Role',
-        description:'Roles are parameters that specify the context that colors are being applied to and while different roles can share the same value, the token structure means that they will have different use cases. These values can be different though depending on the current theme.'
-    }
-]
+  {
+    title: 'Theme',
+    description:
+      'By definition, a theme is a cohesive and consistent look and feel for a product. This consistent look can be achieved with the use of harmonious color palettes, legible fonts and layout patterns. Currently, sistent outlines specifications for light and dark themes.'
+  },
+  {
+    title: 'Value',
+    description:
+      'A value is the unique visual attribute assigned to a token through the use of themes. This could range from hex codes to rgba values which are used to highlight specific colors in any given instance. We highly recommend that no exact values be referenced anywhere in the design in order to avoid errors and ensure consistency. Instead, tokens should be used to curate and implement the reusable values. More on tokens next.'
+  },
+  {
+    title: 'Tokens',
+    description:
+      'Tokens can be regarded as a shared language between design and development for communicating detailed information about how to build user interfaces. Generally, a rule of thumb is to represent the context (background, text, component), role (success, warning, brand, inverse), and modifier(s) (secondary, tertiary, hover) in a string of text that will represent set values gotten from the colors in the color palette.'
+  },
+  {
+    title: 'Role',
+    description:
+      'Roles are parameters that specify the context that colors are being applied to and while different roles can share the same value, the token structure means that they will have different use cases. These values can be different though depending on the current theme.'
+  }
+];
 
-const Overview = ()=> {
-    return (
-        <>
-        <Sidebar items={items}/>
-        <div className="py-[2.5rem]">
-        <SubContent
-        SubContent="In order to achieve the aim of maintaining a consistent and engaging digital interface across Layer5, whether it is in the form of websites, applications, or experiences, a detailed explanation of color application along with practical use cases is needed. To this end, the following concepts help to shape a suitable identity as we aim for balance throughout our User Interface."
-        />
-        </div>
-        <SubText 
+const Overview = () => {
+  return (
+    <>
+      <Sidebar items={items} />
+      <div className="py-[2.5rem]">
+        <SubContent SubContent="In order to achieve the aim of maintaining a consistent and engaging digital interface across Layer5, whether it is in the form of websites, applications, or experiences, a detailed explanation of color application along with practical use cases is needed. To this end, the following concepts help to shape a suitable identity as we aim for balance throughout our User Interface." />
+      </div>
+      <SubText
         SubHeading="Introduction"
         SubContent="When the color palette is accurately put to use, it ensures a recognizable consistency in Layer5’s array of digital interfaces and products. This is made possible due to adherence to well defined rules which though specific, are also flexible and give ample room for professionals to curate appealing solutions across all themes."
         length="2"
-        />
-        <div className='pt-[2.5rem]'>
-        <SubText 
-        SubHeading="Color Anatomy"
-        SubContent="Sistent’s default themes are derived from Layer5’s color palette of which the Keppel Green color serves as the dominant primary action color with subtle shifts in value to enable the required visual accessibility as recommended in the WCAG (Web Content Accessibility Guidelines) 2.1 compliance standards. It is also sometimes combined with Saffron Yellow and Caribbean Green colors accentuate other parts of the user interface like CTA buttons as well as illustrations and icons."
-        length="2"
-        height="35.25"
-        >
-        <SubContent
-        SubContent="The Charcoal color as well as another accent grey serve as neutrals to complement these greens and create harmonious implementations. These five colors combine to form a foundation for the color system."
-        />
-        <div className='h-56 py-[1.5rem]'></div>
-        </SubText>
-        </div>
+      />
+      <div className="pt-[2.5rem]">
         <SubText
-        SubHeading='Layer Hierarchy'
-        SubContent='For backgrounds and surfaces, colors in the neutral palettes are used cohesively to create depth and spatial associations. This hierarchical pattern defines the logic of how colors stack on top of each other in a UI when implementing Sistent themes. This logical pattern goes beyond just themes but is also built across components and accounted for in suggested color tokens as well.'
-        length='2'
-        height='90.25'
+          SubHeading="Color Anatomy"
+          SubContent="Sistent’s default themes are derived from Layer5’s color palette of which the Keppel Green color serves as the dominant primary action color with subtle shifts in value to enable the required visual accessibility as recommended in the WCAG (Web Content Accessibility Guidelines) 2.1 compliance standards. It is also sometimes combined with Saffron Yellow and Caribbean Green colors accentuate other parts of the user interface like CTA buttons as well as illustrations and icons."
+          length="2"
+          height="35.25"
         >
-        <SubContent 
-        SubContent='There is an alternate relationship between the layer hierarchy in both light and dark themes:
+          <SubContent SubContent="The Charcoal color as well as another accent grey serve as neutrals to complement these greens and create harmonious implementations. These five colors combine to form a foundation for the color system." />
+          <div className="h-56 py-[1.5rem]"></div>
+        </SubText>
+      </div>
+      <SubText
+        SubHeading="Layer Hierarchy"
+        SubContent="For backgrounds and surfaces, colors in the neutral palettes are used cohesively to create depth and spatial associations. This hierarchical pattern defines the logic of how colors stack on top of each other in a UI when implementing Sistent themes. This logical pattern goes beyond just themes but is also built across components and accounted for in suggested color tokens as well."
+        length="2"
+        height="90.25"
+      >
+        <SubContent
+          SubContent="There is an alternate relationship between the layer hierarchy in both light and dark themes:
         In the light theme, as layers are stacked towards the topmost surface, they become progressively darker.
         In the dark theme, as layers are stacked towards the topmost surface, they become progressively lighter.
-        This means, in effect, that while there is a fine blend of surfaces on any given UI theme, there is also strict adherence to accessibility guidelines and recommendations.'
+        This means, in effect, that while there is a fine blend of surfaces on any given UI theme, there is also strict adherence to accessibility guidelines and recommendations."
         />
-        <div className='py-[1.5rem] h-[16rem]'></div>
+        <div className="py-[1.5rem] h-[16rem]"></div>
         <SubContent
-        SubContent="A similar hierarchy pattern as above is adopted for brilliantly colored backgrounds like brand and alert colors when it comes to interactive states. So as interactions progress from default to hover to pressed, this same principle may apply. However, when trying to establish prominence for other user interface needs, an inverse relationship may be more suitable. Hence, for these brilliant colors:  
+          SubContent="A similar hierarchy pattern as above is adopted for brilliantly colored backgrounds like brand and alert colors when it comes to interactive states. So as interactions progress from default to hover to pressed, this same principle may apply. However, when trying to establish prominence for other user interface needs, an inverse relationship may be more suitable. Hence, for these brilliant colors:  
         In the light theme, as prominence reduces, layers become progressively lighter.
         In the dark theme, as prominence reduces, layers become progressively darker."
         />
-        <div className='py-[1.5rem] h-[26rem]'></div>
-        </SubText>
-        <div className='pt-[2.5rem]'>
+        <div className="py-[1.5rem] h-[26rem]"></div>
+      </SubText>
+      <div className="pt-[2.5rem]">
         <SubText
-        length="2"
-        height="49"
-        SubHeading="The Basics"
-        SubContent="Let’s start with a few of the common terms that we will come across frequently, as understanding what they mean will inform us of applicable use cases and proper procedures that should not be overlooked."
+          length="2"
+          height="49"
+          SubHeading="The Basics"
+          SubContent="Let’s start with a few of the common terms that we will come across frequently, as understanding what they mean will inform us of applicable use cases and proper procedures that should not be overlooked."
         >
-        {basics && basics.map((basic)=>{
-            return (
-              <div key={basic.title}>
-                <SubContent
-                  SubContent={basic.title}
-                  font="bold"
-                  // fontType="Qanelas Soft"
-                />
-                <SubContent
-                SubContent={basic.description}
-                />
-                </div>)
-        })}
+          {basics &&
+            basics.map((basic) => {
+              return (
+                <div key={basic.title}>
+                  <SubContent
+                    SubContent={basic.title}
+                    font="bold"
+                    // fontType="Qanelas Soft"
+                  />
+                  <SubContent SubContent={basic.description} />
+                </div>
+              );
+            })}
         </SubText>
-        </div>
-        <div className='pt-[6.25rem] gap-4 flex'>
-            <Previous content="Case Studies" parent="identity" child="color" subchild=""/>
-            <div className='h-[24px] w-[16px]'/>
-            <Next content="Color System: Guidelines" parent="identity" child="color" subchild="guidance" />
-        </div>
-        </>
-    )
-}
+      </div>
+      <div className="pt-[6.25rem] gap-4 flex">
+        <Previous content="Case Studies" parent="identity" child="color" subchild="" />
+        <div className="h-[24px] w-[16px]" />
+        <Next
+          content="Color System: Guidelines"
+          parent="identity"
+          child="color"
+          subchild="guidance"
+        />
+      </div>
+    </>
+  );
+};
 
 export default Overview;
 
@@ -133,10 +138,10 @@ export default Overview;
 
 // const items = [
 //     {
-//      title: "The Basics"   
+//      title: "The Basics"
 //     },
 //     {
-//      title: "Type Scale"   
+//      title: "Type Scale"
 //     }
 // ]
 
@@ -178,7 +183,7 @@ export default Overview;
 //                 />
 //                 </div>)
 //         })}
-//         </SubText> 
+//         </SubText>
 //         <div className='pt-[2.5rem]'>
 //         <SubText SubHeading="Type Scale"
 //         SubContent="Type scale with respect to typography points to the set of incremental steps or rations that dictate how font sizes increase or decrease as you move up or down a given hierarchy. This increase or decrease is usually originated from a base size that serves as the defining font within the scale. These steps create a systemic progression of font sizes that maintain harmony and visual balance within a system because of the relationship they share with the base font."
@@ -191,15 +196,15 @@ export default Overview;
 //         <SubContent
 //         SubContent="Because of the progressive increase or decrease that governs the content of a type scale, it makes it easier to obtain consistent, related, and harmonious font sizes that can each be used for specific needs when curating digital interfaces."
 //         />
-//         </SubText> 
+//         </SubText>
 //         </div>
 //         <div className='pt-[6.25rem] gap-4 flex'>
 //             <Previous content="Case Studies"  parent="identity" child="typography" subchild=""/>
 //             <div className='h-[24px] w-[16px]'/>
 //             <Next content="Typography: Guidelines"  parent="identity" child="typography" subchild="guidance"/>
-//         </div> 
+//         </div>
 //         </>
 //     )
 // }
- 
+
 // export default Overview;
diff --git a/site/src/pages/index.js b/site/src/pages/index.js
index f36db4bf..0d5ed983 100644
--- a/site/src/pages/index.js
+++ b/site/src/pages/index.js
@@ -1,43 +1,41 @@
+import React from 'react';
 import { useContext } from 'react';
-import { Navigate, Route, BrowserRouter as Router, Routes } from 'react-router-dom';
-import Footer from '../components/Footer';
-import Navbar from '../components/Navigation';
-import Sidebar from '../components/Sidebar';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import ThemeContext from '../components/Theme';
 import '../styles/global.css';
 import Home from './home';
-import Color from './identity/colors';
+import Color from './identity/color';
 import Elevation from './identity/elevation';
 import PageLayout from './identity/page-layouts';
 import Spacing from './identity/spacing';
 import Typography from './identity/typography';
+import Sidebar from './identity/Sidebar';
+import Navbar from '../components/Navigation';
+import Footer from '../components/Footer';
 
 const IndexPage = () => {
   const theme = useContext(ThemeContext);
-  const routes = (
-    <Routes>
-      <Route path="/" element={<Home />} exact />
-      <Route path="/identity/color" element={<Color />} exact />
-      <Route path="/identity/color/:id" element={<Color />} exact />
-      <Route path="/identity/typography" element={<Typography />} exact />
-      <Route path="/identity/typography/:id" element={<Typography />} exact />
-      <Route path="/identity/spacing" element={<Spacing />} exact />
-      <Route path="/identity/layouts" element={<PageLayout />} exact />
-      <Route path="/identity/elevation" element={<Elevation />} exact />
-      <Route path="*" element={<Navigate to="/" replace />} />
-    </Routes>
-  );
 
   return (
     <div className={`${theme.dark ? 'dark' : 'light'} bg-background-default`}>
-      <Router>
-        <Navbar />
-        <div className="flex gap-8">
-          <Sidebar />
-          <main>{routes}</main>
-        </div>
-        <Footer />
-      </Router>
+      <Navbar />
+      <div className="flex gap-8">
+        <Sidebar />
+        <main>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/identity/color" element={<Color />} />
+            <Route path="/identity/color/:id" element={<Color />} />
+            <Route path="/identity/typography" element={<Typography />} />
+            <Route path="/identity/typography/:id" element={<Typography />} />
+            <Route path="/identity/spacing" element={<Spacing />} />
+            <Route path="/identity/layouts" element={<PageLayout />} />
+            <Route path="/identity/elevation" element={<Elevation />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </main>
+      </div>
+      <Footer />
     </div>
   );
 };
diff --git a/site/src/pages/patterns/index.js b/site/src/pages/patterns/index.js
index b57b05bb..39a2a6f4 100644
--- a/site/src/pages/patterns/index.js
+++ b/site/src/pages/patterns/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Patterns = () => {
   return <div className="text-center text-bold">Patterns</div>;
 };
diff --git a/site/src/pages/visualise/index.js b/site/src/pages/visualise/index.js
index e8b4d5bc..c3cdd12c 100644
--- a/site/src/pages/visualise/index.js
+++ b/site/src/pages/visualise/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Visualize = () => {
   return <div className="text-center text-bold">Visualize</div>;
 };