Загрузка...
Шаблон лендинга Luma Furniture для интернет-магазина мебели. Чистый дизайн, адаптивный. Идеален для мебельных брендов и онлайн-продаж.
<html lang="en" class="scroll-smooth"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LUMA | Elevated Essentials</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #ffffff;
}
::-webkit-scrollbar-thumb {
background: #e5e5e5;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #d4d4d4;
}
/* Animation Utilities */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
/* Loader */
.loader-overlay {
position: fixed;
inset: 0;
background: #fff;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.6s ease-out, visibility 0.6s;
}
.loader-overlay.hidden {
opacity: 0;
visibility: hidden;
}
/* Glassmorphism details */
.glass-panel {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.5);
}
/* Mobile Menu Transition */
#mobile-menu {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
transform: translateY(-20px);
opacity: 0;
pointer-events: none;
}
#mobile-menu.open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
/* Search Bar Transition */
#search-bar-container {
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#search-bar-container.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Dropdown Hover Logic */
.nav-item:hover .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
</style>
<link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">.font-geist { font-family: 'Geist', sans-serif !important; }</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">.font-roboto { font-family: 'Roboto', sans-serif !important; }</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">.font-montserrat { font-family: 'Montserrat', sans-serif !important; }</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">.font-poppins { font-family: 'Poppins', sans-serif !important; }</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">.font-playfair { font-family: 'Playfair Display', serif !important; }</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">.font-merriweather { font-family: 'Merriweather', serif !important; }</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">.font-manrope { font-family: 'Manrope', sans-serif !important; }</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">.font-work-sans { font-family: 'Work Sans', sans-serif !important; }</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">.font-pt-serif { font-family: 'PT Serif', serif !important; }</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">.font-geist-mono { font-family: 'Geist Mono', monospace !important; }</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">.font-space-mono { font-family: 'Space Mono', monospace !important; }</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">.font-quicksand { font-family: 'Quicksand', sans-serif !important; }</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">.font-nunito { font-family: 'Nunito', sans-serif !important; }</style><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><style id="all-fonts-style-font-newsreader">.font-newsreader { font-family: 'Newsreader', serif !important; }</style><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-google-sans-flex">.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }</style><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-oswald">.font-oswald { font-family: 'Oswald', sans-serif !important; }</style><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-dm-sans">.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }</style><link id="all-fonts-link-font-cormorant" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-cormorant">.font-cormorant { font-family: 'Cormorant Garamond', serif !important; }</style></head>
<body class="bg-white text-neutral-900 selection:bg-neutral-900 selection:text-white relative">
<!-- Page Loader -->
<div id="loader" class="loader-overlay" style="display: none;">
<div class="flex flex-col items-center gap-4">
<span class="text-xl font-medium tracking-tighter">LUMA</span>
<div class="h-0.5 w-24 bg-neutral-100 overflow-hidden relative rounded-full">
<div class="absolute inset-0 bg-neutral-900 w-full animate-[ping_1.5s_cubic-bezier(0,0,0.2,1)_infinite]"></div>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="fixed top-0 left-0 w-full z-50 bg-white/85 backdrop-blur-md border-b border-neutral-100 transition-all duration-300" id="navbar">
<div class="flex h-16 max-w-[1440px] mr-auto ml-auto pr-6 pl-6 relative items-center justify-between">
<!-- Search Bar Overlay (Hidden by default) -->
<div id="search-bar-container" class="absolute inset-0 bg-white z-[60] flex items-center px-6 opacity-0 invisible transform -translate-y-2">
<div class="max-w-[1440px] mx-auto w-full flex items-center gap-3">
<iconify-icon icon="lucide:search" width="20" class="text-neutral-400"></iconify-icon>
<input type="text" id="search-input" placeholder="Search for products, collections, or articles..." class="flex-1 h-10 bg-transparent border-none outline-none text-sm text-neutral-900 placeholder:text-neutral-400 font-medium">
<button id="close-search-btn" class="p-2 hover:bg-neutral-100 rounded-full text-neutral-500 hover:text-neutral-900 transition-colors">
<iconify-icon icon="lucide:x" width="20"></iconify-icon>
</button>
</div>
</div>
<!-- Left Group: Mobile Menu & Logo -->
<div class="flex items-center gap-4 z-50">
<button id="menu-btn" class="lg:hidden p-1 -ml-1 text-neutral-500 hover:text-black transition-colors focus:outline-none">
<iconify-icon icon="lucide:menu" width="24" stroke-width="1.5"></iconify-icon>
</button>
<a href="/home" class="hover:opacity-70 transition-opacity text-xl font-medium tracking-tighter">LUMA</a>
</div>
<!-- Center Navigation (Desktop) - Absolutely Centered -->
<div class="hidden lg:flex items-center gap-8 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<!-- Shop (Mega Menu) - Left Aligned -->
<div class="nav-item group flex items-center justify-center relative h-16">
<a href="/product-listing-page" class="hover:text-black transition-colors text-sm font-medium text-neutral-500">Shop</a>
<!-- Dropdown aligned left-0 -->
<div class="nav-dropdown absolute top-full left-0 w-[500px] bg-white border border-neutral-100 rounded-xl shadow-[0_16px_40px_-12px_rgba(0,0,0,0.1)] p-6 opacity-0 invisible transform translate-y-2 transition-all duration-200 ease-out cursor-default z-50">
<div class="grid grid-cols-2 gap-8">
<div class="flex flex-col space-y-3">
<span class="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-1">Browse</span>
<a href="/product-listing-page" class="hover:text-neutral-500 transition-colors text-sm font-medium text-neutral-900">All Products</a>
<a href="/product-detail-page" class="hover:text-neutral-500 transition-colors flex items-center justify-between text-sm font-medium text-neutral-900">
New Arrivals
<span class="text-[10px] text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded font-bold">NEW</span>
</a>
<a href="/#" class="hover:text-neutral-500 transition-colors text-sm font-medium text-neutral-900">Best Sellers</a>
<a href="#" class="text-sm font-medium text-red-600 hover:text-red-500 transition-colors">Sale</a>
</div>
<div class="flex flex-col space-y-3">
<span class="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-1">Categories</span>
<a href="#" class="text-sm text-neutral-600 hover:text-black transition-colors flex items-center gap-2">
<iconify-icon icon="lucide:sofa" width="14"></iconify-icon> Furniture
</a>
<a href="#" class="text-sm text-neutral-600 hover:text-black transition-colors flex items-center gap-2">
<iconify-icon icon="lucide:lamp" width="14" class=""></iconify-icon> Lighting
</a>
<a href="#" class="text-sm text-neutral-600 hover:text-black transition-colors flex items-center gap-2">
<iconify-icon icon="lucide:flower-2" width="14"></iconify-icon> Accessories
</a>
</div>
</div>
</div>
</div>
<a href="/about-us" class="hover:text-black transition-colors text-sm font-medium text-neutral-500">About</a>
<a href="/blog" class="hover:text-black transition-colors text-sm font-medium text-neutral-500">Journal</a>
<a href="/contact-us" class="hover:text-black transition-colors text-sm font-medium text-neutral-500">Contact</a>
</div>
<!-- Right Icons -->
<div class="flex items-center gap-3 z-50">
<button id="search-trigger-btn" class="w-8 h-8 flex items-center justify-center text-neutral-500 hover:text-black transition-colors rounded-full hover:bg-neutral-100" aria-label="Search">
<iconify-icon icon="lucide:search" width="20" stroke-width="1.5" class=""></iconify-icon>
</button>
<a href="/account-dashboard" class="flex items-center justify-center hover:text-black transition-colors hover:bg-neutral-100 text-neutral-500 w-8 h-8 rounded-full" aria-label="Account">
<iconify-icon icon="lucide:user" width="20" stroke-width="1.5" class=""></iconify-icon>
</a>
<button class="flex hover:text-black transition-colors hover:bg-neutral-100 text-neutral-500 w-8 h-8 rounded-full relative items-center justify-center" aria-label="Cart" onclick="window.location.href='/cart'" role="button">
<iconify-icon icon="lucide:shopping-bag" width="20" stroke-width="1.5" class=""></iconify-icon>
<span class="absolute top-1 right-0.5 w-3 h-3 bg-neutral-900 text-white text-[8px] font-bold flex items-center justify-center rounded-full ring-2 ring-white">2</span>
</button>
</div>
</div>
<!-- Mobile Menu (Full Width) -->
<div id="mobile-menu" class="absolute top-16 left-0 w-full bg-white border-b border-neutral-100 px-6 py-8 lg:hidden shadow-xl h-[calc(100vh-64px)] overflow-y-auto">
<div class="flex flex-col space-y-6 max-w-[1440px] mx-auto">
<div class="space-y-3">
<a href="#shop" class="text-2xl font-medium text-neutral-900 mobile-link block tracking-tight">Shop</a>
<div class="pl-4 space-y-3 border-l-2 border-neutral-100">
<a href="#" class="block text-sm text-neutral-500">New Arrivals</a>
<a href="#" class="block text-sm text-neutral-500">Categories</a>
<a href="#" class="block text-sm text-red-500">Sale</a>
</div>
</div>
<div class="space-y-3">
<a href="#collections" class="text-2xl font-medium text-neutral-900 mobile-link block tracking-tight">Collections</a>
<div class="pl-4 space-y-3 border-l-2 border-neutral-100">
<a href="#" class="block text-sm text-neutral-500">Seasonal</a>
<a href="#" class="block text-sm text-neutral-500">Rooms</a>
</div>
</div>
<a href="#about" class="text-2xl font-medium text-neutral-900 mobile-link block tracking-tight">About</a>
<a href="#journal" class="text-2xl font-medium text-neutral-900 mobile-link block tracking-tight">Journal</a>
</div>
</div>
</nav>
<!-- HERO SECTION -->
<header class="relative w-full min-h-[100dvh] lg:h-screen flex items-center bg-white overflow-hidden isolate pt-32 lg:pt-0" id="hero">
<!-- Background Gradients -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[1200px] h-[600px] bg-gradient-to-b from-neutral-50 via-neutral-100/50 to-transparent rounded-[100%] blur-3xl -z-10 opacity-70 pointer-events-none"></div>
<!-- Inner Container -->
<div class="w-full max-w-[1440px] mx-auto px-6 h-full flex items-center">
<div class="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center w-full mt-8 lg:mt-0">
<!-- Left: Copy (Col Span 5) -->
<div class="lg:col-span-5 flex flex-col items-start relative z-10">
<!-- Social Proof -->
<div class="flex items-center gap-3 mb-8 animate-fade-in-up opacity-0 mt-8 lg:mt-0">
<div class="flex -space-x-2.5">
<img class="h-9 w-9 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&q=80" alt="">
<img class="h-9 w-9 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=64&q=80" alt="">
<img class="h-9 w-9 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=64&q=80" alt="">
<div class="h-9 w-9 rounded-full ring-2 ring-white bg-neutral-100 flex items-center justify-center text-[10px] font-bold text-neutral-600">+2k</div>
</div>
<div class="flex flex-col justify-center">
<div class="flex text-neutral-900 text-[10px] gap-0.5">
<iconify-icon icon="lucide:star" fill="currentColor" class=""></iconify-icon>
<iconify-icon icon="lucide:star" fill="currentColor" class=""></iconify-icon>
<iconify-icon icon="lucide:star" fill="currentColor" class=""></iconify-icon>
<iconify-icon icon="lucide:star" fill="currentColor"></iconify-icon>
<iconify-icon icon="lucide:star" fill="currentColor"></iconify-icon>
</div>
<span class="text-xs font-medium text-neutral-500 mt-0.5">Trusted by designers</span>
</div>
</div>
<h1 class="text-5xl lg:text-7xl font-medium tracking-tighter leading-[0.95] mb-6 text-neutral-900 animate-fade-in-up opacity-0 delay-100">
Timeless design, <br>
<span class="text-neutral-400">everyday living.</span>
</h1>
<p class="text-lg text-neutral-500 mb-10 leading-relaxed max-w-md animate-fade-in-up opacity-0 delay-200">
Premium furniture designed for the modern sanctuary. Hand-finished materials meets ergonomic excellence.
</p>
<!-- Buttons -->
<div class="flex flex-col sm:flex-row w-full sm:w-auto gap-3 animate-fade-in-up opacity-0 delay-300">
<a href="#shop" class="inline-flex items-center justify-center h-12 px-8 bg-neutral-900 text-white text-sm font-semibold rounded-full hover:bg-neutral-800 hover:shadow-lg hover:shadow-neutral-500/10 hover:-translate-y-0.5 transition-all duration-300">
Shop Collection
</a>
<a href="#new" class="inline-flex items-center justify-center h-12 px-8 bg-white border border-neutral-200 text-neutral-900 text-sm font-semibold rounded-full hover:bg-neutral-50 hover:border-neutral-300 transition-all group">
<span>View Lookbook</span>
<iconify-icon icon="lucide:arrow-right" class="ml-2 transition-transform group-hover:translate-x-1" width="16"></iconify-icon>
</a>
</div>
<div class="mt-10 flex flex-wrap gap-x-6 gap-y-2 text-xs font-medium text-neutral-400 animate-fade-in-up opacity-0 delay-300">
<div class="flex items-center gap-1.5">
<iconify-icon icon="lucide:truck" width="14"></iconify-icon> Free Shipping
</div>
<div class="flex items-center gap-1.5">
<iconify-icon icon="lucide:shield-check" width="14" class=""></iconify-icon> 5-Year Warranty
</div>
</div>
</div>
<!-- Right: Product Showcase (Col Span 7) -->
<div class="lg:col-span-7 relative h-[500px] lg:h-[70vh] min-h-[400px] w-full animate-fade-in-up opacity-0 delay-200">
<!-- Main Product Image -->
<div class="absolute inset-0 rounded-2xl overflow-hidden shadow-2xl bg-neutral-100 group">
<img src="https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?q=80&w=2587&auto=format&fit=crop" alt="Lounge Chair" class="object-center transition-transform duration-[1.5s] ease-in-out group-hover:scale-105 w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent pointer-events-none"></div>
</div>
<!-- Floating Detail Card -->
<div class="absolute bottom-6 left-6 md:left-auto md:right-auto md:bottom-12 md:left-12 w-64 glass-panel p-4 rounded-xl shadow-[0_20px_40px_-12px_rgba(0,0,0,0.15)] border border-white/60 z-20 hover:-translate-y-1 transition-transform duration-300">
<div class="flex items-start justify-between mb-3">
<div class="">
<p class="text-[10px] font-bold text-neutral-500 uppercase tracking-wide mb-0.5">Best Seller</p>
<h3 class="text-sm font-semibold text-neutral-900 leading-tight">Linen Lounge Chair</h3>
</div>
<span class="bg-neutral-900 text-white text-[10px] font-bold px-1.5 py-0.5 rounded ml-2">$890</span>
</div>
<!-- Color Selection -->
<div class="space-y-3">
<div class="flex gap-2">
<button class="w-5 h-5 rounded-full bg-[#E5E0D5] ring-1 ring-offset-2 ring-neutral-900 cursor-pointer"></button>
<button class="w-5 h-5 rounded-full bg-[#3F3F3F] ring-1 ring-transparent hover:ring-offset-2 hover:ring-neutral-300 transition-all cursor-pointer"></button>
<button class="w-5 h-5 rounded-full bg-[#8C7E72] ring-1 ring-transparent hover:ring-offset-2 hover:ring-neutral-300 transition-all cursor-pointer"></button>
</div>
<button class="w-full h-9 bg-neutral-900 hover:bg-neutral-800 text-white text-[10px] font-semibold rounded-lg transition-colors flex items-center justify-center gap-2">
<iconify-icon icon="lucide:shopping-bag" width="14"></iconify-icon>
Add to Cart
</button>
</div>
</div>
<!-- Secondary Image -->
<div class="hidden lg:block absolute -right-8 top-12 w-48 aspect-[3/4] rounded-lg overflow-hidden border-4 border-white shadow-xl animate-fade-in-up opacity-0 delay-300 hover:scale-105 transition-transform duration-500">
<img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?w=800&q=80" class="w-full h-full object-cover">
</div>
</div>
</div>
</div>
</header>
<!-- Ticker Section -->
<div class="w-full border-y border-neutral-100 bg-neutral-50/60 py-5">
<div class="max-w-[1440px] mx-auto px-6">
<div class="flex flex-wrap justify-center gap-x-8 gap-y-4 text-xs font-semibold text-neutral-400 uppercase tracking-widest text-center">
<span class="flex items-center gap-2 hover:text-neutral-600 transition-colors cursor-default"><iconify-icon icon="lucide:check-circle" width="14"></iconify-icon> Sustainably Sourced</span>
<span class="flex items-center gap-2 hover:text-neutral-600 transition-colors cursor-default"><iconify-icon icon="lucide:box" width="14"></iconify-icon> Free Global Shipping</span>
<span class="flex items-center gap-2 hover:text-neutral-600 transition-colors cursor-default"><iconify-icon icon="lucide:shield-check" width="14"></iconify-icon> 5 Year Warranty</span>
<span class="flex items-center gap-2 hidden sm:flex hover:text-neutral-600 transition-colors cursor-default"><iconify-icon icon="lucide:award" width="14"></iconify-icon> Award Winning Design</span>
</div>
</div>
</div>
<!-- NEW ARRIVALS -->
<section class="w-full py-20 lg:py-32 scroll-mt-20" id="new">
<div class="max-w-[1440px] mx-auto px-6">
<div class="flex justify-between items-end mb-10 reveal">
<h2 class="text-3xl lg:text-4xl font-medium tracking-tighter">New Arrivals</h2>
<a href="#shop" class="text-sm font-medium text-neutral-500 hover:text-black transition-colors flex items-center gap-1 group pb-1 border-b border-transparent hover:border-black">
Browse All
<iconify-icon icon="lucide:arrow-up-right" width="16" class="transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5"></iconify-icon>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 h-auto md:h-[600px]">
<!-- Large Item -->
<div class="h-96 md:h-auto md:col-span-2 relative group overflow-hidden rounded-xl bg-neutral-100 reveal cursor-pointer">
<img src="https://images.unsplash.com/photo-1622653533660-a1538fe8424c?w=2560&q=80" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Lighting">
<div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-80 transition-opacity duration-500"></div>
<div class="absolute bottom-8 left-8 text-white z-10">
<span class="text-xs font-bold uppercase tracking-wider mb-2 block opacity-80">Collection 01</span>
<h3 class="text-3xl font-medium tracking-tight mb-2">Lighting Series</h3>
<p class="text-white/80 text-sm max-w-sm">Illuminate your sanctuary with our hand-blown glass collection.</p>
</div>
<button class="absolute top-6 right-6 w-12 h-12 bg-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300 shadow-xl z-20 text-neutral-900">
<iconify-icon icon="lucide:arrow-right" width="20"></iconify-icon>
</button>
</div>
<!-- Stacked Items -->
<div class="grid grid-rows-2 gap-6 h-96 md:h-auto">
<div class="relative group overflow-hidden rounded-xl bg-neutral-100 reveal delay-100 cursor-pointer">
<img src="https://images.unsplash.com/photo-1594026112284-02bb6f3352fe?q=80&w=2070&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Ceramics">
<div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-80"></div>
<div class="absolute bottom-6 left-6 text-white z-10">
<h3 class="text-xl font-medium tracking-tight">Ceramics</h3>
</div>
</div>
<div class="relative group overflow-hidden rounded-xl bg-neutral-100 reveal delay-200 cursor-pointer">
<img src="https://images.unsplash.com/photo-1567016432779-094069958ea5?q=80&w=1780&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Furniture">
<div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-80"></div>
<div class="absolute bottom-6 left-6 text-white z-10">
<h3 class="text-xl font-medium tracking-tight">Seating</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SHOP SECTION -->
<section class="w-full py-20 bg-neutral-50 border-y border-neutral-200 scroll-mt-20" id="shop">
<div class="max-w-[1440px] mx-auto px-6">
<div class="flex flex-col lg:flex-row lg:items-center justify-between mb-12 gap-6 reveal">
<h2 class="text-3xl font-medium tracking-tighter text-neutral-900">Essential Objects</h2>
<!-- Filter Tabs -->
<div class="flex flex-wrap gap-2">
<button class="px-5 py-2.5 rounded-full bg-neutral-900 text-white text-xs font-semibold shadow-lg shadow-neutral-900/10 transition-transform active:scale-95">All</button>
<button class="px-5 py-2.5 rounded-full bg-white border border-neutral-200 text-neutral-600 text-xs font-semibold hover:border-neutral-400 hover:text-neutral-900 transition-colors">Lighting</button>
<button class="px-5 py-2.5 rounded-full bg-white border border-neutral-200 text-neutral-600 text-xs font-semibold hover:border-neutral-400 hover:text-neutral-900 transition-colors">Furniture</button>
<button class="px-5 py-2.5 rounded-full bg-white border border-neutral-200 text-neutral-600 text-xs font-semibold hover:border-neutral-400 hover:text-neutral-900 transition-colors">Accessories</button>
</div>
</div>
<!-- Product Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-y-12 gap-x-8">
<!-- Product 1 -->
<div class="group relative reveal">
<div class="aspect-square bg-white rounded-lg overflow-hidden mb-4 relative border border-neutral-100">
<img src="https://images.unsplash.com/photo-1604610728890-6f4b631ed081?w=800&q=80" alt="Lamp" class="w-full h-full object-cover group-hover:opacity-0 transition-opacity absolute inset-0 z-10">
<img src="https://images.unsplash.com/photo-1603801705819-e3b27f8bb8cc?w=800&q=80" alt="Lamp Context" class="w-full h-full object-cover absolute inset-0 scale-105">
<div class="absolute bottom-4 left-4 right-4 z-20 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
<button class="w-full h-10 bg-white/95 backdrop-blur text-neutral-900 text-xs font-bold rounded shadow-lg hover:bg-neutral-900 hover:text-white transition-colors flex items-center justify-center gap-2">
<iconify-icon icon="lucide:plus" width="14"></iconify-icon> Quick Add
</button>
</div>
<div class="absolute top-3 right-3 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="w-8 h-8 rounded-full bg-white shadow-sm flex items-center justify-center transition-all text-neutral-400 hover:text-red-500 hover:scale-110">
<iconify-icon icon="lucide:heart" width="16"></iconify-icon>
</button>
</div>
</div>
<div class="flex justify-between items-start">
<div>
<h3 class="text-sm font-semibold text-neutral-900 tracking-tight">Orbital Lamp</h3>
<p class="text-xs text-neutral-500 mt-1">Matte Black Steel</p>
</div>
<span class="text-sm font-semibold text-neutral-900">$320</span>
</div>
</div>
<!-- Product 2 -->
<div class="group relative reveal delay-75">
<div class="aspect-square bg-white rounded-lg overflow-hidden mb-4 relative border border-neutral-100">
<img src="https://images.unsplash.com/photo-1592078615290-033ee584e267?q=80&w=1964&auto=format&fit=crop" alt="Chair" class="w-full h-full object-cover group-hover:opacity-0 transition-opacity absolute inset-0 z-10">
<img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=800&q=80" alt="Chair Context" class="w-full h-full object-cover absolute inset-0 scale-105">
<div class="absolute top-3 left-3 z-20 bg-neutral-900 text-white text-[10px] uppercase font-bold px-2 py-1 rounded-sm">New</div>
<div class="absolute bottom-4 left-4 right-4 z-20 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
<button class="w-full h-10 bg-white/95 backdrop-blur text-neutral-900 text-xs font-bold rounded shadow-lg hover:bg-neutral-900 hover:text-white transition-colors flex items-center justify-center gap-2">
<iconify-icon icon="lucide:plus" width="14"></iconify-icon> Quick Add
</button>
</div>
<div class="absolute top-3 right-3 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="w-8 h-8 rounded-full bg-white shadow-sm flex items-center justify-center transition-all text-neutral-400 hover:text-red-500 hover:scale-110">
<iconify-icon icon="lucide:heart" width="16"></iconify-icon>
</button>
</div>
</div>
<div class="flex justify-between items-start">
<div>
<h3 class="text-sm font-semibold text-neutral-900 tracking-tight">Linen Lounge</h3>
<p class="text-xs text-neutral-500 mt-1">Natural Oak</p>
</div>
<span class="text-sm font-semibold text-neutral-900">$890</span>
</div>
</div>
<!-- Product 3 -->
<div class="group relative reveal delay-100">
<div class="aspect-square bg-white rounded-lg overflow-hidden mb-4 relative border border-neutral-100">
<img src="https://images.unsplash.com/photo-1597696929736-6d13bed8e6a8?w=800&q=80" alt="Vase" class="w-full h-full object-cover group-hover:opacity-0 transition-opacity absolute inset-0 z-10">
<img src="https://images.unsplash.com/photo-1608111115633-872fa895d40d?w=800&q=80" alt="Vase Context" class="w-full h-full object-cover absolute inset-0 scale-105">
<div class="absolute bottom-4 left-4 right-4 z-20 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
<button class="w-full h-10 bg-white/95 backdrop-blur text-neutral-900 text-xs font-bold rounded shadow-lg hover:bg-neutral-900 hover:text-white transition-colors flex items-center justify-center gap-2">
<iconify-icon icon="lucide:plus" width="14"></iconify-icon> Quick Add
</button>
</div>
<div class="absolute top-3 right-3 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="w-8 h-8 rounded-full bg-white shadow-sm flex items-center justify-center transition-all text-neutral-400 hover:text-red-500 hover:scale-110">
<iconify-icon icon="lucide:heart" width="16"></iconify-icon>
</button>
</div>
</div>
<div class="flex justify-between items-start">
<div>
<h3 class="text-sm font-semibold text-neutral-900 tracking-tight">Sculpt Vase 02</h3>
<p class="text-xs text-neutral-500 mt-1">Raw Clay</p>
</div>
<span class="text-sm font-semibold text-neutral-900">$140</span>
</div>
</div>
<!-- Product 4 -->
<div class="group relative reveal delay-150">
<div class="aspect-square bg-white rounded-lg overflow-hidden mb-4 relative border border-neutral-100">
<img src="https://images.unsplash.com/photo-1533090481720-856c6e3c1fdc?q=80&w=1888&auto=format&fit=crop" alt="Table" class="w-full h-full object-cover group-hover:opacity-0 transition-opacity absolute inset-0 z-10">
<img src="https://images.unsplash.com/photo-1605239435870-67df4c54a0b3?w=800&q=80" alt="Table Context" class="w-full h-full object-cover absolute inset-0 scale-105">
<div class="absolute bottom-4 left-4 right-4 z-20 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
<button class="w-full h-10 bg-white/95 backdrop-blur text-neutral-900 text-xs font-bold rounded shadow-lg hover:bg-neutral-900 hover:text-white transition-colors flex items-center justify-center gap-2">
<iconify-icon icon="lucide:plus" width="14"></iconify-icon> Quick Add
</button>
</div>
<div class="absolute top-3 right-3 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="w-8 h-8 rounded-full bg-white shadow-sm flex items-center justify-center transition-all text-neutral-400 hover:text-red-500 hover:scale-110">
<iconify-icon icon="lucide:heart" width="16"></iconify-icon>
</button>
</div>
</div>
<div class="flex justify-between items-start">
<div>
<h3 class="text-sm font-semibold text-neutral-900 tracking-tight">Side Table</h3>
<p class="text-xs text-neutral-500 mt-1">Walnut Finish</p>
</div>
<span class="text-sm font-semibold text-neutral-900">$450</span>
</div>
</div>
</div>
<div class="mt-16 text-center">
<a href="#" class="inline-block border-b border-black pb-0.5 text-sm font-semibold hover:text-neutral-600 hover:border-neutral-600 transition-all">View All Products</a>
</div>
</div>
</section>
<!-- COLLECTIONS (Split Screen) -->
<section class="w-full grid lg:grid-cols-2 min-h-[600px] border-b border-neutral-100 scroll-mt-20" id="collections">
<div class="relative bg-neutral-100 h-96 lg:h-auto overflow-hidden group">
<img src="https://images.unsplash.com/photo-1631679706909-1844bbd07221?q=80&w=1992&auto=format&fit=crop" alt="Craftsmanship" class="absolute inset-0 w-full h-full object-cover transition-transform duration-[2s] group-hover:scale-105">
</div>
<div class="flex flex-col justify-center px-6 py-20 lg:px-24 bg-white">
<div class="reveal max-w-lg">
<span class="text-xs font-bold tracking-widest text-neutral-400 uppercase mb-4 block">Our Philosophy</span>
<h2 class="text-3xl lg:text-4xl font-medium tracking-tighter mb-6 leading-tight">Designed to endure,<br>crafted to inspire.</h2>
<p class="text-neutral-500 leading-relaxed mb-8 text-sm">
We believe in fewer, better things. Each piece in our collection is thoughtfully designed with sustainability and longevity in mind, using materials that age gracefully over time.
</p>
<ul class="space-y-4 mb-10">
<li class="flex items-center gap-3 text-sm font-medium text-neutral-800">
<div class="w-5 h-5 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-900">
<iconify-icon icon="lucide:check" width="12"></iconify-icon>
</div>
Ethically sourced materials
</li>
<li class="flex items-center gap-3 text-sm font-medium text-neutral-800">
<div class="w-5 h-5 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-900">
<iconify-icon icon="lucide:check" width="12"></iconify-icon>
</div>
Carbon neutral shipping
</li>
<li class="flex items-center gap-3 text-sm font-medium text-neutral-800">
<div class="w-5 h-5 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-900">
<iconify-icon icon="lucide:check" width="12"></iconify-icon>
</div>
Artisan craftsmanship
</li>
</ul>
<a href="#about" class="inline-flex items-center text-sm font-semibold border border-neutral-200 px-6 py-3.5 rounded hover:bg-neutral-50 transition-colors">
Read our story
</a>
</div>
</div>
</section>
<!-- JOURNAL -->
<section class="w-full py-20 lg:py-32 scroll-mt-20" id="journal">
<div class="max-w-[1440px] mx-auto px-6">
<h2 class="text-3xl font-medium tracking-tighter mb-12 reveal">The Journal</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Article 1 -->
<article class="group cursor-pointer reveal">
<div class="overflow-hidden rounded-xl mb-5 aspect-[16/10] bg-neutral-100">
<img src="https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?q=80&w=2070&auto=format&fit=crop" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Blog 1">
</div>
<div class="flex items-center gap-2 text-xs font-semibold text-neutral-500 mb-2.5 uppercase tracking-wide">
<span>Oct 12, 2023</span>
<span class="w-1 h-1 bg-neutral-300 rounded-full"></span>
<span>Interiors</span>
</div>
<h3 class="text-xl font-medium tracking-tight mb-2 group-hover:underline decoration-1 underline-offset-4">Minimalism in the Modern Home</h3>
<p class="text-sm text-neutral-500 line-clamp-2 leading-relaxed">Exploring the balance between functionality and aesthetic in contemporary living spaces, emphasizing clutter-free environments.</p>
</article>
<!-- Article 2 -->
<article class="group cursor-pointer reveal delay-100">
<div class="overflow-hidden rounded-xl mb-5 aspect-[16/10] bg-neutral-100">
<img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?q=80&w=1987&auto=format&fit=crop" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Blog 2">
</div>
<div class="flex items-center gap-2 text-xs font-semibold text-neutral-500 mb-2.5 uppercase tracking-wide">
<span>Sep 28, 2023</span>
<span class="w-1 h-1 bg-neutral-300 rounded-full"></span>
<span>Design</span>
</div>
<h3 class="text-xl font-medium tracking-tight mb-2 group-hover:underline decoration-1 underline-offset-4">The Art of Lighting</h3>
<p class="text-sm text-neutral-500 line-clamp-2 leading-relaxed">How proper lighting transforms the mood and utility of a room instantly, creating warmth and depth in any space.</p>
</article>
<!-- Article 3 -->
<article class="group cursor-pointer reveal delay-200">
<div class="overflow-hidden rounded-xl mb-5 aspect-[16/10] bg-neutral-100">
<img src="https://images.unsplash.com/photo-1505330622279-bf7d7fc918f4?q=80&w=2070&auto=format&fit=crop" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Blog 3">
</div>
<div class="flex items-center gap-2 text-xs font-semibold text-neutral-500 mb-2.5 uppercase tracking-wide">
<span>Sep 15, 2023</span>
<span class="w-1 h-1 bg-neutral-300 rounded-full"></span>
<span>Studio</span>
</div>
<h3 class="text-xl font-medium tracking-tight mb-2 group-hover:underline decoration-1 underline-offset-4">Meet the Makers</h3>
<p class="text-sm text-neutral-500 line-clamp-2 leading-relaxed">A behind-the-scenes look at the artisans crafting our ceramic collection using traditional techniques handed down for generations.</p>
</article>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="w-full py-24 bg-neutral-900 text-white" id="newsletter">
<div class="max-w-screen-xl mx-auto px-6 text-center reveal">
<iconify-icon icon="lucide:mail-open" width="32" class="mb-6 text-neutral-400"></iconify-icon>
<h2 class="text-3xl lg:text-4xl font-medium tracking-tighter mb-4">Join the list</h2>
<p class="text-neutral-400 mb-10 max-w-md mx-auto text-sm">Sign up for early access to new drops and exclusive offers. No spam, ever.</p>
<form class="flex flex-col sm:flex-row gap-2 max-w-md mx-auto" onsubmit="event.preventDefault();">
<input type="email" placeholder="email@address.com" class="flex-1 bg-neutral-800 border border-neutral-700 text-white text-sm rounded-lg px-4 py-3 outline-none focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500 transition-all placeholder:text-neutral-600">
<button type="submit" class="bg-white text-neutral-900 text-sm font-bold px-6 py-3 rounded-lg hover:bg-neutral-200 transition-colors">
Subscribe
</button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="w-full bg-white pt-20 pb-10 border-t border-neutral-100">
<div class="max-w-[1440px] mx-auto px-6">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
<div>
<h4 class="font-semibold text-sm tracking-wide mb-5 text-neutral-900">Shop</h4>
<ul class="space-y-3 text-sm text-neutral-500">
<li><a href="#" class="hover:text-black transition-colors">New Arrivals</a></li>
<li><a href="#" class="hover:text-black transition-colors">Best Sellers</a></li>
<li><a href="#" class="hover:text-black transition-colors">Furniture</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold text-sm tracking-wide mb-5 text-neutral-900">Support</h4>
<ul class="space-y-3 text-sm text-neutral-500">
<li><a href="#" class="hover:text-black transition-colors">Help Center</a></li>
<li><a href="#" class="hover:text-black transition-colors">Shipping & Returns</a></li>
<li><a href="#" class="hover:text-black transition-colors">Size Guide</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold text-sm tracking-wide mb-5 text-neutral-900">Company</h4>
<ul class="space-y-3 text-sm text-neutral-500">
<li><a href="#" class="hover:text-black transition-colors">Our Story</a></li>
<li><a href="#" class="hover:text-black transition-colors">Sustainability</a></li>
<li><a href="#" class="hover:text-black transition-colors">Careers</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold text-sm tracking-wide mb-5 text-neutral-900">Follow Us</h4>
<div class="flex gap-4 text-neutral-500">
<a href="#" class="hover:text-black transition-colors p-2 bg-neutral-50 rounded-full"><iconify-icon icon="lucide:instagram" width="18"></iconify-icon></a>
<a href="#" class="hover:text-black transition-colors p-2 bg-neutral-50 rounded-full"><iconify-icon icon="lucide:twitter" width="18"></iconify-icon></a>
<a href="#" class="hover:text-black transition-colors p-2 bg-neutral-50 rounded-full"><iconify-icon icon="lucide:facebook" width="18"></iconify-icon></a>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-neutral-100 gap-4">
<div class="text-xl font-bold tracking-tighter">LUMA</div>
<div class="text-[11px] text-neutral-400 font-medium">
© 2023 LUMA Inc. All rights reserved.
</div>
<div class="flex gap-3">
<div class="h-6 px-2 bg-neutral-50 rounded border border-neutral-100 flex items-center justify-center text-neutral-400">
<iconify-icon icon="lucide:credit-card" width="14"></iconify-icon>
</div>
<div class="h-6 px-2 bg-neutral-50 rounded border border-neutral-100 flex items-center justify-center text-neutral-400">
<iconify-icon icon="lucide:wallet" width="14"></iconify-icon>
</div>
</div>
</div>
</div>
</footer>
<!-- Interaction Script -->
<script>
// Loading Screen
window.addEventListener('load', () => {
const loader = document.getElementById('loader');
setTimeout(() => {
loader.classList.add('hidden');
setTimeout(() => {
loader.style.display = 'none';
}, 600);
}, 800);
});
// Search Bar Toggle
const searchTrigger = document.getElementById('search-trigger-btn');
const closeSearch = document.getElementById('close-search-btn');
const searchContainer = document.getElementById('search-bar-container');
const searchInput = document.getElementById('search-input');
function toggleSearch() {
searchContainer.classList.toggle('active');
if (searchContainer.classList.contains('active')) {
setTimeout(() => searchInput.focus(), 100);
}
}
searchTrigger.addEventListener('click', toggleSearch);
closeSearch.addEventListener('click', toggleSearch);
// Close search on Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && searchContainer.classList.contains('active')) {
toggleSearch();
}
});
// Mobile Menu Logic
const menuBtn = document.getElementById('menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
const mobileLinks = document.querySelectorAll('.mobile-link');
let isMenuOpen = false;
menuBtn.addEventListener('click', () => {
isMenuOpen = !isMenuOpen;
if (isMenuOpen) {
mobileMenu.classList.add('open');
menuBtn.innerHTML = '<iconify-icon icon="lucide:x" width="24" stroke-width="1.5"></iconify-icon>';
} else {
mobileMenu.classList.remove('open');
menuBtn.innerHTML = '<iconify-icon icon="lucide:menu" width="24" stroke-width="1.5"></iconify-icon>';
}
});
// Close menu when clicking a link
mobileLinks.forEach(link => {
link.addEventListener('click', () => {
isMenuOpen = false;
mobileMenu.classList.remove('open');
menuBtn.innerHTML = '<iconify-icon icon="lucide:menu" width="24" stroke-width="1.5"></iconify-icon>';
});
});
// Scroll Animations
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
observer.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.reveal').forEach(el => {
observer.observe(el);
});
// Navbar blur on scroll
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 20) {
navbar.classList.add('shadow-[0_4px_30px_-4px_rgba(0,0,0,0.03)]');
} else {
navbar.classList.remove('shadow-[0_4px_30px_-4px_rgba(0,0,0,0.03)]');
}
});
</script>
</body></html>