Teams-footer-developers added (#15)

package.json

@@ -13,16 +13,21 @@
     "deploy": "gh-pages -d dist"
   },
   "dependencies": {
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@tabler/icons-react": "^3.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "framer-motion": "^11.0.25",
+    "install": "^0.13.0",
     "lucide-react": "^0.365.0",
+    "npm": "^10.5.2",
     "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-intersection-observer": "^9.8.2",
     "react-router-dom": "^6.22.3",
     "react-router-hash-link": "^2.4.3",

src/Sections/AboutUs.tsx

@@ -1,9 +1,9 @@
 export const AboutUs = () => {
   return (
-    <div  id="aboutus" className="flex flex-col items-center justify-center mt-16 bg-black w-screen h-screen">
-      <div className="mt-8">
+    <div  id="aboutus" className="flex flex-col items-center justify-center bg-black w-screen h-screen">
+      <div className="mt-5">
         <h2 className="text-white text-3xl font-bold mb-4">About Us</h2>
-        <div className=" p-4 rounded-lg shadow-lg"></div>
+        <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">

src/Sections/Developers.tsx

@@ -1,40 +1,63 @@
-import { AnimatedTooltip } from "@/components/ui/animated-tooltip";
+import { InfiniteMovingCards } from "@/components/ui/infinite-moving-cards";
+import { Link } from "react-router-dom";
 
 export const Developers = () => {
   const items = [
     {
-      id: 1,
-      name: "John Doe",
-      designation: "Software Engineer",
-      image: "/main-logo.jpeg",
+      name: "Arujjwal Negi",
+      linkedin: "https://www.linkedin.com/in/arujjwal-negi-048955269/",
+      twitter: "https://twitter.com/arujjval",
+      github: "https://github.com/arujjval",
+      imageUrl: "./arujjwal-img.jpg",
+      role: "Developer",
     },
     {
-      id: 2,
-      name: "Jane Smith",
-      designation: "UI/UX Designer",
-      image: "/main-logo.jpeg",
+      name: "Sanchit Kathpalia",
+      linkedin: "https://www.linkedin.com/in/sanchit-khthpalia-a841b5252/",
+      twitter: "https://twitter.com/khthpalia",
+      github: "https://github.com/sanchitkhthpalia",
+      imageUrl: "./sanchit-img.jpg",
+      role: "Developer",
     },
     {
-      id: 3,
-      name: "Jane Smith",
-      designation: "UI/UX Designer",
-      image: "/main-logo.jpeg",
+      name: "Saksham Chaudhary",
+      linkedin: "https://www.linkedin.com/in/saksham-chaudhary-21564722a/",
+      twitter: "https://twitter.com/Saksham37718116",
+      github: "https://github.com/Saksham1387",
+      imageUrl: "./saksham-img.jpg",
+      role: "Developer",
     },
     {
-      id: 4,
-      name: "Jane Smith",
-      designation: "UI/UX Designer",
-      image: "/main-logo.jpeg",
+      name: "Daksh P. Jain",
+      linkedin: "https://linkedin.com/in/daksh777",
+      twitter: "https://twitter.com/0xdpj",
+      github: "https://github.com/daksh777",
+      imageUrl: "./daksh-img.jpg",
+      role: "Designer",
     },
-    // Add more items as needed
   ];
-
   return (
     <div className="flex flex-col items-center justify-center bg-black w-screen h-screen">
       <div>
-        <h2 className="text-white text-3xl font-bold mb-4">Developers</h2>
-        <div className="flex flex-row ">
-          <AnimatedTooltip items={items} />
+        <h2 className="text-white text-3xl font-bold text-center mb-20">
+          Developers
+        </h2>
+        <div className="mt-10">
+          <InfiniteMovingCards
+            items={items}
+            direction="left"
+            speed="normal"
+            pauseOnHover={true}
+            className="my-custom-class"
+            image="/"
+          ></InfiniteMovingCards>
+        </div>
+        <div className="flex items-center justify-center 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 ?
+            </button>
+          </Link>
         </div>
       </div>
     </div>

src/Sections/Events.tsx

@@ -1,9 +1,70 @@
+import { HoverEffect } from "@/components/ui/card-hover-effect";
+
 export const Events = () => {
   return (
-    <div id="events" className="flex flex-col items-center justify-center bg-black w-screen h-screen">
+    <div className="flex flex-col items-center justify-center bg-black w-screen h-screen">
       <div>
-        <h2 className="text-white text-3xl font-bold mb-4">Our Events</h2>
-        <div className=" p-4 rounded-lg shadow-lg"></div>
+        <h2
+          className="text-white text-3xl font-bold mb-4 text-center"
+          id="events"
+        >
+          Our Events
+        </h2>
+        <div className="flex justify-center items-center p-5">
+          <HoverEffect
+            items={[
+              {
+                title: "Meetup",
+                description: "Hackaccino",
+                link: "https://community.cncf.io/events/details/cncf-new-delhi-presents-hackaccino/",
+                imageurl: "./hackaccino poster(2).jpg",
+              },
+              {
+                title: "Meetup",
+                description: "Color the Clouds - Holi Edition",
+                link: "https://community.cncf.io/events/details/cncf-new-delhi-presents-color-the-clouds-holi-edition/",
+                imageurl: "./color clouds meetuo main.jpg",
+              },
+              {
+                title: "Meetup",
+                description: "Grafana and Friends Delhi Meetup",
+                link: "https://community.cncf.io/events/details/cncf-new-delhi-presents-grafana-and-friends-delhi-meetup/",
+                imageurl: "./grafana and friends delhi.jpg",
+              },
+              {
+                title: "Meetup",
+                description: "Meetnetes",
+                link: "https://community.cncf.io/events/details/cncf-new-delhi-presents-meetnetes/",
+                imageurl: "./1-1ratio.jpg",
+              },
+              {
+                title: "Meetup",
+                description: "Offline Meetup",
+                link: "https://community.cncf.io/events/details/cncf-new-delhi-presents-offline-meetup/",
+                imageurl: "./WhatsApp Image 2023-12-12 at 7.02.19 PM.jpg",
+              },
+              {
+                title: "Meetup",
+                description: "BadalCon 2023",
+                link: "https://community.cncf.io/events/details/cncf-new-delhi-presents-badalcon-2023/",
+                imageurl: "./badalcon announce.jpg",
+              },
+              {
+                title: "Meetup",
+                description: "Kloud Karnival",
+                link: "https://community.cncf.io/events/details/cncf-new-delhi-presents-kloud-karnival/",
+                imageurl: "./Bevy poster.jpg",
+              },
+              {
+                title: "Online Event (virtual)",
+                description:
+                  "Cloud Native Connect: Unleashing the power of CNCF",
+                link: "https://community.cncf.io/events/details/cncf-new-delhi-presents-cloud-native-connect-unleashing-the-power-of-cncf/",
+                imageurl: "./EVENT thumbnail.jpg",
+              },
+            ]}
+          />
+        </div>
       </div>
     </div>
   );

src/Sections/Home.tsx

@@ -8,18 +8,35 @@ import { Sponsors } from "./Sponsors";
 import { Developers } from "./Developers";
 import { Footer } from "@/components/Footer";
 import { Team } from "./Team";
+import { ScrollToTopButton } from "@/components/ScrollToTopButton";
+import { Talks } from "./Talks";
+import { Link } from "react-router-dom";
 
 export const Home = () => {
   return (
-    <div className="h-screen w-screen bg-black flex flex-col">
+    <div className="h-full w-screen flex flex-col">
       <Header></Header>
-      <div className="justify-center items-center h-full flex flex-col">
+      <div
+        className="justify-center items-center flex h-screen pb-[300px] relative flex-col"
+        style={{
+          backgroundImage:
+            'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./Home-image.jpg")',
+          backgroundPosition: "center",
+        }}
+      >
         <div className="w-1/3">
           <TextGenerateEffect
-            className="mt-[300px]"
+            className="mt-[600px]"
             words="&quot;DevOps isn't just about breaking down silos; it's about breaking down barriers, fostering collaboration, and enabling teams to build and deliver amazing things together.&quot;"
           ></TextGenerateEffect>
         </div>
+        <div className="flex items-center justify-center">
+          <Link to="https://www.cncf.io/all-cncf/">
+            <button className="bg-pink font-bold text-white p-5 shadow-lg rounded-2xl mt-[200px]">
+              Join Us
+            </button>
+          </Link>
+        </div>
       </div>
       <div>
         <AboutUs />
@@ -33,13 +50,17 @@ export const Home = () => {
       <div>
         <Sponsors />
       </div>
+      <div>
+        <Talks />
+      </div>
       <div>
         <Team></Team>
       </div>
       <div>
         <Developers />
       </div>
       <Footer></Footer>
+      <ScrollToTopButton></ScrollToTopButton>
     </div>
   );
 };

src/Sections/Sponsors.tsx

@@ -1,8 +1,13 @@
 export const Sponsors = () => {
   return (
-    <div  id="sponsors" className="flex flex-col items-center justify-center bg-black w-screen h-screen">
+    <div
+      id="sponsors"
+      className="flex flex-col items-center justify-center bg-black w-screen h-full"
+    >
       <div>
-        <h2 className="text-white text-3xl font-bold mb-4">Our Sponsors</h2>
+        <h2 className="text-white text-3xl font-bold mb-4 mt-[400px]">
+          Our Sponsors
+        </h2>
         <div className=" p-4 rounded-lg shadow-lg"></div>
       </div>
     </div>

src/Sections/Stats.tsx

@@ -1,41 +1,57 @@
-import { useEffect, useState } from 'react';
-import CountUp from 'react-countup';
-import { useInView } from 'react-intersection-observer';
+import { useEffect, useState } from "react";
+import CountUp from "react-countup";
+import { useInView } from "react-intersection-observer";
 
-type prop= {
-  title: string,
-  count: number
-}
+type prop = {
+  title: string;
+  count: number;
+};
 
-const Stat= ({title, count}: prop) => {
+const Stat = ({ title, count }: prop) => {
   return (
-    <div className='text-white flex flex-col gap-2 items-center'>
-      <div className='flex flex-row items-center'>
-        <CountUp start={0} end={count} duration={6} className='counter md:text-5xl text-3xl font-bold'/>
-        <div className={(title!='speakers')? 'hidden' : 'md:text-5xl text-3xl font-bold text-right'}>+</div>
+    <div className="text-white flex flex-col gap-3 items-center">
+      <div className="flex flex-row items-center">
+        <CountUp
+          start={0}
+          end={count}
+          duration={2}
+          className="counter md:text-5xl text-3xl font-bold"
+        />
+        <div
+          className={
+            title != "speakers"
+              ? "hidden"
+              : "md:text-5xl text-3xl font-bold text-right"
+          }
+        >
+          +
+        </div>
       </div>
-      <div className='title md:text-xl text-sm uppercase'>{title}</div>
+      <div className="title md:text-xl text-sm uppercase">{title}</div>
     </div>
-  )
-}
+  );
+};
 
 export const Stats = () => {
-  const [count, setCount] = useState([0, 0, 0, 0])
-  const titles= ['events', 'speakers', 'attendees', 'registrations']
-  const {ref, inView}= useInView()
+  const [count, setCount] = useState([0, 0, 0, 0]);
+  const titles = ["events", "speakers", "attendees", "registrations"];
+  const { ref, inView } = useInView();
 
-  useEffect(()=>{
-      if(inView) setCount([8, 30, 1000, 3000])
-  },[inView])
+  useEffect(() => {
+    if (inView) setCount([8, 30, 1000, 3000]);
+  }, [inView]);
 
   return (
-    <div className="flex flex-col items-center justify-center bg-black w-screen h-screen" ref={ref}>
-        <h2 className="text-white text-3xl font-bold mb-4">Stats</h2>
-        <div className='flex md:flex-row flex-col justify-between w-full max-w-[1200px] px-20 py-10 gap-10'>
-          {titles.map((title, index) => (
-            <Stat title={title} count={count[index]}/>
-          ))}
-        </div>
+    <div
+      className="flex flex-col items-center justify-center bg-black w-screen min-h-screen"
+      ref={ref}
+    >
+      <h2 className="text-white text-3xl font-bold mb-16  mt-16">Stats</h2>
+      <div className="flex md:flex-row flex-col justify-between w-full max-w-[1200px] px-5 md:px-20 py-5">
+        {titles.map((title, index) => (
+          <Stat title={title} count={count[index]} />
+        ))}
+      </div>
     </div>
   );
 };

src/Sections/Talks.tsx

@@ -0,0 +1,13 @@
+export const Talks = () => {
+  return (
+    <div
+      id="aboutus"
+      className="flex flex-col items-center justify-center bg-black w-screen h-screen"
+    >
+      <div className="mt-5">
+        <h2 className="text-white text-3xl font-bold mb-4">Previous Talks</h2>
+        <div className="p-1 rounded-lg shadow-lg"></div>
+      </div>
+    </div>
+  );
+};