91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
'use client'
|
||
|
||
import { motion } from 'framer-motion'
|
||
|
||
const principles = [
|
||
{
|
||
title: 'Langfristige Neugier',
|
||
text: 'Technologie verändert sich ständig. Das Interesse daran nicht. Wer 1976 mit Programmieren begonnen hat, hat viele Paradigmenwechsel erlebt – und überlebt.',
|
||
},
|
||
{
|
||
title: 'Handwerkliche Sorgfalt',
|
||
text: 'Code ist keine Einwegware. Lesbarkeit, Wartbarkeit, Einfachheit – das sind keine Nice-to-haves, sondern Grundanforderungen.',
|
||
},
|
||
{
|
||
title: 'Systeme verstehen',
|
||
text: 'Nicht nur nutzen, sondern begreifen. Vom Kernel bis zum Compiler. Nur wer versteht, wie Dinge zusammenhängen, kann sie wirklich beherrschen.',
|
||
},
|
||
{
|
||
title: 'KI als Werkzeug',
|
||
text: 'Künstliche Intelligenz ist kein Hype, sondern ein ernsthaftes Werkzeug. Es verändert, wie wir programmieren – aber nicht warum.',
|
||
},
|
||
]
|
||
|
||
export function PhilosophySection() {
|
||
return (
|
||
<section id="philosophie" className="py-24 lg:py-32 bg-secondary/30">
|
||
<div className="max-w-6xl mx-auto px-6 lg:px-8">
|
||
{/* Section Header */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
className="mb-16 lg:mb-20"
|
||
>
|
||
<span className="font-mono text-xs tracking-wider text-accent uppercase">
|
||
Prinzipien
|
||
</span>
|
||
<h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl mt-4 text-balance">
|
||
Philosophie
|
||
</h2>
|
||
</motion.div>
|
||
|
||
{/* Principles Grid */}
|
||
<div className="grid lg:grid-cols-2 gap-12 lg:gap-x-16 lg:gap-y-14">
|
||
{principles.map((principle, index) => (
|
||
<motion.article
|
||
key={principle.title}
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: '-50px' }}
|
||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||
className="relative"
|
||
>
|
||
{/* Decorative number */}
|
||
<span className="absolute -left-2 lg:-left-8 top-0 font-mono text-6xl lg:text-7xl font-bold text-border/50 select-none">
|
||
{String(index + 1).padStart(2, '0')}
|
||
</span>
|
||
|
||
<div className="relative pl-8 lg:pl-0">
|
||
<h3 className="font-serif text-xl lg:text-2xl mb-4">
|
||
{principle.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
{principle.text}
|
||
</p>
|
||
</div>
|
||
</motion.article>
|
||
))}
|
||
</div>
|
||
|
||
{/* Closing statement */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: 0.4 }}
|
||
className="mt-20 pt-12 border-t border-border"
|
||
>
|
||
<p className="font-serif text-lg italic text-foreground text-center max-w-3xl mx-auto">
|
||
Und so gilt:
|
||
</p>
|
||
<blockquote className="font-mono text-xl lg:text-2xl text-accent text-center max-w-3xl mx-auto mt-3">
|
||
“Der beste Code ist der, den man in zehn Jahren noch versteht –
|
||
geschrieben von jemandem, der in zehn Jahren noch lernt.”
|
||
</blockquote>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|