Components
Loading preview...
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.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/offer-cardimport { 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;