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-688f02734d4aafa5.html
+342
View File
@@ -0,0 +1,342 @@
<!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>Amalfi Coast | The Azure Guide</title>
<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=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
<style>
:root {
--color-cream: #FDFCF0;
--color-terracotta: #D6684D;
--color-ocean: #0077B6;
--color-lemon: #F4D03F;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--color-cream);
color: #2D3436;
}
h1, h2, h3, .serif {
font-family: 'Playfair Display', serif;
}
.hero-overlay {
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
}
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
.nav-link::after {
content: '';
display: block;
width: 0;
height: 1px;
background: currentColor;
transition: width .3s;
}
.nav-link:hover::after {
width: 100%;
}
.card-zoom:hover img {
transform: scale(1.1);
}
.custom-shadow {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}
</style>
</head>
<body class="antialiased">
<!-- Navigation -->
<nav id="navbar" class="fixed w-full z-50 transition-all duration-300 px-6 py-4">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<a href="#" class="text-2xl font-bold serif tracking-tight text-white transition-colors duration-300" id="logo">AMALFI</a>
<!-- Mobile Menu Button -->
<button id="menu-btn" class="md:hidden text-white focus:outline-none" aria-label="Toggle Menu">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
</button>
<!-- Desktop Menu -->
<div class="hidden md:flex space-x-8 items-center">
<a href="#about" class="nav-link text-white hover:text-orange-200 transition-colors duration-300">The Essence</a>
<a href="#destinations" class="nav-link text-white hover:text-orange-200 transition-colors duration-300">Destinations</a>
<a href="#culinary" class="nav-link text-white hover:text-orange-200 transition-colors duration-300">Culinary</a>
<a href="#tips" class="nav-link text-white hover:text-orange-200 transition-colors duration-300">Travel Tips</a>
<a href="#contact" class="px-6 py-2 bg-[#D6684D] text-white rounded-full text-sm font-semibold hover:bg-[#b5563d] transition-all duration-300 shadow-lg">Inquire</a>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-white shadow-xl flex flex-col items-center space-y-6 py-8 text-gray-800">
<a href="#about" class="text-lg font-medium hover:text-[#D6684D]">The Essence</a>
<a href="#destinations" class="text-lg font-medium hover:text-[#D6684D]">Destinations</a>
<a href="#culinary" class="text-lg font-medium hover:text-[#D6684D]">Culinary</a>
<a href="#tips" class="text-lg font-medium hover:text-[#D6684D]">Travel Tips</a>
</div>
</nav>
<!-- Hero Section -->
<section class="relative h-screen flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 z-0">
<img src="https://images.pexels.com/photos/18771781/pexels-photo-18771781.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=627&amp;w=1200" alt="Aerial view of the stunning Amalfi coastline with charming buildings and cliffs." class="w-full h-full object-cover">
<div class="absolute inset-0 hero-overlay"></div>
</div>
<div class="relative z-10 text-center px-4">
<span class="text-lemon text-sm uppercase tracking-[0.4em] mb-4 block font-semibold">Discover Italy's Coastline</span>
<h1 class="text-5xl md:text-8xl text-white font-bold mb-6 leading-tight">Amalfi Coast</h1>
<p class="text-lg md:text-2xl text-white/90 max-w-2xl mx-auto italic font-light">Where turquoise waters dance with sun-drenched cliffs.</p>
</div>
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-10 text-white text-xs opacity-70">
<p>Photo by <a href="https://www.pexels.com/photo/rocky-hills-on-amalfi-coast-18771781/" class="underline hover:text-lemon transition-colors">Alina Chernii</a> on Pexels</p>
</div>
<div class="absolute bottom-12 left-1/2 transform -translate-x-1/2 animate-bounce">
<svg class="w-6 h-6 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
</div>
</section>
<!-- The Essence Section -->
<section id="about" class="py-24 px-6">
<div class="max-w-5xl mx-auto grid md:grid-cols-2 gap-16 items-center">
<div class="reveal">
<h2 class="text-4xl md:text-5xl mb-6 text-gray-800">The Azure Dream</h2>
<p class="text-lg leading-relaxed text-gray-600 mb-6">
Stretching along the southern coast of Italy, the Amalfi Coast is a breathtaking stretch of coastline where dramatic cliffs drop sharply into the shimmering Tyrrhenian Sea.
</p>
<p class="text-lg leading-relaxed text-gray-600">
It is a place of lemon-scented air, pastel-hued villages, and a slow pace of life that invites you to linger over every espresso and every sunset.
</p>
</div>
<div class="reveal relative">
<div class="aspect-[4/5] bg-gray-200 rounded-2xl overflow-hidden shadow-2xl">
<img src="https://images.unsplash.com/photo-1533105072721-51321c7a324b?auto=format&fit=crop&w=800&q=80" alt="Amalfi landscape" class="w-full h-full object-cover">
</div>
<div class="absolute -bottom-6 -right-6 w-48 h-48 bg-[#F4D03F] rounded-2xl -z-10"></div>
</div>
</div>
</section>
<!-- Destinations Section -->
<section id="destinations" class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16 reveal">
<h2 class="text-4xl md:text-5xl mb-4">Iconic Villages</h2>
<div class="h-1 w-20 bg-[#D6684D] mx-auto"></div>
</div>
<div class="grid md:grid-cols-3 gap-10">
<!-- Positano -->
<div class="reveal group card-zoom overflow-hidden rounded-2xl custom-shadow">
<div class="h-80 overflow-hidden">
<img src="https://images.unsplash.com/photo-1516483638261-f4dbaf036963?auto=format&fit=crop&w=600&q=80" alt="Positano" class="w-full h-full object-cover transition-transform duration-700">
</div>
<div class="p-8 bg-white">
<h3 class="text-2xl mb-3">Positano</h3>
<p class="text-gray-600 leading-relaxed">The vertical paradise. Colorful houses cling to steep cliffs, creating a vibrant mosaic against the blue sea.</p>
</div>
</div>
<!-- Amalfi -->
<div class="reveal group card-zoom overflow-hidden rounded-2xl custom-shadow" style="transition-delay: 100ms;">
<div class="h-80 overflow-hidden">
<img src="https://images.unsplash.com/photo-1594904351112-279046694980?auto=format&fit=crop&w=600&q=80" alt="Amalfi" class="w-full h-full object-cover transition-transform duration-700">
</div>
<div class="p-8 bg-white">
<h3 class="text-2xl mb-3">Amalfi</h3>
<p class="text-gray-600 leading-relaxed">A historical powerhouse. Wander through narrow labyrinthine streets and visit the magnificent Cathedral of St. Andrew.</p>
</div>
</div>
<!-- Ravello -->
<div class="reveal group card-zoom overflow-hidden rounded-2xl custom-shadow" style="transition-delay: 200ms;">
<div class="h-80 overflow-hidden">
<img src="https://images.unsplash.com/photo-1633135194090-037e0c0058c3?auto=format&fit=crop&w=600&q=80" alt="Ravello" class="w-full h-full object-cover transition-transform duration-700">
</div>
<div class="p-8 bg-white">
<h3 class="text-2xl mb-3">Ravello</h3>
<p class="text-gray-600 leading-relaxed">The balcony of the coast. Perched high above the sea, offering serene gardens and panoramic views.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Culinary Section -->
<section id="culinary" class="py-24 px-6 bg-[#F9F6EF]">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row items-center gap-16">
<div class="md:w-1/2 reveal">
<img src="https://images.unsplash.com/photo-1559014235-8d2e0790a80d?auto=format&fit=crop&w=800&q=80" alt="Italian Food" class="rounded-2xl shadow-2xl">
</div>
<div class="md:w-1/2 reveal">
<h2 class="text-4xl md:text-5xl mb-6">A Taste of the Sun</h2>
<p class="text-lg text-gray-600 mb-8">The flavors of the Amalfi Coast are a celebration of the earth and sea. Freshly caught seafood, hand-made pasta, and the legendary Amalfi lemon define the local palate.</p>
<ul class="space-y-4">
<li class="flex items-start gap-4">
<span class="w-6 h-6 bg-[#F4D03F] rounded-full mt-1 flex-shrink-0"></span>
<div>
<h4 class="font-bold">Scialatielli ai Frutti di Mare</h4>
<p class="text-sm text-gray-500">Freshly made pasta tossed with clams, mussels, and prawns.</p>
</div>
</li>
<li class="flex items-start gap-4">
<span class="w-6 h-6 bg-[#F4D03F] rounded-full mt-1 flex-shrink-0"></span>
<div>
<h4 class="font-bold">Delizia al Limone</h4>
<p class="text-sm text-gray-500">A sponge cake soaked in lemon cream, a true coastal delight.</p>
</div>
</li>
<li class="flex items-start gap-4">
<span class="w-6 h-6 bg-[#F4D03F] rounded-full mt-1 flex-shrink-0"></span>
<div>
<h4 class="font-bold">Limoncello</h4>
<p class="text-sm text-gray-500">The iconic digestif, made from the sweet lemons of the region.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Tips Section -->
<section id="tips" class="py-24 px-6">
<div class="max-w-4xl mx-auto bg-[#D6684D] text-white rounded-3xl p-8 md:p-16 overflow-hidden relative">
<div class="absolute top-0 right-0 -mt-20 -mr-20 w-80 h-80 bg-white/10 rounded-full blur-3xl"></div>
<div class="relative z-10">
<h2 class="text-3xl md:text-4xl mb-12 text-center">Traveler's Essentials</h2>
<div class="grid md:grid-cols-2 gap-12">
<div>
<h3 class="text-xl font-bold mb-4 border-b border-white/20 pb-2">When to Visit</h3>
<p class="text-white/80 leading-relaxed">The best months are May, June, and September. You'll enjoy warm sunshine and clear skies without the intense heat and heavy crowds of July and August.</p>
</div>
<div>
<h3 class="text-xl font-bold mb-4 border-b border-white/20 pb-2">Getting Around</h3>
<p class="text-white/80 leading-relaxed">The SITA buses connect the towns, but for the true experience, consider private boat tours or ferry rides to see the coastline from the water.</p>
</div>
<div>
<h3 class="text-xl font-bold mb-4 border-b border-white/20 pb-2">What to Pack</h3>
<p class="text-white/80 leading-relaxed">Comfortable walking shoes for the steep stairs, linen fabrics to stay cool, and plenty of sunscreen for those Mediterranean afternoons.</p>
</div>
<div>
<h3 class="text-xl font-bold mb-4 border-b border-white/20 pb-2">Local Etiquette</h3>
<p class="text-white/80 leading-relaxed">Embrace 'La Dolce Vita'. Don't rush your meals. The afternoon siesta is widely respected in smaller villages.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer/Contact Section -->
<footer id="contact" class="bg-gray-900 text-white py-16 px-6">
<div class="max-w-7xl mx-auto grid md:grid-cols-3 gap-12">
<div>
<h2 class="text-3xl serif mb-6">AMALFI</h2>
<p class="text-gray-400 max-w-xs">Curating your perfect Mediterranean escape. Join our newsletter for seasonal travel guides.</p>
</div>
<div>
<h4 class="text-lg font-bold mb-6">Quick Links</h4>
<ul class="space-y-3 text-gray-400">
<li><a href="#about" class="hover:text-white transition-colors">About the Coast</a></li>
<li><a href="#destinations" class="hover:text-white transition-colors">Destinations</a></li>
<li><a href="#culinary" class="hover:text-white transition-colors">Dining Guide</a></li>
<li><a href="#tips" class="hover:text-white transition-colors">Travel Tips</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-6">Newsletter</h4>
<form class="flex gap-2">
<input type="email" placeholder="Your email" class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 w-full focus:outline-none focus:border-lemon">
<button type="submit" class="bg-[#D6684D] px-4 py-2 rounded-lg hover:bg-[#b5563d] transition-colors">Go</button>
</form>
<div class="mt-8 flex space-x-4 text-gray-400">
<a href="#" class="hover:text-white transition-colors">Instagram</a>
<a href="#" class="hover:text-white transition-colors">Pinterest</a>
<a href="#" class="hover:text-white transition-colors">Facebook</a>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto mt-16 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
<p>&copy; 2024 Amalfi Travel Guide. Handcrafted for wanderers.</p>
</div>
</footer>
<script>
// Navbar Scroll Effect
const navbar = document.getElementById('navbar');
const logo = document.getElementById('logo');
const navLinks = document.querySelectorAll('.nav-link');
const menuBtn = document.getElementById('menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('bg-white', 'shadow-md', 'py-3');
navbar.classList.remove('py-4', 'text-white');
logo.classList.remove('text-white');
logo.classList.add('text-gray-800');
navLinks.forEach(link => {
link.classList.remove('text-white');
link.classList.add('text-gray-600');
});
menuBtn.classList.remove('text-white');
menuBtn.classList.add('text-gray-800');
} else {
navbar.classList.remove('bg-white', 'shadow-md', 'py-3');
navbar.classList.add('py-4');
logo.classList.add('text-white');
logo.classList.remove('text-gray-800');
navLinks.forEach(link => {
link.classList.add('text-white');
link.classList.remove('text-gray-600');
});
menuBtn.classList.add('text-white');
menuBtn.classList.remove('text-gray-800');
}
});
// Mobile Menu Toggle
menuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when clicking a link
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// Scroll Reveal Animation
const observerOptions = {
threshold: 0.1,
rootMargin: "0px 0px -50px 0px"
};
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 55.11s</div></body>
</html>