Moved Nada's Hero code to new branch

components/Hero/CounterAtom.jsx

@@ -0,0 +1,16 @@
+import Image from "next/image";
+import Atom from "../../images/sectionsAssets/Atom.png";
+
+const CounterAtom = ({time, timeleft}) => {
+  return (
+    <div className="relative -mt-12">
+      <Image src={Atom} height={100} width={100} />
+      <div className="absolute top-1/4 right-1/3 text-xl">
+        <p className="font-bold text-center text-2xl">{timeleft}</p>
+        <p className="text-center text-sm">{time}</p>
+      </div>
+    </div>
+  );
+};
+
+export default CounterAtom;

components/Hero/CounterContainer.jsx

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+import getRemainingTime from '../../utils/countDownTimer'
+import CounterAtom from "./CounterAtom";
+const CounterContainer = ({ countDownLimit }) => {
+    const defaultRemainingTime = {
+        days: '00',
+        hours: '00',
+        minutes: '00',
+        seconds: '00',
+    }
+    const [remainingTime, setRemainingTime] = useState(defaultRemainingTime)
+    const updateRemainingTime = (countdown) => {
+        setRemainingTime(getRemainingTime(countdown))
+    }
+    useEffect(() => {
+        const timer = setInterval(() => {
+            updateRemainingTime(countDownLimit)
+        }, 1000)
+
+        return () => clearInterval(timer)
+    }, [countDownLimit])
+  return (
+    <div className="flex justify-center grow mt-12 lg:mt-0">
+      <div className="flex flex-col items-center gap-16 lg:gap-8 lg:flex-row 2xl:gap-24">
+        <CounterAtom time="Days" timeleft={remainingTime.days}/>
+        <CounterAtom time="Hrs" timeleft={remainingTime.hours}/>
+        <CounterAtom time="Mins" timeleft={remainingTime.minutes}/>
+        <CounterAtom time="Secs" timeleft={remainingTime.seconds}/>
+      </div>
+    </div>
+  );
+};
+
+export default CounterContainer;

components/Hero/Index.jsx

@@ -1,6 +1,72 @@
-
+import Image from "next/image";
+import Navbar from "./Navbar";
+import Qiskit from "../../images/logos/QiskitHero.png";
+import Arrow from "../../images/shapes/Arrow.png";
+import GDGAlgiers from "../../images/logos/GDGAlgiers-white.png";
+import CounterContainer from "./CounterContainer";
+import Maqam from "../../images/shapes/MaqamWhite.png";
+import Atom from "../../images/shapes/atomWhite.png";
+import Globe from "../../images/shapes/globe.png";
+import Computer from "../../images/shapes/computerWhite.png";
+import Purpulebutton from '../shared/Purpulebutton'
 const Hero = () => {
-    return <div></div>
-}
+  return (
+    <div className="min-h-screen hero-bg">
+      <div className="section-container">
+        <Navbar />
+        <div className="flex flex-col gap-16 lg:gap-0 relative">
+          <div className="w-12 h-12 absolute top-1/4 left-4 lg:top-4 lg:left-4">
+            <Image src={Atom} />
+          </div>
+          <div className="w-12 h-12 absolute top-12 left-[90%] lg:top-4 lg:left-1/4">
+            <Image src={Globe} />
+          </div>
+          <div className="hidden lg:block w-16 h-16 absolute top-4 right-16">
+            <Image src={Maqam} />
+          </div>
+          <div className="flex flex-col lg:flex-row items-center ">
+            <div className="flex flex-col gap-7 flex-1 lg:pl-12 text-qiskit-white">
+              <h1 className="font-bold text-4xl lg:text-6xl 2xl:text-7xl leading-[4.5rem]">
+                Qiskit | Fall Fest Algiers
+              </h1>
+              <p className="font-medium leading-[2rem] lg:text-2xl 2xl:text-4xl 2xl:leading-[2.875rem]">
+                Your chance to discover the Quantum Computing world!
+              </p>
+              <div className="flex items-end">
+                <div className="h-[67px] w-[67px]">
+                  <Image src={Arrow} />
+                </div>
+                <div className="mb-[-50px]">
+                  <Purpulebutton title={"Register Now!"}/>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex-1 pt-20 lg:pt-0 order-first lg:order-last">
+              <Image src={Qiskit} />
+            </div>
+          </div>
+
+          <div className="flex items-center">
+            <div className="hidden lg:flex">
+              <Image src={GDGAlgiers} />
+            </div>
+            <CounterContainer countDownLimit={1665158400000} />
+          </div>
+
+          <div className="w-12 h-12 absolute bottom-16 left-8">
+            <Image src={Atom} />
+          </div>
+          <div className="hidden lg:block w-12 h-12 absolute bottom-1/4 right-8">
+            <Image src={Globe} />
+          </div>
+          <div className="hidden lg:block w-12 h-12 absolute bottom-1/4 right-2/4">
+            <Image src={Computer} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-export default Hero
+export default Hero;

components/Hero/Navbar.jsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import Image from "next/image";
+import WTMAlgiers from "../../images/logos/WTMAlgiers-white.png";
+import NavLinks from "./links";
+import Bluebutton from "../shared/Bluebutton";
+const Navbar = () => {
+  const [isNavToggled, setIsNavToggled] = useState(false);
+  return (
+    <header className="pt-8 lg:pt-1 flex flex-col gap-8">
+      {/* Desktop menu */}
+      <div>
+        <div className="flex justify-between items-center">
+          <div>
+            <Image src={WTMAlgiers} alt="WTM Algiers" />
+          </div>
+
+          <ul className="hidden lg:flex items-center text-xl gap-16 font-medium text-qiskit-white 2xl:text-4xl 2xl:gap-24">
+            {NavLinks.map((navLink, idx) => {
+              return (
+                <li key={idx} className="cursor-pointer hover:text-qiskit-yellow transition-all duration-700 relative">
+                  {navLink.content == "Home" && (
+                    <div className="absolute left-0 -bottom-[4px] h-[5px] w-4/6 bg-qiskit-white"></div>
+                  )}
+                  <p>{navLink.content}</p>
+                </li>
+              );
+            })}
+          </ul>
+
+          <div className="hidden lg:flex">
+            <Bluebutton title={"Join us"}/>
+          </div>
+
+          <div onClick={() => setIsNavToggled(!isNavToggled)} className="flex flex-col cursor-pointer gap-2 lg:hidden">
+            <div className="burger-line"></div>
+            <div className="burger-line"></div>
+            <div className="burger-line"></div>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile menu */}
+      {isNavToggled && (
+        <div className="flex flex-col items-center lg:hidden">
+          <ul className="flex flex-col items-center text-xl gap-16 font-medium text-qiskit-white 2xl:text-4xl 2xl:gap-24">
+            {NavLinks.map((navLink, idx) => {
+              return (
+                <li key={idx} className="cursor-pointer relative transition-all duration-700 hover:text-qiskit-yellow">
+                  {navLink.content == "Home" && (
+                    <div className="absolute left-2 -bottom-[4px] h-[5px] w-4/6 bg-qiskit-white"></div>
+                  )}
+                  <p>{navLink.content}</p>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
+    </header>
+  );
+};
+
+export default Navbar;

components/Hero/links.js

@@ -0,0 +1,24 @@
+const navLinks = [
+  {
+    content: "Home",
+    redirect: "/",
+  },
+  {
+    content: "About",
+    redirect: "/",
+  },
+  {
+    content: "Partners",
+    redirect: "/",
+  },
+  {
+    content: "Speakers",
+    redirect: "/",
+  },
+  {
+    content: "Agenda",
+    redirect: "/",
+  },
+];
+
+export default navLinks;

components/shared/Bluebutton.jsx

@@ -0,0 +1,15 @@
+const Bluebutton = ({ title }) => {
+    return (
+      <button className="z-20 mb-[-20px]">
+        <div className="bg-[url('/hero/blue_button.svg')] bg-no-repeat bg-center bg-cover z-10">
+          <div className="h-1/6 mx-[25px] pb-2 flex justify-center">
+            <div className="sm:h-[100px] h-[70px] sm:text-3xl sm:font-medium text-l pt-[20px] sm:pt-[30px]">{title}</div>
+          </div>
+        </div>
+      </button>
+    );
+  };
+
+  export default Bluebutton;
+
+

components/shared/Purpulebutton.jsx

@@ -0,0 +1,13 @@
+const Button = ({ title }) => {
+    return (
+      <button className="z-2">
+        <div className="bg-[url('/hero/purpule_button.svg')] bg-no-repeat bg-center bg-contain z-10">
+          <div className=" place-content-center flex justify-center">
+            <div className="h-[90px] md:h-[110px] 2xl:h-[200px] mx-[40px] md:mx-[40px] 2xl:mx-[60px] sm:font-medium text-qiskit-white text-[17px]  2xl:text-[24px] pt-[30px] md:pt-[40px] 2xl:pt-[80px] sm:pt-[30px]">{title}</div>
+          </div>
+        </div>
+      </button>
+    );
+  };
+
+  export default Button;

pages/index.jsx

@@ -6,7 +6,7 @@ import SectionTitle from "../components/shared/SectionTitle";
 import AboutEvent from "../components/AboutEvent/Index";
 import YellowButton from "../components/shared/YellowButton";
 import Footer from "../components/Footer/Index";
-
+import Hero from '../components/Hero/Index'
 export default function Home() {
 
   return (
@@ -23,6 +23,7 @@ export default function Home() {
         />
 
       </Head>
+      <Hero />
       <main className="section-container font-IBM-Plex">
         <AboutEvent />
         <TheyTrustedUs />

styles/globals.css

@@ -5,7 +5,20 @@
 .section-container {
   @apply px-4 lg:px-11 2xl:px-16;
 }
-
+.burger-line {
+  @apply h-1 w-11 bg-qiskit-white rounded
+}
+.hero-bg {
+  background: radial-gradient(
+    137.29% 137.29% at 50% 50%,
+    #82cfff 0%,
+    #7cc7f7 3.4%,
+    #398ac4 34.91%,
+    #215178 61.05%,
+    #093256 80.54%,
+    #00264a 91.18%
+  );
+}
 .footer-bg {
   background: radial-gradient(
     137.29% 137.29% at 50% 50%,
@@ -17,5 +30,3 @@
     #00264a 91.18%
   );
 }
-
-

utils/countDownTimer.js

@@ -0,0 +1,44 @@
+import dayjs from "dayjs";
+
+const getRemainingDays = (nowDayjs, timestampDayjs) => {
+  const days = timestampDayjs.diff(nowDayjs, "days");
+  return days.toString();
+};
+
+const addZeros = (time, minLength) => {
+  const timeString = time.toString();
+  if (timeString.length >= minLength) return timeString;
+  return "0".repeat(minLength - timeString.length) + timeString;
+};
+
+const getRemainingSeconds = (nowDayjs, timestampDayjs) => {
+  const seconds = timestampDayjs.diff(nowDayjs, "seconds") % 60;
+  return addZeros(seconds, 2);
+};
+const getRemainingMinutes = (nowDayjs, timestampDayjs) => {
+  const minutes = timestampDayjs.diff(nowDayjs, "minutes") % 60;
+  return addZeros(minutes, 2);
+};
+const getRemainingHours = (nowDayjs, timestampDayjs) => {
+  const hours = timestampDayjs.diff(nowDayjs, "hours") % 24;
+  return addZeros(hours, 2);
+};
+
+export default function getRemainingTime(timestamp) {
+  const timestampDayjs = dayjs(timestamp);
+  const nowDayjs = dayjs();
+  if (timestampDayjs.isBefore(nowDayjs)) {
+    return {
+      seconds: "00",
+      minutes: "00",
+      hours: "00",
+      days: "00",
+    };
+  }
+  return {
+    seconds: getRemainingSeconds(nowDayjs, timestampDayjs),
+    minutes: getRemainingMinutes(nowDayjs, timestampDayjs),
+    hours: getRemainingHours(nowDayjs, timestampDayjs),
+    days: getRemainingDays(nowDayjs, timestampDayjs),
+  };
+}