Offers Carousel This component provides a visually polished layout to display a primary offer alongside a carousel of related items. It's built to be highly reusable, allowing you to pass in offer details and an array of items to display. Animations are handled by framer-motion for a smooth user experience.
import * as React from "react";
import { Gift } from "lucide-react";
import { OffersCarousel, type CarouselItem } from "@/components/ui/offers-carousel";
// Mock data for the hotel carousel items
const mockHotels: CarouselItem[] = [
{
id: 1,
imageUrl: "https://cdn.21st.dev/assets/mirror/6a/6aca2257991a9f18c735a0c8882559123c17dabe5866e44611fdd9cccd7ec59a.jpg",
title: "Ramada by Wyndham",
subtitle: "5 star hotel in Katibagiya",
rating: 4.7,
price: 3671,
originalPrice: 5500,
discountPercentage: 33,
},
{
id: 2,
imageUrl: "https://cdn.21st.dev/assets/mirror/1a/1a46fc6937b8749baa68d962a1b3a47cd118686afe3582707638fb7ccab9eabe.jpg",
title: "Hotel Clarks Avadh",
subtitle: "5 star hotel in Qaisar Bagh",
rating: 4.3,
price: 4114,
originalPrice: 8249,
discountPercentage: 50,
},
{
id: 3,
imageUrl: "https://cdn.21st.dev/assets/mirror/13/13e689cde848b935d82d44d8c1f667e5a32987cd6d596d91e94c96332d41a730.jpg",
title: "The Oberoi Resort",
subtitle: "Luxury resort with private pool",
rating: 4.9,
price: 6750,
originalPrice: 9000,
discountPercentage: 25,
},
{
id: 4,
imageUrl: "https://cdn.21st.dev/assets/mirror/a7/a764949d8dcbbd90ba03fa504587283696959cc2ba38814aa94e19d2efbefdb9.jpg",
title: "Hyatt Regency",
subtitle: "Business hotel near airport",
rating: 4.6,
price: 5200,
originalPrice: 6500,
discountPercentage: 20,
},
{
id: 5,
imageUrl: "https://cdn.21st.dev/assets/mirror/91/91191ef54e5c1f68ee03ca0b109e6c1727f932864e28eefa24b8f743a173e9f9.jpg",
title: "Radisson Blu",
subtitle: "Modern hotel in city center",
rating: 4.5,
price: 4800,
originalPrice: 7000,
discountPercentage: 31,
},
];
const OffersCarouselDemo = () => {
return (
<div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
<OffersCarousel
offerTitle="Flat 25% off on hotels"
offerSubtitle="CTBEST - Code pre-applied for you!"
ctaText="View all hotels"
onCtaClick={() => alert("Redirecting to all hotels...")}
items={mockHotels}
/>
</div>
);
};
export default OffersCarouselDemo;