Refactor code structure and remove redundant changes
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user