Merge pull request #16 from madhavlata/main

Carousel added

app/teams/page.tsx

@@ -1,48 +1,46 @@
-"use client"
+"use client";
 import Image from "next/image";
 import React from "react";
 import { TeamHead, TeamMembers } from "@/components/TeamsData/teamsdata";
-import cup from "@/public/images/teams/student.jpg"
-
+import cup from "@/public/images/teams/student.jpg";
+import Carousel from "@/components/Carousel";
 
 const CardItem = ({ data }) => {
   return (
     <>
-      <div className='dark:bg-[#dce2e3] bg-[#bbe7ed] mx-auto flex max-w-5xl justify-between gap-4 rounded-3xl p-6 '>
-        <div className='  '>
+      <div className="mx-auto flex max-w-5xl justify-between gap-4 rounded-3xl bg-[#bbe7ed] p-6 dark:bg-[#dce2e3] ">
+        <div className="  ">
           <Image
             src={cup}
-            alt='student'
-            className='shadow-blue-800/80 mx-auto w-40 h-40 rounded-full bg-white p-2 shadow-xl object-contain'
+            alt="student"
+            className="shadow-blue-800/80 mx-auto h-40 w-40 rounded-full bg-white object-contain p-2 shadow-xl"
           />
-          <div className='bg-[#daedf0] text-black font-bold  shadow-[#bbbdbd] mt-4 rounded-2xl p-2 text-center shadow-lg'>
-            <h1 className='text-[18px] capitalize'>
-              {data.name}
-            </h1>
+          <div className="mt-4 rounded-2xl bg-[#daedf0]  p-2 text-center font-bold text-black shadow-lg shadow-[#bbbdbd]">
+            <h1 className="text-[18px] capitalize">{data.name}</h1>
           </div>
-        </div>  
+        </div>
       </div>
     </>
   );
 };
 
+const images = ["/images/teams/Group-1.jpg", "/images/teams/Group-2.jpg"];
+
 const TeamPage = () => {
   return (
-    <div className='flex-col pt-[120px] pb-[120px]'>
-      <h1 className="text-center text-[40px] font-bold  mb-8">MEET THE TEAM</h1>
-      <h1 className='text-center text-[30px] font-bold'>Team Heads</h1>
+    <div className="flex-col pb-[120px] pt-[120px]">
+      <Carousel images={images} />
 
-      <div className='flex flex-wrap  justify-center gap-4 p-12 '>
-       
+      <h1 className="mb-8 text-center text-[40px]  font-bold">MEET THE TEAM</h1>
+      <h1 className="text-center text-[30px] font-bold">Team Heads</h1>
 
+      <div className="flex flex-wrap  justify-center gap-4 p-12 ">
         {TeamHead.map((data, index) => (
           <CardItem data={data} key={index} />
         ))}
       </div>
-      <h1 className='text-center text-[30px] font-bold'>Team Members</h1>
-      <div className='flex flex-wrap  justify-center gap-8 p-12 '>
-
-
+      <h1 className="text-center text-[30px] font-bold">Team Members</h1>
+      <div className="flex flex-wrap  justify-center gap-8 p-12 ">
         {TeamMembers.map((data, index) => (
           <CardItem data={data} key={index} />
         ))}

components/Carousel.tsx

@@ -0,0 +1,80 @@
+// components/Carousel.tsx
+import React, { useState } from "react";
+import styled from "styled-components";
+import Image from "next/image";
+
+interface CarouselProps {
+  images: string[];
+}
+
+const CarouselContainer = styled.div`
+  position: relative;
+  width: 70%;
+  margin: 0 auto;
+  overflow: hidden;
+`;
+
+const ImageContainer = styled.div`
+  position: relative;
+  width: 100%;
+  height: 400px; /* Adjust height as needed */
+`;
+
+const NavigationButton = styled.button`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.5);
+  border: none;
+  cursor: pointer;
+  outline: none;
+  padding: 10px;
+  font-size: 20px;
+  color: #333;
+  transition: background-color 0.3s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.8);
+  }
+`;
+
+const PrevButton = styled(NavigationButton)`
+  left: 10px;
+`;
+
+const NextButton = styled(NavigationButton)`
+  right: 10px;
+`;
+
+const Carousel: React.FC<CarouselProps> = ({ images }) => {
+  const [index, setIndex] = useState(0);
+
+  const handlePrev = () => {
+    setIndex((prevIndex) =>
+      prevIndex === 0 ? images.length - 1 : prevIndex - 1
+    );
+  };
+
+  const handleNext = () => {
+    setIndex((prevIndex) =>
+      prevIndex === images.length - 1 ? 0 : prevIndex + 1
+    );
+  };
+
+  return (
+    <CarouselContainer>
+      <ImageContainer>
+        <Image
+          src={images[index]}
+          alt={`Slide ${index}`}
+          layout="fill"
+          objectFit="contain"
+        />
+      </ImageContainer>
+      <PrevButton onClick={handlePrev}>{"<"}</PrevButton>
+      <NextButton onClick={handleNext}>{">"}</NextButton>
+    </CarouselContainer>
+  );
+};
+
+export default Carousel;