update design

components/shopify/promo-banner.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+} from '@/components/ui/carousel';
+
+const PROMOS = [
+  { text: 'Send a Gift Card', href: '/' },
+  { text: 'Free shipping on orders over $100', href: '/' },
+  { text: '30-day return policy', href: '/' },
+];
+
+const PromoBanner: React.FC = () => {
+  return (
+    <div className="bg-muted">
+      <Carousel opts={{ loop: true }} className="container mx-auto px-4">
+        <CarouselContent>
+          {PROMOS.map((promo) => (
+            <CarouselItem key={promo.text}>
+              <div className="h-10 flex items-center justify-center">
+                <Link
+                  href={promo.href}
+                  className="text-xs font-medium text-gray-900 underline underline-offset-2 hover:text-gray-600 transition-colors"
+                >
+                  {promo.text}
+                </Link>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious
+          variant="ghost"
+          className="left-0 size-7 text-gray-900 hover:text-gray-600"
+        >
+          <RiArrowLeftSLine size={16} />
+        </CarouselPrevious>
+        <CarouselNext
+          variant="ghost"
+          className="right-0 size-7 text-gray-900 hover:text-gray-600"
+        >
+          <RiArrowRightSLine size={16} />
+        </CarouselNext>
+      </Carousel>
+    </div>
+  );
+};
+
+export default PromoBanner;