0770ff499b
All checks were successful
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-consent (push) Successful in 39s
CI / test-python-voice (push) Successful in 37s
CI / test-bqas (push) Successful in 37s
Neue statische Website fuer Kinder (6-12 Jahre) mit 8 Holzprojekten, SVG-Illustrationen, Sicherheitshinweisen und kindgerechtem Design. Next.js 15 + Tailwind + Framer Motion. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
84 lines
3.6 KiB
TypeScript
84 lines
3.6 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import { TreePine, Heart, Sparkles, Users } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
|
|
const reasons = [
|
|
{ icon: Sparkles, title: 'Kreativitaet', text: 'Du kannst dir selbst ausdenken, was du baust — und es dann wirklich machen!' },
|
|
{ icon: Heart, title: 'Stolz', text: 'Wenn du etwas mit deinen eigenen Haenden baust, macht dich das richtig stolz.' },
|
|
{ icon: TreePine, title: 'Natur', text: 'Holz ist ein natuerliches Material. Du lernst die Natur besser kennen.' },
|
|
{ icon: Users, title: 'Zusammen', text: 'Holzarbeiten macht zusammen mit Freunden oder der Familie am meisten Spass!' },
|
|
]
|
|
|
|
export default function UeberPage() {
|
|
return (
|
|
<div className="max-w-4xl mx-auto px-4 py-12">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="text-center mb-12"
|
|
>
|
|
<h1 className="font-heading font-bold text-4xl mb-3">Ueber LEVIS Holzbau</h1>
|
|
<p className="text-dark/60 text-lg max-w-2xl mx-auto">
|
|
Wir zeigen dir, wie du aus einem einfachen Stueck Holz etwas Tolles machen kannst!
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Story */}
|
|
<div className="bg-white rounded-2xl p-6 sm:p-8 border border-primary/5 mb-12">
|
|
<h2 className="font-heading font-bold text-2xl mb-4">Was ist LEVIS Holzbau?</h2>
|
|
<div className="space-y-4 text-dark/70 leading-relaxed">
|
|
<p>
|
|
LEVIS Holzbau ist deine Online-Holzwerkstatt! Hier findest du Anleitungen fuer tolle Projekte
|
|
aus Holz — vom einfachen Zauberstab bis zum echten Vogelhaus.
|
|
</p>
|
|
<p>
|
|
Jedes Projekt erklaert dir Schritt fuer Schritt, was du tun musst. Du siehst welches Werkzeug
|
|
und Material du brauchst, und wir zeigen dir immer, worauf du bei der Sicherheit achten musst.
|
|
</p>
|
|
<p>
|
|
Egal ob du 6 oder 12 Jahre alt bist — fuer jedes Alter gibt es passende Projekte.
|
|
Faengst du gerade erst an? Dann probier den Zauberstab oder die Nagelbilder. Bist du
|
|
schon ein Profi? Dann trau dich an den Fliegenpilz!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Why woodworking */}
|
|
<h2 className="font-heading font-bold text-2xl mb-6 text-center">Warum Holzarbeiten Spass macht</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-12">
|
|
{reasons.map((r, i) => (
|
|
<motion.div
|
|
key={r.title}
|
|
className="bg-white rounded-2xl p-5 border border-primary/5 flex gap-4"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: i * 0.1 }}
|
|
>
|
|
<div className="w-10 h-10 bg-secondary/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<r.icon className="w-5 h-5 text-secondary" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-heading font-bold mb-1">{r.title}</h3>
|
|
<p className="text-sm text-dark/60">{r.text}</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA */}
|
|
<div className="text-center bg-gradient-to-br from-primary/5 to-secondary/5 rounded-2xl p-8">
|
|
<h2 className="font-heading font-bold text-2xl mb-3">Bereit loszulegen?</h2>
|
|
<p className="text-dark/60 mb-6">Schau dir unsere Projekte an und such dir eins aus!</p>
|
|
<Link
|
|
href="/projekte"
|
|
className="inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-white font-bold px-8 py-3 rounded-2xl transition-colors"
|
|
>
|
|
Zu den Projekten
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|