From 88424bfb3f14c0fc01a558698b1281fc00fadf89 Mon Sep 17 00:00:00 2001
From: Maritto Burritto <maritberre@gmail.com>
Date: Sat, 21 Dec 2024 15:39:17 -0800
Subject: [PATCH 1/2] Added Carousel component

Yet to be tested, but it does compile without errors.
---
 package-lock.json              | 20 ++++++++++++++
 package.json                   |  1 +
 src/components/ui/Carousel.tsx | 48 ++++++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+)
 create mode 100644 src/components/ui/Carousel.tsx

diff --git a/package-lock.json b/package-lock.json
index 65e82f4..00def90 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "next": "15.1.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "swiper": "^11.1.15",
         "tailwind-merge": "^2.5.5",
         "zod": "^3.24.1"
       },
@@ -5530,6 +5531,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.15",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.15.tgz",
+      "integrity": "sha512-IzWeU34WwC7gbhjKsjkImTuCRf+lRbO6cnxMGs88iVNKDwV+xQpBCJxZ4bNH6gSrIbbyVJ1kuGzo3JTtz//CBw==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tabbable": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
diff --git a/package.json b/package.json
index bb388d3..04a87cd 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "next": "15.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "swiper": "^11.1.15",
     "tailwind-merge": "^2.5.5",
     "zod": "^3.24.1"
   },
diff --git a/src/components/ui/Carousel.tsx b/src/components/ui/Carousel.tsx
new file mode 100644
index 0000000..5e121df
--- /dev/null
+++ b/src/components/ui/Carousel.tsx
@@ -0,0 +1,48 @@
+// components/Carousel.tsx
+"use client";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Pagination, Navigation } from "swiper/modules";
+
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+
+const Carousel = () => {
+  return (
+    <div className="w-full max-w-4xl mx-auto">
+      <Swiper
+        spaceBetween={30}
+        pagination={{
+          clickable: true,
+        }}
+        navigation={true}
+        modules={[Pagination, Navigation]}
+        className="mySwiper"
+      >
+        {/* Slide #1 */}
+        <SwiperSlide>
+          <div className="h-64 bg-blue-500 flex items-center justify-center text-white text-2xl">
+            Slide 1
+          </div>
+        </SwiperSlide>
+
+        {/* Slide #2 */}
+        <SwiperSlide>
+          <div className="h-64 bg-green-500 flex items-center justify-center text-white text-2xl">
+            Slide 2
+          </div>
+        </SwiperSlide>
+
+        {/* Slide #3 */}
+        <SwiperSlide>
+          <div className="h-64 bg-purple-500 flex items-center justify-center text-white text-2xl">
+            Slide 3
+          </div>
+        </SwiperSlide>
+      </Swiper>
+    </div>
+  );
+};
+
+export default Carousel;
\ No newline at end of file

From bea3dc7822ce1151b22ecd5543876748b237c045 Mon Sep 17 00:00:00 2001
From: Maritto Burritto <maritberre@gmail.com>
Date: Sat, 21 Dec 2024 17:18:51 -0800
Subject: [PATCH 2/2] Refactor Carousel component with improved structure.

- Moved Carousel from ui folder to its own component folder.
- Changed the width to match the CallToAction box.
- Rounded the corner to match with the CallToAction box.
---
 src/components/Carousel/index.tsx | 43 +++++++++++++++++++++++++++
 src/components/ui/Carousel.tsx    | 48 -------------------------------
 2 files changed, 43 insertions(+), 48 deletions(-)
 create mode 100644 src/components/Carousel/index.tsx
 delete mode 100644 src/components/ui/Carousel.tsx

diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
new file mode 100644
index 0000000..b9fa91b
--- /dev/null
+++ b/src/components/Carousel/index.tsx
@@ -0,0 +1,43 @@
+// components/index.tsx
+"use client";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Pagination, Navigation } from "swiper/modules";
+
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+
+const Carousel = () => {
+  const slides = [
+    { id: 1, content: "Slide 1", color: "bg-blue-500" },
+    { id: 2, content: "Slide 2", color: "bg-green-500" },
+    { id: 3, content: "Slide 3", color: "bg-purple-500" },
+  ];
+
+  return (
+    <div className="w-full max-w-7xl mx-auto lg:px-8">
+      <Swiper
+        spaceBetween={30}
+        pagination={{
+          clickable: true,
+        }}
+        navigation={true}
+        modules={[Pagination, Navigation]}
+        className="mySwiper"
+      >
+        {slides.map((slide) => (
+          <SwiperSlide key={slide.id}>
+            <div
+              className={`${slide.color} h-64 flex items-center justify-center text-white font-bold text-2xl sm:rounded-3xl shadow-md`}
+            >
+              {slide.content}
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+};
+
+export default Carousel;
\ No newline at end of file
diff --git a/src/components/ui/Carousel.tsx b/src/components/ui/Carousel.tsx
deleted file mode 100644
index 5e121df..0000000
--- a/src/components/ui/Carousel.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-// components/Carousel.tsx
-"use client";
-
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Pagination, Navigation } from "swiper/modules";
-
-import "swiper/css";
-import "swiper/css/pagination";
-import "swiper/css/navigation";
-
-const Carousel = () => {
-  return (
-    <div className="w-full max-w-4xl mx-auto">
-      <Swiper
-        spaceBetween={30}
-        pagination={{
-          clickable: true,
-        }}
-        navigation={true}
-        modules={[Pagination, Navigation]}
-        className="mySwiper"
-      >
-        {/* Slide #1 */}
-        <SwiperSlide>
-          <div className="h-64 bg-blue-500 flex items-center justify-center text-white text-2xl">
-            Slide 1
-          </div>
-        </SwiperSlide>
-
-        {/* Slide #2 */}
-        <SwiperSlide>
-          <div className="h-64 bg-green-500 flex items-center justify-center text-white text-2xl">
-            Slide 2
-          </div>
-        </SwiperSlide>
-
-        {/* Slide #3 */}
-        <SwiperSlide>
-          <div className="h-64 bg-purple-500 flex items-center justify-center text-white text-2xl">
-            Slide 3
-          </div>
-        </SwiperSlide>
-      </Swiper>
-    </div>
-  );
-};
-
-export default Carousel;
\ No newline at end of file