Scroll to ID, not by height

UTDNebula · Apr 27, 2024 · d6f1146 · d6f1146
1 parent 0b67eab
commit d6f1146
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/WhoWeAre.tsx b/src/components/WhoWeAre.tsx
@@ -1,6 +1,9 @@
 function WhoWeAre() {
   return (
-    <div className="xl:pt-32 px-8 md:px-32 xl:px-64 flex justify-between flex-col lg:flex-row mx-auto font-inter gap-8 lg:gap-16 lg:text-left text-center my-16">
+    <div
+      id="who-we-are"
+      className="xl:pt-32 px-8 md:px-32 xl:px-64 flex justify-between flex-col lg:flex-row mx-auto font-inter gap-8 lg:gap-16 lg:text-left text-center my-16"
+    >
       <h1 className="font-bold lg:text-6xl text-2xl text-gradient leading-tight">
         Who&nbsp;We Are
       </h1>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -10,8 +10,11 @@ import CTA from '@/components/CTA';
 import Testimonials from '@/components/Testimonials';
 import Projects from '@/components/Projects';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 
 const Header = () => {
+  const router = useRouter();
+
   const [frames, bgStyles] = useBlobBg();
 
   return (
@@ -45,7 +48,7 @@ const Header = () => {
           src={Arrow}
           alt="Arrow"
           className="cursor-pointer hover:scale-105 transition-transform duration-300 ease-in-out [filter:_drop-shadow(0_0_4px_rgb(0_0_0_/_0.4))]"
-          onClick={() => window.scrollBy(0, window.innerHeight)}
+          onClick={() => router.replace('/#who-we-are')}
         />
       </div>
     </div>