Offer Carousel This component provides a sleek, horizontally scrollable display for showcasing offers or featured items. It includes custom navigation arrows and smooth-scrolling functionality, with cards that animate on hover for an engaging user experience.
import { OfferCarousel, type Offer } from "@/components/ui/offer-carousel";
// Sample data for the carousel
const sampleOffers: Offer[] = [
{
id: 1,
imageSrc: "https://cdn.21st.dev/assets/mirror/44/44405b1bc4b52fe9213a51e7506ccd884dca4f8bcf9769b15ed0f97548a4c7e9.jpg",
imageAlt: "International travel landmarks collage",
tag: "Discount",
title: "Up to ₹3000 OFF",
description: "On International Flights.",
brandLogoSrc: "https://cdn.21st.dev/assets/mirror/c7/c768e9a969001f656c9e4ebdce0733c11c3274f4397b2d455b9f0ca052450dbb.png",
brandName: "Ease My Trip",
promoCode: "EMTWID",
href: "#",
},
{
id: 2,
imageSrc: "https://cdn.21st.dev/assets/mirror/50/501d70c695995f15249d41160727cab416b6474bb6df4f567593958d9fee4f88.jpg",
imageAlt: "A delicious looking burger",
tag: "Discount",
title: "Snack more. Save more.",
description: "Get ₹75 OFF on purchases of ₹299 or more.",
brandLogoSrc: "https://cdn.21st.dev/assets/mirror/ef/ef5f1f14c2e8a7f4769344a9ded9c376bf2693e9e054d3184eb2085af2d63da4.png",
brandName: "McD",
promoCode: "TWID75",
href: "#",
},
{
id: 3,
imageSrc: "https://cdn.21st.dev/assets/mirror/7c/7cbc4c04ce69283da9b591d3daa162bca247beb2049ac692d1a0c0167870b18a.jpg",
imageAlt: "Logos of popular streaming services",
tag: "Discount",
title: "Flat ₹550 OFF on Timesprime",
description: "Exclusive offer on Times Prime Membership.",
brandLogoSrc: "https://cdn.21st.dev/assets/mirror/8f/8ffda60317c2dfd4837850a5e443955682a3714a426e53f73056db2a2d76e84d.png",
brandName: "Timesprime",
promoCode: "TWID550",
href: "#",
},
{
id: 4,
imageSrc: "https://cdn.21st.dev/assets/mirror/79/79495924c35e852d948f0f77bb6871963500ade402426413f8734a731d7a91d8.jpg",
imageAlt: "A person holding a phone with a payment app",
tag: "Cashback",
title: "10% Instant Cashback",
description: "On RuPay Credit Card transactions.",
brandLogoSrc: "https://cdn.21st.dev/assets/mirror/20/205887c88317dd3303635c07f71c21a577ca2b13acadf0933572b0f92d598650.png",
brandName: "Rupay CC",
promoCode: "RCC10",
href: "#",
},
{
id: 5,
imageSrc: "https://cdn.21st.dev/assets/mirror/60/60952923145c9a1fdd89dcc93d9c6c8210b28998a4c617b17fdcd2a8a296369f.jpg",
imageAlt: "Gourmet food on a plate",
tag: "Offer",
title: "Flat 20% OFF",
description: "On dining at partner restaurants.",
brandLogoSrc: "https://cdn.21st.dev/assets/mirror/e0/e0eb14e63928706b17756fa40178cb62ae256135667f53eaaa8d41f69f084602.webp",
brandName: "Dineout",
promoCode: "DINE20",
href: "#",
},
];
// The demo component
export default function OfferCarouselDemo() {
return (
<div className="w-full min-h-screen bg-background flex flex-col items-center justify-center p-4 md:p-10">
<div className="w-full max-w-6xl">
<h2 className="text-3xl font-bold mb-6 text-foreground">Deals of the Day</h2>
<OfferCarousel offers={sampleOffers} />
</div>
</div>
);
}