Team Section

app/components/TeamCard.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Image from "next/image";
+import { FaXTwitter } from "react-icons/fa6";
+import { FaGithub, FaLinkedin ,FaInstagram  } from "react-icons/fa";
+export const TeamCard = (props) => {
+  return (
+   <>
+    <div className="max-w-sm rounded-[1.2rem] overflow-hidden shadow-lg border-[#0077B6] border-4 resize-none w-55 dark:bg-gray-800">
+    <Image className="inline-block rounded-[2rem] p-3 " src={props.images} alt="person" height={150}  effect="blur"/>
+    <div className="px-6">
+    <div className="font-bold text-xl">{props.name}</div>
+    <p className="text-gray-700 text-base dark:text-gray-100">
+     {props.role}<br/>
+     {props.stack}
+    </p>
+  </div> 
+  <div className="px-6 pt-4 pb-2 flex justify-center gap-4">
+  <div className=" bg-white-200 text-sm font-semibold text-gray-700 mr-2 mb-2 "><a href={props.github} className="text-gray-600 dark:text-white transition-colors duration-300 hover:text-black"><FaGithub size={20}></FaGithub></a></div>
+    <div className=" bg-white-200 text-sm font-semibold text-gray-700 mr-2 mb-2"><a href={props.linkdin} className="text-gray-600 dark:text-white transition-colors duration-300 hover:text-black"><FaLinkedin size={20}></FaLinkedin></a></div>
+    <div className=" bg-white-200 text-sm font-semibold text-gray-700 mr-2 mb-2"><a href={props.twiter} className="text-gray-600 dark:text-white transition-colors duration-300 hover:text-black"><FaXTwitter  size={20}></FaXTwitter ></a></div>
+    <div className=" bg-white-200 text-sm font-semibold text-gray-700 mr-2 mb-2"><a href={props.instragram} className="text-gray-600 dark:text-white transition-colors duration-300 hover:text-black"><FaInstagram  size={20}></FaInstagram ></a></div>
+  </div>
+</div>
+</>
+  );
+};

app/components/navbar.tsx

@@ -16,7 +16,7 @@ function Navbar() {
     <nav className="fixed top-0 left-0 w-full z-50">
       <div className="mx-auto w-[1152px] h-[76px] flex justify-between items-center px-6 bg-white/30 dark:bg-white/10 backdrop-blur-md rounded-b-xl shadow-md border border-b-gray-200 dark:border-b-white/20 transition-all duration-300">
         <div className="flex items-center gap-x-2">
-          <Image src={"/logo.svg"} width={44} height={44} alt="logo" />
+          <Image src={"/logo.svg"} width={44}  height={44} style={{ width: "auto", height: "auto" }} alt="Logo" priority/>
           <span className="font-bold text-[#0077B6] dark:text-[#0077B6]/70 text-xl lg:text-2xl">
             HACKAUT
           </span>

app/components/teamdetails.js

@@ -0,0 +1,69 @@
+import saikat from "@/public/1.jpg";
+import joy from "@/public/1.jpg";
+import sougata from "@/public/1.jpg"
+import ishita from "@/public/1.jpg"
+import achintya from "@/public/1.jpg"
+import taha from "@/public/1.jpg"
+export const teamDetails = {
+    SaikatBasu: {
+        name: "Saikat Basu",
+        image: saikat
+    },
+
+    JoySamadder: {
+        name: "Joy Samadder",
+        image: joy
+    },
+    Sougata: {
+        name: "Sougata Jana",
+        image: sougata
+    },
+
+    Ishita: {
+        name: "Ishita Maji",
+        image: ishita
+    },
+
+    Achintya : {
+        name: "Achintya Barman",
+        image: achintya,
+    },
+
+    Taha : {
+        name: "Taha Yasmin",
+        image: taha
+    },
+}
+export const slideData = [
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+
+];

app/globals.css

@@ -2,7 +2,9 @@
 @import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
-
+.post{
+  position: sticky;
+}
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);

app/team/page.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { TeamCard } from "@/app/components/TeamCard";
+import { teamDetails,slideData } from "@/app/components/teamdetails"; 
+import Carousel from "@/components/ui/Carousel";
+export default function TeamPage() {
+    return(
+    <>
+     <div className="w-full flex flex-col justify-center items-center gap-16  ">
+     <div className=" w-full max-w-[1152px] mt-24 px-6 py-5 bg-white/40  dark:bg-white/5 backdrop-blur-lg rounded-xl border border-gray-300/60 dark:border-white/20 shadow-md transition-all duration-300">
+     <h1 className="text-6xl font-extrabold text-[#0077B6] mb-4 ">OUR TEAM</h1>
+     <p className="font-bold text-xl mb-10">Meet our team, which aims at cultivating, drilling & growing our community to enrich & prosper the overall tech culture, be a member and contribute to be include in our team.</p>
+    <section className="text-center"><p className="inline-block text-xxl px-3 py-px font-semibold text-white uppercase rounded-full bg-[#0077B6] mb-8">Faculties</p>
+    <div className="flex flex-wrap gap-16 justify-center mb-10">
+          <TeamCard name={teamDetails.SaikatBasu.name} role="Principal Advisor (HOD of CSE)" stack="ML, IOT, Cryptography" images={teamDetails.SaikatBasu.image}/>
+          <TeamCard name={teamDetails.JoySamadder.name} role="Chairman" stack="IoT, Full Stack Development, Web Analytics, Cybersecurity" images={teamDetails.JoySamadder.image}/>
+    </div>
+    </section>
+    <section className="text-center"><p className="inline-block text-xxl px-3 py-px font-semibold text-white uppercase rounded-full bg-[#0077B6] mb-8">Leaders</p>
+    <div className="flex flex-wrap gap-16 justify-center mb-20">
+          <TeamCard name={teamDetails. Sougata.name} role="President" stack="Golang,Python,ML" images={teamDetails.Sougata.image}/>
+          <TeamCard name={teamDetails.Ishita.name} role="Vice President" stack="AI,Python,Javascript" images={teamDetails.Ishita.image}/>
+          <TeamCard name={teamDetails.Achintya.name} role="General Secretary" stack="Java,Kotlin,Flutter" images={teamDetails.Achintya.image}/>
+          <TeamCard name={teamDetails.Taha.name} role="Secretary" stack="JavaScript,Design" images={teamDetails.Taha.image}/>
+    </div>
+    </section>
+    <section className="text-center overflow-hidden"><p className="inline-block text-xxl px-3 font-semibold text-white uppercase rounded-full bg-[#0077B6] mb-10 ">Core Members</p>
+    <Carousel slides={slideData } />
+    </section>
+    </div>
+    <div className="w-[90px] h-[10px] bg-[#0077B6] dark:bg-[#0077B6]/70 "/>
+    </div>
+    </>
+  )}

components/ui/Carousel.jsx

@@ -0,0 +1,183 @@
+"use client";;
+import { IconArrowNarrowRight } from "@tabler/icons-react";
+import { useState, useRef, useId, useEffect } from "react";
+const Slide = ({
+  slide,
+  index,
+  current,
+  handleSlideClick
+}) => {
+  const slideRef = useRef(null);
+
+  const xRef = useRef(0);
+  const yRef = useRef(0);
+  const frameRef = useRef();
+
+  useEffect(() => {
+    const animate = () => {
+      if (!slideRef.current) return;
+
+      const x = xRef.current;
+      const y = yRef.current;
+
+      slideRef.current.style.setProperty("--x", `${x}px`);
+      slideRef.current.style.setProperty("--y", `${y}px`);
+
+      frameRef.current = requestAnimationFrame(animate);
+    };
+
+    frameRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+      }
+    };
+  }, []);
+
+  const handleMouseMove = (event) => {
+    const el = slideRef.current;
+    if (!el) return;
+
+    const r = el.getBoundingClientRect();
+    xRef.current = event.clientX - (r.left + Math.floor(r.width / 2));
+    yRef.current = event.clientY - (r.top + Math.floor(r.height / 2));
+  };
+
+  const handleMouseLeave = () => {
+    xRef.current = 0;
+    yRef.current = 0;
+  };
+
+  const imageLoaded = (event) => {
+    event.currentTarget.style.opacity = "1";
+  };
+
+  const { src, button, title } = slide;
+
+  return (
+    <div className="[perspective:1200px] [transform-style:preserve-3d]">
+      <li
+        ref={slideRef}
+        className="flex flex-1 flex-col items-center justify-center relative text-center text-white opacity-100 transition-all duration-300 ease-in-out w-[20vmin] h-[20vmin] mx-[-1vmin] z-10 "
+        onClick={() => handleSlideClick(index)}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+        style={{
+          transform:
+            current !== index
+              ? "scale(0.98) rotateX(8deg)"
+              : "scale(1) rotateX(0deg)",
+          transition: "transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
+          transformOrigin: "bottom",
+        }}>
+        <div className="absolute top-0 left-0 w-full h-full bg-[#1D1F2F] rounded-[50%] overflow-hidden transition-all duration-150 ease-out border-[#0077B6] border-4 "
+          style={{
+            transform:
+              current === index
+                ? "translate3d(calc(var(--x) / 30), calc(var(--y) / 30), 0)"
+                : "none",
+          }}>
+          <img
+            className="absolute inset-0 w-[120%] h-[120%] object-cover opacity-100 transition-opacity duration-600 ease-in-out"
+            style={{
+              opacity: current === index ? 1 : 0.9,
+            }}
+            alt={title}
+            src={src}
+            onLoad={imageLoaded}
+            loading="eager"
+            decoding="sync" />
+          {current === index && (
+            <div className="absolute inset-0 bg-black/30 transition-all duration-1000" />
+          )}
+        </div>
+
+        <article
+          className={`relative p-[4vmin] transition-opacity duration-1000 ease-in-out ${
+            current === index ? "opacity-100 visible" : "opacity-0 invisible"
+          }`}>
+          {/* <h2 className="text-lg md:text-2xl lg:text-4xl font-semibold  relative">
+            {title}
+          </h2> */}
+          <div className="flex justify-center">
+            {/* <button
+              className="mt-6  px-4 py-2 w-fit mx-auto sm:text-sm text-black bg-white h-12 border border-transparent text-xs flex justify-center items-center rounded-2xl hover:shadow-lg transition duration-200 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)]">
+              {button}
+            </button> */}
+          </div>
+       </article> 
+      </li>
+    </div>
+  );
+};
+
+const CarouselControl = ({
+  type,
+  title,
+  handleClick
+}) => {
+  return (
+    <button
+      className={`w-10 h-10 flex items-center mx-4 justify-center bg-neutral-200 dark:bg-neutral-800 border-3 border-transparent rounded-full focus:border-[#6D64F7] focus:outline-none hover:-translate-y-0.5 active:translate-y-0.5 transition duration-200 ${
+        type === "previous" ? "rotate-180" : ""
+      }`}
+      title={title}
+      onClick={handleClick}>
+      <IconArrowNarrowRight className="text-neutral-600 dark:text-neutral-200" />
+    </button>
+  );
+};
+
+export default function Carousel({
+  slides
+}) {
+  const [current, setCurrent] = useState(0);
+
+  const handlePreviousClick = () => {
+    const previous = current - 1;
+    setCurrent(previous < 0 ? slides.length - 1 : previous);
+  };
+
+  const handleNextClick = () => {
+    const next = current + 1;
+    setCurrent(next === slides.length ? 0 : next);
+  };
+
+  const handleSlideClick = (index) => {
+    if (current !== index) {
+      setCurrent(index);
+    }
+  };
+
+  const id = useId();
+
+  return (
+    <div
+      className="relative w-[100%] h-[50vmin] mx-auto overflow-hidden"
+      aria-labelledby={`carousel-heading-${id}`}>
+      <ul
+        className="absolute flex transition-transform duration-1000 ease-in-out "
+        style={{
+          transform: `translateX(-${current * (100 / slides.length)}%)`,
+        }}>
+        {slides.map((slide, index) => (
+          <Slide
+            key={index}
+            slide={slide}
+            index={index}
+            current={current}
+            handleSlideClick={handleSlideClick} />
+        ))}
+      </ul>
+      <div className="absolute flex justify-between w-full top-[calc(60%+1rem)]">
+        <CarouselControl
+          type="previous"
+          title="Go to previous slide"
+          handleClick={handlePreviousClick} />
+
+        <CarouselControl type="next" title="Go to next slide" handleClick={handleNextClick} />
+      </div>
+    </div>
+  );
+}