christian/website-ai-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

yes

Browse Source
This commit is contained in:
christian
2026-07-21 23:07:35 +02:00
parent 80ee4cc892
commit 1d9e3bc7d4
21 changed files with 5029 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/seed-c090647fb3941391.html
+396
View File
@@ -0,0 +1,396 @@
<!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>Elara Vance | Wildflower Echoes</title>
<meta name="description" content="Official release page for Elara Vance's new album, Wildflower Echoes. Listen now, find tour dates, and shop exclusive merchandise.">
<script src="https://cdn.tailwindcss.com"></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;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<style>
:root {
--color-earth-dark: #283618;
--color-earth-mid: #3d4a3e;
--color-earth-light: #fefae0;
--color-accent: #bc6c25;
--color-accent-soft: #dda15e;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--color-earth-light);
color: var(--color-earth-dark);
overflow-x: hidden;
}
h1, h2, h3, .serif {
font-family: 'Playfair Display', serif;
}
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
.nav-blur {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.btn-primary {
background-color: var(--color-earth-dark);
color: var(--color-earth-light);
transition: all 0.3s ease;
}
.btn-primary:hover {
background-color: var(--color-accent);
transform: translateY(-2px);
}
.track-item {
border-bottom: 1px solid rgba(40, 54, 24, 0.1);
transition: all 0.3s ease;
}
.track-item:hover {
background-color: rgba(188, 108, 37, 0.05);
padding-left: 1rem;
}
.hero-gradient {
background: linear-gradient(to bottom, rgba(40, 54, 24, 0.4), rgba(40, 54, 24, 0.7));
}
.custom-shadow {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="antialiased">
<!-- Navigation -->
<nav class="fixed w-full z-50 transition-all duration-300 px-6 py-4 flex justify-between items-center" id="main-nav">
<a href="#" class="serif text-2xl font-bold tracking-tight">Elara Vance</a>
<div class="hidden md:flex space-x-8 text-sm uppercase tracking-widest font-semibold">
<a href="#music" class="hover:text-[#bc6c25] transition-colors">Music</a>
<a href="#about" class="hover:text-[#bc6c25] transition-colors">About</a>
<a href="#tour" class="hover:text-[#bc6c25] transition-colors">Tour</a>
<a href="#store" class="hover:text-[#bc6c25] transition-colors">Store</a>
</div>
<button class="md:hidden text-2xl" id="menu-toggle">
<span class="block w-6 h-0.5 bg-current mb-1"></span>
<span class="block w-6 h-0.5 bg-current mb-1"></span>
<span class="block w-6 h-0.5 bg-current"></span>
</button>
</nav>
<!-- Mobile Menu -->
<div id="mobile-menu" class="fixed inset-0 bg-[#fefae0] z-40 flex flex-col items-center justify-center space-y-8 text-2xl serif hidden">
<a href="#music" class="mobile-link">Music</a>
<a href="#about" class="mobile-link">About</a>
<a href="#tour" class="mobile-link">Tour</a>
<a href="#store" class="mobile-link">Store</a>
</div>
<!-- Hero Section -->
<section class="relative h-screen w-full flex items-center justify-center overflow-hidden">
<img src="https://images.pexels.com/photos/36071300/pexels-photo-36071300.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=627&amp;w=1200" alt="Artistic close-up of blooming wildflowers with a dark, moody background." class="absolute inset-0 w-full h-full object-cover scale-105 animate-[pulse_10s_infinite_alternate]" />
<div class="absolute inset-0 hero-gradient"></div>
<div class="relative z-10 text-center px-4">
<span class="text-[#dda15e] uppercase tracking-[0.3em] text-sm mb-4 block reveal">The New Album</span>
<h1 class="text-6xl md:text-8xl text-[#fefae0] mb-6 reveal">Wildflower Echoes</h1>
<p class="text-xl md:text-2xl text-[#fefae0]/80 mb-10 italic serif reveal">A journey through the quiet spaces.</p>
<div class="flex flex-col md:flex-row items-center justify-center gap-4 reveal">
<a href="#music" class="btn-primary px-10 py-4 rounded-full text-sm uppercase tracking-widest font-bold w-full md:w-auto">Listen Now</a>
<a href="#store" class="border border-[#fefae0] text-[#fefae0] px-10 py-4 rounded-full text-sm uppercase tracking-widest font-bold w-full md:w-auto hover:bg-[#fefae0] hover:text-[#283618] transition-all">Shop Vinyl</a>
</div>
</div>
<!-- Hero Attribution -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 text-white/60 text-[10px] uppercase tracking-widest">
<a href="https://www.pexels.com/photo/moody-close-up-of-wildflowers-in-bloom-36071300/" target="_blank" class="hover:text-white transition-colors">Photo by Daniel&#039;s Richard on Pexels</a>
</div>
</section>
<!-- Album Introduction -->
<section id="about" class="py-24 px-6 md:px-20 max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">
<div class="reveal">
<h2 class="text-4xl md:text-5xl mb-8 leading-tight">Rooted in the soil, <br><span class="italic">reaching for the light.</span></h2>
<div class="space-y-6 text-lg text-[#3d4a3e] leading-relaxed">
<p>Wildflower Echoes is an intimate collection of songs born from the stillness of the Pacific Northwest. Recorded in a converted barn during the height of spring, every track captures a moment of profound connection with the natural world.</p>
<p>With warm acoustic textures and haunting vocal harmonies, Elara Vance invites you to slow down and breathe. This album isn't just something to hear; it's something to feel.</p>
</div>
</div>
<div class="relative reveal">
<div class="aspect-[4/5] bg-[#3d4a3e] overflow-hidden rounded-sm custom-shadow">
<img src="https://images.pexels.com/photos/167682/pexels-photo-167682.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Artist in nature" class="w-full h-full object-cover opacity-90" />
</div>
<div class="absolute -bottom-6 -right-6 w-48 h-48 border-2 border-[#bc6c25] -z-10"></div>
</div>
</section>
<!-- Tracklist Section -->
<section id="music" class="py-24 bg-[#3d4a3e] text-[#fefae0]">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16 reveal">
<h2 class="text-4xl md:text-5xl mb-4">The Tracks</h2>
<div class="w-20 h-1 bg-[#bc6c25] mx-auto"></div>
</div>
<div class="space-y-0 reveal">
<!-- Track 1 -->
<div class="track-item py-6 flex items-center justify-between group cursor-pointer">
<div class="flex items-center space-x-6">
<span class="text-sm opacity-50 font-mono">01</span>
<span class="text-xl md:text-2xl serif">Rooted</span>
</div>
<button class="opacity-0 group-hover:opacity-100 transition-opacity">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<!-- Track 2 -->
<div class="track-item py-6 flex items-center justify-between group cursor-pointer">
<div class="flex items-center space-x-6">
<span class="text-sm opacity-50 font-mono">02</span>
<span class="text-xl md:text-2xl serif">Morning Mist</span>
</div>
<button class="opacity-0 group-hover:opacity-100 transition-opacity">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<!-- Track 3 -->
<div class="track-item py-6 flex items-center justify-between group cursor-pointer">
<div class="flex items-center space-x-6">
<span class="text-sm opacity-50 font-mono">03</span>
<span class="text-xl md:text-2xl serif">Cedar & Sage</span>
</div>
<button class="opacity-0 group-hover:opacity-100 transition-opacity">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<!-- Track 4 -->
<div class="track-item py-6 flex items-center justify-between group cursor-pointer">
<div class="flex items-center space-x-6">
<span class="text-sm opacity-50 font-mono">04</span>
<span class="text-xl md:text-2xl serif">Golden Hour</span>
</div>
<button class="opacity-0 group-hover:opacity-100 transition-opacity">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<!-- Track 5 -->
<div class="track-item py-6 flex items-center justify-between group cursor-pointer">
<div class="flex items-center space-x-6">
<span class="text-sm opacity-50 font-mono">05</span>
<span class="text-xl md:text-2xl serif">Whispering Pines</span>
</div>
<button class="opacity-0 group-hover:opacity-100 transition-opacity">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<!-- Track 6 -->
<div class="track-item py-6 flex items-center justify-between group cursor-pointer">
<div class="flex items-center space-x-6">
<span class="text-sm opacity-50 font-mono">06</span>
<span class="text-xl md:text-2xl serif">Ember Glow</span>
</div>
<button class="opacity-0 group-hover:opacity-100 transition-opacity">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
</div>
<div class="mt-16 flex justify-center space-x-6 reveal">
<a href="#" class="opacity-70 hover:opacity-100 transition-opacity">Spotify</a>
<a href="#" class="opacity-70 hover:opacity-100 transition-opacity">Apple Music</a>
<a href="#" class="opacity-70 hover:opacity-100 transition-opacity">Bandcamp</a>
</div>
</div>
</section>
<!-- Tour Section -->
<section id="tour" class="py-24 px-6 max-w-5xl mx-auto">
<div class="text-center mb-16 reveal">
<h2 class="text-4xl md:text-5xl mb-4">Live Sessions</h2>
<p class="text-[#bc6c25] font-semibold uppercase tracking-widest text-sm">Upcoming Tour Dates</p>
</div>
<div class="space-y-4 reveal">
<div class="flex flex-col md:flex-row justify-between items-center p-8 bg-white shadow-sm border border-stone-100 hover:border-[#dda15e] transition-colors group">
<div class="text-center md:text-left mb-4 md:mb-0">
<p class="text-sm text-stone-500 font-semibold mb-1">OCT 12, 2024</p>
<h3 class="text-2xl serif">The Lyric Hall</h3>
<p class="text-stone-500">London, UK</p>
</div>
<a href="#" class="w-full md:w-auto text-center border border-[#283618] px-8 py-2 text-sm font-bold uppercase hover:bg-[#283618] hover:text-white transition-all">Tickets</a>
</div>
<div class="flex flex-col md:flex-row justify-between items-center p-8 bg-white shadow-sm border border-stone-100 hover:border-[#dda15e] transition-colors group">
<div class="text-center md:text-left mb-4 md:mb-0">
<p class="text-sm text-stone-500 font-semibold mb-1">NOV 02, 2024</p>
<h3 class="text-2xl serif">The Bluebird Cafe</h3>
<p class="text-stone-500">Nashville, TN</p>
</div>
<a href="#" class="w-full md:w-auto text-center border border-[#283618] px-8 py-2 text-sm font-bold uppercase hover:bg-[#283618] hover:text-white transition-all">Tickets</a>
</div>
<div class="flex flex-col md:flex-row justify-between items-center p-8 bg-white shadow-sm border border-stone-100 hover:border-[#dda15e] transition-colors group">
<div class="text-center md:text-left mb-4 md:mb-0">
<p class="text-sm text-stone-500 font-semibold mb-1">NOV 15, 2024</p>
<h3 class="text-2xl serif">Forest Stage</h3>
<p class="text-stone-500">Portland, OR</p>
</div>
<a href="#" class="w-full md:w-auto text-center border border-[#283618] px-8 py-2 text-sm font-bold uppercase hover:bg-[#283618] hover:text-white transition-all">Tickets</a>
</div>
</div>
</section>
<!-- Store Section -->
<section id="store" class="py-24 bg-[#f4f1ea] overflow-hidden">
<div class="max-w-7xl mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-6 reveal">
<div>
<h2 class="text-4xl md:text-5xl mb-2">The Collection</h2>
<p class="text-[#bc6c25] font-semibold uppercase tracking-widest text-sm">Exclusive Merchandise</p>
</div>
<a href="#" class="text-sm font-bold underline decoration-[#bc6c25] decoration-2 underline-offset-8">View All Items</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- Product 1 -->
<div class="group reveal">
<div class="aspect-square bg-[#e5e1d8] mb-4 overflow-hidden relative">
<img src="https://images.pexels.com/photos/1708092/pexels-photo-1708092.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Vinyl record" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
</div>
<h3 class="text-xl serif mb-1">Wildflower Echoes LP</h3>
<p class="text-stone-500 mb-2">$35.00</p>
<button class="w-full py-2 text-sm border border-stone-300 hover:border-[#283618] hover:bg-[#283618] hover:text-white transition-all uppercase tracking-widest">Add to Cart</button>
</div>
<!-- Product 2 -->
<div class="group reveal" style="transition-delay: 100ms;">
<div class="aspect-square bg-[#e5e1d8] mb-4 overflow-hidden relative">
<img src="https://images.pexels.com/photos/7569331/pexels-photo-7569331.jpeg?auto=compress&cs=tinysrgb&w=600" alt="T-shirt" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
</div>
<h3 class="text-xl serif mb-1">"Rooted" Organic Tee</h3>
<p class="text-stone-500 mb-2">$30.00</p>
<button class="w-full py-2 text-sm border border-stone-300 hover:border-[#283618] hover:bg-[#283618] hover:text-white transition-all uppercase tracking-widest">Add to Cart</button>
</div>
<!-- Product 3 -->
<div class="group reveal" style="transition-delay: 200ms;">
<div class="aspect-square bg-[#e5e1d8] mb-4 overflow-hidden relative">
<img src="https://images.pexels.com/photos/4053394/pexels-photo-4053394.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Art print" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
</div>
<h3 class="text-xl serif mb-1">Limited Edition Print</h3>
<p class="text-stone-500 mb-2">$45.00</p>
<button class="w-full py-2 text-sm border border-stone-300 hover:border-[#283618] hover:bg-[#283618] hover:text-white transition-all uppercase tracking-widest">Add to Cart</button>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-[#283618] text-[#fefae0] py-16 px-6">
<div class="max-w-7xl mx-auto grid md:grid-cols-3 gap-12 items-start">
<div class="reveal">
<h2 class="serif text-3xl mb-6">Elara Vance</h2>
<p class="text-[#dda15e]/80 leading-relaxed">
Capturing the ephemeral beauty of the natural world through song and sound.
</p>
</div>
<div class="reveal" style="transition-delay: 100ms;">
<h4 class="text-sm font-bold uppercase tracking-widest mb-6">Follow</h4>
<ul class="space-y-3">
<li><a href="#" class="hover:text-[#bc6c25] transition-colors">Instagram</a></li>
<li><a href="#" class="hover:text-[#bc6c25] transition-colors">Spotify</a></li>
<li><a href="#" class="hover:text-[#bc6c25] transition-colors">YouTube</a></li>
</ul>
</div>
<div class="reveal" style="transition-delay: 200ms;">
<h4 class="text-sm font-bold uppercase tracking-widest mb-6">Newsletter</h4>
<form class="flex">
<input type="email" placeholder="Your email" class="bg-transparent border-b border-[#fefae0]/30 py-2 flex-grow focus:outline-none focus:border-[#bc6c25] transition-colors">
<button type="submit" class="ml-4 font-bold text-sm uppercase hover:text-[#bc6c25]">Join</button>
</form>
</div>
</div>
<div class="max-w-7xl mx-auto mt-16 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between text-xs opacity-50">
<p>&copy; 2024 Elara Vance Music. All rights reserved.</p>
<div class="mt-4 md:mt-0 space-x-6">
<a href="#" class="hover:text-white">Privacy Policy</a>
<a href="#" class="hover:text-white">Terms of Use</a>
</div>
</div>
</footer>
<script>
// Navigation Scroll Effect
window.addEventListener('scroll', () => {
const nav = document.getElementById('main-nav');
if (window.scrollY > 50) {
nav.classList.add('nav-blur', 'bg-[#fefae0]/90', 'shadow-sm', 'py-3');
nav.classList.remove('py-4');
nav.classList.add('text-[#283618]');
document.querySelectorAll('#main-nav a, #menu-toggle span').forEach(el => {
el.classList.remove('text-white');
el.classList.add('text-[#283618]');
});
} else {
nav.classList.remove('nav-blur', 'bg-[#fefae0]/90', 'shadow-sm', 'py-3');
nav.classList.remove('text-[#283618]');
nav.classList.add('text-white');
document.querySelectorAll('#main-nav a, #menu-toggle span').forEach(el => {
el.classList.remove('text-[#283618]');
el.classList.add('text-white');
});
}
});
// Mobile Menu Toggle
const menuToggle = document.getElementById('menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
const mobileLinks = document.querySelectorAll('.mobile-link');
menuToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
mobileLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// Reveal on Scroll Observer
const observerOptions = {
threshold: 0.15
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
}
});
}, observerOptions);
document.querySelectorAll('.reveal').forEach(el => {
observer.observe(el);
});
</script>
<div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 66.43s<br>Model: unsloth/gemma-4-26B-A4B-it-qat-GGUF:Q4_K_XL</div></body>
</html>