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

Refactor code structure and remove redundant changes

Browse Source
This commit is contained in:
christian
2026-07-12 18:16:31 +02:00
parent 23f20e4371
commit 80ee4cc892
101 changed files with 10541 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/seed-fbc93954618051c0.html
+200
View File
@@ -0,0 +1,200 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coastal Charms: A Guide to the Algarve Coast</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root {
--color-primary: #ff8c00; /* Deep Orange/Terracotta for warmth */
--color-secondary: #004d40; /* Deep Teal for contrast */
}
.btn-primary {
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 140, 0, 0.6);
}
/* Custom typography styling for impact */
.heading-impact {
font-family: 'Georgia', serif;
line-height: 1.1;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
}
/* Subtle background animation */
.bg-ocean-fade {
background-image: linear-gradient(135deg, #f0fdf4 0%, #e0f2f1 100%);
}
</style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
<!-- Navigation -->
<header class="sticky top-0 z-30 bg-white shadow-lg border-b border-amber-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0">
<h1 class="text-3xl font-serif text-[var(--color-secondary)] tracking-wider">Algarve Atlas</h1>
</div>
<nav class="flex space-x-8">
<a href="#highlights" class="text-gray-600 hover:text-[var(--color-primary)] font-medium transition duration-150 px-3 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]">Highlights</a>
<a href="#must-see" class="text-gray-600 hover:text-[var(--color-primary)] font-medium transition duration-150 px-3 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]">Sights</a>
<a href="#planning" class="text-gray-600 hover:text-[var(--color-primary)] font-medium transition duration-150 px-3 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]">Planning</a>
</nav>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="bg-ocean-fade py-20 md:py-32 border-b border-amber-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="heading-impact text-6xl sm:text-7xl font-extrabold text-gray-900 mb-4 leading-tight">
The Golden Shores of Portugal
</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-10">
Discover the sun-drenched, dramatic coastline of the Algarve. A guide to hidden coves, historic towns, and unparalleled Atlantic views.
</p>
<a href="#highlights" class="btn-primary inline-block bg-[var(--color-primary)] text-white text-lg font-semibold py-3 px-10 rounded-lg shadow-lg focus:outline-none focus:ring-4 focus:ring-orange-300 uppercase tracking-wider">
Explore the Coastline
</a>
</div>
</section>
<!-- Highlights Section -->
<section id="highlights" class="py-16 md:py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h3 class="heading-impact text-4xl font-bold text-[var(--color-secondary)]">Why the Algarve?</h3>
<p class="mt-2 text-xl text-gray-500">More than just beaches; it's a landscape of rock, sea, and culture.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
<!-- Card 1: Golden Sands -->
<div class="card-hover bg-white p-8 rounded-xl border-t-4 border-[var(--color-primary)] shadow-lg text-center">
<img src="https://images.unsplash.com/photo-1542404125-90086d39788c?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Golden sand beach in Algarve" class="rounded-lg mb-4 w-full h-48 object-cover shadow-md transition duration-300">
<h4 class="text-2xl font-bold mb-2 text-gray-900">Golden Shores</h4>
<p class="text-gray-600">Bask through miles of brilliant, sun-drenched golden sand. Perfect for long, leisurely walks along the Atlantic edge.</p>
</div>
<!-- Card 2: Sea Caves -->
<div class="card-hover bg-white p-8 rounded-xl border-t-4 border-[var(--color-secondary)] shadow-lg text-center">
<img src="https://images.unsplash.com/photo-1552571394-b2f93884f494?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Dramatic sea caves in Algarve" class="rounded-lg mb-4 w-full h-48 object-cover shadow-md transition duration-300">
<h4 class="text-2xl font-bold mb-2 text-gray-900">Secret Lagoons</h4>
<p class="text-gray-600">Explore the intricate network of sea caves carved into the limestone cliffs, offering breathtaking hidden views.</p>
</div>
<!-- Card 3: Culture & Towns -->
<div class="card-hover bg-white p-8 rounded-xl border-t-4 border-[var(--color-primary)] shadow-lg text-center">
<img src="https://images.unsplash.com/photo-1566433903642-e639f17f31a3?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Historic Portuguese town square in Algarve" class="rounded-lg mb-4 w-full h-48 object-cover shadow-md transition duration-300">
<h4 class="text-2xl font-bold mb-2 text-gray-900">Heritage Villages</h4>
<p class="text-gray-600">Stroll through whitewashed villages where traditional Azorean life meets vibrant coastal energy.</p>
</div>
</div>
</div>
</section>
<!-- Must See Spots Section -->
<section id="must-see" class="py-16 md:py-24 bg-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h3 class="heading-impact text-4xl font-bold text-[var(--color-secondary)]">Essential Stops</h3>
<p class="mt-2 text-xl text-gray-500">Don't miss these regional treasures.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
<!-- Spot 1: Lagos -->
<article class="bg-white p-6 rounded-xl shadow-xl card-hover border-l-8 border-[var(--color-primary)]">
<h4 class="text-3xl font-bold heading-impact text-gray-900 mb-3">Lagos: The Artistic Hub</h4>
<p class="text-lg mb-4 text-gray-600">
Known for its dramatic cliffs and vibrant art scene, Lagos serves as the perfect base. Explore its cobbled streets and enjoy the vibrant nightlife that complements the natural beauty.
</p>
<ul class="list-disc list-inside space-y-2 text-gray-700 ml-2">
<li>Must See: Ponta da Piedade viewpoint.</li>
<li>Activity: Kayaking tours among the rock formations.</li>
<li>Tip: Visit the local fish market in the morning.</li>
</ul>
<button class="mt-6 btn-primary bg-gray-800 text-white py-2 px-5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-700">View Lagos Guide</button>
</article>
<!-- Spot 2: Sagres -->
<article class="bg-white p-6 rounded-xl shadow-xl card-hover border-l-8 border-[var(--color-secondary)]">
<h4 class="text-3xl font-bold heading-impact text-gray-900 mb-3">Sagres: The Edge of Europe</h4>
<p class="text-lg mb-4 text-gray-600">
Located at the southwestern tip, Sagres offers a raw, rugged experience. This historic area feels like the frontier of the continent, perfect for introspective travelers.
</p>
<ul class="list-disc list-inside space-y-2 text-gray-700 ml-2">
<li>Must See: Fortaleza de Sagres.</li>
<li>Activity: Surfing lessons on the powerful Atlantic swells.</li>
<li>Tip: Pack extra layers; the wind is strong here!</li>
</ul>
<button class="mt-6 btn-primary bg-gray-800 text-white py-2 px-5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-700">View Sagres Guide</button>
</article>
</div>
</div>
</section>
<!-- Planning/Logistics Section -->
<section id="planning" class="py-16 md:py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h3 class="heading-impact text-4xl font-bold text-[var(--color-primary)]">Traveler's Blueprint</h3>
<p class="mt-2 text-xl text-gray-500">Logistics to make your journey seamless.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Logistics Item 1: Best Time to Visit -->
<div class="p-6 bg-gray-50 rounded-lg shadow-md border-t-4 border-amber-400 card-hover">
<div class="text-5xl mb-3 text-[var(--color-primary)]">☀️</div>
<h4 class="text-2xl font-bold heading-impact text-gray-900 mb-2">When to Go</h4>
<p class="text-gray-600 text-sm">The late spring (May-June) and early autumn (September-October) offer the perfect balance of warm weather and fewer crowds. Peak summer heat is intense, but the coastal life is unparalleled.</p>
</div>
<!-- Logistics Item 2: Getting There -->
<div class="p-6 bg-gray-50 rounded-lg shadow-md border-t-4 border-[var(--color-secondary)] card-hover">
<div class="text-5xl mb-3 text-[var(--color-secondary)]">🚗</div>
<h4 class="text-2xl font-bold heading-impact text-gray-900 mb-2">Getting Around</h4>
<p class="text-gray-600 text-sm">Rental cars are highly recommended to explore the remote coves and inland villages freely. Public transport is sparse outside major towns.</p>
</div>
<!-- Logistics Item 3: Local Cuisine -->
<div class="p-6 bg-gray-50 rounded-lg shadow-md border-t-4 border-[var(--color-primary)] card-hover">
<div class="text-5xl mb-3 text-[var(--color-primary)]">🍲</div>
<h4 class="text-2xl font-bold heading-impact text-gray-900 mb-2">Taste of the Coast</h4>
<p class="text-gray-600 text-sm">Do not leave without trying fresh grilled sardines (Sardinhas) and the local sweet Port Wine. Seafood is king here!</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 py-10 mt-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<p class="text-gray-400 text-sm mb-3">
&copy; 2024 Algarve Atlas Guide. Crafted with intentional design for the discerning traveler.
</p>
<p class="text-gray-500 text-sm">
Design by Senior Creative Web Engineer. All rights reserved.
</p>
</div>
</footer>
<script>
// Simple JavaScript for a subtle interaction effect on load
document.addEventListener('DOMContentLoaded', function() {
const titleElement = document.querySelector('h1');
if (titleElement) {
titleElement<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 30.40s</div>