Adding speaker option

Adding GDG Cloud Lahore logo and setting up the warap session

src/components/Carousel/items.tsx

@@ -1,24 +1,20 @@
-import Speaker1 from "../../assets/speakers/nabil_hadji_ahmed.jpeg";
-import Speaker2 from "../../assets/speakers/islem_amrouche.webp";
-import Speaker3 from "../../assets/speakers/metidji.jpg";
+import Speaker1 from "../../assets/speakers/1710409990588.jpeg"
+import Speaker2 from "../../assets/speakers/1690628753999.jpeg";
+// import Speaker3 from "../../assets/speakers/metidji.jpg";
 const items = [
   {
-    name: "Dr.Nabil Hadj-Ahmed",
-    bio: "Our speaker Dr.Nabil is a Google Cloud guru with 12 certifications and 20+ years of IT experience. He trains and guides teams on Google Cloud, and leads and speaks at Google Developers events. ",
+    name: "Sara Jane Kenny",
+    bio: "Algorand Developer Champion | BlockConnect Co-Founder",
     img: Speaker1,
-    color: "bg-yellow-500",
+    color: "bg-gdgyellow-500",
   },
+
   {
-    name: "Islem Amrouche",
-    bio: "Our second speaker Islem is a Full Stack Developer with experience in various technologies (Java EE, Django and React). He works as a Developer Analyst and has a solid background in networking.",
+    name: "Asad Raza",
+    bio: "OCNCF Ambassador | GDG Organizer | DevOps Engineer @Ascend healthcare",
     img: Speaker2,
     color: "bg-gdgred-500",
   },
-  {
-    name: "Mohamed Amine Metidji",
-    bio: "Amine is a Computer science student and a video editor working as a freelance frontend web developer.",
-    img: Speaker3,
-    color: "bg-gdgblue-500",
-  },
+
 ];
 export default items;

src/components/Footer/Footer.tsx

@@ -5,7 +5,7 @@ const Footer = () => {
         <footer id="footer" className="bottom-0 border-t border-gray-400/30 w-full p-12 lg:py-10 px-7 lg:px-16 bg-grey-900 flex flex-col lg:flex-row justify-center lg:justify-between lg:items-center w-max-full">
             <div className="flex flex-col lg:flex-row  lg:justify-between w-full items-first lg:items-center gap-12 lg:gap-2">
                 <div className="flex items-center gap-4">
-                    <img src={GDGLogo} className="w-8 h-8 dark:mix-blend-normal rounded-full" />
+                    <img src="/src/assets/121637837.png" className="w-8 h-8 dark:mix-blend-normal rounded-full" />
                     GDG Cloud Lahore
                 </div>
                 <div className="flex gap-4 ">

src/components/GGLIO-Wrap/Wrap.module.css

@@ -1,90 +1,86 @@
 /* Wrap.module.css */
 .wrapContainer {
-    width: 95%;
-    max-width: 100%;
-    border: 2px solid white;
-    background-color: #242424; /* Example color, replace with your actual color variable */
-    color: white;
-    border-radius: 8px;
-    margin: auto;
-    display: flex;
-    flex-direction: column;
-    min-height: 407px;
-  }
-  
-  @media (min-width: 768px) {
-    .wrapContainer {
+  width: 95%;
+  max-width: 100%;
+  border: 2px solid white;
+  background-color: #242424; /* Example color, replace with your actual color variable */
+  color: white;
+  border-radius: 8px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 407px;
+}
+
+@media (min-width: 768px) {
+  .wrapContainer {
       flex-direction: row;
-    }
-  }
-
-  .content {
-    padding: 2rem;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
   }
-
+}
+
+.content {
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.headline {
+  font-size: 30px;
+  margin-bottom: 1rem;
+  width: 85%;
+  line-height: 1.2;
+}
+
+@media (min-width: 768px) {
   .headline {
-    font-size: 30px;
-    margin-bottom: 1rem;
-    width: 85%;
-    line-height: 1.2;
-  }
-
-  @media (min-width: 768px) {
-    .headline {
       font-size: 62px;
       line-height: 64px;
       letter-spacing: -2.5px;
-    }
-  }
-
-  .contentDetails {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    flex: 1;
-    gap: 1rem;
-  }
-
-  .subscribeButton {
-    background-color: #007bff;
-    color: white;
-    padding: 0.75rem 1rem;
-    border-radius: 12px;
-    font-size: 20px;
-    line-height: 24px;
-    border: 2px transparent;
-    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
-  }
-
-  .subscribeButton:hover {
-    background-color: #0056b3;
-    color: black;
-    border-color: black;
   }
-
-  .imageContainer {
-    flex: 1; /* Ensures it takes available space in flex parent */
-    display: flex; /* Enables flexbox */
-    justify-content: flex-end; /* Aligns children (the image) to the right */
-    align-items: center; /* Centers children vertically */
-  }
-
-
+}
+
+.contentDetails {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  gap: 1rem;
+}
+
+.subscribeButton {
+  background-color: #007bff;
+  color: white;
+  padding: 0.75rem 1rem;
+  border-radius: 12px;
+  font-size: 20px;
+  line-height: 24px;
+  border: 2px transparent;
+  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+}
+
+.subscribeButton:hover {
+  background-color: #0056b3;
+  color: black;
+  border-color: black;
+}
+
+.imageContainer {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.responsiveImg {
+  width: 50%;
+  height: auto;
+  display: block;
+  margin: 0 auto;
+}
+
+@media (max-width: 768px) {
   .responsiveImg {
-    width: 50%;  /* Adjust this percentage based on your preference */
-    height: auto; /* Keeps the aspect ratio intact */
-    display: block;
-    margin: 0 auto; /* Centers the image horizontally */
+      width: 30%;  /* Smaller logo for mobile */
   }
-
-  @media (max-width: 768px) {
-    .responsiveImg {
-      display: none; /* Hides the image on mobile if that's still desired */
-    }
-  }
-
-
-
+}

src/components/Navbar/Navbar.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+
 const Navbar = () => {
     const [prevScrollPos, setPrevScrollPos] = useState(0);
     const [visible, setVisible] = useState(true);
@@ -17,14 +18,22 @@ const Navbar = () => {
             window.removeEventListener('scroll', handleScroll);
         };
     }, [prevScrollPos]);
+
     return (
-        <nav className={`p-3 py-6 border-b-2 dark:border-white border-black lg:p-6 w-full shadow-md sticky   z-50 bg-bglight dark:bg-bgdark  ${visible ? 'top-0' : '-top-24'} transition-all  duration-500 ease-in-out`}>
-            <div className="flex justify-between">
-                <div className="flex  items-center gap-2">
-                    <div className=""><a href="/"> Build With AI 2024</a></div>
-                </div>
+        <nav className={`p-3 py-6 border-b-2 dark:border-white border-black lg:p-6 w-full shadow-md sticky z-50 bg-bglight dark:bg-bgdark  ${visible ? 'top-0' : '-top-24'} transition-all duration-500 ease-in-out`}>
+            <div className="flex justify-between items-center">
+                <div className="flex items-center gap-2">
+                    {/* Logo can be an image or SVG */}
+                    <img src="/src/assets/121637837.png" className="w-8 h-8 dark:mix-blend-normal rounded-full"  alt="Logo"/> GDG Cloud Lahore | 
+                    <a href="/" className="text-lg font-bold">Build With AI 2024</a>
                 </div>
+                {/* Start Gemini Lab Button */}
+                <a href="https://github.com/GDGCloudLahore/Build-With-AI-Labs" className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-300">
+                    Start Gemini Lab
+                </a>
+            </div>
         </nav>
-    )
-}
-export default Navbar
+    );
+};
+
+export default Navbar;