Refactor code structure and remove redundant changes
This commit is contained in:
@@ -1,4 +1,2 @@
|
||||
vendor
|
||||
pages/*.html
|
||||
web/previews/*.jpg
|
||||
.env.local
|
||||
@@ -0,0 +1,199 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ascend Athletics - Elevate Your Strength</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom Styling for Bold Typography and Focus States */
|
||||
:root {
|
||||
--primary-color: #E74C3C; /* A strong, energetic red */
|
||||
--secondary-color: #34495E; /* Deep Slate Blue for grounding */
|
||||
}
|
||||
.font-display {
|
||||
font-family: 'Montserrat', sans-serif; /* Simulating a strong display font */
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.btn-primary {
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(231, 76, 60, 0.6);
|
||||
}
|
||||
/* Subtle Hover Effect for Cards */
|
||||
.card-lift {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.card-lift:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
/* Focus Ring Enhancement */
|
||||
:focus {
|
||||
outline: 4px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'brand-primary': '#E74C3C',
|
||||
'brand-secondary': '#34495E',
|
||||
'brand-light': '#F9FAFB',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Montserrat', 'sans-serif'],
|
||||
display: ['Oswald', 'sans-serif'], /* Using a simulated bold font */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-brand-light text-brand-secondary antialiased font-sans">
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-lg border-b border-gray-100">
|
||||
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-16">
|
||||
<!-- Logo/Brand -->
|
||||
<div class="flex-shrink-0">
|
||||
<span class="text-3xl font-display text-brand-primary tracking-widest">ASCEND</span>
|
||||
</div>
|
||||
<!-- Desktop Menu -->
|
||||
<div class="hidden md:ml-6 md:flex md:space-x-8">
|
||||
<a href="#services" class="text-gray-600 hover:text-brand-primary px-3 py-2 text-sm font-medium transition duration-150 border-b-2 border-transparent hover:border-brand-primary">Coaching</a>
|
||||
<a href="#plans" class="text-gray-600 hover:text-brand-primary px-3 py-2 text-sm font-medium transition duration-150 border-b-2 border-transparent hover:border-brand-primary">Programs</a>
|
||||
<a href="#about" class="text-gray-600 hover:text-brand-primary px-3 py-2 text-sm font-medium transition duration-150 border-b-2 border-transparent hover:border-brand-primary">About</a>
|
||||
<a href="#contact" class="text-gray-600 hover:text-brand-primary px-3 py-2 text-sm font-medium transition duration-150 border-b-2 border-transparent hover:border-brand-primary">Book Session</a>
|
||||
</div>
|
||||
<!-- Mobile Menu Button (Simplified for single page focus) -->
|
||||
<div class="md:hidden flex items-center">
|
||||
<button id="mobile-menu-button" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-brand-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-primary">
|
||||
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Mobile Menu Dropdown (Hidden by default) -->
|
||||
<div class="md:hidden hidden" id="mobile-menu">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-brand-primary/10 hover:text-brand-primary focus:bg-brand-primary/20">Coaching</a>
|
||||
<a href="#plans" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-brand-primary/10 hover:text-brand-primary">Programs</a>
|
||||
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-brand-primary/10 hover:text-brand-primary">About</a>
|
||||
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-brand-primary/10 hover:text-brand-primary">Book Session</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-[60vh] md:h-[80vh] flex items-center justify-center bg-cover bg-center overflow-hidden"
|
||||
style="background-image: url('https://images.pexels.com/photos/5075744/pexels-photo-5075744.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750');">
|
||||
|
||||
<!-- Overlay for visual depth -->
|
||||
<div class="absolute inset-0 bg-brand-secondary/50 backdrop-brightness-75"></div>
|
||||
|
||||
<!-- Content Container -->
|
||||
<div class="relative z-10 text-center max-w-4xl px-4">
|
||||
<h1 class="text-5xl sm:text-7xl font-display text-white leading-tight mb-4 drop-shadow-lg">
|
||||
Unleash Your Peak Performance.
|
||||
</h1>
|
||||
<p class="text-xl sm:text-2xl text-gray-200 mb-8 font-medium drop-shadow-md">
|
||||
Personalized fitness coaching designed to build sustainable strength, resilience, and lasting vitality.
|
||||
</p>
|
||||
<a href="#contact" class="inline-block bg-brand-primary text-white text-lg font-bold py-4 px-10 rounded-lg uppercase tracking-wider shadow-xl btn-primary focus:ring-4 focus:ring-brand-primary/50">
|
||||
Start Your Transformation
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Image Attribution (Placeholder adherence) -->
|
||||
<div class="absolute bottom-4 left-4 z-20 text-white text-xs opacity-80 bg-black/50 p-2 rounded">
|
||||
Photo by Pexels Photographer on Pexels
|
||||
<a href="https://www.pexels.com/" target="_blank" class="ml-1 hover:underline">Pexels</a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section id="services" class="py-20 lg:py-32 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-4xl font-display text-brand-secondary mb-4">Our Coaching Pillars</h2>
|
||||
<p class="text-xl text-gray-600 mb-12 max-w-3xl mx-auto">
|
||||
We don't just count reps; we build habits. Focus on holistic strength, mental fortitude, and movement mastery.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Service Card 1 -->
|
||||
<div class="p-8 bg-white border border-gray-100 rounded-xl shadow-lg card-lift">
|
||||
<div class="text-brand-primary mb-4">
|
||||
<svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-display text-brand-secondary mb-3">Strength Foundation</h3>
|
||||
<p class="text-gray-600">
|
||||
Master compound movements and build a rock-solid physical base. Customized programming for beginner to advanced athletes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Service Card 2 -->
|
||||
<div class="p-8 bg-white border border-gray-100 rounded-xl shadow-lg card-lift">
|
||||
<div class="text-brand-primary mb-4">
|
||||
<svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6 10h-1.732M5 12h14a2 2 0 012 2v3a2 2 0 01-2 2H5a2 2 0 01-2-2v-3a2 2 0 012-2z"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-display text-brand-secondary mb-3">Injury Resilience</h3>
|
||||
<p class="text-gray-600">
|
||||
Learn mobility drills and proper form to keep you moving strong and stay injury-free through every phase of your journey.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Service Card 3 -->
|
||||
<div class="p-8 bg-white border border-gray-100 rounded-xl shadow-lg card-lift">
|
||||
<div class="text-brand-primary mb-4">
|
||||
<svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-display text-brand-secondary mb-3">Metabolic Conditioning</h3>
|
||||
<p class="text-gray-600">
|
||||
Boost energy levels and endurance with targeted metabolic training, making workouts efficient and powerful.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Program Plans Section -->
|
||||
<section id="plans" class="py-20 lg:py-32 bg-brand-light">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-4xl font-display text-brand-secondary mb-4">Choose Your Ascent Path</h2>
|
||||
<p class="text-xl text-gray-600 mb-12 max-w-3xl mx-auto">
|
||||
Whether you need a quick boost or a total body rebuild, we have a path for your goals.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
|
||||
|
||||
<!-- Plan 1: Core -->
|
||||
<div class="bg-white p-8 rounded-xl shadow-2xl border-t-8 border-gray-300 card-lift flex flex-col">
|
||||
<h3 class="text-3xl font-display text-brand-secondary mb-2">Foundational</h3>
|
||||
<p class="text-gray-500 mb-4">Ideal for beginners needing structure.</p>
|
||||
<p class="text-4xl font-bold text-brand-primary mb-6">$99<span class="text-xl font-normal text-gray-500">/month</span></p>
|
||||
<ul class="text-left space-y-3 text-gray-600 flex-grow mb-8">
|
||||
<li class="flex items-center"><span class="text-green-500 mr-2">✔</span> Weekly Check-ins</li>
|
||||
<li class="flex items-center"><span class="text-green-500 mr-2">✔</span> Custom Workout Templates</li>
|
||||
<li class="flex items-center"><span class="text-green-500 mr-2">✔</span> Form Review (Video)</li>
|
||||
</ul>
|
||||
<button class="w-full bg-brand-secondary text-white py-3 rounded-lg font-semibold hover:bg-gray-700 transition duration-300 focus:ring-4 focus:ring-brand-secondary/50">
|
||||
Select Foundational
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Plan 2: Premium (Featured) -->
|
||||
<div class="bg-white p-10 rounded-xl shadow-2xl border-t-8 border-brand-primary transform scale-105 card-lift flex flex-col">
|
||||
<div class="absolute top-0 right-0 -mt-4 -mr-4">
|
||||
<span class="bg-brand-primary text-white text-xs font-bold uppercase px-4 py-1 rounded-full shadow-lg transform rotate-3">BEST VALUE</span><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 29.40s</div>
|
||||
@@ -0,0 +1,216 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AURORA ECHOES - Indie Game Launch</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom Font Styling for bold impact */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Merriweather:wght@400;700&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Merriweather', serif;
|
||||
background-color: #121212; /* Deep dark background */
|
||||
color: #e0e0e0;
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
.font-display {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)), url('https://images.unsplash.com/photo-1506744038154-7191a89e4c8e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&q=80&w=1080'); /* Placeholder for moody, atmospheric art */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 80vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* Subtle Hover Effect for Interactivity */
|
||||
.interactive-btn {
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 4px 15px rgba(255, 100, 100, 0.3);
|
||||
}
|
||||
|
||||
.interactive-btn:hover {
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
box-shadow: 0 8px 25px rgba(255, 100, 100, 0.6);
|
||||
background-color: #ff6464;
|
||||
}
|
||||
|
||||
/* Animated text glow on focus/hover for emphasis */
|
||||
.glowing-title {
|
||||
text-shadow: 0 0 5px rgba(255, 100, 100, 0.5), 0 0 15px rgba(255, 100, 100, 0.2);
|
||||
animation: pulse-shadow 3s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes pulse-shadow {
|
||||
from {
|
||||
text-shadow: 0 0 5px rgba(255, 100, 100, 0.3);
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 10px rgba(255, 100, 100, 0.6);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<header class="sticky top-0 z-20 bg-gray-950/90 backdrop-blur-md shadow-lg border-b border-red-900">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
||||
<div class="text-2xl font-display font-bold text-red-400 tracking-widest">
|
||||
AURORA ECHOES
|
||||
</div>
|
||||
<nav>
|
||||
<a href="#features" class="text-sm text-gray-300 hover:text-red-400 px-3 py-2 border-b-2 border-transparent hover:border-red-500 transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Merkmale</a>
|
||||
<a href="#media" class="text-sm text-gray-300 hover:text-red-400 px-3 py-2 border-b-2 border-transparent hover:border-red-500 transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Trailer</a>
|
||||
<a href="#preorder" class="text-sm text-gray-300 hover:text-red-400 px-3 py-2 border-b-2 border-transparent hover:border-red-500 transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Vorbestellen</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-bg">
|
||||
<div class="p-6 max-w-4xl mx-auto">
|
||||
<h1 class="font-display text-6xl sm:text-7xl font-black text-white mb-4 tracking-tight glowing-title uppercase">
|
||||
Aurora Echoes
|
||||
</h1>
|
||||
<p class="font-display text-xl sm:text-2xl text-gray-200 mb-8 italic">
|
||||
Ein Abenteuer in den vergessenen Korridoren der Seele. Entdecke die Melodie der Stille.
|
||||
</p>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<a href="#preorder" class="interactive-btn font-display text-lg px-10 py-4 bg-red-600 text-white rounded-lg uppercase shadow-xl focus:outline-none focus:ring-4 focus:ring-red-400">
|
||||
JETZT VORBESTELLEN
|
||||
</a>
|
||||
<a href="#media" class="interactive-btn font-display text-lg px-10 py-4 bg-gray-700/50 text-gray-200 rounded-lg uppercase border-2 border-gray-500 hover:border-red-400 focus:outline-none focus:ring-2 focus:ring-gray-400">
|
||||
Trailer Ansehen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="py-20 lg:py-32 bg-gray-950">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="font-display text-5xl font-bold text-white mb-3 tracking-wider">
|
||||
Die Welt von Aurora
|
||||
</h2>
|
||||
<p class="text-xl text-red-400 font-display">
|
||||
Tiefe, Atmosphäre und emotionale Resonanz.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Feature 1 -->
|
||||
<div class="bg-gray-800 p-8 rounded-xl shadow-2xl border-t-4 border-red-700 hover:shadow-red-900/50 transition duration-300 transform hover:-translate-y-1 focus:outline-none focus:border-red-400" tabindex="0">
|
||||
<h3 class="font-display text-3xl font-bold text-red-400 mb-3">Resonanz-System</h3>
|
||||
<p class="text-gray-300 text-lg">
|
||||
Jede Interaktion verändert die Welt subtil. Das System erfasst Entscheidungen und spiegelt sie in der Landschaft wider, was zu einer einzigartigen Erfahrung führt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<div class="bg-gray-800 p-8 rounded-xl shadow-2xl border-t-4 border-red-700 hover:shadow-red-900/50 transition duration-300 transform hover:-translate-y-1 focus:outline-none focus:border-red-400" tabindex="0">
|
||||
<h3 class="font-display text-3xl font-bold text-red-400 mb-3">Narrative Tiefe</h3>
|
||||
<p class="text-gray-300 text-lg">
|
||||
Kein geradliniger Pfad. Aurora Echoes präsentiert eine nicht-lineare Erzählung, die sich organisch aus Ihren Handlungen entwickelt und Charaktertiefe gewinnt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3 -->
|
||||
<div class="bg-gray-800 p-8 rounded-xl shadow-2xl border-t-4 border-red-700 hover:shadow-red-900/50 transition duration-300 transform hover:-translate-y-1 focus:outline-none focus:border-red-400" tabindex="0">
|
||||
<h3 class="font-display text-3xl font-bold text-red-400 mb-3">Atmosphärisches Design</h3>
|
||||
<p class="text-gray-300 text-lg">
|
||||
Visuelle und auditive Kompositionen, die eine melancholische, aber majestätische Stimmung erzeugen. Musik ist ein integraler Bestandteil der Geschichte.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Media/Trailer Section -->
|
||||
<section id="media" class="py-20 lg:py-32 bg-gray-900 border-t border-red-900">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="font-display text-5xl font-bold text-white mb-10">
|
||||
Sehen Sie die Echoes
|
||||
</h2>
|
||||
|
||||
<!-- Mock Video Player Container -->
|
||||
<div class="relative w-full max-w-4xl mx-auto shadow-2xl rounded-lg overflow-hidden border-4 border-gray-700 group">
|
||||
<!-- In a real build, this would be an embedded YouTube/Vimeo iframe -->
|
||||
<div class="aspect-video bg-black flex items-center justify-center p-10">
|
||||
<div class="text-center">
|
||||
<svg class="w-24 h-24 mx-auto text-red-500 transition-transform duration-300 group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M6 4l14 8-14 8V4z"></path>
|
||||
</svg>
|
||||
<p class="font-display text-xl mt-2 text-gray-400">TRAILER ANZEIGE HIER</p>
|
||||
<p class="text-sm text-gray-500">(Klicken Sie auf den Button im Header für die Ansicht)</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Overlay for extra polish -->
|
||||
<div class="absolute inset-0 bg-black/30 transition duration-500 group-hover:bg-black/10"></div>
|
||||
</div>
|
||||
<p class="mt-8 text-lg text-gray-400">
|
||||
Tauchen Sie ein in die düsteren Gewässer von Aurora Echoes.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Preorder CTA Section -->
|
||||
<section id="preorder" class="py-24 bg-gray-950 border-t border-b border-red-900">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="font-display text-6xl font-extrabold text-white mb-4 tracking-tight">
|
||||
Sichern Sie sich Ihren Platz
|
||||
</h2>
|
||||
<p class="text-2xl text-red-400 mb-10 font-display">
|
||||
Die Vorbestellphase startet in Kürze. Seien Sie der Erste, der die Stille bricht.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-center gap-6 max-w-3xl mx-auto">
|
||||
|
||||
<!-- Option 1: Digital -->
|
||||
<div class="bg-gray-800 p-6 rounded-lg flex-1 border-2 border-gray-700 hover:border-red-500 transition duration-300 shadow-lg text-center focus-within:ring-4 focus-within:ring-red-500">
|
||||
<h4 class="font-display text-3xl font-bold text-red-300 mb-2">Digital Edition</h4>
|
||||
<p class="text-4xl font-display font-bold text-white mb-4">49,99 €</p>
|
||||
<button class="interactive-btn w-full py-3 bg-red-700 text-white font-semibold rounded-md uppercase focus:outline-none" tabindex="0">
|
||||
Jetzt Reservieren
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Option 2: Deluxe -->
|
||||
<div class="bg-gray-800 p-6 rounded-lg flex-1 border-2 border-gray-700 hover:border-red-500 transition duration-300 shadow-lg text-center focus-within:ring-4 focus-within:ring-red-500">
|
||||
<h4 class="font-display text-3xl font-bold text-red-300 mb-2">Collector's Edition</h4>
|
||||
<p class="text-4xl font-display font-bold text-white mb-4">79,99 €</p>
|
||||
<button class="interactive-btn w-full py-3 bg-gray-700 text-white font-semibold rounded-md uppercase focus:outline-none" tabindex="0">
|
||||
Limitierte Vorbestellung
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 text-center text-gray-400 text-sm">
|
||||
<p>Geplante Veröffentlichung: Q4 2024. Informationen werden hier aktualisiert.</p>
|
||||
<p class="mt-2">© 2024 Aurora Echoes Development Team</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="bg-gray-950 border-t border-red-900 py-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-gray-500">
|
||||
<div class="flex justify-center space-x-6 mb-4">
|
||||
<a href="#" class="hover:text-red-400 transition duration-150 focus:outline-none">Twitter</a>
|
||||
<a href="#" class="hover:text-red-400 transition duration-150 focus:outline-none">Discord</a>
|
||||
<a href="#" class="hover:text-red-400 transition duration-150 focus:outline-none">Steam</a>
|
||||
</div>
|
||||
<p class="font-display text-lg">© Aurora Echoes. Alles Rechte vorbehalten.</p>
|
||||
</div><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.81s</div>
|
||||
@@ -0,0 +1,183 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Roastery Alchemist | Small Batch Coffee Roaster</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<style>
|
||||
/* Custom Styling for a rustic, warm, and artisanal feel */
|
||||
.font-serif-display {
|
||||
font-family: 'Playfair Display', Georgia, serif; /* Simulated custom font for elegance */
|
||||
}
|
||||
.font-mono-accent {
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
.coffee-gradient-bg {
|
||||
background: linear-gradient(145deg, #4a2c1e 0%, #6b4d3d 100%);
|
||||
}
|
||||
/* Subtle hover effect for product cards */
|
||||
.product-card:hover {
|
||||
transform: translateY(-5px) scale(1.02);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
/* Subtle pulse for CTA */
|
||||
@keyframes pulse-glow {
|
||||
0% { box-shadow: 0 0 0 0 rgba(180, 50, 10, 0.4); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(180, 50, 10, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(180, 50, 10, 0); }
|
||||
}
|
||||
.pulse-cta {
|
||||
animation: pulse-glow 2s infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 text-gray-800 antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<header class="sticky top-0 z-50 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-20">
|
||||
<div class="flex items-center space-x-2">
|
||||
<h1 class="text-3xl font-serif-display font-bold text-amber-900 tracking-wider">
|
||||
The Roastery Alchemist
|
||||
</h1>
|
||||
<p class="text-xs font-mono-accent text-gray-500 hidden sm:block">Small Batch Roasters</p>
|
||||
</div>
|
||||
<nav class="flex space-x-8">
|
||||
<a href="#philosophy" class="text-gray-600 hover:text-amber-700 transition duration-150 font-medium border-b-2 border-transparent hover:border-amber-700 pb-1">Our Story</a>
|
||||
<a href="#coffees" class="text-gray-600 hover:text-amber-700 transition duration-150 font-medium border-b-2 border-transparent hover:border-amber-700 pb-1">Roasts</a>
|
||||
<a href="#about" class="text-gray-600 hover:text-amber-700 transition duration-150 font-medium border-b-2 border-transparent hover:border-amber-700 pb-1">Sourcing</a>
|
||||
<a href="#contact" class="text-gray-600 hover:text-amber-700 transition duration-150 font-medium border-b-2 border-transparent hover:border-amber-700 pb-1">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="coffee-gradient-bg h-[70vh] flex items-center justify-center text-center shadow-xl">
|
||||
<div class="max-w-4xl mx-8 p-6 bg-black/10 rounded-xl border-l-8 border-amber-300 backdrop-blur-sm">
|
||||
<h2 class="text-6xl font-serif-display font-extrabold text-white leading-tight mb-4 drop-shadow-lg">
|
||||
The Art of the Perfect Roast
|
||||
</h2>
|
||||
<p class="text-xl text-amber-100 mb-8 font-light tracking-wider">
|
||||
Mastering the craft of specialty coffee, from seed to sip. Every bean tells a story.
|
||||
</p>
|
||||
<a href="#coffees" class="inline-block px-10 py-4 text-lg font-semibold text-black bg-amber-300 rounded-full uppercase tracking-widest shadow-lg hover:bg-amber-200 transform hover:scale-105 transition duration-300 focus:outline-none focus:ring-4 focus:ring-amber-400/50 pulse-cta">
|
||||
Explore Roasts
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Philosophy Section -->
|
||||
<section id="philosophy" class="py-20 lg:py-28 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid lg:grid-cols-12 lg:gap-16 items-center">
|
||||
<div class="lg:col-span-5">
|
||||
<h3 class="text-sm uppercase tracking-widest text-amber-600 font-mono-accent mb-2">Our Ethos</h3>
|
||||
<h2 class="text-5xl font-serif-display font-bold text-gray-900 mb-6">
|
||||
Precision Meets Passion.
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 mb-4 leading-relaxed">
|
||||
We believe coffee is more than just a morning ritual; it is a meticulously cultivated experience. At The Roastery Alchemist, we honor the journey of the bean, from its unique terroir to the final, perfect crackle of the roast.
|
||||
</p>
|
||||
<p class="text-lg text-gray-500 leading-relaxed border-l-4 border-amber-500 pl-4 italic">
|
||||
We seek out micro-lots and unique origins that push the boundaries of flavor, ensuring every bag is a journey for your palate.
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:col-span-7 mt-10 lg:mt-0">
|
||||
<!-- Placeholder Image simulating roasting process -->
|
||||
<div class="relative aspect-video overflow-hidden rounded-xl shadow-2xl group cursor-pointer">
|
||||
<img src="https://images.unsplash.com/photo-1578950388010-3312738c52a0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cm9hc3Rlcnl8ZW58MHx8fHwxNjczMDc1MTc1&ixlib=rb-4.0.3&q=80&w=1080"
|
||||
alt="Artisan coffee roaster in action"
|
||||
class="w-full h-full object-cover transition duration-500 group-hover:scale-105"
|
||||
loading="lazy">
|
||||
<div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
|
||||
<p class="text-white text-2xl font-serif-display uppercase tracking-widest">The Roasting Chamber</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Coffees/Products Section -->
|
||||
<section id="coffees" class="py-20 lg:py-32 bg-amber-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h3 class="text-sm uppercase tracking-widest text-amber-700 font-mono-accent">Our Harvest</h3>
|
||||
<h2 class="text-5xl font-serif-display font-bold text-gray-900">
|
||||
Explore Our Current Roasts
|
||||
</h2>
|
||||
<p class="mt-3 text-xl text-gray-500 max-w-3xl mx-auto">
|
||||
From bright, vibrant acidity to deep, comforting chocolate notes—find your perfect daily cup.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Roast Card 1: Ethiopian Yirgacheffe -->
|
||||
<div class="product-card bg-white shadow-xl rounded-2xl overflow-hidden transition duration-300 border border-gray-100 p-6 flex flex-col">
|
||||
<div class="h-40 overflow-hidden rounded-t-xl mb-4">
|
||||
<img src="https://images.unsplash.com/photo-1542985401-b895f5748145?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHFlZ2hhY2hlZmZlJTIwYmlhZCUyMG1hbnxlbnwwfDExfDIlMjV8ZWx8MHx8fHwxNzY3NTg4NDMx"
|
||||
alt="Ethiopian Yirgacheffe Coffee Beans"
|
||||
class="w-full h-full object-cover transition duration-500 group-hover:opacity-90">
|
||||
</div>
|
||||
<h3 class="text-3xl font-serif-display font-bold text-gray-900 mb-2">Yirgacheffe Bloom</h3>
|
||||
<p class="text-sm uppercase tracking-widest text-amber-600 font-mono-accent mb-3">Light Roast | Africa</p>
|
||||
<p class="text-gray-600 flex-grow mb-4 text-base">
|
||||
Exquisite notes of blueberry, jasmine, and citrus zest. A vibrant, floral masterpiece from the Ethiopian highlands.
|
||||
</p>
|
||||
<div class="mt-auto pt-4 border-t border-gray-100">
|
||||
<p class="text-2xl font-bold text-gray-900">$19.00</p>
|
||||
<button class="mt-3 w-full bg-amber-700 text-white py-3 rounded-full text-lg font-semibold hover:bg-amber-800 transition duration-300 shadow-md focus:outline-none focus:ring-4 focus:ring-amber-300">
|
||||
Add to Basket
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Roast Card 2: Guatemalan Antigua -->
|
||||
<div class="product-card bg-white shadow-xl rounded-2xl overflow-hidden transition duration-300 border border-gray-100 p-6 flex flex-col">
|
||||
<div class="h-40 overflow-hidden rounded-t-xl mb-4">
|
||||
<img src="https://images.unsplash.com/photo-1537717244991-297f872454e6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGNvZmZlZSUyMGJlYW5lcyUyMGlkZW58ZW58MHx8fHwxNjczMDc1MTc1&ixlib=rb-4.0.3&q=80&w=1080"
|
||||
alt="Guatemalan Antigua Coffee Beans"
|
||||
class="w-full h-full object-cover transition duration-500 group-hover:opacity-90">
|
||||
</div>
|
||||
<h3 class="text-3xl font-serif-display font-bold text-gray-900 mb-2">Antigua Reserve</h3>
|
||||
<p class="text-sm uppercase tracking-widest text-amber-600 font-mono-accent mb-3">Medium Roast | Central America</p>
|
||||
<p class="text-gray-600 flex-grow mb-4 text-base">
|
||||
Smooth notes of dark chocolate, tobacco, and warm spice. A perfectly balanced, robust classic.
|
||||
</p>
|
||||
<div class="mt-auto pt-4 border-t border-gray-100">
|
||||
<p class="text-2xl font-bold text-gray-900">$18.50</p>
|
||||
<button class="mt-3 w-full bg-amber-700 text-white py-3 rounded-full text-lg font-semibold hover:bg-amber-800 transition duration-300 shadow-md focus:outline-none focus:ring-4 focus:ring-amber-300">
|
||||
Add to Basket
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Roast Card 3: Sumatra Mandheling -->
|
||||
<div class="product-card bg-white shadow-xl rounded-2xl overflow-hidden transition duration-300 border border-gray-100 p-6 flex flex-col">
|
||||
<div class="h-40 overflow-hidden rounded-t-xl mb-4">
|
||||
<img src="https://images.unsplash.com/photo-1559363357-b71159293035?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fGNvZmZlZSUyMGJlYW5lcyUyMG1hbnxlbnwwfDExfDIlMjV8ZWx8MHx8fHwxNzY3NTg4NDMx"
|
||||
alt="Sumatra Mandheling Coffee Beans"
|
||||
class="w-full h-full object-cover transition duration-500 group-hover:opacity-90">
|
||||
</div>
|
||||
<h3 class="text-3xl font-serif-display font-bold text-gray-900 mb-2">Mandheling Shadow</h3>
|
||||
<p class="text-sm uppercase tracking-widest text-amber-600 font-mono-accent mb-3">Dark Roast | Sumatra</p>
|
||||
<p class="text-gray-600 flex-grow mb-4 text-base">
|
||||
Deep, earthy profile with notes of dark cocoa and cedar. Intense, full-bodied, and commanding.
|
||||
</p>
|
||||
<div class="mt-auto pt-4 border-t border-gray-100">
|
||||
<p class="text-2xl font-bold text-gray-900">$17.00</p>
|
||||
<button class="mt-3 w-full bg-amber-700 text-white py-3 rounded-full text-lg font-semibold hover:bg-amber-800 transition duration-300 shadow-md focus:outline-none focus:ring-4 focus:ring-amber-300">
|
||||
Add to Basket
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- S<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.47s</div>
|
||||
@@ -0,0 +1,181 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Starlight Echoes - Indie Game Launch</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom configuration for Tailwind to define unique colors/fonts */
|
||||
:root {
|
||||
--color-primary: #D90429; /* Deep Red/Crimson for urgency/passion */
|
||||
--color-secondary: #3B82F6; /* Blue for contrast/calm */
|
||||
--color-dark: #1F2937; /* Slate-800 for background depth */
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #0f172a; /* Dark Blue-Gray background */
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(217, 4, 41, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(217, 4, 41, 0.6);
|
||||
background-color: #c50026;
|
||||
}
|
||||
|
||||
/* Subtle hover effect for feature cards */
|
||||
.feature-card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
/* Custom gradient overlay for mood */
|
||||
.hero-overlay {
|
||||
background: linear-gradient(to top, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.2)),
|
||||
url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22627%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23111827%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22middle%22%20text-anchor%3D%22middle%22%20fill%3D%22%239CA3AF%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2236%22%3EHero%20image%20unavailable%3C%2Ftext%3E%3C%2Fsvg%3E') center/cover no-repeat;
|
||||
}
|
||||
</style>
|
||||
<!-- Include Inter font via Google Fonts CDN if Tailwind doesn't handle it -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;500;700;900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<header class="sticky top-0 z-20 bg-gray-900/90 backdrop-blur-sm shadow-lg">
|
||||
<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">
|
||||
<span class="text-2xl font-black tracking-wider text-red-600">STARDUST</span>
|
||||
</div>
|
||||
<nav class="flex space-x-8">
|
||||
<a href="#features" class="text-sm font-medium transition duration-150 hover:text-blue-400">Features</a>
|
||||
<a href="#story" class="text-sm font-medium transition duration-150 hover:text-blue-400">The Lore</a>
|
||||
<a href="#community" class="text-sm font-medium transition duration-150 hover:text-blue-400">Community</a>
|
||||
</nav>
|
||||
<div class="flex items-center space-x-4">
|
||||
<a href="#" class="text-sm font-semibold text-white px-4 py-2 border border-white hover:bg-white hover:text-gray-900 transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Wishlist</a>
|
||||
<a href="#download" class="btn-primary bg-red-600 text-white px-6 py-2 rounded-lg text-sm font-bold focus:outline-none focus:ring-4 focus:ring-red-300 shadow-red-500/50">Wishlist Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- 1. Hero Section -->
|
||||
<section class="hero-overlay relative h-[70vh] md:h-[90vh] flex items-center justify-center text-center shadow-xl" style="background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22627%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23111827%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22middle%22%20text-anchor%3D%22middle%22%20fill%3D%22%239CA3AF%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2236%22%3EHero%20image%20unavailable%3C%2Ftext%3E%3C%2Fsvg%3E');">
|
||||
<div class="absolute inset-0 hero-overlay"></div>
|
||||
<div class="relative z-10 p-6 max-w-4xl mx-auto">
|
||||
<h1 class="text-6xl md:text-8xl font-extrabold text-white leading-tight mb-4 drop-shadow-lg tracking-tighter">
|
||||
Starlight Echoes
|
||||
</h1>
|
||||
<p class="text-xl md:text-3xl text-gray-200 mb-10 font-light italic">
|
||||
Navigate the forgotten constellations. A narrative adventure game of cosmic discovery and quiet reflection.
|
||||
</p>
|
||||
<div class="flex justify-center space-x-6 mb-8">
|
||||
<a href="#preorder" class="btn-primary bg-red-600 text-white px-10 py-4 text-lg font-bold rounded-xl shadow-lg">
|
||||
Wishlist on Steam
|
||||
</a>
|
||||
<a href="#features" class="bg-transparent border-2 border-white text-white px-10 py-4 text-lg font-bold rounded-xl hover:bg-white hover:text-gray-900 transition duration-300 focus:outline-none focus:ring-4 focus:ring-white/50">
|
||||
View Trailer
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Image Attribution -->
|
||||
<div class="mt-8 text-sm text-white/70 flex justify-center items-center">
|
||||
Photo by Pexels on <a href="https://www.pexels.com/" target="_blank" class="underline hover:text-white">Pexels</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. Core Pitch Section -->
|
||||
<section id="pitch" class="py-20 bg-gray-900 border-t border-b border-red-700">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<span class="text-sm uppercase tracking-widest text-red-400 block mb-3">The Journey Begins</span>
|
||||
<h2 class="text-5xl md:text-6xl font-black text-white mb-6 leading-snug">
|
||||
Where Silence Speaks Louder Than Sound.
|
||||
</h2>
|
||||
<p class="text-lg md:text-xl text-gray-300 max-w-3xl mx-auto mb-10">
|
||||
Starlight Echoes is a contemplative journey through a dying celestial map. Explore fragmented memories, solve intricate environmental puzzles, and uncover the true cost of stellar collapse.
|
||||
</p>
|
||||
<a href="#" class="btn-primary bg-blue-600 text-white px-8 py-3 text-lg font-semibold rounded-lg shadow-blue-500/50 focus:outline-none focus:ring-4 focus:ring-blue-300">
|
||||
Read Full Synopsis
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. Features Section -->
|
||||
<section id="features" class="py-24 bg-gray-950">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<span class="text-red-500 text-sm uppercase tracking-widest block mb-2">Key Features</span>
|
||||
<h2 class="text-5xl md:text-6xl font-extrabold text-white">
|
||||
Crafted for Immersion.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
<!-- Feature Card 1 -->
|
||||
<div class="feature-card p-8 bg-gray-800 rounded-xl border-t-4 border-red-600 shadow-2xl text-center">
|
||||
<svg class="w-12 h-12 mx-auto text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M9.663 17l.955-.955m4.673 0l-.955.955M4 12h16M4 8h16M4 4h16"></path></svg>
|
||||
<h3 class="text-2xl font-bold text-white mb-3">Procedural Stellar Cartography</h3>
|
||||
<p class="text-gray-400">Each sector of the galaxy is unique, generating infinite possibilities for discovery and unique environmental challenges.</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature Card 2 -->
|
||||
<div class="feature-card p-8 bg-gray-800 rounded-xl border-t-4 border-red-600 shadow-2xl text-center">
|
||||
<svg class="w-12 h-12 mx-auto text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5s3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18s-3.332.477-4.5 1.253"></path></svg>
|
||||
<h3 class="text-2xl font-bold text-white mb-3">Deep Narrative Resonance</h3>
|
||||
<p class="text-gray-400">Engage with complex, emotionally driven storylines. Choices echo through the void, altering the fate of your stellar companions.</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature Card 3 -->
|
||||
<div class="feature-card p-8 bg-gray-800 rounded-xl border-t-4 border-red-600 shadow-2xl text-center">
|
||||
<svg class="w-12 h-12 mx-auto text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.938a6.002 6.002 0 00-6.721 6.721L12 17l2.618-2.618a6.002 6.002 0 00-6.721-6.721z"></path></svg>
|
||||
<h3 class="text-2xl font-bold text-white mb-3">Atmospheric Soundscape</h3>
|
||||
<p class="text-gray-400">Immerse yourself in a meticulously crafted soundscape. The ambient hum of deep space guides your emotional state.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. Story/Lore Section -->
|
||||
<section id="story" class="py-24 bg-gray-900">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="md:flex md:space-x-12 items-center">
|
||||
|
||||
<!-- Image/Visual Element Area -->
|
||||
<div class="md:w-1/2 mb-8 md:mb-0 relative overflow-hidden rounded-xl shadow-2xl">
|
||||
<!-- Placeholder for a conceptual piece of art/visual asset -->
|
||||
<div class="h-96 bg-gray-700 flex items-center justify-center p-8 text-center transform hover:scale-[1.02] transition duration-500">
|
||||
<h3 class="text-3xl font-serif italic text-gray-300">Conceptual Art: The Nebula Core</h3>
|
||||
</div>
|
||||
<!-- Small decorative border/overlay -->
|
||||
<div class="absolute inset-0 border-4 border-red-900/50 pointer-events-none"></div>
|
||||
</div>
|
||||
|
||||
<!-- Text Content Area -->
|
||||
<div class="md:w-1/2">
|
||||
<span class="text-red-500 text-sm uppercase tracking-widest block mb-3">The Cosmic Narrative</span>
|
||||
<h2 class="text-5xl font-extrabold text-white mb-6 leading-tight">
|
||||
The Silence Between Stars.
|
||||
</h2>
|
||||
<p class="text-lg text-gray-300 mb-6 leading-relaxed">
|
||||
You are the last Echo—a sentient fragment drifting through a galaxy where light itself is fading. Starlight Echoes is not about explosions; it is about the profound beauty found in decay. Each dead star holds a secret, a final message left by a civilization that dared to dream beyond the observable.
|
||||
</p>
|
||||
<p class="text-base text-gray-400 mb-8 italic border-l-4 border-red-500 pl-4">
|
||||
"We seek not salvation, but understanding. We seek the quiet truth hidden in the void." - The Starlight Archives.
|
||||
</p>
|
||||
<a href="#" class="text-lg font-semibold text-red-400 hover:text-red-300 transition duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 inline-flex items-center">
|
||||
Explore Lore Deep Dive →
|
||||
</a><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 32.28s</div>
|
||||
@@ -0,0 +1,175 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ember Roast Co. | Crafting Exceptional Coffee</title>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
|
||||
<style>
|
||||
/* Custom font styling and subtle animations */
|
||||
.font-serif-display {
|
||||
font-family: 'Georgia', serif;
|
||||
}
|
||||
.font-body {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
.hover-lift {
|
||||
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
|
||||
}
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.fade-in-up {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: fadeInUp 1s ease-out forwards;
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 font-body text-gray-800">
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-lg">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-16">
|
||||
<!-- Logo -->
|
||||
<div class="flex-shrink-0">
|
||||
<a href="#" class="text-3xl font-serif-display text-amber-900 tracking-widest">
|
||||
Ember Roast Co.
|
||||
</a>
|
||||
</div>
|
||||
<!-- Desktop Menu -->
|
||||
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||
<a href="#shop" class="text-gray-700 hover:text-amber-700 px-3 py-2 text-sm font-medium transition duration-150 border-b-2 border-transparent hover:border-amber-500">Shop Beans</a>
|
||||
<a href="#roast-story" class="text-gray-700 hover:text-amber-700 px-3 py-2 text-sm font-medium transition duration-150 border-b-2 border-transparent hover:border-amber-500">Our Craft</a>
|
||||
<a href="#locations" class="text-gray-700 hover:text-amber-700 px-3 py-2 text-sm font-medium transition duration-150 border-b-2 border-transparent hover:border-amber-500">Visit Us</a>
|
||||
<a href="#contact" class="text-gray-700 hover:text-amber-700 px-3 py-2 text-sm font-medium transition duration-150 border-b-2 border-transparent hover:border-amber-500">Contact</a>
|
||||
</div>
|
||||
<!-- Mobile Menu Button -->
|
||||
<div class="sm:hidden">
|
||||
<button id="mobile-menu-button" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500" aria-controls="mobile-menu" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<!-- Icon when menu is closed -->
|
||||
<svg id="menu-icon-open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<!-- Icon when menu is open -->
|
||||
<svg id="menu-icon-close" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Menu (hidden by default) -->
|
||||
<div class="sm:hidden hidden" id="mobile-menu">
|
||||
<div class="px-4 pt-2 pb-3 space-y-1 sm:px-8 border-t border-gray-100">
|
||||
<a href="#shop" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-amber-50 hover:text-amber-700">Shop Beans</a>
|
||||
<a href="#roast-story" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-amber-50 hover:text-amber-700">Our Craft</a>
|
||||
<a href="#locations" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-amber-50 hover:text-amber-700">Visit Us</a>
|
||||
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-amber-50 hover:text-amber-700">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative bg-cover bg-center h-[70vh] flex items-center justify-center"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1559436598-e1015d53433a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
|
||||
|
||||
<!-- Overlay for dramatic effect -->
|
||||
<div class="absolute inset-0 bg-black/30 backdrop-blur-sm"></div>
|
||||
|
||||
<div class="relative z-10 text-center px-4">
|
||||
<h1 class="font-serif-display text-6xl sm:text-7xl font-extrabold text-white leading-tight drop-shadow-lg animate-fade-in-up" style="animation-delay: 0.2s;">
|
||||
The Art of the Perfect Roast
|
||||
</h1>
|
||||
<p class="font-body text-xl sm:text-2xl text-amber-100 mt-4 max-w-3xl mx-auto drop-shadow-md animate-fade-in-up" style="animation-delay: 0.4s;">
|
||||
Sustainably sourced beans, meticulously roasted to unlock unparalleled depth of flavor. Experience the fire.
|
||||
</p>
|
||||
<a href="#shop" class="mt-8 inline-block px-10 py-3 text-lg font-semibold text-amber-900 bg-amber-200 rounded-full shadow-xl hover:bg-amber-300 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-400">
|
||||
Discover Our Roasts
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Roasts / Shop Section -->
|
||||
<section id="shop" class="py-20 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-base font-semibold text-amber-600 uppercase tracking-wider">Featured Selection</h2>
|
||||
<p class="mt-2 text-4xl font-serif-display text-gray-900">
|
||||
Our Current Roasts
|
||||
</p>
|
||||
<p class="mt-4 text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
From bright, citrusy origins to deep, chocolatey foundations, find the roast that speaks to your palate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Roast Card 1: Light Roast -->
|
||||
<div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden hover-lift border border-gray-100 animate-fade-in-up" data-animation-delay="0">
|
||||
<div class="relative overflow-hidden h-64">
|
||||
<img src="https://images.unsplash.com/photo-1507863618607-5430b8b63817?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Light Roast Ethiopian Yirgacheffe" class="w-full h-full object-cover transition duration-500 group-hover:scale-105">
|
||||
<div class="absolute top-2 right-2 bg-amber-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">LIGHT</div>
|
||||
</div>
|
||||
<div class="p-6 text-center">
|
||||
<h3 class="font-serif-display text-3xl text-gray-900 mb-2">Yirgacheffe Bloom</h3>
|
||||
<p class="text-amber-700 text-lg mb-3 font-semibold">Light Roast</p>
|
||||
<p class="text-gray-600 mb-4 text-sm">Bright notes of jasmine, lemon zest, and sweet berry. A vibrant morning ritual.</p>
|
||||
<button class="w-full py-3 bg-amber-500 text-white text-lg font-medium rounded-lg shadow-md hover:bg-amber-600 transition duration-200 focus:outline-none focus:ring-4 focus:ring-amber-300">
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Roast Card 2: Medium Roast -->
|
||||
<div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden hover-lift border border-gray-100 animate-fade-in-up" data-animation-delay="200">
|
||||
<div class="relative overflow-hidden h-64">
|
||||
<img src="https://images.unsplash.com/photo-1526511652845-e9c77e7e081b?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Medium Roast Central American Blend" class="w-full h-full object-cover transition duration-500 group-hover:scale-105">
|
||||
<div class="absolute top-2 right-2 bg-amber-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">MEDIUM</div>
|
||||
</div>
|
||||
<div class="p-6 text-center">
|
||||
<h3 class="font-serif-display text-3xl text-gray-900 mb-2">Andean Harmony</h3>
|
||||
<p class="text-amber-700 text-lg mb-3 font-semibold">Medium Roast</p>
|
||||
<p class="text-gray-600 mb-4 text-sm">Balanced notes of milk chocolate, toasted almond, and smooth caramel finish.</p>
|
||||
<button class="w-full py-3 bg-amber-500 text-white text-lg font-medium rounded-lg shadow-md hover:bg-amber-600 transition duration-200 focus:outline-none focus:ring-4 focus:ring-amber-300">
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Roast Card 3: Dark Roast -->
|
||||
<div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden hover-lift border border-gray-100 animate-fade-in-up" data-animation-delay="400">
|
||||
<div class="relative overflow-hidden h-64">
|
||||
<img src="https://images.unsplash.com/photo-1596398928653-1f20348f36b4?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Dark Roast Sumatran Sumatra" class="w-full h-full object-cover transition duration-500 group-hover:scale-105">
|
||||
<div class="absolute top-2 right-2 bg-amber-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">DARK</div>
|
||||
</div>
|
||||
<div class="p-6 text-center">
|
||||
<h3 class="font-serif-display text-3xl text-gray-900 mb-2">Sumatran Deep</h3>
|
||||
<p class="text-amber-700 text-lg mb-3 font-semibold">Dark Roast</p>
|
||||
<p class="text-gray-600 mb-4 text-sm">Intense, smoky notes of dark cocoa and earthy spice. A powerful brew for reflection.</p>
|
||||
<button class="w-full py-3 bg-amber-500 text-white text-lg font-medium rounded-lg shadow-md hover:bg-amber-600 transition duration-200 focus:outline-none focus:ring-4 focus:ring-amber-300">
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Roaster Story Section -->
|
||||
<section id="roast-story" class="bg-gray-100 py-24">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="md:grid md:grid-cols-2 md:gap-12 items-center"><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.31s</div>
|
||||
@@ -0,0 +1,205 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kyoto Unveiled: A Traveler's Guide</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom configuration for Tailwind */
|
||||
:root {
|
||||
--color-ink: #1a1a1a;
|
||||
--color-sand: #f5e6d8;
|
||||
--color-moss: #385e4c;
|
||||
--color-terracotta: #b36c4d;
|
||||
}
|
||||
|
||||
.font-serif-bold {
|
||||
font-family: 'Playfair Display', serif;
|
||||
}
|
||||
|
||||
.bg-moss-dark {
|
||||
background-color: var(--color-moss);
|
||||
}
|
||||
|
||||
.text-sand-light {
|
||||
color: var(--color-sand);
|
||||
}
|
||||
|
||||
.border-terracotta {
|
||||
border-color: var(--color-terracotta);
|
||||
}
|
||||
|
||||
/* Subtle hover effect for cards */
|
||||
.guide-card:hover {
|
||||
transform: translateY(-5px) scale(1.02);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Custom smooth scrolling for navigation */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Custom focus ring for accessibility */
|
||||
.focus-visible:focus {
|
||||
outline: 4px solid var(--color-terracotta);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-gray-50 text-gray-800 antialiased">
|
||||
|
||||
<!-- Header and Navigation -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-lg border-b border-gray-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 items-center space-x-1">
|
||||
<h1 class="text-3xl font-serif-bold text-moss-dark tracking-wider">
|
||||
Kyoto
|
||||
</h1>
|
||||
<span class="text-xs uppercase tracking-widest text-terracotta ml-2 hidden sm:inline">Travel Guide</span>
|
||||
</div>
|
||||
<nav class="flex space-x-8">
|
||||
<a href="#must-see" class="text-sm font-medium hover:text-terracotta transition duration-150 p-1 focus-visible">Must See</a>
|
||||
<a href="#cuisine" class="text-sm font-medium hover:text-terracotta transition duration-150 p-1 focus-visible">Taste</a>
|
||||
<a href="#stay" class="text-sm font-medium hover:text-terracotta transition duration-150 p-1 focus-visible">Stay</a>
|
||||
<a href="#plan" class="text-sm font-medium hover:text-terracotta transition duration-150 p-1 focus-visible border-b-2 border-terracotta">Plan</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<main>
|
||||
<section class="relative h-[70vh] bg-cover bg-center flex items-center justify-center"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1563350148406-8c2936e3f56b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MXxzZDB8MTd8fG15b3J8ZW58MHx8MHx8fDA%3D');">
|
||||
|
||||
<!-- Overlay for text readability -->
|
||||
<div class="absolute inset-0 bg-black bg-opacity-40 backdrop-blur-sm"></div>
|
||||
|
||||
<div class="relative text-center max-w-4xl p-8">
|
||||
<h2 class="text-6xl sm:text-7xl font-serif-bold text-sand-light leading-tight drop-shadow-lg">
|
||||
Kyoto: Where Ancient Reverence Meets Tranquil Beauty
|
||||
</h2>
|
||||
<p class="mt-4 text-xl sm:text-2xl text-sand-light/90 font-light italic">
|
||||
Immerse yourself in the heart of traditional Japan. Discover serene Zen gardens, hidden bamboo groves, and refined culinary artistry.
|
||||
</p>
|
||||
<a href="#must-see" class="mt-8 inline-block px-10 py-3 bg-terracotta hover:bg-opacity-80 text-white text-lg font-semibold uppercase tracking-widest shadow-xl transition duration-300 transform hover:scale-105 focus-visible">
|
||||
Begin Your Journey
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Key Highlights Section -->
|
||||
<section class="py-16 bg-sand-light border-t-4 border-terracotta">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10 text-center">
|
||||
|
||||
<!-- Highlight 1 -->
|
||||
<div class="p-6 bg-white shadow-lg rounded-xl border-t-4 border-moss-dark transition duration-300 guide-card">
|
||||
<svg class="w-12 h-12 mx-auto mb-3 text-terracotta" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7m-7-7v14"></path></svg>
|
||||
<h3 class="text-2xl font-serif-bold text-moss-dark mb-2">Temples & Shrines</h3>
|
||||
<p class="text-gray-600">Explore Kiyomizu-dera and Fushimi Inari. Experience centuries of profound history.</p>
|
||||
</div>
|
||||
|
||||
<!-- Highlight 2 -->
|
||||
<div class="p-6 bg-white shadow-lg rounded-xl border-t-4 border-moss-dark transition duration-300 guide-card">
|
||||
<svg class="w-12 h-12 mx-auto mb-3 text-terracotta" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V8zM12 12v.01M12 16v.01"></path></svg>
|
||||
<h3 class="text-2xl font-serif-bold text-moss-dark mb-2">Arashiyama Groves</h3>
|
||||
<p class="text-gray-600">Wander through the towering, mystical paths of the famous bamboo forest.</p>
|
||||
</div>
|
||||
|
||||
<!-- Highlight 3 -->
|
||||
<div class="p-6 bg-white shadow-lg rounded-xl border-t-4 border-moss-dark transition duration-300 guide-card">
|
||||
<svg class="w-12 h-12 mx-auto mb-3 text-terracotta" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||
<h3 class="text-2xl font-serif-bold text-moss-dark mb-2">Artisan Culture</h3>
|
||||
<p class="text-gray-600">Discover traditional crafts, tea ceremonies, and exquisite Japanese artistry.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Must-See Destinations Section -->
|
||||
<section id="must-see" class="py-20 lg:py-28 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-5xl font-serif-bold text-moss-dark">
|
||||
Kyoto's Essential Stops
|
||||
</h2>
|
||||
<p class="mt-3 text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
From spiritual sanctuaries to vibrant artisan districts, here are the places that define the soul of Kyoto.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
||||
|
||||
<!-- Destination 1: Fushimi Inari -->
|
||||
<div class="bg-gray-50 shadow-2xl rounded-xl overflow-hidden transition duration-500 transform hover:shadow-moss-dark/50 border-t-8 border-terracotta guide-card">
|
||||
<div class="relative h-64 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1531718804890-7267d2521729?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MXxzZDB8MTZ8fGZ1c2hpbWlfmlhcnklMjB0aG9tYW5lfGVufDB8fDB8fHww"
|
||||
alt="Fushimi Inari Shrine Torii Gates"
|
||||
class="w-full h-full object-cover transition duration-500 hover:scale-105">
|
||||
<div class="absolute bottom-0 left-0 p-4 bg-black bg-opacity-50 text-white">
|
||||
<h3 class="text-3xl font-serif-bold">Fushimi Inari</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-3xl font-serif-bold text-moss-dark mb-2">The Thousand Gates</h4>
|
||||
<p class="text-gray-600 mb-3">Walk beneath thousands of vermillion torii gates winding up the mountain. The light filtering through the gates creates an ethereal, unforgettable experience.</p>
|
||||
<span class="inline-block px-4 py-1 text-sm font-semibold bg-terracotta/20 text-terracotta rounded-full border-b-2 border-terracotta focus-visible">
|
||||
Must See
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Destination 2: Arashiyama Bamboo Grove -->
|
||||
<div class="bg-gray-50 shadow-2xl rounded-xl overflow-hidden transition duration-500 transform hover:shadow-moss-dark/50 border-t-8 border-moss-dark guide-card">
|
||||
<div class="relative h-64 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1534188679901-e7176b9e2d5a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MXxzZDB8MTJ8fGJhYmlvb3JlfGVufDB8fDB8fHww"
|
||||
alt="Arashiyama Bamboo Grove"
|
||||
class="w-full h-full object-cover transition duration-500 hover:scale-105">
|
||||
<div class="absolute bottom-0 left-0 p-4 bg-black bg-opacity-50 text-white">
|
||||
<h3 class="text-3xl font-serif-bold">Arashiyama Bamboo</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-3xl font-serif-bold text-moss-dark mb-2">Whispers of the Forest</h4>
|
||||
<p class="text-gray-600 mb-3">Lose yourself in the towering stalks of the Arashiyama Bamboo Grove. The sound and sheer height of the forest are deeply meditative.</p>
|
||||
<span class="inline-block px-4 py-1 text-sm font-semibold bg-moss-dark/20 text-moss-dark rounded-full border-b-2 border-moss-dark focus-visible">
|
||||
Serenity Spot
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cuisine Section -->
|
||||
<section id="cuisine" class="py-20 bg-moss-dark text-sand-light">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-5xl font-serif-bold">
|
||||
The Taste of Kyoto
|
||||
</h2>
|
||||
<p class="mt-3 text-xl opacity-90">
|
||||
Kyoto's food scene is a reflection of its refined culture—subtle, seasonal, and deeply intentional.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<!-- Cuisine 1: Shojin Ryori -->
|
||||
<div class="bg-moss-dark/70 p-8 rounded-xl shadow-xl border-l-4 border-terracotta transition duration-300 hover:bg-moss-dark/90 guide-card">
|
||||
<h4 class="text-3xl font-serif-bold mb-3">Shojin Ryori</h4>
|
||||
<p class="mb-4 text-sm opacity-90">
|
||||
Traditional Buddhist vegetarian cuisine. It emphasizes the natural flavor of ingredients, presentation, and balance. A truly mindful meal.
|
||||
</p>
|
||||
<p class="text-sm font-bold uppercase tracking-wider">Vegetarian Excellence</p>
|
||||
</div>
|
||||
|
||||
<!-- Cuisine<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 29.68s</div>
|
||||
@@ -0,0 +1,208 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Architekten-Portfolio: Form & Fundament</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom configuration for Tailwind */
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'primary-stone': '#4a4a4a',
|
||||
'secondary-sand': '#e0d4c8',
|
||||
'accent-terracotta': '#c07c5c',
|
||||
'dark-charcoal': '#1a1a1a',
|
||||
},
|
||||
fontFamily: {
|
||||
serif: ['Playfair Display', 'serif'],
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
},
|
||||
keyframes: {
|
||||
'fade-in': {
|
||||
'from': { opacity: 0, transform: 'translateY(20px)' },
|
||||
'to': { opacity: 1, transform: 'translateY(0)' },
|
||||
},
|
||||
'border-pulse': {
|
||||
'0%,': { 'box-shadow': '0 0 0 0 rgba(192, 124, 92, 0.5)' },
|
||||
'50%': { 'box-shadow': '0 0 0 10px rgba(192, 124, 92, 0)' },
|
||||
'100%': { 'box-shadow': '0 0 0 0 rgba(192, 124, 92, 0)' },
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
'fade-in-up': 'fade-in 1s ease-out',
|
||||
'pulse-border': 'border-pulse 3s infinite',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom styles */
|
||||
.portfolio-card:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.nav-link:hover {
|
||||
border-bottom: 3px solid #c07c5c;
|
||||
}
|
||||
.btn-primary {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #c07c5c;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-secondary-sand text-dark-charcoal font-sans antialiased">
|
||||
|
||||
<header class="sticky top-0 z-50 bg-dark-charcoal bg-opacity-95 shadow-lg">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<!-- Logo/Name -->
|
||||
<h1 class="text-3xl font-serif font-bold text-white tracking-widest cursor-pointer" onclick="document.getElementById('hero').scrollIntoView({ behavior: 'smooth' })">
|
||||
ARCHITEKT.haus
|
||||
</h1>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="flex space-x-8">
|
||||
<a href="#projekte" class="nav-link text-lg hover:text-white transition duration-200 border-b-2 border-transparent">Projekte</a>
|
||||
<a href="#philosophie" class="nav-link text-lg hover:text-white transition duration-200 border-b-2 border-transparent">Philosophie</a>
|
||||
<a href="#kontakt" class="nav-link text-lg hover:text-white transition duration-200 border-b-2 border-transparent">Kontakt</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section id="hero" class="relative h-[70vh] flex items-center justify-center bg-cover bg-center"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1581377386568-9d480a54e8a8?w=1600&auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
|
||||
|
||||
<!-- Overlay for better text contrast -->
|
||||
<div class="absolute inset-0 bg-dark-charcoal bg-opacity-40"></div>
|
||||
|
||||
<div class="relative z-10 text-center px-4">
|
||||
<h2 class="text-6xl md:text-8xl font-serif text-white drop-shadow-lg leading-tight animate-fade-in-up">
|
||||
Form & Fundament
|
||||
</h2>
|
||||
<p class="mt-4 text-xl md:text-2xl text-secondary-sand font-light tracking-widest animate-fade-in-up" style="animation-delay: 0.5s;">
|
||||
Architektonische Klarheit. Nachhaltiges Design.
|
||||
</p>
|
||||
<a href="#projekte" class="btn-primary mt-8 inline-block bg-accent-terracotta text-dark-charcoal font-semibold py-3 px-8 text-lg rounded-lg shadow-lg transition duration-300">
|
||||
Projekte entdecken
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Portfolio Section -->
|
||||
<section id="projekte" class="py-20 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16 animate-fade-in-up" style="animation-delay: 0.2s;">
|
||||
<h3 class="text-5xl font-serif text-primary-stone mb-3">Unsere Arbeiten</h3>
|
||||
<p class="text-xl text-gray-600">Ein Blick in ausgewählte Bauvorhaben, die Tradition und Moderne vereinen.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Projekt 1 -->
|
||||
<div class="portfolio-card bg-white shadow-xl rounded-xl overflow-hidden cursor-pointer transform transition duration-300 border-t-8 border-accent-terracotta"
|
||||
style="animation: fade-in-up 1s ease-out 0.3s;">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1542751371-adc314580f67?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bW9kZHxlbnwwfDB8MHx8fDA%3D"
|
||||
alt="Modernes Wohnhaus in Holzoptik" class="w-full h-72 object-cover transition duration-500 hover:scale-105">
|
||||
<div class="absolute inset-0 bg-dark-charcoal bg-opacity-20 hover:bg-opacity-40 transition duration-300 flex items-center justify-center">
|
||||
<p class="text-white text-lg font-semibold tracking-widest">Mehr erfahren</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 text-center bg-gray-50">
|
||||
<h4 class="text-2xl font-serif text-primary-stone mb-2">Wohnensemble 'Waldlicht'</h4>
|
||||
<p class="text-gray-500 mb-4">Nachhaltiges Familienhaus mit Fokus auf natürliche Materialien und Lichtführung.</p>
|
||||
<span class="inline-block bg-accent-terracotta text-white text-sm font-medium py-1 px-3 rounded-full">Wohnbau</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projekt 2 -->
|
||||
<div class="portfolio-card bg-white shadow-xl rounded-xl overflow-hidden cursor-pointer transform transition duration-300 border-t-8 border-primary-stone"
|
||||
style="animation: fade-in-up 1s ease-out 0.6s;">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1520085170860-5007c072029f?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZGlzY2FwZXJ8ZW58MHx8fDA%3D"
|
||||
alt="Elegantes Bürogebäude mit Steinfassade" class="w-full h-72 object-cover transition duration-500 hover:scale-105">
|
||||
<div class="absolute inset-0 bg-dark-charcoal bg-opacity-20 hover:bg-opacity-40 transition duration-300 flex items-center justify-center">
|
||||
<p class="text-white text-lg font-semibold tracking-widest">Mehr erfahren</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 text-center bg-gray-50">
|
||||
<h4 class="text-2xl font-serif text-primary-stone mb-2">Bürokomplex 'Steinburg'</h4>
|
||||
<p class="text-gray-500 mb-4">Ein repräsentativer Raum für moderne Unternehmensstrukturen in urbaner Umgebung.</p>
|
||||
<span class="inline-block bg-primary-stone text-white text-sm font-medium py-1 px-3 rounded-full">Kommerziell</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projekt 3 -->
|
||||
<div class="portfolio-card bg-white shadow-xl rounded-xl overflow-hidden cursor-pointer transform transition duration-300 border-t-8 border-accent-terracotta"
|
||||
style="animation: fade-in-up 1s ease-out 0.9s;">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1533109012210-82f4d598a1f5?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8c2VydmljZSUyMGRpZXNlcnxlbnwwfDB8MHx8fDA%3D"
|
||||
alt="Rustikales Ferienhaus mit Dachüberstand" class="w-full h-72 object-cover transition duration-500 hover:scale-105">
|
||||
<div class="absolute inset-0 bg-dark-charcoal bg-opacity-20 hover:bg-opacity-40 transition duration-300 flex items-center justify-center">
|
||||
<p class="text-white text-lg font-semibold tracking-widest">Mehr erfahren</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 text-center bg-gray-50">
|
||||
<h4 class="text-2xl font-serif text-primary-stone mb-2">Ferienhaus 'Alpenruh'</h4>
|
||||
<p class="text-gray-500 mb-4">Ein Rückzugsort, der lokale Traditionen und moderne Komfortansprüche integriert.</p>
|
||||
<span class="inline-block bg-primary-stone text-white text-sm font-medium py-1 px-3 rounded-full">Freizeitinfrastruktur</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Philosophy Section -->
|
||||
<section id="philosophie" class="py-24 bg-secondary-sand">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h3 class="text-4xl font-serif text-dark-charcoal mb-3">Unsere Philosophie</h3>
|
||||
<p class="text-lg text-primary-stone">Mehr als nur Bauen – wir gestalten Lebensräume und funktionale Strukturen.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
|
||||
<!-- Wert 1 -->
|
||||
<div class="text-center p-8 bg-white shadow-lg rounded-lg border-t-4 border-accent-terracotta transition duration-300 hover:shadow-2xl hover:border-accent-terracotta transform hover:scale-105">
|
||||
<div class="text-6xl mb-4 text-accent-terracotta">🏛️</div>
|
||||
<h4 class="text-2xl font-serif text-dark-charcoal mb-2">Authentizität</h4>
|
||||
<p class="text-gray-600">Wir setzen auf Materialien und Formen, die eine tiefe, erdige Ehrlichkeit vermitteln. Jede Linie hat eine Geschichte.</p>
|
||||
</div>
|
||||
|
||||
<!-- Wert 2 -->
|
||||
<div class="text-center p-8 bg-white shadow-lg rounded-lg border-t-4 border-primary-stone transition duration-300 hover:shadow-2xl hover:border-primary-stone transform hover:scale-105">
|
||||
<div class="text-6xl mb-4 text-primary-stone">🌿</div>
|
||||
<h4 class="text-2xl font-serif text-dark-charcoal mb-2">Nachhaltigkeit</h4>
|
||||
<p class="text-gray-600">Energieeffizienz und die Verwendung regionaler, langlebiger Baumaterialien sind unser täglicher Standard.</p>
|
||||
</div>
|
||||
|
||||
<!-- Wert 3 -->
|
||||
<div class="text-center p-8 bg-white shadow-lg rounded-lg border-t-4 border-accent-terracotta transition duration-300 hover:shadow-2xl hover:border-accent-terracotta transform hover:scale-105">
|
||||
<div class="text-6xl mb-4 text-accent-terracotta">📐</div>
|
||||
<h4 class="text-2xl font-serif text-dark-charcoal mb-2">Klarheit</h4>
|
||||
<p class="text-gray-600">Komplexe Ideen destillieren wir auf ihre essenziellsten architektonischen Ausdrucksformen herunter.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Kontakt Section -->
|
||||
<section id="kontakt" class="py-24 bg-white">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h3 class="text-5xl font-serif text-dark-charcoal mb-3">Projekt starten</h3>
|
||||
<p class="text-xl text-primary-stone">Ihre Vision ist unsere Leinwand. Nehmen Sie Kontakt auf für ein Erstgespräch.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 p-8 sm:<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 29.60s</div>
|
||||
@@ -0,0 +1,210 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ascend Fitness: Sculpt Your Strength</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom configuration for Tailwind to enhance the aesthetic */
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'primary-dark': '#1a202c',
|
||||
'secondary-gold': '#d4af37',
|
||||
'accent-light': '#f7fafc',
|
||||
'deep-charcoal': '#2d3748',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
serif: ['Playfair Display', 'serif'],
|
||||
},
|
||||
animation: {
|
||||
'slide-in': 'slideIn 1s ease-out forwards',
|
||||
'fade-up': 'fadeInUp 1s ease-out forwards',
|
||||
},
|
||||
keyframes: {
|
||||
fadeInUp: {
|
||||
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
},
|
||||
slideIn: {
|
||||
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Playfair+Display:wght@400;700;900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-accent-light text-primary-dark antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-lg backdrop-blur-sm bg-opacity-90 border-b border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<a href="#" class="text-3xl font-extrabold text-primary-dark tracking-tight flex items-center">
|
||||
Ascend<span class="text-secondary-gold">.</span>
|
||||
</a>
|
||||
<nav class="hidden md:flex space-x-8 font-medium text-gray-600">
|
||||
<a href="#philosophy" class="hover:text-secondary-gold transition duration-300">Philosophy</a>
|
||||
<a href="#programs" class="hover:text-secondary-gold transition duration-300">Programs</a>
|
||||
<a href="#coaching" class="hover:text-secondary-gold transition duration-300">Coaching</a>
|
||||
<a href="#testimonials" class="hover:text-secondary-gold transition duration-300">Success</a>
|
||||
</nav>
|
||||
<a href="#enroll" class="bg-secondary-gold text-primary-dark px-5 py-2 rounded-full text-sm font-semibold shadow-md hover:bg-yellow-600 transition duration-300 transform hover:scale-[1.03] focus:outline-none focus:ring-4 focus:ring-secondary-gold focus:ring-opacity-50">
|
||||
Start Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-[70vh] flex items-center justify-center overflow-hidden bg-primary-dark">
|
||||
<!-- Background Image Container -->
|
||||
<div class="absolute inset-0">
|
||||
<img src="https://images.pexels.com/photos/14623671/pexels-photo-14623671.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="A shirtless muscular man lifts dumbbells at a gym in Mexico City." class="w-full h-full object-cover opacity-60">
|
||||
</div>
|
||||
|
||||
<!-- Overlay for Contrast -->
|
||||
<div class="absolute inset-0 bg-primary-dark bg-opacity-60"></div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="relative z-10 text-center max-w-4xl p-6 animate-slide-in" style="animation-delay: 0.3s;">
|
||||
<h1 class="text-6xl sm:text-7xl lg:text-8xl font-extrabold text-white leading-tight mb-4 shadow-text">
|
||||
Build The Body You<br>
|
||||
Always Wanted.
|
||||
</h1>
|
||||
<p class="text-xl sm:text-2xl text-gray-200 mb-8 font-light animate-fade-up" style="animation-delay: 0.6s;">
|
||||
Personalized coaching designed to transform potential into peak physical reality. Stop guessing, start achieving.
|
||||
</p>
|
||||
<a href="#enroll" class="inline-block bg-secondary-gold text-primary-dark text-lg font-bold py-3 px-10 rounded-full shadow-xl hover:bg-yellow-400 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-secondary-gold focus:ring-opacity-75 animate-fade-up" style="animation-delay: 1s;">
|
||||
Claim Your Transformation
|
||||
</a>
|
||||
<p class="mt-4 text-sm text-gray-400">Limited spots available this month.</p>
|
||||
|
||||
<!-- Attribution -->
|
||||
<div class="mt-12 pt-4 border-t border-gray-700 text-sm text-gray-400">
|
||||
Photo by Miguel González on Pexels. Link to photos: https://www.pexels.com/photo/a-man-working-out-14623671/.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Philosophy Section -->
|
||||
<section id="philosophy" class="py-20 bg-white border-t border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-5xl font-bold text-center mb-16 text-deep-charcoal animate-fade-up">
|
||||
Our Approach: Precision Over Pushing
|
||||
</h2>
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Pillar 1 -->
|
||||
<div class="bg-accent-light p-8 rounded-xl shadow-lg hover:shadow-2xl transition duration-500 transform hover:-translate-y-2 border-t-4 border-secondary-gold group animate-slide-in" style="animation-delay: 0.1s;">
|
||||
<div class="text-center">
|
||||
<div class="text-5xl text-secondary-gold mb-4">🎯</div>
|
||||
<h3 class="text-2xl font-bold mb-3 text-deep-charcoal">Personalization</h3>
|
||||
<p class="text-gray-600">We don't use cookie-cutter plans. Every workout, every meal, is tailored precisely to your genetics, goals, and lifestyle. Maximize results, minimize burnout.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pillar 2 -->
|
||||
<div class="bg-accent-light p-8 rounded-xl shadow-lg hover:shadow-2xl transition duration-500 transform hover:-translate-y-2 border-t-4 border-secondary-gold group animate-slide-in" style="animation-delay: 0.3s;">
|
||||
<div class="text-center">
|
||||
<div class="text-5xl text-secondary-gold mb-4">📈</div>
|
||||
<h3 class="text-2xl font-bold mb-3 text-deep-charcoal">Progressive Overload</h3>
|
||||
<p class="text-gray-600">We focus on smart progression. Consistent, measurable effort ensures continuous strength gains and sustainable body composition changes over time.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pillar 3 -->
|
||||
<div class="bg-accent-light p-8 rounded-xl shadow-lg hover:shadow-2xl transition duration-500 transform hover:-translate-y-2 border-t-4 border-secondary-gold group animate-slide-in" style="animation-delay: 0.5s;">
|
||||
<div class="text-center">
|
||||
<div class="text-5xl text-secondary-gold mb-4">❤️</div>
|
||||
<h3 class="text-2xl font-bold mb-3 text-deep-charcoal">Sustainable Health</h3>
|
||||
<p class="text-gray-600">Fitness is a marathon, not a sprint. We integrate nutrition and recovery strategies so you build strength without sacrificing your well-being.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Programs Section -->
|
||||
<section id="programs" class="py-20 bg-primary-dark">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-5xl font-bold text-center mb-16 text-white animate-fade-up">
|
||||
Find Your Path
|
||||
</h2>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- Program Card 1 -->
|
||||
<div class="bg-deep-charcoal p-8 rounded-2xl shadow-2xl border-b-8 border-secondary-gold transform hover:scale-[1.02] transition duration-500 group animate-slide-in" style="animation-delay: 0.2s;">
|
||||
<h3 class="text-4xl font-extrabold text-secondary-gold mb-4">Strength Architect</h3>
|
||||
<p class="text-gray-300 mb-6 text-lg">For those focused on maximal strength gains and muscle hypertrophy. Intensive training protocols and high-protein nutrition planning.</p>
|
||||
<ul class="space-y-3 text-gray-300 mb-8">
|
||||
<li class="flex items-center"><span class="text-secondary-gold mr-2 text-xl">✓</span> 4x Weekly Strength Sessions</li>
|
||||
<li class="flex items-center"><span class="text-secondary-gold mr-2 text-xl">✓</span> Advanced Macronutrient Tracking</li>
|
||||
<li class="flex items-center"><span class="text-secondary-gold mr-2 text-xl">✓</span> Bi-weekly Form Feedback</li>
|
||||
</ul>
|
||||
<a href="#enroll" class="inline-block bg-secondary-gold text-primary-dark font-bold py-3 px-8 rounded-lg text-sm uppercase tracking-wider hover:bg-yellow-400 transition duration-300">
|
||||
Enroll in Strength
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Program Card 2 -->
|
||||
<div class="bg-deep-charcoal p-8 rounded-2xl shadow-2xl border-b-8 border-secondary-gold transform hover:scale-[1.02] transition duration-500 group animate-slide-in" style="animation-delay: 0.4s;">
|
||||
<h3 class="text-4xl font-extrabold text-secondary-gold mb-4">Sculpt & Tone</h3>
|
||||
<p class="text-gray-300 mb-6 text-lg">Designed for those seeking body recomposition, fat loss, and aesthetic definition. Focus on metabolic conditioning and body sculpting.</p>
|
||||
<ul class="space-y-3 text-gray-300 mb-8">
|
||||
<li class="flex items-center"><span class="text-secondary-gold mr-2 text-xl">✓</span> High-Intensity Metabolic Workouts</li>
|
||||
<li class="flex items-center"><span class="text-secondary-gold mr-2 text-xl">✓</span> Customized Calorie Deficits</li>
|
||||
<li class="flex items-center"><span class="text-secondary-gold mr-2 text-xl">✓</span> Mobility and Recovery Focus</li>
|
||||
</ul>
|
||||
<a href="#enroll" class="inline-block bg-secondary-gold text-primary-dark font-bold py-3 px-8 rounded-lg text-sm uppercase tracking-wider hover:bg-yellow-400 transition duration-300">
|
||||
Enroll in Sculpt
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section id="testimonials" class="py-20 bg-accent-light">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-5xl font-bold text-center mb-16 text-deep-charcoal animate-fade-up">
|
||||
Real Results. Real People.
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Testimonial 1 -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-xl border-l-8 border-secondary-gold animate-fade-up" style="animation-delay: 0.1s;">
|
||||
<p class="italic text-lg text-gray-700 mb-4">"Ascend completely changed my perspective on fitness. The program was challenging but perfectly structured. I gained strength and confidence in just three months!"</p>
|
||||
<div class="font-semibold text-primary-dark">— Alex R.</div>
|
||||
<div class="text-sm text-gray-500">Strength Architect Client</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 2 -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-xl border-l-8 border-secondary-gold animate-fade-up" style="animation-delay: 0.3s;">
|
||||
<p class="italic text-lg text-gray-700 mb-4">"The attention to detail in the nutrition plan is unmatched. I finally understand how to fuel my body correctly. Highly recommended for anyone serious about lasting change."</p>
|
||||
<div class="font-semibold text-primary-dark">— Sarah K.</div>
|
||||
<div class="text-sm text-gray-500">Sculpt & Tone Client</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 3 -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-xl border-l-8 border-secondary-gold animate-fade-up" style="animation-delay: 0.5s;">
|
||||
<p class="italic text-lg text-gray-700 mb-4">"I felt overwhelmed before Ascend, but the coaching made the process seamless. It’s about consistency, and this coaching provided the exact roadmap I needed."</p>
|
||||
<div class="font-semibold text-primary-dark">— Mark B.</div>
|
||||
<div class="text-sm text-gray-500">Strength Architect Client</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call to Action / Enrollment -->
|
||||
<section id="enroll" class="py-24 bg-deep-charcoal">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-6xl font-extrabold text-white mb-6 animate-slide-in" style="animation-delay: 0.1s;">
|
||||
Ready To Ascend?
|
||||
</h2><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 19.11s</div>
|
||||
@@ -0,0 +1,200 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Zum Herzen des Tierheims | Adoptionsportal</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom configuration for Tailwind */
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'primary-green': '#38A169', /* Emerald Green */
|
||||
'secondary-gold': '#D97706', /* Amber */
|
||||
'background-light': '#F7FAF9',
|
||||
'text-dark': '#1F2937',
|
||||
},
|
||||
fontFamily: {
|
||||
serif: ['Playfair Display', 'serif'],
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom styles for visual impact */
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg, #f0d9c8 0%, #e0b8a5 100%);
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.pulse-shadow {
|
||||
box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.7);
|
||||
animation: pulse-shadow 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-shadow {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.4);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(56, 161, 105, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(56, 161, 105, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Typography refinement */
|
||||
.display-heading {
|
||||
font-family: 'Playfair Display', serif;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light text-text-dark font-sans antialiased">
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<header class="bg-white shadow-lg sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<!-- Logo/Brand -->
|
||||
<div class="flex-shrink-0">
|
||||
<h1 class="text-3xl font-extrabold text-primary-green display-heading">
|
||||
Tierheim <span class="text-secondary-gold">Herz</span>
|
||||
</h1>
|
||||
</div>
|
||||
<!-- Navigation Links -->
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#adoptions" class="text-lg font-medium hover:text-primary-green transition duration-150 px-2 py-1 border-b-2 border-transparent hover:border-primary-green">
|
||||
Adoptions
|
||||
</a>
|
||||
<a href="#sucht" class="text-lg font-medium hover:text-primary-green transition duration-150 px-2 py-1 border-b-2 border-transparent hover:border-primary-green">
|
||||
Suchen & Filter
|
||||
</a>
|
||||
<a href="#hilfe" class="text-lg font-medium hover:text-primary-green transition duration-150 px-2 py-1 border-b-2 border-transparent hover:border-primary-green">
|
||||
Hilfe & Spenden
|
||||
</a>
|
||||
<a href="#kontakt" class="text-lg font-medium bg-primary-green text-white px-4 py-2 rounded-lg shadow-md hover:bg-green-600 transition duration-300 focus:outline-none focus:ring-4 focus:ring-primary-green/50">
|
||||
Kontaktieren
|
||||
</a>
|
||||
</nav>
|
||||
<!-- Mobile Menu Button (Hidden on Desktop) -->
|
||||
<div class="md:hidden">
|
||||
<button id="mobile-menu-button" class="text-text-dark focus:outline-none p-2 rounded-md hover:bg-gray-100 transition duration-150">
|
||||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Menu Dropdown -->
|
||||
<div id="mobile-menu" class="md:hidden hidden">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<a href="#adoptions" class="block px-3 py-2 rounded-md text-base font-medium text-text-dark hover:bg-primary-green/10">Adoptions</a>
|
||||
<a href="#sucht" class="block px-3 py-2 rounded-md text-base font-medium text-text-dark hover:bg-primary-green/10">Suchen & Filter</a>
|
||||
<a href="#hilfe" class="block px-3 py-2 rounded-md text-base font-medium text-text-dark hover:bg-primary-green/10">Hilfe & Spenden</a>
|
||||
<a href="#kontakt" class="block w-full text-center mt-2 px-3 py-2 rounded-lg text-base font-medium bg-secondary-gold text-white hover:bg-amber-700">Kontaktieren</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-gradient pt-16 pb-24 text-center shadow-xl">
|
||||
<div class="max-w-4xl mx-auto px-4">
|
||||
<h2 class="text-5xl sm:text-6xl font-extrabold text-text-dark mb-4 display-heading">
|
||||
Ein neues Zuhause wartet auf Sie.
|
||||
</h2>
|
||||
<p class="text-xl sm:text-2xl mb-10 text-gray-700 font-medium">
|
||||
Wir bieten liebevolle, gesunde Tiere, die nur darauf warten, Teil Ihrer Familie zu werden. Finden Sie Ihren perfekten Begleiter.
|
||||
</p>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<a href="#sucht" class="bg-secondary-gold text-white font-bold py-4 px-8 text-lg rounded-full shadow-2xl hover:bg-amber-700 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300">
|
||||
Tier suchen
|
||||
</a>
|
||||
<a href="#spenden" class="bg-white border-2 border-text-dark text-text-dark font-bold py-4 px-8 text-lg rounded-full shadow-lg hover:bg-gray-50 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-text-dark/30">
|
||||
Spenden helfen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Animals Section -->
|
||||
<section id="sucht" class="py-20 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="text-4xl font-bold text-text-dark mb-3 display-heading">
|
||||
Unsere aktuellen Freunde
|
||||
</h3>
|
||||
<p class="text-xl text-gray-600">
|
||||
Entdecken Sie Tiere, die Liebe und ein neues Leben suchen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Animal Grid -->
|
||||
<div id="animal-list" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
|
||||
<!-- Card 1: Hund -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover border-t-4 border-primary-green cursor-pointer" tabindex="0" role="button">
|
||||
<div class="h-48 bg-gray-200 flex items-center justify-center relative overflow-hidden">
|
||||
<!-- Placeholder Image -->
|
||||
<img src="https://images.unsplash.com/photo-1542837046-3e1e19c85c6d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTg4MnwwfDF8c2VhcmNofDEyfHxob3VuZHxlbnwwfHx8fDE1MTc4MzA1NDd8MA&ixlib=rb-4.0.3&q=80&w=400"
|
||||
class="w-full h-full object-cover object-center transform transition duration-500 hover:scale-110" alt="Hund Bello, Labrador-Mix">
|
||||
<span class="absolute top-3 right-3 bg-red-600 text-white text-xs font-bold p-1 rounded-full shadow-md">Adoptionsgebeten</span>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<h4 class="text-2xl font-serif font-bold mb-1">Bello</h4>
|
||||
<p class="text-sm text-gray-500 mb-3">Hund | Labrador-Mix</p>
|
||||
<p class="text-gray-600 mb-3 text-sm">Bello ist ein verspielter Freund, der nach einem aktiven Zuhause sucht. Er liebt lange Spaziergänge!</p>
|
||||
<button class="w-full bg-primary-green text-white py-3 rounded-lg font-semibold hover:bg-green-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-primary-green focus:ring-offset-2">
|
||||
Details anzeigen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2: Katze -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover border-t-4 border-secondary-gold cursor-pointer" tabindex="0" role="button">
|
||||
<div class="h-48 bg-gray-200 flex items-center justify-center relative overflow-hidden">
|
||||
<!-- Placeholder Image -->
|
||||
<img src="https://images.unsplash.com/photo-1543556521-509e5a4d4b82?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTg4MnwwfDF8c2VhcmNofDEyfHxrYXR6ZSUyMG1pZGV8ZW58MHx8fHwxNTE3ODMwNTQ3fDA&ixlib=rb-4.0.3&q=80&w=400"
|
||||
class="w-full h-full object-cover object-center transform transition duration-500 hover:scale-110" alt="Katze Luna, Maine Coon">
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<h4 class="text-2xl font-serif font-bold mb-1">Luna</h4>
|
||||
<p class="text-sm text-gray-500 mb-3">Katze | Maine Coon</p>
|
||||
<p class="text-gray-600 mb-3 text-sm">Luna ist eine sanfte und elegante Dame. Sie sucht eine ruhige Umgebung, in der sie sich geborgen fühlen kann.</p>
|
||||
<button class="w-full bg-secondary-gold text-white py-3 rounded-lg font-semibold hover:bg-amber-800 transition duration-200 focus:outline-none focus:ring-2 focus:ring-secondary-gold focus:ring-offset-2">
|
||||
Details anzeigen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3: Hund -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover border-t-4 border-primary-green cursor-pointer" tabindex="0" role="button">
|
||||
<div class="h-48 bg-gray-200 flex items-center justify-center relative overflow-hidden">
|
||||
<!-- Placeholder Image -->
|
||||
<img src="https://images.unsplash.com/photo-1582738614608-062167d4543e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTg4MnwwfDF8c2VhcmNofDEyfHxob3VuZHxlbnwwfHx8fDE1MTc4MzA1NTZ8MA&ixlib=rb-4.0.3&q=80&w=400"
|
||||
class="w-full h-full object-cover object-center transform transition duration-500 hover:scale-110" alt="Hund Max, Mischling">
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<h4 class="text-2xl font-serif font-bold mb-1">Max</h4>
|
||||
<p class="text-sm text-gray-500 mb-3">Hund | Mischling</p>
|
||||
<p class="text-gray-600 mb-3 text-sm">Max ist ein aufgeregter und geselliger Hund. Er ist perfekt für Familien, die viel draußen aktiv sind.</p>
|
||||
<button class="w-full bg-primary-green text-white py-3 rounded-lg font-semibold hover:bg-green-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-primary-green focus:ring-offset-2">
|
||||
Details anzeigen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 4: Katze -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover border-t-4 border-secondary-gold cursor-pointer" tabindex="0" role="button">
|
||||
<div class="h-48 bg-gray-200 flex items-center justify-center relative overflow-hidden">
|
||||
<!-- Placeholder Image -->
|
||||
<img src="https://images.unsplash.com/photo-1585623298806-03a929888c0e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTg4MnwwfDF8c2VhcmNofDEyfHxrYXRzJTIwZGV8ZW58MHx8fHwxNTE3OD<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 29.92s</div>
|
||||
@@ -0,0 +1,194 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Hearthstone Bistro - Authentic Comfort Cooking</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
:root {
|
||||
--primary-red: #A52A2A; /* Deep earthy red/brown */
|
||||
--secondary-gold: #D4AF37; /* Muted gold for accents */
|
||||
--dark-charcoal: #2C2C2C;
|
||||
}
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background-color: #F7F3F0;
|
||||
color: var(--dark-charcoal);
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: var(--primary-red);
|
||||
transition: background-color 0.3s, transform 0.1s;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #8B0000;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.hero-card {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1552566267-238c7d627068?crop=entropy&cs=tinysrc&fit=max&fm=jpg&ixid=M301NTUyOXwwfDF8c2VhcmNofDEyfHxmb3J0Zm9yZCUyMGJhbmRyYW50fGVufDB8fHx8MTcxNzgyNTA1OXww&ixlib=rb-4.0.3&ixwdp=q2&format=jpg&natural=true');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.menu-item-card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border-bottom: 3px solid var(--secondary-gold);
|
||||
}
|
||||
.menu-item-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.focus-ring {
|
||||
outline: 4px solid var(--secondary-gold);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="bg-white shadow-lg sticky top-0 z-10">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<!-- Logo/Brand -->
|
||||
<div class="text-3xl font-extrabold tracking-wider text-[var(--primary-red)]">
|
||||
The Hearthstone Bistro
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#menu" class="text-lg text-gray-700 hover:text-[var(--primary-red)] transition duration-150 p-2">Menu</a>
|
||||
<a href="#about" class="text-lg text-gray-700 hover:text-[var(--primary-red)] transition duration-150 p-2">Our Story</a>
|
||||
<a href="#gallery" class="text-lg text-gray-700 hover:text-[var(--primary-red)] transition duration-150 p-2">Gallery</a>
|
||||
<a href="#contact" class="text-lg text-gray-700 hover:text-[var(--primary-red)] transition duration-150 p-2">Reservations</a>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<div class="md:hidden">
|
||||
<button id="menu-button" class="text-gray-700 hover:text-[var(--primary-red)] p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-600">
|
||||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Menu Drawer (Hidden by default) -->
|
||||
<div id="mobile-menu" class="md:hidden hidden bg-white shadow-xl border-t">
|
||||
<div class="px-4 pt-2 pb-3 space-y-1">
|
||||
<a href="#menu" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 border-l-4 border-transparent hover:border-[var(--primary-red)] focus:border-[var(--primary-red)]">Menu</a>
|
||||
<a href="#about" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 border-l-4 border-transparent hover:border-[var(--primary-red)] focus:border-[var(--primary-red)]">Our Story</a>
|
||||
<a href="#gallery" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 border-l-4 border-transparent hover:border-[var(--primary-red)] focus:border-[var(--primary-red)]">Gallery</a>
|
||||
<a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 border-l-4 border-transparent hover:border-[var(--primary-red)] focus:border-[var(--primary-red)]">Reservations</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<main class="hero-card">
|
||||
<div class="text-center text-white p-4 max-w-4xl mx-auto">
|
||||
<h1 class="text-6xl md:text-8xl font-extrabold tracking-tight mb-4 animate-fadeInUp">
|
||||
Taste the Warmth.
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl mb-8 font-serif italic opacity-90">
|
||||
Where tradition meets the plate. Rustic Italian-inspired fare built on generations of genuine, heartfelt cooking.
|
||||
</p>
|
||||
<a href="#menu" class="inline-block px-10 py-4 text-xl font-bold text-white bg-[var(--primary-red)] rounded-lg shadow-xl focus:outline-none focus:ring-4 focus:ring-yellow-300 transform hover:scale-[1.02] transition duration-300">
|
||||
View Today's Menu
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" 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="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 class="text-5xl font-bold mb-6 text-[var(--primary-red)] border-l-8 border-[var(--secondary-gold)] pl-3">
|
||||
Our Story: A Return to Roots
|
||||
</h2>
|
||||
<p class="text-lg mb-6 leading-relaxed text-gray-600">
|
||||
Hearthstone was born from a simple desire: to bring back the taste of home cooking. We believe that the best meals are made with patience, high-quality ingredients, and a whole lot of love. Our recipes are inspired by slow-cooked traditions, using local produce whenever possible.
|
||||
</p>
|
||||
<p class="text-lg leading-relaxed text-gray-600 mb-8 border-l-4 border-gray-200 pl-4 italic">
|
||||
"More than just a meal, we offer a gathering place—a place to linger, to connect, and to savor the moment."
|
||||
</p>
|
||||
<a href="#contact" class="text-xl font-semibold text-[var(--primary-red)] hover:underline focus:text-black focus:ring-2 focus:ring-[var(--primary-red)] transition duration-150">
|
||||
Read our full philosophy →
|
||||
</a>
|
||||
</div>
|
||||
<!-- Image Placeholder - Rustic Kitchen Scene -->
|
||||
<div class="rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.01] transition duration-500">
|
||||
<img src="https://images.unsplash.com/photo-1555921400-02c35b9319c4?crop=entropy&cs=tinysrc&fit=max&fm=jpg&ixid=M301NTUyOXwwfDF8c2VhcmNofDEyfHxmb3J0Zm9yZCUyMG5ldyUyMG1ldmVufGVufDB8fHx8MTcxNzgyNTY2NHww&ixlib=rb-4.0.3&ixwdp=q2&format=jpg&natural=true"
|
||||
alt="Rustic kitchen scene with simmering pots and wooden utensils"
|
||||
class="w-full h-96 object-cover transition duration-500 ease-in-out">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Menu Section -->
|
||||
<section id="menu" class="py-20 md:py-32 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-6xl font-serif font-extrabold text-[var(--primary-red)] mb-3">
|
||||
Our Culinary Offerings
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600">
|
||||
Crafted with tradition, seasoned with passion. Explore our seasonal favorites.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Menu Item 1: Signature Pasta -->
|
||||
<div class="menu-item-card bg-white p-8 rounded-xl shadow-lg border-t-4 border-[var(--primary-red)] focus:outline-none focus:ring-4 focus:ring-opacity-50 focus:ring-[var(--primary-red)]" tabindex="0">
|
||||
<h3 class="text-3xl font-bold text-[var(--primary-red)] mb-3">Slow-Braised Lamb Ragu</h3>
|
||||
<p class="text-gray-600 mb-4 italic">Our signature slow-simmered ragu, rich with San Marzano tomatoes and tender chunks of lamb.</p>
|
||||
<div class="flex justify-between items-center pt-2 border-t border-gray-200">
|
||||
<span class="text-2xl font-bold text-gray-800">Pasta Fresca</span>
|
||||
<span class="text-2xl font-bold text-[var(--primary-red)]">$24.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu Item 2: Rustic Main -->
|
||||
<div class="menu-item-card bg-white p-8 rounded-xl shadow-lg border-t-4 border-[var(--primary-red)] focus:outline-none focus:ring-4 focus:ring-opacity-50 focus:ring-[var(--primary-red)]" tabindex="0">
|
||||
<h3 class="text-3xl font-bold text-[var(--primary-red)] mb-3">Wood-Fired Herb Chicken</h3>
|
||||
<p class="text-gray-600 mb-4 italic">Chicken roasted over mesquite wood, paired with roasted root vegetables and fresh herbs.</p>
|
||||
<div class="flex justify-between items-center pt-2 border-t border-gray-200">
|
||||
<span class="text-2xl font-bold text-gray-800">Served with Polenta</span>
|
||||
<span class="text-2xl font-bold text-[var(--primary-red)]">$22.50</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu Item 3: Comfort Dish -->
|
||||
<div class="menu-item-card bg-white p-8 rounded-xl shadow-lg border-t-4 border-[var(--primary-red)] focus:outline-none focus:ring-4 focus:ring-opacity-50 focus:ring-[var(--primary-red)]" tabindex="0">
|
||||
<h3 class="text-3xl font-bold text-[var(--primary-red)] mb-3">Rustic Vegetable Lasagna</h3>
|
||||
<p class="text-gray-600 mb-4 italic">Layers of seasonal vegetables, creamy ricotta, and our house-made tomato blend.</p>
|
||||
<div class="flex justify-between items-center pt-2 border-t border-gray-200">
|
||||
<span class="text-2xl font-bold text-gray-800">Vegetarian Main</span>
|
||||
<span class="text-2xl font-bold text-[var(--primary-red)]">$21.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call to Action Footer -->
|
||||
<div class="text-center mt-16 p-8 bg-white rounded-xl shadow-inner border-l-8 border-[var(--secondary-gold)]">
|
||||
<p class="text-2xl mb-4 font-serif">Curious about wine pairings or daily specials?</p>
|
||||
<a href="#contact" class="inline-flex items-center px-8 py-3 text-lg font-semibold text-white bg-[var(--secondary-gold)] rounded-full hover:bg-yellow-700 focus:outline-none focus:ring-4 focus:ring-yellow-500 transition duration-200 shadow-md">
|
||||
Book Your Table Now
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gallery Section -->
|
||||
<section id="gallery" class="py-20 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">
|
||||
<h2 class="text-5xl font-serif font-bold text-[var(--primary-red)]">
|
||||
A Glimpse Inside
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 mt-2">The ambiance, the ingredients, the moments.</p>
|
||||
</div><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 29.49s</div>
|
||||
@@ -0,0 +1,100 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Paws & Purpose Adoption Center</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
.custom-focus { outline: 2px solid #3B82F6; outline-offset: 2px; }
|
||||
.hero-image { max-height: 600px; object-fit: cover; transition: transform 0.3s ease; }
|
||||
.hero-image:hover { transform: scale(1.05); }
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
.fade-in { animation: fadeIn 1s ease-in-out; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white text-gray-800 font-sans">
|
||||
<header class="bg-gray-100 shadow-md">
|
||||
<div class="container mx-auto px-4 py-10 flex flex-col sm:flex-row items-center">
|
||||
<div class="text-3xl font-bold text-indigo-600">Paws & Purpose</div>
|
||||
<div class="ml-8 text-gray-600">
|
||||
Helping pets find forever homes since 2010
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container mx-auto px-4 py-10">
|
||||
<section class="hero py-20">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<img
|
||||
src="https://images.pexels.com/photos/16465597/pexels-photo-16465597.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200"
|
||||
alt="A cute dog behind a wire fence in a shelter enclosure, looking towards the camera."
|
||||
class="hero-image fade-in mt-10"
|
||||
>
|
||||
<div class="mt-6 text-center">
|
||||
<h2 class="text-4xl font-bold text-gray-900">Find Your Forever Friend</h2>
|
||||
<p class="mt-4 text-lg text-gray-700">Compassionate care meets lifelong companionship</p>
|
||||
<a href="#about" class="btn bg-indigo-600 text-white px-6 py-3 rounded shadow hover:shadow-lg focus:outline-none custom-focus">Explore Adoption Process</a>
|
||||
</div>
|
||||
<div class="mt-8 text-center text-gray-600">
|
||||
Photo by Mia X on Pexels
|
||||
<a href="https://www.pexels.com/photo/cute-dog-standing-behind-fence-16465597/" class="ml-2 text-blue-500 underline hover:no-underline">View Source</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="py-20 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<h3 class="text-3xl font-bold text-gray-900 mb-8">Our Mission</h3>
|
||||
<p class="text-lg text-gray-700">
|
||||
At Paws & Purpose, we believe every animal deserves a loving home. With over 200 pets adopted monthly, we focus on matching pets with families based on lifestyle, preferences, and behavior assessments. Our center partners with local rescues and provides free veterinary care for the first month.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-20 bg-white">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<h3 class="text-3xl font-bold text-indigo-600 mb-8">Why Choose Us?</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-10">
|
||||
<div class="p-6 border-gray-100 rounded-lg shadow">
|
||||
<h4 class="text-2xl font-bold text-indigo-600">Personalized Matching</h4>
|
||||
<p class="text-lg">Our counselors spend 1+ hours with each adopter to ensure compatibility</p>
|
||||
</div>
|
||||
<div class="p-6 border-gray-100 rounded-lg shadow">
|
||||
<h4 class="text-2xl font-bold text-indigo-600">No Adoption Fees</h4>
|
||||
<p class="text-lg">We cover all necessary vaccinations and microchipping at no cost</p>
|
||||
</div>
|
||||
<div class="p-6 border-gray-100 rounded-lg shadow">
|
||||
<h4 class="text-2xl font-bold text-indigo-600">Lifelong Support</h4>
|
||||
<p class="text-lg">Post-adoption check-ins and access to a community forum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="py-20 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<h3 class="text-3xl font-bold text-gray-900 mb-8">Ready to Adopt?</h3>
|
||||
<form class="mt-8 max-w-md mx-auto">
|
||||
<div class="mb-4">
|
||||
<input type="text" name="name" placeholder="Your Name" class="w-full px-4 py-3 border rounded focus:outline-none custom-focus">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<input type="email" name="email" placeholder="Your Email" class="w-full px-4 py-3 border rounded focus:outline-none custom-focus">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<textarea name="message" placeholder="Your Message" rows="5" class="w-full px-4 py-3 border rounded focus:outline-none custom-focus"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn bg-indigo-600 text-white px-6 py-3 rounded shadow hover:shadow-lg focus:outline-none custom-focus">Send Inquiry</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="bg-gray-900 text-white py-8">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<p>© 2023 Paws & Purpose Adoption Center. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<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 49.20s</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,230 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kraftwerk | Dein Weg zur körperlichen Stärke</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: #B91C1C; /* Deep Red - Strong, Energetic */
|
||||
--color-secondary: #475569; /* Slate Gray - Grounded, Professional */
|
||||
--color-background: #F9FAFB; /* Light Gray */
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #991b1b; /* Darker Red */
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.card-hover {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 15px 30px rgba(185, 28, 28, 0.2);
|
||||
}
|
||||
/* Custom Gradient for Hero */
|
||||
.hero-bg {
|
||||
background-image: linear-gradient(to bottom, #FEF2F2, #E5E7EB);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-gray-800 antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-lg">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-16">
|
||||
<!-- Logo / Brand Name -->
|
||||
<div class="flex-shrink-0">
|
||||
<a href="#" class="text-3xl font-extrabold tracking-tight" style="color: var(--color-primary);">
|
||||
Kraftwerk
|
||||
</a>
|
||||
</div>
|
||||
<!-- Desktop Menu -->
|
||||
<div class="hidden md:flex space-x-8">
|
||||
<a href="#methodik" class="text-lg font-medium hover:text-red-700 transition duration-150 p-2">Methode</a>
|
||||
<a href="#leistungen" class="text-lg font-medium hover:text-red-700 transition duration-150 p-2">Angebote</a>
|
||||
<a href="#erfolge" class="text-lg font-medium hover:text-red-700 transition duration-150 p-2">Erfolge</a>
|
||||
<a href="#kontakt" class="text-lg font-medium hover:text-red-700 transition duration-150 p-2">Kontakt</a>
|
||||
</div>
|
||||
<!-- CTA Button (Desktop) -->
|
||||
<div class="hidden md:block">
|
||||
<a href="#kontakt" class="btn-primary text-white font-semibold py-2 px-4 rounded-lg shadow-md">
|
||||
Jetzt Starten
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Mobile Menu (Hidden by default, controlled by JS) -->
|
||||
<div id="mobile-menu" class="md:hidden bg-white shadow-md border-t hidden">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<a href="#methodik" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100">Methode</a>
|
||||
<a href="#leistungen" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100">Angebote</a>
|
||||
<a href="#erfolge" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100">Erfolge</a>
|
||||
<a href="#kontakt" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100">Kontakt</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 1. Hero Section -->
|
||||
<section class="hero-bg pt-16 pb-20 border-b" style="background-image: linear-gradient(to bottom, #FEF2F2, #E5E7EB);">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h1 class="text-6xl sm:text-7xl font-extrabold mb-4 leading-tight tracking-tight">
|
||||
Baut Deine Kraft. <span class="block text-red-700 mt-2">Definiere Deine Stärke.</span>
|
||||
</h1>
|
||||
<p class="text-xl sm:text-2xl text-gray-600 mb-10 max-w-3xl mx-auto font-medium">
|
||||
Kraftwerk ist mehr als Training. Es ist die systematische Transformation deines Körpers und deines Geistes durch Coaching, das messbare Ergebnisse liefert.
|
||||
</p>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<a href="#kontakt" class="btn-primary text-white text-xl font-bold py-3 px-8 rounded-xl shadow-xl hover:shadow-2xl">
|
||||
Kostenloses Erstgespräch
|
||||
</a>
|
||||
<a href="#leistungen" class="bg-white border-2 border-gray-300 text-gray-800 text-xl font-semibold py-3 px-8 rounded-xl shadow-md hover:bg-gray-50 transition duration-300">
|
||||
Alle Angebote Sehen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. Value Proposition / Methodik Section -->
|
||||
<section id="methodik" class="py-20 sm:py-28">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-sm uppercase tracking-widest text-red-600 font-semibold mb-2">DIE STRUKTUR</h2>
|
||||
<p class="text-5xl sm:text-6xl font-extrabold text-gray-900">
|
||||
Die Kraftwerk-Methode
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Card 1 -->
|
||||
<div class="card-hover bg-white p-8 rounded-2xl shadow-lg border-t-4 border-red-600 transition duration-300">
|
||||
<div class="text-5xl mb-4 text-red-600">⚙️</div>
|
||||
<h3 class="text-2xl font-bold mb-3 text-gray-900">Analyse & Diagnose</h3>
|
||||
<p class="text-gray-600">
|
||||
Wir beginnen nicht mit dem Training, sondern mit der tiefgehenden Analyse deiner aktuellen Lebenssituation, deiner Ziele und deiner körperlichen Ausgangsbasis. Keine leeren Versprechen – nur datengestützte Planung.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="card-hover bg-white p-8 rounded-2xl shadow-lg border-t-4 border-red-600 transition duration-300">
|
||||
<div class="text-5xl mb-4 text-red-600">🎯</div>
|
||||
<h3 class="text-2xl font-bold mb-3 text-gray-900">Gezieltes Programmieren</h3>
|
||||
<p class="text-gray-600">
|
||||
Ob Hypertrophie, Kraftsteigerung oder Stoffwechseloptimierung – dein Programm wird individuell angepasst und kontinuierlich an deine Fortschritte angepasst, nicht standardisiert.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="card-hover bg-white p-8 rounded-2xl shadow-lg border-t-4 border-red-600 transition duration-300">
|
||||
<div class="text-5xl mb-4 text-red-600">🚀</div>
|
||||
<h3 class="text-2xl font-bold mb-3 text-gray-900">Nachhaltige Umsetzung</h3>
|
||||
<p class="text-gray-600">
|
||||
Training allein reicht nicht. Wir integrieren Ernährung, Regeneration und mentale Haltung, um langfristige, tiefgreifende und gesunde Veränderungen zu gewährleisten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. Services/Leistungen Section -->
|
||||
<section id="leistungen" class="bg-gray-50 py-20 sm:py-28">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-sm uppercase tracking-widest text-red-600 font-semibold mb-2">UNSERE ANBIETE</h2>
|
||||
<p class="text-5xl sm:text-6xl font-extrabold text-gray-900">
|
||||
Wähle deinen Weg zur Stärke
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
|
||||
<!-- Service Card 1: Intensiv Coaching -->
|
||||
<div class="lg:col-span-2 bg-white p-10 rounded-3xl shadow-2xl border-b-8 border-red-600 card-hover">
|
||||
<h3 class="text-4xl font-bold text-gray-900 mb-4 leading-snug">
|
||||
Premium-Coaching (1:1)
|
||||
</h3>
|
||||
<p class="text-lg text-gray-600 mb-6 border-l-4 border-gray-300 pl-3 italic">
|
||||
Intensives, persönliches Training, Ernährungsberatung und mentale Stärkung in einem maßgeschneiderten Programm.
|
||||
</p>
|
||||
<ul class="space-y-3 text-gray-700 mb-8">
|
||||
<li class="flex items-center"><span class="text-red-600 mr-2 font-extrabold">✓</span> Individuelle Trainingspläne</li>
|
||||
<li class="flex items-center"><span class="text-red-600 mr-2 font-extrabold">✓</span> Ernährungsberatung (Mikronährstoff-Fokus)</li>
|
||||
<li class="flex items-center"><span class="text-red-600 mr-2 font-extrabold">✓</span> Laufende Performance-Analyse</li>
|
||||
<li class="flex items-center"><span class="text-red-600 mr-2 font-extrabold">✓</span> Maximale Skalierbarkeit deiner Ziele</li>
|
||||
</ul>
|
||||
<p class="text-xl font-bold text-red-600 mb-6">Ab €199 / Monat</p>
|
||||
<a href="#kontakt" class="btn-primary text-white text-lg font-semibold py-3 px-6 rounded-xl shadow-lg transition duration-300">
|
||||
Programm starten
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Service Card 2: Community/Digital -->
|
||||
<div class="bg-white p-10 rounded-3xl shadow-lg border-t-4 border-gray-400 lg:col-span-1 card-hover">
|
||||
<h3 class="text-3xl font-bold mb-3 text-gray-900">
|
||||
Stärke Community (Digital)
|
||||
</h3>
|
||||
<p class="text-gray-600 mb-6">
|
||||
Für alle, die Selbstdisziplin suchen. Zugriff auf Video-Bibliotheken, Trainingspläne und die Community-Unterstützung.
|
||||
</p>
|
||||
<div class="flex items-center mb-6">
|
||||
<span class="text-4xl text-red-600 mr-3">👥</span>
|
||||
<p class="text-lg font-semibold">Gemeinschaftlicher Fortschritt</p>
|
||||
</div>
|
||||
<p class="text-xl font-bold text-gray-600 mb-6">Ab €49 / Monat</p>
|
||||
<a href="#kontakt" class="bg-gray-200 text-gray-800 text-lg font-semibold py-3 px-6 rounded-xl shadow-md hover:bg-gray-300 transition duration-300">
|
||||
Details ansehen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. Testimonials/Erfolge Section -->
|
||||
<section id="erfolge" class="py-20 sm:py-28">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-sm uppercase tracking-widest text-red-600 font-semibold mb-2">ERFOLGE</h2>
|
||||
<p class="text-5xl sm:text-6xl font-extrabold text-gray-900">
|
||||
Echte Transformationen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Testimonial 1 -->
|
||||
<div class="bg-white p-8 rounded-2xl shadow-xl border-l-8 border-red-400 card-hover">
|
||||
<p class="text-4xl mb-4 text-gray-500">“</p>
|
||||
<p class="text-xl italic text-gray-700 mb-6">
|
||||
"Innerhalb von sechs Monaten habe ich nicht nur Muskelmasse aufgebaut, sondern auch meine mentale Disziplin revolutioniert. Kraftwerk hat mir Struktur gegeben, die ich mir selbst nicht bauen konnte."
|
||||
</p>
|
||||
<div class="font-bold text-lg text-gray-900">- Max G.</div>
|
||||
<div class="text-sm text-red-500">Coaching Klient</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 2 -->
|
||||
<div class="bg-white p-8 rounded-2xl shadow-xl border-l-8 border-red-400 card-hover">
|
||||
<p class="text-4xl mb-4 text-gray-500">“</p>
|
||||
<p class="text-xl italic text-gray-700 mb-6">
|
||||
"Ich dachte, ich wäre an meinen Grenzen. Kraftwerk hat gezeigt, dass Grenzen nur mentale Konstrukte sind. Die Coaching-Begleitung war unverzichtbar."
|
||||
</p>
|
||||
<div class="font-bold text-lg text-gray-900">- Lena S.</div>
|
||||
<div class="text-sm text-red-500">Fitness-Enthusiastin</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 3 -->
|
||||
<div class="bg-white p-8 rounded-2xl shadow-xl border-l-8 border-red-400 card-hover">
|
||||
<p class="text-4xl mb-4 text-gray-500">“</p>
|
||||
<p class="text-xl italic text-gray-700 mb-6">
|
||||
"Die Kombination aus<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 31.03s</div>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,199 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Autumn Reads: Cozy Bookstore Campaign</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom configuration for Tailwind to ensure smooth transitions */
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'book-cream': '#FAF6E6',
|
||||
'deep-maroon': '#5D4037',
|
||||
'warm-gold': '#D4AF37',
|
||||
'moss-green': '#6B8E23',
|
||||
},
|
||||
fontFamily: {
|
||||
serif: ['Playfair Display', 'serif'],
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
},
|
||||
animation: {
|
||||
fadeIn: 'fadeIn 1s ease-in-out',
|
||||
slideIn: 'slideIn 0.8s ease-out',
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
},
|
||||
slideIn: {
|
||||
'0%': { opacity: '0', transform: 'translateX(-50px)' },
|
||||
'100%': { opacity: '1', transform: 'translateX(0)' },
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-book-cream text-gray-800 font-sans antialiased">
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-md backdrop-blur-sm bg-opacity-90 border-b border-gray-200">
|
||||
<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">
|
||||
<a href="#" class="text-3xl font-serif font-bold text-deep-maroon tracking-wider hover:text-warm-gold transition duration-300">
|
||||
Autumn Pages
|
||||
</a>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#featured" class="text-gray-600 hover:text-deep-maroon font-medium transition duration-150">Featured Reads</a>
|
||||
<a href="#collections" class="text-gray-600 hover:text-deep-maroon font-medium transition duration-150">Seasonal Collections</a>
|
||||
<a href="#bestsellers" class="text-gray-600 hover:text-deep-maroon font-medium transition duration-150">Bestsellers</a>
|
||||
<a href="#join" class="bg-warm-gold text-white px-4 py-2 rounded-full hover:bg-yellow-600 transition duration-300 shadow-lg">
|
||||
Join Newsletter
|
||||
</a>
|
||||
</nav>
|
||||
<div class="md:hidden">
|
||||
<button class="text-gray-600 hover:text-deep-maroon p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-warm-gold">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-[60vh] md:h-[75vh] flex items-center justify-center overflow-hidden bg-cover bg-center" style="background-image: url('https://images.pexels.com/photos/34744054/pexels-photo-34744054.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200');">
|
||||
<!-- Overlay for text readability -->
|
||||
<div class="absolute inset-0 bg-deep-maroon bg-opacity-40"></div>
|
||||
|
||||
<div class="relative z-10 text-center px-4 max-w-4xl animate-fadeIn">
|
||||
<h1 class="text-5xl md:text-7xl font-serif text-white mb-4 leading-tight drop-shadow-lg">
|
||||
Cozy Up This Season
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-warm-gold mb-8 font-medium drop-shadow">
|
||||
Discover your perfect escape with our handpicked collection of autumn literary treasures.
|
||||
</p>
|
||||
<a href="#featured" class="inline-block bg-warm-gold text-white text-lg font-semibold py-3 px-8 rounded-lg shadow-xl hover:bg-yellow-500 transition duration-300 transform hover:scale-[1.02]">
|
||||
Explore Autumn Picks
|
||||
</a>
|
||||
<p class="mt-4 text-sm text-gray-300">Photo by Nguyen Duc Toan on Pexels</p>
|
||||
<a href="https://www.pexels.com/photo/cozy-bookstore-interior-with-shelves-and-customers-34744054/" class="text-sm text-warm-gold hover:text-white mt-1 inline-block underline">View Photo on Pexels →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Books Section -->
|
||||
<section id="featured" class="py-16 md:py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-4xl font-serif text-center mb-12 text-deep-maroon border-b-4 border-warm-gold inline-block pb-1 mx-auto">
|
||||
Featured This Season
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- Book Card 1 -->
|
||||
<div class="bg-gray-50 p-6 rounded-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:-translate-y-1 border border-gray-100 group">
|
||||
<div class="h-48 bg-gray-200 rounded-lg mb-4 overflow-hidden">
|
||||
<img src="https://via.placeholder.com/400x550?text=Mystery+Novel" alt="The Midnight Library" class="w-full h-full object-cover group-hover:opacity-90 transition duration-300">
|
||||
</div>
|
||||
<h3 class="text-xl font-serif text-deep-maroon mb-2">The Midnight Library</h3>
|
||||
<p class="text-gray-600 mb-3 line-clamp-3">A heartwarming story about second chances and the magic found between the pages.</p>
|
||||
<span class="inline-block bg-moss-green text-white text-xs font-semibold px-3 py-1 rounded-full">New Release</span>
|
||||
</div>
|
||||
|
||||
<!-- Book Card 2 -->
|
||||
<div class="bg-gray-50 p-6 rounded-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:-translate-y-1 border border-gray-100 group">
|
||||
<div class="h-48 bg-gray-200 rounded-lg mb-4 overflow-hidden">
|
||||
<img src="https://via.placeholder.com/400x550?text=Historical+Fiction" alt="The Gilded Age Secrets" class="w-full h-full object-cover group-hover:opacity-90 transition duration-300">
|
||||
</div>
|
||||
<h3 class="text-xl font-serif text-deep-maroon mb-2">The Gilded Age Secrets</h3>
|
||||
<p class="text-gray-600 mb-3 line-clamp-3">Immerse yourself in the opulent and intricate drama of a bygone era.</p>
|
||||
<span class="inline-block bg-moss-green text-white text-xs font-semibold px-3 py-1 rounded-full">Staff Pick</span>
|
||||
</div>
|
||||
|
||||
<!-- Book Card 3 -->
|
||||
<div class="bg-gray-50 p-6 rounded-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:-translate-y-1 border border-gray-100 group">
|
||||
<div class="h-48 bg-gray-200 rounded-lg mb-4 overflow-hidden">
|
||||
<img src="https://via.placeholder.com/400x550?text=Cozy+Romance" alt="Whispers in the Rain" class="w-full h-full object-cover group-hover:opacity-90 transition duration-300">
|
||||
</div>
|
||||
<h3 class="text-xl font-serif text-deep-maroon mb-2">Whispers in the Rain</h3>
|
||||
<p class="text-gray-600 mb-3 line-clamp-3">Perfect for a quiet evening with a warm beverage and a captivating romance.</p>
|
||||
<span class="inline-block bg-moss-green text-white text-xs font-semibold px-3 py-1 rounded-full">Staff Pick</span>
|
||||
</div>
|
||||
|
||||
<!-- Book Card 4 -->
|
||||
<div class="bg-gray-50 p-6 rounded-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:-translate-y-1 border border-gray-100 group">
|
||||
<div class="h-48 bg-gray-200 rounded-lg mb-4 overflow-hidden">
|
||||
<img src="https://via.placeholder.com/400x550?text=Literary+Fiction" alt="The Quiet Observer" class="w-full h-full object-cover group-hover:opacity-90 transition duration-300">
|
||||
</div>
|
||||
<h3 class="text-xl font-serif text-deep-maroon mb-2">The Quiet Observer</h3>
|
||||
<p class="text-gray-600 mb-3 line-clamp-3">A profound look at observation, solitude, and the beauty of simple moments.</p>
|
||||
<span class="inline-block bg-moss-green text-white text-xs font-semibold px-3 py-1 rounded-full">New Release</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Seasonal Collection Highlight -->
|
||||
<section id="collections" class="py-16 md:py-24 bg-deep-maroon text-white">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-4xl font-serif mb-4">The Autumn Harvest Collection</h2>
|
||||
<p class="text-xl opacity-90 mb-10 max-w-3xl mx-auto">
|
||||
Curated selections blending thrilling mysteries, deep historical narratives, and comforting romance to create the perfect reading atmosphere for crisp fall days.
|
||||
</p>
|
||||
|
||||
<div class="flex justify-center space-x-6">
|
||||
<div class="p-6 bg-white/10 backdrop-blur-sm rounded-lg shadow-2xl border border-warm-gold/50 transition duration-500 hover:scale-105">
|
||||
<h3 class="text-2xl font-serif text-warm-gold mb-3">Mystery & Thriller</h3>
|
||||
<p class="text-sm opacity-90">Unravel dark secrets and keep you guessing through the season.</p>
|
||||
</div>
|
||||
<div class="p-6 bg-white/10 backdrop-blur-sm rounded-lg shadow-2xl border border-warm-gold/50 transition duration-500 hover:scale-105">
|
||||
<h3 class="text-2xl font-serif text-warm-gold mb-3">Classic Romance</h3>
|
||||
<p class="text-sm opacity-90">Warm hearts and enduring stories for those quiet, cozy moments.</p>
|
||||
</div>
|
||||
<div class="p-6 bg-white/10 backdrop-blur-sm rounded-lg shadow-2xl border border-warm-gold/50 transition duration-500 hover:scale-105">
|
||||
<h3 class="text-2xl font-serif text-warm-gold mb-3">Literary Journeys</h3>
|
||||
<p class="text-sm opacity-90">Explore rich prose and deep themes perfect for reflective reading.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Newsletter Signup -->
|
||||
<section id="join" class="py-16 bg-book-cream">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-3xl font-serif text-deep-maroon mb-4">Never Miss a New Release</h2>
|
||||
<p class="text-lg text-gray-600 mb-6">Subscribe to our newsletter for exclusive early access to seasonal book launches and reader discounts.</p>
|
||||
|
||||
<form class="flex flex-col sm:flex-row justify-center gap-3">
|
||||
<input type="email" placeholder="Enter your email address" class="flex-grow p-3 border-2 border-gray-300 rounded-lg focus:border-deep-maroon focus:ring-deep-maroon transition duration-200 shadow-inner" required>
|
||||
<button type="submit" class="bg-moss-green text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:bg-green-700 transition duration-300 transform hover:scale-105">
|
||||
Subscribe Now
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-deep-maroon text-white py-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<p class="text-sm mb-2">© 2023 Autumn Pages. All rights reserved.</p>
|
||||
<div class="space-x-4 mt-2">
|
||||
<a href="#" class="text-gray-400 hover:text-warm-gold text-sm">Privacy Policy</a>
|
||||
<a href="#" class="text-gray-400 hover:text-warm-gold text-sm">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Simple JavaScript for subtle scroll effect on load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const hero = document.querySelector('section:first-of-type');
|
||||
hero.style.opacity = 0;
|
||||
setTimeout(() => {
|
||||
hero.style.opacity = 1;
|
||||
}, 100); // Slight delay for animation trigger<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 18.85s</div>
|
||||
@@ -0,0 +1,222 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ascend Strength Coaching | Achieve Your Peak Potential</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom Tailwind Configuration for visual impact */
|
||||
:root {
|
||||
--primary-color: #D9534F; /* A strong, motivational red/maroon */
|
||||
--secondary-color: #333;
|
||||
}
|
||||
.bg-primary {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
.text-primary {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.border-primary {
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Keyframe Animation for subtle pulse/focus */
|
||||
@keyframes pulse-glow {
|
||||
0% { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0.4); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(217, 83, 79, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0); }
|
||||
}
|
||||
|
||||
.animate-pulse-glow {
|
||||
animation: pulse-glow 2s infinite;
|
||||
}
|
||||
|
||||
/* Typography Styling */
|
||||
.display-font {
|
||||
font-family: 'Georgia', serif; /* Strong, established feel */
|
||||
}
|
||||
.body-font {
|
||||
font-family: 'Inter', sans-serif; /* Clean, modern body text */
|
||||
}
|
||||
|
||||
/* Custom Scrollbar for visual polish (optional) */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Utility for button hover interaction */
|
||||
.btn-primary {
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
box-shadow: 0 8px 15px rgba(217, 83, 79, 0.4);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 text-gray-800 body-font">
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-lg border-b border-gray-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">
|
||||
<!-- Logo/Brand Name -->
|
||||
<div class="flex-shrink-0">
|
||||
<a href="#" class="text-2xl font-extrabold tracking-tighter text-gray-900">
|
||||
ASCEND <span class="text-primary">STRENGTH</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Desktop Nav Links -->
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#methodology" class="text-gray-600 hover:text-primary transition duration-150 font-medium">Methodology</a>
|
||||
<a href="#programs" class="text-gray-600 hover:text-primary transition duration-150 font-medium">Programs</a>
|
||||
<a href="#testimonials" class="text-gray-600 hover:text-primary transition duration-150 font-medium">Results</a>
|
||||
<a href="#contact" class="px-4 py-2 border border-primary text-primary hover:bg-primary hover:text-white transition duration-150 rounded-lg shadow-md">Start Ascent</a>
|
||||
</nav>
|
||||
<!-- Mobile Menu Button (Hidden on large screens) -->
|
||||
<div class="md:hidden">
|
||||
<button id="mobile-menu-button" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" aria-controls="mobile-menu" aria-expanded="false">
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" 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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Menu Content (Hidden by default) -->
|
||||
<div class="md:hidden hidden" id="mobile-menu">
|
||||
<div class="px-4 pt-2 pb-3 space-y-1 sm:px-8 border-t border-gray-100">
|
||||
<a href="#methodology" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-50 hover:text-primary font-medium">Methodology</a>
|
||||
<a href="#programs" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-50 hover:text-primary font-medium">Programs</a>
|
||||
<a href="#testimonials" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-50 hover:text-primary font-medium">Results</a>
|
||||
<a href="#contact" class="block w-full text-center mt-2 px-4 py-2 border border-primary text-primary hover:bg-primary hover:text-white transition duration-150 rounded-lg">Start Ascent</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="bg-gray-900 bg-cover bg-center h-[70vh] flex items-center text-center relative overflow-hidden"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1546483629-b7a6e450c521?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80');">
|
||||
|
||||
<!-- Dark Overlay for Text Readability -->
|
||||
<div class="absolute inset-0 bg-black opacity-60"></div>
|
||||
|
||||
<div class="relative z-10 max-w-4xl mx-auto px-4 pt-16">
|
||||
<h1 class="display-font text-5xl sm:text-7xl lg:text-8xl font-bold text-white leading-tight mb-4 drop-shadow-lg">
|
||||
Forge Your Ultimate Self.
|
||||
</h1>
|
||||
<p class="text-xl sm:text-2xl text-gray-200 mb-10 max-w-3xl mx-auto font-light">
|
||||
Stop wishing for change. Start building it. Ascend Strength provides personalized, science-backed coaching to transform your body and mindset.
|
||||
</p>
|
||||
<a href="#contact" class="btn-primary inline-flex items-center justify-center px-10 py-4 text-lg font-semibold text-white bg-primary rounded-xl shadow-2xl transform hover:scale-[1.02]">
|
||||
Begin Transformation Now
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Methodology Section -->
|
||||
<section id="methodology" class="py-20 lg:py-28 bg-white border-b">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="display-font text-5xl font-extrabold text-gray-900 mb-4">
|
||||
The Ascent Framework
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 mb-12 max-w-3xl mx-auto">
|
||||
We don't just count reps; we engineer sustainable, powerful, and holistic change. Our process is built on three pillars.
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Pillar 1 -->
|
||||
<div class="p-8 bg-gray-50 border-t-4 border-primary rounded-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-[1.02] hover:shadow-2xl">
|
||||
<div class="text-5xl mb-3 text-primary">♎</div> <!-- Icon: Up Arrow -->
|
||||
<h3 class="text-2xl font-bold mb-3 text-gray-900">Precision Assessment</h3>
|
||||
<p class="text-gray-600">
|
||||
We begin by understanding *you*—your biomechanics, your goals, and your limitations. No guesswork, just data-driven planning for maximum effect.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Pillar 2 -->
|
||||
<div class="p-8 bg-gray-50 border-t-4 border-primary rounded-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-[1.02] hover:shadow-2xl">
|
||||
<div class="text-5xl mb-3 text-primary">📞</div> <!-- Icon: Muscle -->
|
||||
<h3 class="text-2xl font-bold mb-3 text-gray-900">Adaptive Programming</h3>
|
||||
<p class="text-gray-600">
|
||||
Workouts are not static. They evolve weekly based on recovery, performance, and adherence. We adjust as you improve.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Pillar 3 -->
|
||||
<div class="p-8 bg-gray-50 border-t-4 border-primary rounded-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-[1.02] hover:shadow-2xl">
|
||||
<div class="text-5xl mb-3 text-primary">✅</div> <!-- Icon: Check Mark -->
|
||||
<h3 class="text-2xl font-bold mb-3 text-gray-900">Sustained Mastery</h3>
|
||||
<p class="text-gray-600">
|
||||
True fitness is a lifestyle shift. We embed nutritional habits and recovery routines to ensure your gains last a lifetime.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Programs Section -->
|
||||
<section id="programs" class="py-20 lg:py-28 bg-gray-100 border-b">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="display-font text-5xl font-extrabold text-gray-900 mb-4">
|
||||
Choose Your Path to Excellence
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Whether you need targeted weight loss, maximal strength gains, or general vitality, we have a program designed for your ambition level.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-3 gap-10 items-start">
|
||||
|
||||
<!-- Program Card 1: Foundation -->
|
||||
<div class="bg-white border border-gray-200 rounded-xl shadow-2xl p-8 flex flex-col hover:shadow-primary/30 transition duration-300">
|
||||
<h3 class="display-font text-3xl font-bold text-primary mb-2">Foundation Build</h3>
|
||||
<p class="text-gray-500 mb-4">Perfect for beginners re-learning movement patterns.</p>
|
||||
<p class="text-gray-700 mb-6 flex-grow">
|
||||
Focuses on mastering fundamental movements, building consistent habit streaks, and establishing a strong metabolic base. Perfect for those intimidated by the gym.
|
||||
</p>
|
||||
<div class="mb-6">
|
||||
<p class="text-4xl font-bold text-gray-900">$499<span class="text-xl text-gray-400">/month</span></p>
|
||||
<p class="text-sm text-gray-500 mt-1">Monthly Recurring Fee</p>
|
||||
</div>
|
||||
<a href="#contact" class="btn-primary mt-auto w-full text-center py-3 text-lg font-semibold bg-gray-800 text-white rounded-lg shadow-md">
|
||||
Enroll in Foundation
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Program Card 2: Elite (Featured) -->
|
||||
<div class="bg-gray-800 border-4 border-primary rounded-xl shadow-2xl p-10 flex flex-col transform scale-[1.02] z-10">
|
||||
<div class="bg-primary text-white text-center px-4 py-2 mb-4 rounded-full font-semibold uppercase text-sm tracking-widest shadow-lg">
|
||||
Most Comprehensive
|
||||
</div>
|
||||
<h3 class="display-font text-4xl font-bold text-white mb-2">Ascend Elite</h3>
|
||||
<p class="text-gray-300 mb-4">For those serious about peak physical performance.</p>
|
||||
<p class="text-gray-300 mb-6 flex-grow">
|
||||
A high-intensity, hyper-personalized journey. We dive deep into periodization, advanced nutrition timing, and performance optimization to unlock your absolute best.
|
||||
</p>
|
||||
<div class="mb-6">
|
||||
<p class="text-5xl font-extrabold text-white">$799<span class="text-2xl text-gray-300">/month</span></p>
|
||||
<p class="text-sm text-gray-400 mt-1">Elite Coaching & Support</p>
|
||||
</div>
|
||||
<a href="#contact" class="btn-primary mt-auto w-full text-center py-3 text-lg font-semibold bg-white text-gray-800 rounded-lg shadow-xl hover:bg-gray-100">
|
||||
Start Elite Journey
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Program Card 3: Vitality -->
|
||||
<div class="bg-white border border-gray-200 rounded-xl shadow-2xl p-8 flex flex-col hover:shadow-primary/30 transition duration-300">
|
||||
<h3 class="display-font text-3xl font-bold text-primary mb-2">Vitality Maintenance</h3>
|
||||
<p class="text-gray-500 mb-4">Ideal for maintaining health and consistent energy.</p>
|
||||
<p class="text-gray-700 mb-6 flex-grow">
|
||||
Focuses on movement longevity, injury prevention, and balanced nutrition. Maintain progress without the intensity of a full overhaul.
|
||||
</p>
|
||||
<div class="mb-6">
|
||||
<p class="text-4xl font-bold text-gray-900">$299<span class="text-xl text-gray-400">/month</span></p><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 29.82s</div>
|
||||
@@ -0,0 +1,157 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PawPrints Sanctuary - Find Your Furry Friend</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom font styling for a warm, inviting feel */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Nunito:wght@400;600;700&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
background-color: #fdf7f2; /* Very light cream/off-white background */
|
||||
color: #333;
|
||||
}
|
||||
.header-font {
|
||||
font-family: 'Playfair Display', serif;
|
||||
}
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg, #ff9977 0%, #ffc371 100%);
|
||||
}
|
||||
.card-shadow {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.card-shadow:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
/* Subtle hover effect for buttons */
|
||||
.btn-primary {
|
||||
transition: background-color 0.3s, transform 0.2s;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #e76f51; /* Darker orange/coral on hover */
|
||||
transform: scale(1.02);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<header class="bg-white shadow-lg sticky top-0 z-10">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<div class="text-3xl header-font text-orange-600 tracking-wider">
|
||||
PawPrints <span class="text-red-500">Sanctuary</span>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-8 font-medium">
|
||||
<a href="#adopt" class="text-gray-600 hover:text-orange-500 transition duration-150 p-2 border-b-2 border-transparent hover:border-orange-500">Adopt</a>
|
||||
<a href="#browse" class="text-gray-600 hover:text-orange-500 transition duration-150 p-2 border-b-2 border-transparent hover:border-orange-500">Browse Animals</a>
|
||||
<a href="#about" class="text-gray-600 hover:text-orange-500 transition duration-150 p-2 border-b-2 border-transparent hover:border-orange-500">Our Mission</a>
|
||||
<a href="#contact" class="text-gray-600 hover:text-orange-500 transition duration-150 p-2 border-b-2 border-transparent hover:border-orange-500">Donate</a>
|
||||
</nav>
|
||||
<div class="md:hidden">
|
||||
<!-- Mobile Menu Button (Hamburger) -->
|
||||
<button id="menu-button" class="text-gray-600 hover:text-orange-500 p-2 focus:outline-none focus:ring-2 focus:ring-orange-500 rounded">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Menu Dropdown -->
|
||||
<div id="mobile-menu" class="md:hidden hidden bg-white shadow-md">
|
||||
<div class="px-4 pt-2 pb-3 space-y-1">
|
||||
<a href="#adopt" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-600 border-b">Adopt</a>
|
||||
<a href="#browse" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-600 border-b">Browse Animals</a>
|
||||
<a href="#about" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-600 border-b">Our Mission</a>
|
||||
<a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-600">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-gradient py-24 sm:py-32 text-white shadow-xl">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h1 class="text-5xl sm:text-7xl font-extrabold mb-4 leading-tight header-font drop-shadow-lg">
|
||||
Open Your Heart. Share Your Home.
|
||||
</h1>
|
||||
<p class="text-xl sm:text-2xl mb-10 max-w-3xl mx-auto opacity-90">
|
||||
Every wagging tail and gentle purr deserves a loving forever family. Meet our adoptable companions today.
|
||||
</p>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<a href="#browse" class="btn-primary bg-white text-orange-600 font-bold py-4 px-8 rounded-full text-lg shadow-lg hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-white/50">
|
||||
Find Your Pet
|
||||
</a>
|
||||
<a href="#donate" class="bg-transparent border-2 border-white text-white font-semibold py-4 px-8 rounded-full text-lg hover:bg-white/20 focus:outline-none focus:ring-4 focus:ring-white/50">
|
||||
Support Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Animal Browsing / Showcase Section -->
|
||||
<section id="browse" class="py-20 sm:py-28 bg-fdf7f2">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-4xl sm:text-5xl text-center mb-4 header-font text-gray-800">
|
||||
Meet Our Residents
|
||||
</h2>
|
||||
<p class="text-center text-xl mb-12 text-gray-500 max-w-3xl mx-auto">
|
||||
Explore profiles of dogs, cats, and small animals waiting for their second chance at happiness.
|
||||
</p>
|
||||
|
||||
<!-- Animal Grid -->
|
||||
<div id="animal-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
|
||||
<!-- Animal Card 1: Dog -->
|
||||
<div class="card-shadow bg-white rounded-xl overflow-hidden border border-gray-100 group" data-type="dog">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1543455323-a6759d5e974b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8ZGFnJTIwZGVzJTIwZGVzZXJ8ZW58MHx8MHx8fDA%3D"
|
||||
alt="Barnaby, a friendly Golden Retriever mix"
|
||||
class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
|
||||
<div class="absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">DOG</div>
|
||||
</div>
|
||||
<div class="p-6 text-center">
|
||||
<h3 class="text-3xl header-font text-gray-900 mb-1">Barnaby</h3>
|
||||
<p class="text-gray-600 text-sm mb-3">Golden Retriever Mix</p>
|
||||
<p class="text-gray-700 mb-4 text-sm">Barnaby loves long walks and sunny spots. He is patient and eager to please. Perfect for a family home.</p>
|
||||
<div class="flex justify-center space-x-3">
|
||||
<span class="text-sm text-green-600 flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.045 1.115l-.428.039a.75.75 0 0 0-.994 1.455l.039.428a.75.75 0 0 0 1.455.994l.428-.039a.75.75 0 0 0-.994-1.455L9.045 1.115z"></path></svg> Great Snuggler</span>
|
||||
<span class="text-sm text-blue-600 flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M13 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"></path><path d="M17 7h-4v4h-2V7h-4V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2z"></path></svg> House Trained</span>
|
||||
</div>
|
||||
<button class="btn-primary mt-5 w-full bg-orange-500 text-white py-3 rounded-lg font-semibold shadow-md focus:outline-none focus:ring-4 focus:ring-orange-300">
|
||||
View Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Animal Card 2: Cat -->
|
||||
<div class="card-shadow bg-white rounded-xl overflow-hidden border border-gray-100 group" data-type="cat">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1561879191-04738011c10a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Y2F0fGVufDB8fDB8fHww"
|
||||
alt="Luna, a beautiful Ragdoll cat"
|
||||
class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
|
||||
<div class="absolute top-3 right-3 bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">CAT</div>
|
||||
</div>
|
||||
<div class="p-6 text-center">
|
||||
<h3 class="text-3xl header-font text-gray-900 mb-1">Luna</h3>
|
||||
<p class="text-gray-600 text-sm mb-3">Ragdoll</p>
|
||||
<p class="text-gray-700 mb-4 text-sm">Luna is a gentle, affectionate companion who loves cuddles and quiet evenings. She thrives with a calm household.</p>
|
||||
<div class="flex justify-center space-x-3">
|
||||
<span class="text-sm text-green-600 flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.045 1.115l-.428.039a.75.75 0 0 0-.994 1.455l.039.428a.75.75 0 0 0 1.455.994l.428-.039a.75.75 0 0 0-.994-1.455L9.045 1.115z"></path></svg> Cuddle Expert</span>
|
||||
<span class="text-sm text-blue-600 flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M13 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"></path><path d="M17 7h-4v4h-2V7h-4V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2z"></path></svg> Indoor Friendly</span>
|
||||
</div>
|
||||
<button class="btn-primary mt-5 w-full bg-orange-500 text-white py-3 rounded-lg font-semibold shadow-md focus:outline-none focus:ring-4 focus:ring-orange-300">
|
||||
View Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Animal Card 3: Puppy/Small Dog -->
|
||||
<div class="card-shadow bg-white rounded-xl overflow-hidden border border-gray-100 group" data-type="dog">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1583645801388-f7f4533e3878?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHVwcHJ5JTIwZGVzJTIwZGVzZXJ8ZW58MHx8MHx8fDA%3D"
|
||||
alt="Max, a playful puppy"
|
||||
class="w-full h-6<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.23s</div>
|
||||
@@ -0,0 +1,187 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Alistair Vance | Architectural Portfolio</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #A0522D; /* Sienna/Earthy Tone */
|
||||
--secondary-color: #36454F; /* Charcoal/Slate */
|
||||
}
|
||||
.font-serif-display {
|
||||
font-family: 'Playfair Display', Georgia, serif;
|
||||
}
|
||||
.font-sans-body {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
.project-card:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.btn-primary {
|
||||
transition: background-color 0.3s ease, transform 0.1s ease;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #8B4513; /* Darker Brown */
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
/* Subtle Entrance Animation */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: fadeInMove 1s forwards;
|
||||
}
|
||||
@keyframes fadeInMove {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Google Fonts Link for intentional typography -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-gray-50 text-gray-800 font-sans-body antialiased">
|
||||
|
||||
<!-- Header/Navigation -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-lg border-b border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<div class="text-3xl font-serif-display text-gray-900 tracking-widest">
|
||||
A.V.
|
||||
</div>
|
||||
<nav class="space-x-8 hidden md:flex">
|
||||
<a href="#portfolio" class="text-lg font-medium text-gray-600 hover:text-amber-800 transition duration-150 border-b-2 border-transparent hover:border-amber-600 pb-1">Work</a>
|
||||
<a href="#about" class="text-lg font-medium text-gray-600 hover:text-amber-800 transition duration-150 border-b-2 border-transparent hover:border-amber-600 pb-1">Studio</a>
|
||||
<a href="#contact" class="text-lg font-medium text-gray-600 hover:text-amber-800 transition duration-150 border-b-2 border-transparent hover:border-amber-600 pb-1">Inquire</a>
|
||||
</nav>
|
||||
<!-- Mobile Menu Button (simplified for this single page concept) -->
|
||||
<div class="md:hidden">
|
||||
<button id="mobile-menu-button" class="text-gray-600 p-2 focus:outline-none focus:ring-2 focus:ring-amber-600 rounded">
|
||||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section id="hero" class="relative bg-gray-900 h-[70vh] flex items-center justify-center overflow-hidden">
|
||||
<!-- Background Visual Placeholder: Conceptual Image Overlay -->
|
||||
<div class="absolute inset-0 opacity-20 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1502788533167-d44d236c4e99?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');"></div>
|
||||
<div class="relative z-10 text-center max-w-4xl px-4">
|
||||
<h1 class="text-7xl md:text-8xl font-serif-display text-white leading-tight mb-4 drop-shadow-lg">
|
||||
Form & <span class="text-amber-400">Resonance</span>
|
||||
</h1>
|
||||
<p class="text-xl text-gray-200 mb-10 max-w-2xl mx-auto font-light">
|
||||
Designing built environments where materiality meets human experience. A focus on durable, honest, and contextually rich design solutions.
|
||||
</p>
|
||||
<a href="#portfolio" class="btn-primary inline-block bg-amber-700 text-white text-lg font-semibold py-3 px-10 rounded-lg shadow-xl hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300">
|
||||
View Projects
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Portfolio Section -->
|
||||
<section id="portfolio" class="py-24 lg:py-36 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16 fade-in">
|
||||
<h2 class="text-5xl font-serif-display text-gray-900 mb-3">Selected Works</h2>
|
||||
<p class="text-xl text-gray-600">A curated selection of residential, civic, and commercial endeavors.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
|
||||
|
||||
<!-- Project Card 1: Modern Residence -->
|
||||
<div class="project-card bg-white rounded-xl overflow-hidden shadow-lg cursor-pointer transform transition duration-500 fade-in" style="animation-delay: 0.1s;">
|
||||
<div class="relative overflow-hidden">
|
||||
<img class="w-full h-72 object-cover object-center transition duration-500 transform hover:scale-105" src="https://images.unsplash.com/photo-1580461000594-d79155c7e3e1?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Modern Stone Residence">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 to-transparent"></div>
|
||||
</div>
|
||||
<div class="p-6 text-center">
|
||||
<h3 class="text-3xl font-serif-display text-gray-900 mb-2">The Sentinel Residence</h3>
|
||||
<p class="text-lg text-gray-600 mb-4">Contemporary Residential</p>
|
||||
<a href="#" class="text-amber-700 font-semibold hover:text-amber-900 flex items-center justify-center">
|
||||
Explore Case Study
|
||||
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m-7 7l-7-7"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Card 2: Civic Center -->
|
||||
<div class="project-card bg-white rounded-xl overflow-hidden shadow-lg cursor-pointer transform transition duration-500 fade-in" style="animation-delay: 0.3s;">
|
||||
<div class="relative overflow-hidden">
|
||||
<img class="w-full h-72 object-cover object-center transition duration-500 transform hover:scale-105" src="https://images.unsplash.com/photo-1568604512212-d15a2788c659?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Civic Plaza Design">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 to-transparent"></div>
|
||||
</div>
|
||||
<div class="p-6 text-center">
|
||||
<h3 class="text-3xl font-serif-display text-gray-900 mb-2">Civic Nexus Hall</h3>
|
||||
<p class="text-lg text-gray-600 mb-4">Public & Cultural Space</p>
|
||||
<a href="#" class="text-amber-700 font-semibold hover:text-amber-900 flex items-center justify-center">
|
||||
Explore Case Study
|
||||
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m-7 7l-7-7"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Card 3: Commercial Retail -->
|
||||
<div class="project-card bg-white rounded-xl overflow-hidden shadow-lg cursor-pointer transform transition duration-500 fade-in" style="animation-delay: 0.5s;">
|
||||
<div class="relative overflow-hidden">
|
||||
<img class="w-full h-72 object-cover object-center transition duration-500 transform hover:scale-105" src="https://images.unsplash.com/photo-1519389950473-4e5b72282d9e?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Modern Retail Storefront">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 to-transparent"></div>
|
||||
</div>
|
||||
<div class="p-6 text-center">
|
||||
<h3 class="text-3xl font-serif-display text-gray-900 mb-2">The Mercantile Loft</h3>
|
||||
<p class="text-lg text-gray-600 mb-4">Commercial Retail</p>
|
||||
<a href="#" class="text-amber-700 font-semibold hover:text-amber-900 flex items-center justify-center">
|
||||
Explore Case Study
|
||||
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m-7 7l-7-7"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-16 fade-in" style="animation-delay: 0.7s;">
|
||||
<a href="#" class="btn-primary inline-block bg-gray-800 text-white text-lg font-semibold py-3 px-8 rounded-lg shadow-lg hover:bg-amber-700 hover:text-white border border-amber-700 focus:outline-none focus:ring-4 focus:ring-amber-300">
|
||||
View Complete Archive
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="py-24 lg:py-36 bg-gray-100 border-t border-b border-gray-200">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<!-- Text Content -->
|
||||
<div class="fade-in" style="animation-delay: 0.2s;">
|
||||
<h2 class="text-5xl font-serif-display text-gray-900 mb-6 leading-snug">
|
||||
The Philosophy of Place
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 mb-6 leading-relaxed">
|
||||
My approach to architecture is rooted in the principle of geological honesty. I seek the dialogue between the structure and its immediate landscape, ensuring that the design feels not merely placed, but grown from the site. This philosophy drives the use of local materials, tactile surfaces, and light as a primary design element.
|
||||
</p>
|
||||
<p class="text-lg text-gray-600 mb-8 leading-relaxed border-l-4 border-amber-700 pl-4 italic">
|
||||
"A building should feel like it has always belonged there."
|
||||
</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="text-amber-700 text-2xl">📐</span>
|
||||
<p class="font-semibold text-gray-800">Specialization: Sustainable Residential Design</p>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="text-amber-700 text-2xl">🏗️</span>
|
||||
<p class="font-semibold text-gray-800">Expertise: Mass Timber & Natural Stone</p>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="text-amber-700 text-2xl">📍</span>
|
||||
<p class="font-semibold text-gray-800">Practice Area: Pacific Northwest & Mediterranean Influences</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image<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 29.97s</div>
|
||||
@@ -0,0 +1,417 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hopeful Hearts Foundation</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#1a563c',
|
||||
secondary: '#2d7d4c',
|
||||
accent: '#64b58e'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;600;700&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 1s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.hero-image:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.donate-btn {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.donate-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
transition: width 1.5s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 text-gray-800">
|
||||
<div class="min-h-screen flex flex-col">
|
||||
<!-- Header -->
|
||||
<header class="bg-white shadow-md sticky top-0 z-50">
|
||||
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mr-3">
|
||||
<i class="fas fa-heart text-white"></i>
|
||||
</div>
|
||||
<h1 class="text-xl font-bold text-primary">Hopeful Hearts</h1>
|
||||
</div>
|
||||
|
||||
<nav class="hidden md:block">
|
||||
<ul class="flex space-x-8">
|
||||
<li><a href="#mission" class="hover:text-secondary transition-colors">Mission</a></li>
|
||||
<li><a href="#impact" class="hover:text-secondary transition-colors">Impact</a></li>
|
||||
<li><a href="#donate" class="hover:text-secondary transition-colors">Donate</a></li>
|
||||
<li><a href="#contact" class="hover:text-secondary transition-colors">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<button class="md:hidden text-gray-600">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative bg-gradient-to-r from-primary to-secondary text-white">
|
||||
<div class="container mx-auto px-4 py-24 md:py-32 relative">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
<div class="fade-in">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6">Hearts Need Healing</h1>
|
||||
<p class="text-xl mb-8 max-w-lg">
|
||||
We're on a mission to support vulnerable families with essential resources,
|
||||
creating hope and stability for their future.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<a href="#donate" class="bg-white text-primary hover:bg-gray-100 px-8 py-3 rounded-lg font-semibold donate-btn transition-all">
|
||||
Donate Now
|
||||
</a>
|
||||
<a href="#impact" class="border-2 border-white text-white hover:bg-white hover:text-primary px-8 py-3 rounded-lg font-semibold transition-all">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<img src="https://images.pexels.com/photos/6257780/pexels-photo-6257780.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="A woman advocates for peace with a handmade sign during a protest." class="hero-image rounded-xl shadow-xl w-full h-80 object-cover">
|
||||
<p class="absolute bottom-4 right-4 bg-white text-primary px-3 py-2 rounded-lg text-sm">
|
||||
Photo by RDNE Stock project on Pexels
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mission Section -->
|
||||
<section id="mission" class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">Our Mission</h2>
|
||||
<p class="max-w-2xl mx-auto text-gray-600">
|
||||
Supporting families in need through comprehensive programs and community resources.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="bg-gray-50 rounded-xl p-6 fade-in border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
|
||||
<div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center mb-4">
|
||||
<i class="fas fa-hand-holding-heart text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">Community Support</h3>
|
||||
<p class="text-gray-600">
|
||||
Providing essential resources and services to families facing hardship.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 fade-in border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
|
||||
<div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center mb-4">
|
||||
<i class="fas fa-utensils text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">Food Security</h3>
|
||||
<p class="text-gray-600">
|
||||
Ensuring every family has access to nutritious meals and food assistance.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 fade-in border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
|
||||
<div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center mb-4">
|
||||
<i class="fas fa-school text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">Educational Support</h3>
|
||||
<p class="text-gray-600">
|
||||
Helping children succeed through educational resources and tutoring programs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Impact Section -->
|
||||
<section id="impact" class="py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">Our Impact</h2>
|
||||
<p class="max-w-2xl mx-auto text-gray-600">
|
||||
Together we've made a difference in the lives of families across our community.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
<div class="fade-in">
|
||||
<h3 class="text-2xl font-bold mb-6">How Your Support Makes a Difference</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
|
||||
<p>120+ families receive food assistance monthly</p>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
|
||||
<p>85+ children receive educational support</p>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
|
||||
<p>65+ families receive emergency aid</p>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
|
||||
<p>40+ community events held annually</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md p-6 fade-in">
|
||||
<div class="mb-6">
|
||||
<h4 class="font-bold text-lg mb-4">Our Goal Reached</h4>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span>$15,000 raised</span>
|
||||
<span>75% of goal reached</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3">
|
||||
<div class="bg-primary h-3 progress-bar w-3/4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="font-bold text-lg mb-4">Fundraising Progress</h4>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span>Food Assistance Fund</span>
|
||||
<span class="text-sm font-semibold">$3,500 / $5,000</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div class="bg-secondary h-2 w-7/10"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span>Education Support</span>
|
||||
<span class="text-sm font-semibold">$4,200 / $6,000</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div class="bg-secondary h-2 w-7/10"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span>Emergency Aid Program</span>
|
||||
<span class="text-sm font-semibold">$2,800 / $3,000</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div class="bg-secondary h-2 w-9/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Donation Section -->
|
||||
<section id="donate" class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">Support Our Cause</h2>
|
||||
<p class="max-w-2xl mx-auto text-gray-600">
|
||||
Your contribution directly helps families in need. Every dollar matters.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="bg-gradient-to-br from-primary to-secondary rounded-xl shadow-lg p-6 text-white fade-in transform hover:-translate-y-2 transition-transform duration-300">
|
||||
<h3 class="text-xl font-bold mb-4">One-Time Donation</h3>
|
||||
<p class="mb-6">Make a single contribution today.</p>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="text-sm">$10</div>
|
||||
<div class="text-sm">$25</div>
|
||||
<div class="text-sm">$50</div>
|
||||
</div>
|
||||
<a href="#" class="block bg-white text-primary hover:bg-gray-100 py-3 rounded-lg font-semibold text-center transition-all transform hover:scale-105">
|
||||
Donate Now
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-secondary to-accent rounded-xl shadow-lg p-6 text-white fade-in transform hover:-translate-y-2 transition-transform duration-300">
|
||||
<h3 class="text-xl font-bold mb-4">Monthly Support</h3>
|
||||
<p class="mb-6">Become a regular donor and make lasting change.</p>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="text-sm">$10</div>
|
||||
<div class="text-sm">$25</div>
|
||||
<div class="text-sm">$50</div>
|
||||
</div>
|
||||
<a href="#" class="block bg-white text-secondary hover:bg-gray-100 py-3 rounded-lg font-semibold text-center transition-all transform hover:scale-105">
|
||||
Monthly Support
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-accent to-primary rounded-xl shadow-lg p-6 text-white fade-in transform hover:-translate-y-2 transition-transform duration-300">
|
||||
<h3 class="text-xl font-bold mb-4">Corporate Sponsors</h3>
|
||||
<p class="mb-6">Support our mission through business partnerships.</p>
|
||||
<a href="#" class="block bg-white text-accent hover:bg-gray-100 py-3 rounded-lg font-semibold text-center transition-all transform hover:scale-105">
|
||||
Partner With Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">Get in Touch</h2>
|
||||
<p class="max-w-2xl mx-auto text-gray-600">
|
||||
We'd love to hear from you. Contact us with questions or to learn more about our programs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="bg-white rounded-xl shadow-md p-6 fade-in">
|
||||
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mb-4">
|
||||
<i class="fas fa-envelope text-white"></i>
|
||||
</div>
|
||||
<h3 class="font-bold text-lg mb-2">Email Us</h3>
|
||||
<p class="text-gray-600">info@hopefulhearts.org</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md p-6 fade-in">
|
||||
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mb-4">
|
||||
<i class="fas fa-phone text-white"></i>
|
||||
</div>
|
||||
<h3 class="font-bold text-lg mb-2">Call Us</h3>
|
||||
<p class="text-gray-600">(555) 123-4567</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md p-6 fade-in">
|
||||
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mb-4">
|
||||
<i class="fas fa-map-marker-alt text-white"></i>
|
||||
</div>
|
||||
<h3 class="font-bold text-lg mb-2">Visit Us</h3>
|
||||
<p class="text-gray-600">123 Hope Street<br>Community City, CC 55555</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-primary text-white py-12">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-4">Hopeful Hearts</h3>
|
||||
<p class="text-gray-200">
|
||||
Supporting families in need through comprehensive programs and community resources.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-bold mb-4">Quick Links</h4>
|
||||
<ul class="space-y-2 text-gray-200">
|
||||
<li><a href="#mission" class="hover:text-white transition-colors">Our Mission</a></li>
|
||||
<li><a href="#impact" class="hover:text-white transition-colors">Our Impact</a></li>
|
||||
<li><a href="#donate" class="hover:text-white transition-colors">Donate</a></li>
|
||||
<li><a href="#contact" class="hover:text-white transition-colors">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-bold mb-4">Connect</h4>
|
||||
<div class="flex space-x-4">
|
||||
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-accent transition-colors">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-accent transition-colors">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-accent transition-colors">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-bold mb-4">Newsletter</h4>
|
||||
<p class="text-gray-200 mb-4">Stay updated on our programs and events.</p>
|
||||
<form class="flex">
|
||||
<input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg text-gray-800 w-full focus:outline-none">
|
||||
<button class="bg-secondary px-4 py-2 rounded-r-lg hover:bg-accent transition-colors">Join</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
|
||||
<p>© 2023 Hopeful Hearts Foundation. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Smooth scrolling for navigation links
|
||||
const links = document.querySelectorAll('a[href^="#"]');
|
||||
|
||||
links.forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href');
|
||||
const targetElement = document.querySelector(targetId);
|
||||
|
||||
if (targetElement) {
|
||||
window.scrollTo({
|
||||
top: targetElement.offsetTop - 80,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Animate progress bars on scroll
|
||||
const progressBars = document.querySelectorAll('.progress-bar');
|
||||
const animateBars = () => {
|
||||
progressBars.forEach(bar => {
|
||||
const width = bar.style.width;
|
||||
setTimeout(() => {
|
||||
bar.style.width = width;
|
||||
}, 100);
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', animateBars);
|
||||
animateBars();
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<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 148.76s</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,190 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sommerwunder Festival - Ein Fest für die Sinne</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom configuration for Tailwind */
|
||||
:root {
|
||||
--color-primary: #D97706; /* Warm Amber/Gold */
|
||||
--color-secondary: #F59E0B; /* Orange/Deep Gold */
|
||||
--color-dark: #1F2937; /* Slate Gray */
|
||||
--color-light: #F9FAFB; /* Off White */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-light);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(217, 119, 6, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #B45309; /* Darker Amber */
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(217, 119, 6, 0.6);
|
||||
}
|
||||
|
||||
.hero-gradient {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 158, 11, 0.1) 100%);
|
||||
}
|
||||
|
||||
/* Custom animation for subtle floating effect on cards */
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-8px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
.float-animation {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Typography enhancement for titles */
|
||||
.title-font {
|
||||
font-family: 'Playfair Display', serif; /* Assuming a serif font feel for impact */
|
||||
line-height: 1.1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header / Navigation -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-lg border-b-4 border-amber-500">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
||||
<div class="text-3xl font-extrabold text-amber-700 tracking-tight title-font">
|
||||
SommerWunder <span class="text-amber-500">Fest</span>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#programm" class="text-gray-700 hover:text-amber-600 font-medium transition duration-150 focus:outline-none focus:text-amber-600">Programm</a>
|
||||
<a href="#ort" class="text-gray-700 hover:text-amber-600 font-medium transition duration-150 focus:outline-none focus:text-amber-600">Ort & Anreise</a>
|
||||
<a href="#tickets" class="px-6 py-2 bg-amber-500 text-white rounded-full shadow-md hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 transition duration-300">Tickets</a>
|
||||
</nav>
|
||||
<!-- Mobile Menu Button (simplified for single-page presentation) -->
|
||||
<button class="md:hidden text-gray-700 focus:outline-none focus:text-amber-700 p-2 rounded-md" aria-expanded="false">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-gradient py-16 sm:py-24 text-center border-b-8 border-amber-500">
|
||||
<div class="max-w-4xl mx-auto px-4">
|
||||
<h1 class="text-6xl sm:text-7xl lg:text-8xl font-extrabold text-gray-900 mb-4 leading-tight title-font">
|
||||
Sommerwunder: Wo Musik, Natur und Gefühl sich treffen.
|
||||
</h1>
|
||||
<p class="text-xl sm:text-2xl text-gray-600 mb-10 max-w-3xl mx-auto">
|
||||
Erleben Sie das größte Kulturereignis des Sommers – eine Oase der Freude und kreativen Begegnung in den sanften Hügeln der Region.
|
||||
</p>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<a href="#tickets" class="btn-primary text-white text-lg px-10 py-4 rounded-full shadow-xl focus:outline-none focus:ring-4 focus:ring-amber-300 uppercase tracking-widest">
|
||||
Jetzt Tickets sichern
|
||||
</a>
|
||||
<a href="#programm" class="bg-white border-2 border-amber-500 text-amber-700 text-lg px-10 py-4 rounded-full shadow-md hover:bg-amber-50 transition duration-300 focus:outline-none focus:ring-4 focus:ring-amber-100">
|
||||
Programm ansehen
|
||||
</a>
|
||||
</div>
|
||||
<p class="mt-6 text-sm text-gray-500 italic">Startdatum: 15. August 2024 | 3 Tage voller Wunder</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Programm Section -->
|
||||
<section id="programm" class="py-20 sm:py-32 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-5xl font-bold text-gray-900 mb-3 title-font">Das Programm</h2>
|
||||
<p class="text-xl text-gray-600">Ein Kaleidoskop aus Musik, Kunst und kulinarischer Vielfalt.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Event Card 1 -->
|
||||
<div class="bg-white p-8 rounded-xl shadow-2xl border-t-8 border-amber-500 float-animation transform hover:scale-[1.02] transition duration-300">
|
||||
<h3 class="text-3xl font-bold text-amber-700 mb-3 title-font">Klanglandschaft</h3>
|
||||
<p class="text-gray-600 mb-4">Jeden Abend erleben Sie Live-Acts von lokalen und internationalen Musikern. Von akustischer Melancholie bis hin zu pulsierendem Folk-Rock.</p>
|
||||
<div class="flex items-center text-sm text-amber-600 pt-2 border-t border-gray-100">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V4l12-3v13m-6 0v-6"></path></svg>
|
||||
Täglich ab 18:00 Uhr
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Card 2 -->
|
||||
<div class="bg-white p-8 rounded-xl shadow-2xl border-t-8 border-amber-700 float-animation transform hover:scale-[1.02] transition duration-300">
|
||||
<h3 class="text-3xl font-bold text-amber-700 mb-3 title-font">Kunst & Handwerk</h3>
|
||||
<p class="text-gray-600 mb-4">Entdecken Sie lokale Kunsthandwerker und Galerien. Ein lebendiger Marktplatz voller einzigartiger Schätze und kreativer Ausstellungen.</p>
|
||||
<div class="flex items-center text-sm text-amber-600 pt-2 border-t border-gray-100">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 01-2 2H7a2 2 0 01-2-2m14 0l-7 7"></path></svg>
|
||||
Samstags & Sonntags
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Card 3 -->
|
||||
<div class="bg-white p-8 rounded-xl shadow-2xl border-t-8 border-amber-600 float-animation transform hover:scale-[1.02] transition duration-300">
|
||||
<h3 class="text-3xl font-bold text-amber-700 mb-3 title-font">Kulinarische Reise</h3>
|
||||
<p class="text-gray-600 mb-4">Genießen Sie regionale Spezialitäten von Gourmet-Köchen und kleinen Manufakturen. Ein Fest für den Gaumen, saisonale Höhepunkte.</p>
|
||||
<div class="flex items-center text-sm text-amber-600 pt-2 border-t border-gray-100">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8v4m0 8v4m-6 0h12"></path></svg>
|
||||
Ganztägig
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tickets/CTA Section -->
|
||||
<section id="tickets" class="bg-gray-50 py-20 sm:py-28 border-t-8 border-amber-500">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-5xl font-bold text-gray-900 mb-4 title-font">Bereit für das Wunder?</h2>
|
||||
<p class="text-xl text-gray-600 mb-10">Sichern Sie sich Ihren Platz im Sommerwunder. Limitierte Plätze garantieren ein authentisches Erlebnis.</p>
|
||||
|
||||
<div class="flex justify-center space-x-4 mb-10">
|
||||
<!-- Ticket Option 1 -->
|
||||
<div class="bg-white p-6 rounded-lg shadow-xl border-2 border-amber-200 w-full max-w-sm transform hover:shadow-amber-400/50 transition duration-300">
|
||||
<h4 class="text-2xl font-bold text-amber-700 mb-2">Tagesticket</h4>
|
||||
<p class="text-sm text-gray-500 mb-4">Erleben Sie einen Tag voller Magie.</p>
|
||||
<p class="text-4xl font-extrabold text-gray-900 mb-4">€ 39.00</p>
|
||||
<button class="w-full bg-amber-500 text-white py-3 rounded-lg font-semibold hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300">
|
||||
Tagesticket kaufen
|
||||
</button>
|
||||
</div>
|
||||
<!-- Ticket Option 2 -->
|
||||
<div class="bg-white p-6 rounded-lg shadow-xl border-2 border-amber-300 w-full max-w-sm transform hover:shadow-amber-400/50 transition duration-300">
|
||||
<h4 class="text-2xl font-bold text-amber-700 mb-2">Wochenpaket</h4>
|
||||
<p class="text-sm text-gray-500 mb-4">Alle drei Tage inklusive. Das volle Sommertraum-Erlebnis!</p>
|
||||
<p class="text-4xl font-extrabold text-gray-900 mb-4">€ 119.00</p>
|
||||
<button class="w-full bg-amber-700 text-white py-3 rounded-lg font-semibold hover:bg-amber-800 focus:outline-none focus:ring-4 focus:ring-amber-300">
|
||||
Wochenpaket buchen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-8 text-lg text-gray-500">
|
||||
Tickets sind begrenzt verfügbar. Früh buchen sichern den besten Platz unter den Sternen.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Location/Info Section -->
|
||||
<section id="ort" class="py-20 sm:py-28 bg-gray-100">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<!-- Text Content -->
|
||||
<div>
|
||||
<h2 class="text-5xl font-bold text-gray-900 mb-4 title-font">Der Ort des Wunders</h2>
|
||||
<p class="text-xl text-gray-600 mb-6 leading-relaxed">
|
||||
Wir haben einen einzigartigen Ort für Sie gewählt: die historische Almwiese bei Oberberg. Umgeben von majestätischen Gipfeln und sanften, warmen Hügeln, bietet dieser Ort die perfekte Kulisse für einen Festival-Traum. Die Natur ist unser Bühnenbild.
|
||||
</p>
|
||||
<p class="text-lg text-amber-700 font-medium mb-6 p-3 bg-amber-50 rounded-lg border-l-4 border-amber-500">
|
||||
Adresse: Almwiese, 87235 Berghausen.
|
||||
</p>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-3">Anreiseinformationen</h3>
|
||||
<ul class="space-y-4 text-lg text-gray-600">
|
||||
<li class="flex items-start"><span class="text-amber-500 mr-3 mt-1 text-2xl leading-none">→</span>Öffentliche Verkehrsmittel: Gute Anbindung mit Buslinie 447. Bitte planen Sie genügend Zeit für die Busfahrt ein.</li>
|
||||
<li class="<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 29.46s</div>
|
||||
@@ -0,0 +1,237 @@
|
||||
<!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>Lumina Garden | A Botanical Light & Sound Festival</title>
|
||||
<meta name="description" content="Experience the fusion of nature, art, and music at Lumina Garden. A three-night immersive festival of light installations and ambient soundscapes.">
|
||||
<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 {
|
||||
--forest-dark: #0a0f0d;
|
||||
--moss-green: #4a5d4e;
|
||||
--luminous-gold: #d4af37;
|
||||
--ethereal-white: #f8fafc;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--forest-dark);
|
||||
color: var(--ethereal-white);
|
||||
}
|
||||
|
||||
h1, h2, h3, .serif {
|
||||
font-family: 'Playfair Display', serif;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: transform 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: rgba(212, 175, 55, 0.4);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(to right, #d4af37, #fef3c7);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.hero-gradient {
|
||||
background: linear-gradient(to bottom, rgba(10, 15, 13, 0.4), rgba(10, 15, 13, 1));
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
||||
}
|
||||
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.nav-blur {
|
||||
background: rgba(10, 15, 13, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--luminous-gold);
|
||||
color: black;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #fff;
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
|
||||
}
|
||||
|
||||
@keyframes pulse-soft {
|
||||
0%, 100% { opacity: 0.8; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
.pulse-soft {
|
||||
animation: pulse-soft 3s infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed w-full z-50 nav-blur">
|
||||
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<div class="text-2xl font-bold tracking-tighter">LUMINA <span class="text-yellow-600">GARDEN</span></div>
|
||||
<div class="hidden md:flex space-x-8 text-sm uppercase tracking-widest font-medium">
|
||||
<a href="#experience" class="hover:text-yellow-500 transition">Experience</a>
|
||||
<a href="#schedule" class="hover:text-yellow-500 transition">Schedule</a>
|
||||
<a href="#tickets" class="hover:text-yellow-500 transition">Tickets</a>
|
||||
<a href="#location" class="hover:text-yellow-500 transition">Location</a>
|
||||
</div>
|
||||
<a href="#tickets" class="btn-primary px-6 py-2 text-sm font-bold rounded-full">GET TICKETS</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/15451078/pexels-photo-15451078.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Brightly lit tulip garden with colorful LED flowers glowing against a night backdrop." class="w-full h-full object-cover">
|
||||
<div class="absolute inset-0 hero-gradient"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 text-center px-4 max-w-4xl">
|
||||
<span class="uppercase tracking-[0.4em] text-sm mb-4 block text-yellow-400 animate-pulse-soft">Autumn Equinox 2024</span>
|
||||
<h1 class="text-6xl md:text-9xl font-bold mb-6 leading-tight">Where Nature <br><i class="font-normal">Meets Light</i></h1>
|
||||
<p class="text-lg md:text-xl mb-10 max-w-2xl mx-auto font-light opacity-90">
|
||||
Join us for a three-night immersive sanctuary. A curated journey of botanical light installations, ethereal soundscapes, and organic artistry.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<a href="#tickets" class="btn-primary px-10 py-4 rounded-full text-lg font-bold">Reserve Your Entry</a>
|
||||
<a href="#experience" class="border border-white/30 hover:bg-white/10 px-10 py-4 rounded-full text-lg font-medium transition">Explore the Grove</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-8 left-8 z-10">
|
||||
<p class="text-[10px] uppercase tracking-widest opacity-60">
|
||||
Photo by <a href="https://www.pexels.com/photo/illuminated-flowers-at-night-15451078/" class="underline hover:text-yellow-500">Suki Lee</a> on Pexels
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About/Experience Section -->
|
||||
<section id="experience" class="py-24 px-6 bg-[#0d1411]">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
||||
<div class="fade-in">
|
||||
<h2 class="text-4xl md:text-6xl mb-8">An Awakening of the <span class="gradient-text">Senses</span></h2>
|
||||
<p class="text-gray-300 mb-6 leading-relaxed">
|
||||
Lumina Garden is not just a festival; it is a living organism. Situated deep within the old grove, we transform the landscape into a luminous tapestry of light and sound.
|
||||
</p>
|
||||
<p class="text-gray-300 mb-8 leading-relaxed">
|
||||
Each night, the grove breathes with interactive installations that react to the movement of the crowd. From bioluminescent pathways to towering "Willow Lanterns" that hum with low-frequency cello tones, every corner tells a different story of harmony between the wild and the woven.
|
||||
</p>
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-center gap-3">
|
||||
<span class="w-2 h-2 bg-yellow-600 rounded-full"></span>
|
||||
<span>Immersive Light Mapping on Ancient Trees</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<span class="w-2 h-2 bg-yellow-600 rounded-full"></span>
|
||||
<span>Spatial Audio Soundscapes by Global Artists</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<span class="w-2 h-2 bg-yellow-600 rounded-full"></span>
|
||||
<span>Botanical Mixology & Organic Dining</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 fade-in">
|
||||
<img src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?auto=format&fit=crop&w=800&q=80" class="rounded-2xl shadow-2xl" alt="Light installation">
|
||||
<img src="https://images.unsplash.com/photo-1501281668745-f7f5848fd94a?auto=format&fit=crop&w=800&q=80" class="rounded-2xl mt-8 shadow-2xl" alt="Garden view">
|
||||
<img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?auto=format&fit=crop&w=800&q=80" class="rounded-2xl shadow-2xl" alt="People dancing">
|
||||
<img src="https://images.unsplash.com/photo-1514525253361-bee8a187499b?auto=format&fit=crop&w=800&q=80" class="rounded-2xl mt-8 shadow-2xl" alt="Music performance">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Schedule Section -->
|
||||
<section id="schedule" class="py-24 px-6 bg-black">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-6xl mb-4">The Rituals</h2>
|
||||
<p class="text-gray-400">A curated progression of events across three nights.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Day 1 -->
|
||||
<div class="glass-card p-8 rounded-3xl fade-in">
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
||||
<div>
|
||||
<h3 class="text-3xl font-bold">Night I: The Awakening</h3>
|
||||
<p class="text-yellow-600 tracking-widest text-sm">FRIDAY | 6:00 PM — 2:00 AM</p>
|
||||
</div>
|
||||
<span class="bg-yellow-600/20 text-yellow-500 px-4 py-1 rounded-full text-xs font-bold uppercase">Atmospheric</span>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-6 text-sm text-gray-400">
|
||||
<div>
|
||||
<p class="font-bold text-white mb-2">Opening Ceremony</p>
|
||||
<p>6:00 PM: A synchronized light show and ceremonial drum circle.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-white mb-2">The Grove Sessions</p>
|
||||
<p>8:00 PM: Ambient electronics and live cello performances.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-white mb-2">Luminous Walk</p>
|
||||
<p>11:00 PM: Guided lantern walk through the deep grove.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Day 2 -->
|
||||
<div class="glass-card p-8 rounded-3xl fade-in">
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
||||
<div>
|
||||
<h3 class="text-3xl font-bold">Night II: The Resonance</h3>
|
||||
<p class="text-yellow-600 tracking-widest text-sm">SATURDAY | 7:00 PM — 4:00 AM</p>
|
||||
</div>
|
||||
<span class="bg-yellow-600/20 text-yellow-500 px-4 py-1 rounded-full text-xs font-bold uppercase">Immersive</span>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-6 text-sm text-gray-400">
|
||||
<div>
|
||||
<p class="font-bold text-white mb-2">Sonic Architecture</p>
|
||||
<p>7:00 PM: Interactive sound installations in the clearing.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-white mb-2">Deep Grove Beats</p>
|
||||
<p>10:00 PM: Deep melodic techno and tribal fusion.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-white mb-2">Celestial Peak</p>
|
||||
<p>1:00 AM: Laser mapping and high-energy sound finale.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Day 3 -->
|
||||
<div class="glass-card p-8 rounded-3xl fade-in">
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
||||
<div>
|
||||
<h3 class="text-3xl font-bold">Night III: The Synthesis</h3>
|
||||
<p class="text-yellow-600 tracking-widest text-sm">SUNDAY | 4:00 PM — 11:00 PM</p>
|
||||
</div>
|
||||
<span class="bg-yellow-600/20 text-yellow-500 px-4 py-1 rounded-full text-xs font-bold uppercase">Collaborative</span>
|
||||
</div><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.14s</div>
|
||||
@@ -0,0 +1,255 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mastering Artisan Bread Baking: The Sourdough Journey</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: #A0522D; /* Sienna Brown - Earthy */
|
||||
--color-secondary: #F5DEB3; /* Wheat/Light Tan */
|
||||
--color-accent: #D2B48C; /* Tan */
|
||||
}
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background-color: #FAF0E6; /* Linen background */
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
transition: background-color 0.3s ease, transform 0.1s ease;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #8B4513; /* Darker Brown */
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.btn-primary:focus {
|
||||
outline: 4px solid #FFDAB9; /* Light peach outline for focus */
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.ingredient-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.ingredient-icon:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navigation Header -->
|
||||
<header class="bg-white shadow-md sticky top-0 z-10">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center py-4">
|
||||
<h1 class="text-3xl font-bold text-sienna tracking-wider">
|
||||
The Hearth Guild
|
||||
</h1>
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#curriculum" class="text-gray-700 hover:text-sienna font-medium transition duration-150">Curriculum</a>
|
||||
<a href="#instructor" class="text-gray-700 hover:text-sienna font-medium transition duration-150">Instructor</a>
|
||||
<a href="#pricing" class="text-gray-700 hover:text-sienna font-medium transition duration-150">Enroll</a>
|
||||
</nav>
|
||||
<a href="#pricing" class="md:hidden text-gray-700 hover:text-sienna font-semibold">Menu</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="bg-cover bg-center py-20 md:py-32"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1518611396458-d556d950f41a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center bg-black bg-opacity-30 p-8 rounded-xl shadow-2xl">
|
||||
<h2 class="text-5xl md:text-7xl font-extrabold text-white mb-4 leading-tight tracking-tight">
|
||||
Master Artisan Bread Baking
|
||||
</h2>
|
||||
<p class="text-xl md:text-2xl text-sienna mb-10 font-light italic">
|
||||
Transform simple flour, water, and salt into life-changing, naturally leavened loaves.
|
||||
</p>
|
||||
<a href="#pricing" class="btn-primary inline-block px-10 py-4 text-xl text-white font-bold rounded-full shadow-lg uppercase tracking-widest">
|
||||
Start Your Baking Journey
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Curriculum Section -->
|
||||
<section id="curriculum" class="py-20 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-sm uppercase tracking-widest text-sienna mb-2">The Complete Blueprint</h2>
|
||||
<p class="text-5xl font-bold text-gray-800">
|
||||
Course Curriculum
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
<!-- Module 1 -->
|
||||
<div class="bg-white border-t-8 border-sienna p-8 rounded-xl shadow-lg card-hover transition duration-300">
|
||||
<div class="text-4xl mb-4 text-sienna flex items-center">
|
||||
<span class="ingredient-icon mr-3">🌾</span>
|
||||
<h3 class="text-2xl font-bold text-gray-800">Starter Cultivation</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">
|
||||
The foundational science of sourdough. Learn to nurture and maintain a vibrant, active starter from scratch.
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-1 ml-4 text-sm">
|
||||
<li>Hydration Ratios</li>
|
||||
<li>Feeding Schedules</li>
|
||||
<li>Troubleshooting Sluggishness</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Module 2 -->
|
||||
<div class="bg-white border-t-8 border-sienna p-8 rounded-xl shadow-lg card-hover transition duration-300">
|
||||
<div class="text-4xl mb-4 text-sienna flex items-center">
|
||||
<span class="ingredient-icon mr-3">💧</span>
|
||||
<h3 class="text-2xl font-bold text-gray-800">Mixing & Bulk Fermentation</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Mastering the early stages. Techniques for optimal dough development without over-proofing.
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-1 ml-4 text-sm">
|
||||
<li>Autolyse Techniques</li>
|
||||
<li>Stretch & Folds</li>
|
||||
<li>Temperature Control</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Module 3 -->
|
||||
<div class="bg-white border-t-8 border-sienna p-8 rounded-xl shadow-lg card-hover transition duration-300">
|
||||
<div class="text-4xl mb-4 text-sienna flex items-center">
|
||||
<span class="ingredient-icon mr-3">🔥</span>
|
||||
<h3 class="text-2xl font-bold text-gray-800">Baking & Crumb Development</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">
|
||||
The final transformation. Achieving that perfect oven spring and beautiful crust structure.
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-600 space-y-1 ml-4 text-sm">
|
||||
<li>Cold Proofing Science</li>
|
||||
<li>Dutch Oven Mastery</li>
|
||||
<li>Scoring Precision</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Instructor Section -->
|
||||
<section id="instructor" class="py-20 bg-stone-50">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-sm uppercase tracking-widest text-sienna mb-2">Meet The Artisan</h2>
|
||||
<p class="text-5xl font-bold text-gray-800">
|
||||
Learn From A Dedicated Baker
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row items-center gap-10 bg-white p-8 rounded-2xl shadow-xl border-l-8 border-sienna">
|
||||
<!-- Image Placeholder -->
|
||||
<div class="md:w-1/3">
|
||||
<img src="https://images.unsplash.com/photo-1556226423-1f82d582400e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80"
|
||||
alt="Expert bread baker holding sourdough loaf"
|
||||
class="rounded-lg shadow-md w-full h-auto object-cover transition duration-500 hover:shadow-xl">
|
||||
</div>
|
||||
|
||||
<!-- Bio Content -->
|
||||
<div class="md:w-2/3 mt-6 md:mt-0">
|
||||
<h3 class="text-4xl font-bold text-sienna mb-3">Elara Vance</h3>
|
||||
<p class="text-lg text-gray-600 mb-6 italic border-b pb-3 border-sienna">
|
||||
"Baking isn't about following steps; it's about understanding the conversation between water and flour."
|
||||
</p>
|
||||
<p class="text-gray-700 text-lg mb-4 leading-relaxed">
|
||||
Elara has spent the last decade perfecting traditional, slow-fermented bread techniques. A certified culinary artisan, she brings practical, hands-on wisdom to every lesson. Her philosophy centers on respecting the ingredients and the natural processes of fermentation.
|
||||
</p>
|
||||
<p class="text-gray-700 text-lg mb-6 leading-relaxed">
|
||||
She has taught workshops globally, specializing in the subtle art of the long fermentation, ensuring every student leaves with a thriving, robust sourdough culture.
|
||||
</p>
|
||||
<a href="#pricing" class="btn-primary px-6 py-3 text-white font-semibold rounded-lg inline-block">
|
||||
View Course Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing/CTA Section -->
|
||||
<section id="pricing" class="py-24 bg-gray-50">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-sm uppercase tracking-widest text-sienna mb-2">Investment</h2>
|
||||
<p class="text-5xl font-bold text-gray-800">
|
||||
Choose Your Path to Perfect Crust
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 md:p-12 rounded-3xl shadow-2xl border-t-12 border-sienna flex flex-col md:flex-row gap-8 items-start">
|
||||
|
||||
<!-- Pricing Card Content -->
|
||||
<div class="md:w-1/3">
|
||||
<h4 class="text-3xl font-extrabold text-gray-800 mb-2">The Artisan Pass</h4>
|
||||
<p class="text-gray-500 mb-6">
|
||||
Comprehensive access to all modules, video lectures, and downloadable guides.
|
||||
</p>
|
||||
<div class="text-6xl font-bold text-sienna mb-6">
|
||||
$199<span class="text-xl font-medium text-gray-500">/one-time</span>
|
||||
</div>
|
||||
<ul class="space-y-3 mb-8 text-gray-700 text-lg">
|
||||
<li class="flex items-center"><span class="text-green-500 mr-2 text-xl">✓</span> Full Curriculum Access</li>
|
||||
<li class="flex items-center"><span class="text-green-500 mr-2 text-xl">✓</span> Recipe Vault & Guides</li>
|
||||
<li class="flex items-center"><span class="text-green-500 mr-2 text-xl">✓</span> Private Student Forum</li>
|
||||
<li class="flex items-center"><span class="text-green-500 mr-2 text-xl">✓</span> Lifetime Updates</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Card Action -->
|
||||
<div class="md:w-2/3 bg-sienna/5 p-6 rounded-xl border-2 border-sienna shadow-inner">
|
||||
<h3 class="text-3xl font-bold text-sienna mb-4">Ready to Knead the Dough?</h3>
|
||||
<p class="text-gray-700 mb-6">
|
||||
Enroll today and receive a bonus starter kit guide valued at $49. We provide the knowledge; you provide the dedication.
|
||||
</p>
|
||||
<button class="btn-primary w-full py-4 text-white text-xl font-semibold rounded-lg uppercase tracking-widest focus:ring-4 focus:ring-sienna/50">
|
||||
Enroll Now & Bake Better
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-800 text-white py-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<p class="text-lg font-semibold mb-2">The Hearth Guild</p>
|
||||
<p class="text-gray-400 mb-4">© 2024. All rights reserved. Crafted with dedication.</p>
|
||||
<div class="space-x-4">
|
||||
<a href="#curriculum" class="text-gray-400 hover:text-sienna transition duration-150">Curriculum</a>
|
||||
<a href="#instructor" class="text-gray-400 hover:text-sienna transition duration-150">Instructor</a>
|
||||
<a href="#" class="text-gray-400 hover:text-sienna transition duration-150">Privacy Policy</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Simple JS for subtle interaction feedback
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const pricingButton = document.querySelector('#pricing .btn-primary');
|
||||
|
||||
pricingButton.addEventListener('click', () => {
|
||||
alert('Redirecting to secure checkout... Happy Baking!');
|
||||
});
|
||||
|
||||
// Optional: Add subtle animation to the main title on load
|
||||
const heroHeading = document.querySelector('h2');
|
||||
heroHeading.style.opacity = 0;
|
||||
setTimeout(() => {
|
||||
heroHeading.style.transition = 'opacity 1.5s ease-out';
|
||||
heroHeading.style.opacity = 1;
|
||||
}, 100);
|
||||
});
|
||||
</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 29.27s</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,311 @@
|
||||
<!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>Forge & Flow | Holistic Strength & Mobility Coaching</title>
|
||||
<meta name="description" content="Elevate your physical potential with Forge & Flow. A premium coaching experience blending heavy resistance training with functional mobility.">
|
||||
<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,700;1,700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--brand-dark: #0a0a0a;
|
||||
--brand-accent: #d97706;
|
||||
--brand-light: #f8f9fa;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--brand-dark);
|
||||
color: var(--brand-light);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
h1, h2, h3, .serif {
|
||||
font-family: 'Playfair Display', serif;
|
||||
}
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.reveal.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
background-color: var(--brand-accent);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.nav-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: var(--brand-accent);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px -5px rgba(217, 119, 6, 0.4);
|
||||
}
|
||||
.program-card {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
.program-card:hover {
|
||||
border-color: var(--brand-accent);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed w-full z-50 px-6 py-6 md:px-12 flex justify-between items-center transition-all duration-300" id="main-nav">
|
||||
<a href="#" class="text-2xl font-bold serif tracking-tight">FORGE<span class="text-amber-600">&</span>FLOW</a>
|
||||
|
||||
<div class="hidden md:flex space-x-8 items-center uppercase text-xs tracking-[0.2em] font-semibold">
|
||||
<a href="#philosophy" class="nav-link relative py-1">Philosophy</a>
|
||||
<a href="#programs" class="nav-link relative py-1">Programs</a>
|
||||
<a href="#testimonials" class="nav-link relative py-1">Results</a>
|
||||
<a href="#contact" class="px-5 py-2 border border-amber-600 text-amber-600 hover:bg-amber-600 hover:text-white transition-all duration-300">Book Session</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Toggle -->
|
||||
<button class="md:hidden text-white focus:outline-none" aria-label="Open 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 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative min-h-screen flex items-center pt-20 overflow-hidden">
|
||||
<div class="absolute inset-0 z-0">
|
||||
<img src="https://images.pexels.com/photos/27730474/pexels-photo-27730474.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Athletes engage in recovery therapy with cupping and massage in a gym." class="w-full h-full object-cover opacity-40" />
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-[#0a0a0a] via-[#0a0a0a]/80 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-6 md:px-12 relative z-10 grid md:grid-cols-2 gap-12 items-center">
|
||||
<div class="reveal">
|
||||
<h1 class="text-5xl md:text-8xl mb-6 leading-[1.1]">Build Strength.<br><span class="italic text-amber-500">Find Flow.</span></h1>
|
||||
<p class="text-lg md:text-xl text-gray-300 max-w-lg mb-10 leading-relaxed">
|
||||
A high-performance coaching methodology designed to bridge the gap between raw power and fluid movement. Build a body that is as resilient as it is capable.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<a href="#programs" class="btn-primary px-8 py-4 text-black font-bold uppercase text-sm tracking-widest">View Programs</a>
|
||||
<a href="#philosophy" class="px-8 py-4 border border-white/30 hover:border-white transition-all uppercase text-sm tracking-widest">Our Method</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:block reveal delay-200">
|
||||
<div class="relative aspect-[4/5] bg-zinc-800 overflow-hidden group">
|
||||
<img src="https://images.pexels.com/photos/27730474/pexels-photo-27730474.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Athletes engage in recovery therapy with cupping and massage in a gym." class="w-full h-full object-cover opacity-80 grayscale group-hover:grayscale-0 transition-all duration-700" />
|
||||
<div class="absolute bottom-4 left-4 text-xs text-gray-400 bg-black/50 px-3 py-2 backdrop-blur-sm">
|
||||
Photo by <a href="https://www.pexels.com/photo/two-women-are-working-out-in-a-gym-27730474/" class="underline hover:text-amber-500" target="_blank">Jonathan Borba</a> on Pexels
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Philosophy Section -->
|
||||
<section id="philosophy" class="py-24 md:py-36 bg-[#0f0f0f]">
|
||||
<div class="container mx-auto px-6 md:px-12">
|
||||
<div class="max-w-3xl mb-20 reveal">
|
||||
<h2 class="text-amber-600 uppercase tracking-[0.3em] text-sm font-semibold mb-4">The Dual Path</h2>
|
||||
<p class="text-3xl md:text-5xl serif leading-tight">We reject the idea that strength and mobility are mutually exclusive.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-16 md:gap-24">
|
||||
<div class="reveal">
|
||||
<div class="text-amber-600 text-5xl mb-6 font-serif">01</div>
|
||||
<h3 class="text-3xl mb-4">The Forge</h3>
|
||||
<p class="text-gray-400 text-lg leading-relaxed mb-6">
|
||||
True strength requires progressive overload and intentional tension. Our resistance programs focus on structural integrity, hypertrophy, and neurological adaptation. We build the foundation that supports everything else.
|
||||
</p>
|
||||
<ul class="space-y-3 text-sm text-gray-500 uppercase tracking-widest">
|
||||
<li>+ Compound Movements</li>
|
||||
<li>+ Hypertrophy Focus</li>
|
||||
<li>+ Progressive Overload</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="reveal delay-200">
|
||||
<div class="text-amber-600 text-5xl mb-6 font-serif">02</div>
|
||||
<h3 class="text-3xl mb-4">The Flow</h3>
|
||||
<p class="text-gray-400 text-lg leading-relaxed mb-6">
|
||||
Strength without range is a prison. We integrate functional mobility and active recovery to ensure your body remains fluid, injury-resistant, and ready for the demands of everyday life.
|
||||
</p>
|
||||
<ul class="space-y-3 text-sm text-gray-500 uppercase tracking-widest">
|
||||
<li>+ Dynamic Mobility</li>
|
||||
<li>+ Joint Articulation</li>
|
||||
<li>+ Recovery Protocols</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Programs Section -->
|
||||
<section id="programs" class="py-24 md:py-36">
|
||||
<div class="container mx-auto px-6 md:px-12">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6 reveal">
|
||||
<div class="max-w-xl">
|
||||
<h2 class="text-4xl md:text-6xl serif mb-6">Tailored Approaches</h2>
|
||||
<p class="text-gray-400">Choose the level of commitment that fits your current life stage.</p>
|
||||
</div>
|
||||
<a href="#contact" class="text-amber-500 border-b border-amber-500 pb-1 hover:text-white hover:border-white transition-all">Request Consultation</a>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Program 1 -->
|
||||
<div class="program-card p-10 flex flex-col reveal">
|
||||
<span class="text-amber-600 text-sm font-bold tracking-widest uppercase mb-4">The Foundation</span>
|
||||
<h3 class="text-3xl mb-6">Base Level</h3>
|
||||
<p class="text-gray-400 mb-8 flex-grow">Perfect for those starting their journey. We focus on fundamental movement patterns and building a consistent habit.</p>
|
||||
<div class="text-4xl font-serif mb-8">$199<span class="text-sm text-gray-500 ml-2">/month</span></div>
|
||||
<a href="#contact" class="block text-center py-4 border border-white/10 hover:bg-white hover:text-black transition-all uppercase text-xs tracking-widest font-bold">Select Program</a>
|
||||
</div>
|
||||
|
||||
<!-- Program 2 -->
|
||||
<div class="program-card p-10 flex flex-col reveal delay-100 border-amber-600/50 bg-[#1a1a1a] scale-105 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 bg-amber-600 text-black text-[10px] font-bold px-4 py-1 uppercase tracking-tighter">Popular</div>
|
||||
<span class="text-amber-600 text-sm font-bold tracking-widest uppercase mb-4">The Athlete</span>
|
||||
<h3 class="text-3xl mb-6">Performance</h3>
|
||||
<p class="text-gray-400 mb-8 flex-grow">For the dedicated individual seeking measurable gains in power, agility, and metabolic efficiency.</p>
|
||||
<div class="text-4xl font-serif mb-8">$349<span class="text-sm text-gray-500 ml-2">/month</span></div>
|
||||
<a href="#contact" class="block text-center py-4 bg-amber-600 text-black uppercase text-xs tracking-widest font-bold">Select Program</a>
|
||||
</div>
|
||||
|
||||
<!-- Program 3 -->
|
||||
<div class="program-card p-10 flex flex-col reveal delay-200">
|
||||
<span class="text-amber-600 text-sm font-bold tracking-widest uppercase mb-4">The Mastery</span>
|
||||
<h3 class="text-3xl mb-6">Elite Coaching</h3>
|
||||
<p class="text-gray-400 mb-8 flex-grow">Full-service lifestyle management. Nutrition, weekly check-ins, and personalized biomechanical analysis.</p>
|
||||
<div class="text-4xl font-serif mb-8">$599<span class="text-sm text-gray-500 ml-2">/month</span></div>
|
||||
<a href="#contact" class="block text-center py-4 border border-white/10 hover:bg-white hover:text-black transition-all uppercase text-xs tracking-widest font-bold">Select Program</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonial Section -->
|
||||
<section id="testimonials" class="py-24 md:py-36 bg-zinc-900/50">
|
||||
<div class="container mx-auto px-6 md:px-12 text-center">
|
||||
<div class="max-w-4xl mx-auto reveal">
|
||||
<svg class="w-16 h-16 text-amber-600/30 mx-auto mb-8" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21L14.017 18C14.017 16.897 14.914 16 16.017 16H19.017C20.12 16 21.017 16.897 21.017 18V21H14.017ZM3.017 21L3.017 18C3.017 16.897 3.914 16 5.017 16H8.017C9.12 16 10.017 16.897 10.017 18V21H3.017ZM14.017 7L14.017 4C14.017 2.897 14.914 2 16.017 2H19.017C20.12 2 21.017 2.897 21.017 4V7H14.017ZM5.017 7H8.017C9.12 7 10.017 7.897 10.017 9V12H5.017V7Z"></path></svg>
|
||||
<p class="text-2xl md:text-4xl serif italic mb-10 leading-relaxed">
|
||||
"Forge & Flow changed my perception of what training can be. I'm lifting heavier than I was in my early twenties, but I feel more mobile and fluid than ever before."
|
||||
</p>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="h-1 w-12 bg-amber-600 mb-4"></div>
|
||||
<h4 class="text-lg font-semibold uppercase tracking-widest">Julian Sterling</h4>
|
||||
<p class="text-gray-500 text-sm">Professional Athlete</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="py-24 md:py-36">
|
||||
<div class="container mx-auto px-6 md:px-12 grid md:grid-cols-2 gap-16">
|
||||
<div class="reveal">
|
||||
<h2 class="text-4xl md:text-6xl serif mb-8">Start Your <br><span class="text-amber-600">Transformation.</span></h2>
|
||||
<p class="text-gray-400 text-lg mb-12">Ready to redefine your capabilities? Fill out the form or reach out via email to book your initial movement assessment.</p>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 text-amber-600">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5H16a2 2 0 002-2V6a2 2 0 00-2-2H8.028a2 2 0 00-1.536.832l-1.74 2.666A2 2 0 014.172 12H4m10 0v1a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h2.5M16 3a2 2 0 100 4 2 2 0 000-4z"></path></svg>
|
||||
</div>
|
||||
<span class="text-lg">hello@forgeandflow.com</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 text-amber-600">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||
</div>
|
||||
<span class="text-lg">Austin, TX • Global Online</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reveal delay-200">
|
||||
<form class="space-y-6" onsubmit="event.preventDefault(); alert('Thank you for reaching out. We will contact you shortly.');">
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs uppercase tracking-widest text-gray-500 mb-2 ml-1" for="name">Full Name</label>
|
||||
<input type="text" id="name" required class="bg-[#1a1a1a] border border-white/10 p-4 text-white focus:border-amber-600 focus:ring-1 focus:ring-amber-600 outline-none transition-all" placeholder="John Doe">
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs uppercase tracking-widest text-gray-500 mb-2 ml-1" for="email">Email Address</label>
|
||||
<input type="email" id="email" required class="bg-[#1a1a1a] border border-white/10 p-4 text-white focus:border-amber-600 focus:ring-1 focus:ring-amber-600 outline-none transition-all" placeholder="john@example.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs uppercase tracking-widest text-gray-500 mb-2 ml-1" for="goal">Primary Goal</label>
|
||||
<select id="goal" class="bg-[#1a1a1a] border border-white/10 p-4 text-white focus:border-amber-600 focus:ring-1 focus:ring-amber-600 outline-none transition-all">
|
||||
<option value="strength">Strength & Power</option>
|
||||
<option value="mobility">Mobility & Longevity</option>
|
||||
<option value="hybrid">Hybrid Performance</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs uppercase tracking-widest text-gray-500 mb-2 ml-1" for="message">Message</label>
|
||||
<textarea id="message" rows="4" class="bg-[#1a1a1a] border border-white/10 p-4 text-white focus:border-amber-600 focus:ring-1 focus:ring-amber-600 outline-none transition-all" placeholder="Tell us about your current training..."></textarea>
|
||||
</div>
|
||||
<button type="submit" class="w-full btn-primary py-5 text-black font-bold uppercase text-sm tracking-[0.2em]">Send Application</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 border-t border-white/5">
|
||||
<div class="container mx-auto px-6 md:px-12 flex flex-col md:flex-row justify-between items-center gap-8">
|
||||
<div class="serif text-xl font-bold">FORGE<span class="text-amber-600">&</span>FLOW</div>
|
||||
<div class="flex space-x-8 text-xs uppercase tracking-widest text-gray-500">
|
||||
<a href="#" class="hover:text-white transition-colors">Instagram</a>
|
||||
<a href="#" class="hover:text-white transition-colors">YouTube</a>
|
||||
<a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 uppercase tracking-widest">
|
||||
© 2024 Forge & Flow Coaching. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Navigation Scroll Effect
|
||||
window.addEventListener('scroll', () => {
|
||||
const nav = document.getElementById('main-nav');
|
||||
if (window.scrollY > 50) {
|
||||
nav.classList.add('bg-[#0a0a0a]/95', 'backdrop-blur-md', 'shadow-lg', 'py-4');
|
||||
nav.classList.remove('py-6');
|
||||
} else {
|
||||
nav.classList.remove('bg-[#0a0a0a]/95', 'backdrop-blur-md', 'shadow-lg', 'py-4');
|
||||
nav.classList.add('py-6');
|
||||
}
|
||||
});
|
||||
|
||||
// Intersection Observer for Reveal Animations
|
||||
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 90.70s</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,175 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Paws & Companions | Local Pet Adoption Center</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom configuration for Tailwind to add subtle depth and custom colors */
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'primary-blue': '#3b82f6',
|
||||
'secondary-green': '#10b981',
|
||||
'background-light': '#f9fafb',
|
||||
'text-dark': '#1f2937',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
serif: ['Merriweather', 'serif'],
|
||||
},
|
||||
boxShadow: {
|
||||
'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Merriweather:wght@700&display=swap" rel="stylesheet">
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light text-text-dark font-sans antialiased">
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-md">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<div class="flex items-center">
|
||||
<span class="text-3xl font-extrabold text-primary-blue tracking-tight">Paws & Companions</span>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#adoption" class="text-text-dark hover:text-primary-blue transition duration-300 font-semibold">Adoptions</a>
|
||||
<a href="#animals" class="text-text-dark hover:text-primary-blue transition duration-300 font-semibold">Meet Our Pets</a>
|
||||
<a href="#how-it-works" class="text-text-dark hover:text-primary-blue transition duration-300 font-semibold">Get Involved</a>
|
||||
<a href="#contact" class="text-text-dark hover:text-primary-blue transition duration-300 font-semibold">Contact</a>
|
||||
</nav>
|
||||
<a href="#adoption" class="hidden md:inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-secondary-green hover:bg-green-600 transition duration-300">Adopt Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative bg-white overflow-hidden pt-16 pb-20 sm:pt-24 sm:pb-32">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
|
||||
<div class="grid lg:grid-cols-12 gap-10 items-center">
|
||||
<!-- Text Content -->
|
||||
<div class="lg:col-span-6 text-center lg:text-left">
|
||||
<h1 class="text-5xl sm:text-6xl lg:text-7xl font-extrabold leading-tight mb-4 text-text-dark">
|
||||
Find Your Forever Friend
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 mb-8 max-w-lg mx-auto lg:mx-0">
|
||||
Open our doors and give a deserving animal a second chance at a happy, loving home. Every adoption makes a difference.
|
||||
</p>
|
||||
<a href="#adoption" class="inline-block bg-primary-blue text-white text-lg font-bold py-3 px-8 rounded-lg shadow-lg hover:bg-blue-700 transform hover:scale-[1.02] transition duration-300 focus:outline-none focus:ring-4 focus:ring-primary-blue/50">
|
||||
View Available Pets
|
||||
</a>
|
||||
</div>
|
||||
<!-- Image -->
|
||||
<div class="lg:col-span-6">
|
||||
<img src="https://images.pexels.com/photos/16465597/pexels-photo-16465597.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="A cute dog behind a wire fence in a shelter enclosure, looking towards the camera." class="w-full h-96 object-cover rounded-xl shadow-2xl transform hover:scale-[1.01] transition duration-500 ease-in-out">
|
||||
<p class="mt-4 text-sm text-gray-500 italic">Photo by Mia X on Pexels</p>
|
||||
<a href="https://www.pexels.com/photo/cute-dog-standing-behind-fence-16465597/" class="text-xs text-primary-blue hover:underline mt-1 inline-block">View Source Photo</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Adoption Process Section -->
|
||||
<section id="adoption" class="py-20 bg-background-light">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl font-bold text-text-dark mb-4">How Adoption Works</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">A simple, compassionate process designed to connect loving families with wonderful pets.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
<!-- Step 1 -->
|
||||
<div class="bg-white p-8 rounded-xl shadow-card-hover text-center border-t-4 border-primary-blue transition duration-300 hover:shadow-xl">
|
||||
<div class="w-16 h-16 mx-auto bg-primary-blue/10 rounded-full flex items-center justify-center mb-4">
|
||||
<svg class="w-8 h-8 text-primary-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a1.5 1.5 0 011.5 1.5v3a1.5 1.5 0 01-1.5 1.5H5.75a1.5 1.5 0 01-1.5-1.5v-3a1.5 1.5 0 011.5-1.5h6a1.5 1.5 0 011.5 1.5v3a1.5 1.5 0 01-1.5 1.5h-1.5"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Apply Online</h3>
|
||||
<p class="text-gray-600">Fill out our application form detailing your lifestyle and experience. We seek responsible caretakers.</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="bg-white p-8 rounded-xl shadow-card-hover text-center border-t-4 border-secondary-green transition duration-300 hover:shadow-xl">
|
||||
<div class="w-16 h-16 mx-auto bg-secondary-green/10 rounded-full flex items-center justify-center mb-4">
|
||||
<svg class="w-8 h-8 text-secondary-green" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V3"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Meet & Connect</h3>
|
||||
<p class="text-gray-600">Our team matches you with the perfect companion based on temperament and needs.</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="bg-white p-8 rounded-xl shadow-card-hover text-center border-t-4 border-primary-blue transition duration-300 hover:shadow-xl">
|
||||
<div class="w-16 h-16 mx-auto bg-primary-blue/10 rounded-full flex items-center justify-center mb-4">
|
||||
<svg class="w-8 h-8 text-primary-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V7a2 2 0 00-2-2H8a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Happy Tails</h3>
|
||||
<p class="text-gray-600">Celebrate the joy! We support your journey together with resources and support.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Animals Section -->
|
||||
<section id="animals" class="py-20 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl font-bold text-text-dark mb-4">Our Wonderful Residents</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Meet some of the sweet, deserving animals waiting for their loving forever homes today.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Animal Card 1 -->
|
||||
<div class="bg-background-light rounded-xl overflow-hidden shadow-card-hover group transform hover:-translate-y-2 transition duration-500">
|
||||
<img src="https://via.placeholder.com/600x400?text=Buddy+The+Dog" alt="Buddy the Golden Retriever" class="w-full h-48 object-cover group-hover:opacity-90 transition duration-500">
|
||||
<div class="p-5">
|
||||
<h3 class="text-2xl font-bold text-primary-blue mb-2">Buddy</h3>
|
||||
<p class="text-gray-600 mb-3">Golden Retriever Mix</p>
|
||||
<p class="text-sm text-gray-500 mb-4 line-clamp-3">Buddy loves long walks and belly rubs. He's looking for a family who can offer a warm, stable environment.</p>
|
||||
<button class="w-full bg-secondary-green text-white py-2 rounded-lg font-semibold hover:bg-green-600 transition duration-300 focus:outline-none">View Profile</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Animal Card 2 -->
|
||||
<div class="bg-background-light rounded-xl overflow-hidden shadow-card-hover group transform hover:-translate-y-2 transition duration-500">
|
||||
<img src="https://via.placeholder.com/600x400?text=Luna+The+Cat" alt="Luna the Calico Cat" class="w-full h-48 object-cover group-hover:opacity-90 transition duration-500">
|
||||
<div class="p-5">
|
||||
<h3 class="text-2xl font-bold text-primary-blue mb-2">Luna</h3>
|
||||
<p class="text-gray-600 mb-3">Calico Cat</p>
|
||||
<p class="text-sm text-gray-500 mb-4 line-clamp-3">Luna is a gentle soul, happiest curled up in a sunny spot. She thrives with calm, patient companionship.</p>
|
||||
<button class="w-full bg-secondary-green text-white py-2 rounded-lg font-semibold hover:bg-green-600 transition duration-300 focus:outline-none">View Profile</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Animal Card 3 -->
|
||||
<div class="bg-background-light rounded-xl overflow-hidden shadow-card-hover group transform hover:-translate-y-2 transition duration-500">
|
||||
<img src="https://via.placeholder.com/600x400?text=Max+The+Rabbit" alt="Max the Lop Rabbit" class="w-full h-48 object-cover group-hover:opacity-90 transition duration-500">
|
||||
<div class="p-5">
|
||||
<h3 class="text-2xl font-bold text-primary-blue mb-2">Max</h3>
|
||||
<p class="text-gray-600 mb-3">Lop Rabbit</p>
|
||||
<p class="text-sm text-gray-500 mb-4 line-clamp-3">Max loves fresh vegetables and quiet playtime. A gentle companion perfect for a peaceful home.</p>
|
||||
<button class="w-full bg-secondary-green text-white py-2 rounded-lg font-semibold hover:bg-green-600 transition duration-300 focus:outline-none">View Profile</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-12">
|
||||
<a href="#" class="inline-block text-lg font-semibold text-primary-blue hover:text-blue-700 border-b-2 border-primary-blue/50">See All Available Animals →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact / Footer Section -->
|
||||
<footer id="contact" class="bg-text-dark text-white py-12">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Column 1: About -->
|
||||
<div>
|
||||
<h4 class="text-2xl font-bold mb-4 text-primary-blue">About Us</h4>
|
||||
<p class="text-gray-400 mb-4">
|
||||
Paws & Companions is dedicated to fostering compassion and creating safe pathways for animals in need. We work tirelessly to ensure<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 18.70s</div>
|
||||
@@ -0,0 +1,210 @@
|
||||
<!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>EIDOS | Architectural Studio</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 {
|
||||
--accent: #8B4513;
|
||||
--bg: #F9F9F9;
|
||||
--text: #1A1A1A;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
h1, h2, h3, .serif {
|
||||
font-family: 'Playfair Display', serif;
|
||||
}
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.reveal.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.project-card:hover .project-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
.nav-blur {
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
background-color: rgba(249, 249, 249, 0.8);
|
||||
}
|
||||
.line-separator {
|
||||
height: 1px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
width: 100%;
|
||||
}
|
||||
.custom-cursor {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid var(--text);
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
<div class="custom-cursor hidden md:block"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full z-50 border-b border-transparent nav-blur transition-all duration-300" id="mainNav">
|
||||
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<a href="#" class="text-2xl font-bold tracking-tighter">EIDOS</a>
|
||||
<div class="hidden md:flex space-x-10 text-xs uppercase tracking-widest font-medium">
|
||||
<a href="#work" class="hover:text-orange-800 transition-colors">Work</a>
|
||||
<a href="#studio" class="hover:text-orange-800 transition-colors">Studio</a>
|
||||
<a href="#journal" class="hover:text-orange-800 transition-colors">Journal</a>
|
||||
<a href="#contact" class="hover:text-orange-800 transition-colors">Contact</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 -->
|
||||
<section class="relative h-screen w-full flex items-center justify-center overflow-hidden bg-white">
|
||||
<div class="absolute inset-0 z-0">
|
||||
<img src="https://images.pexels.com/photos/6614747/pexels-photo-6614747.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="High-angle view of a desk with blueprints, sketches, and architectural tools." class="w-full h-full object-cover grayscale-[30%] opacity-90">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-white/40"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 text-center px-6 max-w-5xl">
|
||||
<h1 class="text-6xl md:text-9xl font-bold mb-6 leading-tight tracking-tighter">Sculpting the Void.</h1>
|
||||
<p class="text-lg md:text-xl max-w-2xl mx-auto mb-10 font-light tracking-wide">
|
||||
A practice dedicated to the intersection of raw materiality, human movement, and the quietude of structural honesty.
|
||||
</p>
|
||||
<div class="flex justify-center">
|
||||
<a href="#work" class="border border-black px-10 py-4 text-xs uppercase tracking-widest hover:bg-black hover:text-white transition-all duration-300">Explore Projects</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10">
|
||||
<p class="text-[10px] uppercase tracking-widest text-gray-600">
|
||||
Photo by <a href="https://www.pexels.com/photo/printed-designs-and-drawings-over-the-work-table-6614747/" class="underline decoration-dotted">Tima Miroshnichenko</a> on Pexels
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Philosophy / Intro -->
|
||||
<section id="studio" class="py-32 px-6 bg-white">
|
||||
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-20 items-center">
|
||||
<div class="reveal">
|
||||
<h2 class="text-4xl md:text-6xl mb-8">The Architecture of Silence.</h2>
|
||||
<div class="line-separator mb-8"></div>
|
||||
<p class="text-gray-600 leading-relaxed mb-6">
|
||||
At Eidos, we believe that a building's primary function is to provide a vessel for experience. We don't just build structures; we curate the way light interacts with stone, the way air flows through corridors, and the way inhabitants perceive their own movement.
|
||||
</p>
|
||||
<p class="text-gray-600 leading-relaxed">
|
||||
Our approach is rooted in "Quiet Brutalism"—the celebration of honest materials: exposed concrete, charred wood, and locally sourced limestone. We strip away the superfluous to reveal the essential.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 reveal">
|
||||
<div class="aspect-square bg-gray-100 flex items-center justify-center p-8 text-center border border-gray-200">
|
||||
<p class="text-xs uppercase tracking-widest">Materiality over<br>Ornament</p>
|
||||
</div>
|
||||
<div class="aspect-square bg-gray-200 mt-12 flex items-center justify-center p-8 text-center border border-gray-200">
|
||||
<p class="text-xs uppercase tracking-widest">Spatial Flow<br>Dynamics</p>
|
||||
</div>
|
||||
<div class="aspect-square bg-gray-100 flex items-center justify-center p-8 text-center border border-gray-200">
|
||||
<p class="text-xs uppercase tracking-widest">Sustainable<br>Integrity</p>
|
||||
</div>
|
||||
<div class="aspect-square bg-gray-200 mt-12 flex items-center justify-center p-8 text-center border border-gray-200">
|
||||
<p class="text-xs uppercase tracking-widest">Contextual<br>Awareness</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Selected Works -->
|
||||
<section id="work" class="py-32 bg-[#F2F2F2] px-6">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-20 reveal">
|
||||
<div>
|
||||
<span class="text-xs uppercase tracking-[0.3em] text-gray-400">Selected Works</span>
|
||||
<h2 class="text-5xl md:text-7xl mt-2">Portfolio.</h2>
|
||||
</div>
|
||||
<p class="max-w-xs text-sm text-gray-500 mt-4 md:mt-0">
|
||||
A collection of projects that define our commitment to spatial innovation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-16">
|
||||
<!-- Project 1 -->
|
||||
<div class="project-card group reveal">
|
||||
<div class="relative aspect-[4/5] bg-gray-300 overflow-hidden mb-6">
|
||||
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-500 z-10"></div>
|
||||
<div class="project-overlay absolute inset-0 opacity-0 flex flex-col justify-center items-center text-white transition-opacity duration-500 z-20">
|
||||
<h3 class="text-3xl mb-4">The Obsidian Pavilion</h3>
|
||||
<p class="text-sm tracking-widest">Residential / Norway</p>
|
||||
</div>
|
||||
<div class="w-full h-full bg-gray-400 flex items-center justify-center text-gray-600 italic">Image Placeholder</div>
|
||||
</div>
|
||||
<h3 class="text-2xl">The Obsidian Pavilion</h3>
|
||||
<p class="text-sm text-gray-500">Norway, 2023</p>
|
||||
</div>
|
||||
|
||||
<!-- Project 2 -->
|
||||
<div class="project-card group reveal">
|
||||
<div class="relative aspect-[4/5] bg-gray-400 overflow-hidden mb-6">
|
||||
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-500 z-10"></div>
|
||||
<div class="project-overlay absolute inset-0 opacity-0 flex flex-col justify-center items-center text-white transition-opacity duration-500 z-20">
|
||||
<h3 class="text-3xl mb-4">Looming Glass Library</h3>
|
||||
<p class="text-sm tracking-widest">Berlin, 2022</p>
|
||||
</div>
|
||||
<div class="w-full h-full bg-gray-500 flex items-center justify-center text-gray-400 italic">Image Placeholder</div>
|
||||
</div>
|
||||
<h3 class="text-2xl">Looming Glass Library</h3>
|
||||
<p class="text-sm text-gray-500">Germany, 2022</p>
|
||||
</div>
|
||||
|
||||
<!-- Project 3 -->
|
||||
<div class="project-card group reveal">
|
||||
<div class="relative aspect-[4/5] bg-gray-300 overflow-hidden mb-6">
|
||||
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-500 z-10"></div>
|
||||
<div class="project-overlay absolute inset-0 opacity-0 flex flex-col justify-center items-center text-white transition-opacity duration-500 z-20">
|
||||
<h3 class="text-3xl mb-4">Silt Residence</h3>
|
||||
<p class="text-sm tracking-widest">Kyoto, 2021</p>
|
||||
</div>
|
||||
<div class="w-full h-full bg-gray-400 flex items-center justify-center text-gray-600 italic">Image Placeholder</div>
|
||||
</div>
|
||||
<h3 class="text-2xl">Silt Residence</h3>
|
||||
<p class="text-sm text-gray-500">Japan, 2021</p>
|
||||
</div>
|
||||
|
||||
<!-- Project 4 -->
|
||||
<div class="project-card group reveal">
|
||||
<div class="relative aspect-[4/5] bg-gray-500 overflow-hidden mb-6">
|
||||
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-500 z-10"></div>
|
||||
<div class="project-overlay absolute inset-0 opacity-0 flex flex-col justify-center items-center text-white transition-opacity duration-500 z-20">
|
||||
<h3 class="text-3xl mb-4">Monolith Gallery</h3>
|
||||
<p class="text-sm tracking-widest">Paris, 2024</p>
|
||||
</div>
|
||||
<div class="w-full h-full bg-gray-600 flex items-center justify-center text-gray-400 italic">Image Placeholder</div>
|
||||
</div>
|
||||
<h3 class="text-2xl">Monolith Gallery</h3>
|
||||
<p class="text-sm text-gray-500">France, 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process Section -->
|
||||
<section class="py-32 bg-white px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2<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.07s</div>
|
||||
@@ -0,0 +1,198 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Elias Vance | Architectural Portfolio</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom configuration for Tailwind to enhance typography and color */
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'primary-dark': '#1a1a1a',
|
||||
'accent-gold': '#d4af37',
|
||||
'light-stone': '#f5f5f5',
|
||||
'text-muted': '#a0a0a0',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
serif: ['Playfair Display', 'serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-white font-sans text-primary-dark antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<header class="sticky top-0 z-50 bg-white/95 backdrop-blur-sm shadow-md border-b border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<a href="#" class="text-3xl font-extrabold tracking-tight text-primary-dark hover:text-accent-gold transition duration-300">
|
||||
Elias Vance
|
||||
</a>
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#work" class="text-text-muted hover:text-accent-gold font-medium transition duration-300 border-b-2 border-transparent hover:border-accent-gold pb-1">Projects</a>
|
||||
<a href="#philosophy" class="text-text-muted hover:text-accent-gold font-medium transition duration-300 border-b-2 border-transparent hover:border-accent-gold pb-1">Philosophy</a>
|
||||
<a href="#contact" class="text-text-muted hover:text-accent-gold font-medium transition duration-300 border-b-2 border-transparent hover:border-accent-gold pb-1">Contact</a>
|
||||
</nav>
|
||||
<button class="md:hidden p-2 rounded-md text-primary-dark hover:bg-light-stone transition duration-300" aria-label="Toggle navigation menu">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative bg-primary-dark text-white h-[70vh] flex items-center justify-center overflow-hidden">
|
||||
<!-- Background Image -->
|
||||
<img src="https://images.pexels.com/photos/5647658/pexels-photo-5647658.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Low angle of gloomy African American man in trendy outfit standing with folder with documents in hands and looking away in daytime" class="absolute inset-0 h-full w-full object-cover opacity-50">
|
||||
|
||||
<!-- Overlay for readability -->
|
||||
<div class="absolute inset-0 bg-primary-dark/70"></div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="relative z-10 text-center max-w-4xl px-4">
|
||||
<p class="text-xl sm:text-2xl font-light mb-4 tracking-widest uppercase text-accent-gold animate-fadeInUp">Architectural Vision</p>
|
||||
<h1 class="text-6xl sm:text-8xl font-extrabold mb-6 leading-tight tracking-tighter drop-shadow-lg">
|
||||
Designing Spaces That Breathe
|
||||
</h1>
|
||||
<p class="text-lg sm:text-xl text-gray-300 mb-10 max-w-3xl mx-auto font-light">
|
||||
I craft tangible environments where form meets function, prioritizing human experience and enduring materiality.
|
||||
</p>
|
||||
<a href="#work" class="inline-block bg-accent-gold text-primary-dark font-bold py-3 px-10 rounded-full text-lg hover:bg-yellow-400 transition duration-500 shadow-xl transform hover:scale-105 border-2 border-accent-gold">
|
||||
View Portfolio
|
||||
</a>
|
||||
</div>
|
||||
<!-- Attribution -->
|
||||
<div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 text-sm text-gray-400">
|
||||
Photo by Ono Kosuki on Pexels | <a href="https://www.pexels.com/photo/thoughtful-black-entrepreneur-with-folder-standing-on-street-5647658/" target="_blank" class="hover:text-accent-gold">Source Image</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects Section -->
|
||||
<section id="work" class="py-24 bg-light-stone">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-5xl font-bold text-center mb-4 text-primary-dark border-b-4 border-accent-gold inline-block pb-1 mx-auto">Selected Works</h2>
|
||||
<p class="text-center text-lg text-text-muted mb-12 max-w-2xl mx-auto">A curated selection of residential and commercial projects demonstrating a commitment to sustainable and refined design.</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-10">
|
||||
<!-- Project Card 1 -->
|
||||
<div class="bg-white rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition duration-500 group border border-gray-100">
|
||||
<img src="https://via.placeholder.com/600x400?text=Resort+Estate+Alpha" alt="Project Alpha" class="w-full h-56 object-cover group-hover:opacity-90 transition duration-500">
|
||||
<div class="p-6">
|
||||
<h3 class="text-2xl font-bold mb-2 text-primary-dark">Resort Estate Alpha</h3>
|
||||
<p class="text-accent-gold font-semibold mb-3">Residential / Hospitality</p>
|
||||
<p class="text-text-muted mb-4 line-clamp-3">A study in natural integration, balancing expansive views with intimate, textured interior spaces. Focus on passive climate control.</p>
|
||||
<a href="#" class="text-accent-gold font-medium flex items-center group-hover:text-amber-600 transition duration-300">
|
||||
Explore Details
|
||||
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Card 2 -->
|
||||
<div class="bg-white rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition duration-500 group border border-gray-100">
|
||||
<img src="https://via.placeholder.com/600x400?text=Urban+Loft+Studio" alt="Project Beta" class="w-full h-56 object-cover group-hover:opacity-90 transition duration-500">
|
||||
<div class="p-6">
|
||||
<h3 class="text-2xl font-bold mb-2 text-primary-dark">Urban Loft Studio</h3>
|
||||
<p class="text-accent-gold font-semibold mb-3">Commercial / Adaptive Reuse</p>
|
||||
<p class="text-text-muted mb-4 line-clamp-3">An exploration of dense urban living, maximizing vertical space while ensuring optimal daylight penetration and material honesty.</p>
|
||||
<a href="#" class="text-accent-gold font-medium flex items-center group-hover:text-amber-600 transition duration-300">
|
||||
Explore Details
|
||||
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Philosophy Section -->
|
||||
<section id="philosophy" class="py-24 bg-white">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<p class="text-accent-gold text-lg font-semibold mb-2 uppercase tracking-wider">The Design Ethos</p>
|
||||
<h2 class="text-5xl font-extrabold text-primary-dark">Beyond Aesthetics: Intentional Design</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
<!-- Philosophy Pillar 1 -->
|
||||
<div class="text-center p-6 bg-light-stone rounded-lg shadow-lg hover:shadow-xl transition duration-300 transform hover:-translate-y-2 border-t-4 border-accent-gold">
|
||||
<div class="text-5xl mb-4 text-accent-gold">🌿</div>
|
||||
<h3 class="text-2xl font-bold mb-3 text-primary-dark">Sustainability</h3>
|
||||
<p class="text-text-muted">Prioritizing low-impact materials and passive strategies to create structures that respect the environment and minimize ecological footprint.</p>
|
||||
</div>
|
||||
|
||||
<!-- Philosophy Pillar 2 -->
|
||||
<div class="text-center p-6 bg-light-stone rounded-lg shadow-lg hover:shadow-xl transition duration-300 transform hover:-translate-y-2 border-t-4 border-accent-gold">
|
||||
<div class="text-5xl mb-4 text-accent-gold">📐</div>
|
||||
<h3 class="text-2xl font-bold mb-3 text-primary-dark">Precision</h3>
|
||||
<p class="text-text-muted">Every line and volume is calculated. A relentless pursuit of structural integrity and flawless execution in every detail.</p>
|
||||
</div>
|
||||
|
||||
<!-- Philosophy Pillar 3 -->
|
||||
<div class="text-center p-6 bg-light-stone rounded-lg shadow-lg hover:shadow-xl transition duration-300 transform hover:-translate-y-2 border-t-4 border-accent-gold">
|
||||
<div class="text-5xl mb-4 text-accent-gold">👤</div>
|
||||
<h3 class="text-2xl font-bold mb-3 text-primary-dark">Human Scale</h3>
|
||||
<p class="text-text-muted">Architecture should serve people. Designing environments that foster well-being, connection, and intuitive movement.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="py-24 bg-primary-dark text-white">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-5xl font-extrabold mb-4">Let's Build Something Together</h2>
|
||||
<p class="text-xl text-gray-300 mb-10">Whether you have a concept or a challenge, I welcome a conversation.</p>
|
||||
|
||||
<a href="mailto:elias.vance@architecture.com" class="inline-block bg-accent-gold text-primary-dark font-bold py-3 px-8 rounded-lg text-lg hover:bg-yellow-400 transition duration-300 shadow-lg transform hover:scale-105">
|
||||
Email Me Directly
|
||||
</a>
|
||||
|
||||
<div class="mt-12 space-x-6 text-lg">
|
||||
<p class="text-text-muted">Phone: +1 (555) 123-4567</p>
|
||||
<p class="text-text-muted">Portfolio PDF Available Upon Request</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 py-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-text-muted">
|
||||
<p>© 2024 Elias Vance. All Rights Reserved. | Designed with Intent.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Simple JS for subtle animation (optional but adds polish) -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Simple fade-in effect for elements as they scroll into view (Intersection Observer alternative for simplicity here)
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Apply to sections that need the animation
|
||||
document.querySelectorAll('section').forEach(section => {
|
||||
// Apply initial hidden state
|
||||
section.style.opacity = '0';
|
||||
section.style.transform<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 18.76s</div>
|
||||
@@ -0,0 +1,206 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Iron Ascent | Strength Coaching</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom Configuration for Tailwind */
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'primary-red': '#B91C1C', /* Deep Red for intensity */
|
||||
'secondary-gray': '#374151', /* Slate Gray for grounding */
|
||||
'background-dark': '#1F2937', /* Dark Blue/Gray Background */
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
display: ['Impact', 'sans-serif'], /* Bold, strong display font feel */
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
/* Custom CSS for subtle effects */
|
||||
.card-hover:hover {
|
||||
transform: translateY(-5px) scale(1.02);
|
||||
box-shadow: 0 15px 25px rgba(185, 28, 28, 0.3);
|
||||
}
|
||||
.btn-glow {
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 0 0 rgba(185, 28, 28, 0);
|
||||
}
|
||||
.btn-glow:hover {
|
||||
box-shadow: 0 0 0 5px rgba(185, 28, 28, 0.4);
|
||||
}
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Impact&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-background-dark text-gray-100 font-sans antialiased">
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<header class="sticky top-0 z-50 bg-background-dark/95 backdrop-blur-sm shadow-lg border-b border-gray-700">
|
||||
<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 items-center space-x-2">
|
||||
<h1 class="text-3xl font-display text-primary-red tracking-wider uppercase">
|
||||
Iron Ascent
|
||||
</h1>
|
||||
<span class="hidden sm:inline text-sm text-gray-400 ml-2 border-l border-gray-600 pl-2">Strength Coaching</span>
|
||||
</div>
|
||||
<nav class="space-x-6 hidden md:flex">
|
||||
<a href="#philosophy" class="text-gray-300 hover:text-primary-red transition duration-150 text-sm uppercase font-semibold focus:outline-none focus:text-primary-red">Philosophy</a>
|
||||
<a href="#services" class="text-gray-300 hover:text-primary-red transition duration-150 text-sm uppercase font-semibold focus:outline-none focus:text-primary-red">Services</a>
|
||||
<a href="#results" class="text-gray-300 hover:text-primary-red transition duration-150 text-sm uppercase font-semibold focus:outline-none focus:text-primary-red">Results</a>
|
||||
<a href="#contact" class="text-gray-300 hover:text-primary-red transition duration-150 text-sm uppercase font-semibold focus:outline-none focus:text-primary-red">Contact</a>
|
||||
</nav>
|
||||
<a href="#contact" class="md:hidden text-gray-300 focus:outline-none focus:text-primary-red">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-[70vh] flex items-center justify-center text-center bg-cover bg-center"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1519389950473-499a3e273e45?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');">
|
||||
<!-- Overlay for visual depth -->
|
||||
<div class="absolute inset-0 bg-black/60 backdrop-blur-[1px]"></div>
|
||||
<div class="relative z-10 px-4">
|
||||
<h2 class="text-6xl md:text-8xl font-display uppercase mb-4 leading-tight text-white drop-shadow-lg">
|
||||
Forge Your Ascent.
|
||||
</h2>
|
||||
<p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto font-light">
|
||||
Stop guessing. Start progressing. Personalized strength coaching designed to break through plateaus and build unbreakable physical resilience.
|
||||
</p>
|
||||
<a href="#contact" class="inline-block px-10 py-4 text-lg font-bold uppercase bg-primary-red text-white rounded-lg btn-glow shadow-xl transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-4 ring-primary-red/50">
|
||||
Begin The Build
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Philosophy Section -->
|
||||
<section id="philosophy" class="py-20 bg-background-dark border-t border-gray-800">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h3 class="text-sm uppercase tracking-widest text-primary-red mb-2">Our Ethos</h3>
|
||||
<h2 class="text-4xl md:text-5xl font-display text-white">
|
||||
Discipline Over Desire.
|
||||
</h2>
|
||||
<p class="mt-4 text-lg text-gray-400 max-w-3xl mx-auto">
|
||||
We reject quick fixes. Iron Ascent is built on the principle of consistent, intelligent effort. We teach you the mechanics of real strength, ensuring sustainable gains that last a lifetime.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Philosophy Pillars -->
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
<div class="bg-secondary-gray/30 p-8 rounded-xl border-t-4 border-primary-red transition duration-300 shadow-lg hover:shadow-primary-red/30 card-hover">
|
||||
<div class="text-4xl text-primary-red mb-3">⚙️</div>
|
||||
<h4 class="text-2xl font-bold text-white mb-3">Precision Programming</h4>
|
||||
<p class="text-gray-300">No cookie-cutter plans. Every program is calibrated to your current capability and long-term physical targets.</p>
|
||||
</div>
|
||||
<div class="bg-secondary-gray/30 p-8 rounded-xl border-t-4 border-primary-red transition duration-300 shadow-lg hover:shadow-primary-red/30 card-hover">
|
||||
<div class="text-4xl text-primary-red mb-3">🧠</div>
|
||||
<h4 class="text-2xl font-bold text-white mb-3">Movement Mastery</h4>
|
||||
<p class="text-gray-300">Learn the 'why' behind the lift. We focus on perfect form to maximize strength and minimize injury risk.</p>
|
||||
</div>
|
||||
<div class="bg-secondary-gray/30 p-8 rounded-xl border-t-4 border-primary-red transition duration-300 shadow-lg hover:shadow-primary-red/30 card-hover">
|
||||
<div class="text-4xl text-primary-red mb-3">🌱</div>
|
||||
<h4 class="text-2xl font-bold text-white mb-3">Sustainable Growth</h4>
|
||||
<p class="text-gray-300">This is a lifestyle shift, not a temporary diet. Build habits that serve you for decades to come.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section id="services" class="py-24 bg-gray-900 border-t border-gray-800">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h3 class="text-sm uppercase tracking-widest text-primary-red mb-2">Our Offerings</h3>
|
||||
<h2 class="text-4xl md:text-5xl font-display text-white">
|
||||
Choose Your Path To Peak Performance
|
||||
</h2>
|
||||
<p class="mt-4 text-lg text-gray-400 max-w-4xl mx-auto">
|
||||
Whether you are looking to gain functional strength, optimize athletic performance, or simply move with more confidence, we have a tailored coaching structure for you.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Service Cards Grid -->
|
||||
<div class="grid lg:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Service 1: 1-on-1 Coaching -->
|
||||
<div class="bg-background-dark p-8 rounded-xl shadow-2xl border-b-8 border-primary-red transition duration-300 hover:shadow-2xl hover:border-primary-red/80 cursor-pointer card-hover">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="text-4xl mr-3 text-primary-red">👤</span>
|
||||
<h4 class="text-3xl font-bold text-white">1:1 Elite Coaching</h4>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 text-base">The deepest dive. Weekly check-ins, personalized program adjustments, and direct accountability with a dedicated coach.</p>
|
||||
<ul class="text-gray-400 space-y-2 text-sm mb-6 list-disc list-inside">
|
||||
<li>Customized Macrocycles</li>
|
||||
<li>Form Correction Sessions</li>
|
||||
<li>Performance Tracking</li>
|
||||
</ul>
|
||||
<div class="flex justify-between items-center pt-2 border-t border-gray-700">
|
||||
<span class="text-2xl font-bold text-primary-red">$499/month</span>
|
||||
<button class="text-primary-red border-2 border-primary-red px-6 py-2 rounded-full text-sm font-semibold hover:bg-primary-red hover:text-white transition duration-200 focus:outline-none focus:ring-2 ring-primary-red">
|
||||
Enroll Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service 2: Digital Blueprint -->
|
||||
<div class="bg-background-dark p-8 rounded-xl shadow-2xl border-b-8 border-gray-500 transition duration-300 hover:shadow-2xl hover:border-gray-500/80 cursor-pointer card-hover">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="text-4xl mr-3 text-gray-400">💻</span>
|
||||
<h4 class="text-3xl font-bold text-white">Digital Blueprint</h4>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 text-base">Perfect for independent learners. Access structured training modules and exercise libraries on your own schedule.</p>
|
||||
<ul class="text-gray-400 space-y-2 text-sm mb-6 list-disc list-inside">
|
||||
<li>Program Library Access</li>
|
||||
<li>Video Technique Guides</li>
|
||||
<li>Progress Log Templates</li>
|
||||
</ul>
|
||||
<div class="flex justify-between items-center pt-2 border-t border-gray-700">
|
||||
<span class="text-2xl font-bold text-gray-300">$99/month</span>
|
||||
<button class="text-gray-300 border-2 border-gray-500 px-6 py-2 rounded-full text-sm font-semibold hover:bg-gray-700 hover:text-white transition duration-200 focus:outline-none focus:ring-2 ring-gray-500">
|
||||
Start Free Trial
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service 3: Performance Audit -->
|
||||
<div class="bg-background-dark p-8 rounded-xl shadow-2xl border-b-8 border-yellow-500 transition duration-300 hover:shadow-2xl hover:border-yellow-500/80 cursor-pointer card-hover">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="text-4xl mr-3 text-yellow-500">📊</span>
|
||||
<h4 class="text-3xl font-bold text-white">Performance Audit</h4>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 text-base">A one-time intensive review. We assess your current routine, identify bottlenecks, and deliver a strategic action plan.</p>
|
||||
<ul class="text-gray-400 space-y-2 text-sm mb-6 list-disc list-inside">
|
||||
<li>Comprehensive Movement Review</li>
|
||||
<li>Injury Risk Assessment</li>
|
||||
<li>30-Day Action Plan</li>
|
||||
</ul>
|
||||
<div class="flex justify-between items-center pt-2 border-t border-gray-700">
|
||||
<span class="text-2xl font-bold text-yellow-500">$250 (One-Time)</span>
|
||||
<button class="text-yellow-500 border-2 border-yellow-500 px-6 py-2 rounded-full text-sm font-semibold hover:bg-yellow-500 hover:text-background-dark transition duration-200 focus:outline-none focus:ring-2 ring-yellow-500">
|
||||
Schedule Audit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Results/Testimonials Section -->
|
||||
<section id="results" class="py-24 bg-background-dark border-t border-gray-800">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h3 class="text-sm uppercase tracking-widest text-primary-red mb-2">Real Impact</h3>
|
||||
<h2 class="text-4xl md:text-5xl font-display text-white">
|
||||
Transformations Aren't Accidental.
|
||||
</h2>
|
||||
<p class="mt-4 text-lg text-gray-400 max-w-3xl mx-auto">
|
||||
Hear how disciplined effort translates into real, measurable strength and confidence in the lives of our clients.<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.00s</div>
|
||||
@@ -0,0 +1,190 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Community Hearth Project - Warmth for All</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: #B37E4A; /* Warm, earthy gold/brown */
|
||||
--color-secondary: #4A90E2; /* Calming blue for action */
|
||||
}
|
||||
.font-display {
|
||||
font-family: 'Playfair Display', serif;
|
||||
}
|
||||
.font-body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
box-shadow: 0 4px 15px rgba(179, 126, 74, 0.4);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #9c663e;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.progress-bar-fill {
|
||||
transition: width 1s ease-out;
|
||||
}
|
||||
/* Subtle fade-in for content */
|
||||
.content-fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
||||
}
|
||||
.content-fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-gray-50 text-gray-800 font-body antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<header class="sticky top-0 z-30 bg-white shadow-lg">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
||||
<div class="text-2xl font-display text-gray-900 tracking-tighter">
|
||||
Hearth<span class="text-[var(--color-primary)]">.</span>
|
||||
</div>
|
||||
<nav class="hidden md:block">
|
||||
<a href="#mission" class="text-sm font-medium text-gray-600 hover:text-[var(--color-primary)] px-3 transition">Our Cause</a>
|
||||
<a href="#impact" class="text-sm font-medium text-gray-600 hover:text-[var(--color-primary)] px-3 transition">Impact</a>
|
||||
<a href="#donate" class="text-sm font-medium bg-[var(--color-secondary)] text-white px-4 py-2 rounded-full shadow-md hover:bg-blue-600 transition focus:outline-none focus:ring-2 focus:ring-blue-500">Donate Now</a>
|
||||
</nav>
|
||||
<button class="md:hidden text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
<!-- Hamburger Icon -->
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="bg-gray-100 pt-16 pb-20 lg:pt-24 lg:pb-32">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="lg:flex lg:items-center lg:justify-between">
|
||||
<div class="lg:w-3/5">
|
||||
<h1 class="text-6xl lg:text-7xl font-display font-bold text-gray-900 leading-tight mb-4">
|
||||
Bringing Warmth to Every Home.
|
||||
</h1>
|
||||
<p class="text-xl lg:text-2xl text-gray-600 mb-8">
|
||||
The Community Hearth provides essential warmth, resources, and stability to neighbors facing hardship during cold seasons. Your support fuels our mission.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<a href="#donate" class="btn-primary text-white text-lg font-semibold px-10 py-4 rounded-lg shadow-xl hover:shadow-2xl focus:outline-none focus:ring-4 ring-offset-2 ring-offset-white ring-opacity-50">
|
||||
Donate Today
|
||||
</a>
|
||||
<a href="#impact" class="text-center text-lg font-semibold text-gray-700 bg-white border-2 border-gray-300 px-10 py-4 rounded-lg shadow-md hover:bg-gray-50 transition focus:outline-none focus:ring-2 focus:ring-gray-300">
|
||||
See Our Work
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-2/5 mt-10 lg:mt-0">
|
||||
<div class="relative bg-gray-200 rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-500">
|
||||
<!-- Placeholder for a powerful, warm image -->
|
||||
<img src="https://images.unsplash.com/photo-1551537856-b6b758a53a7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Volunteers helping distribute blankets in a community setting" class="w-full h-96 object-cover">
|
||||
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 p-6">
|
||||
<p class="text-white text-3xl font-display font-bold drop-shadow-lg">Warmth Shared.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Donation Progress & Impact Section -->
|
||||
<section id="impact" class="py-20 lg:py-32 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-sm uppercase tracking-widest text-[var(--color-primary)] font-semibold mb-2">Our Current Need</h2>
|
||||
<p class="text-4xl lg:text-5xl font-display font-bold text-gray-900 leading-snug">
|
||||
Fueling Community Resilience
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<!-- Donation Progress Bar -->
|
||||
<div class="lg:sticky lg:top-20">
|
||||
<div class="bg-white p-8 lg:p-10 rounded-xl shadow-2xl border-t-4 border-[var(--color-primary)]">
|
||||
<h3 class="text-3xl font-display font-bold mb-4 text-gray-900">The Campaign Goal</h3>
|
||||
<div class="mb-4">
|
||||
<div class="flex justify-between mb-1 text-sm font-medium">
|
||||
<span>Raised: <span id="raised-amount">$42,500</span></span>
|
||||
<span>Goal: $75,000</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3.5">
|
||||
<div id="progress-bar" class="progress-bar-fill h-3.5 rounded-full bg-[var(--color-secondary)]" style="width: 56.67%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-lg italic text-gray-600 mb-6">Every contribution moves us closer to providing consistent warmth and resources for our neighbors.</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<button onclick="simulateDonation(25)" class="btn-primary w-full py-4 rounded-lg text-white text-lg font-semibold focus:outline-none focus:ring-4 ring-offset-2 ring-offset-white">
|
||||
Give $25 Now
|
||||
</button>
|
||||
<button onclick="simulateDonation(100)" class="btn-primary bg-blue-600 hover:bg-blue-700 w-full py-4 rounded-lg text-white text-lg font-semibold focus:outline-none focus:ring-4 ring-offset-2 ring-offset-white">
|
||||
Give $100 Now
|
||||
</button>
|
||||
<a href="#donate" class="block w-full text-center py-3 border-2 border-[var(--color-primary)] text-[var(--color-primary)] hover:bg-gray-50 transition rounded-lg text-lg font-semibold focus:outline-none focus:ring-2 ring-offset-2 ring-[var(--color-primary)]">
|
||||
Customize Donation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Impact Metrics -->
|
||||
<div class="grid sm:grid-cols-1 gap-8 lg:gap-0">
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg border-l-4 border-yellow-500 transition duration-300 hover:shadow-xl">
|
||||
<p class="text-lg font-semibold text-gray-500 mb-1">Families Supported</p>
|
||||
<p class="text-5xl font-display font-extrabold text-gray-900">150+</p>
|
||||
<p class="text-sm mt-2 text-gray-500">Families receiving resource packages this season.</p>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg border-l-4 border-green-500 transition duration-300 hover:shadow-xl">
|
||||
<p class="text-lg font-semibold text-gray-500 mb-1">Meals Provided</p>
|
||||
<p class="text-5xl font-display font-extrabold text-gray-900">850+</p>
|
||||
<p class="text-sm mt-2 text-gray-500">Hot meals served through our local kitchen network.</p>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg border-l-4 border-indigo-500 transition duration-300 hover:shadow-xl">
|
||||
<p class="text-lg font-semibold text-gray-500 mb-1">Hours of Aid</p>
|
||||
<p class="text-5xl font-display font-extrabold text-gray-900">450+</p>
|
||||
<p class="text-sm mt-2 text-gray-500">Volunteers dedicate hours to community outreach.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mission Section -->
|
||||
<section id="mission" class="py-20 lg:py-28 bg-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12 content-fade-in">
|
||||
<h2 class="text-sm uppercase tracking-widest text-[var(--color-primary)] font-semibold mb-2">Our Foundation</h2>
|
||||
<p class="text-4xl lg:text-5xl font-display font-bold text-gray-900">
|
||||
A Beacon of Community Support
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-3 gap-8">
|
||||
<!-- Value 1 -->
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg text-center content-fade-in">
|
||||
<div class="mx-auto w-16 h-16 bg-[var(--color-primary)] rounded-full flex items-center justify-center mb-4 shadow-md">
|
||||
<!-- Icon: Heart/Home -->
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7m-7-7v14"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-display font-semibold mb-3 text-gray-900">Dignity First</h3>
|
||||
<p class="text-gray-600">We ensure that aid is delivered with respect, recognizing the inherent worth of every individual in our community.</p>
|
||||
</div>
|
||||
<!-- Value 2 -->
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg text-center content-fade-in">
|
||||
<div class="mx-auto w-16 h-16 bg-[var(--color-secondary)] rounded-full flex items-center justify-center mb-4 shadow-md">
|
||||
<!-- Icon: Hands/Helping -->
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.35-1.848L12 11l-4.7 8.168a3 3 0 01-5.35 1.848H3m18 0a3 3 0 01-3-3V7a3 3 0 00-3-3H3a3 3 0 01-3-3v14a3 3 0 01-3 3h-3m18 0h-3"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-display font-semibold mb-3 text-gray-900">Holistic Support</h3>
|
||||
<p class="text-gray-600">Beyond immediate relief, we connect individuals with long-term resources and support systems for lasting change.</p>
|
||||
</div>
|
||||
<!-- Value 3 -->
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg text-center content-fade-in">
|
||||
<div class="mx-auto w-16 h-16 bg-red-600 rounded-full flex items-<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 29.41s</div>
|
||||
@@ -0,0 +1,325 @@
|
||||
<!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>Forge & Grit Athletics | Elite Strength Coaching</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=Inter:wght@400;700;900&family=Oswald:wght@500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--accent: #ea580c;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #0a0a0a;
|
||||
color: #f4f4f5;
|
||||
}
|
||||
h1, h2, h3, .brand-font {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.reveal.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.hero-gradient {
|
||||
background: linear-gradient(to right, rgba(10, 10, 10, 1) 30%, rgba(10, 10, 10, 0.6) 100%);
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: var(--accent);
|
||||
transition: transform 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: scale(1.05);
|
||||
background-color: #c2410c;
|
||||
}
|
||||
.nav-link {
|
||||
position: relative;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
background-color: var(--accent);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.nav-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed w-full z-50 bg-black/90 backdrop-blur-md border-b border-white/10">
|
||||
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
||||
<a href="#" class="text-2xl font-bold tracking-tighter brand-font text-white">
|
||||
FORGE<span class="text-orange-600">&</span>GRIT
|
||||
</a>
|
||||
|
||||
<!-- Desktop Menu -->
|
||||
<div class="hidden md:flex space-x-8 text-sm font-medium tracking-widest uppercase">
|
||||
<a href="#philosophy" class="nav-link">Philosophy</a>
|
||||
<a href="#services" class="nav-link">Services</a>
|
||||
<a href="#results" class="nav-link">Results</a>
|
||||
<a href="#contact" class="nav-link">Join Us</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Toggle -->
|
||||
<button id="menu-toggle" class="md:hidden text-white focus:outline-none" aria
|
||||
aria-label="Toggle Menu">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" 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>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div id="mobile-menu" class="hidden md:hidden bg-black border-b border-white/10 px-6 py-8 space-y-6 text-center uppercase tracking-widest text-sm">
|
||||
<a href="#philosophy" class="block nav-link">Philosophy</a>
|
||||
<a href="#services" class="block nav-link">Services</a>
|
||||
<a href="#results" class="block nav-link">Results</a>
|
||||
<a href="#contact" class="block nav-link">Join Us</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative min-h-screen flex items-center overflow-hidden pt-20">
|
||||
<div class="absolute inset-0 z-0">
|
||||
<div class="absolute inset-0 hero-gradient z-10"></div>
|
||||
<img src="https://images.pexels.com/photos/16966286/pexels-photo-16966286.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="An athlete performs a challenging lift during a weightlifting competition indoors." class="w-full h-full object-cover opacity-50">
|
||||
</div>
|
||||
|
||||
<div class="relative z-20 max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="reveal">
|
||||
<h1 class="text-6xl md:text-8xl font-black leading-none mb-6">
|
||||
UNYIELDING <br> <span class="text-orange-600">STRENGTH.</span>
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-lg font-light">
|
||||
We don't chase fitness. We forge capability. High-performance strength and conditioning for the relentless.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<a href="#contact" class="btn-primary text-white px-10 py-5 text-center font-bold uppercase tracking-widest text-sm">
|
||||
Start Your Transformation
|
||||
</a>
|
||||
<a href="#services" class="border border-white/30 hover:bg-white hover:text-black transition-colors px-10 py-5 text-center font-bold uppercase tracking-widest text-sm">
|
||||
Explore Methods
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attribution -->
|
||||
<div class="absolute bottom-8 right-8 z-30 text-[10px] uppercase tracking-widest text-white/40">
|
||||
Photo by <a href="https://www.pexels.com/photo/judge-watching-a-male-athlete-during-a-weightlifting-competition-16966286/" class="hover:text-orange-500 transition-colors" target="_blank">Ardit Mbrati</a> on Pexels
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Philosophy Section -->
|
||||
<section id="philosophy" class="py-24 bg-[#0a0a0a]">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="grid lg:grid-cols-2 gap-20 items-center">
|
||||
<div class="reveal">
|
||||
<h2 class="text-4xl md:text-5xl mb-8">The Core <br><span class="text-orange-600">Principle</span></h2>
|
||||
<div class="space-y-6 text-gray-400 text-lg leading-relaxed">
|
||||
<p>Most programs focus on aesthetics. We focus on the foundation that makes aesthetics inevitable. At Forge & Grit, we believe strength is the ultimate lever for human performance.</p>
|
||||
<p>Our method is built on three pillars: Biomechanical integrity, progressive overload, and metabolic conditioning. We don't just move weights; we move with intent.</p>
|
||||
</div>
|
||||
<div class="mt-10 grid grid-cols-2 gap-8">
|
||||
<div>
|
||||
<span class="block text-3xl font-bold text-white mb-1">01</span>
|
||||
<span class="uppercase text-xs tracking-widest text-orange-600 font-bold">Precision</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-3xl font-bold text-white mb-1">02</span>
|
||||
<span class="uppercase text-xs tracking-widest text-orange-600 font-bold">Intensity</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-3xl font-bold text-white mb-1">03</span>
|
||||
<span class="uppercase text-xs tracking-widest text-orange-600 font-bold">Recovery</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-3xl font-bold text-white mb-1">04</span>
|
||||
<span class="uppercase text-xs tracking-widest text-orange-600 font-bold">Results</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reveal relative">
|
||||
<div class="absolute -inset-4 border border-orange-600/30 translate-x-4 translate-y-4 -z-10"></div>
|
||||
<img src="https://images.pexels.com/photos/6387341/pexels-photo-6387341.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Training session" class="w-full grayscale hover:grayscale-0 transition-all duration-700 shadow-2xl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section id="services" class="py-24 bg-zinc-950">
|
||||
<div class="max-w-7xl mx-auto px-6 text-center mb-20">
|
||||
<h2 class="text-4xl md:text-6xl mb-4 reveal">Coaching <span class="text-orange-600">Programs</span></h2>
|
||||
<p class="text-gray-400 max-w-2xl mx-auto reveal">Tailored solutions for specific physiological goals. No generic templates. No wasted effort.</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-8">
|
||||
<!-- Service 1 -->
|
||||
<div class="reveal bg-zinc-900 p-10 border-t-4 border-orange-600 hover:bg-zinc-800 transition-colors group">
|
||||
<h3 class="text-2xl mb-4">Elite 1-on-1</h3>
|
||||
<p class="text-gray-400 mb-8">Comprehensive programming, bi-weekly check-ins, and video form analysis. For the serious athlete.</p>
|
||||
<ul class="text-sm space-y-3 text-gray-500 mb-8">
|
||||
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Custom Macro Plan</li>
|
||||
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> 24/7 Messaging</li>
|
||||
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Weekly Video Calls</li>
|
||||
</ul>
|
||||
<a href="#contact" class="text-sm font-bold uppercase tracking-widest group-hover:text-orange-500 transition-colors">Inquire →</a>
|
||||
</div>
|
||||
<!-- Service 2 -->
|
||||
<div class="reveal bg-zinc-900 p-10 border-t-4 border-orange-600 hover:bg-zinc-800 transition-colors group">
|
||||
<h3 class="text-2xl mb-4">Group Strength</h3>
|
||||
<p class="text-gray-400 mb-8">High-intensity functional training designed to build explosive power and metabolic efficiency.</p>
|
||||
<ul class="text-sm space-y-3 text-gray-500 mb-8">
|
||||
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Small Group Sizes</li>
|
||||
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Structured Workouts</li>
|
||||
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Community Focus</li>
|
||||
</ul>
|
||||
<a href="#contact" class="text-sm font-bold uppercase tracking-widest group-hover:text-orange-500 transition-colors">Inquire →</a>
|
||||
</div>
|
||||
<!-- Service 3 -->
|
||||
<div class="reveal bg-zinc-900 p-10 border-t-4 border-orange-600 hover:bg-zinc-800 transition-colors group">
|
||||
<h3 class="text-2xl mb-4">Nutrition Strategy</h3>
|
||||
<p class="text-gray-400 mb-8">Fueling for performance. We teach you how to eat for strength without restriction.</p>
|
||||
<ul class="text-sm space-y-3 text-gray-500 mb-8">
|
||||
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Macro Breakdown</li>
|
||||
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Supplement Guide</li>
|
||||
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Meal Planning</li>
|
||||
</ul>
|
||||
<a href="#contact" class="text-sm font-bold uppercase tracking-widest group-hover:text-orange-500 transition-colors">Inquire →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonial Section -->
|
||||
<section id="results" class="py-24 bg-[#0a0a0a]">
|
||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||
<div class="reveal mb-12">
|
||||
<svg class="w-16 h-16 text-orange-600 mx-auto opacity-50 mb-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20 15.5693 20 15V9C20 8.44772 19.5523 8 19 8H16.017C15.4647 8 15 8.44772 15 9V12H14.017V9C14.017 7.89543 13.1216 7 12 7C10.8784 7 10 7.89543 10 9V15C10 15.5523 10.4477 16 11 16H14.017V21Z" />
|
||||
<path d="M2 22C2 22 2 20 4 20C6 20 6 22 8 22C10 22 10 20 12 20C14 20 14 22 16 22C18 22 18 20 20 20C22 20 22 22 22 22V14C22 14 22 12 20 12C18 12 18 14 16 14C14 14 14 12 12 12C10 12 10 14 8 14C6 14 6 12 4 12C2 12 2 14 2 14V22Z" />
|
||||
</svg>
|
||||
<p class="text-2xl md:text-4xl italic font-light leading-relaxed mb-8">
|
||||
"The structured approach to my programming completely changed how I view training. I'm not just lifting heavier; I'm moving better and feeling more capable than ever."
|
||||
</p>
|
||||
<div class="flex items-center justify-center space-x-4">
|
||||
<div class="h-px w-12 bg-orange-600"></div>
|
||||
<span class="uppercase tracking-widest text-sm font-bold">Marcus V. — Professional Athlete</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section id="contact" class="py-24 bg-orange-600 overflow-hidden relative">
|
||||
<div class="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
|
||||
<div class="absolute top-10 left-10 w-64 h-64 bg-white rounded-full mix-blend-overlay filter blur-3xl"></div>
|
||||
<div class="absolute bottom-10 right-10 w-96 h-96 bg-black rounded-full mix-blend-overlay filter blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
||||
<h2 class="text-4xl md:text-6xl text-black font-black mb-8">Ready to Forge Yourself?</h2>
|
||||
<p class="text-orange-100 text-xl mb-12">Limited slots available for our 1-on-1 elite coaching program.</p>
|
||||
|
||||
<form class="grid grid-cols-1 md:grid-cols-2 gap-4 text-left">
|
||||
<input type="text" placeholder="Full Name" class="p-4 bg-black/20 border border-black/30 placeholder:text-orange-200 focus:outline-none focus:bg-black/40 transition-all" required>
|
||||
<input type="email" placeholder="Email Address" class="p-4 bg-black/20 border border-black/30 placeholder:text-orange-200 focus:outline-none focus:bg-black/40 transition-all" required>
|
||||
<textarea placeholder="Tell us about your goals..." class="md:col-span-2 p-4 bg-black/20 border border-black/30 placeholder:text-orange-200 focus:outline-none focus:bg-black/40 transition-all h-32" required></textarea>
|
||||
<button type="submit" class="md:col-span-2 bg-black text-white font-bold py-5 uppercase tracking-widest hover:bg-zinc-900 transition-colors">
|
||||
Apply Now
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-black py-12 border-t border-white/5">
|
||||
<div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center">
|
||||
<div class="mb-8 md:mb-0 text-center md:text-left">
|
||||
<a href="#" class="text-xl font-bold brand-font tracking-tighter">
|
||||
FORGE<span class="text-orange-600">&</span>GRIT
|
||||
</a>
|
||||
<p class="text-gray-600 text-xs mt-2 uppercase tracking-widest">© 2024 Forge & Grit Athletics. All rights reserved.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-8 text-xs uppercase tracking-widest text-gray-400">
|
||||
<a href="#" class="hover:text-white transition-colors">Instagram</a>
|
||||
<a href="#" class="hover:text-white transition-colors">YouTube</a>
|
||||
<a href="#" class="hover:text-white transition-colors">Privacy</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Mobile Menu Toggle
|
||||
const menuToggle = document.getElementById('menu-toggle');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
|
||||
menuToggle.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
// Close mobile menu when a link is clicked
|
||||
document.querySelectorAll('#mobile-menu a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
mobileMenu.classList.add('hidden');
|
||||
});
|
||||
});
|
||||
|
||||
// Reveal on Scroll
|
||||
const revealCallback = (entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('active');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const revealObserver = new IntersectionObserver(revealCallback, {
|
||||
threshold: 0.1
|
||||
});
|
||||
|
||||
document.querySelectorAll('.reveal').forEach(el => {
|
||||
revealObserver.observe(el);
|
||||
});
|
||||
|
||||
// Form Submission Simulation
|
||||
document.querySelector('form').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const btn = e.target.querySelector('button');
|
||||
const originalText = btn.innerText;
|
||||
btn.innerText = "Sending...";
|
||||
btn.disabled = true;
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerText = "Application Received!";
|
||||
btn.style.backgroundColor = "#10b981"; // success green
|
||||
e.target.reset();
|
||||
setTimeout(() => {
|
||||
btn.innerText = originalText;
|
||||
btn.style.backgroundColor = "";
|
||||
btn.disabled = false;
|
||||
}, 3000);
|
||||
}, 1500);
|
||||
});
|
||||
</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 84.15s</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,168 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ECHO CHAMBER - Neue Single "Stiller Hafen"</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;600;800&family=Lora:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
--color-primary: #a0522d; /* Sienna/Erdtöne */
|
||||
--color-secondary: #f5f5dc; /* Beige/Sand */
|
||||
--color-dark: #1a1a1a;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #1a1a1a;
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
.heading-font {
|
||||
font-family: 'Lora', serif;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 4px 15px rgba(160, 82, 45, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(160, 82, 45, 0.6);
|
||||
}
|
||||
|
||||
/* Custom Hero Animation for subtle focus */
|
||||
.audio-player-container {
|
||||
transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
|
||||
}
|
||||
.audio-player-container:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="sticky top-0 bg-black/95 backdrop-blur-md border-b border-amber-900 z-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
||||
<div class="text-2xl heading-font text-amber-900 font-bold tracking-widest">
|
||||
ECHO CHAMBER
|
||||
</div>
|
||||
<nav>
|
||||
<a href="#track" class="text-gray-300 hover:text-amber-900 transition duration-300 ml-6 hidden sm:inline-block">Veröffentlichung</a>
|
||||
<a href="#about" class="text-gray-300 hover:text-amber-900 transition duration-300 ml-6 hidden sm:inline-block">Über</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="min-h-screen">
|
||||
|
||||
<!-- Hero Section: Release Announcement -->
|
||||
<section id="track" class="py-20 md:py-32 bg-gray-900 border-b-8 border-amber-900">
|
||||
<div class="max-w-5xl mx-auto px-4 text-center">
|
||||
<h1 class="heading-font text-6xl md:text-8xl font-extrabold mb-4 text-amber-900 leading-tight tracking-tighter animate-pulse-slow">
|
||||
STILLER HAFEN
|
||||
</h1>
|
||||
<p class="text-xl md:text-3xl text-gray-400 mb-8 heading-font">
|
||||
Neue Single von ECHO CHAMBER – Jetzt überall hören
|
||||
</p>
|
||||
|
||||
<!-- Visual Element Placeholder: Album Art -->
|
||||
<div class="max-w-lg mx-auto shadow-2xl rounded-xl overflow-hidden mb-10 border-4 border-amber-900">
|
||||
<img src="https://images.unsplash.com/photo-1501688269928-e2707007d014?w=600&auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Album Cover: Stiller Hafen - Minimalistische Darstellung von Wasser und Horizont"
|
||||
class="w-full h-auto object-cover transition duration-500 hover:scale-[1.02]">
|
||||
</div>
|
||||
|
||||
<!-- Music Player/CTA Block -->
|
||||
<div class="audio-player-container bg-gray-800 p-4 md:p-8 rounded-xl max-w-3xl mx-auto border-t-4 border-amber-900 shadow-lg">
|
||||
<h2 class="text-2xl heading-font mb-4 text-amber-900">Hören Sie an</h2>
|
||||
|
||||
<!-- Mockup Audio Player -->
|
||||
<div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center space-y-3">
|
||||
<p class="text-lg heading-font text-gray-300">Stiller Hafen (Single Edit)</p>
|
||||
<div class="w-full bg-gray-600 rounded-full h-2.5">
|
||||
<div class="bg-amber-900 h-2.5 rounded-full" style="width: 65%"></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between w-full text-sm text-gray-400">
|
||||
<span>0:32 / 3:45</span>
|
||||
<div class="space-x-2">
|
||||
<span class="cursor-pointer hover:text-amber-900 transition"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M15 10l4.5-4.5L12 4l-4.5 4.5L15 10zM12 3a9 9 0 00-9 9c0 3.31 1.61 6.24 4 7.73V21h4v-2.27c2.39-1.49 4-4.42 4-7.73a9 9 0 00-9-9zm0 16a7 7 0 110-14 7 7 0 010 14z"></path></svg></span>
|
||||
<span class="cursor-pointer hover:text-amber-900 transition"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M13 17h-2v-4h2v4zm0-7h-2V7h2v4z"></path></svg></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA Buttons -->
|
||||
<div class="flex space-x-3 pt-3">
|
||||
<a href="#" class="flex-1 text-center py-3 text-white font-bold rounded-lg btn-primary bg-amber-900 hover:bg-amber-800 focus:outline-none focus:ring-4 focus:ring-amber-900 focus:ring-opacity-50">
|
||||
Spotify Hörerlebnis
|
||||
</a>
|
||||
<a href="#" class="flex-1 text-center py-3 text-gray-300 border-2 border-gray-600 rounded-lg hover:bg-gray-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-gray-700">
|
||||
Apple Music
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Artist Bio Section -->
|
||||
<section id="about" class="py-20 md:py-32 bg-gray-800">
|
||||
<div class="max-w-6xl mx-auto px-4 lg:px-8">
|
||||
<div class="grid md:grid-cols-2 gap-12 items-start">
|
||||
|
||||
<!-- Image/Visual Column -->
|
||||
<div class="order-2 md:order-1">
|
||||
<div class="relative overflow-hidden rounded-xl shadow-2xl transform hover:scale-[1.03] transition duration-500 border-4 border-gray-700">
|
||||
<img src="https://images.unsplash.com/photo-1534840918688-2f200f9e4458?w=800&auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Künstler Echo Chamber - In einer nachdenklichen Pose"
|
||||
class="w-full h-auto object-cover transition duration-500">
|
||||
<!-- Subtle overlay for mood -->
|
||||
<div class="absolute inset-0 bg-black/20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text Content Column -->
|
||||
<div class="order-1 md:order-2 pt-4">
|
||||
<h2 class="heading-font text-5xl md:text-6xl font-bold text-amber-900 mb-4 leading-snug">
|
||||
Die Klanglandschaft von ECHO CHAMBER
|
||||
</h2>
|
||||
<p class="text-xl text-gray-300 mb-6 leading-relaxed">
|
||||
ECHO CHAMBER navigiert durch die tiefen, resonierenden Klangräume der modernen Melancholie. Die Musik ist eine Reflexion über das urbane Leben, die Suche nach Ruhe inmitten des ständigen Rauschens und die Schönheit stiller Ankerpunkte.
|
||||
</p>
|
||||
|
||||
<div class="space-y-6">
|
||||
<p class="text-gray-300 text-lg leading-relaxed border-l-4 border-amber-900 pl-4">
|
||||
"Stiller Hafen" ist eine meditative Reise, die das Gefühl einfängt, wenn die Stadt nach Einbruch der Dunkelheit beginnt, ihre eigene, geheimnisvolle Ruhe zu finden. Die Produktion ist reich an organischen Texturen und tiefen, resonierenden Bässen, die den Hörer sanft in einen Zustand der Kontemplation versetzen sollen.
|
||||
</p>
|
||||
|
||||
<p class="text-gray-400 italic text-sm">
|
||||
"Ein Meisterwerk der atmosphärischen Klanggestaltung." – MusikMagazin.de
|
||||
</p>
|
||||
|
||||
<div class="mt-8 pt-4 border-t border-gray-700">
|
||||
<p class="text-lg font-semibold text-amber-900 mb-2">Diskografie Highlights:</p>
|
||||
<ul class="space-y-2 text-gray-300">
|
||||
<li class="hover:text-amber-900 transition cursor-pointer">Echoes of Dawn (EP)</li>
|
||||
<li class="hover:text-amber-900 transition cursor-pointer">Die leisen Strömungen (Album)</li>
|
||||
<li class="hover:text-amber-900 transition cursor-pointer font-bold">Stiller Hafen (Aktuell)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer/Social Section -->
|
||||
<footer class="bg-gray-950 border-t border-amber-900 py-10">
|
||||
<div class="max-w-7xl mx-auto px-4 text-center">
|
||||
<h3 class="heading-font text-3xl text-amber-900 mb-6">Bleiben Sie Verbunden</h3>
|
||||
|
||||
<div class="flex justify-center space-x-8 mb-8">
|
||||
<a href="#" class="text-gray-400 hover:text-amber-900 transition duration-300 transform hover:scale-110 focus:outline-none" aria-label="Instagram">
|
||||
<!-- Instagram Icon Placeholder -->
|
||||
<svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07a8.27 8.27 0 014.85 4.85c.058.006.11.01.17.022.06.012.12.02.18.02 1.16 0 2.12-.06 3.1-.22 1.0-.16 1.88-.54 2.55-1.11c.54-.4.96-1.02 1.27-1.74.3-.72.3-1.53-.1-2.24-.4-.7-.93-1.38-1.62-1.82l-1.41-1.37c-.2-.19-.43-.27-.66-.27h-.02c-.23 0-.46.08-.66.27l-1.37 1.41c-.37.36-.63.81-.63 1.33v.01c0 .49.21 1 .63 1.33l1.41 1.37c.2-.19.43-.27.66-.27h.02c.23 0 .46-.08.66-.27zM12 18.84c-4.76 0-8.66-3.9-8.66-8.84 0-2.1.64-4.17 1.76-5.54l.01-.01c.2-.2.48-.32.8-.32h.02c.32 0 .6-.12.8-.32l.01-.01c.57-.62 1.43-1.04 2.48-1.04s1.91.42 2.48 1.04l.01.01c.2.2.48.32.8.32h.02c.32 0 .6-.12.8-.32l.01-.01c.57-.62 1.43-1.04 2.48-1.04s1.91.42 2.48 1.04l.01.01c.2.2.48.32.8.32h.02c.32 0 .6-.12.8-.32l.01-.01c.57-.62 1.43-1.04 2.48-1.04s1.91.42 2.48 1.04l.01.01c.2.2.48.32.8.<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 32.10s</div>
|
||||
@@ -0,0 +1,225 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Apex Vitality - Elevate Your Strength</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Customizing Tailwind Configuration for Brand Feel */
|
||||
:root {
|
||||
--color-primary: #D9534F; /* A strong, energetic red/coral */
|
||||
--color-secondary: #34495E; /* Deep navy/charcoal */
|
||||
--color-accent: #F4B400; /* Gold/Amber for highlights */
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Montserrat', sans-serif; /* Using a strong, geometric font feel */
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(217, 83, 79, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 20px rgba(217, 83, 79, 0.6);
|
||||
background-color: #c34a49;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-5px) scale(1.02);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Subtle animation for content reveal */
|
||||
.animate-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: fadeInSlide 1s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInSlide {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Tailwind Configuration for Custom Colors/Fonts
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'vitality-primary': '#D9534F',
|
||||
'vitality-secondary': '#34495E',
|
||||
'vitality-accent': '#F4B400',
|
||||
'background-light': '#f7f7f7',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Montserrat', 'sans-serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background-light text-gray-800 antialiased">
|
||||
|
||||
<!-- Header & Navigation -->
|
||||
<header class="bg-white shadow-lg sticky top-0 z-10">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<div class="flex-shrink-0">
|
||||
<a href="#" class="text-3xl font-extrabold text-vitality-primary tracking-tight">
|
||||
Apex <span class="text-vitality-secondary">Vitality</span>
|
||||
</a>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#services" class="text-lg font-medium text-vitality-secondary hover:text-vitality-primary transition duration-150 border-b-2 border-transparent hover:border-vitality-primary pb-1">Coaching</a>
|
||||
<a href="#plans" class="text-lg font-medium text-vitality-secondary hover:text-vitality-primary transition duration-150 border-b-2 border-transparent hover:border-vitality-primary pb-1">Programs</a>
|
||||
<a href="#about" class="text-lg font-medium text-vitality-secondary hover:text-vitality-primary transition duration-150 border-b-2 border-transparent hover:border-vitality-primary pb-1">About</a>
|
||||
<a href="#contact" class="text-lg font-medium text-vitality-secondary hover:text-vitality-primary transition duration-150">Start Now</a>
|
||||
</nav>
|
||||
<!-- Mobile Menu Button (Simple implementation for this scope) -->
|
||||
<div class="md:hidden">
|
||||
<button id="mobile-menu-button" class="p-2 text-vitality-secondary focus:outline-none focus:ring-2 focus:ring-vitality-primary rounded">
|
||||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Menu Drawer -->
|
||||
<div id="mobile-menu" class="md:hidden hidden">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t">
|
||||
<a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-vitality-secondary hover:bg-vitality-primary/10">Coaching</a>
|
||||
<a href="#plans" class="block px-3 py-2 rounded-md text-base font-medium text-vitality-secondary hover:bg-vitality-primary/10">Programs</a>
|
||||
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-vitality-secondary hover:bg-vitality-primary/10">About</a>
|
||||
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-vitality-secondary hover:bg-vitality-primary/10">Start Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="bg-vitality-secondary pt-16 pb-24 text-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div class="max-w-4xl mx-auto animate-in" style="animation-delay: 0.1s;">
|
||||
<h1 class="text-5xl sm:text-6xl lg:text-7xl font-extrabold leading-tight mb-4">
|
||||
Stop Wishing. Start Moving.
|
||||
</h1>
|
||||
<p class="text-xl sm:text-2xl mb-10 font-light opacity-90">
|
||||
Apex Vitality provides personalized, data-driven fitness coaching designed not just to build muscle, but to build lasting, resilient habits. Your peak performance starts here.
|
||||
</p>
|
||||
<a href="#contact" class="inline-block bg-vitality-accent text-vitality-secondary font-bold py-4 px-10 text-xl rounded-lg shadow-xl btn-primary transition duration-300 ease-in-out">
|
||||
Claim Your Free Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section id="services" class="py-20 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16 animate-in" style="animation-delay: 0.3s;">
|
||||
<h2 class="text-base text-vitality-primary uppercase tracking-widest">OUR APPROACH</h2>
|
||||
<p class="mt-2 text-4xl lg:text-5xl font-extrabold text-vitality-secondary">
|
||||
Holistic Strength Building
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Service Card 1 -->
|
||||
<div class="p-8 bg-white rounded-xl shadow-lg border-t-4 border-vitality-primary card-hover transition duration-300 animate-in" style="animation-delay: 0.5s;">
|
||||
<div class="text-4xl text-vitality-primary mb-4">🏋️</div>
|
||||
<h3 class="text-2xl font-bold text-vitality-secondary mb-3">Custom Training Roadmaps</h3>
|
||||
<p class="text-gray-600">Forget cookie-cutter plans. We build training modules tailored exactly to your biomechanics, goals, and current fitness level, ensuring sustainable progress.</p>
|
||||
</div>
|
||||
|
||||
<!-- Service Card 2 -->
|
||||
<div class="p-8 bg-white rounded-xl shadow-lg border-t-4 border-vitality-accent card-hover transition duration-300 animate-in" style="animation-delay: 0.7s;">
|
||||
<div class="text-4xl text-vitality-accent mb-4">🥗</div>
|
||||
<h3 class="text-2xl font-bold text-vitality-secondary mb-3">Nutrition Strategy</h3>
|
||||
<p class="text-gray-600">Fueling performance requires precision. Get actionable, realistic dietary guidance that fits your lifestyle, not just restrictive rules.</p>
|
||||
</div>
|
||||
|
||||
<!-- Service Card 3 -->
|
||||
<div class="p-8 bg-white rounded-xl shadow-lg border-t-4 border-vitality-secondary card-hover transition duration-300 animate-in" style="animation-delay: 0.9s;">
|
||||
<div class="text-4xl text-vitality-secondary mb-4">🧠</div>
|
||||
<h3 class="text-2xl font-bold text-vitality-secondary mb-3">Mindset Mastery</h3>
|
||||
<p class="text-gray-600">True strength begins in the mind. We coach you on consistency, overcoming plateaus, and maintaining discipline long after the program ends.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Program Showcase Section -->
|
||||
<section id="plans" class="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-16 animate-in" style="animation-delay: 1.1s;">
|
||||
<h2 class="text-base text-vitality-primary uppercase tracking-widest">PROGRAMS</h2>
|
||||
<p class="mt-2 text-4xl lg:text-5xl font-extrabold text-vitality-secondary">
|
||||
Find Your Path to Peak Performance
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-3 gap-10 items-start">
|
||||
|
||||
<!-- Plan Card 1: Foundations -->
|
||||
<div class="bg-white p-10 rounded-xl shadow-2xl border-b-8 border-vitality-primary transform hover:scale-[1.02] transition duration-500 animate-in" style="animation-delay: 1.3s;">
|
||||
<h3 class="text-3xl font-bold text-vitality-primary mb-3">Foundation Builder</h3>
|
||||
<p class="text-gray-500 mb-6">Ideal for beginners establishing consistency and building fundamental strength.</p>
|
||||
<ul class="space-y-3 mb-8 text-lg">
|
||||
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Bi-weekly check-ins</li>
|
||||
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Basic nutrition guide</li>
|
||||
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Weekly workout framework</li>
|
||||
</ul>
|
||||
<div class="text-center">
|
||||
<span class="text-5xl font-extrabold text-vitality-secondary">$99</span><span class="text-xl text-gray-500">/mo</span>
|
||||
<button class="mt-6 w-full bg-vitality-primary text-white py-3 rounded-lg text-lg font-semibold btn-primary">
|
||||
Select Foundation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Plan Card 2: Elite Focus (Featured) -->
|
||||
<div class="bg-white p-12 rounded-xl shadow-2xl border-b-8 border-vitality-accent scale-105 transform animate-in" style="animation-delay: 1.5s;">
|
||||
<div class="absolute top-0 right-0 -mt-3 -mr-3">
|
||||
<div class="bg-vitality-accent text-vitality-secondary text-sm font-bold uppercase px-4 py-1 rounded-full shadow-md">MOST POPULAR</div>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-vitality-secondary mb-3">Apex Performance Elite</h3>
|
||||
<p class="text-gray-500 mb-6">For dedicated individuals aiming for maximal gains and total physical transformation.</p>
|
||||
<ul class="space-y-3 mb-8 text-lg">
|
||||
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Unlimited messaging support</li>
|
||||
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Custom weekly video review</li>
|
||||
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Full dietary customization</li>
|
||||
</ul>
|
||||
<div class="text-center">
|
||||
<span class="text-6xl font-extrabold text-vitality-accent">$249</span>
|
||||
<button class="mt-6 w-full bg-vitality-secondary text-white py-4 rounded-lg text-xl font-bold btn-primary shadow-lg">
|
||||
Go Elite Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Plan Card 3: Maintenance -->
|
||||
<div class="bg-white p-10 rounded-xl shadow-2xl border-b-8 border-vitality-secondary transform hover:scale-[1.02] transition duration-500 animate-in" style="animation-delay: 1.7s;">
|
||||
<h3 class="text-3xl font-bold text-vitality-secondary mb-3">Maintenance Flow</h3>
|
||||
<p class="text-gray-500 mb-6">Perfect for seasoned athletes needing structure to maintain progress and avoid stagnation.</p>
|
||||
<ul class="space-y-3 mb-8 text-lg">
|
||||
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Monthly accountability call</li>
|
||||
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Progress tracking dashboard</li>
|
||||
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Optimized recovery protocols</li>
|
||||
</ul>
|
||||
<div class="text-center">
|
||||
<span class="text-5xl font-extrabold text-vitality-secondary">$129</span><span class="text-xl text-gray-500">/mo</span>
|
||||
<button class="mt-6 w-full bg-vitality-secondary text-white py-3 rounded-lg text-lg font-semibold btn-primary">
|
||||
Select Maintenance
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><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 29.90s</div>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Hearthstone Bistro - Rustic Comfort Dining</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom Utility Styles for richer feel */
|
||||
.font-serif-display {
|
||||
font-family: 'Playfair Display', Georgia, serif;
|
||||
}
|
||||
.font-body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
/* Subtle hover effect for cards */
|
||||
.card-hover:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
/* Keyframe animation for subtle entry */
|
||||
@keyframes fadeInEntry {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-in {
|
||||
animation: fadeInEntry 0.8s ease-out forwards;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 font-body antialiased text-gray-800">
|
||||
|
||||
<!-- Header & Navigation -->
|
||||
<header class="bg-white shadow-lg sticky top-0 z-10">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<!-- Logo/Brand -->
|
||||
<div class="flex-shrink-0">
|
||||
<p class="text-4xl font-serif-display text-red-800 tracking-wider">Hearthstone</p>
|
||||
<p class="text-sm text-gray-600 mt-[-4px]">Rustic Dining</p>
|
||||
</div>
|
||||
<!-- Navigation Links (Hidden on mobile, visible on desktop) -->
|
||||
<nav class="hidden md:block">
|
||||
<div class="ml-10 flex space-x-8">
|
||||
<a href="#menu" class="text-gray-600 hover:text-red-700 px-3 py-2 rounded-md text-lg font-medium transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Menu</a>
|
||||
<a href="#about" class="text-gray-600 hover:text-red-700 px-3 py-2 rounded-md text-lg font-medium transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Our Story</a>
|
||||
<a href="#reservations" class="text-gray-600 hover:text-red-700 px-3 py-2 rounded-md text-lg font-medium transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Reservations</a>
|
||||
<a href="#contact" class="text-gray-600 hover:text-red-700 px-3 py-2 rounded-md text-lg font-medium transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Visit</a>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Mobile Menu Button (Hamburger Icon) -->
|
||||
<div class="md:hidden flex items-center">
|
||||
<button id="mobile-menu-button" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-red-500" aria-controls="mobile-menu" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<!-- Icon when menu is closed -->
|
||||
<svg id="menu-icon-open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<!-- Icon when menu is open -->
|
||||
<svg id="menu-icon-close" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu (Dropdown) -->
|
||||
<div class="md:hidden hidden border-t border-gray-100" id="mobile-menu">
|
||||
<div class="px-4 pt-2 pb-3 space-y-1 sm:px-6">
|
||||
<a href="#menu" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-red-50 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">Menu</a>
|
||||
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-red-50 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">Our Story</a>
|
||||
<a href="#reservations" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-red-50 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">Reservations</a>
|
||||
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-red-50 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">Visit</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-[60vh] md:h-[80vh] bg-cover bg-center flex items-center"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1556576859-27736f618c30?w=800&auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
|
||||
<!-- Overlay for contrast -->
|
||||
<div class="absolute inset-0 bg-black/40"></div>
|
||||
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center z-10">
|
||||
<h1 class="text-6xl md:text-8xl font-serif-display text-white drop-shadow-lg leading-tight animate-in" style="animation-delay: 0.1s;">
|
||||
Hearty Meals, Honest Flavors.
|
||||
</h1>
|
||||
<p class="mt-4 text-xl md:text-2xl text-gray-100 font-light max-w-3xl mx-auto animate-in" style="animation-delay: 0.3s;">
|
||||
Where tradition meets contemporary comfort. Savor the warmth of a true home-cooked meal in every bite.
|
||||
</p>
|
||||
<a href="#reservations" class="mt-10 inline-flex items-center justify-center px-10 py-4 border border-transparent text-lg font-semibold rounded-lg shadow-2xl text-white bg-red-700 hover:bg-red-800 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-red-300 animate-in" style="animation-delay: 0.5s;">
|
||||
Reserve Your Table
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Menu Section -->
|
||||
<section id="menu" class="py-20 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12 animate-in" style="animation-delay: 0.1s;">
|
||||
<h2 class="text-5xl font-serif-display text-red-800 mb-3">Our Culinary Offerings</h2>
|
||||
<p class="text-xl text-gray-600">From slow-roasted mains to seasonal delights.</p>
|
||||
</div>
|
||||
|
||||
<!-- Appetizers -->
|
||||
<div class="mb-16">
|
||||
<h3 class="text-4xl font-serif-display text-gray-700 border-b-4 border-amber-600 pb-2 mb-8 inline-block animate-in" style="animation-delay: 0.3s;">Appetizers</h3>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Item 1 -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg transition duration-300 transform card-hover border-t-4 border-amber-500 animate-in" style="animation-delay: 0.5s;">
|
||||
<h4 class="text-2xl font-semibold text-red-700 mb-2">Roasted Herb Focaccia</h4>
|
||||
<p class="text-gray-600 mb-3 text-sm">Warm, rustic bread topped with fresh rosemary, sea salt, and local olive oil.</p>
|
||||
<p class="text-lg font-bold text-gray-900">$9.00</p>
|
||||
</div>
|
||||
<!-- Item 2 -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg transition duration-300 transform card-hover border-t-4 border-amber-500 animate-in" style="animation-delay: 0.7s;">
|
||||
<h4 class="text-2xl font-semibold text-red-700 mb-2">Smoked Trout Dip</h4>
|
||||
<p class="text-gray-600 mb-3 text-sm">Creamy smoked trout blended with sharp cheddar and dill, served with crisp cucumber slices.</p>
|
||||
<p class="text-lg font-bold text-gray-900">$14.00</p>
|
||||
</div>
|
||||
<!-- Item 3 -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg transition duration-300 transform card-hover border-t-4 border-amber-500 animate-in" style="animation-delay: 0.9s;">
|
||||
<h4 class="text-2xl font-semibold text-red-700 mb-2">Wild Mushroom Tartlets</h4>
|
||||
<p class="text-gray-600 mb-3 text-sm">Flaky pastry filled with earthy wild mushrooms, goat cheese, and thyme.</p>
|
||||
<p class="text-lg font-bold text-gray-900">$11.50</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mains -->
|
||||
<div>
|
||||
<h3 class="text-4xl font-serif-display text-gray-700 border-b-4 border-red-600 pb-2 mb-8 inline-block animate-in" style="animation-delay: 0.1s;">Main Courses</h3>
|
||||
<div class="space-y-8">
|
||||
<!-- Dish 1 -->
|
||||
<div class="flex flex-col md:flex-row bg-white p-6 rounded-xl shadow-lg border-l-8 border-red-500 transition duration-300 hover:shadow-2xl animate-in" style="animation-delay: 0.3s;">
|
||||
<div class="md:w-2/3">
|
||||
<h4 class="text-3xl font-serif-display text-red-800">Slow-Braised Lamb Shank</h4>
|
||||
<p class="mt-1 text-gray-600">Tender lamb, slow-cooked for eight hours in rich red wine reduction, served over creamy root vegetable puree.</p>
|
||||
<p class="mt-2 text-sm text-gray-500 italic">Accompanied by roasted garlic and seasonal greens.</p>
|
||||
</div>
|
||||
<div class="md:w-1/3 mt-4 md:mt-0 flex justify-end items-center">
|
||||
<span class="text-4xl font-bold text-gray-900">$34.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dish 2 -->
|
||||
<div class="flex flex-col md:flex-row bg-white p-6 rounded-xl shadow-lg border-l-8 border-red-500 transition duration-300 hover:shadow-2xl animate-in" style="animation-delay: 0.5s;">
|
||||
<div class="md:w-2/3">
|
||||
<h4 class="text-3xl font-serif-display text-red-800">Pan-Seared Sea Bass</h4>
|
||||
<p class="mt-1 text-gray-600">Freshly caught sea bass, perfectly seared, plated atop saffron risotto and drizzled with lemon-butter sauce.</p>
|
||||
<p class="mt-2 text-sm text-gray-500 italic">A lighter, elegant choice for the coastal palate.</p>
|
||||
</div>
|
||||
<div class="md:w-1/3 mt-4 md:mt-0 flex justify-end items-center">
|
||||
<span class="text-4xl font-bold text-gray-900">$32.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dish 3 -->
|
||||
<div class="flex flex-col md:flex-row bg-white p-6 rounded-xl shadow-lg border-l-8 border-red-500 transition duration-300 hover:shadow-2xl animate-in" style="animation-delay: 0.7s;">
|
||||
<div class="md:w-2/3">
|
||||
<h4 class="text-3xl font-serif-display text-red-800">Harvest Herb Chicken Breast</h4>
|
||||
<p class="mt-1 text-gray-600">Pan-seared chicken breast stuffed with seasonal herbs and sun-dried tomatoes, served with truffle mashed potatoes.</p>
|
||||
<p class="mt-2 text-sm text-gray-500 italic">A robust, comforting classic elevated.</p>
|
||||
</div>
|
||||
<div class="md:w-1/3 mt-4 md:mt-0 flex justify-end items-center">
|
||||
<span class="text-4xl font-bold text-gray-900">$28.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="py-24 bg-gray-100"><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.26s</div>
|
||||
@@ -0,0 +1,192 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Alchemist's Roast | Artisan Coffee</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
:root {
|
||||
--primary-brown: #5D4037;
|
||||
--secondary-cream: #F5F5DC;
|
||||
--accent-amber: #FFB300;
|
||||
}
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background-color: #FAF0E6;
|
||||
color: #333;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.heading-font {
|
||||
font-family: 'Playfair Display', serif; /* Assuming a nice serif fallback for impact */
|
||||
font-weight: 700;
|
||||
}
|
||||
.btn-primary {
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--accent-amber);
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
transition: box-shadow 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
/* Custom Scrollbar for elegance */
|
||||
body::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background-color: var(--primary-brown);
|
||||
border-radius: 4px;
|
||||
}
|
||||
body::-webkit-scrollbar-track {
|
||||
background: #FAF0E6;
|
||||
}
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- Header and Navigation -->
|
||||
<header class="sticky top-0 z-50 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 py-4">
|
||||
<div class="text-3xl heading-font text-amber-900 tracking-widest">
|
||||
The Alchemist's Roast
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#story" class="text-gray-600 hover:text-amber-700 transition duration-150 text-lg">Our Story</a>
|
||||
<a href="#roasts" class="text-gray-600 hover:text-amber-700 transition duration-150 text-lg">Roasts</a>
|
||||
<a href="#process" class="text-gray-600 hover:text-amber-700 transition duration-150 text-lg">Craft</a>
|
||||
<a href="#shop" class="text-gray-600 hover:text-amber-700 transition duration-150 text-lg border-b-2 border-amber-700 pb-1">Shop</a>
|
||||
</nav>
|
||||
<div class="md:hidden">
|
||||
<!-- Mobile Menu Button Placeholder -->
|
||||
<button id="mobile-menu-button" class="text-gray-700 hover:text-amber-700 focus:outline-none p-2">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Menu Dropdown (Initially hidden) -->
|
||||
<div id="mobile-menu" class="md:hidden hidden bg-white border-t">
|
||||
<div class="px-4 pt-2 pb-3 space-y-1 sm:px-6">
|
||||
<a href="#story" class="block py-2 text-gray-700 hover:bg-amber-50 focus:outline-none focus:bg-amber-100">Our Story</a>
|
||||
<a href="#roasts" class="block py-2 text-gray-700 hover:bg-amber-50 focus:outline-none focus:bg-amber-100">Roasts</a>
|
||||
<a href="#process" class="block py-2 text-gray-700 hover:bg-amber-50 focus:outline-none focus:bg-amber-100">Craft</a>
|
||||
<a href="#shop" class="block py-2 text-gray-700 hover:bg-amber-50 focus:outline-none focus:bg-amber-100">Shop</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative bg-cover bg-center h-[80vh] flex items-center justify-center"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1517234954160-4898df9009e4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDEyfHxjb2ZmZWplciUyMG1vZGV8ZW58fHwxNjE0NTU5MTc5&ixlib=rb-4.0.3&q=80&w=1080');">
|
||||
<div class="absolute inset-0 bg-black/40"></div>
|
||||
<div class="relative text-center max-w-4xl px-4">
|
||||
<h1 class="text-6xl sm:text-7xl heading-font text-white mb-4 leading-tight animate-fadeInUp">
|
||||
The Art of the Perfect Cup.
|
||||
</h1>
|
||||
<p class="text-xl sm:text-2xl text-amber-100 mb-8 italic">
|
||||
Slow roasted, thoughtfully sourced, expertly brewed. Discover coffee with soul.
|
||||
</p>
|
||||
<a href="#shop" class="btn-primary inline-block bg-amber-600 text-white text-xl font-semibold py-3 px-10 uppercase rounded-lg shadow-lg hover:bg-amber-700 transition duration-300">
|
||||
Explore Our Roasts
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Our Story Section -->
|
||||
<section id="story" class="py-20 sm:py-28 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl sm:text-5xl heading-font text-amber-900 mb-3">Our Philosophy</h2>
|
||||
<p class="text-xl text-gray-600">More than a beverage; it's an experience.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10 text-center">
|
||||
|
||||
<div class="p-6 border border-gray-100 rounded-xl shadow-lg bg-amber-50 card-hover transition duration-300">
|
||||
<div class="text-5xl mb-3 text-amber-700">☕</div>
|
||||
<h3 class="text-2xl heading-font text-amber-900 mb-2">Source Direct</h3>
|
||||
<p class="text-gray-600">We partner directly with small, ethical farms, ensuring quality meets fair practice from the bean's origin.</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border border-gray-100 rounded-xl shadow-lg bg-amber-50 card-hover transition duration-300">
|
||||
<div class="text-5xl mb-3 text-amber-700">🔥</div>
|
||||
<h3 class="text-2xl heading-font text-amber-900 mb-2">Artisan Roasting</h3>
|
||||
<p class="text-gray-600">Small batches, meticulous control. Our roaster monitors temperature curves to unlock peak flavor profiles.</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border border-gray-100 rounded-xl shadow-lg bg-amber-50 card-hover transition duration-300">
|
||||
<div class="text-5xl mb-3 text-amber-700">✨</div>
|
||||
<h3 class="text-2xl heading-font text-amber-900 mb-2">Brewed for Life</h3>
|
||||
<p class="text-gray-600">We believe the best coffee deserves the best ritual. Taste the difference care makes in every sip.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Roasts Section -->
|
||||
<section id="roasts" class="py-20 sm:py-28 bg-[#FAF0E6]">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-14">
|
||||
<h2 class="text-4xl sm:text-5xl heading-font text-amber-900 mb-3">Featured Roasts</h2>
|
||||
<p class="text-xl text-gray-600">A selection of our current seasonal masterpieces.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Roast Card 1: Ethiopian Yirgacheffe -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-2xl card-hover border-t-4 border-amber-600">
|
||||
<div class="relative h-64 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1559781496-7d70e9a0e6a7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDEwfHxjb2ZmZWplciUyMGRlY2hhbmdlcnxlbnwwfHx8fDE2MTQ1NTkxNzkw&ixlib=rb-4.0.3&q=80&w=800"
|
||||
alt="Bright Ethiopian Yirgacheffe beans" class="w-full h-full object-cover transition duration-500 hover:scale-105">
|
||||
<div class="absolute top-3 right-3 bg-amber-600 text-white text-sm font-bold px-3 py-1 rounded-full shadow-md">ORIGIN</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-3xl heading-font text-amber-900 mb-2">Ethiopian Bloom</h3>
|
||||
<p class="text-sm text-gray-500 mb-3">Light Roast | Floral & Citrus</p>
|
||||
<p class="text-gray-600 mb-4 text-sm">Bright, complex notes of jasmine and sweet lemon peel. A delicate awakening.</p>
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<span class="text-3xl font-bold text-amber-700">$19.00</span>
|
||||
<button class="btn-primary bg-amber-700 text-white py-2 px-5 rounded-lg text-md">
|
||||
Select
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Roast Card 2: Sumatran Dark -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-2xl card-hover border-t-4 border-amber-600">
|
||||
<div class="relative h-64 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1594717986313-a27d1a807a39?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDJ8fGNvZmZlZ2VyfGVufDB8fHx8MTYxNDU1OTE3OTA&ixlib=rb-4.0.3&q=80&w=800"
|
||||
alt="Rich Sumatran coffee beans" class="w-full h-full object-cover transition duration-500 hover:scale-105">
|
||||
<div class="absolute top-3 right-3 bg-amber-600 text-white text-sm font-bold px-3 py-1 rounded-full shadow-md">RICH</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-3xl heading-font text-amber-900 mb-2">Sumatran Earth</h3>
|
||||
<p class="text-sm text-gray-500 mb-3">Dark Roast | Earthy & Dark Chocolate</p>
|
||||
<p class="text-gray-600 mb-4 text-sm">Deep, brooding notes of dark cocoa, clove, and rich forest floor. A powerful brew.</p>
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<span class="text-3xl font-bold text-amber-700">$18.50</span>
|
||||
<button class="btn-primary bg-amber-700 text-white py-2 px-5 rounded-lg text-md">
|
||||
Select
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Roast Card 3: Guatemalan Sunrise -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-2xl card-hover border-t-4 border-amber-600">
|
||||
<div class="relative h-64 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1560345482-487f72c3e58e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDJ8fGNvZmZlZ2VyJTIwYW5pbWF0ZXIlMjBjb2ZmZmVyZ2V8ZW58fHwxNjE0NTU5MTc5&ixlib=rb-4.0.3&q=80&w=800"
|
||||
alt="Balanced Guatemalan coffee beans" class="w-full h-full object-cover transition duration-500 hover:scale-105">
|
||||
<div class="absolute top-3 right-3 bg-amber-600 text-white text-sm font-bold px-3 py-1 rounded-full shadow-md">BALANCED</div>
|
||||
</div>
|
||||
<div class="p-6"><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 29.99s</div>
|
||||
@@ -0,0 +1,187 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Autumn Reading Nook | Harvest Book Campaign</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
:root {
|
||||
--color-deep-maroon: #800000;
|
||||
--color-burnt-orange: #cc5500;
|
||||
--color-cream: #f5f5dc;
|
||||
}
|
||||
body {
|
||||
background-color: #fef9f4; /* Very light beige/off-white for cozy feel */
|
||||
font-family: 'Georgia', serif;
|
||||
}
|
||||
.header-bg {
|
||||
background-color: var(--color-deep-maroon);
|
||||
}
|
||||
.accent-color {
|
||||
color: var(--color-burnt-orange);
|
||||
}
|
||||
.shadow-book {
|
||||
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.shadow-book:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2), 0 8px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.fade-in-up {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: fadeIn 1s forwards;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
/* Custom focus styles for accessibility */
|
||||
.focus-visible:focus {
|
||||
outline: 3px solid var(--color-burnt-orange);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen">
|
||||
|
||||
<header class="header-bg shadow-lg">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex justify-between items-center">
|
||||
<h1 class="text-4xl font-serif font-bold text-white tracking-wider">
|
||||
The Autumn Quill
|
||||
</h1>
|
||||
<nav>
|
||||
<a href="#collection" class="text-white text-lg hover:text-gray-200 mx-3 transition duration-150">New Arrivals</a>
|
||||
<a href="#campaign" class="text-white text-lg hover:text-gray-200 mx-3 transition duration-150">Autumn Deals</a>
|
||||
<a href="#about" class="text-white text-lg hover:text-gray-200 mx-3 transition duration-150">Our Story</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="text-center mb-16 bg-cover bg-center rounded-xl shadow-xl"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1543723810-1441a9e3a01b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxhY3R1bmJhJTIwcmVkaW5nJTIwYm9vayUyMHB1cnR8ZW58MVwxMjM0NTYyNTYwfDA&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxhY3R1bmJhJTIwYm9vayUyMHB1cnR8ZW58MVwxMjM0NTYyNTYwfDA')"
|
||||
aria-label="Cozy Autumn Reading Scene">
|
||||
<div class="bg-black bg-opacity-40 p-8 rounded-xl">
|
||||
<h2 class="text-5xl md:text-7xl font-serif text-white mb-4 tracking-tight leading-snug fade-in-up" style="animation-delay: 0.2s;">
|
||||
Settle In. Turn The Page.
|
||||
</h2>
|
||||
<p class="text-xl text-white mb-8 max-w-3xl mx-auto fade-in-up" style="animation-delay: 0.4s;">
|
||||
As the leaves turn gold and the air grows crisp, discover your perfect companion for the season. Our Autumn Reading Collection awaits.
|
||||
</p>
|
||||
<a href="#collection" class="bg-orange-600 text-white text-xl font-semibold py-4 px-10 rounded-full shadow-2xl hover:bg-orange-700 focus-visible transition duration-300 transform hover:scale-105 fade-in-up" style="animation-delay: 0.6s;">
|
||||
Explore The Harvest
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Campaign Focus Section -->
|
||||
<section id="campaign" class="mb-20 bg-white p-8 lg:p-12 rounded-3xl border-4 border-orange-200 shadow-2xl fade-in-up" style="animation-delay: 0.8s;">
|
||||
<div class="grid lg:grid-cols-3 gap-10 items-start">
|
||||
|
||||
<div class="lg:col-span-2">
|
||||
<h2 class="text-5xl font-serif text-deep-maroon mb-4 border-b-4 border-burnt-orange pb-2">
|
||||
The Autumn Reading Pledge
|
||||
</h2>
|
||||
<p class="text-lg text-gray-700 mb-6 leading-relaxed">
|
||||
This season, we encourage you to embrace the slow rhythm of reading. Whether it's a sweeping historical epic, a cozy mystery nestled by a fireside, or profound nature writing, we have curated selections designed to deepen your connection with the pages. Our Autumn Campaign celebrates the comfort, the introspection, and the rich, muted beauty of this season.
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6 mt-8">
|
||||
<div class="bg-amber-50 p-6 rounded-xl border-l-8 border-burnt-orange shadow-book">
|
||||
<h4 class="text-2xl font-semibold text-deep-maroon mb-2">Cozy Mysteries</h4>
|
||||
<p class="text-sm text-gray-600">Small towns, whispered secrets, and the smell of woodsmoke. Perfect for curling up.</p>
|
||||
</div>
|
||||
<div class="bg-amber-50 p-6 rounded-xl border-l-8 border-burnt-orange shadow-book">
|
||||
<h4 class="text-2xl font-semibold text-deep-maroon mb-2">Literary Depth</h4>
|
||||
<p class="text-sm text-gray-600">Books that linger long after the final page is turned. Deep thought for quiet evenings.</p>
|
||||
</div>
|
||||
<div class="bg-amber-50 p-6 rounded-xl border-l-8 border-burnt-orange shadow-book">
|
||||
<h4 class="text-2xl font-semibold text-deep-maroon mb-2">Seasonal Reads</h4>
|
||||
<p class="text-sm text-gray-600">Stories infused with the harvest, changing light, and turning seasons.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA Card -->
|
||||
<div class="bg-deep-maroon bg-opacity-90 p-8 rounded-xl shadow-2xl flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 class="text-3xl text-white font-bold mb-3">🍁 Autumn Special Offer 🍁</h3>
|
||||
<p class="text-white mb-6 text-base">
|
||||
Receive 15% off any book bundle featuring a thematic seasonal read this month. Use code: HARVEST24 at checkout.
|
||||
</p>
|
||||
<ul class="text-white space-y-2 text-sm mb-8">
|
||||
<li class="flex items-center"><span class="accent-color mr-2 text-xl">✓</span> Curated Selection</li>
|
||||
<li class="flex items-center"><span class="accent-color mr-2 text-xl">✓</span> Shipping Discount</li>
|
||||
<li class="flex items-center"><span class="accent-color mr-2 text-xl">✓</span> Cozy Vibes Guaranteed</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#collection" class="bg-white text-deep-maroon text-center text-lg font-bold py-3 rounded-lg hover:bg-gray-100 transition duration-200 focus-visible">
|
||||
Shop The Collection Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Collection Grid -->
|
||||
<section id="collection" class="pt-10">
|
||||
<h2 class="text-5xl font-serif text-center text-deep-maroon mb-12 tracking-wide fade-in-up" style="animation-delay: 1.0s;">
|
||||
Our Featured Autumn Reads
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
|
||||
<!-- Book Card 1 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-book flex flex-col fade-in-up" style="animation-delay: 1.2s;">
|
||||
<img src="https://images.unsplash.com/photo-1540466841326-8a1c45048098?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxmb29yZGVyJTIwbG9naW5nJTIwYm9vayUyMHB1cnR8ZW58MVwxMjM0NTYyNTYwfDA&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxmb29yZGVyJTIwbG9naW5nJTIwYm9vayUyMHB1cnR8ZW58MVwxMjM0NTYyNTYwfDA"
|
||||
alt="Book cover image: Fireside reading" class="w-full h-64 object-cover">
|
||||
<div class="p-5 flex flex-col flex-grow">
|
||||
<h3 class="text-2xl font-semibold text-deep-maroon mb-1">The Hearthside Mystery</h3>
|
||||
<p class="text-sm text-gray-500 mb-3">A Cozy Classic</p>
|
||||
<p class="text-gray-600 mb-4 text-sm flex-grow">When the fog rolls in, the secrets of the small town begin to surface. A perfect autumn puzzle.</p>
|
||||
<div class="flex justify-between items-center mt-auto pt-2 border-t border-gray-100">
|
||||
<span class="text-3xl font-bold accent-color">$14.99</span>
|
||||
<button class="bg-burnt-orange text-white py-2 px-4 rounded-lg text-sm hover:bg-orange-700 transition focus-visible">
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Book Card 2 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-book flex flex-col fade-in-up" style="animation-delay: 1.4s;">
|
||||
<img src="https://images.unsplash.com/photo-1517690132093-4a9b97d4552e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxjb2F5JTIwbmV0ZXJufGVufDB8fHx8MTcxMDc4NjMwMnww&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxjb2F5JTIwbmV0ZXJufGVufDB8fHx8MTcxMDc4NjMwMnww"
|
||||
alt="Book cover image: Nature and harvest" class="w-full h-64 object-cover">
|
||||
<div class="p-5 flex flex-col flex-grow">
|
||||
<h3 class="text-2xl font-semibold text-deep-maroon mb-1">Whispers of the Orchard</h3>
|
||||
<p class="text-sm text-gray-500 mb-3">Literary Fiction</p>
|
||||
<p class="text-gray-600 mb-4 text-sm flex-grow">A beautifully written narrative following a family through a harvest season of change.</p>
|
||||
<div class="flex justify-between items-center mt-auto pt-2 border-t border-gray-100">
|
||||
<span class="text-3xl font-bold accent-color">$18.99</span>
|
||||
<button class="bg-burnt-orange text-white py-2 px-4 rounded-lg text-sm hover:bg-orange-700 transition focus-visible">
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Book Card 3 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-book flex flex-col fade-in-up" style="animation-delay: 1.6s;">
|
||||
<img src="https://images.unsplash.com/photo-1498348662635-63d750e1b060?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxjb2F5JTIwZGVwZW50cml8ZW58MVwxMjM0NTYyNTYwfDA&ixid=M3w0NTYxOXwwfDF8c2VhcmNofDEwfHxjb2F5JTIwZGVwZW50cml8ZW58MVwxMjM0NTYyNTYwfDA"
|
||||
alt="Book cover image: Moody landscape" class="w-full h-64 object-cover">
|
||||
<div class="p-5 flex flex-col flex-grow">
|
||||
<h3 class="text-2xl font-semibold text-deep-maroon mb-1">Shadows Over Willow Creek</h3>
|
||||
<p class="text-sm text-gray-500 mb-3">Gothic Fiction</p>
|
||||
<p class="text-gray-600 mb-4 text-sm flex-grow">Atmospheric prose exploring the mysteries that cling to old, autumnal landscapes.</p>
|
||||
<div class="flex justify-between items-center mt-auto pt-2 border-t border-gray-100">
|
||||
<span class="text-3xl font-bold accent-color">$16.50</span>
|
||||
<button class="bg-burnt-orange text-white py-2 px-4 rounded-lg text-sm hover:bg-orange-700 transition focus-visible">
|
||||
Add to Cart
|
||||
</button>
|
||||
</div><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 29.75s</div>
|
||||
@@ -0,0 +1,227 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meisterklasse: Digitale Handwerkskunst</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom configuration for Tailwind theme */
|
||||
:root {
|
||||
--color-primary: #4a90e2; /* Ein tiefes, vertrauenserweckendes Blau */
|
||||
--color-secondary: #f5a623; /* Ein warmer, energieriegelnder Orange/Goldton */
|
||||
--color-dark: #1f2937;
|
||||
}
|
||||
|
||||
/* Customizing Tailwind Colors for consistency */
|
||||
.bg-primary { background-color: var(--color-primary); }
|
||||
.text-primary { color: var(--color-primary); }
|
||||
.border-primary { border-color: var(--color-primary); }
|
||||
.bg-secondary { background-color: var(--color-secondary); }
|
||||
.text-secondary { color: var(--color-secondary); }
|
||||
|
||||
/* Subtle hover effect for cards/buttons */
|
||||
.card-hover:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Animation for the CTA button */
|
||||
.cta-pulse {
|
||||
animation: pulse-glow 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.4);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(74, 144, 226, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(74, 144, 226, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 font-sans antialiased text-gray-800">
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<header class="bg-white shadow-md sticky top-0 z-10">
|
||||
<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 items-center">
|
||||
<h1 class="text-2xl font-extrabold text-primary tracking-tight">
|
||||
Kunstwerkakademie
|
||||
</h1>
|
||||
</div>
|
||||
<nav class="space-x-4 hidden md:flex">
|
||||
<a href="#kurs" class="text-gray-600 hover:text-primary font-medium transition duration-150">Kurs</a>
|
||||
<a href="#module" class="text-gray-600 hover:text-primary font-medium transition duration-150">Module</a>
|
||||
<a href="#testimonials" class="text-gray-600 hover:text-primary font-medium transition duration-150">Erfolge</a>
|
||||
</nav>
|
||||
<a href="#purchase" class="bg-secondary text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-orange-600 transition duration-300 shadow-md focus:outline-none focus:ring-4 focus:ring-orange-300">
|
||||
Jetzt Starten
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="bg-gray-900 pt-16 pb-24 lg:pt-24 lg:pb-32 text-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<!-- Text Content -->
|
||||
<div class="lg:pt-10">
|
||||
<p class="text-secondary text-lg font-semibold mb-3 uppercase tracking-widest">Digitales Meistern</p>
|
||||
<h2 class="text-5xl lg:text-7xl font-extrabold leading-tight mb-6">
|
||||
Meisterklasse: Digitale Handwerkskunst
|
||||
</h2>
|
||||
<p class="text-xl text-gray-300 mb-8 max-w-lg">
|
||||
Verwandeln Sie Ihre kreativen Visionen in professionelle, verkaufsstarke digitale Produkte. Lernen Sie die angewandte Kunst des modernen digitalen Designs von Grund auf.
|
||||
</p>
|
||||
<div class="space-y-4 sm:space-y-3">
|
||||
<a href="#purchase" class="inline-block w-full lg:w-auto bg-primary text-white px-10 py-4 text-xl font-bold rounded-xl shadow-lg transition duration-300 transform hover:scale-105 hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-400 cta-pulse">
|
||||
Kurs jetzt sichern
|
||||
</a>
|
||||
<a href="#module" class="inline-block w-full lg:w-auto bg-transparent border-2 border-white text-white px-10 py-4 text-lg font-semibold rounded-xl transition duration-300 hover:bg-white hover:text-gray-900 focus:outline-none focus:ring-4 focus:ring-white/50">
|
||||
Curriculum entdecken
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visual Element (Simulated high-quality design asset) -->
|
||||
<div class="hidden lg:flex lg:w-1/2 relative">
|
||||
<!-- Mockup Visual representation -->
|
||||
<div class="bg-gradient-to-br from-gray-800 to-gray-900 p-10 rounded-3xl shadow-[0_30px_60px_rgba(0,0,0,0.5)] border-4 border-primary/50">
|
||||
<div class="text-center pt-10">
|
||||
<h3 class="text-4xl font-extrabold mb-4 text-secondary">PROJEKT-MUSTER</h3>
|
||||
<p class="text-gray-400 text-lg mb-8">Ein Blick auf die erstellten Ergebnisse.</p>
|
||||
<!-- Placeholder for a complex design mock-up -->
|
||||
<div class="bg-gray-700 p-6 rounded-xl border-l-4 border-secondary shadow-inner">
|
||||
<p class="text-white text-2xl font-serif italic leading-relaxed">
|
||||
"Die Schnittstelle zwischen Idee und perfekt funktionierendem digitalen Produkt."
|
||||
</p>
|
||||
<p class="text-sm text-gray-400 mt-2">- Kursabschnitt 3</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Course Overview Section -->
|
||||
<section id="kurs" class="py-20 lg:py-28 bg-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-xs uppercase tracking-widest text-secondary mb-2">Der Weg zum Expertenstatus</h2>
|
||||
<p class="text-4xl lg:text-5xl font-extrabold text-gray-900">
|
||||
Meistern Sie die digitale Handwerkskunst
|
||||
</p>
|
||||
<p class="mt-4 text-xl text-gray-600 max-w-3xl lg:mx-auto">
|
||||
Dieser Kurs ist für ambitionierte Kreative, Designer und Handwerker konzipiert, die ihre digitalen Fertigkeiten auf das nächste Niveau heben wollen und funktionale, ästhetisch herausragende Ergebnisse liefern möchten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature Grid -->
|
||||
<div class="grid md:grid-cols-3 gap-10 max-w-7xl mx-auto">
|
||||
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg border-t-4 border-primary card-hover transition duration-300">
|
||||
<div class="text-4xl text-primary mb-3">🛠️</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Fundamentale Prinzipien</h3>
|
||||
<p class="text-gray-600">Erwerben Sie ein tiefes Verständnis für Struktur, UX/UI-Design und moderne Web-Prinzipien, bevor Sie ein einziges Tool anfassen.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg border-t-4 border-secondary card-hover transition duration-300">
|
||||
<div class="text-4xl text-secondary mb-3">💡</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Praktische Werkstatt</h3>
|
||||
<p class="text-gray-600">Hands-on-Übungen mit realen Projekten. Bauen Sie Ihr Portfolio Schritt für Schritt auf und erleben Sie sofortige Ergebnisse.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg border-t-4 border-primary card-hover transition duration-300">
|
||||
<div class="text-4xl text-primary mb-3">🚀</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Marktfertigkeit</h3>
|
||||
<p class="text-gray-600">Lernen Sie, Ihre digitalen Kreationen nicht nur zu bauen, sondern auch effektiv zu vermarkten und zu monetarisieren.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Modules/Curriculum Section -->
|
||||
<section id="module" class="py-20 lg:py-28 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-xs uppercase tracking-widest text-secondary mb-2">Das Lehrplan</h2>
|
||||
<p class="text-4xl lg:text-5xl font-extrabold text-gray-900">
|
||||
Die Struktur Ihres digitalen Meisterwerks
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Timeline/Module Display -->
|
||||
<div class="relative max-w-4xl mx-auto">
|
||||
<!-- Vertical Line -->
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 hidden lg:block w-10 h-full bg-gray-200"></div>
|
||||
|
||||
<!-- Module Item 1 -->
|
||||
<div class="mb-12 flex lg:flex-row items-center w-full">
|
||||
<div class="lg:w-5/12 lg:pr-10"></div>
|
||||
<div class="z-10 p-4 w-full lg:w-1/2">
|
||||
<div class="bg-white border-l-8 border-primary p-5 shadow-lg rounded-lg transition duration-300 hover:shadow-xl card-hover">
|
||||
<h4 class="text-2xl font-bold text-primary mb-1">Modul 1: Grundlagen der digitalen Form</h4>
|
||||
<p class="text-sm uppercase tracking-widest text-gray-500 mb-3">Erste Schritte & Werkzeugkunde</p>
|
||||
<p class="text-gray-700">Wir beginnen mit der fundamentalen Theorie: Was macht ein 'digitales Handwerk' aus? Wir beleuchten Skalierbarkeit, bedingtes Design und die Werkzeuge, die Sie wirklich benötigen, um effizient zu arbeiten.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden lg:block lg:w-5/12">
|
||||
<div class="absolute left-1/2 transform -translate-y-1/2 top-0 w-8 h-8 bg-primary rounded-full border-4 border-white shadow-lg z-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Module Item 2 -->
|
||||
<div class="mb-12 flex lg:flex-row-reverse items-center w-full">
|
||||
<div class="lg:w-5/12 lg:pl-10"></div>
|
||||
<div class="z-10 p-4 w-full lg:w-1/2">
|
||||
<div class="bg-white border-l-8 border-secondary p-5 shadow-lg rounded-lg transition duration-300 hover:shadow-xl card-hover">
|
||||
<h4 class="text-2xl font-bold text-secondary mb-1">Modul 2: Nutzerzentriertes Design</h4>
|
||||
<p class="text-sm uppercase tracking-widest text-gray-500 mb-3">Empathie und Funktionalität</p>
|
||||
<p class="text-gray-700">Wie gestalten Sie für Menschen? Hier geht es um Nutzerforschung, Wireframing und die Schaffung intuitiver Pfade. Wir vermeiden Design für Designs willen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden lg:block lg:w-5/12">
|
||||
<div class="absolute left-1/2 transform -translate-y-1/2 top-0 w-8 h-8 bg-secondary rounded-full border-4 border-white shadow-lg z-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Module Item 3 -->
|
||||
<div class="mb-12 flex lg:flex-row items-center w-full">
|
||||
<div class="lg:w-5/12 lg:pr-10"></div>
|
||||
<div class="z-10 p-4 w-full lg:w-1/2">
|
||||
<div class="bg-white border-l-8 border-primary p-5 shadow-lg rounded-lg transition duration-300 hover:shadow-xl card-hover">
|
||||
<h4 class="text-2xl font-bold text-primary mb-1">Modul 3: Präsentation und Vermarktung</h4>
|
||||
<p class="text-sm uppercase tracking-widest text-gray-500 mb-3">Monetarisierung Ihrer Kreationen</p>
|
||||
<p class="text-gray-700">Ein Meisterwerk ist nur so gut wie seine Sichtbarkeit. Wir zeigen Ihnen Strategien, um Ihre digitalen Produkte erfolgreich an die Zielgruppe zu vermitteln und Ihren Wert zu festlegen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden lg:block lg:w-5/12">
|
||||
<div class="absolute left-1/2 transform -translate-y-1/2 top-0 w-8 h-8 bg-primary rounded-full border-4 border-white shadow-lg z-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonial Section -->
|
||||
<section id="testimonials" class="py-20 lg:py-28 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-xs uppercase tracking-widest text-secondary mb-2">Die Anerkennung</h2>
|
||||
<p class="text-4xl lg:text-5xl font-extrabold text-gray-900">
|
||||
Was unsere Teilnehmer sagen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols<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 29.44s</div>
|
||||
@@ -0,0 +1,336 @@
|
||||
<!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>Azure Escapes | The Amalfi Coast 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 {
|
||||
--amalfi-blue: #005F73;
|
||||
--amalfi-sand: #F8F9FA;
|
||||
--amalfi-gold: #EE9B00;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #2D3748;
|
||||
}
|
||||
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-glass {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
.hero-overlay {
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.5));
|
||||
}
|
||||
.card-hover {
|
||||
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-10px);
|
||||
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="bg-white">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav id="main-nav" class="fixed w-full z-50 transition-all duration-300 py-6 px-6 md:px-12">
|
||||
<div class="max-w-7xl mx-auto flex justify-between items-center">
|
||||
<a href="#" class="text-2xl font-bold serif tracking-tight text-slate-900">Azure<span class="text-[#EE9B00]">Escapes</span></a>
|
||||
<div class="hidden md:flex space-x-8 font-medium text-sm uppercase tracking-widest">
|
||||
<a href="#destinations" class="hover:text-[#EE9B00] transition-colors">Destinations</a>
|
||||
<a href="#flavors" class="hover:text-[#EE9B00] transition-colors">Flavors</a>
|
||||
<a href="#essentials" class="hover:text-[#EE9B00] transition-colors">Essentials</a>
|
||||
</div>
|
||||
<button class="md:hidden text-slate-900" id="mobile-menu-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Mobile Menu -->
|
||||
<div id="mobile-menu" class="hidden flex-col space-y-4 mt-4 text-center font-medium bg-white py-6 rounded-lg shadow-xl">
|
||||
<a href="#destinations" class="mobile-link">Destinations</a>
|
||||
<a href="#flavors" class="mobile-link">Flavors</a>
|
||||
<a href="#essentials" class="mobile-link">Essentials</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-screen min-h-[700px] flex items-center justify-center overflow-hidden">
|
||||
<img src="https://images.pexels.com/photos/35493335/pexels-photo-35493335.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Picturesque Italian village on Amalfi Coast with stunning architecture by the sea." class="absolute w-full h-full object-cover">
|
||||
<div class="absolute inset-0 hero-overlay"></div>
|
||||
<div class="relative z-10 text-center px-6 max-w-4xl">
|
||||
<span class="text-white uppercase tracking-[0.4em] text-sm mb-4 block">The Italian Dream</span>
|
||||
<h1 class="text-5xl md:text-8xl text-white mb-6 leading-tight">Amalfi Coast</h1>
|
||||
<p class="text-xl md:text-2xl text-white/90 font-light italic mb-10">Where azure waters meet sun-drenched cliffs.</p>
|
||||
<a href="#destinations" class="inline-block bg-[#EE9B00] text-white px-10 py-4 rounded-full text-sm font-semibold uppercase tracking-widest hover:bg-white hover:text-slate-900 transition-all duration-300">Explore the Coast</a>
|
||||
</div>
|
||||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10">
|
||||
<div class="text-white/70 text-xs flex items-center gap-2">
|
||||
<span class="w-12 h-[1px] bg-white/30"></span>
|
||||
Scroll to discover
|
||||
<span class="w-12 h-[1px] bg-white/30"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-4 right-4 z-10 text-[10px] text-white/60">
|
||||
Photo by Magda Ehlers on <a href="https://www.pexels.com/photo/scenic-view-of-amalfi-coast-village-35493335/" class="underline hover:text-white">Pexels</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Essence Section -->
|
||||
<section id="essence" class="py-24 px-6 md:px-12 max-w-7xl mx-auto">
|
||||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
||||
<div class="reveal">
|
||||
<span class="text-[#EE9B00] font-semibold tracking-widest uppercase text-sm">The Essence</span>
|
||||
<h2 class="text-4xl md:text-5xl mt-4 mb-8 leading-snug">A Mediterranean masterpiece of color and light.</h2>
|
||||
<p class="text-lg text-slate-600 leading-relaxed mb-6">
|
||||
Stretching along the southern edge of the Sorrentine Peninsula, the Amalfi Coast is a UNESCO World Heritage site that captures the soul of Italy. It is a landscape defined by dramatic limestone cliffs, terraced lemon groves, and villages that cling precariously to the rocks.
|
||||
</p>
|
||||
<p class="text-lg text-slate-600 leading-relaxed">
|
||||
Whether you are sailing through hidden grottos or dining on a terrace overlooking the Tyrrhenian Sea, the coast offers a sensory experience unlike any other on earth.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 reveal" style="transition-delay: 200ms;">
|
||||
<div class="space-y-4">
|
||||
<img src="https://images.pexels.com/photos/262540/pexels-photo-262540.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Lemon Grove" class="rounded-2xl w-full h-64 object-cover">
|
||||
<img src="https://images.pexels.com/photos/257409/pexels-photo-257409.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Coastal Path" class="rounded-2xl w-full h-48 object-cover">
|
||||
</div>
|
||||
<div class="space-y-4 pt-12">
|
||||
<img src="https://images.pexels.com/photos/1451374/pexels-photo-1451374.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Amalfi View" class="rounded-2xl w-full h-48 object-cover">
|
||||
<img src="https://images.pexels.com/photos/304675/pexels-photo-304675.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Italian Food" class="rounded-2xl w-full h-64 object-cover">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Destinations Section -->
|
||||
<section id="destinations" class="py-24 bg-slate-50 px-6 md:px-12">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-20 reveal">
|
||||
<h2 class="text-4xl md:text-5xl mb-4">Iconic Stops</h2>
|
||||
<div class="w-20 h-1 bg-[#EE9B00] mx-auto"></div>
|
||||
<p class="mt-6 text-slate-500 max-w-xl mx-auto">From vertical cities to mountain retreats, each village tells its own story.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
<!-- Positano -->
|
||||
<div class="reveal card-hover bg-white rounded-3xl overflow-hidden shadow-sm" style="transition-delay: 0ms;">
|
||||
<div class="h-72 overflow-hidden">
|
||||
<img src="https://images.pexels.com/photos/2011533/pexels-photo-2011533.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Positano" class="w-full h-full object-cover hover:scale-110 transition-transform duration-700">
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="text-2xl mb-3">Positano</h3>
|
||||
<p class="text-slate-600 text-sm leading-relaxed mb-6">The vertical city of pastel-colored houses. Famous for its steep streets, chic boutiques, and vibrant beach life.</p>
|
||||
<a href="#" class="text-[#EE9B00] font-semibold text-sm uppercase tracking-widest hover:text-slate-900 transition-colors">Read More →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Amalfi -->
|
||||
<div class="reveal card-hover bg-white rounded-3xl overflow-hidden shadow-sm" style="transition-delay: 200ms;">
|
||||
<div class="h-72 overflow-hidden">
|
||||
<img src="https://images.pexels.com/photos/10417012/pexels-photo-10417012.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Amalfi" class="w-full h-full object-cover hover:scale-110 transition-transform duration-700">
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="text-2xl mb-3">Amalfi</h3>
|
||||
<p class="text-slate-600 text-sm leading-relaxed mb-6">A historic maritime republic. Visit the magnificent Cathedral of Saint Andrew and explore ancient narrow alleys.</p>
|
||||
<a href="#" class="text-[#EE9B00] font-semibold text-sm uppercase tracking-widest hover:text-slate-900 transition-colors">Read More →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ravello -->
|
||||
<div class="reveal card-hover bg-white rounded-3xl overflow-hidden shadow-sm" style="transition-delay: 400ms;">
|
||||
<div class="h-72 overflow-hidden">
|
||||
<img src="https://images.pexels.com/photos/1598145/pexels-photo-1598145.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Ravello" class="w-full h-full object-cover hover:scale-110 transition-transform duration-700">
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="text-2xl mb-3">Ravello</h3>
|
||||
<p class="text-slate-600 text-sm leading-relaxed mb-6">Perched high above the sea. Known for its spectacular villas, lush gardens, and world-renowned classical music festivals.</p>
|
||||
<a href="#" class="text-[#EE9B00] font-semibold text-sm uppercase tracking-widest hover:text-slate-900 transition-colors">Read More →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Flavors Section -->
|
||||
<section id="flavors" class="py-24 px-6 md:px-12 max-w-7xl mx-auto">
|
||||
<div class="flex flex-col md:flex-row gap-16 items-center">
|
||||
<div class="md:w-1/2 reveal">
|
||||
<div class="relative">
|
||||
<div class="absolute -top-4 -left-4 w-32 h-32 bg-[#E9D8A6] rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
|
||||
<img src="https://images.pexels.com/photos/3123331/pexels-photo-3123331.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Lemon" class="relative rounded-2xl shadow-2xl z-10">
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2 reveal" style="transition-delay: 200ms;">
|
||||
<span class="text-[#EE9B00] font-semibold tracking-widest uppercase text-sm">Taste of the Coast</span>
|
||||
<h2 class="text-4xl md:text-5xl mt-4 mb-8 leading-tight">A Symphony of Citrus & Sea</h2>
|
||||
<div class="space-y-8">
|
||||
<div class="flex gap-6">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-[#EE9B00] text-xl font-bold">01</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-semibold mb-2">Limone Costa d'Amalfi</h4>
|
||||
<p class="text-slate-600">Savor the legendary oversized lemons. From fresh juice to the creamy, sweet Limoncello digestif.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-6">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-[#EE9B00] text-xl font-bold">02</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-semibold mb-2">Fresh Seafood</h4>
|
||||
<p class="text-slate-600">Spaghetti alle Vongole and freshly caught anchovies, prepared with local olive oil and sea salt.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-6">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-[#EE9B00] text-xl font-bold">03</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-semibold mb-2">Artisanal Pasta</h4>
|
||||
<p class="text-slate-600">Handmade scialatielli, the soul of coastal dining, perfect for soaking up rich tomato sauces.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Essentials Section -->
|
||||
<section id="essentials" class="py-24 bg-[#005F73] text-white overflow-hidden relative">
|
||||
<div class="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
|
||||
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="pattern-dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<circle cx="2" cy="2" r="1" fill="white" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#pattern-dots)" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto px-6 md:px-12 relative z-10">
|
||||
<div class="text-center mb-16 reveal">
|
||||
<h2 class="text-4xl md:text-5xl mb-4">Plan Your Journey</h2>
|
||||
<p class="text-white/60">Essential information for a seamless escape.</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="reveal bg-white/10 backdrop-blur-md p-8 rounded-2xl border border-white/10" style="transition-delay: 0ms;">
|
||||
<h3 class="text-xl font-bold mb-4">Best Time to Visit</h3>
|
||||
<p class="text-white/70 leading-relaxed">May through September offers the best weather. For quiet streets and lower prices, consider the gentle shoulder months of April or October.</p>
|
||||
</div>
|
||||
<div class="reveal bg-white/10 backdrop-blur-md p-8 rounded-2xl border border-white/10" style="transition-delay: 200ms;">
|
||||
<h3 class="text-xl font-bold mb-4">Getting Around</h3>
|
||||
<p class="text-white/70 leading-relaxed">Ferries are the most scenic way to travel between towns. For flexibility, consider private drivers, though the winding roads can be challenging.</p>
|
||||
</div>
|
||||
<div class="reveal bg-white/10 backdrop-blur-md p-8 rounded-2xl border border-white/10" style="transition-delay: 400ms;">
|
||||
<h3 class="text-xl font-bold mb-4">What to Pack</h3>
|
||||
<p class="text-white/70 leading-relaxed">Comfortable walking shoes for the stairs, lightweight linens, elegant evening attire, and plenty of sun protection.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-white py-16 px-6 md:px-12 border-t border-slate-100">
|
||||
<div class="max-w-7xl mx-auto grid md:grid-cols-4 gap-12">
|
||||
<div class="col-span-1 md:col-span-2">
|
||||
<a href="#" class="text-3xl font-bold serif tracking-tight mb-6 block">Azure<span class="text-[#EE9B00]">Escapes</span></a>
|
||||
<p class="text-slate-500 max-w-xs mb-6">Curating the world's most beautiful destinations for the discerning traveler.</p>
|
||||
<div class="flex space-x-4 text-slate-400">
|
||||
<a href="#" class="hover:text-[#EE9B00] transition-colors">Instagram</a>
|
||||
<a href="#" class="hover:text-[#EE9B00] transition-colors">Pinterest</a>
|
||||
<a href="#" class="hover:text-[#EE9B00] transition-colors">Facebook</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold mb-6 uppercase tracking-widest text-xs">Explore</h4>
|
||||
<ul class="space-y-3 text-slate-500 text-sm">
|
||||
<li><a href="#" class="hover:text-slate-900 transition-colors">Italy Guides</a></li>
|
||||
<li><a href="#" class="hover:text-slate-900 transition-colors">Mediterranean</a></li>
|
||||
<li><a href="#" class="hover:text-slate-900 transition-colors">Luxury Travel</a></li>
|
||||
<li><a href="#" class="hover:text-slate-900 transition-colors">Hidden Gems</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold mb-6 uppercase tracking-widest text-xs">Newsletter</h4>
|
||||
<p class="text-sm text-slate-500 mb-4">Get travel inspiration in your inbox.</p>
|
||||
<form class="flex gap-2">
|
||||
<input type="email" placeholder="Your email" class="bg-slate-100 border-none rounded-lg px-4 py-2 w-full text-sm focus:ring-2 focus:ring-[#EE9B00] outline-none">
|
||||
<button class="bg-slate-900 text-white px-4 py-2 rounded-lg text-sm hover:bg-slate-700 transition-colors">Join</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto mt-16 pt-8 border-t border-slate-100 text-center text-slate-400 text-xs">
|
||||
<p>© 2024 Azure Escapes Travel Guides. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Sticky Navigation
|
||||
const nav = document.getElementById('main-nav');
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 50) {
|
||||
nav.classList.add('nav-glass', 'py-4', 'shadow-md');
|
||||
nav.classList.remove('py-6', 'text-white');
|
||||
} else {
|
||||
nav.classList.remove('nav-glass', 'py-4', 'shadow-md');
|
||||
nav.classList.remove('py-6');
|
||||
}
|
||||
});
|
||||
|
||||
// Mobile Menu Toggle
|
||||
const menuBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const mobileLinks = document.querySelectorAll('.mobile-link');
|
||||
|
||||
menuBtn.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
mobileMenu.classList.toggle('flex');
|
||||
});
|
||||
|
||||
mobileLinks.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
mobileMenu.classList.add('hidden');
|
||||
mobileMenu.classList.remove('flex');
|
||||
});
|
||||
});
|
||||
|
||||
// Reveal on Scroll
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('active');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, 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 86.64s</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,237 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ELARA - Neue Musik: "Stille Gewitter"</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: #8B0000; /* Deep Crimson */
|
||||
--color-secondary: #FFD700; /* Gold Accent */
|
||||
--color-background: #121212; /* Dark Charcoal */
|
||||
}
|
||||
body {
|
||||
background-color: var(--color-background);
|
||||
color: #e0e0e0;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
transition: background-color 0.3s, transform 0.1s;
|
||||
box-shadow: 0 4px 15px rgba(139, 0, 0, 0.4);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #a52a2a; /* Slightly lighter red on hover */
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.btn-primary:focus {
|
||||
outline: 3px solid #FFD700;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
/* Custom Typography Styling for high impact */
|
||||
.display-font {
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@keyframes pulse-glow {
|
||||
0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
|
||||
50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
|
||||
100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
|
||||
}
|
||||
.animated-glow {
|
||||
animation: pulse-glow 3s infinite ease-in-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- Header / Navigation -->
|
||||
<header class="sticky top-0 z-50 bg-black/80 backdrop-blur-sm border-b border-gray-800 shadow-lg">
|
||||
<nav 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="text-2xl display-font text-white tracking-widest">
|
||||
ELARA
|
||||
</div>
|
||||
<div class="space-x-4 hidden sm:flex">
|
||||
<a href="#musik" class="text-sm font-medium text-gray-300 hover:text-red-600 transition duration-150 p-2">Musik</a>
|
||||
<a href="#tour" class="text-sm font-medium text-gray-300 hover:text-red-600 transition duration-150 p-2">Tour</a>
|
||||
<a href="#shop" class="text-sm font-medium text-gray-300 hover:text-red-600 transition duration-150 p-2">Shop</a>
|
||||
</div>
|
||||
<button class="sm:hidden text-gray-300 hover:text-red-500 focus:outline-none focus:text-white">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section id="hero" class="relative h-[70vh] flex items-center justify-center overflow-hidden border-b border-gray-800">
|
||||
<!-- Background Visual Element (Simulated Abstract Noise/Texture) -->
|
||||
<div class="absolute inset-0 bg-cover bg-center opacity-40" style="background-image: radial-gradient(circle at center, rgba(139, 0, 0, 0.1) 0%, transparent 60%);"></div>
|
||||
|
||||
<div class="relative text-center max-w-4xl px-4">
|
||||
<p class="text-xl sm:text-2xl text-gray-400 mb-3 tracking-widest uppercase">NEU IST DA</p>
|
||||
<h1 class="display-font text-7xl sm:text-8xl lg:text-9xl text-white leading-tight mb-6 drop-shadow-lg">
|
||||
STILLE GEWITTER
|
||||
</h1>
|
||||
<h2 class="text-2xl sm:text-4xl text-red-400 font-light mb-8">
|
||||
Das neue Album von Elara – Ein Klangbild der Intensität.
|
||||
</h2>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<div class="flex justify-center space-x-4">
|
||||
<a href="#preorder" class="btn-primary px-10 py-4 text-lg text-white uppercase rounded-lg shadow-xl focus:outline-none">
|
||||
JETZT STREAMEN
|
||||
</a>
|
||||
<a href="#shop" class="bg-gray-700 border-2 border-gray-600 px-8 py-4 text-lg text-gray-200 uppercase rounded-lg hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-red-500">
|
||||
Merchandise
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Music Player/Drop Section -->
|
||||
<section id="musik" class="py-20 lg:py-32 border-b border-gray-800">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<header class="text-center mb-12">
|
||||
<h3 class="text-sm uppercase tracking-widest text-red-500 mb-2">Das Werk</h3>
|
||||
<h2 class="display-font text-5xl lg:text-6xl text-white">
|
||||
Stille Gewitter
|
||||
</h2>
|
||||
<p class="text-gray-500 mt-4 text-lg">Ein Werk über die Schönheit des Unerwarteten. Erfahren Sie mehr über die Schaffensperiode.</p>
|
||||
</header>
|
||||
|
||||
<!-- Album Visualizer / Player Area -->
|
||||
<div class="flex flex-col lg:flex-row items-center gap-10 bg-gray-900 p-6 lg:p-10 rounded-xl shadow-2xl border border-gray-700">
|
||||
|
||||
<!-- Album Art / Visual -->
|
||||
<div class="lg:w-1/3 w-full flex justify-center">
|
||||
<div class="w-full aspect-square bg-gray-800 border-4 border-red-800 overflow-hidden relative shadow-inner">
|
||||
<!-- Simulated high-impact artwork -->
|
||||
<div class="w-full h-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1501854140861-41332e1a5e0e?w=800&auto=format&fit=crop');"></div>
|
||||
<div class="absolute inset-0 bg-black/30 flex items-center justify-center">
|
||||
<p class="text-white text-2xl display-font opacity-70">Album Cover</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tracklist & Controls -->
|
||||
<div class="lg:w-2/3 w-full">
|
||||
<div id="tracklist" class="space-y-4">
|
||||
<!-- Tracks are generated by JS for dynamic feel -->
|
||||
</div>
|
||||
|
||||
<!-- Playback Controls -->
|
||||
<div class="mt-10 pt-6 border-t border-gray-700">
|
||||
<p class="text-sm uppercase text-red-500 mb-3">Interaktion</p>
|
||||
<button id="playButton" class="btn-primary px-8 py-3 text-white text-lg rounded-lg focus:outline-none flex items-center">
|
||||
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
Wiedergabe starten
|
||||
</button>
|
||||
<p class="text-xs text-gray-500 mt-2">Klicken Sie auf ein Lied, um es anzuhören.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tour Dates Section -->
|
||||
<section id="tour" class="py-20 lg:py-32 border-b border-gray-800">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<header class="text-center mb-12">
|
||||
<h3 class="text-sm uppercase tracking-widest text-red-500 mb-2">Live-Erfahrung</h3>
|
||||
<h2 class="display-font text-5xl lg:text-6xl text-white">
|
||||
Tour: Stille Gewitter Tour 2024
|
||||
</h2>
|
||||
<p class="text-gray-500 mt-4 text-lg">Erlebe die Intensität live. Tickets sind limitiert.</p>
|
||||
</header>
|
||||
|
||||
<!-- Tour Dates Grid -->
|
||||
<div class="relative">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1 bg-gray-700/50 lg:hidden"></div>
|
||||
<div class="flex flex-col lg:flex-row gap-8">
|
||||
|
||||
<!-- Date List -->
|
||||
<div class="lg:w-2/3 w-full">
|
||||
<div class="space-y-6">
|
||||
<div class="relative border-l-2 border-gray-700 ml-4 pl-10">
|
||||
<div class="absolute left-0 top-0 h-6 w-6 bg-red-600 transform -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-gray-900 z-10"></div>
|
||||
<p class="text-lg font-semibold text-white mb-1">05. Oktober</p>
|
||||
<p class="text-gray-300">Kölner Hallen, Köln</p>
|
||||
</div>
|
||||
<div class="relative border-l-2 border-gray-700 ml-4 pl-10">
|
||||
<div class="absolute left-0 top-0 h-6 w-6 bg-red-600 transform -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-gray-900 z-10"></div>
|
||||
<p class="text-lg font-semibold text-white mb-1">21. Oktober</p>
|
||||
<p class="text-gray-300">Berlin Kulturbrauerei, Berlin</p>
|
||||
</div>
|
||||
<div class="relative border-l-2 border-gray-700 ml-4 pl-10">
|
||||
<div class="absolute left-0 top-0 h-6 w-6 bg-red-600 transform -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-gray-900 z-10"></div>
|
||||
<p class="text-lg font-semibold text-white mb-1">14. November</p>
|
||||
<p class="text-gray-300">Hamburg Elbvorhalle, Hamburg</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ticket CTA / Sidebar -->
|
||||
<div class="lg:w-1/3 w-full">
|
||||
<div class="bg-gray-800 p-6 rounded-xl border border-red-900/50 shadow-xl">
|
||||
<h4 class="text-2xl display-font text-red-400 mb-4">Tickets sichern</h4>
|
||||
<p class="text-gray-300 mb-6 text-sm">Sichern Sie sich Ihren Platz auf der Tour. Preise variieren je nach Venue und VIP-Option.</p>
|
||||
<a href="#" class="btn-primary w-full text-center py-3 text-lg text-white uppercase rounded-lg focus:outline-none">
|
||||
Jetzt Tickets kaufen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Shop Section -->
|
||||
<section id="shop" class="py-20 lg:py-32">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<header class="text-center mb-12">
|
||||
<h3 class="text-sm uppercase tracking-widest text-red-500 mb-2">Merchandise</h3>
|
||||
<h2 class="display-font text-5xl lg:text-6xl text-white">
|
||||
Shop Die Ästhetik
|
||||
</h2>
|
||||
<p class="text-gray-500 mt-4 text-lg">Trage die Stimmung von "Stille Gewitter" mit dir.</p>
|
||||
</header>
|
||||
|
||||
<!-- Product Grid -->
|
||||
<div id="productGrid" class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Products inserted by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-black border-t border-gray-800 mt-10">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div class="flex flex-wrap justify-between items-center border-b border-gray-800 pb-8 mb-8">
|
||||
<div class="text-2xl display-font text-white tracking-widest">
|
||||
ELARA
|
||||
</div>
|
||||
<div class="flex space-x-6">
|
||||
<a href="#" class="text-gray-400 hover:text-red-500 transition duration-150 text-sm">Impressum</a>
|
||||
<a href="#" class="text-gray-400 hover:text-red-500 transition duration-150 text-sm">Datenschutz</a>
|
||||
<a href="#" class="text-gray-400 hover:text-red-500 transition duration-150 text-sm">Kontakt</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center text-gray-500 text-sm">
|
||||
© 2024 Elara Musik. Alle Rechte vorbehalten. Erstellt mit Leidenschaft und Tailwind CSS.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// --- 1. Track<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.35s</div>
|
||||
@@ -0,0 +1,206 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Green Canopy Initiative | Urgent Support</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom styles for a sophisticated, grounded look */
|
||||
:root {
|
||||
--color-primary: #10b981; /* Emerald Green */
|
||||
--color-secondary: #059669; /* Darker Green */
|
||||
}
|
||||
.btn-primary {
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
|
||||
}
|
||||
.hero-image-overlay {
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.85) 100%);
|
||||
}
|
||||
.card-hover-effect {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.card-hover-effect:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
/* Simple focus ring enhancement for accessibility */
|
||||
*:focus {
|
||||
outline: 4px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-sans bg-gray-50 text-gray-800">
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-lg">
|
||||
<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 items-center">
|
||||
<div class="text-2xl font-extrabold text-gray-900 tracking-tight">
|
||||
The Green Canopy
|
||||
</div>
|
||||
<p class="ml-2 text-xs text-emerald-600 font-medium hidden sm:block">Planting Hope.</p>
|
||||
</div>
|
||||
<nav class="flex space-x-4">
|
||||
<a href="#about" class="text-sm font-medium text-gray-600 hover:text-emerald-600 transition duration-150 p-2 border-b-2 border-transparent hover:border-emerald-600">About Us</a>
|
||||
<a href="#impact" class="text-sm font-medium text-gray-600 hover:text-emerald-600 transition duration-150 p-2 border-b-2 border-transparent hover:border-emerald-600">Impact</a>
|
||||
<a href="#donate" class="text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 px-4 py-2 rounded-lg shadow-md transition duration-150 focus:ring-2 focus:ring-emerald-500">Donate Now</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section id="hero" class="relative h-[70vh] lg:h-[85vh] flex items-center justify-center bg-cover bg-center"
|
||||
style="background-image: url('https://images.pexels.com/photos/4835636/pexels-photo-4835636.jpeg?auto=compress&cs=tinysci&w=800');">
|
||||
<div class="absolute inset-0 hero-image-overlay"></div>
|
||||
<div class="relative z-10 text-center max-w-4xl px-4">
|
||||
<h1 class="text-5xl md:text-7xl font-extrabold text-white mb-4 leading-tight drop-shadow-lg">
|
||||
Restore Life. Cultivate Tomorrow.
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-gray-100 mb-8 font-light drop-shadow-md">
|
||||
Join The Green Canopy Initiative to reforest critical habitats and bring ecological balance back to vulnerable communities. Every seed matters.
|
||||
</p>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<a href="#donate" class="btn-primary bg-emerald-600 text-white text-lg font-semibold px-8 py-3 rounded-full shadow-xl transition duration-300 focus:ring-4 focus:ring-emerald-300">
|
||||
Give Today
|
||||
</a>
|
||||
<a href="#about" class="bg-white/20 text-white text-lg font-semibold px-8 py-3 rounded-full border-2 border-white hover:bg-white/30 transition duration-300">
|
||||
Learn Our Story
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Image Attribution -->
|
||||
<div class="absolute bottom-4 left-4 text-white text-sm opacity-80">
|
||||
Photo by <a href="https://www.pexels.com/search/photos/green-forest-pexels/" target="_blank" class="hover:text-white underline">Pexels</a> on <a href="https://www.pexels.com/search/photos/green-forest-pexels/" target="_blank" class="hover:text-white underline">Pexels</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="py-20 lg:py-32 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-sm uppercase tracking-widest text-emerald-600 font-bold">OUR MISSION</h2>
|
||||
<p class="text-5xl lg:text-6xl font-extrabold text-gray-900 mt-2">
|
||||
Reforesting a Better World
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
<!-- Pillar 1 -->
|
||||
<div class="bg-gray-50 p-8 rounded-xl shadow-lg border-t-4 border-emerald-500 card-hover-effect">
|
||||
<div class="text-5xl mb-4 text-emerald-600">🌳</div>
|
||||
<h3 class="text-2xl font-bold mb-3 text-gray-900">Ecological Restoration</h3>
|
||||
<p class="text-gray-600">We partner with local communities to plant native, resilient tree species, reversing deforestation and restoring vital biodiversity hotspots across vulnerable landscapes.</p>
|
||||
</div>
|
||||
<!-- Pillar 2 -->
|
||||
<div class="bg-gray-50 p-8 rounded-xl shadow-lg border-t-4 border-emerald-500 card-hover-effect">
|
||||
<div class="text-5xl mb-4 text-emerald-600">💧</div>
|
||||
<h3 class="text-2xl font-bold mb-3 text-gray-900">Water Security</h3>
|
||||
<p class="text-gray-600">Healthy forests are natural sponges. Our planting efforts help replenish groundwater, providing sustainable water sources for local populations.</p>
|
||||
</div>
|
||||
<!-- Pillar 3 -->
|
||||
<div class="bg-gray-50 p-8 rounded-xl shadow-lg border-t-4 border-emerald-500 card-hover-effect">
|
||||
<div class="text-5xl mb-4 text-emerald-600">🤝</div>
|
||||
<h3 class="text-2xl font-bold mb-3 text-gray-900">Community Empowerment</h3>
|
||||
<p class="text-gray-600">We work alongside indigenous and local groups, ensuring that reforestation projects are community-owned and sustainable for the long term.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Impact/Metrics Section -->
|
||||
<section id="impact" class="py-20 lg:py-32 bg-emerald-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-sm uppercase tracking-widest text-emerald-700 font-bold">OUR REACH</h2>
|
||||
<p class="text-5xl lg:text-6xl font-extrabold text-emerald-900 mt-2">
|
||||
Measuring Our Environmental Footprint
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-3 gap-10 text-center">
|
||||
<!-- Metric 1 -->
|
||||
<div class="p-8 bg-white rounded-xl shadow-xl border-b-4 border-emerald-400">
|
||||
<div class="text-6xl font-extrabold text-emerald-600 mb-2">+12,000</div>
|
||||
<p class="text-gray-600 text-xl font-semibold">Trees Planted to Date</p>
|
||||
</div>
|
||||
<!-- Metric 2 -->
|
||||
<div class="p-8 bg-white rounded-xl shadow-xl border-b-4 border-emerald-400">
|
||||
<div class="text-6xl font-extrabold text-emerald-600 mb-2">45+</div>
|
||||
<p class="text-gray-600 text-xl font-semibold">Active Project Sites</p>
|
||||
</div>
|
||||
<!-- Metric 3 -->
|
||||
<div class="p-8 bg-white rounded-xl shadow-xl border-b-4 border-emerald-400">
|
||||
<div class="text-6xl font-extrabold text-emerald-600 mb-2">$2.1M+</div>
|
||||
<p class="text-gray-600 text-xl font-semibold">Total Funds Raised</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-16">
|
||||
<p class="text-lg text-gray-600 mb-4">Your contribution fuels these tangible results. Help us reach our next milestone.</p>
|
||||
<a href="#donate" class="btn-primary bg-emerald-600 text-white text-lg font-semibold px-10 py-4 rounded-full shadow-lg transition duration-300 focus:ring-4 focus:ring-emerald-300">
|
||||
See The Impact
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Donation Form Section -->
|
||||
<section id="donate" class="py-20 lg:py-28 bg-gray-900">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-sm uppercase tracking-widest text-emerald-400 font-bold">SUPPORT</h2>
|
||||
<p class="text-5xl lg:text-6xl font-extrabold text-white mt-2">
|
||||
Sponsor A Seedling
|
||||
</p>
|
||||
<p class="text-lg mt-3 text-gray-300">
|
||||
Your generosity directly translates into life-giving greenery on the ground.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 lg:p-12 rounded-xl shadow-2xl border-t-8 border-emerald-500">
|
||||
<form id="donationForm" class="space-y-6">
|
||||
|
||||
<!-- Donation Amount Selection -->
|
||||
<div>
|
||||
<label for="amount" class="block text-sm font-medium text-gray-700 mb-2">Select Donation Tier</label>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<input type="radio" id="tier1" name="donationAmount" value="25" class="hidden peer" required>
|
||||
<label for="tier1" class="py-2 px-4 border border-gray-300 rounded-lg text-center cursor-pointer transition duration-150 bg-white hover:bg-emerald-50 peer-checked:bg-emerald-600 text-white font-semibold">
|
||||
$25 - Plant 10 Trees
|
||||
</label>
|
||||
<input type="radio" id="tier2" name="donationAmount" value="100" class="hidden peer">
|
||||
<label for="tier2" class="py-2 px-4 border border-gray-300 rounded-lg text-center cursor-pointer transition duration-150 bg-white hover:bg-emerald-50 peer-checked:bg-emerald-600 text-white font-semibold">
|
||||
$100 - Sponsor a Grove
|
||||
</label>
|
||||
<input type="radio" id="tier3" name="donationAmount" value="500" class="hidden peer">
|
||||
<label for="tier3" class="py-2 px-4 border border-gray-300 rounded-lg text-center cursor-pointer transition duration-150 bg-white hover:bg-emerald-50 peer-checked:bg-emerald-600 text-white font-semibold">
|
||||
$500 - Fund a Patch
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Personal Info -->
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
|
||||
<input type="text" id="name" name="name" required class="mt-1 block w-full px-3 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-emerald-500 focus:border-emerald-500 transition duration-150" placeholder="Your Full Name">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
|
||||
<input type="email" id="email" name="email" required class="mt-1 block w-full px-3 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-emerald-500 focus:border-emerald-500 transition duration-150" placeholder="you@example.com">
|
||||
</div>
|
||||
|
||||
<!-- Payment Placeholder (Simulated) -->
|
||||
<div>
|
||||
<label for="card" class="block text-sm font-medium text-gray-700 mb-1">Payment Method (Simulated)</label>
|
||||
<input type="text" id="card" name="card" required class="mt-1 block w-full px-3 py-3 border border-gray-30<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 29.05s</div>
|
||||
@@ -0,0 +1,215 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Herz für Zukunft: Unterstütze unsere Projekte</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom Configuration for Tailwind */
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
serif: ['Playfair Display', 'serif'],
|
||||
},
|
||||
colors: {
|
||||
'impact-red': '#C82424',
|
||||
'hope-green': '#4CAF50',
|
||||
'deep-blue': '#1A365D',
|
||||
'cream-bg': '#FAF9F6',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom CSS for subtle animation and typography */
|
||||
.hero-bg {
|
||||
background-image: linear-gradient(to bottom, #e0f2f1 0%, #b2dfdb 100%);
|
||||
}
|
||||
|
||||
.donate-button {
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 6px 15px rgba(128, 34, 34, 0.4);
|
||||
}
|
||||
.donate-button:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 20px rgba(128, 34, 34, 0.6);
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
transition: width 1.5s ease-out;
|
||||
}
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="font-sans bg-cream-bg text-gray-800 antialiased">
|
||||
|
||||
<!-- Header / Navigation -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-lg border-b border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-16">
|
||||
<h1 class="text-3xl font-serif font-black text-deep-blue tracking-wider">
|
||||
Herz<span class="text-hope-green">Für</span>Zukunft
|
||||
</h1>
|
||||
<nav class="hidden md:flex space-x-8 text-deep-blue font-medium">
|
||||
<a href="#mission" class="hover:text-impact-red transition duration-150 focus:outline-none focus:ring-2 focus:ring-impact-red p-1">Unsere Mission</a>
|
||||
<a href="#projekte" class="hover:text-impact-red transition duration-150 focus:outline-none focus:ring-2 focus:ring-impact-red p-1">Projekte</a>
|
||||
<a href="#impact" class="hover:text-impact-red transition duration-150 focus:outline-none focus:ring-2 focus:ring-impact-red p-1">Wirkung</a>
|
||||
<a href="#donate" class="px-4 py-2 bg-impact-red text-white rounded-lg hover:bg-red-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-impact-red/50">Spenden</a>
|
||||
</nav>
|
||||
<button class="md:hidden p-2 text-deep-blue focus:outline-none focus:ring-2 focus:ring-deep-blue" aria-label="Menü öffnen">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-bg pt-16 pb-20 border-b border-white">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-6xl sm:text-7xl font-serif font-extrabold text-deep-blue leading-tight mb-4 animate-fade-in">
|
||||
Jede Tat zählt. <br class="hidden sm:inline"> Hoffnung schenken.
|
||||
</h2>
|
||||
<p class="text-xl text-gray-700 mb-10 max-w-3xl mx-auto font-medium">
|
||||
Wir ermöglichen lebenswichtige Unterstützung für Gemeinschaften, die sie am dringendsten benötigen. Unterstützen Sie unsere Mission – gemeinsam bauen wir eine bessere Zukunft.
|
||||
</p>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<a href="#donate" class="donate-button px-10 py-4 text-xl bg-impact-red text-white font-bold rounded-xl shadow-lg focus:outline-none focus:ring-4 focus:ring-impact-red/50">
|
||||
Jetzt Spenden
|
||||
</a>
|
||||
<a href="#projekte" class="px-10 py-4 text-xl bg-white border-2 border-deep-blue text-deep-blue font-bold rounded-xl hover:bg-deep-blue hover:text-white transition duration-300 focus:outline-none focus:ring-4 focus:ring-deep-blue/50">
|
||||
Projekte entdecken
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mission Statement Section -->
|
||||
<section id="mission" class="py-20 bg-white">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<p class="text-hope-green text-lg font-semibold mb-2 uppercase tracking-widest">Unsere Grundlage</p>
|
||||
<h3 class="text-5xl sm:text-6xl font-serif font-bold text-deep-blue">
|
||||
Warum wir handeln
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
<!-- Wert 1 -->
|
||||
<div class="text-center p-8 border-t-4 border-hope-green bg-gray-50 shadow-md hover:shadow-lg transition duration-300">
|
||||
<div class="text-6xl text-hope-green mb-4">🌱</div>
|
||||
<h4 class="text-3xl font-bold text-deep-blue mb-2">Bedürfnisorientierung</h4>
|
||||
<p class="text-gray-600">Wir identifizieren die tiefsten und dringendsten Bedürfnisse vor Ort, um unsere Hilfe gezielt einzusetzen.</p>
|
||||
</div>
|
||||
<!-- Wert 2 -->
|
||||
<div class="text-center p-8 border-t-4 border-deep-blue bg-gray-50 shadow-md hover:shadow-lg transition duration-300">
|
||||
<div class="text-6xl text-deep-blue mb-4">🤝</div>
|
||||
<h4 class="text-3xl font-bold text-deep-blue mb-2">Gemeinschaftsstärkung</h4>
|
||||
<p class="text-gray-600">Wir fördern Selbsthilfe und stärken lokale Strukturen, damit die Hilfe nachhaltig wirkt.</p>
|
||||
</div>
|
||||
<!-- Wert 3 -->
|
||||
<div class="text-center p-8 border-t-4 border-impact-red bg-gray-50 shadow-md hover:shadow-lg transition duration-300">
|
||||
<div class="text-6xl text-impact-red mb-4">❤️</div>
|
||||
<h4 class="text-3xl font-bold text-deep-blue mb-2">Transparenz</h4>
|
||||
<p class="text-gray-600">Jeder Euro wird offen dokumentiert. Wir garantieren, dass Ihre Spende den Menschen hilft, die sie erreichen soll.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Donation Progress Section -->
|
||||
<section id="impact" class="py-20 bg-cream-bg border-t border-b border-gray-200">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h3 class="text-4xl font-serif font-bold text-deep-blue mb-3">Gemeinsamer Fortschritt</h3>
|
||||
<p class="text-xl text-gray-600 mb-12">Wir bewegen uns gemeinsam zu unserem Ziel, jeden Bedarf zu decken.</p>
|
||||
|
||||
<div class="w-full mb-8">
|
||||
<div class="flex justify-between mb-1 text-sm font-medium text-deep-blue">
|
||||
<span>Ziel: 100.000 €</span>
|
||||
<span>aktuell: <span id="current-amount">125.500</span> €</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-8">
|
||||
<div id="progress-bar" class="progress-bar-fill bg-hope-green h-8 rounded-full" style="width: 125.5;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-2xl text-gray-700 mt-8 font-semibold">
|
||||
Wir sind bereits <span class="text-impact-red">125%</span> des Weges zur Veränderung!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Projects Showcase Section -->
|
||||
<section id="projekte" class="py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<p class="text-hope-green text-lg font-semibold mb-2 uppercase tracking-widest">Unsere Arbeit</p>
|
||||
<h3 class="text-5xl sm:text-6xl font-serif font-bold text-deep-blue">
|
||||
Unsere aktuellen Projekte
|
||||
</h3>
|
||||
<p class="mt-4 text-lg text-gray-600 max-w-3xl">
|
||||
Von der Wasserversorgung bis zur Bildung – wir setzen direkt dort ein, wo Menschen am meisten Hilfe benötigen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-3 gap-10">
|
||||
<!-- Projekt 1: Wasser -->
|
||||
<div class="bg-white shadow-xl rounded-xl overflow-hidden transform hover:scale-[1.02] transition duration-500 border-t-8 border-hope-green">
|
||||
<div class="h-48 bg-gray-100 flex items-center justify-center relative">
|
||||
<div class="absolute inset-0 bg-cover bg-center opacity-60" style="background-image: url('https://picsum.photos/id/1042/800/600');"></div>
|
||||
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
|
||||
<p class="text-white text-3xl font-serif font-bold">Wasserversorgung</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-3xl font-serif font-bold text-deep-blue mb-3">Sauberes Wasser</h4>
|
||||
<p class="text-gray-600 mb-4 text-base">Installation nachhaltiger Wasseraufbereitungsanlagen in entlegenen Dörfern.</p>
|
||||
<button class="w-full py-3 bg-hope-green text-white text-lg font-bold rounded-lg hover:bg-green-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-hope-green/50">
|
||||
Unterstützen Sie
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projekt 2: Bildung -->
|
||||
<div class="bg-white shadow-xl rounded-xl overflow-hidden transform hover:scale-[1.02] transition duration-500 border-t-8 border-deep-blue">
|
||||
<div class="h-48 bg-gray-100 flex items-center justify-center relative">
|
||||
<div class="absolute inset-0 bg-cover bg-center opacity-60" style="background-image: url('https://picsum.photos/id/1025/800/600');"></div>
|
||||
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
|
||||
<p class="text-white text-3xl font-serif font-bold">Bildung</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-3xl font-serif font-bold text-deep-blue mb-3">Bildungszentren</h4>
|
||||
<p class="text-gray-600 mb-4 text-base">Schaffung von Lernräumen für Kinder und Jugendliche in Notlagen.</p>
|
||||
<button class="w-full py-3 bg-deep-blue text-white text-lg font-bold rounded-lg hover:bg-blue-800 transition duration-300 focus:outline-none focus:ring-4 focus:ring-deep-blue/50">
|
||||
Unterstützen Sie
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projekt 3: Ernährung -->
|
||||
<div class="bg-white shadow-xl rounded-xl overflow-hidden transform hover:scale-[1.02] transition duration-500 border-t-8 border-impact-red">
|
||||
<div class="h-48 bg-gray-100 flex items-center justify-center relative">
|
||||
<div class="absolute inset-0 bg-cover bg-center opacity-60" style="background-image: url('https://picsum.photos/id/1016/800/600');"></div>
|
||||
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
|
||||
<p class="text-white text-3xl font-serif font-bold">Ernährungssicherheit</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-3xl font-serif font-bold text-deep-blue mb-3">Ernährungssouveränität</h4>
|
||||
<p class="text-gray-600 mb-4 text-base">Unterstützung lokaler Bauern und Nahrungsmittelversorgung in Krisengebieten.</p>
|
||||
<button class="w-full py-3 bg-impact-red text-white text-lg font-bold rounded-lg hover:bg-red-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-impact-red/50">
|
||||
Unterstützen Sie
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Donation Form Section -->
|
||||
<section id="donate" class="py-24 bg-gray-50 border-t border-gray-200">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-<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.04s</div>
|
||||
@@ -0,0 +1,205 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Compassionate Paw - Adopt Today</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Customizing Tailwind Configuration for unique typography and color palette */
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'primary-maroon': '#8B0000',
|
||||
'secondary-cream': '#FAF0E6',
|
||||
'terracotta-orange': '#E97451',
|
||||
'deep-charcoal': '#36454F',
|
||||
},
|
||||
fontFamily: {
|
||||
heading: ['"Playfair Display", serif'],
|
||||
body: ['"Inter", sans-serif'],
|
||||
},
|
||||
animation: {
|
||||
'float': 'float 4s ease-in-out infinite',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Styles for visual flair */
|
||||
.hero-bg {
|
||||
background-image: url('https://images.unsplash.com/photo-1583838491795-51e0e8c22f3d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 15px 30px rgba(139, 0, 0, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
transition: background-color 0.3s, transform 0.3s;
|
||||
box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background-color: #A52A2A; /* Darker red on hover */
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.floating-pet {
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-15px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body bg-secondary-cream text-deep-charcoal antialiased">
|
||||
|
||||
<!-- Header and Navigation -->
|
||||
<header class="bg-white shadow-lg sticky top-0 z-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
||||
<h1 class="text-4xl font-heading text-primary-maroon tracking-widest">
|
||||
Compassionate Paw
|
||||
</h1>
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#adopt" class="text-lg hover:text-terracotta-orange transition duration-200 focus:outline-none focus:ring-2 focus:ring-terracotta-orange p-1">Adopt Me</a>
|
||||
<a href="#our-story" class="text-lg hover:text-terracotta-orange transition duration-200 focus:outline-none focus:ring-2 focus:ring-terracotta-orange p-1">Our Mission</a>
|
||||
<a href="#donate" class="text-lg hover:text-terracotta-orange transition duration-200 focus:outline-none focus:ring-2 focus:ring-terracotta-orange p-1">Donate</a>
|
||||
<a href="#contact" class="text-lg text-white bg-primary-maroon px-4 py-2 rounded-full hover:bg-deep-charcoal transition duration-200 focus:outline-none focus:ring-2 focus:ring-white">Get Involved</a>
|
||||
</nav>
|
||||
<button class="md:hidden text-deep-charcoal p-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-terracotta-orange" onclick="toggleMenu()">
|
||||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Mobile Menu Dropdown -->
|
||||
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100">
|
||||
<div class="px-4 pt-2 pb-3 space-y-1 sm:px-6">
|
||||
<a href="#adopt" class="block text-lg px-3 py-2 rounded-md text-deep-charcoal hover:bg-terracotta-orange/20 focus:outline-none focus:ring-2 focus:ring-terracotta-orange">Adopt Me</a>
|
||||
<a href="#our-story" class="block text-lg px-3 py-2 rounded-md text-deep-charcoal hover:bg-terracotta-orange/20 focus:outline-none focus:ring-2 focus:ring-terracotta-orange">Our Mission</a>
|
||||
<a href="#donate" class="block text-lg px-3 py-2 rounded-md text-deep-charcoal hover:bg-terracotta-orange/20 focus:outline-none focus:ring-2 focus:ring-terracotta-orange">Donate</a>
|
||||
<a href="#contact" class="block text-lg px-3 py-2 rounded-md text-white bg-primary-maroon hover:bg-deep-charcoal focus:outline-none focus:ring-2 focus:ring-white text-center">Get Involved</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-bg relative flex items-center justify-center text-center text-white pt-16 pb-20 shadow-inner">
|
||||
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
|
||||
<div class="relative z-10 max-w-4xl px-4">
|
||||
<h2 class="text-6xl md:text-7xl font-heading mb-4 leading-tight drop-shadow-lg">
|
||||
Find Your Furry Soulmate
|
||||
</h2>
|
||||
<p class="text-xl md:text-2xl mb-8 font-light drop-shadow-md">
|
||||
Every wagging tail, every gentle purr, deserves a loving home. Open your heart and welcome a companion.
|
||||
</p>
|
||||
<a href="#adopt" class="cta-button inline-block bg-terracotta-orange text-white text-xl px-10 py-4 rounded-full shadow-xl uppercase tracking-widest focus:outline-none focus:ring-4 focus:ring-terracotta-orange/50">
|
||||
Meet Adoptable Pets
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Adoption Showcase Section -->
|
||||
<section id="adopt" class="py-20 bg-secondary-cream border-b border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h3 class="text-5xl font-heading text-primary-maroon mb-3">
|
||||
Wonderful Companions Waiting
|
||||
</h3>
|
||||
<p class="text-xl text-deep-charcoal font-light">
|
||||
Browse profiles and start the journey to forever home.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Pet Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||
<!-- Pet Card 1 -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover cursor-pointer border-t-8 border-terracotta-orange">
|
||||
<div class="aspect-w-4 aspect-h-3 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1593645510748-c6782a946d36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1080&q=80"
|
||||
onerror="this.onerror=null;this.src='https://via.placeholder.com/400x300?text=Dog+Profile';"
|
||||
class="w-full h-full object-cover transition duration-500 group-hover:scale-105">
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-3xl font-heading text-primary-maroon mb-2">Barnaby</h4>
|
||||
<p class="text-lg text-deep-charcoal mb-3">Golden Retriever Mix</p>
|
||||
<p class="text-deep-charcoal mb-4 text-sm">Loves long walks, cuddles, and sunny naps. A loyal friend seeking a family to share adventures with.</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xl font-bold text-terracotta-orange">Age: 3 Yrs</span>
|
||||
<button class="cta-button bg-primary-maroon text-white px-6 py-3 text-lg rounded-lg uppercase focus:outline-none focus:ring-4 focus:ring-primary-maroon/50">
|
||||
View Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pet Card 2 -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover cursor-pointer border-t-8 border-primary-maroon">
|
||||
<div class="aspect-w-4 aspect-h-3 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1543424350-631677a8d392?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1080&q=80"
|
||||
onerror="this.onerror=null;this.src='https://via.placeholder.com/400x300?text=Cat+Profile';"
|
||||
class="w-full h-full object-cover transition duration-500 group-hover:scale-105">
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-3xl font-heading text-primary-maroon mb-2">Luna</h4>
|
||||
<p class="text-lg text-deep-charcoal mb-3">Ragdoll Cat</p>
|
||||
<p class="text-deep-charcoal mb-4 text-sm">A gentle soul who excels at lap-sitting. Perfect for quiet evenings and cozy living spaces.</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xl font-bold text-terracotta-orange">Age: 1 Yr</span>
|
||||
<button class="cta-button bg-primary-maroon text-white px-6 py-3 text-lg rounded-lg uppercase focus:outline-none focus:ring-4 focus:ring-primary-maroon/50">
|
||||
View Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pet Card 3 (Animated Example) -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover cursor-pointer border-t-8 border-terracotta-orange floating-pet">
|
||||
<div class="aspect-w-4 aspect-h-3 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1552559429-250f8c603558?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1080&q=80"
|
||||
onerror="this.onerror=null;this.src='https://via.placeholder.com/400x300?text=Small+Pet';"
|
||||
class="w-full h-full object-cover transition duration-500 group-hover:scale-105">
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-3xl font-heading text-primary-maroon mb-2">Pip</h4>
|
||||
<p class="text-lg text-deep-charcoal mb-3">Small Terrier Mix</p>
|
||||
<p class="text-deep-charcoal mb-4 text-sm">An energetic pup who thrives with playtime and adventure. Ready to bring joy to your daily routine!</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xl font-bold text-terracotta-orange">Age: 6 Mo</span>
|
||||
<button class="cta-button bg-primary-maroon text-white px-6 py-3 text-lg rounded-lg uppercase focus:outline-none focus:ring-4 focus:ring-primary-maroon/50">
|
||||
View Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-12">
|
||||
<a href="#" class="text-xl text-primary-maroon hover:text-terracotta-orange font-medium border-2 border-primary-maroon px-8 py-3 rounded-full focus:outline-none focus:ring-4 focus:ring-terracotta-orange/50 transition duration-300">
|
||||
View All Animals
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mission / Story Section -->
|
||||
<section id="our-story" class="py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- Text Content -->
|
||||
<div>
|
||||
<h3 class="text-5xl font-heading text-primary-maroon mb-4 leading-snug">
|
||||
Our Commitment to Second Chances
|
||||
</h3>
|
||||
<p class="text-xl text-deep-charcoal mb-6 leading-relaxed">
|
||||
Compassionate Paw was founded on the belief that every animal deserves a safe, loving, and permanent home. We are not just a shelter; we are a bridge between vulnerable animals and the loving families they deserve.
|
||||
</p>
|
||||
<p class="text-xl text-deep-charcoal mb-8 leading-relaxed border-l-<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.27s</div>
|
||||
@@ -0,0 +1,184 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Coastal Calm: A Guide to Big Sur, California</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom styles for enhanced typography and subtle effects */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@300;400;600&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #f7f7f7;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.display-header {
|
||||
font-family: 'Playfair Display', serif;
|
||||
line-height: 1.1;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.card-shadow {
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.card-shadow:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #4a90e2 0%, #8e44ad 100%);
|
||||
}
|
||||
|
||||
/* Subtle animation for sections */
|
||||
.fade-in-up {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: fadeInUp 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-md backdrop-blur-sm bg-opacity-95">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center py-4">
|
||||
<div class="text-2xl font-extrabold text-gray-800 tracking-tight">
|
||||
Coastal Calm
|
||||
</div>
|
||||
<nav class="space-x-8 hidden md:flex">
|
||||
<a href="#overview" class="text-gray-600 hover:text-indigo-600 font-medium transition duration-150 p-2">Overview</a>
|
||||
<a href="#must-see" class="text-gray-600 hover:text-indigo-600 font-medium transition duration-150 p-2">Highlights</a>
|
||||
<a href="#practical" class="text-gray-600 hover:text-indigo-600 font-medium transition duration-150 p-2">Logistics</a>
|
||||
<a href="#explore" class="text-gray-600 hover:text-indigo-600 font-medium transition duration-150 p-2">Explore</a>
|
||||
</nav>
|
||||
<!-- Mobile Menu Button (simplified for single page) -->
|
||||
<div class="md:hidden">
|
||||
<button id="menu-button" class="text-gray-600 hover:text-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 p-2 rounded">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-[60vh] flex items-center justify-center bg-cover bg-center"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1501854459366-72e30815315a?w=1920&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YmlnJTIwc3VyJTIwJTIwY2FsaW5lcnxlbnwwfDB8MHx8fDA%3D');">
|
||||
<div class="absolute inset-0 bg-black bg-opacity-40"></div>
|
||||
<div class="relative z-10 text-center px-4">
|
||||
<h1 class="text-6xl md:text-8xl font-extrabold text-white mb-4 display-header">
|
||||
Big Sur, California
|
||||
</h1>
|
||||
<p class="text-xl md:text-3xl text-gray-100 font-light max-w-3xl mx-auto">
|
||||
Where dramatic cliffs meet the vast Pacific Ocean. A journey for the soul.
|
||||
</p>
|
||||
<a href="#overview" class="mt-8 inline-block bg-white text-gray-800 text-lg font-semibold py-3 px-8 rounded-full shadow-lg hover:bg-gray-200 transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-indigo-300">
|
||||
Begin Your Journey
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Overview Section -->
|
||||
<section id="overview" class="py-20 sm:py-28 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-sm uppercase tracking-widest text-indigo-600 font-semibold mb-2">Destination Guide</h2>
|
||||
<p class="text-4xl md:text-5xl font-bold text-gray-800 display-header">
|
||||
The Majesty of Big Sur
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 text-center">
|
||||
<!-- Feature 1 -->
|
||||
<div class="p-8 bg-gray-50 rounded-xl border-t-4 border-indigo-500 card-shadow fade-in-up" style="animation-delay: 0.1s;">
|
||||
<h3 class="text-3xl font-bold text-indigo-700 mb-3">Rugged Coastline</h3>
|
||||
<p class="text-gray-600">Witness sheer granite cliffs plunging into the deep, restless expanse of the Pacific. The views are unparalleled.</p>
|
||||
</div>
|
||||
<!-- Feature 2 -->
|
||||
<div class="p-8 bg-gray-50 rounded-xl border-t-4 border-indigo-500 card-shadow fade-in-up" style="animation-delay: 0.3s;">
|
||||
<h3 class="text-3xl font-bold text-indigo-700 mb-3">Lush Monterey Flora</h3>
|
||||
<p class="text-gray-600">The area blends dramatic geology with dense, vibrant coastal forests, offering a diverse natural escape.</p>
|
||||
</div>
|
||||
<!-- Feature 3 -->
|
||||
<div class="p-8 bg-gray-50 rounded-xl border-t-4 border-indigo-500 card-shadow fade-in-up" style="animation-delay: 0.5s;">
|
||||
<h3 class="text-3xl font-bold text-indigo-700 mb-3">Wildlife Encounters</h3>
|
||||
<p class="text-gray-600">Keep an eye out for seals, migrating whales, and diverse birdlife along the winding coastal drives.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Must-See Highlights Section -->
|
||||
<section id="must-see" class="py-20 sm:py-28 bg-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-sm uppercase tracking-widest text-indigo-600 font-semibold mb-2">Top Attractions</h2>
|
||||
<p class="text-4xl md:text-5xl font-bold text-gray-800 display-header">
|
||||
Essential Stops on the Drive
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- Image/Visual Focus -->
|
||||
<div class="relative rounded-2xl overflow-hidden shadow-2xl transform hover:scale-[1.02] transition duration-500">
|
||||
<img src="https://images.unsplash.com/photo-1533135504135-f275c88a575c?w=1920&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YmlnJTIwc3VyJTIwY2FsaW5lcnxlbnwwfDB8MHx8fDA%3D"
|
||||
alt="Bixby Bridge overlooking the Pacific in Big Sur"
|
||||
class="w-full h-96 object-cover transition duration-500 group-hover:opacity-90">
|
||||
<div class="absolute inset-x-0 bottom-0 p-6 bg-black bg-opacity-50">
|
||||
<h3 class="text-4xl font-bold text-white display-header">Bixby Bridge</h3>
|
||||
<p class="text-white text-lg mt-1">An iconic landmark offering breathtaking photographic opportunities.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Card -->
|
||||
<div class="space-y-8">
|
||||
<!-- Highlight 1 -->
|
||||
<div class="p-6 bg-white rounded-xl border-l-8 border-orange-500 card-shadow fade-in-up" style="animation-delay: 0.2s;">
|
||||
<h4 class="text-2xl font-bold text-gray-800 mb-2 flex items-center"><svg class="w-6 h-6 mr-2 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4m-4 0v12m0 0a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v7a2 2 0 01-2 2h-4z"></path></svg> Point Lobos State Natural Reserve</h4>
|
||||
<p class="text-gray-600 leading-relaxed">This reserve is a haven for marine life viewing and coastal hiking. Allow ample time for exploration; the trails wind through diverse ecosystems.</p>
|
||||
</div>
|
||||
<!-- Highlight 2 -->
|
||||
<div class="p-6 bg-white rounded-xl border-l-8 border-green-500 card-shadow fade-in-up" style="animation-delay: 0.4s;">
|
||||
<h4 class="text-2xl font-bold text-gray-800 mb-2 flex items-center"><svg class="w-6 h-6 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg> Pfeiffer Big Sur State Park</h4>
|
||||
<p class="text-gray-600 leading-relaxed">Perfect for those seeking a deeper immersion into the redwood forests. Bring layers, as the coastal fog can be unpredictable.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Practical Logistics Section -->
|
||||
<section id="practical" class="py-20 sm:py-28 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-sm uppercase tracking-widest text-indigo-600 font-semibold mb-2">Visitor Information</h2>
|
||||
<p class="text-4xl md:text-5xl font-bold text-gray-800 display-header">
|
||||
Planning Your Coastal Passage
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-12">
|
||||
<!-- Logistics Box 1: Driving -->
|
||||
<div class="p-8 bg-gray-50 rounded-xl border-b-8 border-indigo-600 card-shadow fade-in-up" style="animation-delay: 0.1s;">
|
||||
<h3 class="text-3xl font-bold text-indigo-800 mb-4 flex items-center">
|
||||
<svg class="w-7 h-7 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 12v10a2 2 0 01-2-2v-6a2 2 0 012-2h14a2 2 0 012 2v6a2 2 0 01-2 2H5z"></path></svg> Driving & Access</h3>
|
||||
<p class="text-gray-600 mb-4">The Big Sur Highway (Highway 1) is famous for its views, but it requires careful driving. Be prepared for winding roads and frequent fog.</p>
|
||||
<ul class="space-y-3 text-gray-700">
|
||||
<li class="flex items-start"><span class="text-indigo-500 mr-2 text-lg">→</span> Always check road conditions before departing.</li>
|
||||
<li class="flex items-start"><span class="text-indigo-500 mr-2 text-lg">→</span> Allow extra time for photo stops; the journey is the destination.</li>
|
||||
<li class="flex items-start"><span class="text-indigo-500 mr-2 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 30.47s</div>
|
||||
@@ -0,0 +1,206 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>VitalKraft - Dein Weg zur inneren Stärke</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom Configuration for Tailwind */
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'primary-green': '#10B981', /* Emerald Green */
|
||||
'dark-charcoal': '#1F2937', /* Dark Charcoal Gray */
|
||||
'light-bg': '#F9FAFB', /* Light Gray Background */
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
serif: ['Playfair Display', 'serif'],
|
||||
},
|
||||
boxShadow: {
|
||||
'vital': '0 10px 20px rgba(16, 185, 129, 0.2)',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom CSS for subtle animations and typography */
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg, #059669 0%, #10B981 100%);
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
transition: width 2s ease-out;
|
||||
}
|
||||
|
||||
/* Ensure smooth scrolling for navigation */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
<!-- Load Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-light-bg font-sans text-dark-charcoal antialiased">
|
||||
|
||||
<!-- Header & Navigation -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-lg border-b border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<!-- Logo/Brand Name -->
|
||||
<div class="flex-shrink-0">
|
||||
<a href="#" class="text-3xl font-bold text-dark-charcoal flex items-center">
|
||||
<svg class="w-8 h-8 text-primary-green mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||||
VitalKraft
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#methodik" class="text-gray-600 hover:text-primary-green px-3 py-1 border-b-2 border-transparent hover:border-primary-green transition duration-150 font-medium">Methode</a>
|
||||
<a href="#leistungen" class="text-gray-600 hover:text-primary-green px-3 py-1 border-b-2 border-transparent hover:border-primary-green transition duration-150 font-medium">Leistungen</a>
|
||||
<a href="#erfolge" class="text-gray-600 hover:text-primary-green px-3 py-1 border-b-2 border-transparent hover:border-primary-green transition duration-150 font-medium">Erfolge</a>
|
||||
<a href="#kontakt" class="text-gray-600 hover:text-primary-green px-3 py-1 border-b-2 border-transparent hover:border-primary-green transition duration-150 font-medium">Kontakt</a>
|
||||
</nav>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<div class="hidden md:block">
|
||||
<a href="#kontakt" class="bg-primary-green text-white px-6 py-2 rounded-full shadow-lg hover:bg-green-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-primary-green focus:ring-opacity-50">
|
||||
Starte Jetzt
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Menu (Simplified for single page, using a visible toggle area) -->
|
||||
<div class="md:hidden border-t border-gray-100 p-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xl font-bold text-dark-charcoal">VitalKraft</span>
|
||||
<button id="mobile-menu-button" class="text-dark-charcoal text-2xl focus:outline-none focus:ring-2 focus:ring-primary-green">
|
||||
<!-- Hamburger Icon -->
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav id="mobile-menu" class="hidden space-y-2 mt-4">
|
||||
<a href="#methodik" class="block p-3 text-dark-charcoal hover:bg-gray-100 transition">Methode</a>
|
||||
<a href="#leistungen" class="block p-3 text-dark-charcoal hover:bg-gray-100 transition">Leistungen</a>
|
||||
<a href="#erfolge" class="block p-3 text-dark-charcoal hover:bg-gray-100 transition">Erfolge</a>
|
||||
<a href="#kontakt" class="block p-3 bg-primary-green text-white text-center hover:bg-green-700 transition">Starte Jetzt</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-gradient pt-20 pb-32 text-white shadow-vital">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h1 class="text-5xl sm:text-7xl font-extrabold mb-4 leading-tight tracking-tight">
|
||||
Entfessle Deine <span class="block mt-2">wahre innere Kraft.</span>
|
||||
</h1>
|
||||
<p class="text-xl sm:text-2xl mb-10 max-w-3xl mx-auto opacity-90">
|
||||
VitalKraft ist mehr als Training – es ist eine Transformation. Wir bauen nachhaltige Stärke in deinen Alltag ein.
|
||||
</p>
|
||||
<a href="#kontakt" class="inline-block bg-white text-dark-charcoal font-bold text-lg px-10 py-4 rounded-full shadow-xl transition duration-300 hover:bg-gray-100 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-75">
|
||||
Kostenloses Beratungsgespräch
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mission/Philosophy Section -->
|
||||
<section id="methodik" class="py-20 lg:py-28 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center max-w-4xl mx-auto mb-16">
|
||||
<h2 class="text-sm uppercase tracking-widest text-primary-green mb-2">Unsere Philosophie</h2>
|
||||
<p class="text-5xl font-bold text-dark-charcoal leading-snug">
|
||||
Nachhaltige Stärke, nicht schnelle Kurse.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
<!-- Feature 1 -->
|
||||
<div class="p-8 bg-light-bg rounded-xl shadow-lg transition duration-300 card-hover border-t-4 border-primary-green">
|
||||
<div class="text-primary-green mb-4 text-5xl">🌱</div>
|
||||
<h3 class="text-2xl font-bold mb-3 text-dark-charcoal">Individuelle Planung</h3>
|
||||
<p class="text-gray-600">Keine Standardprogramme. Wir analysieren deinen Lebensstil und erstellen einen Plan, der wirklich zu DIR passt.</p>
|
||||
</div>
|
||||
<!-- Feature 2 -->
|
||||
<div class="p-8 bg-light-bg rounded-xl shadow-lg transition duration-300 card-hover border-t-4 border-primary-green">
|
||||
<div class="text-primary-green mb-4 text-5xl">🧠</div>
|
||||
<h3 class="text-2xl font-bold mb-3 text-dark-charcoal">Mentale Stärke</h3>
|
||||
<p class="text-gray-600">Fitness ist mental. Wir arbeiten an deiner Disziplin und deinem Mindset für langfristigen Erfolg.</p>
|
||||
</div>
|
||||
<!-- Feature 3 -->
|
||||
<div class="p-8 bg-light-bg rounded-xl shadow-lg transition duration-300 card-hover border-t-4 border-primary-green">
|
||||
<div class="text-primary-green mb-4 text-5xl">🤝</div>
|
||||
<h3 class="text-2xl font-bold mb-3 text-dark-charcoal">Ganzheitlicher Coach</h3>
|
||||
<p class="text-gray-600">Ernährung, Bewegung, Erholung – Wir begleiten dich auf allen Ebenen zu deinem besten Selbst.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services/Offerings Section -->
|
||||
<section id="leistungen" class="py-20 lg:py-28 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center max-w-3xl mx-auto mb-12">
|
||||
<h2 class="text-sm uppercase tracking-widest text-primary-green mb-2">Unsere Angebote</h2>
|
||||
<p class="text-4xl font-bold text-dark-charcoal leading-tight">
|
||||
Wähle deinen Pfad zur Vitalität.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Service Cards Grid -->
|
||||
<div class="grid lg:grid-cols-3 gap-8">
|
||||
|
||||
<!-- Service 1: Einzelcoaching -->
|
||||
<div class="bg-white rounded-xl p-8 shadow-vital shadow-lg border-b-8 border-primary-green transition duration-300 transform hover:shadow-2xl">
|
||||
<h3 class="text-3xl font-bold mb-3 text-dark-charcoal">1:1 Vital-Coaching</h3>
|
||||
<p class="text-gray-600 mb-4">Intensive, personalisierte Begleitung für maximale Ergebnisse. Perfekt für den tiefgreifenden Wandel.</p>
|
||||
<ul class="space-y-2 text-gray-700 mb-6 list-none">
|
||||
<li class="flex items-center"><span class="text-primary-green mr-2">✓</span> Ernährungsanalyse</li>
|
||||
<li class="flex items-center"><span class="text-primary-green mr-2">✓</span> Trainingsplanung</li>
|
||||
<li class="flex items-center"><span class="text-primary-green mr-2">✓</span> Mindset Training</li>
|
||||
</ul>
|
||||
<div class="mt-6 pt-4 border-t flex justify-between items-center">
|
||||
<span class="text-xl font-bold text-dark-charcoal">Ab 399€ / Monat</span>
|
||||
<button class="bg-primary-green text-white px-6 py-3 rounded-full text-sm shadow-md hover:bg-green-700 transition focus:outline-none focus:ring-4 focus:ring-primary-green">
|
||||
Mehr erfahren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service 2: Gruppenfitness -->
|
||||
<div class="bg-white rounded-xl p-8 shadow-lg border-b-8 border-amber-500 transition duration-300 transform hover:shadow-2xl">
|
||||
<h3 class="text-3xl font-bold mb-3 text-dark-charcoal">Gruppentraining "Kraftnetz"</h3>
|
||||
<p class="text-gray-600 mb-4">Motivation durch Gemeinschaft. Dynamische Trainingsmodule für alle Fitnesslevel.</p>
|
||||
<ul class="space-y-2 text-gray-700 mb-6 list-none">
|
||||
<li class="flex items-center"><span class="text-amber-500 mr-2">✓</span> Soziale Dynamik</li>
|
||||
<li class="flex items-center"><span class="text-amber-500 mr-2">✓</span> Flexible Zeiten</li>
|
||||
<li class="flex items-center"><span class="text-amber-500 mr-2">✓</span> Gemeinschaftsgeist</li>
|
||||
</ul>
|
||||
<div class="mt-6 pt-4 border-t flex justify-between items-center">
|
||||
<span class="text-xl font-bold text-dark-charcoal">Ab 79€ / Monat</span>
|
||||
<button class="bg-amber-500 text-white px-6 py-3 rounded-full text-sm shadow-md hover:bg-amber-600 transition focus:outline-none focus:ring-4 focus:ring-amber-500">
|
||||
Jetzt beitreten
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service 3: Digitale Programme -->
|
||||
<div class="bg-white rounded-xl p-8 shadow-lg border-b-8 border-indigo-500 transition duration-300 transform hover:shadow-2xl">
|
||||
<h3 class="text-3xl font-bold mb-3 text-dark-charcoal">Digitale Trainingspakete</h3>
|
||||
<p class="text-gray-600 mb-4">Trainiere jederzeit und überall mit unseren digitalen Guides. Dein Fitnessplan im Pocket.</p>
|
||||
<ul class="space-y-2 text-gray-700 mb-6 list-none">
|
||||
<li class="flex items-center"><span class="text-indigo-500 mr-2">✓</span> Anytime-Zugriff</li>
|
||||
<li class="flex items-center"><span class="text-indigo-500 mr-2">✓</span> Ernährungs-Templates</li>
|
||||
<li class="flex items-center"><span class="text-indigo-500 mr-2">✓</span> Community Support</li>
|
||||
</ul>
|
||||
<div class="mt-6 pt-4 border-t flex justify-between items-center">
|
||||
<span class="text-xl font-bold text-dark-charcoal">Ab 49€ / Monat</span>
|
||||
<button class="bg-indigo-50<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 29.90s</div>
|
||||
@@ -0,0 +1,175 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Roastery Hearth - Artisan Coffee Roaster</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: #5C3A21; /* Deep Coffee Brown */
|
||||
--color-secondary: #A08466; /* Roasted Grain/Tan */
|
||||
--color-light: #F5F1E9; /* Creamy Off-White */
|
||||
}
|
||||
body {
|
||||
background-color: var(--color-light);
|
||||
color: #333;
|
||||
font-family: 'Georgia', serif;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.btn-primary {
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(92, 58, 33, 0.3);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(92, 58, 33, 0.5);
|
||||
background-color: #7d4a28;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
||||
transition: box-shadow 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
/* Custom gradient for header section */
|
||||
.hero-gradient {
|
||||
background: linear-gradient(180deg, var(--color-light) 0%, #e0d4c8 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<header class="sticky top-0 z-50 bg-white/95 backdrop-blur-sm shadow-md">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<div class="text-3xl font-extrabold tracking-tight text-[var(--color-primary)]">
|
||||
HearthRoast
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#roasts" class="text-gray-700 hover:text-[var(--color-primary)] transition duration-150 font-medium focus:outline-none focus:text-[var(--color-primary)]">Our Roasts</a>
|
||||
<a href="#about" class="text-gray-700 hover:text-[var(--color-primary)] transition duration-150 font-medium focus:outline-none focus:text-[var(--color-primary)]">Our Craft</a>
|
||||
<a href="#shop" class="text-gray-700 hover:text-[var(--color-primary)] transition duration-150 font-medium focus:outline-none focus:text-[var(--color-primary)]">Shop</a>
|
||||
<a href="#contact" class="text-gray-700 hover:text-[var(--color-primary)] transition duration-150 font-medium focus:outline-none focus:text-[var(--color-primary)]">Contact</a>
|
||||
</nav>
|
||||
<div class="md:hidden">
|
||||
<button id="menu-button" class="text-gray-700 hover:text-[var(--color-primary)] focus:outline-none focus:text-[var(--color-primary)] p-2 rounded-md">
|
||||
<!-- Hamburger Icon -->
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Menu (Hidden by default) -->
|
||||
<div id="mobile-menu" class="md:hidden hidden bg-white/90 border-t">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<a href="#roasts" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">Our Roasts</a>
|
||||
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">Our Craft</a>
|
||||
<a href="#shop" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">Shop</a>
|
||||
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-gradient pt-16 pb-24 text-center shadow-inner">
|
||||
<div class="max-w-4xl mx-auto px-4">
|
||||
<h1 class="text-6xl md:text-7xl font-serif font-bold text-[var(--color-primary)] leading-tight mb-4 animate-in fade-in duration-1000">
|
||||
The Art of the Perfect Brew.
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
We meticulously roast single-origin beans to unlock the deepest, most complex notes of the world's finest coffee. Sourced ethically, roasted passionately.
|
||||
</p>
|
||||
<a href="#shop" class="btn-primary inline-block bg-[var(--color-primary)] text-white text-xl font-semibold py-4 px-10 rounded-lg uppercase tracking-wider shadow-lg focus:outline-none focus:ring-4 focus:ring-[var(--color-secondary)]">
|
||||
Explore Our Roasts
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Roasts Section -->
|
||||
<section id="roasts" class="py-20 lg:py-28 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-sm uppercase tracking-widest text-[var(--color-secondary)] mb-2">Signature Selections</h2>
|
||||
<p class="text-5xl md:text-6xl font-bold text-[var(--color-primary)]">Our Current Batch</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Roast Card 1: Ethiopian Yirgacheffe -->
|
||||
<div class="bg-gray-50 rounded-xl shadow-xl p-6 border-t-8 border-[var(--color-secondary)] transition duration-300 card-hover cursor-pointer">
|
||||
<div class="relative h-48 bg-cover bg-center rounded-lg mb-4" style="background-image: url('https://images.unsplash.com/photo-1556905004-513e3285c480?w=600&h=600&fit=crop');">
|
||||
<div class="absolute inset-0 bg-black/20"></div>
|
||||
<span class="absolute top-3 right-3 text-white text-xs bg-black/60 px-3 py-1 rounded-full uppercase tracking-widest">Light</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-[var(--color-primary)] mb-2">Yirgacheffe Bloom</h3>
|
||||
<p class="text-gray-600 mb-4 text-sm italic">Bright, floral acidity with notes of blueberry and lemon zest.</p>
|
||||
<div class="flex justify-between items-center pt-2">
|
||||
<span class="text-2xl font-extrabold text-[var(--color-primary)]">$19.00</span>
|
||||
<button class="btn-primary bg-gray-800 text-white py-3 px-6 rounded-lg text-sm uppercase tracking-wider focus:outline-none focus:ring-4 focus:ring-gray-700">
|
||||
View Roast
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Roast Card 2: Sumatran Mandheling -->
|
||||
<div class="bg-gray-50 rounded-xl shadow-xl p-6 border-t-8 border-[var(--color-secondary)] transition duration-300 card-hover cursor-pointer">
|
||||
<div class="relative h-48 bg-cover bg-center rounded-lg mb-4" style="background-image: url('https://images.unsplash.com/photo-1552260209-35a02c232e6b?w=600&h=600&fit=crop');">
|
||||
<div class="absolute inset-0 bg-black/20"></div>
|
||||
<span class="absolute top-3 right-3 text-white text-xs bg-black/60 px-3 py-1 rounded-full uppercase tracking-widest">Dark</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-[var(--color-primary)] mb-2">Sumatran Earth</h3>
|
||||
<p class="text-gray-600 mb-4 text-sm italic">Deep, earthy body with hints of dark chocolate and tobacco finish.</p>
|
||||
<div class="flex justify-between items-center pt-2">
|
||||
<span class="text-2xl font-extrabold text-[var(--color-primary)]">$18.50</span>
|
||||
<button class="btn-primary bg-gray-800 text-white py-3 px-6 rounded-lg text-sm uppercase tracking-wider focus:outline-none focus:ring-4 focus:ring-gray-700">
|
||||
View Roast
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Roast Card 3: Colombian Supremo -->
|
||||
<div class="bg-gray-50 rounded-xl shadow-xl p-6 border-t-8 border-[var(--color-secondary)] transition duration-300 card-hover cursor-pointer">
|
||||
<div class="relative h-48 bg-cover bg-center rounded-lg mb-4" style="background-image: url('https://images.unsplash.com/photo-1542766076-8f2a12b45c7d?w=600&h=600&fit=crop');">
|
||||
<div class="absolute inset-0 bg-black/20"></div>
|
||||
<span class="absolute top-3 right-3 text-white text-xs bg-black/60 px-3 py-1 rounded-full uppercase tracking-widest">Medium</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-[var(--color-primary)] mb-2">Colombian Heritage</h3>
|
||||
<p class="text-gray-600 mb-4 text-sm italic">Balanced, comforting profile with notes of caramel and mild citrus.</p>
|
||||
<div class="flex justify-between items-center pt-2">
|
||||
<span class="text-2xl font-extrabold text-[var(--color-primary)]">$17.00</span>
|
||||
<button class="btn-primary bg-gray-800 text-white py-3 px-6 rounded-lg text-sm uppercase tracking-wider focus:outline-none focus:ring-4 focus:ring-gray-700">
|
||||
View Roast
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Our Craft/Philosophy Section -->
|
||||
<section id="about" class="py-24 lg:py-32 bg-[var(--color-light)]">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||
<!-- Text Content -->
|
||||
<div class="space-y-8">
|
||||
<h2 class="text-sm uppercase tracking-widest text-[var(--color-secondary)]">Our Philosophy</h2>
|
||||
<h3 class="text-5xl md:text-6xl font-serif font-bold text-[var(--color-primary)]">
|
||||
Beyond the Bean. The Experience.
|
||||
</h3>
|
||||
<p class="text-lg text-gray-600 border-l-4 border-[var(--color-secondary)] pl-4 italic">
|
||||
For us, roasting is not just heating beans; it's an act of transformation. We honor the terroir of every farm, coaxing out unique profiles through careful, measured heat.
|
||||
</p>
|
||||
<ul class="space-y-4 text-lg">
|
||||
<li class="flex items-start">
|
||||
<svg class="w-6 h-6 mt-1 mr-3 text-[var(--color-secondary)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l2.5 2.5m0 0L12 18m-3-7l2.5-2.5m0 0L17 10m-3-7L12 4m-3 7l2.5 2.5"></path></svg>
|
||||
<span class="font-medium">Sustainable Sourcing:</span> We partner directly with growers committed to quality and ethical labor.
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-6 h-6 mt-1 mr-3 text-[var(--color-secondary)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l2.5 2.5m0 0L12 18m-3-7l2.5-2.5m0 0L17 10m-3-7L12 4m-3 7l2.5 2.5"></path></svg>
|
||||
<span class="font-medium">Precision Roasting:</span> Every batch profile is documented, ensuring consistency from bag to cup.
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-6 h-6 mt-1 mr-3 text-[var(--color-secondary)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l2.5 2.5m0 0L1<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.22s</div>
|
||||
@@ -0,0 +1,217 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Terra Bloom Festival - Celebrate Summer's Peak</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom styles to enhance the earthy, organic feel */
|
||||
:root {
|
||||
--color-primary: #4a7c59; /* Deep Forest Green */
|
||||
--color-secondary: #e09a33; /* Warm Gold/Amber */
|
||||
--color-background: #f7f4ef; /* Light Creamy Off-White */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-background);
|
||||
font-family: 'Georgia', serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(74, 124, 89, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #385e43; /* Slightly darker green */
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
box-shadow: 0 6px 20px rgba(74, 124, 89, 0.6);
|
||||
}
|
||||
|
||||
/* Subtle hover effect for cards */
|
||||
.festival-card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.festival-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Keyframe animation for loading/subtle movement */
|
||||
@keyframes fadeInScale {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeInScale 1s ease-out forwards;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-lg">
|
||||
<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="text-2xl font-bold tracking-wider text-green-700 uppercase">
|
||||
Terra Bloom
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#about" class="text-gray-600 hover:text-green-600 font-medium transition duration-150">About</a>
|
||||
<a href="#lineup" class="text-gray-600 hover:text-green-600 font-medium transition duration-150">Lineup</a>
|
||||
<a href="#schedule" class="text-gray-600 hover:text-green-600 font-medium transition duration-150">Schedule</a>
|
||||
<a href="#tickets" class="text-gray-600 hover:text-green-600 font-medium transition duration-150">Tickets</a>
|
||||
</nav>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="md:hidden p-2 rounded focus:outline-none focus:ring-2 focus:ring-green-700" aria-label="Menu">
|
||||
<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
<a href="#tickets" class="hidden md:block px-4 py-2 text-sm font-semibold text-white rounded-full btn-primary shadow-md">
|
||||
Get Tickets
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section id="hero" class="relative h-[70vh] md:h-[85vh] flex items-center justify-center overflow-hidden">
|
||||
<!-- Background Image Placeholder -->
|
||||
<img
|
||||
src="https://images.pexels.com/photos/18482210/pexels-photo-18482210.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200"
|
||||
alt="Vibrant meadow filled with blooming flowers under a clear summer sky"
|
||||
class="absolute inset-0 w-full h-full object-cover object-center transition duration-700 ease-in-out"
|
||||
style="filter: brightness(0.85);"
|
||||
>
|
||||
<!-- Overlay for visual depth -->
|
||||
<div class="absolute inset-0 bg-black/30"></div>
|
||||
|
||||
<div class="relative z-10 text-center px-4 max-w-4xl animate-fade-in">
|
||||
<h1 class="text-5xl md:text-7xl font-extrabold text-white leading-tight mb-4 drop-shadow-lg tracking-tight">
|
||||
Terra Bloom Festival
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-white mb-8 font-light italic drop-shadow-md">
|
||||
Where Nature's Spirit Meets Celebration. Join us for a weekend of vibrant art, artisan crafts, and natural rejuvenation.
|
||||
</p>
|
||||
<a href="#tickets" class="inline-block px-10 py-4 text-lg font-bold text-green-800 bg-white rounded-full shadow-2xl hover:bg-gray-100 transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-400">
|
||||
Explore Dates & Buy Passes
|
||||
</a>
|
||||
|
||||
<!-- Image Attribution -->
|
||||
<div class="absolute bottom-4 right-4 z-20 text-white/70 text-sm font-serif">
|
||||
Photo by Suki Lee on <a href="https://www.pexels.com/photo/decoration-with-colorful-flowers-18482210/" target="_blank" class="underline hover:text-white">Pexels</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="py-16 md:py-24 bg-white">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-green-800 mb-4 border-b-4 border-amber-400 inline-block pb-1">
|
||||
Our Vision
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 max-w-3xl mx-auto mb-10 leading-relaxed">
|
||||
Terra Bloom is more than just a festival; it is a celebration of sustainable living, artisanal craftsmanship, and the raw beauty of the natural world. We gather under the summer sun to nourish the spirit through music, botanical art, local cuisine, and mindful gatherings.
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||
<div class="p-6 bg-white border-t-4 border-green-500 rounded-lg shadow-lg text-center festival-card">
|
||||
<h3 class="text-2xl font-semibold text-green-700 mb-2">Artistry</h3>
|
||||
<p class="text-gray-600">Discover handcrafted goods, immersive installations, and living art displays from global creators.</p>
|
||||
</div>
|
||||
<div class="p-6 bg-white border-t-4 border-green-500 rounded-lg shadow-lg text-center festival-card">
|
||||
<h3 class="text-2xl font-semibold text-green-700 mb-2">Sustainability</h3>
|
||||
<p class="text-gray-600">Commitment to green practices, zero-waste initiatives, and supporting local ecology.</p>
|
||||
</div>
|
||||
<div class="p-6 bg-white border-t-4 border-green-500 rounded-lg shadow-lg text-center festival-card">
|
||||
<h3 class="text-2xl font-semibold text-green-700 mb-2">Community</h3>
|
||||
<p class="text-gray-600">A welcoming space for artists, creators, and nature lovers to connect and share moments.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Lineup Section -->
|
||||
<section id="lineup" class="py-16 md:py-24 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12 animate-fade-in">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-green-800 mb-3">
|
||||
The Gathering Lineup
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600">Music, Soundscapes, and Sonic Journeys</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
|
||||
<!-- Artist Card 1 -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg text-center festival-card border-b-8 border-amber-400">
|
||||
<p class="text-sm uppercase tracking-widest text-green-600 mb-1">Main Stage</p>
|
||||
<h3 class="text-3xl font-bold text-green-800 mb-2">Elowen</h3>
|
||||
<p class="text-gray-500 mb-4">Ethereal Folk & Acoustic Sets</p>
|
||||
<a href="#" class="text-green-600 hover:text-green-900 font-semibold transition duration-150 focus:outline-none focus:ring-2 focus:ring-green-500">View Profile →</a>
|
||||
</div>
|
||||
|
||||
<!-- Artist Card 2 -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg text-center festival-card border-b-8 border-green-500">
|
||||
<p class="text-sm uppercase tracking-widest text-green-600 mb-1">Roots Stage</p>
|
||||
<h3 class="text-3xl font-bold text-green-800 mb-2">The Wild Roots Collective</h3>
|
||||
<p class="text-gray-500 mb-4">Rhythmic World Music & Percussion</p>
|
||||
<a href="#" class="text-green-600 hover:text-green-900 font-semibold transition duration-150 focus:outline-none focus:ring-2 focus:ring-green-500">View Profile →</a>
|
||||
</div>
|
||||
|
||||
<!-- Artist Card 3 -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg text-center festival-card border-b-8 border-green-500">
|
||||
<p class="text-sm uppercase tracking-widest text-green-600 mb-1">Ambient Grove</p>
|
||||
<h3 class="text-3xl font-bold text-green-800 mb-2">Willow & Dew</h3>
|
||||
<p class="text-gray-500 mb-4">Ambient Soundscapes & Meditation Music</p>
|
||||
<a href="#" class="text-green-600 hover:text-green-900 font-semibold transition duration-150 focus:outline-none focus:ring-2 focus:ring-green-500">View Profile →</a>
|
||||
</div>
|
||||
|
||||
<!-- Artist Card 4 (Tablet/Small Screen Visibility) -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg text-center festival-card border-b-8 border-amber-400 lg:col-span-3 lg:grid-cols-1">
|
||||
<p class="text-sm uppercase tracking-widest text-green-600 mb-1">Artisan Showcase</p>
|
||||
<h3 class="text-2xl font-bold text-green-800 mb-2">Local Bloom Vendors</h3>
|
||||
<p class="text-gray-500 mb-4">Featuring pottery, textiles, and natural remedies from across the region.</p>
|
||||
<a href="#" class="text-green-600 hover:text-green-900 font-semibold transition duration-150 focus:outline-none focus:ring-2 focus:ring-green-500">See Vendor List →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Schedule/Dates Section -->
|
||||
<section id="schedule" class="py-16 md:py-24 bg-white">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12 animate-fade-in">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-green-800 mb-3">
|
||||
Festival Weekend Guide
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600">Two Days of Discovery</p>
|
||||
</div>
|
||||
|
||||
<!-- Schedule Grid -->
|
||||
<div class="grid lg:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Day 1 -->
|
||||
<div class="bg-green-50 p-8 rounded-xl shadow-2xl border-l-8 border-green-600 festival-card">
|
||||
<h3 class="text-4xl font-extrabold text-green-700 mb-4">
|
||||
Saturday: The Rooting Day
|
||||
</h3>
|
||||
<p class="text-gray-600 mb-6 italic border-b pb-3">Music builds, crafts begin, and the grounds awaken.</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="p-3 bg-white rounded-lg shadow-sm border-l-4 border-amber-400">
|
||||
<p class="font-bold text-lg text-gray-800">11:00 AM</p>
|
||||
<p class="text-sm text-gray-700">Gates Open & Artisan Market Opening</p>
|
||||
</div>
|
||||
<div class="p-3 bg-white rounded-lg shadow-sm border-l-4 border-amber-400">
|
||||
<p class="font-bold text-lg text-gray-800">3:00 PM</p>
|
||||
<p class="text-sm text-gray-700">Elowen - Main Stage Set</p>
|
||||
</div>
|
||||
<div class="p-3 bg-white<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 29.10s</div>
|
||||
@@ -0,0 +1,219 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Echo Bloom - New Album Release</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #A0522D; /* Sienna/Earth Tone */
|
||||
--secondary-color: #F5F5DC; /* Beige/Cream */
|
||||
--dark-bg: #1e293b; /* Slate-800 */
|
||||
}
|
||||
body {
|
||||
background-color: #f9fafb;
|
||||
color: #1f2937;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
transition: background-color 0.3s, transform 0.2s;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #8B4513; /* SaddleBrown */
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.gradient-text {
|
||||
background-image: linear-gradient(45deg, #FFD700, #FFA500);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn 1s ease-out forwards;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app" class="min-h-screen antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-lg border-b border-gray-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="text-2xl font-extrabold tracking-widest uppercase text-stone-800">
|
||||
Echo Bloom
|
||||
</div>
|
||||
<nav class="space-x-6 hidden sm:block">
|
||||
<a href="#music" class="text-gray-600 hover:text-amber-700 transition duration-150 font-medium">Music</a>
|
||||
<a href="#tour" class="text-gray-600 hover:text-amber-700 transition duration-150 font-medium">Tour</a>
|
||||
<a href="#stream" class="text-gray-600 hover:text-amber-700 transition duration-150 font-medium">Listen</a>
|
||||
</nav>
|
||||
<button class="sm:hidden text-gray-600 hover:text-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 p-1 rounded-md">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="music" class="relative h-[70vh] bg-gray-900 flex items-center justify-center overflow-hidden">
|
||||
|
||||
<!-- Background Image Container -->
|
||||
<div class="absolute inset-0">
|
||||
<img src="https://images.pexels.com/photos/3889419/pexels-photo-3889419.jpeg?auto=compress&cs=tinysci&w=1260&h=750"
|
||||
alt="A soft, warm landscape representing natural growth and musical resonance"
|
||||
class="w-full h-full object-cover opacity-60 transition duration-1000"
|
||||
id="hero-bg">
|
||||
</div>
|
||||
|
||||
<!-- Overlay -->
|
||||
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="relative z-10 text-center p-6 max-w-4xl animate-fadeIn" style="animation-delay: 0.1s;">
|
||||
<p class="text-xl sm:text-2xl font-light text-amber-300 mb-3 tracking-widest uppercase">New Release</p>
|
||||
<h1 class="text-6xl sm:text-8xl font-serif font-bold mb-4 leading-tight text-white">
|
||||
Echo Bloom
|
||||
</h1>
|
||||
<h2 class="text-3xl sm:text-5xl font-light text-amber-200 mb-8">
|
||||
"Riverstone Sessions" - Available Now
|
||||
</h2>
|
||||
|
||||
<div class="flex justify-center space-x-4">
|
||||
<a href="#listen" class="btn-primary text-white text-lg px-10 py-4 rounded-full uppercase tracking-widest focus:outline-none focus:ring-4 focus:ring-amber-300 shadow-lg transition duration-300">
|
||||
Listen on Spotify
|
||||
</a>
|
||||
<a href="#listen" class="btn-primary bg-gray-700 hover:bg-gray-600 text-white text-lg px-10 py-4 rounded-full uppercase tracking-widest focus:outline-none focus:ring-4 focus:ring-gray-500 shadow-lg transition duration-300">
|
||||
Pre-Order Vinyl
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Attribution -->
|
||||
<p class="mt-6 text-sm text-amber-300/70">
|
||||
Photo by Pexels on Pexels.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Music & Album Info Section -->
|
||||
<section id="music" class="py-16 sm: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 animate-fadeIn" style="animation-delay: 0.3s;">
|
||||
<h3 class="text-sm uppercase tracking-widest text-amber-600 mb-2">The New Offering</h3>
|
||||
<h2 class="text-5xl font-bold text-stone-900">
|
||||
The Sound of Quiet Growth
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
||||
|
||||
<!-- Album Artwork & Details Column -->
|
||||
<div class="lg:sticky lg:top-20">
|
||||
<div class="bg-gray-50 p-6 rounded-xl shadow-2xl border-t-8 border-amber-700 transition duration-300 hover:shadow-amber-300/50">
|
||||
<div class="w-full aspect-square bg-cover bg-center rounded-lg mb-6"
|
||||
style="background-image: url('https://images.pexels.com/photos/3889419/pexels-photo-3889419.jpeg?auto=compress&cs=tinysci&w=800&h=800');">
|
||||
</div>
|
||||
|
||||
<h4 class="text-3xl font-serif font-extrabold text-center text-stone-800 mb-2">Riverstone Sessions</h4>
|
||||
<p class="text-center text-lg text-gray-500 mb-6">Echo Bloom</p>
|
||||
|
||||
<div class="space-y-3">
|
||||
<p class="font-semibold text-stone-700 flex justify-between border-b pb-1">
|
||||
<span class="text-gray-500">Release Date:</span>
|
||||
<span class="font-medium text-amber-700">May 15, 2024</span>
|
||||
</p>
|
||||
<p class="font-semibold text-stone-700 flex justify-between border-b pb-1">
|
||||
<span class="text-gray-500">Genre:</span>
|
||||
<span class="font-medium text-amber-700">Ambient Folk / Indie Pop</span>
|
||||
</p>
|
||||
<p class="font-semibold text-stone-700 flex justify-between border-b pb-1">
|
||||
<span class="text-gray-500">Duration:</span>
|
||||
<span class="font-medium text-amber-700">45 min</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 pt-6 border-t border-gray-200">
|
||||
<a href="#listen" class="btn-primary w-full block text-center text-white py-3 rounded-lg uppercase font-bold text-lg focus:outline-none focus:ring-4 focus:ring-amber-500">
|
||||
Stream Full Album
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tracklist Column -->
|
||||
<div class="p-4 sm:p-0 animate-fadeIn" style="animation-delay: 0.5s;">
|
||||
<h3 class="text-3xl font-bold text-stone-900 mb-6 border-b pb-2 border-amber-200">Tracklist</h3>
|
||||
<div class="space-y-4">
|
||||
|
||||
<!-- Track Item 1 -->
|
||||
<div class="flex items-center p-3 border-b border-gray-100 hover:bg-amber-50 transition duration-150 rounded-md focus-within:ring-2 focus-within:ring-amber-300">
|
||||
<span class="text-xl text-amber-700 mr-4">01</span>
|
||||
<div>
|
||||
<p class="font-semibold text-lg text-stone-800">Morning Dew</p>
|
||||
<p class="text-sm text-gray-500">3:12</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Track Item 2 -->
|
||||
<div class="flex items-center p-3 border-b border-gray-100 hover:bg-amber-50 transition duration-150 rounded-md focus-within:ring-2 focus-within:ring-amber-300">
|
||||
<span class="text-xl text-amber-700 mr-4">02</span>
|
||||
<div>
|
||||
<p class="font-semibold text-lg text-stone-800">Stone Path Wanderer</p>
|
||||
<p class="text-sm text-gray-500">4:05</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Track Item 3 -->
|
||||
<div class="flex items-center p-3 border-b border-gray-100 hover:bg-amber-50 transition duration-150 rounded-md focus-within:ring-2 focus-within:ring-amber-300">
|
||||
<span class="text-xl text-amber-700 mr-4">03</span>
|
||||
<div>
|
||||
<p class="font-semibold text-lg text-stone-800">Harvest Moon Drift</p>
|
||||
<p class="text-sm text-gray-500">3:58</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Track Item 4 -->
|
||||
<div class="flex items-center p-3 border-b border-gray-100 hover:bg-amber-50 transition duration-150 rounded-md focus-within:ring-2 focus-within:ring-amber-300">
|
||||
<span class="text-xl text-amber-700 mr-4">04</span>
|
||||
<div>
|
||||
<p class="font-semibold text-lg text-stone-800">The Still Point</p>
|
||||
<p class="text-sm text-gray-500">5:10</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mt-8 text-center">
|
||||
<a href="#" class="text-amber-700 hover:text-amber-900 font-medium text-lg px-6 py-3 rounded-full border border-amber-700 hover:bg-amber-50 transition duration-300">
|
||||
View All Tracks
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tour/Experience Section -->
|
||||
<section id="tour" class="py-20 sm:py-28 bg-stone-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12 animate-fadeIn" style="animation-delay: 0.7s;">
|
||||
<h3 class="text-sm uppercase tracking-widest text-amber-600 mb-2">Experience Live</h3>
|
||||
<h2 class="text-4xl sm:text-5xl font-bold text-stone-900">
|
||||
Echo Bloom Live Tour
|
||||
</h2>
|
||||
<p class="mt-4 text-xl text-gray-600">Witness the music that defined the season, live in intimate settings.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 text-center">
|
||||
|
||||
<!-- Tour Card 1 -->
|
||||
<div class="p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition duration-300 border-t-4 border-amber-500">
|
||||
<svg class="w-16 h-16 mx-auto mb-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-3.414 0l-4.243-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><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 28.59s</div>
|
||||
@@ -0,0 +1,193 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kaffeemacher Handwerkskunst | Artisan Coffee Roaster</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom Tailwind Configuration */
|
||||
:root {
|
||||
--color-primary: #6D4C41; /* Deep Coffee Brown */
|
||||
--color-secondary: #A1887F; /* Lighter Roast/Tan */
|
||||
--color-accent: #FFB300; /* Warm Gold/Amber for highlights */
|
||||
--color-background: #F5F5F5; /* Off-White/Light Grey */
|
||||
}
|
||||
body {
|
||||
font-family: 'Merriweather', serif; /* A classic, sturdy feel */
|
||||
background-color: var(--color-background);
|
||||
color: #333;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
transition: background-color 0.3s, transform 0.1s;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #4E342E; /* Darker Brown on hover */
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.header-glow {
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.roaster-card {
|
||||
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
||||
}
|
||||
.roaster-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
|
||||
}
|
||||
/* Subtle pulse animation for the CTA */
|
||||
@keyframes pulse-glow {
|
||||
0% { box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.4); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(255, 179, 0, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(255, 179, 0, 0); }
|
||||
}
|
||||
.pulse-cta {
|
||||
animation: pulse-glow 3s infinite;
|
||||
}
|
||||
</style>
|
||||
<!-- Using Merriweather via Google Fonts for robust typography -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header & Navigation -->
|
||||
<header class="bg-white shadow-lg sticky top-0 z-50">
|
||||
<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">
|
||||
<a href="#" class="text-3xl font-extrabold text-[var(--color-primary)] tracking-tight header-glow">
|
||||
Kaffeemacher
|
||||
</a>
|
||||
<p class="text-xs text-gray-600 mt-[-5px]">Handwerkliche Röste aus Bayern</p>
|
||||
</div>
|
||||
<nav class="flex space-x-8">
|
||||
<a href="#philosophy" class="text-gray-700 hover:text-[var(--color-primary)] px-3 py-2 rounded-md font-medium transition duration-150 focus:outline-none focus:text-[var(--color-primary)]">Philosophie</a>
|
||||
<a href="#shop" class="text-gray-700 hover:text-[var(--color-primary)] px-3 py-2 rounded-md font-medium transition duration-150 focus:outline-none focus:text-[var(--color-primary)]">Shop</a>
|
||||
<a href="#about" class="text-gray-700 hover:text-[var(--color-primary)] px-3 py-2 rounded-md font-medium transition duration-150 focus:outline-none focus:text-[var(--color-primary)]">Über Uns</a>
|
||||
<a href="#" class="btn-primary text-white px-4 py-2 rounded-full text-sm shadow-md focus:outline-none focus:ring-2 focus:ring-amber-500">Bestellen</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative bg-cover bg-center h-[70vh] flex items-center justify-center"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1517237452248-6a5d855165f9?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
|
||||
|
||||
<!-- Overlay for dramatic contrast -->
|
||||
<div class="absolute inset-0 bg-black opacity-40"></div>
|
||||
|
||||
<div class="relative text-center px-4 z-10">
|
||||
<h1 class="text-6xl md:text-8xl font-black text-white mb-4 leading-tight uppercase">
|
||||
Die Seele des Kaffees
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-gray-200 mb-8 font-serif">
|
||||
Handverlesene Bohnen, mit Leidenschaft geröstet.
|
||||
</p>
|
||||
<a href="#shop" class="btn-primary bg-amber-600 text-white text-lg px-10 py-4 rounded-full uppercase tracking-widest focus:outline-none focus:ring-4 focus:ring-amber-300 pulse-cta">
|
||||
Jetzt Entdecken
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Philosophy Section -->
|
||||
<section id="philosophy" class="py-20 sm:py-28 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-5xl font-bold text-[var(--color-primary)] mb-4 tracking-tight">
|
||||
Unsere Philosophie
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 mb-12 max-w-3xl mx-auto">
|
||||
Wir glauben an die Würde der Bohne. Von der sorgfältigen Auswahl der Ernte bis zum perfekten Röstdunkel – jeder Schritt ist eine Hommage an das Handwerk.
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Feature 1 -->
|
||||
<div class="p-8 bg-white border-t-8 border-[var(--color-secondary)] rounded-xl shadow-lg roaster-card">
|
||||
<p class="text-5xl text-[var(--color-accent)] mb-3">🌿</p>
|
||||
<h3 class="text-2xl font-bold text-[var(--color-primary)] mb-3">Ursprung</h3>
|
||||
<p class="text-gray-600">Wir pflegen direkte Beziehungen zu kleinen, ethischen Farmen. Qualität beginnt am Ursprungsort.</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<div class="p-8 bg-white border-t-8 border-[var(--color-secondary)] rounded-xl shadow-lg roaster-card">
|
||||
<p class="text-5xl text-[var(--color-accent)] mb-3">🔥</p>
|
||||
<h3 class="text-2xl font-bold text-[var(--color-primary)] mb-3">Röstkunst</h3>
|
||||
<p class="text-gray-600">Unsere Rösterführung ist ein Dialog. Wir finden den einzigartigen Charakter jeder Bohne durch Präzision.</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3 -->
|
||||
<div class="p-8 bg-white border-t-8 border-[var(--color-secondary)] rounded-xl shadow-lg roaster-card">
|
||||
<p class="text-5xl text-[var(--color-accent)] mb-3">☕</p>
|
||||
<h3 class="text-2xl font-bold text-[var(--color-primary)] mb-3">Genuss</h3>
|
||||
<p class="text-gray-600">Das Ziel ist der Moment: ein samtiges, komplexes Geschmackserlebnis in jeder Tasse.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Shop/Products Section -->
|
||||
<section id="shop" class="py-20 sm:py-28 bg-[var(--color-background)]">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-5xl font-bold text-[var(--color-primary)] mb-3">Unsere aktuellen Sorten</h2>
|
||||
<p class="text-xl text-gray-600">Entdecken Sie die Vielfalt unserer sorgfältig gerösteten Kaffeebohnen.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Product 1: Espresso Roast -->
|
||||
<div class="bg-white rounded-xl shadow-2xl overflow-hidden border-b-4 border-[var(--color-primary)] roaster-card">
|
||||
<div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1571697788936-3c9c97e8e38d?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');"></div>
|
||||
<div class="p-6 text-center">
|
||||
<h3 class="text-3xl font-extrabold text-[var(--color-primary)] mb-1">Intensiver Espresso</h3>
|
||||
<p class="text-sm text-gray-500 mb-3">Röstgrad: Dunkel | Ursprung: Zentralamerika</p>
|
||||
<p class="text-gray-700 mb-4 font-medium">Ein kräftiger, dunkler Geschmack, perfekt für Ihren Morgenritual.</p>
|
||||
<button class="btn-primary bg-amber-600 text-white w-full py-3 rounded-lg text-lg focus:outline-none focus:ring-4 ring-amber-300">
|
||||
In den Warenkorb
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product 2: Light Roast Filter -->
|
||||
<div class="bg-white rounded-xl shadow-2xl overflow-hidden border-b-4 border-[var(--color-primary)] roaster-card">
|
||||
<div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1552218893-635f4945c3d8?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');"></div>
|
||||
<div class="p-6 text-center">
|
||||
<h3 class="text-3xl font-extrabold text-[var(--color-primary)] mb-1">Zarter Filterkaffee</h3>
|
||||
<p class="text-sm text-gray-500 mb-3">Röstgrad: Hell | Ursprung: Äthiopien</p>
|
||||
<p class="text-gray-700 mb-4 font-medium">Ein aromareicher, fruchtiger Charakter. Erwachen Sie sanft und elegant.</p>
|
||||
<button class="btn-primary bg-amber-600 text-white w-full py-3 rounded-lg text-lg focus:outline-none focus:ring-4 ring-amber-300">
|
||||
In den Warenkorb
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product 3: Medium Roast Blend -->
|
||||
<div class="bg-white rounded-xl shadow-2xl overflow-hidden border-b-4 border-[var(--color-primary)] roaster-card">
|
||||
<div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1554284685-282b8a98a15d?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');"></div>
|
||||
<div class="p-6 text-center">
|
||||
<h3 class="text-3xl font-extrabold text-[var(--color-primary)] mb-1">Harmonie Blend</h3>
|
||||
<p class="text-sm text-gray-500 mb-3">Röstgrad: Mittel | Ursprung: Mischung</p>
|
||||
<p class="text-gray-700 mb-4 font-medium">Der perfekte Allrounder. Ausbalanciert, cremig und unverfälscht.</p>
|
||||
<button class="btn-primary bg-amber-600 text-white w-full py-3 rounded-lg text-lg focus:outline-none focus:ring-4 ring-amber-300">
|
||||
In den Warenkorb
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About/Process Section (More detailed content) -->
|
||||
<section id="about" class="py-20 sm:py-28 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<!-- Image/Visual Focus -->
|
||||
<div class="lg:sticky lg:top-20">
|
||||
<img src="https://images.unsplash.com/photo-1483313376688-2b12e843a522?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Handwerker beim Röstvorgang"
|
||||
class="rounded-3xl shadow-2xl transform transition duration-500 hover:scale-[1.02] w-full h-auto">
|
||||
</div><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 29.93s</div>
|
||||
@@ -0,0 +1,242 @@
|
||||
<!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>Echoes of the Shore | A Cozy Narrative Adventure</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=DM+Serif+Display&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary: #e63946;
|
||||
--accent: #f1faee;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #0a0f14;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
h1, h2, h3, .font-serif {
|
||||
font-family: 'DM+Serif+Display', serif;
|
||||
}
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.hero-gradient {
|
||||
background: linear-gradient(to bottom, rgba(10, 15, 20, 0) 0%, rgba(10, 15, 20, 1) 100%);
|
||||
}
|
||||
.btn-glow:hover {
|
||||
box-shadow: 0 0 20px rgba(230, 57, 70, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.8s ease-out;
|
||||
}
|
||||
.reveal.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed w-full z-50 px-6 py-4 flex justify-between items-center glass">
|
||||
<div class="text-2xl font-serif font-bold tracking-tighter text-white">E.O.S</div>
|
||||
<div class="hidden md:flex space-x-8 text-sm font-medium uppercase tracking-widest">
|
||||
<a href="#story" class="hover:text-rose-500 transition">Story</a>
|
||||
<a href="#gameplay" class="hover:text-rose-500 transition">Gameplay</a>
|
||||
<a href="#gallery" class="hover:text-rose-500 transition">Gallery</a>
|
||||
<a href="#contact" class="hover:text-rose-500 transition">Join Us</a>
|
||||
</div>
|
||||
<a href="#" class="bg-rose-600 hover:bg-rose-700 text-white px-6 py-2 rounded-full text-sm font-bold transition duration-300">WISHLIST NOW</a>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header class="relative h-screen flex items-center justify-center overflow-hidden">
|
||||
<img src="https://images.pexels.com/photos/7879385/pexels-photo-7879385.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="An open book resting on a cozy blanket by the window, creating a warm and serene reading atmosphere." class="absolute w-full h-full object-cover scale-105" style="filter: brightness(0.6);">
|
||||
<div class="absolute inset-0 hero-gradient"></div>
|
||||
|
||||
<div class="relative z-10 text-center px-4 max-w-4xl">
|
||||
<span class="inline-block px-3 py-1 mb-6 border border-white/30 rounded-full text-xs uppercase tracking-[0.3em] bg-white/10 animate-bounce">Coming to Steam & Switch</span>
|
||||
<h1 class="text-6xl md:text-9xl font-bold mb-6 leading-none text-white">Echoes of the Shore</h1>
|
||||
<p class="text-lg md:text-2xl mb-10 text-gray-300 max-w-2xl mx-auto font-light leading-relaxed">
|
||||
A hand-painted narrative journey about memory, loss, and the secrets hidden beneath the tide of a sleepy coastal village.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button class="btn-glow bg-rose-600 text-white px-10 py-4 rounded-lg text-lg font-bold transition-all duration-300">Pre-Order Early Access</button>
|
||||
<button class="bg-white/10 hover:bg-white/20 backdrop-blur-md text-white px-10 py-4 rounded-lg text-lg font-bold border border-white/20 transition-all">Watch Trailer</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-8 left-8 text-[10px] text-white/40 uppercase tracking-widest">
|
||||
Photo by <a href="https://www.pexels.com/photo/an-open-book-on-a-gray-blanket-7879385/" class="underline">William Choquette</a> on Pexels
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Story Section -->
|
||||
<section id="story" class="py-24 px-6 md:px-20 bg-[#0d1218]">
|
||||
<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-center">
|
||||
<div class="reveal">
|
||||
<h2 class="text-4xl md:text-6xl mb-8 text-rose-400">The Village Remembers.</h2>
|
||||
<p class="text-gray-400 leading-relaxed mb-6 text-lg">
|
||||
In the village of Oakhaven, the fog doesn't just hide the land—it holds the echoes of what was lost. You play as Elara, a lighthouse keeper returning to her ancestral home after decades away.
|
||||
</p>
|
||||
<p class="text-gray-400 leading-relaxed mb-8 text-lg">
|
||||
Explore interconnected locations, from the salt-crusted pier to the whispering lighthouse tower. Every door you open and every lantern you light reveals a fragment of a shared history.
|
||||
</p>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-4 glass rounded-lg">
|
||||
<h4 class="font-bold text-white mb-1">Hand-Painted</h4>
|
||||
<p class="text-xs text-gray-500">Every environment is a unique piece of digital art.</p>
|
||||
</div>
|
||||
<div class="p-4 glass rounded-lg">
|
||||
<h4 class="font-bold text-white mb-1">Choice Driven</h4>
|
||||
<p class="text-xs text-gray-500">Your decisions ripple through the village's fate.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative reveal">
|
||||
<img src="https://images.pexels.com/photos/7879385/pexels-photo-7879385.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Game concept art" class="rounded-2xl shadow-2xl border border-white/10 rotate-2">
|
||||
<div class="absolute -bottom-6 -left-6 bg-rose-600 p-8 rounded-xl shadow-xl">
|
||||
<p class="text-3xl font-serif italic">"A masterpiece of atmosphere."</p>
|
||||
<p class="text-xs mt-2 opacity-80">— Indie Gaming Weekly</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features/Gameplay -->
|
||||
<section id="gameplay" class="py-24 bg-[#0a0f14] overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="text-center mb-20">
|
||||
<h2 class="text-4xl md:text-6xl mb-4">Experience the Tide</h2>
|
||||
<p class="text-gray-500 max-w-xl mx-auto">Immersive mechanics designed to pull you deeper into Oakhaven's mysteries.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="reveal p-8 glass rounded-3xl hover:bg-white/5 transition">
|
||||
<div class="w-12 h-12 bg-rose-600/20 flex items-center justify-center rounded-full mb-6">
|
||||
<svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.747 0-3.332.477-4.5 1.253"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl mb-4">Dynamic Weather</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">The fog, rain, and moonlight aren't just visual. They affect visibility, sound, and which secrets you can uncover.</p>
|
||||
</div>
|
||||
<div class="reveal p-8 glass rounded-3xl hover:bg-white/5 transition" style="transition-delay: 0.2s;">
|
||||
<div class="w-12 h-12 bg-rose-600/20 flex items-center justify-center rounded-full mb-6">
|
||||
<svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl mb-4">Narrative Dialogue</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">Engage in deep, branching conversations. Every choice impacts the village's social fabric and your own standing.</p>
|
||||
</div>
|
||||
<div class="reveal p-8 glass rounded-3xl hover:bg-white/5 transition" style="transition-delay: 0.4s;">
|
||||
<div class="w-12 h-12 bg-rose-600/20 flex items-center justify-center rounded-full mb-6">
|
||||
<svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 00-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-2xl mb-4">Soulful Soundtrack</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">A generative ambient score that adapts to your location and the intensity of your exploration.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gallery Section -->
|
||||
<section id="gallery" class="py-24 bg-black px-6">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="flex justify-between items-end mb-12">
|
||||
<div>
|
||||
<h2 class="text-4xl md:text-6xl mb-2">Sneak Peeks</h2>
|
||||
<p class="text-gray-500">Visualizing the atmosphere of Oakhaven.</p>
|
||||
</div>
|
||||
<a href="#" class="hidden md:block text-rose-500 border-b border-rose-500 pb-1 hover:text-rose-400 transition">View full devlog</a>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="h-64 bg-gray-900 rounded-xl overflow-hidden group">
|
||||
<img src="https://images.pexels.com/photos/7879385/pexels-photo-7879385.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" class="w-full h-full object-cover group-hover:scale-110 transition duration-500" alt="Interior">
|
||||
</div>
|
||||
<div class="h-64 bg-gray-900 rounded-xl overflow-hidden group">
|
||||
<img src="https://images.pexels.com/photos/7879385/pexels-photo-7879385.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" class="w-full h-full object-cover group-hover:scale-110 transition duration-500" alt="Landscape">
|
||||
</div>
|
||||
<div class="h-64 bg-gray-900 rounded-xl overflow-hidden group">
|
||||
<img src="https://images.pexels.com/photos/7879385/pexels-photo-7879385.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" class="w-full h-full object-cover group-hover:scale-110 transition duration-500" alt="Characters">
|
||||
</div>
|
||||
<div class="h-64 bg-gray-900 rounded-xl overflow-hidden group">
|
||||
<img src="https://images.pexels.com/photos/7879385/pexels-photo-7879385.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" class="w-full h-full object-cover group-hover:scale-110 transition duration-500" alt="Village">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Newsletter/CTA -->
|
||||
<section id="contact" class="py-32 px-6 bg-rose-900/20 border-y border-rose-900/30">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="text-4xl md:text-6xl mb-6">Stay in the Loop</h2>
|
||||
<p class="text-gray-300 mb-10 text-lg">Join our community and get exclusive development updates, concept art, and early-bird discounts.</p>
|
||||
<form class="flex flex-col sm:flex-row gap-4">
|
||||
<input type="email" placeholder="Enter your email" class="flex-1 px-6 py-4 rounded-lg bg-white/5 border border-white/10 focus:outline-none focus:border-rose-500 text-white">
|
||||
<button class="bg-rose-600 px-10 py-4 rounded-lg font-bold hover:bg-rose-700 transition">Sign Up</button>
|
||||
</form>
|
||||
<p class="mt-6 text-xs text-gray-500">We respect your privacy. No spam, only updates.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 px-6 border-t border-white/5 text-center">
|
||||
<div class="flex justify-center space-x-6 mb-8">
|
||||
<a href="#" class="text-gray-400 hover:text-white transition">Twitter</a>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition">Discord</a>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition">Instagram</a>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition">YouTube</a>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">© 2024 Echoes of the Shore Studio. All rights reserved.</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Simple Intersection Observer for "Reveal" animation
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const observerOptions = {
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
// Smooth scroll behavior for navigation links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</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 94.94s</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,212 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Echo Bloom - New Album Release</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom utility classes for richer typography and subtle effects */
|
||||
.font-display {
|
||||
font-family: 'Playfair Display', serif; /* Assuming a dramatic serif font for impact */
|
||||
}
|
||||
.font-body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
.btn-primary {
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(255, 100, 100, 0.3);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
box-shadow: 0 6px 20px rgba(255, 100, 100, 0.4);
|
||||
}
|
||||
.album-cover-hover {
|
||||
transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
|
||||
}
|
||||
.album-cover-hover:hover {
|
||||
transform: translateY(-5px) scale(1.03);
|
||||
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
/* Custom gradient background for depth */
|
||||
.bg-music-gradient {
|
||||
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
|
||||
}
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-gray-50 font-body text-gray-800 antialiased">
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<header class="bg-white shadow-lg sticky top-0 z-10">
|
||||
<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 items-center">
|
||||
<div class="text-2xl font-display font-bold text-indigo-700 tracking-widest">
|
||||
ECHO BLOOM
|
||||
</div>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#music" class="text-gray-600 hover:text-indigo-600 transition duration-150 font-medium">Music</a>
|
||||
<a href="#tour" class="text-gray-600 hover:text-indigo-600 transition duration-150 font-medium">Tour Dates</a>
|
||||
<a href="#about" class="text-gray-600 hover:text-indigo-600 transition duration-150 font-medium">About</a>
|
||||
<a href="#buy" class="text-gray-600 hover:text-indigo-600 transition duration-150 font-medium border-b-2 border-indigo-500 pb-1">Listen Now</a>
|
||||
</nav>
|
||||
<div class="md:hidden">
|
||||
<!-- Mobile Menu Button Placeholder -->
|
||||
<button class="p-2 text-gray-600 hover:text-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section: Album Announcement -->
|
||||
<section class="bg-music-gradient pt-16 pb-20 sm:pb-28 text-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h1 class="text-5xl sm:text-7xl lg:text-8xl font-display mb-4 leading-tight animate-in fade-in duration-1000">
|
||||
Echo Bloom
|
||||
</h1>
|
||||
<p class="text-xl sm:text-3xl mb-8 tracking-widest uppercase text-indigo-300/90">
|
||||
Introducing: "Solstice Echoes"
|
||||
</p>
|
||||
|
||||
<!-- Placeholder Image Structure -->
|
||||
<div class="relative w-full max-w-4xl mx-auto shadow-2xl rounded-xl overflow-hidden transform transition duration-500 hover:scale-[1.01]">
|
||||
<img src="https://images.pexels.com/photos/8198140/pexels-photo-8198140.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200"
|
||||
alt="Album cover featuring abstract sound waves against a deep indigo landscape"
|
||||
class="w-full h-auto object-cover object-center"
|
||||
loading="eager">
|
||||
|
||||
<!-- Attribution -->
|
||||
<div class="absolute bottom-2 right-3 text-xs text-white/60 backdrop-blur-sm bg-black/30 px-2 py-1 rounded-lg">
|
||||
Photo by RDNE Stock project on <a href="https://www.pexels.com/photo/blonde-woman-picking-vinyl-record-8198140/" target="_blank" class="hover:text-white underline">Pexels</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 flex justify-center space-x-4">
|
||||
<a href="#listen" class="btn-primary bg-red-500 text-white text-lg font-semibold px-10 py-4 rounded-full shadow-lg hover:bg-red-400 focus:outline-none focus:ring-4 ring-red-300 uppercase tracking-wider">
|
||||
Stream on Spotify
|
||||
</a>
|
||||
<a href="#buy" class="bg-white text-indigo-700 text-lg font-semibold px-10 py-4 rounded-full shadow-lg hover:bg-gray-100 focus:outline-none focus:ring-4 ring-indigo-300 transition duration-300">
|
||||
Buy Vinyl
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="mt-6 text-sm text-indigo-300/80">
|
||||
Available everywhere on Friday, October 25th.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Music Section: Tracklist and Details -->
|
||||
<section id="music" class="py-20 lg:py-28 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-sm uppercase tracking-widest text-indigo-500 font-bold">The New Release</h2>
|
||||
<p class="mt-2 text-4xl lg:text-5xl font-display font-bold text-gray-900">
|
||||
Solstice Echoes
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="lg:flex lg:space-x-12">
|
||||
<!-- Tracklist Column -->
|
||||
<div class="lg:w-2/3 bg-gray-50 p-8 lg:p-12 rounded-xl shadow-xl border border-gray-100">
|
||||
<h3 class="text-3xl font-display text-gray-900 mb-6 border-b pb-2 border-indigo-200">Track List</h3>
|
||||
|
||||
<div id="tracklist" class="space-y-4">
|
||||
<!-- Track Item Template -->
|
||||
<div class="flex items-start space-x-4 p-3 bg-white hover:bg-indigo-50 rounded-lg transition duration-200 shadow-sm border-l-4 border-indigo-400 focus-within:ring-2 ring-indigo-300 cursor-pointer">
|
||||
<div class="w-10 flex-shrink-0 pt-1">
|
||||
<span class="text-xl font-bold text-indigo-600">01</span>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<p class="text-lg font-semibold text-gray-900">Fading Light</p>
|
||||
<p class="text-sm text-gray-500">3:45</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4 p-3 bg-white hover:bg-indigo-50 rounded-lg transition duration-200 shadow-sm border-l-4 border-indigo-400 focus-within:ring-2 ring-indigo-300 cursor-pointer">
|
||||
<div class="w-10 flex-shrink-0 pt-1">
|
||||
<span class="text-xl font-bold text-indigo-600">02</span>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<p class="text-lg font-semibold text-gray-900">The Silent Bloom</p>
|
||||
<p class="text-sm text-gray-500">4:12</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4 p-3 bg-white hover:bg-indigo-50 rounded-lg transition duration-200 shadow-sm border-l-4 border-indigo-400 focus-within:ring-2 ring-indigo-300 cursor-pointer">
|
||||
<div class="w-10 flex-shrink-0 pt-1">
|
||||
<span class="text-xl font-bold text-indigo-600">03</span>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<p class="text-lg font-semibold text-gray-900">Drifting Currents</p>
|
||||
<p class="text-sm text-gray-500">5:01</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4 p-3 bg-white hover:bg-indigo-50 rounded-lg transition duration-200 shadow-sm border-l-4 border-indigo-400 focus-within:ring-2 ring-indigo-300 cursor-pointer">
|
||||
<div class="w-10 flex-shrink-0 pt-1">
|
||||
<span class="text-xl font-bold text-indigo-600">04</span>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<p class="text-lg font-semibold text-gray-900">Horizon Pulse</p>
|
||||
<p class="text-sm text-gray-500">3:22</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ... more tracks for visual depth -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar/Bio Column -->
|
||||
<div class="lg:w-1/3 mt-10 lg:mt-0">
|
||||
<div class="bg-white p-8 rounded-xl shadow-2xl border-t-4 border-indigo-500 h-full">
|
||||
<h3 class="text-2xl font-display text-gray-900 mb-4">Artist Insight</h3>
|
||||
<p class="text-gray-600 mb-6 text-sm italic leading-relaxed">
|
||||
"Solstice Echoes is a deeply personal journey, exploring the tension between stillness and constant motion. It’s about finding the quiet beauty in the noise of modern life—the echo in the bloom."
|
||||
</p>
|
||||
<div class="space-y-3">
|
||||
<p><strong class="font-semibold text-indigo-600 block">Genre:</strong> Ambient Pop / Indie Soul</p>
|
||||
<p><strong class="font-semibold text-indigo-600 block">Label:</strong> Stellar Sound Collective</p>
|
||||
<p><strong class="font-semibold text-indigo-600 block">Produced By:</strong> Elias Vance</p>
|
||||
</div>
|
||||
<button onclick="window.location.hash='buy'" class="mt-8 w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-indigo-300">
|
||||
Purchase Physical Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tour Dates Section -->
|
||||
<section id="tour" class="py-20 lg:py-28 bg-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-sm uppercase tracking-widest text-indigo-500 font-bold">Upcoming Performances</h2>
|
||||
<p class="mt-2 text-4xl lg:text-5xl font-display font-bold text-gray-900">
|
||||
Tour Dates
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Tour List -->
|
||||
<div class="space-y-6 max-w-4xl mx-auto">
|
||||
<!-- Tour Item Template -->
|
||||
<div class="bg-white p-6 lg:p-8 rounded-xl shadow-lg flex flex-col md:flex-row justify-between items-center hover:shadow-xl transition duration-300 border-l-8 border-red-500">
|
||||
<div class="text-center md:text-left mb-4 md:mb-0">
|
||||
<p class="text-sm uppercase tracking-widest text-red-500 font-bold">May 12, 2024</p>
|
||||
<h4 class="text-2xl font-display text-gray-900">The Grand Conservatory</h4>
|
||||
<p class="text-gray-500 mt-1">New York, NY, USA</p>
|
||||
</div>
|
||||
<a href="#" class="btn-primary bg-red-500 text-white px-6 py-3 rounded-lg text-sm font-semibold hover:bg-red-400 focus:outline-none focus:ring-4 ring-red-300">
|
||||
Get Tickets
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Tour Item Template -->
|
||||
<div class="bg-white p-6 lg:p-8 rounded-xl shadow-lg flex flex-col md:flex-row justify-between items-center hover:shadow-xl transition duration-300 border-l-8 border-indigo-500">
|
||||
<div class="text-center md:text-left mb-4 md:mb-0">
|
||||
<p class="text-sm<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 29.36s</div>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hundehaus Herzensfreude | Adoptionszentrum</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom Configuration for Tailwind */
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'primary-gold': '#D4AF37',
|
||||
'secondary-sage': '#8FBC8F',
|
||||
'deep-moss': '#385A38',
|
||||
'cream-bg': '#FAF9F6',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Styles for visual flair */
|
||||
.hero-bg {
|
||||
background-image: url('https://images.unsplash.com/photo-1583025817778-5e420783b68e?fit=crop&w=1600&q=80'); /* Placeholder for a warm, happy dog image */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-blend-mode: multiply;
|
||||
background-color: rgba(0, 0, 0, 0.3); /* Dark overlay */
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* Subtle animation for content fade-in */
|
||||
.animate-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: fadeInMove 1s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInMove {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-sans bg-cream-bg text-gray-800">
|
||||
|
||||
<!-- Header & Navigation -->
|
||||
<header class="bg-white shadow-lg sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-20">
|
||||
<div class="text-3xl font-extrabold text-deep-moss tracking-wider cursor-pointer">
|
||||
Hundhaus<span class="text-primary-gold"> Herzensfreude</span>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-8 font-medium">
|
||||
<a href="#adoptieren" class="text-gray-600 hover:text-primary-gold transition duration-150 focus:text-primary-gold focus:outline-none focus:ring-2 ring-primary-gold p-1">Adoption</a>
|
||||
<a href="#tierliste" class="text-gray-600 hover:text-primary-gold transition duration-150 focus:text-primary-gold focus:outline-none focus:ring-2 ring-primary-gold p-1">Tierliste</a>
|
||||
<a href="#ueber" class="text-gray-600 hover:text-primary-gold transition duration-150 focus:text-primary-gold focus:outline-none focus:ring-2 ring-primary-gold p-1">Über Uns</a>
|
||||
<a href="#kontakt" class="bg-primary-gold text-white px-4 py-2 rounded-lg shadow-md hover:bg-yellow-600 transition duration-150 focus:ring-4 ring-primary-gold focus:ring-opacity-50">Kontakt</a>
|
||||
</nav>
|
||||
<div class="md:hidden">
|
||||
<!-- Mobile Menu Button (Placeholder for functionality) -->
|
||||
<button id="mobile-menu-button" class="text-gray-800 hover:text-primary-gold focus:outline-none focus:ring-2 ring-primary-gold p-2">
|
||||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Menu Dropdown (Hidden by default) -->
|
||||
<div id="mobile-menu" class="hidden md:hidden border-t bg-white">
|
||||
<div class="px-4 pt-2 pb-3 space-y-1 sm:px-6">
|
||||
<a href="#adoptieren" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-cream-bg focus:bg-cream-bg focus:outline-none">Adoption</a>
|
||||
<a href="#tierliste" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-cream-bg focus:bg-cream-bg focus:outline-none">Tierliste</a>
|
||||
<a href="#ueber" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-cream-bg focus:bg-cream-bg focus:outline-none">Über Uns</a>
|
||||
<a href="#kontakt" class="block w-full text-center mt-2 bg-primary-gold text-white px-3 py-2 rounded-md hover:bg-yellow-600 focus:ring-2 ring-primary-gold">Kontakt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-bg h-[60vh] flex items-center justify-center text-center relative">
|
||||
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
|
||||
<div class="relative z-10 p-4 max-w-4xl animate-in" style="animation-delay: 0.1s;">
|
||||
<h1 class="text-6xl sm:text-7xl font-extrabold text-white leading-tight mb-4 drop-shadow-lg">
|
||||
Finde Dein Bester Freund
|
||||
</h1>
|
||||
<p class="text-xl sm:text-2xl text-white mb-8 font-light shadow-text">
|
||||
Ein Zuhause, das Liebe schenkt. Wir verbinden Tiere mit Herzen, die sie lieben.
|
||||
</p>
|
||||
<a href="#adoptieren" class="inline-block bg-primary-gold text-white text-lg font-semibold px-10 py-4 rounded-full shadow-2xl transform hover:scale-105 transition duration-300 focus:outline-none focus:ring-4 ring-primary-gold ring-offset-4">
|
||||
Jetzt Adoptionsprozess starten
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mission Statement Section -->
|
||||
<section id="ueber" class="py-16 md:py-24 bg-white">
|
||||
<div class="max-w-6xl mx-auto px-6 lg:px-8">
|
||||
<div class="text-center mb-12 animate-in" style="animation-delay: 0.3s;">
|
||||
<h2 class="text-5xl font-bold text-deep-moss mb-3">Unsere Mission</h2>
|
||||
<p class="text-xl text-gray-600">Jedes Tier verdient eine zweite Chance.</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
<!-- Feature 1 -->
|
||||
<div class="text-center p-6 bg-cream-bg rounded-xl shadow-lg border-t-4 border-secondary-sage transform transition duration-300 hover:shadow-xl hover:border-primary-gold animate-in" style="animation-delay: 0.5s;">
|
||||
<svg class="w-16 h-16 mx-auto text-primary-gold mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10l8 4 8-4V7M4 7v10l8 4 8-4V7"></path></svg>
|
||||
<h3 class="text-2xl font-bold mb-3 text-deep-moss">Fürsorge & Pflege</h3>
|
||||
<p class="text-gray-600 leading-relaxed">Wir stellen sicher, dass jedes Tier in unserer Obhut liebevoll versorgt wird und die notwendige medizinische Betreuung erhält.</p>
|
||||
</div>
|
||||
<!-- Feature 2 -->
|
||||
<div class="text-center p-6 bg-cream-bg rounded-xl shadow-lg border-t-4 border-secondary-sage transform transition duration-300 hover:shadow-xl hover:border-primary-gold animate-in" style="animation-delay: 0.6s;">
|
||||
<svg class="w-16 h-16 mx-auto text-primary-gold mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
|
||||
<h3 class="text-2xl font-bold mb-3 text-deep-moss">Matchmaking</h3>
|
||||
<p class="text-gray-600 leading-relaxed">Wir finden das perfekte Match zwischen Tier und Familie. Sorgfältige Vermittlung ist unser Spezialgebiet.</p>
|
||||
</div>
|
||||
<!-- Feature 3 -->
|
||||
<div class="text-center p-6 bg-cream-bg rounded-xl shadow-lg border-t-4 border-secondary-sage transform transition duration-300 hover:shadow-xl hover:border-primary-gold animate-in" style="animation-delay: 0.7s;">
|
||||
<svg class="w-16 h-16 mx-auto text-primary-gold mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5-6H8a3 3 0 00-5 6v2m14 0h-5m-5 0h-5m5 0h5m0 0h-5"></path></svg>
|
||||
<h3 class="text-2xl font-bold mb-3 text-deep-moss">Zweite Chance</h3>
|
||||
<p class="text-gray-600 leading-relaxed">Wir geben Tieren, die sie verdienen, ein warmes, liebevolles Zuhause, fernab des Leidens.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Adoption Listing Section -->
|
||||
<section id="tierliste" class="py-16 md:py-24 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div class="text-center mb-12 animate-in" style="animation-delay: 0.1s;">
|
||||
<h2 class="text-5xl font-bold text-deep-moss mb-3">Die Suche beginnt hier</h2>
|
||||
<p class="text-xl text-gray-600">Entdecke unsere wunderbaren Bewohner.</p>
|
||||
</div>
|
||||
|
||||
<!-- Filter/Search Bar -->
|
||||
<div class="mb-10 flex flex-col sm:flex-row gap-4 justify-center animate-in" style="animation-delay: 0.3s;">
|
||||
<select class="p-3 border-2 border-primary-gold rounded-lg shadow-md focus:ring-2 focus:ring-primary-gold focus:border-primary-gold w-full sm:w-auto transition duration-150">
|
||||
<option>Alle Tierarten</option>
|
||||
<option>Hunde</option>
|
||||
<option>Katzen</option>
|
||||
</select>
|
||||
<input type="text" placeholder="Suche nach Name oder Rasse..." class="p-3 border-2 border-gray-300 rounded-lg shadow-md focus:ring-2 focus:ring-secondary-sage focus:border-secondary-sage w-full sm:w-full transition duration-150">
|
||||
<button class="bg-secondary-sage text-white px-6 py-3 rounded-lg font-semibold shadow-md hover:bg-green-700 transition duration-150 focus:outline-none focus:ring-4 ring-secondary-sage">
|
||||
Suche starten
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Animal Grid -->
|
||||
<div id="animal-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Animal Card 1: Bella (Dog) -->
|
||||
<div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden cursor-pointer animate-in" style="animation-delay: 0.5s;">
|
||||
<img src="https://images.unsplash.com/photo-1574537185970-b89e4b6284e1?fit=crop&w=500&q=80" alt="Bella, Labrador-Mischling" class="w-full h-64 object-cover transition duration-500">
|
||||
<div class="p-5">
|
||||
<h4 class="text-3xl font-extrabold text-deep-moss mb-1">Bella</h4>
|
||||
<p class="text-lg text-gray-500 mb-3">Labrador-Mischling</p>
|
||||
<p class="text-sm text-gray-700 mb-3 border-l-4 border-primary-gold pl-3">Freundlich, verspielt und liebt lange Spaziergänge.</p>
|
||||
<div class="flex justify-between items-center pt-2">
|
||||
<span class="text-primary-gold text-xl font-bold">3 Jahre</span>
|
||||
<button class="bg-primary-gold text-white px-6 py-2 rounded-full font-semibold shadow-md hover:bg-yellow-600 transition duration-150 focus:outline-none focus:ring-4 ring-primary-gold">
|
||||
Mehr erfahren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Animal Card 2: Felix (Cat) -->
|
||||
<div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden cursor-pointer animate-in" style="animation-delay: 0.6s;">
|
||||
<img src="https://images.unsplash.com/photo-1<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.75s</div>
|
||||
@@ -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">
|
||||
© 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>
|
||||
@@ -0,0 +1,176 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Willow Creek Sanctuary - Find Your Best Friend</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Customizing Tailwind configuration for specific aesthetic */
|
||||
.font-display {
|
||||
font-family: 'Playfair Display', serif;
|
||||
}
|
||||
.font-body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
/* Keyframe for a subtle heart pulse animation */
|
||||
@keyframes pulse-heart {
|
||||
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.7); }
|
||||
70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 69, 0, 0); }
|
||||
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
|
||||
}
|
||||
.animate-pulse-custom {
|
||||
animation: pulse-heart 3s infinite;
|
||||
}
|
||||
/* Utility for card hover effect */
|
||||
.card-hover:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
<!-- Importing Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-gray-50 font-body text-gray-800 antialiased">
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-md">
|
||||
<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-display text-indigo-700 tracking-tighter">
|
||||
Willow Creek Sanctuary
|
||||
</h1>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#adopt" class="text-gray-600 hover:text-indigo-600 transition duration-150 px-3 py-2 border-b-2 border-transparent hover:border-indigo-600 font-medium">Adopt</a>
|
||||
<a href="#about" class="text-gray-600 hover:text-indigo-600 transition duration-150 px-3 py-2 border-b-2 border-transparent hover:border-indigo-600 font-medium">Our Mission</a>
|
||||
<a href="#events" class="text-gray-600 hover:text-indigo-600 transition duration-150 px-3 py-2 border-b-2 border-transparent hover:border-indigo-600 font-medium">Events</a>
|
||||
<a href="#donate" class="text-gray-600 hover:text-indigo-600 transition duration-150 px-3 py-2 border-b-2 border-transparent hover:border-indigo-600 font-medium">Donate</a>
|
||||
</nav>
|
||||
<div class="md:hidden">
|
||||
<!-- Mobile Menu Button (Hidden by default, JS will show it) -->
|
||||
<button id="mobile-menu-button" type="button" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 p-2 rounded-md" aria-controls="mobile-menu" aria-expanded="false">
|
||||
<svg id="menu-icon-open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
|
||||
<svg id="menu-icon-close" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Menu -->
|
||||
<div class="md:hidden hidden" id="mobile-menu">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<a href="#adopt" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500">Adopt</a>
|
||||
<a href="#about" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500">Our Mission</a>
|
||||
<a href="#events" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500">Events</a>
|
||||
<a href="#donate" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative bg-cover bg-center h-[60vh] flex items-center justify-center"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1542394372-a7c52057f6b1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
|
||||
<!-- Overlay for readability -->
|
||||
<div class="absolute inset-0 bg-black/40"></div>
|
||||
<div class="relative text-center px-4">
|
||||
<h2 class="text-5xl sm:text-6xl lg:text-7xl font-display text-white mb-4 leading-tight drop-shadow-lg">
|
||||
Give Them A Second Chance
|
||||
</h2>
|
||||
<p class="text-xl sm:text-2xl text-white mb-8 font-light tracking-wide drop-shadow-md">
|
||||
Willow Creek Sanctuary: Where love finds its home.
|
||||
</p>
|
||||
<a href="#adopt" class="inline-block bg-orange-500 hover:bg-orange-600 text-white text-xl font-bold py-4 px-10 rounded-full transition duration-300 shadow-xl transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-orange-300 uppercase tracking-wider">
|
||||
Meet Our Animals
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Adoption CTA Section -->
|
||||
<section id="adopt" class="bg-indigo-50 py-16 sm:py-24">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center max-w-4xl mx-auto">
|
||||
<h3 class="text-base font-semibold text-orange-500 tracking-wide uppercase mb-2">Your Companion Awaits</h3>
|
||||
<h2 class="text-4xl sm:text-5xl font-display text-indigo-800 mb-6">
|
||||
Ready to Open Your Heart?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 mb-10">
|
||||
Every wagging tail and gentle purr deserves a safe haven. Explore our residents and start the journey to permanent happiness today.
|
||||
</p>
|
||||
<a href="#" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white text-xl font-semibold py-4 px-10 rounded-lg transition duration-300 shadow-lg transform hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-indigo-300">
|
||||
View Available Pets
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pet Showcase Section -->
|
||||
<section class="py-20 sm:py-28 bg-white" id="pets">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h3 class="text-sm font-semibold text-indigo-600 uppercase tracking-widest mb-2">Featured Companions</h3>
|
||||
<h2 class="text-4xl sm:text-5xl font-display text-gray-900">
|
||||
Love Stories Start Here
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Pet Grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Pet Card 1: Dog -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-lg border border-gray-100 card-hover transition duration-300 cursor-pointer">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1517410714048-0c08e632692e?w=600&auto=format&fit=crop"
|
||||
alt="Barnaby, friendly Labrador mix"
|
||||
class="w-full h-64 object-cover transition duration-500 hover:scale-105">
|
||||
<span class="absolute top-2 right-2 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">DOG</span>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-2xl font-display text-gray-900 mb-1">Barnaby</h4>
|
||||
<p class="text-indigo-500 text-sm uppercase tracking-wider mb-3">Labrador Mix</p>
|
||||
<p class="text-gray-600 mb-4 text-sm">This gentle soul loves long walks and snuggles on the couch. Perfect for a family who loves adventure and quiet evenings.</p>
|
||||
<button class="w-full bg-orange-400 hover:bg-orange-500 text-white font-semibold py-3 rounded-lg transition duration-150 focus:outline-none focus:ring-4 focus:ring-orange-300">
|
||||
See Barnaby's Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pet Card 2: Cat -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-lg border border-gray-100 card-hover transition duration-300 cursor-pointer">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1531403086224-be5684b1e099?w=600&auto=format&fit=crop"
|
||||
alt="Luna, elegant Siamese cat"
|
||||
class="w-full h-64 object-cover transition duration-500 hover:scale-105">
|
||||
<span class="absolute top-2 right-2 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">CAT</span>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-2xl font-display text-gray-900 mb-1">Luna</h4>
|
||||
<p class="text-indigo-500 text-sm uppercase tracking-wider mb-3">Siamese</p>
|
||||
<p class="text-gray-600 mb-4 text-sm">Luna seeks a quiet, loving home where she can be the queen of the lap. She is surprisingly playful and very affectionate.</p>
|
||||
<button class="w-full bg-orange-400 hover:bg-orange-500 text-white font-semibold py-3 rounded-lg transition duration-150 focus:outline-none focus:ring-4 focus:ring-orange-300">
|
||||
See Luna's Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pet Card 3: Small Animal/Other -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-lg border border-gray-100 card-hover transition duration-300 cursor-pointer">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1574254630214-8e85d10832d5?w=600&auto=format&fit=crop"
|
||||
alt="Pip, small terrier mix"
|
||||
class="w-full h-64 object-cover transition duration-500 hover:scale-105">
|
||||
<span class="absolute top-2 right-2 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">DOG</span>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-2xl font-display text-gray-900 mb-1">Pip</h4>
|
||||
<p class="text-indigo-500 text-sm uppercase tracking-wider mb-3">Terrier Mix</p>
|
||||
<p class="text-gray-600 mb-4 text-sm">Pip is an energetic little adventurer who needs someone to share their sunny disposition with. Great with active people!</p>
|
||||
<button class="w-full bg-orange-400 hover:bg-orange-500 text-white font-semibold py-3 rounded-lg transition duration-150 focus:outline-none focus:ring-4 focus:ring-orange-300">
|
||||
See Pip's Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-12">
|
||||
<a href="#" class="inline-flex items-center bg-gray-<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.26s</div>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 161 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user