first version

src/shared/components/Header.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Button from "./Button";
 import robotLogo from "../../assets/images/logo-robot.png";
 import { BsNewspaper, BsGithub } from "react-icons/bs";
-
+import Whitepaper from "../../assets/Whitepaper.pdf";
 type Props = {};
 
 const menuItems = [
@@ -49,6 +49,11 @@ const Header = (props: Props) => {
     }
   };
 
+  const openLocalPdf = () => {
+    const pdf = Whitepaper;
+    window.open(pdf);
+  };
+
   return (
     <>
       {isScrolled ? (
@@ -75,7 +80,7 @@ const Header = (props: Props) => {
                     key={item.path}
                     onClick={() => jumpToSection(item.id)}
                   >
-                    <p className="text-white text-md transition-all duration-150">
+                    <p className="text-white text-md transition-all duration-150 cursor-pointer">
                       {item.name}
                     </p>
                   </li>
@@ -83,7 +88,7 @@ const Header = (props: Props) => {
               </ul>
 
               <div className="flex gap-4">
-                <Button size="sm">
+                <Button size="sm" onClick={() => openLocalPdf()}>
                   <div className="flex items-center gap-2">
                     <BsNewspaper />
                     Whitepaper
@@ -118,19 +123,20 @@ const Header = (props: Props) => {
             <div className="flex gap-10 items-center">
               <ul className="flex gap-10">
                 {menuItems.map((item) => (
-                  <li className="inline-block" key={item.path}>
-                    <a
-                      href="#"
-                      className="text-white text-lg transition-all duration-150"
-                    >
+                  <li
+                    className="inline-block"
+                    key={item.path}
+                    onClick={() => jumpToSection(item.id)}
+                  >
+                    <p className="text-white text-md transition-all duration-150 cursor-pointer">
                       {item.name}
-                    </a>
+                    </p>
                   </li>
                 ))}
               </ul>
 
               <div className="flex gap-4">
-                <Button size="md">
+                <Button size="md" onClick={() => openLocalPdf()}>
                   <div className="flex items-center gap-2">
                     <BsNewspaper />
                     Whitepaper

src/shared/components/home/AboutSection.tsx

@@ -8,7 +8,10 @@ const AboutSection = (props: Props) => {
   };
 
   return (
-    <div className="container mx-auto text-white py-20 flex relative">
+    <div
+      className="container mx-auto text-white py-20 flex relative"
+      id="about"
+    >
       <div className="flex flex-col justify-center gap-10 lg:w-1/2 w-full px-8">
         <div className="flex flex-col gap-4">
           <h4 className="text-5xl uppercase font-bold">What is SGPT?</h4>

src/shared/components/home/FirstSection.tsx

@@ -22,7 +22,10 @@ const FirstSection = () => {
     navigator.clipboard.writeText(address);
   };
   return (
-    <div className="min-h-screen flex bg-cover bg-center bg-no-repeat relative">
+    <div
+      className="min-h-screen flex bg-cover bg-center bg-no-repeat relative"
+      id="home"
+    >
       <div
         style={{ backgroundImage: `url(${robotBgr})` }}
         className="blur-sm absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"