add links

Author: jamest0

components/About/index.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 
 const About = () => {
   return (
-    <section className="py-8 xl:px-24 px-10">
+    <section className="py-8 xl:px-24 px-10" id="about">
       <div className="text-center my-10">
         <p className="text-[#3977F8] font-game text-xl">01</p>
         <h1 className="font-bold text-6xl">ABOUT</h1>

components/Landing/index.tsx

@@ -2,7 +2,7 @@ import Navbar from "../Navbar";
 
 const Landing = () => {
   return (
-    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5">
+    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5" id="landing">
       <Navbar />
       <div className="flex justify-between items-end">
         <div>

components/Navbar.tsx

@@ -1,30 +1,31 @@
 import Image from "next/image";
+import Link from "next/link";
 
 const Navbar = () => {
   return (
     <nav className="flex justify-between items-center">
-      <div>
+      <Link href="#landing">
         <Image src="/assets/csesoc_logo.svg" alt="CSESoc Logo" width={200} height={200} draggable={false} />
         <p className="mt-3 text-xs">C:\INTERNAL STRUCTURE\HOME</p>
-      </div>
+      </Link>
       <div>
         <div className="md:flex xl:gap-36 lg:gap-20 md:gap-10 text-right font-bold hidden">
-          <div>
+          <Link href="#about">
             <p className="text-[0.6rem] text-[#C4C5C8]">01</p>
             <div>{"//"} about us</div>
-          </div>
-          <div>
+          </Link>
+          <Link href="#events">
             <p className="text-[0.6rem] text-[#C4C5C8]">02</p>
             <div>{"//"} events</div>
-          </div>
-          <div>
+          </Link>
+          <Link href="#resources">
             <p className="text-[0.6rem] text-[#C4C5C8]">03</p>
             <div>{"//"} resources</div>
-          </div>
-          <div>
+          </Link>
+          <Link href="#sponsors">
             <p className="text-[0.6rem] text-[#C4C5C8]">04</p>
             <div>{"//"} sponsors</div>
-          </div>
+          </Link>
         </div>
       </div>
     </nav>

styles/globals.css

@@ -2,6 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+html, body {
+  scroll-behavior: smooth;
+}
 
 body {
   color: white;