Offers Carousel

Pricing 202

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Offers Carousel to your project and fits it to your theme.

Code

How Offers Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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;