Added founders, achievements carousel and leads

app/(default)/page.tsx

@@ -12,6 +12,9 @@ import Link from "next/link";
 import SparklesText from "@/components/magicui/sparkles-text";
 import EventComponent from "@/components/eventcards";
 import Leads from "@/components/leads";
+import Achievements from '@/components/achievements';
+import Founder from "@/components/founder";
+
 
 export default function Home() {
   return (
@@ -36,6 +39,8 @@ export default function Home() {
       </div>
       <Domains />
       <Activities />
+      <Founder />
+      <Achievements/>
       <EventComponent />
       <Leads />
     </>

app/css/additional-styles/landing.css

@@ -1,5 +1,5 @@
 .div-class {
-      background-image: url("../../../public/images/pbimage3.jpeg");
+      background-image: url("../../../public/images/google_logo.png");
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
@@ -8,6 +8,7 @@
       }
     };
 
+
 h1{
   width: 100%;
   height: 100vh;

components/achievements.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import Carousel from "./carousel.component";
+import imageOne from "../public/images/pbach1.jpg";
+import imageTwo from "../public/images/pbach2.jpg";
+import imageThree from "../public/images/pbach3.jpg";
+
+function Achievements() {
+  let slides = [imageOne, imageTwo, imageThree];
+
+  return (
+    <>
+      <div className="container place-items-center font-bold pt-20 pb-5">
+        <h2 className="text-5xl text-white-800 text-center">Achievements</h2>
+      </div>
+      <div className="w-[40%]  m-auto pt-11">
+        <Carousel slides={slides} />
+      </div>
+    </>
+  );
+}
+
+export default Achievements;

components/carousel.component.js

@@ -0,0 +1,61 @@
+
+import Image from "next/image";
+import { useState } from "react";
+
+import {
+  BsFillArrowRightCircleFill,
+  BsFillArrowLeftCircleFill,
+} from "react-icons/bs";
+export default function Carousel({ slides }) {
+  let [current, setCurrent] = useState(0);
+
+  let previousSlide = () => {
+    if (current === 0) setCurrent(slides.length - 1);
+    else setCurrent(current - 1);
+  };
+
+  let nextSlide = () => {
+    if (current === slides.length - 1) setCurrent(0);
+    else setCurrent(current + 1);
+  };
+
+  return (
+    <div className="overflow-hidden relative">
+      <div
+        className={`flex transition ease-out duration-1000`}
+        style={{
+          transform: `translateX(-${current * 100}%)`,
+        }}
+      >
+        {slides.map((s) => {
+          return <Image src={s} alt="" className="items-center"/>;
+        })}
+      </div>
+
+      <div className="absolute top-0 h-full w-full justify-between items-center flex text-white px-10 text-3xl">
+        <button onClick={previousSlide}>
+          <BsFillArrowLeftCircleFill />
+        </button>
+        <button onClick={nextSlide}>
+          <BsFillArrowRightCircleFill />
+        </button>
+      </div>
+
+      <div className="absolute bottom-0 py-4 flex justify-center gap-3 w-full">
+        {slides.map((s, i) => {
+          return (
+            <div
+              onClick={() => {
+                setCurrent(i);
+              }}
+              key={"circle" + i}
+              className={`rounded-full w-5 h-5 cursor-pointer  ${
+                i == current ? "bg-white" : "bg-gray-500"
+              }`}
+            ></div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

components/founder.tsx

@@ -0,0 +1,55 @@
+import imageOne from "../public/images/pbach1.jpg";
+import Image from "next/image";
+import "../app/css/additional-styles/landing.css";
+export default function founder()
+{
+    return (
+      <>
+        <div className="container place-items-center font-bold pt-20 pb-5">
+          <h2 className="text-5xl text-white-800 text-center">Founders</h2>
+        </div>
+        <div className="flex justify-center items-center pb-5">
+          <div className="p-10 w-full sm:w-2/3 md:w-1/2 lg:w-5/6">
+            {data.map((data) => (
+              <div className=" h-auto w-auto lg:flex p-5 transition-transform duration-1000 ease-in-out transform hover:scale-105 hover:shadow-2xl">
+                <div
+                  className="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden shadow-lg"
+                  style={{ backgroundImage: `url(${data.url})` }}
+                  title=""
+                ></div>
+                <div className="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-grey rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
+                  <div className="mb-8">
+                    <div className="font-bold text-2xl  text-green-600 mb-2 p-2">
+                      {data.name}
+                    </div>
+                    <p className="text-green-600 text-base">
+                      {data.description}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </>
+    );
+}
+
+
+const data = [
+    {
+        url: '',
+        name:"Mohit Agarwal",
+        description:"Mohit is currently an SDE2 at Glance (InMobi). Before this, he had stints at Ola and Amazon. Known for his straight, no nonsense attitude, Mohit laid the foundation for Competitive Programming culture in Point Blank. In his time as a student, Mohit won several contests such as the Nokia Collegiate Code Rally and qualified to the Regionals of the ACM-ICPC."
+    },
+    {
+        url: '',
+        name:"Soumya Pattanayak",
+        description:"Widely regarded as one of DSCE’s strongest competitive programmers, Soumya was previously an SDE at Amazon and had a stint in Verse Innovation before moving on to do his own thing. Soumya’s skills in solving problems are only exceeded by his ability to grok new languages and build interesting projects. He’s also an ACM-ICPC regionalist."
+    },
+    {
+        url: '/images/founder3.jpg',
+        name:"Ashutosh Pandey",
+        description:"Ashutosh is currently a Compiler Engineer at AMD. As a student he did Google Summer of Code with Arduino, was a Linux Foundation mentee with ELISA, and won several Hackathons including the Smart India Hackathon in 2019. He built up the Open Source and Hackathon culture in Point Blank, with numerous students going on to do prestigious programmes."
+    }
+]

components/leads.tsx

@@ -1,33 +1,55 @@
+import "../app/css/additional-styles/landing.css";
+
 const leads = [
-    { id: 0, text: "lead 1" },
-    { id: 1, text: "lead 2" },
-    { id: 2, text: "lead 3" },
-  ];
+  {
+    id: 0,
+    text: "Akash Singh",
+    subtext: "CloudSek, Gsoc 24 ",
+    url: "/images/lead1.jpg",
+  },
+  {
+    id: 1,
+    text: "Saalim Quadri",
+    subtext: "Raptee, LFX 23",
+    url: "/images/Lead2.jpg",
+  },
+  {
+    id: 2,
+    text: "Pratyush Singh",
+    subtext: "Ultrahuman, Gsoc 23,24",
+    url: "/images/lead3.jpg",
+  },
+];
 
-  const Leads = () => {
-    return (
-      <>
+const Leads = () => {
+  return (
+    <>
       <div className="container place-items-center font-bold pt-20 pb-10">
         <h2 className="text-5xl text-white-800 text-center">Leads</h2>
         <h5 className="text-2xl text-white-800 text-center">
-          Our Leadership Position are held by the best minds in and across the campus
+          Our Leadership Position are held by the best minds in and across the
+          campus
         </h5>
       </div>
       <div className="view">
         {leads.map((lead) => (
           <div
             key={lead.id}
             className="box card-wrapper transition-transform duration-1000 ease-in-out transform hover:scale-105 hover:shadow-2xl"
+            style={{ backgroundImage: `url(${lead.url})` }}
+            title=""
           >
-            <h1 className="absolute bottom-20 left-1/2 transform -translate-x-1/2 text-3xl text-base text-center text-green-600">
-              {lead.text}
-            </h1>
+            <div className="absolute bottom-0 w-full p-4 bg-black bg-opacity-50 text-center text-white">
+              <h1 className="absolute bottom-20 left-1/2 transform -translate-x-1/2 text-xl font-bold ">
+                {lead.text}
+              </h1>
+              <h3 className="text-lg mt-2">{lead.subtext}</h3>
+            </div>
           </div>
         ))}
       </div>
-      </>
-    );
-  };
+    </>
+  );
+};
 
-  export default Leads;
-
+export default Leads;