site updated

GDGCloudLahore · Apr 19, 2024 · 6cda8d1 · 6cda8d1
1 parent 3dfa8ba
commit 6cda8d1
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 44 deletions.
diff --git a/src/assets/zaid.jpeg b/src/assets/zaid.jpeg
diff --git a/src/components/Carousel/TeamCarousel.tsx b/src/components/Carousel/TeamCarousel.tsx
@@ -7,20 +7,9 @@ const TeamCarousel = () => {
         <div id="content" className='mx-2 w-11/12 p-2 flex flex-col items-center justify-center'>
             <div className='w-full lg:w-4/5 flex flex-col items-center gap-4'>
                 <div className='text-4xl font-bold'>Meet Our Team</div>
-                <Carousel loop={true} placeholder={<div>Loading...</div>}>
+                <Carousel loop={true} autoplay={true} autoplayDelay={2500} placeholder={<div>Loading...</div>}>
                     {team.map((member, index) => {
                         return (
-                            // <div className={`${member.color} rounded-3xl text-white border-2 border-transparent hover:border-black dark:hover:border-white h-full w-full flex flex-col items-center justify-center gap-5 p-12`}
-                            //     key={index} >
-                            //     <img
-                            //         src={member.img}
-                            //         alt={`image ${index + 1}`}
-                            //         className="object-cover w-32 h-32 rounded-full border-4"
-                            //     />
-                            //     <div className="text-3xl font-bold">{member.name}</div>
-                            //     <a href="" className="hover:text-gray-500 dark:hover:text-gray-500"><FaLinkedin size={32} /></a>
-                            //     <div>{member.bio}</div>
-                            // </div>
                             <div className={`${member.color} rounded-3xl text-white border-2 border-transparent hover:border-black dark:hover:border-white h-full w-full flex flex-col items-center justify-center gap-5 p-12`} key={index}>
                             <img
                               src={member.img}

diff --git a/src/components/Carousel/team.tsx b/src/components/Carousel/team.tsx
@@ -1,8 +1,11 @@
 import TeamMember1 from "../../assets/asad.jpeg";
 import TeamMember2 from "../../assets/adil.jpeg";
 import TeamMember3 from "../../assets/moez.jpeg";
-import TeamMember4 from "../../assets/daanyal.jpeg";
-import TeamMember5 from "../../assets/bilal.jpeg";
+import TeamMember4 from "../../assets/zaid.jpeg";
+import TeamMember5 from "../../assets/daanyal.jpeg";
+import TeamMember6 from "../../assets/bilal.jpeg";
+// import TeamMember7 from "../../assets/bilal.jpeg";
+// import TeamMember8 from "../../assets/bilal.jpeg";
 
 const team = [
   {
@@ -26,19 +29,40 @@ const team = [
     img: TeamMember3,
     color: "bg-gdgblue-500",
   },
+  {
+    name: "Mr. Zaid Bari",
+    linkedin: "https://www.linkedin.com/in/itszbari/",
+    bio: "Project Manager @ InstoreX ApS ¦ Founder & Lead @Google Developer Groups Nicosia",
+    img: TeamMember4,
+    color: "bg-gdggreen-500",
+  },
   {
     name: "Mr. Daanyal Rahila Memon",
     linkedin: "https://www.linkedin.com/in/daanyal-rahila-memon/",
     bio: "Google Cloud Lahore Web Team Lead | LFX & CNCF | KCD Lahore | Backend Developer | TypeScript | NestJS | TypeORM | GraphQL | PostgreSQL | MERN Stack Developer | Blockchain Enthusiast",
-    img: TeamMember4,
-    color: "bg-gdggreen-500",
+    img: TeamMember5,
+    color: "bg-yellow-500",
   },
   {
     name: "Mr. Muhammad Bilal",
     linkedin: "https://www.linkedin.com/in/mbilal56/",
     bio: "Full-Stack Developer | Specializing in React, Next.js, Web 3.0, and AWS Solutions",
-    img: TeamMember5,
-    color: "bg-yellow-500",
+    img: TeamMember6,
+    color: "bg-gdgred-500",
+  },
+  {
+    name: "Mr. Shamoon Lodhi",
+    linkedin: "https://www.linkedin.com/in/mbilal56/",
+    bio: "Full-Stack Developer | Specializing in React, Next.js, Web 3.0, and AWS Solutions",
+    img: TeamMember6,
+    color: "bg-gdgblue-500",
+  },
+  {
+    name: "Mr. Taqveem Ahmad",
+    linkedin: "https://www.linkedin.com/in/m-taqveem-ahmad/",
+    bio: "UI/UX Designer",
+    img: TeamMember6,
+    color: "bg-gdggreen-500",
   },
 ];
 export default team;
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -5,6 +5,15 @@ const Navbar = () => {
     const [prevScrollPos, setPrevScrollPos] = useState(0);
     const [visible, setVisible] = useState(true);
 
+    const scrollToTargetDiv = () => {
+        const targetDiv = document.getElementById('digital-badge');
+        if (targetDiv) {
+          targetDiv.scrollIntoView({ behavior: 'smooth' });
+        } else {
+          console.error("Target div with ID 'digital-badge' not found.");
+        }
+      };
+
     const handleScroll = () => {
         const currentScrollPos = window.pageYOffset;
         const isVisible = prevScrollPos > currentScrollPos;
@@ -29,7 +38,7 @@ const Navbar = () => {
                     <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">
+                <a onClick={() =>scrollToTargetDiv()} className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-300">
                     Start Gemini Lab
                 </a>
             </div>

diff --git a/src/components/Topics/TopicCard.tsx b/src/components/Topics/TopicCard.tsx
@@ -1,9 +1,22 @@
-import { useState } from "react";
+// import { useState } from "react";
 const TopicCard = ({ topic }: any) => {
-  const [isHovered, setIsHoverd] = useState(false);
+  // const [isHovered, setIsHoverd] = useState(false);
   return (
     <a href={topic.url} target="_blank">
-      <div
+      {/* <p className="text-[2em] font-bold">{topic.title}</p>
+      <p>{topic.disc}</p> */}
+      <button type="button" className="flex items-center space-x-4 p-4 rounded-md bg-blue-500 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white" style={{ width: '300px', height: '70px' }}>
+        <p className="text-2xl font-bold">{topic.title}</p>
+        <p>{topic.disc}</p>
+      </button>
+    </a>
+  );
+};
+
+export default TopicCard;
+
+
+{/* <div
       onMouseEnter={() => {
         setIsHoverd(true);
       }}
@@ -19,9 +32,4 @@ const TopicCard = ({ topic }: any) => {
       />
       <p className="text-[2em] font-bold">{topic.title}</p>
       <p>{topic.disc}</p>
-    </div>
-    </a>
-  );
-};
-
-export default TopicCard;
+    </div> */}
diff --git a/src/components/Topics/Topics.tsx b/src/components/Topics/Topics.tsx
@@ -3,8 +3,8 @@ import { topics } from "./topicsObjct";
 const Topics = () => {
   return (
     <>
-      <p className="text-[2em] font-bold max-tablet:mt-12">Get Your Build With AI Digital Badge</p>
-      <div className="m-12 max-tablet:m-auto max-tablet:my-12 flex flex-wrap gap-12 justify-center">
+      <p id="digital-badge" className="ml-6 mb-6 text-[2em] font-bold max-tablet:mt-12">Get Your Build With AI Digital Badge</p>
+      <div className="mb-12 max-tablet:m-auto max-tablet:my-12 flex flex-wrap gap-12 justify-center">
         {topics.map((topic, i) => (
           <TopicCard key={i} topic={topic} />
         ))}

diff --git a/src/components/Topics/topicsObjct.tsx b/src/components/Topics/topicsObjct.tsx
@@ -1,29 +1,29 @@
-import cloudImg from "/src/assets/stacks_cloud.svg";
-import cloudHoverImg from "/src/assets/stacks_cloud-hover.svg";
-import mobileImg from "/src/assets/stacks_mobile.svg";
-import mobileHoverImg from "/src/assets/stacks_mobile-hover.svg";
-import aiImg from "/src/assets/stacks_ai.svg";
-import aiHoverImg from "/src/assets/stacks_ai-hover.svg";
+// import cloudImg from "/src/assets/stacks_cloud.svg";
+// import cloudHoverImg from "/src/assets/stacks_cloud-hover.svg";
+// import mobileImg from "/src/assets/stacks_mobile.svg";
+// import mobileHoverImg from "/src/assets/stacks_mobile-hover.svg";
+// import aiImg from "/src/assets/stacks_ai.svg";
+// import aiHoverImg from "/src/assets/stacks_ai-hover.svg";
 export const topics = [
     {
-      img: cloudImg,
-      imgHvr: cloudHoverImg,
+      // img: cloudImg,
+      // imgHvr: cloudHoverImg,
       title: "Step - I",
       url: "https://github.com/GDGCloudLahore/Build-With-AI-Labs",
       disc: "Perform Gemini Labs",
     },
     {
-      img: mobileImg,
-      imgHvr: mobileHoverImg,
+      // img: mobileImg,
+      // imgHvr: mobileHoverImg,
       title: "Step - II",
       url: "https://forms.gle/Dxn4RfYdLNBHSvfW6",
       disc: "Submit The Labs",
     },
     {
-      img: aiImg,
-      imgHvr: aiHoverImg,
+    //   img: aiImg,
+    //   imgHvr: aiHoverImg,
       title: "Step - III",
-      url: "",
-      disc: "Just relax and keep checking your mail from us!",
+      url: "https://trygcp.dev/e/build-ai-LHR01",
+      disc: "Get Your Digital Badge & Cloud Credits",
     },
   ];