58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
|
'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>
|
|||
|
|
)
|
|||
|
|
}
|