feat: navigator

index.html

@@ -21,6 +21,7 @@
     <meta name="twitter:image" content="https://defi.sucks/share.jpg">
     <meta name="theme-color" content="#10152A">
 
+
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 
     <script src="/libs/blotter.min.js"></script>

src/App.tsx

@@ -1,18 +1,25 @@
-import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 
-import { PageView, Navbar } from "@/components/app";
-import { Lore } from "@/pages";
+import { PageView } from "~/components/app";
+import { Navbar } from "./containers";
+import { Home, Lore } from "~/pages";
+import Team from "./pages/Team";
+import PortFolio from "./pages/Portfolio";
+import ScrollToTop from "./hooks/ScrollToTop";
 
 function App() {
   return (
     <PageView>
       <BrowserRouter>
         <Navbar />
-
+        <ScrollToTop />
         <Routes>
           <Route path="/" element={<Lore />} />
-          {/* <Route path="/" element={<Home />} /> */}
-          <Route path="*" element={<Navigate to="/" />} />
+          <Route path="*" element={<Home />}>
+            <Route path="lore" element={<Lore />} />
+            <Route path="team" element={<Team />} />
+            <Route path="portfolio" element={<PortFolio />} />
+          </Route>
         </Routes>
       </BrowserRouter>
     </PageView>

src/assets/css/global.css

@@ -1,5 +1,5 @@
 html {
-  font-size: 73%;
+  font-size: 62.5%;
   color-scheme: light dark;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -17,7 +17,8 @@ body {
   background-color: var(--background-surface-primary);
 }
 
-html, body {
+html,
+body {
   margin: 0;
   width: 100%;
   height: 100%;
@@ -32,18 +33,28 @@ html, body {
   box-sizing: border-box;
 }
 
-h1, h2, h3, h4, h5, h6, p {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
   margin: 0;
   font-weight: 500;
   line-height: 1.25;
-  letter-spacing: .1rem;
+  letter-spacing: 0.1rem;
 }
 
-h1, h3, h5 {
+h1,
+h3,
+h5 {
   font-family: var(--font-medium);
 }
 
-h2, h4, h6 {
+h2,
+h4,
+h6 {
   font-family: var(--font-medium-l);
 }
 
@@ -55,6 +66,10 @@ span {
   letter-spacing: normal;
 }
 
+a {
+  text-decoration: none;
+}
+
 /* @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
@@ -66,4 +81,4 @@ span {
   button {
     background-color: #f9f9f9;
   }
-} */
+} */

src/assets/css/variables.css

@@ -9,11 +9,11 @@
   --navbar-index: 1000;
 
   /* GLOBAL VARS */
-  --page-max-width: 90rem;
+  --page-max-width: 120rem;
 
   --navbar-height: 10.5rem;
 
-  --page-padding: 7.5rem;
+  --page-padding: 9rem;
 }
 
 @media screen and (max-width: 700px) {
@@ -26,4 +26,4 @@
   :root {
     --page-padding: 1rem;
   }
-}
+}

src/components/app/HeroHeading.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 // import useFontFaceObserver from "use-font-face-observer";
 import FontFaceObserver from "fontfaceobserver";
 
-import { DisplayText } from "@/components/common";
+import { DisplayText } from "~/components/common";
 
 const MobileText = styled(DisplayText)`
   font-size: 10vw;

src/components/app/PageContent.tsx

@@ -5,7 +5,6 @@ const StyledPageContent = styled.section`
   flex-direction: column;
   align-items: center;
   width: 100%;
-  padding-bottom: 10rem;
   overflow: hidden;
 
   @media screen and (max-width: 500px) {