Update Theme of Website

components/AboutEvent/Index.jsx

@@ -9,7 +9,7 @@ import computer from "../../images/shapes/computer.png";
 
 const AboutEvent = () => {
     return (
-    <section id="about-event" className="section-container pt-12 lg:pt-24"> 
+    <section id="about-event" className="px-4 bg-qiskit-black/95 lg:px-11 2xl:px-16 pt-12 lg:pt-24"> 
       <div className="relative">
         <div className="absolute right-0 top-0 sm:right-[596px] sm:top-0 w-[28px] h-[30px]  lg:w-[47px] lg:h-[50px] 2xl:w-[70px] 2xl:h-[70px]">
           <Image 
@@ -59,14 +59,14 @@ const AboutEvent = () => {
         <div className= "gap-8 row-2 lg:columns-2 mt-[50px]">
           <div><Image src={Map} alt="" /></div>
           <div className="gap-8 rows-2 p-4 sm:p-10">
-            <p className="text-xl 2xl:text-3xl lg:text-2xl"><b>The Qiskit Fall Fest</b> is a collection of quantum computing events on college campuses around the world, with support from the entire IBM Quantum team. This year <b>WTM Algiers</b> is one of the 34 communities which are hosting the Qiskit Fall Fest event.</p>
+            <p className="text-xl 2xl:text-3xl lg:text-2xl text-qiskit-white"><b>The Qiskit Fall Fest</b> is a collection of quantum computing events on college campuses around the world, with support from the entire IBM Quantum team. This year <b>WTM Algiers</b> is one of the 34 communities which are hosting the Qiskit Fall Fest event.</p>
             <div className="gap-4 columns-2 2xl:text-4xl lg:text-3xl text-xl font-bold mt-[15px] pr-2">
-              <div className="flex-row">
+              <div className="flex-row text-qiskit-white">
                 <p className="2xl:text-7xl lg:text-6xl text-2xl">1ST</p>
                 <p className="2xl:text-4xl lg:text-3xl sm:text-xl text-base">In Africa and</p>
                 <p className="2xl:text-4xl lg:text-3xl sm:text-xl text-base">MENA Region</p>
               </div>
-              <div className="flex items-start gap-2 ">
+              <div className="flex items-start gap-2 text-qiskit-white">
                 <p className="2xl:text-7xl lg:text-6xl text-2xl">+8</p>
                 <p className="2xl:text-4xl lg:text-3xl sm:text-xl text-base mt-[25px]">Talks Workshops Challenges</p>
               </div>

components/AboutUs/Index.jsx

@@ -10,7 +10,7 @@ const AboutUs = () => {
     <section id="about-us">
       {/* <div className=" z-0 h-[100px] max-w-[100%] bg-gradient-to-t from-[#3177ab] to-qiskit-white"></div> */}
 
-      <div className="relative about-bg py-16">
+      <div className="relative bg-qiskit-black/95 py-16">
         <div className="absolute top-1/4 right-4 lg:w-[55px] h-[32px] w-[32px] lg:h-[55px] 2xl:w-[82px] 2xl:h-[82px]">
           <Image src={globe} layout="fill" />
         </div>
@@ -24,11 +24,9 @@ const AboutUs = () => {
         </div>
         <div className="w-10/12 mx-auto flex flex-col gap-8">
           <SectionTitle isWhite={true} title={"About us"} />
-          <div className="flex flex-col gap-12 lg:gap-28">
+          <div className="flex flex-col gap-12 lg:gap-28 text-qiskit-white">
             <ParagSection
-              keyword1={"WTM Algiers "}
-              paragraph1={`also known as the "Women Techmakers Algiers" program, was created to increase visibility, community, and resources for women in technology and also spread learning and build role models globally. It's located at`}
-              keyword2={" the National Higher School of Computer science "}
+              paragraph1={`WTA also known as the "Women Techmakers Algiers" program, was created to increase visibility, community, and resources for women in technology and also spread learning and build role models globally. It's located at  the National Higher School of Computer science`}
               paragraph2={`and dedicated to anyone who's passionate and motivated about the tech field.`}
               img={WTM}
               reverse={false}

components/Agenda/Index.jsx

@@ -9,7 +9,7 @@ import YellowButton from "../shared/YellowButton";
 
 const Agenda = () => {
   return (
-    <section id="agenda" className="relative section-container">
+    <section id="agenda" className="px-4 lg:px-11 2xl:px-16 bg-qiskit-black/95 relative ">
       <SectionTitle title={"Agenda"}> </SectionTitle>
       <div className="md:hidden visible absolute left-0 top-0 z-25 sm:w-[80px] sm:h-[80px] w-[50px] h-[50px]">
         <Image src={atom} alt="maqam chahid" layout="fill" />
@@ -29,7 +29,7 @@ const Agenda = () => {
 
         <div className="col-span-4 flex flex-col justify-center mt-[20px]">
           <YellowButton title={"Saturday, October 22nd"} />
-          <div className=" bg-qiskit-blue-lighter  bg-opacity-40 justify-center w-full md:pl-[50px] pl-[10px] mb-20 pr-[10px] md:pr-[30px] lg:py-[80px] md:py[70px] py-8 border-4 md:border-8 md:mt-[-30px] mt-[-10px]">
+          <div className=" bg-qiskit-blue-normal bg-opacity-90 justify-center w-full md:pl-[50px] pl-[10px] mb-20 pr-[10px] md:pr-[30px] lg:py-[80px] md:py[70px] py-8 border-4 md:border-8 md:mt-[-30px] mt-[-10px]">
             <div className="">
               <div className=" sm:text-xl font-medium md:font-semibold text-xs md:px[10px] ">
                 <div className="flew flex-row">

components/Footer/Index.jsx

@@ -10,14 +10,14 @@ import Tilt from "react-parallax-tilt";
 
 const Footer = () => {
   return (
-    <footer className="mt-32 footer-bg text-qiskit-white flex flex-col gap-6 relative">
+    <footer className="bg-qiskit-blue-normal text-qiskit-white flex flex-col gap-6 relative">
       <div className="hidden lg:block absolute top-4 left-[33rem]">
         <Image src={GlobeShape} height={42} width={42} />
       </div>
       <div className="flex flex-col items-center lg:items-start lg:flex-row">
         <div className="cursor-pointer -mt-16 order-first lg:order-last ">
           <Tilt>
-            <Image src={Qiskit} alt="Qiskit Fall Fest Algiers" />
+            {/* <Image src={Qiskit} alt="Qiskit Fall Fest Algiers" /> */}
           </Tilt>
         </div>
         <div className="pt-14 pl-4 pr-4 lg:pl-11 lg:pr-0 2xl:pl-16">

components/Hero/Index.jsx

@@ -13,10 +13,10 @@ import Tilt from "react-parallax-tilt";
 import Typewriter from "typewriter-effect";
 const Hero = () => {
   return (
-    <section id="home" className="min-h-screen hero-bg">
-      <div className="section-container pb-24 md:pb-0">
+    <section  className="min-h-screen hero-bg bg-qiskit-black/95">
+      <div className="section-container md:pb-0 md:h-[1000px] lg:h-[700px]">
         <Navbar />
-        <div className="flex flex-col gap-16 lg:gap-0 relative">
+        <div className="flex flex-col gap-16  lg:mt-28 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>
@@ -40,7 +40,7 @@ const Hero = () => {
               <p className="font-medium text-center lg:text-left leading-[2rem] lg:text-2xl 2xl:text-4xl 2xl:leading-[2.875rem]">
                 Your chance to showcase your skills!
               </p>
-              <div className="flex items-end">
+              <div className="flex items-end lg:mt-20">
                 <div className="relative h-[67px] bounce w-[67px] 2xl:w-[101px] 2xl:h-[114px] 2xl:mb-[70px]">
                   <Image src={Arrow} layout="fill" />
                 </div>
@@ -52,7 +52,7 @@ const Hero = () => {
 
             <div className="flex-1 pt-20 lg:pt-0 order-first lg:order-last">
               <Tilt>
-                <Image src={Qiskit} />
+                {/* <Image src={Qiskit} /> */}
               </Tilt>
             </div>
           </div>

components/Hero/Navbar.jsx

@@ -7,7 +7,7 @@ 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">
+    <header className=" lg:pt-1 flex flex-col gap-8">
       {/* Desktop menu */}
       <div>
         <div className="flex justify-between items-center">

components/OurPartners/Index.jsx

@@ -18,7 +18,7 @@ const OurPartners = () => {
     }
   ];
   return (
-    <section id="our-partners" className="section-container pt-12 lg:pt-24">
+    <section id="our-partners" className="px-4 lg:px-11 2xl:px-16 bg-qiskit-black/95 pt-12 lg:pt-24">
       <SectionTitle title={"Our Partners"} />
       <div className="flex flex-row">
         <div className=" w-1/12 ml-6">
@@ -33,7 +33,7 @@ const OurPartners = () => {
           </div>
         </div>
         <div className="w-10/12">
-          <div className="flex flex-wrap items-center justify-center">
+          <div className="flex flex-wrap items-center justify-center text-qiskit-white">
             {partners.map((partner, index) => (
               <div
                 key={index}

components/OurSpeakers/Index.jsx

@@ -16,7 +16,7 @@ const OurSpeakers = () => {
   const swiperRef = useRef(null);
 
   return (
-    <section id="speakers" className="relative section-container">
+    <section id="speakers" className="relative bg-qiskit-black/95 px-4 lg:px-11 2xl:px-16">
       <div className="mb-12 lg:mb-0">
         <SectionTitle title={"Our Speakers"} /> 
       </div>

components/TheyTrustedUs/Index.jsx

@@ -11,7 +11,7 @@ import Sonatrach from "../../images/logos/Sonatrach.png";
 
 const TheyTrustedUs = () => {
   return (
-    <section id="our-sponsors" className="section-container lg:pt-16">
+    <section id="our-sponsors" className="px-4 lg:px-11 2xl:px-16 bg-qiskit-black/95 lg:pt-16">
       <div className="relative">
         <div className="mt-24 lg:mt-7 2xl:mt-12 ">
           <SectionTitle title={"They trusted us"} />
@@ -33,7 +33,7 @@ const TheyTrustedUs = () => {
 
         <div className="flex flex-col justify-center gap-9 2xl:ml-52 lg:ml-40 lg:flex-row lg:mt-20 lg:gap-28 w-3/4 mx-auto  2xl:flex-row 2xl:mt-32 2xl:gap-40">
           <div className="mt-8 h-16 w-44 lg:w-[22rem] lg:h-36 2xl:h-44 2xl:w-[33rem]">
-            <Image src={qBraid} alt="qbraid logo" />
+            <Image src={qBraid} alt="qbraid logo" className=" text-qiskit-white border-4 border-qiskit-white" />
           </div>
 
           {/* <div className="lg:mt-10">

styles/globals.css

@@ -4,6 +4,10 @@
 
 .section-container {
   @apply px-4 lg:px-11 2xl:px-16;
+  background-image: url('../images/hero/Hero_image.jpg');
+  background-repeat: no-repeat;
+  background-position: 50% 10%;
+  background-size: 120% auto; /* Adjust size of the background */
 }
 
 .about-bg {
@@ -22,7 +26,7 @@
 .burger-line {
   @apply h-1 w-11 bg-qiskit-white rounded;
 }
-.hero-bg {
+/* .hero-bg {
   background: radial-gradient(
     137.29% 137.29% at 50% 50%,
     #82cfff 0%,
@@ -32,7 +36,7 @@
     #093256 80.54%,
     #00264a 91.18%
   );
-}
+} */
 .footer-bg {
   background: radial-gradient(
     137.29% 137.29% at 50% 50%,

yarn.lock

@@ -68,15 +68,10 @@
   dependencies:
     glob "7.1.7"
 
-"@next/swc-linux-x64-gnu@12.3.1":
+"@next/swc-win32-x64-msvc@12.3.1":
   version "12.3.1"
-  resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.1.tgz"
-  integrity sha512-JWEaMyvNrXuM3dyy9Pp5cFPuSSvG82+yABqsWugjWlvfmnlnx9HOQZY23bFq3cNghy5V/t0iPb6cffzRWylgsA==
-
-"@next/[email protected]":
-  version "12.3.1"
-  resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.1.tgz"
-  integrity sha512-xoEWQQ71waWc4BZcOjmatuvPUXKTv6MbIFzpm4LFeCHsg2iwai0ILmNXf81rJR+L1Wb9ifEke2sQpZSPNz1Iyg==
+  resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.1.tgz"
+  integrity sha512-W1ijvzzg+kPEX6LAc+50EYYSEo0FVu7dmTE+t+DM4iOLqgGHoW9uYSz9wCVdkXOEEMP9xhXfGpcSxsfDucyPkA==
 
 "@nodelib/[email protected]":
   version "2.1.5"