Merge pull request #4 from ahmnouira/dev

Dev

components/About/index.tsx

@@ -55,7 +55,7 @@ const About = () => {
   };
 
   return (
-    <section id="about" className={styles.about}>
+    <section id="about-us" className={styles.about}>
       <div className={styles['about-header']}>
         <h3>About Us</h3>
         <p>A top-tier team deeply experienced in real estate, startups, and technology.</p>

components/Navbar/index.tsx

@@ -39,8 +39,7 @@ const Navbar: React.FC<NavbarProps> = ({
     },
     {
       text: 'About us',
-      onClick: () => handleAboutUsClick(),
-      path: '/?about=true',
+      path: '/?about-us=true',
     },
     {
       text: 'Careers',
@@ -57,16 +56,6 @@ const Navbar: React.FC<NavbarProps> = ({
     },
   ];
 
-  const handleAboutUsClick = () => {
-    router.pathname !== '/' && router.push('/?about=true');
-    router.pathname === '/' && handleMoveToId('about');
-  };
-
-  const handleButtonClick = () => {
-    router.pathname !== '/' && router.push('/?cta=true');
-    router.pathname === '/' && handleMoveToId();
-  };
-
   const [activeLogoColor, setActiveLogoColor] = useState('');
 
   if (!activeLogoColor) setActiveLogoColor(logoColor);

components/Pillars/index.tsx

@@ -54,24 +54,26 @@ const Pillars = () => {
     <section className={styles.pillars}>
       <h3>Our Pillars</h3>
       <div className={styles['pillars-content']}>
-        {pillarCardsContent.map(({ title, subtitle, description, image, path }, index) => {
-          const isLast = index === pillarCardsContent.length - 1;
-          return (
-            <Grid item xs={12} sm={6} lg={3} key={index}>
-              <div
-                onClick={isLast ? handleNavigate : undefined}
-                style={{ cursor: isLast ? 'pointer' : 'default', width: '100%' }}>
-                <PillarCard
-                  title={title}
-                  subtitle={subtitle}
-                  description={description}
-                  imageSrc={image}
-                  styles={styles}
-                />
-              </div>
-            </Grid>
-          );
-        })}
+        <Grid container>
+          {pillarCardsContent.map(({ title, subtitle, description, image, path }, index) => {
+            const isLast = index === pillarCardsContent.length - 1;
+            return (
+              <Grid item xs={12} sm={6} lg={3} key={index}>
+                <div
+                  onClick={isLast ? handleNavigate : undefined}
+                  style={{ cursor: isLast ? 'pointer' : 'default', width: '100%' }}>
+                  <PillarCard
+                    title={title}
+                    subtitle={subtitle}
+                    description={description}
+                    imageSrc={image}
+                    styles={styles}
+                  />
+                </div>
+              </Grid>
+            );
+          })}
+        </Grid>
       </div>
     </section>
   );

components/Sidebar/index.tsx

@@ -17,7 +17,7 @@ import { useRouter } from 'next/router';
 const options = [
   { title: 'Get Started' },
   { title: 'Sponsors', link: '/sponsor' },
-  { title: 'About us', link: '/?about=true' },
+  { title: 'About us', link: '/?about-us=true' },
   { title: 'Careers', link: '/career' },
 ];
 
@@ -28,6 +28,11 @@ const Sidebar: React.FC<any> = ({ setOpen, open }) => {
     router.pathname === '/' && handleMoveToId();
   };
 
+  const handleAboutUsClick = () => {
+    router.pathname !== '/' && router.push('/?about-us=true');
+    router.pathname === '/' && handleMoveToId('about-us');
+  };
+
   const list = () => (
     <Box sx={{ width: 250 }} role="presentation">
       <div
@@ -54,7 +59,7 @@ const Sidebar: React.FC<any> = ({ setOpen, open }) => {
             <ListItemText>
               {option.link ? (
                 <Link href={option.link}>
-                  <a>{option.title}</a>
+                  <a onClick={option.title === 'About us' ? handleAboutUsClick : undefined}>{option.title}</a>
                 </Link>
               ) : (
                 <a onClick={handleButtonClick}>{option.title}</a>

components/Sponsor/Banner/Banner.module.scss

@@ -64,7 +64,7 @@
     font-weight: 600;
     font-size: 20px;
     line-height: 26px;
-    color: #6e7176;
+    color: black;
   }
 }
 

pages/index.tsx

@@ -12,10 +12,18 @@ const Home: NextPage = () => {
   const router = useRouter();
 
   useEffect(() => {
-    if (router.query.cta) {
-      handleMoveToId('cta');
-    } else if (router.query.about) handleMoveToId('about');
-  }, [router]);
+    const timeout = setTimeout(() => {
+      if (router.query.cta) {
+        handleMoveToId('cta');
+      } else if (router.query['about-us']) {
+        handleMoveToId('about-us');
+      }
+    }, 200);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [router.query]);
 
   return (
     <MainLayout

utils/index.ts

@@ -1,9 +1,10 @@
 import { scroller } from 'react-scroll';
 
-export const handleMoveToId = (id: string = 'cta') => {
+export const handleMoveToId = (id: string = 'cta', offset: number = -85) => {
+  // const element = document.querySelector(`#${id}`);
   scroller.scrollTo(id, {
     smooth: true,
-    offset: -85,
+    offset,
     duration: 200,
     delay: 0,
   });