Initial import: was v0 exportiert hat

components/hero.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import Link from 'next/link'
+import { motion } from 'framer-motion'
+import { ArrowDown, ArrowRight } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { SystemDiagram } from './system-diagram'
+
+export function Hero() {
+  return (
+    <section className="relative min-h-screen flex items-center pt-20 lg:pt-0">
+      {/* Subtle grid background */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div 
+          className="absolute inset-0 opacity-[0.02] dark:opacity-[0.04]"
+          style={{
+            backgroundImage: `
+              linear-gradient(to right, currentColor 1px, transparent 1px),
+              linear-gradient(to bottom, currentColor 1px, transparent 1px)
+            `,
+            backgroundSize: '60px 60px',
+          }}
+        />
+      </div>
+
+      <div className="relative max-w-6xl mx-auto px-6 lg:px-8 py-20 lg:py-32">
+        <div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
+          {/* Text Content */}
+          <div className="lg:col-span-7 space-y-8">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <span className="inline-block font-mono text-xs tracking-wider text-accent uppercase mb-6">
+                1984 – heute
+              </span>
+              
+              <h1 className="font-serif text-4xl sm:text-5xl lg:text-6xl xl:text-7xl leading-[1.1] tracking-tight text-balance">
+                Seit 40 Jahren Code. Von Fortran{'\u00A0'}IV bis KI-Projekte in Python und Rust.
+              </h1>
+            </motion.div>
+
+            <motion.p
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.1 }}
+              className="text-lg lg:text-xl text-muted-foreground leading-relaxed max-w-2xl"
+            >
+              Erste Programmiersprache: Fortran{'\u00A0'}IV. Dann C und 68000-Assembler auf dem Atari{'\u00A0'}ST. 
+              An der Universität Unix entdeckt – und Linux nie wieder losgelassen. 
+              Seit Ende 2022 konzentriert auf KI-Tools und KI-Programmierung. 
+              Heute: Python und Rust.
+            </motion.p>
+
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="flex flex-col sm:flex-row gap-4 pt-4"
+            >
+              <Button asChild size="lg" className="group">
+                <Link href="#projekte">
+                  Projekte ansehen
+                  <ArrowDown className="ml-2 size-4 transition-transform group-hover:translate-y-0.5" />
+                </Link>
+              </Button>
+              <Button asChild variant="outline" size="lg" className="group">
+                <Link href="#ueber">
+                  Über Jamulix
+                  <ArrowRight className="ml-2 size-4 transition-transform group-hover:translate-x-0.5" />
+                </Link>
+              </Button>
+            </motion.div>
+          </div>
+
+          {/* System Diagram */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.8, delay: 0.3 }}
+            className="lg:col-span-5 hidden lg:block"
+          >
+            <SystemDiagram />
+          </motion.div>
+        </div>
+
+        {/* Scroll indicator */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.6, delay: 0.8 }}
+          className="absolute bottom-8 left-1/2 -translate-x-1/2 hidden lg:block"
+        >
+          <div className="flex flex-col items-center gap-2 text-muted-foreground">
+            <span className="font-mono text-xs tracking-wider">Scroll</span>
+            <motion.div
+              animate={{ y: [0, 6, 0] }}
+              transition={{ duration: 1.5, repeat: Infinity, ease: 'easeInOut' }}
+            >
+              <ArrowDown className="size-4" />
+            </motion.div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}