fix: website revamp

site/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

site/gatsby-browser.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ThemeProvider } from './src/components/Theme';
 import './src/styles/global.css';
 

site/package.json

@@ -21,7 +21,6 @@
     "postcss": "^8.4.31",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.17.0",
     "tailwindcss": "^3.3.5"
   },
   "overrides": {

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 = () => {

site/src/components/Footer/index.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Footer = () => {
   return (
     <div className="ml-[17.5rem] pt-[5rem]">

site/src/components/Layout/index.js

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+import ThemeContext from '../Theme';
+import Navbar from '../Navigation';
+import Sidebar from '../../pages/identity/Sidebar';
+import Footer from '../Footer';
+
+const Layout = ({ children }) => {
+  const theme = useContext(ThemeContext);
+
+  return (
+    <div className={`${theme.dark ? 'dark' : 'light'} bg-background-default`}>
+      <Navbar />
+      <div className="flex gap-8">
+        <Sidebar />
+        <main>{children}</main>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default Layout;

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';

site/src/components/Sidebar/index.js

@@ -1,5 +1,7 @@
+import React from 'react';
+
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'gatsby';
 import ChevronLightUp from '../../assets/images/Chevron-light-up.svg';
 import Chevron from '../../assets/images/Chevron-light.svg';
 

site/src/pages/404.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Link } from 'gatsby';
 
 const pageStyles = {

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>;
 };

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>;
 };

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">

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]">

site/src/pages/identity/Navigation.js

@@ -1,6 +1,8 @@
-import { Link } from 'react-router-dom';
+import React from 'react';
+import { Link } from 'gatsby';
 
 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>

site/src/pages/identity/Next.js

@@ -1,4 +1,6 @@
-import { Link } from 'react-router-dom';
+import React from 'react';
+
+import { Link } from 'gatsby';
 import nextIcon from '../../assets/images/Chevron-light.svg';
 
 const Next = ({ content, parent, child, subchild }) => {

site/src/pages/identity/Previous.js

@@ -1,4 +1,5 @@
-import { Link } from 'react-router-dom';
+import React from 'react';
+import { Link } from 'gatsby';
 import PrevIcon from '../../assets/images/Chevron-light.svg';
 
 const Previous = ({ content, parent, child, subchild }) => {

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">

site/src/pages/identity/SubContent.js

@@ -1,3 +1,4 @@
+import React from 'react';
 const SubContent = (props) => {
   return (
     <>

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]">

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 (

site/src/pages/identity/Text.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Content from './Content';
 import Heading from './Heading';
 

site/src/pages/identity/colors/code.js → 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';

site/src/pages/identity/colors/guidance.js → 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';

site/src/pages/identity/colors/index.js → site/src/pages/identity/color/index.js

@@ -1,21 +1,17 @@
-import { useParams } from 'react-router-dom';
+import React from 'react';
 import Navigation from '../Navigation';
 import Text from '../Text';
-import Code from './code';
-import Guidance from './guidance';
-import Overview from './overview';
+import Layout from '../../../components/Layout';
 
 const Color = () => {
-  const { id } = useParams();
   return (
-    <>
+    <Layout>
       <Text
         title="Color"
         description="Colors when accurately applied can be a potent tool that enables designers and developers to implement solutions with speed and efficiency. Here are a couple of things to keep in mind."
       />
       <Navigation type="color" />
-      {id === 'guidance' ? <Guidance /> : id === 'code' ? <Code /> : <Overview />}
-    </>
+    </Layout>
   );
 };
 

site/src/pages/identity/colors/overview.js → 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';

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>;
 };

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>;
 };

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>;
 };

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';

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';

site/src/pages/identity/typography/index.js

@@ -1,21 +1,18 @@
-import { useParams } from 'react-router-dom';
+import React from 'react';
+
 import Navigation from '../Navigation';
 import Text from '../Text';
-import Code from './code';
-import Guidance from './guidance';
-import Overview from './overview';
+import Layout from '../../../components/Layout';
 
 const Typography = () => {
-  const { id } = useParams();
   return (
-    <>
+    <Layout>
       <Text
         title="Typography"
         description="Most of the information that is present in a user interface for the purpose of passing information across is represented via typography. Correct structuring and appropriate application is important for all interfaces."
       />
       <Navigation type="typography" />
-      {id === 'guidance' ? <Guidance /> : id === 'code' ? <Code /> : <Overview />}
-    </>
+    </Layout>
   );
 };