Refactor code structure and remove redundant changes
This commit is contained in:
@@ -0,0 +1,191 @@
|
||||
<!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>L'Anima della Costa | A Slow-Travel Guide to Amalfi</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 {
|
||||
--terracotta: #C06C4D;
|
||||
--olive: #5B6341;
|
||||
--azure: #2E6A8D;
|
||||
--cream: #F9F6F0;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--cream);
|
||||
color: #2D2D2D;
|
||||
}
|
||||
h1, h2, h3, .serif {
|
||||
font-family: 'Playfair Display', serif;
|
||||
}
|
||||
.hero-gradient {
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
|
||||
}
|
||||
.nav-blur {
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
.card-hover {
|
||||
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.05);
|
||||
}
|
||||
.scroll-indicator {
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
|
||||
40% {transform: translateY(-10px);}
|
||||
60% {transform: translateY(-5px);}
|
||||
}
|
||||
.active-tab {
|
||||
border-bottom: 2px solid var(--terracotta);
|
||||
color: var(--terracotta);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed w-full z-50 nav-blur border-b border-white/20 bg-white/70">
|
||||
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
||||
<div class="text-2xl font-bold tracking-tighter serif">L'ANIMA</div>
|
||||
<div class="hidden md:flex space-x-8 text-sm font-medium uppercase tracking-widest">
|
||||
<a href="#essence" class="hover:text-[#C06C4D] transition-colors">The Essence</a>
|
||||
<a href="#itinerary" class="hover:text-[#C06C4D] transition-colors">Itinerary</a>
|
||||
<a href="#flavors" class="hover:text-[#C06C4D] transition-colors">Flavors</a>
|
||||
<a href="#" class="bg-[#C06C4D] text-white px-6 py-2 rounded-full hover:bg-opacity-90 transition-all">Book a Stay</a>
|
||||
</div>
|
||||
<button class="md:hidden">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header class="relative h-screen flex items-center justify-center overflow-hidden">
|
||||
<img
|
||||
src="https://images.pexels.com/photos/33089905/pexels-photo-33089905.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200"
|
||||
alt="Explore the breathtaking beauty of Positano on the Amalfi Coast, with its stunning seaside cliffs and colorful architecture."
|
||||
class="absolute w-full h-full object-cover scale-105"
|
||||
>
|
||||
<div class="absolute inset-0 hero-gradient"></div>
|
||||
|
||||
<div class="relative z-10 text-center px-4 max-w-4xl">
|
||||
<span class="text-white/90 uppercase tracking-[0.3em] text-sm mb-4 block">A Curated Slow-Travel Guide</span>
|
||||
<h1 class="text-6xl md:text-9xl text-white font-bold mb-8 leading-none">The Amalfi Soul</h1>
|
||||
<p class="text-xl md:text-2xl text-white/80 font-light italic max-w-2xl mx-auto mb-12">
|
||||
Escape the rush. Discover the rhythmic pulse of the Mediterranean coastline, where time is measured in lemon harvests and sea breezes.
|
||||
</p>
|
||||
<a href="#essence" class="inline-block border-2 border-white text-white px-10 py-4 text-lg hover:bg-white hover:text-black transition-all duration-300">
|
||||
Begin the Journey
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10">
|
||||
<p class="text-white/50 text-[10px] uppercase tracking-widest mb-2">Photo by Mihaela Claudia Puscas on Pexels</p>
|
||||
<a href="https://www.pexels.com/photo/scenic-view-of-positano-italy-s-amalfi-coast-33089905/" class="text-white/80 hover:text-white underline text-[10px] uppercase tracking-widest">View Source</a>
|
||||
<div class="scroll-indicator mt-4">
|
||||
<svg class="w-6 h-6 mx-auto 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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Introduction -->
|
||||
<section id="essence" class="py-24 px-6 bg-white">
|
||||
<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-center">
|
||||
<div>
|
||||
<h2 class="text-4xl md:text-6xl mb-8 leading-tight">The Art of <br><span class="italic text-[#C06C4D]">Staying Still</span></h2>
|
||||
<p class="text-lg text-gray-600 leading-relaxed mb-6">
|
||||
Most travel is about moving from point A to point B. In the Amalfi Coast, the destination is not a place you arrive at, but a state of being. It's the ability to sit in a sun-drenched piazza for two hours, watching the shadows lengthen across the limestone walls.
|
||||
</p>
|
||||
<p class="text-lg text-gray-600 leading-relaxed">
|
||||
Our guide focuses on the "slow" movement—the boat ride that takes the scenic route, the meal that lasts until the stars appear, and the hidden gardens where the air smells of jasmine and salt.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="bg-[#F9F6F0] p-8 border border-gray-100 shadow-xl">
|
||||
<h3 class="text-2xl mb-6 italic">The Curator's Note</h3>
|
||||
<p class="text-gray-700 leading-relaxed">
|
||||
"To truly see Amalfi, you must leave the main roads behind. The magic resides in the narrow alleys of Ravello and the quiet coves accessible only by small wooden boats. Seek the silence between the tourist landmarks."
|
||||
</p>
|
||||
<div class="mt-8 flex items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-[#C06C4D] mr-4"></div>
|
||||
<div>
|
||||
<p class="font-bold text-sm">Elena Rossi</p>
|
||||
<p class="text-xs text-gray-500">Local Guide & Cultural Historian</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interactive Itinerary -->
|
||||
<section id="itinerary" class="py-24 bg-[#F9F6F0] border-y border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-6xl mb-4">A Three-Day Slow Flow</h2>
|
||||
<p class="text-gray-500">Choose your pace for the perfect Mediterranean immersion.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mb-12 space-x-4 md:space-x-12">
|
||||
<button onclick="switchMode('relax')" id="btn-relax" class="pb-2 transition-all active-tab">The Relaxer</button>
|
||||
<button onclick="switchMode('explore')" id="btn-explore" class="pb-2 transition-all">The Explorer</button>
|
||||
</div>
|
||||
|
||||
<div id="itinerary-content" class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Content injected by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Flavors Section -->
|
||||
<section id="flavors" class="py-24 px-6 bg-white">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-16">
|
||||
<div>
|
||||
<h2 class="text-5xl md:text-7xl mb-4">Local Flavors</h2>
|
||||
<p class="text-gray-500 max-w-md">Taste the terroir of the coast, from sun-ripened lemons to the brine of the Tyrrhenian Sea.</p>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<span class="text-[#C06C4D] font-bold tracking-widest">CULTURAL TASTING</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div class="card-hover p-6 bg-stone-50 border border-stone-100">
|
||||
<h4 class="text-xl mb-3 italic">Sfusato Amalfitano</h4>
|
||||
<p class="text-sm text-gray-600">The legendary lemon of the coast. Large, sweet, and aromatic—the backbone of every limoncello in the region.</p>
|
||||
</div>
|
||||
<div class="card-hover p-6 bg-stone-50 border border-stone-100">
|
||||
<h4 class="text-xl mb-3 italic">Scialatielli</h4>
|
||||
<p class="text-sm text-gray-600">Hand-rolled pasta ribbons often served with a spicy seafood ragu or a simple garlic and oil drizzle.</p>
|
||||
</div>
|
||||
<div class="card-hover p-6 bg-stone-50 border border-stone-100">
|
||||
<h4 class="text-xl mb-3 italic">Delizie di Mare</h4>
|
||||
<p class="text-sm text-gray-600">Freshly caught sea bream and calamari, grilled with herbs on open wood fires by the harbor.</p>
|
||||
</div>
|
||||
<div class="card-hover p-6 bg-stone-50 border border-stone-100">
|
||||
<h4 class="text-xl mb-3 italic">Caprese Heritage</h4>
|
||||
<p class="text-sm text-gray-600">The true mozzarella di bufala, paired with heirloom tomatoes and basil from the nearby volcanic soil.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-[#2D2D2D] text-white py-20">
|
||||
<div class="max-w-7xl mx-auto px-6 text-center">
|
||||
<h2 class="text-4xl mb-8 serif">L'Anima della Costa</h2>
|
||||
<div class="flex justify-center space-x-8 mb-12 text-sm tracking-widest">
|
||||
<a href="#" class="hover:text<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 64.42s</div>
|
||||
Reference in New Issue
Block a user