fix: update links in header (#35)

Author: hamedtkd

package-lock.json

@@ -13,10 +13,9 @@
     "deploy": "gh-pages -d build"
   },
   "dependencies": {
-    "@studio-freight/lenis": "^1.0.42",
-    "@studio-freight/react-lenis": "^0.0.46",
     "clsx": "^2.1.0",
     "gsap": "^3.12.5",
+    "lenis": "^1.1.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-hash-link": "^2.4.3",

package.json

@@ -1,7 +1,7 @@
+import { Header, Footer } from "layout";
+import { ReactLenis } from "lenis/react";
 import Home from "components/Home";
 import "./App.css";
-import { Header, Footer } from "layout";
-import { ReactLenis } from "@studio-freight/react-lenis";
 
 function App() {
   return (

src/App.tsx

@@ -32,15 +32,13 @@ html.lenis body {
 
   .noisy-bg {
     background-image: url("/Noisy-Background.svg");
-
   }
 
   :root {
-    --primary: #FF4800;
-    --secondary: #1D1D1D;
-    --background: #E2DDD6;
-    font-family: "Neue Machina", system-ui,
-      sans-serif;
+    --primary: #ff4800;
+    --secondary: #1d1d1d;
+    --background: #e2ddd6;
+    font-family: "Neue Machina", system-ui, sans-serif;
     color-scheme: light dark;
     color: var(--secondary);
     background-color: var(--background);
@@ -51,7 +49,7 @@ html.lenis body {
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-
+    scroll-behavior: smooth;
 
     /* spacing */
 
@@ -74,10 +72,8 @@ html.lenis body {
     --sp16: 192px;
     --sp17: 224px;
     --sp18: 256px;
-
   }
 
-
   a {
     @apply no-underline;
   }
@@ -88,37 +84,37 @@ html.lenis body {
 @layer base {
   .heading-1 {
     @apply text-[5.375rem] leading-[91px] -tracking-[2px]
-    /*  font-size: 86px */
+    /*  font-size: 86px */;
   }
 
   .heading-2 {
     @apply text-[3.5rem] leading-[53px] -tracking-wider
-    /*  font-size: 56px */
+    /*  font-size: 56px */;
   }
 
   .heading-3 {
     @apply text-[2.875rem] leading-[47px] -tracking-wider
-    /*  font-size: 46px */
+    /*  font-size: 46px */;
   }
 
   .title-1 {
     @apply text-[2rem] leading-[40px] -tracking-wider
-    /*  font-size: 32px */
+    /*  font-size: 32px */;
   }
 
   .title-2 {
     @apply text-[1.75rem] leading-[33px] -tracking-wider
-    /*  font-size: 28px */
+    /*  font-size: 28px */;
   }
 
   .title-3 {
     @apply text-[1.375rem] leading-[27px] -tracking-wider
-    /*  font-size: 22px */
+    /*  font-size: 22px */;
   }
 
   .title-4 {
     @apply text-[1.25rem] leading-[24px] -tracking-wider
-    /*  font-size: 20px */
+    /*  font-size: 20px */;
   }
 
   h1 {

src/index.css

@@ -3,29 +3,27 @@ import { links } from "./links";
 import { Logo } from "assets/icons";
 
 export function Header() {
-  const handleClickScroll = (id: string) => {
-    const element = document.getElementById(id);
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth" });
-    }
-  };
   return (
     <header className="container mx-auto px-10  border-b border-secondary py-6">
       <nav className="flex justify-between items-center">
         <a draggable={false} href="/">
           <Logo className="text-primary" />
         </a>
         <ul className="list-disc gap-9 md:flex hidden">
-          {links.map((link, key) => (
-            <li key={key}>
-              <button
-                onClick={() => handleClickScroll(link.link)}
-                className="title-4 transition-all duration-300  border-b border-transparent hover:border-secondary"
-              >
-                {link.name}
-              </button>
-            </li>
-          ))}
+          {links.map((link, key) => {
+            const isExternalLink = link.link.includes("https");
+            return (
+              <li key={key}>
+                <a
+                  href={link.link}
+                  target={isExternalLink ? "_blank" : "_self"}
+                  className="title-4 transition-all duration-300  border-b border-transparent hover:border-secondary"
+                >
+                  {link.name}
+                </a>
+              </li>
+            );
+          })}
         </ul>
         <Link className="title-4" variant="primary" href="mailto:hi@dezh.tech">
           Contact us

src/layout/Header.tsx

@@ -6,11 +6,11 @@ type LinkT = {
 export const links: LinkT[] = [
   {
     name: "Our Partners",
-    link: "our-Partners",
+    link: "#our-Partners",
   },
   {
     name: "Community",
-    link: "community",
+    link: "#community",
   },
   {
     name: "Documents",