8
} from "@/components/ui/card"
9
import { MapPin } from "lucide-react"
11
export default function CardDemo() {
13
<div className="w-full flex items-center justify-center p-4">
14
<Card className="w-[330px] sm:w-[350px] relative overflow-hidden rounded-2xl">
16
<div className="w-full h-[220px] relative overflow-hidden rounded-t-2xl">
20
className="w-full h-full object-cover rounded-t-2xl transition-transform duration-700 hover:scale-105"
22
{/* Subtle gradient overlay at bottom of image */}
23
<div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/40 to-transparent pointer-events-none" />
26
<CardHeader className="pb-4 px-6 pt-5">
27
<CardTitle className="text-[17px] mb-1.5 text-zinc-900 dark:text-[#F5F5F7] font-semibold tracking-tight">Florianópolis</CardTitle>
28
<CardDescription className="text-[13px] text-zinc-500 dark:text-[#86868B] flex items-center gap-1.5 font-medium font-matter">
29
<MapPin className="w-3.5 h-3.5" />
30
Santa Catarina, Brazil
34
<CardContent className="px-6 pb-6">
35
<p className="text-[13.5px] leading-[1.6] text-zinc-600 dark:text-[#86868B] font-matter">
36
Most of the city sits on an island, with something like forty beaches
37
around its edge. Flat water and mangroves in the north, open Atlantic
38
surf down the east coast.
