Загрузка...
Сетка отзывчивых карточек объектов недвижимости в темном дизайне. Идеально для демонстрации избранных предложений на сайтах недвижимости.
<section class="max-w-7xl sm:px-6 mt-10 mb-8 px-4">
<div class="relative sm:mt-12 overflow-hidden shadow-[0px_0px_0px_1px_rgba(255,255,255,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.3),0px_12px_24px_-12px_rgba(0,0,0,0.5)] bg-black/80 border-white/10 border rounded-[40px] backdrop-blur">
<div class="absolute inset-0 pointer-events-none">
<div class="absolute inset-0 bg-gradient-to-b from-white/10 via-white/5 to-transparent"></div>
</div>
<div class="relative sm:p-8 pt-6 pr-6 pb-6 pl-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl sm:text-2xl text-neutral-100 font-geist tracking-tighter font-medium" style="">Featured Listings</h2>
<a href="#" class="inline-flex items-center gap-2 text-sm text-neutral-200 bg-white/5 hover:bg-white/10 rounded-full px-3 py-1.5 border border-white/10">
<span class="font-geist">View all</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4 stroke-[1.5]"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
<!-- Card 1 -->
<article class="group overflow-hidden bg-neutral-900/90 border border-white/10 rounded-xl">
<div class="relative aspect-[16/10]">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/26b3f294-2885-4440-ae74-eda7506cca9e_800w.jpg" alt="Hillside modern home" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]" style="">
<div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
<div class="absolute top-3 left-3 text-[11px] font-medium text-white bg-cyan-600/90 backdrop-blur-sm rounded-full px-2.5 py-1 border border-white/20 font-geist">New</div>
</div>
<div class="p-4">
<div class="flex items-start justify-between">
<div class="">
<h3 class="text-base font-semibold tracking-tight text-neutral-100 font-geist">Oceanview Modern Villa</h3>
<p class="text-xs text-neutral-400 mt-1 flex items-center gap-1 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="map-pin" class="lucide lucide-map-pin w-3.5 h-3.5 stroke-[1.5]"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" class=""></path><circle cx="12" cy="10" r="3" class=""></circle></svg>
Malibu, CA
</p>
</div>
<div class="text-right">
<div class="text-lg font-semibold text-neutral-100 font-geist">$2.8M</div>
<div class="text-[11px] text-neutral-400 font-geist">4 bd • 3 ba • 2,800 sqft</div>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<button class="inline-flex items-center gap-2 text-xs font-medium tracking-tight text-neutral-200 bg-white/5 hover:bg-white/10 rounded-full px-3 py-1.5 border border-white/10 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="eye" class="lucide lucide-eye w-3.5 h-3.5 stroke-[1.5]"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
Virtual tour
</button>
<button class="inline-flex items-center justify-center w-8 h-8 rounded-full border border-white/10 text-neutral-200 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="heart" class="lucide lucide-heart w-4 h-4 stroke-[1.5]"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
</button>
</div>
</div>
</article>
<!-- Card 2 -->
<article class="group overflow-hidden bg-neutral-900/90 border border-white/10 rounded-xl">
<div class="relative aspect-[16/10]">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/50eb2e09-7421-4468-b850-e7d07311523d_800w.jpg" alt="Penthouse suite" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]" style="">
<div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
<div class="absolute top-3 left-3 text-[11px] font-medium text-white bg-indigo-900/90 backdrop-blur-sm rounded-full px-2.5 py-1 border border-white/20 font-geist">Premium</div>
</div>
<div class="p-4">
<div class="flex items-start justify-between">
<div class="">
<h3 class="text-base font-semibold tracking-tight text-neutral-100 font-geist">Skyline Penthouse Suite</h3>
<p class="text-xs text-neutral-400 mt-1 flex items-center gap-1 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="map-pin" class="lucide lucide-map-pin w-3.5 h-3.5 stroke-[1.5]"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" class=""></path><circle cx="12" cy="10" r="3" class=""></circle></svg>
Manhattan, NY
</p>
</div>
<div class="text-right">
<div class="text-lg font-semibold text-neutral-100 font-geist">$5.2M</div>
<div class="text-[11px] text-neutral-400 font-geist">5 bd • 4 ba • 4,500 sqft</div>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<button class="inline-flex items-center gap-2 text-xs font-medium tracking-tight text-neutral-200 bg-white/5 hover:bg-white/10 rounded-full px-3 py-1.5 border border-white/10 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="eye" class="lucide lucide-eye w-3.5 h-3.5 stroke-[1.5]"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
Virtual tour
</button>
<button class="inline-flex items-center justify-center w-8 h-8 rounded-full border border-white/10 text-neutral-200 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="heart" class="lucide lucide-heart w-4 h-4 stroke-[1.5]"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
</button>
</div>
</div>
</article>
<!-- Card 3 -->
<article class="group overflow-hidden bg-neutral-900/90 border border-white/10 rounded-xl">
<div class="relative aspect-[16/10]">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c493dcb7-d70e-440e-92e9-4b752945750e_800w.jpg" alt="Contemporary townhouse" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
<div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
<div class="absolute top-3 left-3 text-[11px] font-medium text-indigo-900 bg-white/90 backdrop-blur-sm rounded-full px-2.5 py-1 border border-white/20 font-geist">Open House</div>
</div>
<div class="p-4">
<div class="flex items-start justify-between">
<div>
<h3 class="text-base font-semibold tracking-tight text-neutral-100 font-geist">Contemporary Townhouse</h3>
<p class="text-xs text-neutral-400 mt-1 flex items-center gap-1 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="map-pin" class="lucide lucide-map-pin w-3.5 h-3.5 stroke-[1.5]"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" class=""></path><circle cx="12" cy="10" r="3" class=""></circle></svg>
Austin, TX
</p>
</div>
<div class="text-right">
<div class="text-lg font-semibold text-neutral-100 font-geist">$1.15M</div>
<div class="text-[11px] text-neutral-400 font-geist">3 bd • 3 ba • 1,900 sqft</div>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<button class="inline-flex items-center gap-2 text-xs font-medium tracking-tight text-neutral-200 bg-white/5 hover:bg-white/10 rounded-full px-3 py-1.5 border border-white/10 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="route" class="lucide lucide-route w-3.5 h-3.5 stroke-[1.5]"><circle cx="6" cy="19" r="3" class=""></circle><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" class=""></path><circle cx="18" cy="5" r="3" class=""></circle></svg>
Directions
</button>
<button class="inline-flex items-center justify-center w-8 h-8 rounded-full border border-white/10 text-neutral-200 hover:bg-white/10">
</button></div></div></article></div></div></div></section>