Hero: Neue Programmer-Grafik hinzugefügt (vektorisiert aus Programmierer.png)

- Neue Komponente programmer-graphic.tsx erstellt
- SVG-Grafik aus PNG vektorisiert mit potrace
- alte system-diagram.tsx wird nicht mehr verwendet
- Grafiken zeigen 1976-2026 Timeline mit 50 Jahre Badge

components/hero.tsx

@@ -4,7 +4,7 @@ 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'
+import { ProgrammerGraphic } from './programmer-graphic'
 
 export function Hero() {
   return (
@@ -74,14 +74,14 @@ export function Hero() {
             </motion.div>
           </div>
 
-          {/* System Diagram */}
+          {/* Programmer Graphic */}
           <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 />
+            <ProgrammerGraphic />
           </motion.div>
         </div>
 

components/programmer-graphic.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+
+export function ProgrammerGraphic() {
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.8 }}
+      className="relative w-full max-w-md mx-auto aspect-[3/5] lg:aspect-square"
+    >
+      <div className="relative w-full h-full">
+        <Image
+          src="/programmierer-vector.svg"
+          alt="Programmierung: Von 1976 bis heute – 50 Jahre Code"
+          fill
+          className="object-contain drop-shadow-lg dark:invert"
+          priority
+        />
+      </div>
+      
+      {/* Subtle decorative elements */}
+      <div className="absolute inset-0 pointer-events-none">
+        {/* 1976 Badge */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.5, duration: 0.6 }}
+          className="absolute top-4 left-4 font-mono text-xs text-accent bg-background/80 px-2 py-1 rounded border border-border/50"
+        >
+          1976
+        </motion.div>
+        
+        {/* 2026 Badge */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.7, duration: 0.6 }}
+          className="absolute bottom-4 right-4 font-mono text-xs text-accent bg-background/80 px-2 py-1 rounded border border-border/50"
+        >
+          2026
+        </motion.div>
+        
+        {/* 50 Years Center Badge */}
+        <motion.div
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ delay: 1, duration: 0.8 }}
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-mono text-2xl font-bold text-accent/30"
+        >
+          50
+        </motion.div>
+      </div>
+    </motion.div>
+  )
+}