feat: add basic webui

apps/web/app/(home)/components/testimonials.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@konobangu/design-system/components/ui/avatar';
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+} from '@konobangu/design-system/components/ui/carousel';
+import { User } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export const Testimonials = () => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setTimeout(() => {
+      if (api.selectedScrollSnap() + 1 === api.scrollSnapList().length) {
+        setCurrent(0);
+        api.scrollTo(0);
+      } else {
+        api.scrollNext();
+        setCurrent(current + 1);
+      }
+    }, 4000);
+  }, [api, current]);
+
+  return (
+    <div className="w-full py-20 lg:py-40">
+      <div className="container mx-auto">
+        <div className="flex flex-col gap-10">
+          <h2 className="text-left font-regular text-3xl tracking-tighter md:text-5xl lg:max-w-xl">
+            Trusted by thousands of businesses worldwide
+          </h2>
+          <Carousel setApi={setApi} className="w-full">
+            <CarouselContent>
+              {Array.from({ length: 15 }).map((_, index) => (
+                <CarouselItem className="lg:basis-1/2" key={index}>
+                  <div className="flex aspect-video h-full flex-col justify-between rounded-md bg-muted p-6 lg:col-span-2">
+                    <User className="h-8 w-8 stroke-1" />
+                    <div className="flex flex-col gap-4">
+                      <div className="flex flex-col">
+                        <h3 className="text-xl tracking-tight">
+                          Best decision
+                        </h3>
+                        <p className="max-w-xs text-base text-muted-foreground">
+                          Our goal was to streamline SMB trade, making it easier
+                          and faster than ever and we did it together.
+                        </p>
+                      </div>
+                      <p className="flex flex-row items-center gap-2 text-sm">
+                        <span className="text-muted-foreground">By</span>
+                        <Avatar className="h-6 w-6">
+                          <AvatarImage src="https://github.com/shadcn.png" />
+                          <AvatarFallback>CN</AvatarFallback>
+                        </Avatar>
+                        <span>John Johnsen</span>
+                      </p>
+                    </div>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </div>
+      </div>
+    </div>
+  );
+};