add public website

apps/public/src/app/carousel.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '@/components/ui/carousel';
+import Autoplay from 'embla-carousel-autoplay';
+import Image from 'next/image';
+
+const images = [
+  {
+    title: 'Beautiful overview, everything is clickable to get more details',
+    url: '/demo/overview-min.png',
+  },
+  {
+    title: 'Histogram, perfect for showing active users',
+    url: '/demo/histogram-min.png',
+  },
+  { title: 'Make your overview public', url: '/demo/overview-share-min.png' },
+  {
+    title: 'See real time events from your users',
+    url: '/demo/events-min.png',
+  },
+  { title: 'The classic line chart', url: '/demo/line-min.png' },
+  {
+    title: 'Bar charts to see your most popular content',
+    url: '/demo/bar-min.png',
+  },
+  { title: 'Get nice metric cards with graphs', url: '/demo/metrics-min.png' },
+  { title: 'See where your events comes from', url: '/demo/worldmap-min.png' },
+  { title: 'The classic pie chart', url: '/demo/pie-min.png' },
+];
+
+export function HomeCarousel() {
+  return (
+    <div className="mx-auto max-w-6xl p-4">
+      <div className="relative">
+        <div className="rounded-lg w-full max-w-6xl aspect-video dashed absolute -left-5 -top-5"></div>
+        <Carousel
+          className="w-full"
+          opts={{ loop: true }}
+          plugins={[
+            Autoplay({
+              delay: 2000,
+            }),
+          ]}
+        >
+          <CarouselContent>
+            {images.map((item) => (
+              <CarouselItem key={item.url}>
+                <div className="aspect-video rounded-md overflow-hidden">
+                  <Image
+                    className="w-full h-full object-cover"
+                    src={item.url}
+                    width={1080}
+                    height={608}
+                    alt={item.title}
+                  />
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious className="hidden md:visible" />
+          <CarouselNext className="hidden md:visible" />
+        </Carousel>
+      </div>
+    </div>
+  );
+}