Merge pull request #25 from TusharSin810/main

New carousel added
JIITODC · Sep 26, 2024 · 07fa92c · 07fa92c
2 parents 8bd3d79 + 78c0aee
commit 07fa92c
Show file tree

Hide file tree

Showing 8 changed files with 473 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,11 +11,14 @@
     "@mui/icons-material": "^5.16.6",
     "@mui/material": "^5.16.6",
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
+    "@tabler/icons-react": "^3.17.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.3.3",
+    "clsx": "^2.1.1",
     "formik": "^2.4.6",
+    "framer-motion": "^11.7.0",
     "npm": "^10.8.2",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",
@@ -27,6 +30,7 @@
     "slick-carousel": "^1.8.1",
     "start": "^5.1.0",
     "styled-components": "^6.1.12",
+    "tailwind-merge": "^2.5.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
@@ -0,0 +1,88 @@
+"use client";
+import React from "react";
+import { Carousel, Card } from "./ui/apple-cards-carousel";
+
+export function Carouselhome() {
+  const cards = data.map((card, index) => (
+    <Card key={card.src} card={card} index={index} />
+  ));
+
+  return (
+    (<div className="w-full h-full pt-20">
+      <h2
+        className="max-w-7xl mx-auto text-xl md:text-5xl font-bold text-neutral-800 dark:text-neutral-200 font-sans justify-center flex">
+        Gallery
+      </h2>
+      <Carousel items={cards} />
+    </div>)
+  );
+}
+
+const DummyContent = () => {
+  return (<>
+    {[...new Array(3).fill(1)].map((_, index) => {
+      return (
+        (<div
+          key={"dummy-content" + index}
+          className="bg-[#F5F5F7] dark:bg-neutral-800 p-8 md:p-14 rounded-3xl mb-4">
+          <p
+            className="text-neutral-600 dark:text-neutral-400 text-base md:text-2xl font-sans max-w-3xl mx-auto">
+            <span className="font-bold text-neutral-700 dark:text-neutral-200">
+              The first rule of Apple club is that you boast about Apple club.
+            </span>{" "}
+            Keep a journal, quickly jot down a grocery list, and take amazing
+            class notes. Want to convert those notes to text? No problem.
+            Langotiya jeetu ka mara hua yaar is ready to capture every
+            thought.
+          </p>
+          <img
+            src="https://assets.aceternity.com/macbook.png"
+            alt="Macbook mockup from Aceternity UI"
+            height="500"
+            width="500"
+            className="md:w-1/2 md:h-1/2 h-full w-full mx-auto object-contain" />
+        </div>)
+      );
+    })}
+  </>);
+};
+
+const data = [
+  {
+    category: "Artificial Intelligence",
+    title: "You can do more with AI.",
+    src: "https://images.unsplash.com/photo-1593508512255-86ab42a8e620?q=80&w=3556&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    content: <DummyContent />,
+  },
+  {
+    category: "Productivity",
+    title: "Enhance your productivity.",
+    src: "https://images.unsplash.com/photo-1531554694128-c4c6665f59c2?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    content: <DummyContent />,
+  },
+  {
+    category: "Product",
+    title: "Launching the new Apple Vision Pro.",
+    src: "https://images.unsplash.com/photo-1713869791518-a770879e60dc?q=80&w=2333&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    content: <DummyContent />,
+  },
+
+  {
+    category: "Product",
+    title: "Maps for your iPhone 15 Pro Max.",
+    src: "https://images.unsplash.com/photo-1599202860130-f600f4948364?q=80&w=2515&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    content: <DummyContent />,
+  },
+  {
+    category: "iOS",
+    title: "Photography just got better.",
+    src: "https://images.unsplash.com/photo-1602081957921-9137a5d6eaee?q=80&w=2793&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    content: <DummyContent />,
+  },
+  {
+    category: "Hiring",
+    title: "Hiring for a Staff Software Engineer",
+    src: "https://images.unsplash.com/photo-1511984804822-e16ba72f5848?q=80&w=2048&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    content: <DummyContent />,
+  },
+];
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
@@ -8,6 +8,7 @@ import "slick-carousel/slick/slick-theme.css";
 import image1 from "../../images/image1.jpg";
 import teamData from "../../data/team.json";
 import Footer from "../Footer/Footer";
+import { Carouselhome } from "../Carousel";
 
 
 const PrevArrow = ({ onClick }) => {
@@ -89,19 +90,7 @@ const Home = () => {
         </h6>
       </div>
 
-      <div className="slider-container">
-        <Slider {...settings}>
-          <div>
-            <img src={JODC_logo} alt="" className="carouselImages" />
-          </div>
-          <div>
-            <img src={image1} alt="" className="carouselImages" />
-          </div>
-          <div>
-            <img src={image1} alt="" className="carouselImages" />
-          </div>
-        </Slider>
-      </div>
+    <Carouselhome />
 
       <div className="team">
         <div className="title">