Components
Loading preview...
Location Card A visually engaging card component to display location details with an image background and a 3D tilt effect on hover. It's fully responsive and theme-adaptive.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card-17// demo.tsx
import { LocationCard } from "@/components/ui/card-17";
// Sample data for the locations
const locations = [
{
city: "India",
address: "Hawa Mahal, Pink City, Jaipur, Rajasthan India",
imageUrl: "https://images.unsplash.com/photo-1524230507669-5ff97982bb5e?q=80&w=964&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?q=80&w=2070&auto=format&fit=crop", // Replace with your actual image URL
directionsUrl: "https://maps.app.goo.gl/TWAmMefs3B22wU5LA",
},
{
city: "Sydney",
address: "456 Ocean View Road, Bondi Beach, NSW 2026",
imageUrl: "https://images.unsplash.com/photo-1540448051910-09cfadd5df61?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTI0fHxTeWRuZXl8ZW58MHx8MHx8fDA%3D?q=80&w=1974&auto=format&fit=crop", // Replace with your actual image URL
directionsUrl: "https://maps.app.goo.gl/3qXzH4fSjK6rB7yP8",
},
];
const LocationCardDemo = () => {
return (
<div className="w-full bg-background text-foreground p-8">
<div className="max-w-5xl mx-auto">
<div className="mb-12">
<p className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-2">
LOCATIONS
</p>
<h1 className="text-4xl font-bold tracking-tight">
Our Offices
</h1>
<p className="mt-4 text-lg text-muted-foreground">
Find us at our offices in Sydney and New York.
</p>
</div>
{/* Responsive grid for the location cards */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-8" style={{ perspective: "1000px" }}>
{locations.map((location) => (
<LocationCard
key={location.city}
city={location.city}
address={location.address}
imageUrl={location.imageUrl}
directionsUrl={location.directionsUrl}
/>
))}
</div>
</div>
</div>
);
};
export default LocationCardDemo;