Offer Card

Cards 60

About

Offer Card This component displays an image, title, and offer text in a clean, card-style layout with a hover animation. It's designed to be easily reused with different content.

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

Code

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

Usage.tsx

import { OfferCard } from "@/components/ui/offer-card"; // Adjust the import path
import { ArrowRight } from "lucide-react"; // or any other icon library

// Data for the offer cards
const offers = [
  {
    imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-OhOM7JB8YtWyJLwOJU2L3eHHTTWitp.png&w=320&q=75",
    title: "Flights",
    offerText: "FLAT 10% OFF upto ₹1000",
    href: "#flights",
  },
  {
    imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-lCvW4p3khtoganHdqFzwxmQszzsKjS.png&w=320&q=75",
    title: "Hotels",
    offerText: "FLAT 25% OFF upto ₹2,000",
    href: "#hotels",
  },
  {
    imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-xOGseOCJFMz0Dokb7Ph4oJyU1fqL5o.png&w=320&q=75",
    title: "Trains",
    offerText: "FLAT ₹50 OFF",
    href: "#trains",
  },
  {
    imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-jUUd9iY5M09GRL9rsdfb188bh2kEwX.png&w=320&q=75",
    title: "Bus",
    offerText: "FLAT 10% OFF",
    href: "#bus",
  },
];

const OfferCardDemo = () => {
  return (
    <div className="p-4 md:p-8 bg-background">
      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {offers.map((offer, index) =>
          // Special handling for the last card to add the fade and arrow
          index === offers.length - 1 ? (
            <div key={offer.title} className="relative">
              <OfferCard {...offer} variant="faded" />
              {/* Fade overlay and animated arrow for the last card */}
              <div
                aria-hidden="true"
                className="pointer-events-none absolute inset-0 rounded-xl"
                style={{
                  background:
                    "linear-gradient(to left, hsl(var(--background)) 5%, transparent 40%)",
                }}
              />
              <div className="pointer-events-none absolute right-6 top-1/2 -translate-y-1/2 transform">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-background shadow-md transition-transform duration-300 ease-in-out group-hover:scale-110">
                  <ArrowRight className="h-6 w-6 text-primary" />
                </div>
              </div>
            </div>
          ) : (
            <OfferCard key={offer.title} {...offer} />
          )
        )}
      </div>
    </div>
  );
};

export default OfferCardDemo;