88 lines
3.3 KiB
TypeScript
88 lines
3.3 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 1984 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"
|
|||
|
|
>
|
|||
|
|
<blockquote className="font-serif text-xl lg:text-2xl text-center max-w-3xl mx-auto text-balance">
|
|||
|
|
“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>
|
|||
|
|
)
|
|||
|
|
}
|