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

Refactor code structure and remove redundant changes

Browse Source
This commit is contained in:
christian
2026-07-12 18:16:31 +02:00
parent 23f20e4371
commit 80ee4cc892
101 changed files with 10541 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/seed-338d9641763f780f.html
+208
View File
@@ -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>