Загрузка...
Шаблон лендинга для интернет-магазина кофе. HTML/CSS, современный дизайн. Идеально для стартапов, кофейных брендов и обжарщиков.
<html lang="en" class="scroll-smooth"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velvet Origin | The Sensory Hub</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></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&family=Playfair+Display:wght@400;600&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'velvet-dark': '#1A2F25',
'velvet-darker': '#15221E',
'crema': '#F4EFE6',
'gold': '#A67B5B',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
serif: ['Playfair Display', 'serif'],
},
backgroundImage: {
'gold-wave': "url('data:image/svg+xml,%3Csvg width=\\'20\\' height=\\'6\\' viewBox=\\'0 0 20 6\\' fill=\\'none\\' xmlns=\\'http://www.w3.org/2000/svg\\'%3E%3Cpath d=\\'M0 5C2.5 5 2.5 1 5 1C7.5 1 7.5 5 10 5C12.5 5 12.5 1 15 1C17.5 1 17.5 5 20 5\\' stroke=\\'%23A67B5B\\' stroke-width=\\'1.5\\'/%3E%3C/svg%3E')",
}
}
}
}
</script>
<style>
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.wave-link {
position: relative;
text-decoration: none;
}
.wave-link::after {
content: '';
position: absolute;
width: 100%;
height: 6px;
bottom: -8px;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='6' viewBox='0 0 20 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5C2.5 5 2.5 1 5 1C7.5 1 7.5 5 10 5C12.5 5 12.5 1 15 1C17.5 1 17.5 5 20 5' stroke='%23A67B5B' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-size: 10px 6px;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
opacity: 0;
}
.wave-link:hover::after {
transform: scaleX(1);
opacity: 1;
}
.glass-panel {
background: rgba(26, 47, 37, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(244, 239, 230, 0.1);
}
.shimmer-bg {
background: linear-gradient(110deg, transparent 8%, rgba(166,123,91,0.1) 18%, transparent 33%);
background-size: 200% 100%;
animation: shimmer 5s infinite linear;
}
@keyframes shimmer {
to {
background-position-x: -200%;
}
}
/* Smooth scaling for product cards */
.product-card {
transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.5s ease;
}
.product-card:hover {
transform: scale(1.05);
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5), 0 0 20px rgba(166,123,91,0.15);
}
.product-card:hover .product-img {
transform: scale(1.05);
}
</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></head>
<body class="bg-velvet-dark text-crema font-sans antialiased selection:bg-gold selection:text-velvet-darker">
<!-- Background (component) added by Aura -->
<div class="aura-background-component fixed top-0 w-full h-screen -z-10" data-alpha-mask="80" style="; mask-image: linear-gradient(to bottom, transparent, black 0%, black 80%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 80%, transparent)"><div class="aura-background-component top-0 w-full -z-10 absolute h-full">
<div data-us-project="yWZ2Tbe094Fsjgy9NRnD" class="absolute w-full h-full left-0 top-0 -z-10"></div>
<script type="text/javascript" class="">
!function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();
</script>
</div></div>
<!-- 1. Global Navigation -->
<header id="navbar" class="fixed top-0 w-full z-50 transition-all duration-500 ease-in-out border-b border-transparent">
<div class="max-w-7xl mx-auto px-6 md:px-12">
<div class="grid grid-cols-3 items-center">
<!-- Left -->
<nav class="hidden md:flex space-x-8 text-xs font-medium tracking-wide text-crema/90">
<a href="/home" class="wave-link hover:text-white transition-colors">Home</a>
<a href="/shop-subscribe" class="wave-link hover:text-white transition-colors">Shop & Subscribe</a>
<a href="/provenance" class="wave-link hover:text-white transition-colors">Provenance</a>
</nav>
<div class="md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" class="lucide lucide-menu w-5 h-5 text-crema"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg>
</div>
<!-- Center Logo -->
<div class="flex justify-center">
<a href="#" class="flex items-center gap-2 group">
<span class="font-serif text-xl tracking-tight font-semibold text-crema group-hover:text-gold transition-colors duration-300">VELVET ORIGIN</span>
</a>
</div><div class="absolute left-1/2 -translate-x-1/2 top-[52px] hidden md:flex items-center justify-center pointer-events-none">
<span class="text-[8px] font-medium tracking-[0.4em] text-crema/40 uppercase font-sans border-t border-crema/10 pt-1.5 px-4 transition-all duration-500 hover:text-gold/60 hover:border-gold/30">The Sensory Hub</span>
</div>
<!-- Right -->
<div class="flex justify-end items-center space-x-6 text-xs font-medium tracking-wide text-crema/90">
<a href="#" class="hidden md:inline-block wave-link hover:text-white transition-colors">Locations</a>
<a href="/baristas-notebook" class="hidden md:inline-block wave-link hover:text-white transition-colors">Journal</a>
<button class="hover:text-gold transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="search" class="lucide lucide-search w-4 h-4"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>
</button>
<button class="hover:text-gold transition-colors flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shopping-bag" class="lucide lucide-shopping-bag w-4 h-4"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg>
<span class="text-[10px]">(0)</span>
</button>
</div>
</div>
</div>
</header>
<!-- 2. Hero Section -->
<section class="relative h-screen w-full flex items-center justify-center overflow-hidden">
<!-- Background Video Placeholder (Image used for code stability) -->
<div class="z-0 absolute top-0 right-0 bottom-0 left-0">
<img src="https://images.unsplash.com/photo-1497935586351-b67a49e012bf?w=3840&q=80" alt="Espresso extraction macro" class="animate-[pulse_8s_ease-in-out_infinite] opacity-60 w-full h-full object-cover scale-105" style="animation-play-state: paused;"> <!-- Simulate cinemagraph via subtle zoom/opacity or just static high quality -->
<!-- Gradient Overlay -->
<div class="absolute inset-0 bg-gradient-to-b from-velvet-dark/30 via-transparent to-velvet-dark"></div>
<div class="bg-black/20 absolute top-0 right-0 bottom-0 left-0"></div>
</div>
<div class="relative z-10 text-center max-w-4xl px-4 mt-16">
<h1 class="font-serif text-5xl md:text-7xl lg:text-8xl tracking-tight text-crema drop-shadow-lg mb-6 leading-[1.1]">
Sip the Silence.
</h1>
<p class="text-crema/90 text-sm md:text-base tracking-wide max-w-xl mx-auto mb-10 font-light leading-relaxed">
Your daily digital refuge. Small-batch roasts crafted for the moment.
</p>
<a href="#shop" class="inline-flex items-center justify-center px-8 py-3 text-xs font-medium tracking-widest uppercase border border-crema/30 rounded-full hover:bg-crema hover:text-velvet-dark transition-all duration-300 backdrop-blur-sm group">
Shop the Roast
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-3 h-3 ml-2 group-hover:translate-x-1 transition-transform"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
</div>
<div class="absolute bottom-8 w-full flex justify-center animate-bounce">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-down" class="lucide lucide-arrow-down w-4 h-4 text-crema/40"><path d="M12 5v14"></path><path d="m19 12-7 7-7-7"></path></svg>
</div>
</section>
<!-- 3. Features / Best Sellers -->
<section id="shop" class="py-24 bg-velvet-dark relative overflow-hidden">
<div class="max-w-7xl mx-auto px-6 md:px-12 mb-12 flex justify-between items-end">
<div class="">
<h2 class="text-2xl md:text-3xl font-serif tracking-tight mb-2">Curated Roasts</h2>
<p class="text-crema/50 text-xs tracking-wide">Small batches released weekly.</p>
</div>
<div class="flex gap-4">
<button class="p-2 rounded-full border border-crema/10 hover:border-gold/50 hover:text-gold transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-left" class="lucide lucide-arrow-left w-4 h-4"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>
</button>
<button class="p-2 rounded-full border border-crema/10 hover:border-gold/50 hover:text-gold transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</button>
</div>
</div>
<!-- Horizontal Scroll Container -->
<div class="flex overflow-x-auto gap-8 px-6 md:px-12 pb-16 no-scrollbar snap-x snap-mandatory">
<!-- Item 1 -->
<div class="min-w-[280px] md:min-w-[340px] snap-center group cursor-pointer product-card rounded-xl p-6 bg-white/5 border border-white/5">
<div class="aspect-[3/4] overflow-hidden rounded-lg mb-6 bg-[#0a0f0d] relative flex items-center justify-center">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-gold/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4d33304f-5ac4-4f82-86a9-aeb8996c7671_1600w.png" alt="Midnight Velvet Blend" class="product-img opacity-90 w-full h-full object-cover" style="">
</div>
<div class="flex justify-between items-start">
<div>
<h3 class="text-lg font-medium tracking-tight mb-1 group-hover:text-gold transition-colors">Midnight Velvet</h3>
<p class="text-xs text-crema/60 mb-3">Dark Roast | Chocolate, Molasses</p>
</div>
<span class="text-sm font-medium">$22.00</span>
</div>
</div>
<!-- Item 2 -->
<div class="min-w-[280px] md:min-w-[340px] snap-center group cursor-pointer product-card rounded-xl p-6 bg-white/5 border border-white/5">
<div class="aspect-[3/4] overflow-hidden rounded-lg mb-6 bg-[#f0f0f0] relative flex items-center justify-center">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-blue-300/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/cb6afc25-9b64-4162-8495-d30bd80e5db4_800w.png" alt="Ethiopia Yirgacheffe" class="product-img opacity-90 mix-blend-multiply w-full h-full object-cover">
</div>
<div class="flex justify-between items-start">
<div>
<h3 class="text-lg font-medium tracking-tight mb-1 group-hover:text-gold transition-colors">Ethiopia Yirgacheffe</h3>
<p class="text-xs text-crema/60 mb-3">Light Roast | Jasmine, Berry</p>
</div>
<span class="text-sm font-medium">$26.00</span>
</div>
</div>
<!-- Item 3 -->
<div class="min-w-[280px] md:min-w-[340px] snap-center group cursor-pointer product-card bg-white/5 border-white/5 border rounded-xl pt-6 pr-6 pb-6 pl-6">
<div class="aspect-[3/4] overflow-hidden flex bg-[#6b3e2e] rounded-lg mb-6 relative items-center justify-center">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/8f9045b2-fa8f-48b3-814d-d7ef0e042575_800w.png?w=800&q=80" alt="Colombia Huila" class="product-img opacity-80 w-full h-full object-cover" style="">
</div>
<div class="flex items-start justify-between">
<div class="">
<h3 class="text-lg font-medium tracking-tight mb-1 group-hover:text-gold transition-colors">Colombia Huila</h3>
<p class="text-xs text-crema/60 mb-3">Medium Roast | Caramel, Citrus</p>
</div>
<span class="text-sm font-medium">$24.00</span>
</div>
</div>
<!-- Item 4 -->
<div class="min-w-[280px] md:min-w-[340px] snap-center group cursor-pointer product-card rounded-xl p-6 bg-white/5 border border-white/5">
<div class="aspect-[3/4] overflow-hidden rounded-lg mb-6 bg-[#1a2335] relative flex items-center justify-center">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/945b4f7a-1de8-4139-9af3-eb40aa71a486_800w.png" alt="Decaf Mountain Water" class="product-img object-cover h-full w-full opacity-80" style="">
</div>
<div class="flex justify-between items-start">
<div>
<h3 class="text-lg font-medium tracking-tight mb-1 group-hover:text-gold transition-colors">Decaf Mountain</h3>
<p class="text-xs text-crema/60 mb-3">Medium | Fig, Brown Sugar</p>
</div>
<span class="text-sm font-medium">$23.00</span>
</div>
</div>
</div>
</section>
<!-- 4. Special Section: Live Ambience Check -->
<section class="relative py-32 overflow-hidden flex items-center justify-center min-h-[600px]">
<!-- Background with heavy blur -->
<div class="absolute inset-0 z-0">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/95132470-c250-4188-aefe-2846cbe85d98_3840w.png" alt="Coffee Shop Interior" class="w-full h-full object-cover blur-sm brightness-50" style="">
<div class="absolute inset-0 bg-velvet-dark/40"></div>
</div>
<div class="relative z-10 w-full max-w-5xl px-6 grid md:grid-cols-2 gap-12 items-center">
<!-- Text Content -->
<div class="text-left">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-green-500/30 bg-green-900/20 text-green-400 text-[10px] tracking-wider uppercase mb-6">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
</span>
Live from Downtown
</div>
<h2 class="text-3xl md:text-5xl font-serif tracking-tight mb-4 text-white">Find Your Focus.</h2>
<p class="text-crema/80 text-sm leading-relaxed max-w-sm">
Check the vibe at our sanctuary before you arrive. Optimized for deep work and quiet conversations.
</p>
</div>
<!-- Glass Dashboard -->
<div class="glass-panel rounded-2xl p-8 shadow-2xl transform md:rotate-1 hover:rotate-0 transition-transform duration-500">
<!-- Header -->
<div class="flex justify-between items-center mb-8 border-b border-white/10 pb-4">
<span class="text-xs font-semibold tracking-wider text-crema/60 uppercase">Sanctuary Status</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="wifi" class="lucide lucide-wifi w-4 h-4 text-crema/60"><path d="M12 20h.01"></path><path d="M2 8.82a15 15 0 0 1 20 0"></path><path d="M5 12.859a10 10 0 0 1 14 0"></path><path d="M8.5 16.429a5 5 0 0 1 7 0"></path></svg>
</div>
<!-- Metrics Grid -->
<div class="grid grid-cols-1 gap-6">
<!-- Busyness -->
<div class="group">
<div class="flex justify-between mb-2">
<span class="text-xs font-medium flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users w-3 h-3 text-gold"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg> Capacity
</span>
<span class="text-xs text-gold">42%</span>
</div>
<!-- Custom Progress Bar -->
<div class="h-1 w-full bg-white/10 rounded-full overflow-hidden">
<div class="h-full bg-gold w-[42%] rounded-full shadow-[0_0_10px_rgba(166,123,91,0.5)]"></div>
</div>
<p class="text-[10px] text-crema/40 mt-1.5">Plenty of space near the window.</p>
</div>
<!-- Noise -->
<div class="">
<div class="flex justify-between mb-2">
<span class="text-xs font-medium flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="waves" class="lucide lucide-waves w-3 h-3 text-emerald-400"><path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"></path><path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"></path><path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"></path></svg> Noise Level
</span>
<span class="text-xs text-emerald-400">45dB</span>
</div>
<!-- Custom Visualizer Lines -->
<div class="flex items-end gap-1 h-6">
<div class="w-1 bg-emerald-400/20 h-2 rounded-sm"></div>
<div class="w-1 bg-emerald-400/40 h-3 rounded-sm"></div>
<div class="w-1 bg-emerald-400/60 h-5 rounded-sm animate-[pulse_1s_ease-in-out_infinite]"></div>
<div class="w-1 bg-emerald-400/80 h-3 rounded-sm"></div>
<div class="w-1 bg-emerald-400/40 h-4 rounded-sm"></div>
<div class="w-1 bg-emerald-400/20 h-2 rounded-sm"></div>
<div class="w-1 bg-emerald-400/10 h-1 rounded-sm"></div>
</div>
<p class="text-[10px] text-crema/40 mt-1.5">Focus Friendly. Soft chatter.</p>
</div>
<!-- Now Playing -->
<div class="bg-black/20 rounded-lg p-3 flex items-center gap-3 border border-white/5 mt-2">
<div class="w-10 h-10 bg-gray-800 rounded overflow-hidden flex-shrink-0 relative">
<img src="https://images.unsplash.com/photo-1483412033650-1015ddeb83d1?q=80&w=2673&auto=format&fit=crop" class="w-full h-full object-cover opacity-80" alt="Album Art" style="">
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-3 h-3 bg-white rounded-full"></div>
<div class="absolute w-8 h-8 rounded-full border border-white/20"></div>
</div>
</div>
<div class="flex-1 min-w-0">
<p class="text-xs font-medium truncate">Blue in Green</p>
<p class="text-[10px] text-crema/50 truncate">Miles Davis</p>
</div>
<div class="flex gap-1">
<div class="w-0.5 h-2 bg-gold animate-[bounce_1s_infinite]"></div>
<div class="w-0.5 h-3 bg-gold animate-[bounce_1.2s_infinite]"></div>
<div class="w-0.5 h-2 bg-gold animate-[bounce_0.8s_infinite]"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 5. CTA Section -->
<section class="bg-velvet-dark py-24 border-t border-white/5">
<div class="max-w-7xl mx-auto px-6 md:px-12">
<div class="grid md:grid-cols-2 gap-16 items-center">
<div class="order-2 md:order-1">
<h2 class="text-3xl md:text-4xl font-serif text-crema tracking-tight mb-4">Join the Inner Circle.</h2>
<p class="text-crema/60 text-sm mb-8 font-light max-w-sm">Get brewing guides, early access to micro-lots, and our monthly curated playlist directly to your inbox.</p>
<form class="flex flex-col sm:flex-row gap-4 max-w-md">
<input type="email" placeholder="email@address.com" class="bg-transparent border-b border-crema/20 py-3 px-2 text-sm text-crema placeholder-crema/30 focus:outline-none focus:border-gold transition-colors w-full" required="">
<button type="submit" class="whitespace-nowrap px-8 py-3 bg-crema text-velvet-dark text-xs font-medium tracking-wider uppercase rounded-full hover:bg-gold hover:text-white transition-all duration-300">
Subscribe
</button>
</form>
</div>
<div class="order-1 md:order-2 flex justify-center md:justify-end">
<!-- Minimalist Illustration -->
<div class="relative w-64 h-64 opacity-80">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full stroke-gold fill-none" stroke-width="0.8">
<!-- Artistic continuous line abstract coffee pour -->
<path d="M40,150 Q60,180 90,180 T140,150" stroke-linecap="round"></path>
<path d="M40,150 L40,100 Q40,60 80,60"></path>
<path d="M140,150 L140,100 Q140,60 100,60"></path>
<path d="M90,20 L90,60" stroke-dasharray="4,4"></path> <!-- Pour line -->
<circle cx="100" cy="100" r="30" stroke-opacity="0.3"></circle>
<circle cx="110" cy="90" r="5" fill="#A67B5B" stroke="none"></circle> <!-- Drop -->
</svg>
<div class="absolute inset-0 bg-gradient-to-t from-velvet-dark to-transparent"></div>
</div>
</div>
</div>
</div>
</section>
<!-- 6. Global Footer -->
<footer class="bg-velvet-darker py-20 border-t border-white/5">
<div class="md:px-12 max-w-7xl mr-auto ml-auto pr-6 pl-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 md:gap-8">
<!-- Col 1 -->
<div class="space-y-6">
<span class="font-serif text-lg tracking-tight font-semibold text-crema">VELVET ORIGIN</span>
<p class="text-xs text-crema/40 leading-relaxed max-w-[200px]">Roasted with intention in Seattle. Designed for the senses.</p>
</div>
<!-- Col 2 -->
<div class="flex flex-col space-y-4">
<h4 class="text-xs font-medium text-crema uppercase tracking-widest mb-2 opacity-50">Shop</h4>
<a href="#" class="text-xs text-crema/60 hover:text-gold transition-colors">All Coffee</a>
<a href="#" class="text-xs text-crema/60 hover:text-gold transition-colors">Subscriptions</a>
<a href="#" class="text-xs text-crema/60 hover:text-gold transition-colors">Merchandise</a>
<a href="#" class="text-xs text-crema/60 hover:text-gold transition-colors">Gift Cards</a>
</div>
<!-- Col 3 -->
<div class="flex flex-col space-y-4">
<h4 class="text-xs font-medium text-crema uppercase tracking-widest mb-2 opacity-50">Support</h4>
<a href="#" class="text-xs text-crema/60 hover:text-gold transition-colors">Shipping</a>
<a href="#" class="text-xs text-crema/60 hover:text-gold transition-colors">Returns</a>
<a href="#" class="text-xs text-crema/60 hover:text-gold transition-colors">FAQ</a>
<a href="#" class="text-xs text-crema/60 hover:text-gold transition-colors">Contact</a>
</div>
<!-- Col 4 -->
<div class="flex flex-col space-y-4">
<h4 class="text-xs font-medium text-crema uppercase tracking-widest mb-2 opacity-50">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-crema/60 hover:text-gold transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="instagram" class="lucide lucide-instagram w-4 h-4"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line></svg>
</a>
<a href="#" class="text-crema/60 hover:text-gold transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="twitter" class="lucide lucide-twitter w-4 h-4"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
</a>
<a href="#" class="text-crema/60 hover:text-gold transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="music" class="lucide lucide-music w-4 h-4"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
</a>
</div>
</div>
</div>
<div class="mt-20 pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center text-[10px] text-crema/30">
<p>© 2024 Velvet Origin. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="hover:text-crema">Privacy Policy</a>
<a href="#" class="hover:text-crema">Terms of Service</a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script>
// Initialize Icons
lucide.createIcons();
// Sticky Header Logic
const header = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
header.classList.remove('bg-transparent', 'py-6');
header.classList.add('bg-velvet-dark/90', 'backdrop-blur-md', 'shadow-lg', 'py-4');
} else {
header.classList.add('bg-transparent', 'py-6');
header.classList.remove('bg-velvet-dark/90', 'backdrop-blur-md', 'shadow-lg', 'py-4');
}
});
</script>
</body></html>