Event Card Component This component is designed to display event information in a visually appealing card format. It's built to be reusable, with all content and imagery passed in via props. It uses framer-motion for animations and is styled with Tailwind CSS using shadcn/ui theme variables for adaptability.
import { EventCard, Highlight } from "@/components/ui/event-card-component";
import { Calendar, MapPin, Utensils, Globe, Music } from "lucide-react";
// Demo component to showcase EventCard usage
export default function EventCardDemo() {
// Define the props for the event card based on the user's image
const eventDetails = {
title: "FOOD FEST 2025",
subtitle: "Global Food Festival",
tagline: "TASTE THE WORLD IN ONE BITE",
imageUrl: "https://cdn.21st.dev/assets/mirror/34/344d2c86196234f4e9997498e79e9e475efe2f95046503ba3f82354df85ce88f.jpg", // Placeholder image link
eventDate: "August 1–7, 2025",
eventLocation: "Beijing International Exhibition Center",
highlights: [
{
icon: <Utensils className="w-5 h-5 text-white" />,
text: "100+ restaurants participating",
},
{
icon: <Globe className="w-5 h-5 text-white" />,
text: "50 countries' signature cuisines",
},
{
icon: <Music className="w-5 h-5 text-white" />,
text: "All-day food stage performances",
},
],
// Dummy QR code image link
qrCodeUrl: "https://cdn.21st.dev/assets/mirror/3e/3e2cc9b7c90e06b0f88ec8290055284e8d05d755430b40cbf709bba4ee93750e.png",
ctaText: "Scan to buy now",
ctaSubtitle: "Early bird tickets 20% off",
};
// A simple mapping for date/location icons to pass into the component structure
const locationHighlights: Highlight[] = [
{
icon: <Calendar className="w-5 h-5 text-white" />,
text: eventDetails.eventDate
},
{
icon: <MapPin className="w-5 h-5 text-white" />,
text: eventDetails.eventLocation
}
]
return (
<div className="flex h-full w-full items-center justify-center bg-background p-4">
<EventCard
title={eventDetails.title}
subtitle={eventDetails.subtitle}
tagline={eventDetails.tagline}
imageUrl={eventDetails.imageUrl}
eventDate={eventDetails.eventDate}
eventLocation={eventDetails.eventLocation}
highlights={eventDetails.highlights}
// Pass location-specific icons separately if the component expects them this way
// Here, I've modified the component to accept all highlights in one go
qrCodeUrl={eventDetails.qrCodeUrl}
ctaText={eventDetails.ctaText}
ctaSubtitle={eventDetails.ctaSubtitle}
/>
</div>
);
}