All Prompts
All Prompts
featuresectionreal-estatetailwindinteractiveresponsivegallery
Featured Residences Switcher Section
Секция избранных объектов недвижимости: галерея с интерактивным переключателем, hero-изображением, ценами и характеристиками. Адаптивный дизайн, Tailwind CSS.
Prompt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NOVERA — Featured Residence</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background-color: #f9f8f6;
color: #1c1917;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body class="font-sans font-light text-primary">
<section class="py-32 md:py-40 bg-[#F3EFE8] px-6 md:px-12 border-y border-black/10">
<div class="max-w-[1400px] mx-auto">
<!-- Section Intro -->
<div class="mb-16 md:mb-24">
<span class="block text-[10px] uppercase tracking-widest text-black/60 mb-6 font-medium">
04 — Featured Residences
</span>
<h2 class="font-serif text-5xl md:text-7xl font-light leading-tight mb-8">
Residences Defined by<br class="hidden md:block">
Light and Proportion.
</h2>
<p class="text-black/70 font-light max-w-3xl text-lg leading-relaxed">
Each residence is a study in proportion and light. Curated materials,
intelligent layouts, and quiet confidence define the Novera collection.
</p>
</div>
<!-- Hero Residence -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-center">
<!-- Image -->
<div
class="md:col-span-7 w-full h-[360px] md:h-[520px] relative rounded-[2px] overflow-hidden border border-black/10 group shadow-sm">
<img id="hero-img"
src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7d23a2f1-8c2a-4bc1-8d3a-99ca1a44f878_1600w.jpg"
class="w-full h-full object-cover transition-opacity duration-300 opacity-100"
/>
<div class="absolute inset-0 bg-black/5 pointer-events-none"></div>
</div>
<!-- Details -->
<div class="md:col-span-5 flex flex-col justify-center md:border-l md:border-black/10 md:pl-10">
<div id="hero-details" class="transition-opacity duration-300">
<span class="inline-block border border-black/20 bg-white text-black px-3 py-1 text-[10px] uppercase tracking-widest rounded-full mb-6">
Available Now
</span>
<h3 id="hero-title" class="font-serif text-3xl md:text-4xl font-light mb-2 tracking-tight">
The Penthouse Collection
</h3>
<div class="flex items-baseline gap-2 mb-6">
<span id="hero-price" class="font-serif text-3xl font-light">$8,500</span>
<span class="text-xs text-black/60 font-light">per month</span>
</div>
<p id="hero-desc"
class="text-black/70 font-light text-sm md:text-base leading-relaxed mb-8 max-w-md min-h-[4.5rem]">
A dual-level residence featuring floor-to-ceiling glazing and panoramic canal views.
Designed with a custom Italian kitchen system and private terrace access.
</p>
<div class="w-full grid grid-cols-3 gap-6 border-t border-black/10 pt-6 mb-8">
<div>
<span class="text-[10px] uppercase tracking-widest text-black/50">Total Area</span>
<span id="hero-spec-1" class="block text-sm font-medium">2,450 SQ FT</span>
</div>
<div>
<span class="text-[10px] uppercase tracking-widest text-black/50">Configuration</span>
<span id="hero-spec-2" class="block text-sm font-medium">3 Bed / 3.5 Bath</span>
</div>
<div>
<span class="text-[10px] uppercase tracking-widest text-black/50">Highlight</span>
<span id="hero-spec-3" class="block text-sm font-medium">Wrap-around</span>
</div>
</div>
<button class="w-full bg-black text-white text-[10px] uppercase tracking-widest px-8 py-4 rounded-[2px] hover:bg-black/80 transition-all duration-300 mb-10">
Schedule Private Viewing
</button>
<div class="flex flex-col gap-3 border-t border-black/10 pt-8">
<span class="text-[10px] uppercase tracking-widest text-black/40 mb-2">
Select Residence
</span>
<button onclick="updateHero(0)" class="hero-selector text-left text-[10px] uppercase tracking-widest text-black border-b border-black/40 pb-1">
The Penthouse Collection
</button>
<button onclick="updateHero(1)" class="hero-selector text-left text-[10px] uppercase tracking-widest text-black/60 hover:text-black">
Canal View Residence
</button>
<button onclick="updateHero(2)" class="hero-selector text-left text-[10px] uppercase tracking-widest text-black/60 hover:text-black">
Skyline Corner Suite
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
const heroData = [
{
title: "The Penthouse Collection",
price: "$8,500",
desc: "A dual-level residence featuring floor-to-ceiling glazing and panoramic canal views.",
specs: ["2,450 SQ FT", "3 Bed / 3.5 Bath", "Wrap-around"],
img: "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7d23a2f1-8c2a-4bc1-8d3a-99ca1a44f878_3840w.jpg"
},
{
title: "Canal View Residence",
price: "$6,200",
desc: "Serene water views define this open-plan residence with oak herringbone flooring.",
specs: ["1,800 SQ FT", "2 Bed / 2 Bath", "Water View"],
img: "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/00cbf3d5-c57a-44b4-8ff1-669b2228ff09_3840w.jpg"
},
{
title: "Skyline Corner Suite",
price: "$5,800",
desc: "Corner unit offering dual-exposure light and limestone-clad master bath.",
specs: ["1,550 SQ FT", "2 Bed / 2 Bath", "City Views"],
img: "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/412b2829-7d74-411a-a6e9-9b5116831d1e_3840w.jpg"
}
];
function updateHero(index) {
const img = document.getElementById('hero-img');
const details = document.getElementById('hero-details');
img.style.opacity = 0;
details.style.opacity = 0;
setTimeout(() => {
img.src = heroData[index].img;
document.getElementById('hero-title').innerText = heroData[index].title;
document.getElementById('hero-price').innerText = heroData[index].price;
document.getElementById('hero-desc').innerText = heroData[index].desc;
document.getElementById('hero-spec-1').innerText = heroData[index].specs[0];
document.getElementById('hero-spec-2').innerText = heroData[index].specs[1];
document.getElementById('hero-spec-3').innerText = heroData[index].specs[2];
img.style.opacity = 1;
details.style.opacity = 1;
}, 200);
}
</script>
</body>
</html>