Add Tutorials component and section to index.astro
This commit is contained in:
Felix Brabetz
@@ -0,0 +1,110 @@
|
||||
---
|
||||
// src/components/Tutorials.astro
|
||||
---
|
||||
<!-- Tutorials Section -->
|
||||
<section id="tutorials" class="py-32 bg-stone-950 relative overflow-hidden">
|
||||
<!-- Background Glow -->
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-emerald-500/5 rounded-full blur-3xl pointer-events-none"></div>
|
||||
|
||||
<div class="max-w-6xl mx-auto px-6 relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<span class="text-xs font-bold tracking-widest text-emerald-500 uppercase block mb-3">Wissen teilen</span>
|
||||
<h2 class="text-3xl font-luxury font-bold text-white">Praxis-Tutorials vom Profi</h2>
|
||||
<p class="text-stone-400 text-sm mt-4 max-w-2xl mx-auto">Wie machen die das eigentlich? Wir zeigen dir, wie echte GaLaBau-Handwerkskunst funktioniert.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<!-- Tutorial 1: Trockenmauer -->
|
||||
<div class="glass p-8 rounded-2xl border border-stone-800 flex flex-col justify-between">
|
||||
<div>
|
||||
<span class="text-xs font-mono text-emerald-500 uppercase tracking-widest">Tutorial #1</span>
|
||||
<h3 class="text-xl font-bold text-white mt-2 mb-4">Die perfekte Trockenmauer bauen</h3>
|
||||
<p class="text-stone-400 text-sm mb-6">Eine Trockenmauer hält ohne Mörtel – rein durch Schwerkraft und Reibung. Hier ist die Schritt-für-Schritt-Anleitung.</p>
|
||||
|
||||
<!-- Steps -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">01</div>
|
||||
<div>
|
||||
<h4 class="text-white text-sm font-bold">Fundament ausheben</h4>
|
||||
<p class="text-stone-500 text-xs mt-1">Mindestens 40 cm tief ausheben und mit frostsicherem Schotter (0/32) auffüllen und stark verdichten.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">02</div>
|
||||
<div>
|
||||
<h4 class="text-white text-sm font-bold">Die erste Reihe (Gründung)</h4>
|
||||
<p class="text-stone-500 text-xs mt-1">Die größten und flachsten Steine als Basis setzen. Sie müssen leicht nach hinten geneigt sein (Anlauf ca. 10-15%).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">03</div>
|
||||
<div>
|
||||
<h4 class="text-white text-sm font-bold">Hinterfüllung & Drainage</h4>
|
||||
<p class="text-stone-500 text-xs mt-1">Nach jeder Steinreihe mit Schotter hinterfüllen. Das verhindert Wasserdruck auf die Mauer.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">04</div>
|
||||
<div>
|
||||
<h4 class="text-white text-sm font-bold">Bepflanzung</h4>
|
||||
<p class="text-stone-500 text-xs mt-1">In die Fugen spezielles Substrat füllen und trockenheitsliebende Pflanzen wie Steingarten-Stauden setzen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 pt-6 border-t border-stone-800 flex justify-between items-center">
|
||||
<span class="text-xs text-stone-500 font-mono">Dauer: ca. 2 Tage</span>
|
||||
<span class="text-xs text-emerald-500 font-mono">Schwierigkeit: Schwer</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tutorial 2: Rasenpflege -->
|
||||
<div class="glass p-8 rounded-2xl border border-stone-800 flex flex-col justify-between">
|
||||
<div>
|
||||
<span class="text-xs font-mono text-emerald-500 uppercase tracking-widest">Tutorial #2</span>
|
||||
<h3 class="text-xl font-bold text-white mt-2 mb-4">Premium-Rasen im Sommer</h3>
|
||||
<p class="text-stone-400 text-sm mb-6">Ein sattes Grün im Hochsommer ist kein Zufall, sondern das Ergebnis der richtigen Pflege-Routine.</p>
|
||||
|
||||
<!-- Steps -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">01</div>
|
||||
<div>
|
||||
<h4 class="text-white text-sm font-bold">Seltener, aber durchdringend gießen</h4>
|
||||
<p class="text-stone-500 text-xs mt-1">Nicht jeden Tag ein bisschen, sondern 1-2 mal pro Woche intensiv (ca. 15-20 l/m²). Das fördert tiefe Wurzeln.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">02</div>
|
||||
<div>
|
||||
<h4 class="text-white text-sm font-bold">Schnitthöhe anpassen</h4>
|
||||
<p class="text-stone-500 text-xs mt-1">Im Sommer den Rasen nicht kürzer als 5 cm schneiden. Längere Halme beschatten den Boden und schützen vor Austrocknung.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">03</div>
|
||||
<div>
|
||||
<h4 class="text-white text-sm font-bold">Organisch düngen</h4>
|
||||
<p class="text-stone-500 text-xs mt-1">Ein Langzeitdünger im Mai/Juni versorgt den Rasen gleichmäßig. Keine mineralischen Dünger in der prallen Sonne verwenden!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">04</div>
|
||||
<div>
|
||||
<h4 class="text-white text-sm font-bold">Schnittgut liegen lassen (Mulchen)</h4>
|
||||
<p class="text-stone-500 text-xs mt-1">Wenn du oft mähst, lass das feine Schnittgut liegen. Es dient als natürlicher Dünger und Sonnenschutz.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 pt-6 border-t border-stone-800 flex justify-between items-center">
|
||||
<span class="text-xs text-stone-500 font-mono">Dauer: Kontinuierlich</span>
|
||||
<span class="text-xs text-emerald-500 font-mono">Schwierigkeit: Einfach</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user