Merge remote-tracking branch 'upstream/main'

package.json

@@ -23,11 +23,13 @@
     "install": "^0.13.0",
     "lucide-react": "^0.365.0",
     "npm": "^10.5.2",
+    "pure-react-carousel": "^1.30.1",
     "react": "^18.2.0",
     "react-countup": "^6.5.3",
     "react-dom": "^18.2.0",
     "react-element-to-jsx-string": "^15.0.0",
     "react-fontawesome": "^1.7.1",
+    "react-icons": "^5.1.0",
     "react-intersection-observer": "^9.8.2",
     "react-router-dom": "^6.22.3",
     "react-router-hash-link": "^2.4.3",
@@ -54,4 +56,3 @@
     "vite": "^5.2.0"
   }
 }
-

src/Sections/AboutUs.tsx

@@ -1,34 +1,15 @@
 export const AboutUs = () => {
   return (
-    <div
-      id="aboutus"
-      className="flex flex-col items-center justify-center bg-black w-screen min-h-screen"
-    >
-      <div className="mt-20 md:mt-0">
-        <h2 className="text-white text-3xl font-bold md:mb-8 ">About Us</h2>
+    <div id="aboutus" className="bg-black flex items-center justify-center w-screen">
+      <div className="max-w-4xl mt-20 px-4 lg:px-8 md:mt-30">
+        <h2 className="text-white text-3xl font-bold mb-8 text-center lg:mb-4">About Us</h2> {/* Adjusted margin for larger screens */}
         <div className="p-1 rounded-lg shadow-lg"></div>
-      </div>
-      <div className="flex flex-col items-center mt-8 px-4 lg:px-8">
-        <div className="flex flex-wrap items-center justify-between gap-x-12 gap-y-8 w-full lg:flex-nowrap">
-          <div className="flex-1">
-            <h2 className="text-2xl mb-4 text-center text-neutral-200">
-              Welcome to the Cloud Native Community Group - New Delhi. We are
-              the New Delhi chapter of the Cloud Native Community Groups (CNCG),
-              operating under the{" "}
-              <span className="text-[#0086FF]">
-                Cloud Native Computing Foundation
-              </span>{" "}
-              (CNCF). Our focus is on knowledge sharing and exploring the
-              potential of cloud native technologies. Through our meetups,
-              educational sessions, and practical activities, we aim to empower
-              individuals in navigating the cloud native ecosystem. We are
-              dedicated to hosting at least one meetup every month and take
-              pride in being recognized as the leading CNCG community worldwide.
-              We prioritize creating an inclusive learning environment, adhering
-              to the CNCF Code of Conduct to ensure everyone feels welcome and
-              respected.
-            </h2>
-          </div>
+        <div className="mt-8">
+          <h2 className="text-xl mb-4 text-neutral-200 text-center leading-relaxed">
+            Welcome to the Cloud Native Community Group - New Delhi. We are the New Delhi chapter of the Cloud Native Community Groups (CNCG), operating under the{" "}
+            <span className="text-[#0086FF]">Cloud Native Computing Foundation</span>{" "}
+            (CNCF). Our focus is on knowledge sharing and exploring the potential of cloud native technologies. Through our meetups, educational sessions, and practical activities, we aim to empower individuals in navigating the cloud native ecosystem. We are dedicated to hosting at least one meetup every month and take pride in being recognized as the leading CNCG community worldwide. We prioritize creating an inclusive learning environment, adhering to the CNCF Code of Conduct to ensure everyone feels welcome and respected.
+          </h2>
         </div>
       </div>
     </div>

src/Sections/Developers.tsx

@@ -35,10 +35,26 @@ export const Developers = () => {
       imageUrl: "./daksh-img.jpg",
       role: "Designer",
     },
+    {
+      name: "Avantika Sharma",
+      linkedin: "https://www.linkedin.com/in/avantika-sharma-a65b17250/",
+      twitter: "https://x.com/Avantika230703?t=TDlZBwUMdGtK1jJXDR0Bpg&s=09",
+      github: "https://github.com/AvantikaSharma2307",
+      imageUrl: "./avantika-img.jpg",
+      role: "Developer",
+    },
+    {
+      name: "Harshit Rawat",
+      linkedin: "https://www.linkedin.com/in/harshit-rawat-0a6944274?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app",
+      twitter: "https://x.com/harshit_rwt?t=ja0bPAy3eDRRpLvJntqwbw&s=09",
+      github: "https://github.com/itsharshitrwt",
+      imageUrl: "./harshit-img.jpg",
+      role: "Developer",
+    },
   ];
   return (
-    <div className="flex flex-col items-center justify-center bg-black w-screen h-screen">
-      <div>
+    <div className="flex flex-col items-center justify-center bg-black w-screen">
+      <div className="mt-20 lg:mt-20">
         <h2 className="text-white text-3xl font-bold text-center mb-20">
           Developers
         </h2>
@@ -52,7 +68,7 @@ export const Developers = () => {
             image="/"
           ></InfiniteMovingCards>
         </div>
-        <div className="flex items-center justify-center md:mt-20">
+        <div className="flex items-center justify-center mt-10 mb-10 md:mt-20">
           <Link to="https://github.com/cncgnd">
             <button className="bg-pink rounded-xl p-4 text-white font-bold transition duration-300 ease-in-out hover:bg-opacity-80 hover:text-opacity-80">
               Want to Contribute ?

src/Sections/Events.tsx

@@ -2,8 +2,8 @@ import { HoverEffect } from "@/components/ui/card-hover-effect";
 
 export const Events = () => {
   return (
-    <div className="flex flex-col items-center justify-center bg-black w-screen h-full">
-      <div>
+    <div className="flex flex-col items-center justify-center bg-black w-screen">
+      <div className="mt-20 md:mt-30">
         <h2
           className="text-white text-3xl font-bold mb-4 text-center mt-2"
           id="events"

src/Sections/Home.tsx

@@ -11,12 +11,12 @@ import { Team } from "./Team";
 
 import { Sponsors } from "./Sponsors";
 import { ScrollToTopButton } from "@/components/ScrollToTopButton";
-import { Talks } from "./Talks";
+import Talk from "./Talks";
 import { Link } from "react-router-dom";
 
 export const Home = () => {
   return (
-    <div className="h-full w-screen flex flex-col">
+    <div className="h-full w-screen flex flex-col bg-black">
       <Header></Header>
 
       <div
@@ -56,7 +56,7 @@ export const Home = () => {
         <Sponsors />
       </div>
       <div>
-        <Talks />
+        <Talk />
       </div>
       <div>
         <Team></Team>

src/Sections/Sponsors.tsx

@@ -34,7 +34,7 @@ export const Sponsors = () => {
   }, []);
 
   return (
-    <div className="flex flex-col items-center justify-center bg-black w-screen h-full">
+    <div className="flex flex-col items-center justify-center bg-black w-screen">
       <div className="">
         <h2 className="text-white text-3xl font-bold mb-20 text-center mt-20" id="sponsors">Our Sponsors</h2>
         <div className="p-4 rounded-lg shadow-lg grid sm:grid-cols-2 md:grid-cols-4 gap-20 grid-container" ref={sponsorRef}>

src/Sections/Stats.tsx

@@ -43,10 +43,10 @@ export const Stats = () => {
 
   return (
     <div
-      className="flex flex-col items-center justify-center bg-black w-screen h-full"
+      className="flex flex-col items-center justify-center bg-black w-screen"
       ref={ref}
     >
-      <h2 className="text-white text-3xl font-bold mb-16 mr-5 mt-[150px]">
+      <h2 className="text-white text-3xl font-bold mb-16 mr-5 mt-20 lg:mt-30">
         Stats
       </h2>
       <div className="flex flex-row justify-between w-full max-w-[1200px] px-5 md:px-20 py-5">

src/Sections/Talks.tsx

@@ -1,12 +1,109 @@
-export const Talks = () => {
+import React from "react";
+import RotatingCard from "@/components/ui/rotating-card";
+import { RiArrowLeftSLine, RiArrowRightSLine } from "react-icons/ri";
+
+const items = [
+  {
+    imageurl: "./ashish.JPG",
+    title: "Prometheus in Action: Get Started with Monitoring by Ashish Kumar ",
+    description:
+      "Ashish Kumar demonstrates Prometheus, showcasing its query language, operational ease, and seamless service discovery integration. ",
+    videoUrl: "https://youtu.be/77zhEy-J4po",
+    altText: "Picture of Ashish Speaking",
+  },
+  {
+    imageurl: "./ashtesham.jpeg",
+    title: "Message Queues Made Easy with RabbitMQ & Python by Ahtesham Zaidi",
+    description:
+      "A deep dive into the world of messaging queues, discussing their importance, the role of message brokers, and the transition from traditional approaches to modern, decoupled systems.",
+    videoUrl: "https://youtu.be/Zklx7ZB9LW4",
+    altText: "Picture of Ashtesham Speaking",
+  },
+  {
+    imageurl: "./vinod.jpg",
+    title: "Scaling Apps with KEDA by Vinod Kumar",
+    description:
+      "This session takes a comprehensive look at 'Scaling apps with KEDA' in Kubernetes environments. ",
+    videoUrl: "https://youtu.be/SdCwTV_J-cI",
+    altText: "Event Video Thumbnail",
+  },
+  {
+    imageurl: "./rakeshsaw.jpeg",
+    title:
+      "Kubernetes Secrets Management using External Secret Operator (ESO) by Rakesh Saw ",
+    description:
+      "Rakesh Saw delves into the intricacies of managing Kubernetes secrets securely and efficiently using the External Secret Operator (ESO).",
+    videoUrl: "https://youtu.be/9PQwgURcqIw",
+    altText: "Rakesh Saw Speaking",
+  },
+];
+
+const Talks = () => {
+  const [currentSlide, setCurrentSlide] = React.useState(0);
+
+  const handleNext = () => {
+    setCurrentSlide((prevSlide) => Math.min(prevSlide + 1, items.length - 1));
+  };
+
+  const handlePrev = () => {
+    setCurrentSlide((prevSlide) => Math.max(prevSlide - 1, 0));
+  };
+
   return (
-    <div className="flex flex-col items-center justify-center bg-black w-screen h-full">
+    <div
+      id="talks"
+      className="flex flex-col items-center justify-center bg-black w-screen"
+    >
       <div>
-        <h2 className="text-white text-3xl font-bold mb-20 mt-[150px]">
+        <h2 className="text-white text-3xl font-bold pt-30 pb-10 lg:mt-40 lg:mb-10 mt-9">
           Previous Talks
         </h2>
-        <div className="p-1 rounded-lg shadow-lg"></div>
+      </div>
+
+      <div className="relative w-full max-w-5xl overflow-hidden">
+        <div className="absolute top-1/2 transform -translate-y-1/2 left-0 z-10">
+          <button
+            className={`px-4 py-2 bg-pink text-white rounded-full focus:outline-none hover:bg-pink-600 ${
+              currentSlide === 0 ? "opacity-50 cursor-not-allowed" : ""
+            }`}
+            onClick={handlePrev}
+            disabled={currentSlide === 0}
+          >
+            <RiArrowLeftSLine size={24} />
+          </button>
+        </div>
+        <div className="absolute top-1/2 transform -translate-y-1/2 right-0 z-10">
+          <button
+            className={`px-4 py-2 bg-pink text-white rounded-full focus:outline-none hover:bg-pink-600 ${
+              currentSlide >= items.length - 1
+                ? "opacity-50 cursor-not-allowed"
+                : ""
+            }`}
+            onClick={handleNext}
+            disabled={currentSlide >= items.length - 1}
+          >
+            <RiArrowRightSLine size={24} />
+          </button>
+        </div>
+        <div
+          className="flex transition-transform duration-500 ease-in-out"
+          style={{ transform: `translateX(-${currentSlide * 100}%)` }}
+        >
+          {items.map((item, index) => (
+            <div key={index} className="w-full flex-shrink-0">
+              <RotatingCard
+                title={item.title}
+                imageUrl={item.imageurl}
+                description={item.description}
+                altText={item.altText}
+                videoUrl={item.videoUrl}
+              />
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );
 };
+
+export default Talks;

src/Sections/Team.tsx

@@ -35,12 +35,12 @@ export const Team = () => {
       imageUrl: "./Harsh.jpeg",
       linkedin: "https://www.linkedin.com/in/its-harsshhh/",
       twitter: "https://twitter.com/Choley_Bhature",
-      role: "Organizer",
+      role: "Design Lead",
     },
   ];
   return (
-    <div id="team" className="flex flex-col items-center justify-center bg-black w-screen h-screen">
-      <div>
+    <div id="team" className="flex flex-col items-center justify-center bg-black w-screen">
+      <div className="mt-20 lg:mt-20">
         <h2 className="text-white text-3xl font-bold text-center mb-20">
           Our Team
         </h2>