Merge pull request #247 from OliaKr/whatnow-scroll

Adding a scroll behavior for a button
Maakaf · Apr 18, 2024 · e061b18 · e061b18
2 parents 7210ea7 + 441d2d9
commit e061b18
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/components/Home/WhatNow.tsx b/components/Home/WhatNow.tsx
@@ -1,9 +1,25 @@
+'use client';
 import React from 'react';
 import SectionTitle from '../Common/SectionTitle';
 import { useTranslations } from 'next-intl';
 
 function WhatNow() {
   const t = useTranslations('Components.home.whatNow');
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    const targetId = e.currentTarget.getAttribute('href');
+    if (targetId) {
+      const targetElement = document.querySelector(targetId) as HTMLElement; // Type assertion
+      if (targetElement) {
+        window.scrollTo({
+          top: targetElement.offsetTop,
+          behavior: 'smooth',
+        });
+      }
+    }
+  };
+
   return (
     <div className="relative flex flex-col justify-around gap-3 pb-10 mt-36">
       <div className="hidden sm:flex flex-col gap-2 items-center sm:flex-row-reverse sm:justify-end">
@@ -20,12 +36,14 @@ function WhatNow() {
       </div>
       <div className="flex flex-col gap-7 sm:pr-4 sm:flex-wrap sm:content-end ">
         <h4 className="sm:w-1/2 sm:pl-6 h4-roman">{t('paragraph')}</h4>
-        <button
+        <a
+          href="#paths"
           data-testid={`whatNowButton`}
-          className="bg-purple-400 dark:bg-purple-500 text-white body-bold px-6 py-3.5 sm:w-1/6 sm:rounded-full rounded-md sm:mx-0 mx-5"
+          className="bg-purple-400 dark:bg-purple-500 text-white body-bold px-6 py-3.5 sm:w-1/6 sm:rounded-full rounded-md sm:mx-0 mx-5 flex items-center justify-center" // Added flex, items-center, and justify-center
+          onClick={handleClick}
         >
           {t('startButton')}
-        </button>
+        </a>
       </div>
     </div>
   );

diff --git a/components/Paths/Paths.tsx b/components/Paths/Paths.tsx
@@ -41,7 +41,10 @@ const variants = {
 
 export default function Paths() {
   return (
-    <section className="flex flex-col justify-start py-32 darkmode-section">
+    <section
+      id="paths"
+      className="flex flex-col justify-start py-32 darkmode-section"
+    >
       <div
         data-testid={`pathsTitle`}
         className="flex flex-col-reverse md:flex-row self-start md:items-center"