All Prompts
All Prompts
herosectiontailwindanimatedresponsivereal-estatelanding
Animated Real Estate Hero with Search Filter
Полноэкранный анимированный блок недвижимости с фильтром поиска. Идеально для лендингов отелей, аренды и продажи жилья. Адаптивный дизайн.
Prompt
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NOVERA — Hero</title>
<!-- Fonts (optional): original file preconnects only, no explicit family import.
Keep as-is unless you want a specific font import. -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Tailwind (Required) -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Iconify (Required for dropdown icons) -->
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<!-- GSAP (Required for hero animation) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<style>
body {
background-color: #f9f8f6;
color: #1c1917;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fade-in-up {
opacity: 0;
transform: translateY(8px);
animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.fade-in-up {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
</style>
</head>
<body class="font-sans font-light text-primary selection:bg-primary selection:text-white">
<!-- Hero Section -->
<header
class="relative w-full h-screen min-h-[700px] flex flex-col justify-end pb-24 md:pb-32 px-6 md:px-12 overflow-hidden">
<!-- Background -->
<div class="absolute inset-0 z-0">
<img
src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/46011e44-1f9d-4c5e-b716-300b8ce1381e_3840w.jpg"
alt="Luxury Interior"
class="w-full h-full object-cover hero-bg-img"
/>
<div class="absolute inset-0 bg-black/10"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
</div>
<!-- Content -->
<div class="relative z-10 w-full max-w-[1400px] mx-auto fade-in-up">
<div class="max-w-4xl">
<span class="block text-[10px] uppercase tracking-widest text-white/60 font-sans mb-6">
Montreal, Quebec
</span>
<h1 class="text-4xl md:text-6xl lg:text-7xl text-white font-serif tracking-tight leading-[1.1] mb-6 opacity-0">
<span class="block overflow-hidden">
<span class="inline-block overflow-hidden align-top">
<span class="inline-block hero-word transform translate-y-full">Sanctuary</span>
</span>
<span class="inline-block overflow-hidden align-top">
<span class="inline-block hero-word transform translate-y-full">in</span>
</span>
<span class="inline-block overflow-hidden align-top">
<span class="inline-block hero-word transform translate-y-full">the</span>
</span>
</span>
<span class="block overflow-hidden">
<span class="inline-block overflow-hidden align-top">
<span class="inline-block hero-word transform translate-y-full">Heart</span>
</span>
<span class="inline-block overflow-hidden align-top">
<span class="inline-block hero-word transform translate-y-full">of</span>
</span>
<span class="inline-block overflow-hidden align-top">
<span class="inline-block hero-word transform translate-y-full">Montreal.</span>
</span>
</span>
</h1>
<p class="text-white/90 text-sm md:text-base font-sans font-light mb-12 max-w-lg">
Premium rental residences designed for refined urban living.
</p>
<!-- Minimal Search Bar -->
<div
class="mt-16 bg-white/10 backdrop-blur-md border border-white/20 rounded-[2px] px-8 py-6 flex flex-col md:flex-row items-center gap-6 max-w-5xl hero-search-bar opacity-0 translate-y-10 scale-95 origin-center">
<div class="w-full md:flex-1 group cursor-pointer">
<span class="block text-white/50 text-[10px] uppercase tracking-widest mb-2 group-hover:text-white transition-colors duration-300">
Neighbourhood
</span>
<div
class="flex items-center justify-between border-b border-white/20 pb-2 group-hover:border-white transition-colors duration-300">
<span class="text-white text-sm font-light">Neighbourhoods</span>
<iconify-icon icon="solar:alt-arrow-down-linear"
class="text-white/70 group-hover:text-white"></iconify-icon>
</div>
</div>
<div class="w-full md:flex-1 group cursor-pointer">
<span class="block text-white/50 text-[10px] uppercase tracking-widest mb-2 group-hover:text-white transition-colors duration-300">
Bedrooms
</span>
<div
class="flex items-center justify-between border-b border-white/20 pb-2 group-hover:border-white transition-colors duration-300">
<span class="text-white text-sm font-light">2 Bedrooms</span>
<iconify-icon icon="solar:alt-arrow-down-linear"
class="text-white/70 group-hover:text-white"></iconify-icon>
</div>
</div>
<div class="w-full md:flex-1 group cursor-pointer">
<span class="block text-white/50 text-[10px] uppercase tracking-widest mb-2 group-hover:text-white transition-colors duration-300">
Price Range
</span>
<div
class="flex items-center justify-between border-b border-white/20 pb-2 group-hover:border-white transition-colors duration-300">
<span class="text-white text-sm font-light">Any Price</span>
<iconify-icon icon="solar:alt-arrow-down-linear"
class="text-white/70 group-hover:text-white"></iconify-icon>
</div>
</div>
<div class="w-full md:flex-1 group cursor-pointer">
<span class="block text-white/50 text-[10px] uppercase tracking-widest mb-2 group-hover:text-white transition-colors duration-300">
Availability
</span>
<div
class="flex items-center justify-between border-b border-white/20 pb-2 group-hover:border-white transition-colors duration-300">
<span class="text-white text-sm font-light">Immediate</span>
<iconify-icon icon="solar:alt-arrow-down-linear"
class="text-white/70 group-hover:text-white"></iconify-icon>
</div>
</div>
<div class="w-full md:w-auto mt-4 md:mt-0">
<button class="w-full text-[10px] uppercase tracking-widest bg-white text-primary px-6 py-3 rounded-[2px] font-medium hover:bg-primary hover:text-white transition-all duration-400">
View Available Residences
</button>
</div>
</div>
</div>
</div>
</header>
<script>
document.addEventListener("DOMContentLoaded", () => {
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduceMotion) {
// Make sure hero content is visible with no animations.
const h1 = document.querySelector("h1");
const searchBar = document.querySelector(".hero-search-bar");
if (h1) h1.style.opacity = "1";
document.querySelectorAll(".hero-word").forEach(w => (w.style.transform = "translateY(0)"));
if (searchBar) {
searchBar.style.opacity = "1";
searchBar.style.transform = "translateY(0) scale(1)";
}
return;
}
gsap.registerPlugin(ScrollTrigger);
// 1) Hero Headline Reveal
gsap.to("h1", { opacity: 1, duration: 0.2 });
gsap.to(".hero-word", {
y: "0%",
duration: 1.4,
ease: "power4.out",
stagger: 0.06,
delay: 0.2
});
// 2) Hero Image Parallax
gsap.to(".hero-bg-img", {
yPercent: 15,
ease: "none",
scrollTrigger: {
trigger: "header",
start: "top top",
end: "bottom top",
scrub: true
}
});
// 3) Search Bar Intro
gsap.to(".hero-search-bar", {
y: 0,
opacity: 1,
scale: 1,
duration: 1.2,
delay: 0.8,
ease: "power3.out"
});
});
</script>
</body>
</html>