ADD file via upload

CarouselSection.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+
+interface CarouselSectionProps {
+  title: string;
+  items: any[];
+  renderItem: (item: any, index: number) => React.ReactNode;
+}
+
+export function CarouselSection({ title, items, renderItem }: CarouselSectionProps) {
+  const [startIndex, setStartIndex] = useState(0);
+
+  const handlePrev = () => {
+    setStartIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : items.length - 2));
+  };
+
+  const handleNext = () => {
+    setStartIndex((prevIndex) => (prevIndex < items.length - 2 ? prevIndex + 1 : 0));
+  };
+
+  return (
+    <section className="mb-12">
+      <h2 className="text-2xl font-semibold mb-4 text-black">{title}</h2>
+      <div className="relative">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {items.slice(startIndex, startIndex + 2).map((item, index) => renderItem(item, index))}
+        </div>
+        <Button
+          variant="outline"
+          size="icon"
+          className="absolute top-1/2 left-0 transform -translate-y-1/2 -translate-x-full"
+          onClick={handlePrev}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          className="absolute top-1/2 right-0 transform -translate-y-1/2 translate-x-full"
+          onClick={handleNext}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </section>
+  );
+}