Components
Loading preview...
Location Card A visually polished card component to display a location with an image, title, subtitle, and an animated call-to-action button. It is fully responsive, theme-adaptive, and includes subtle animations using framer-motion.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/location-cardimport { LocationCard } from "@/components/ui/location-card"; // Adjust the import path accordingly
const LocationCardDemo = () => {
return (
<div className="flex min-h-[400px] w-full items-center justify-center bg-background p-4">
<LocationCard
imageUrl="https://images.unsplash.com/photo-1549880181-56a44cf4a9a5?q=80&w=2070&auto=format&fit=crop"
location="Dolomites"
country="Italy"
href="https://www.google.com/maps/place/Dolomites"
/>
</div>
);
};
export default LocationCardDemo;