mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ultra-aggressive mobile spacing refinement & native fidelity navigation redesign

Browse Source
This commit is contained in:
Marc Mintel
2026-02-15 20:15:04 +01:00
parent 6244425551
commit cb32b9d62f
19 changed files with 722 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
apps/web/app/about/page.tsx
View File

@@ -39,16 +39,16 @@ export default function AboutPage() {
<AbstractCircuit /> <AbstractCircuit />
{/* Hero Section */} {/* Hero Section */}
<section className="relative pt-32 pb-24 overflow-hidden border-b border-slate-50"> <section className="relative pt-12 md:pt-32 pb-8 md:pb-24 overflow-hidden border-b border-slate-50">
<Container variant="narrow" className="relative z-10"> <Container variant="narrow" className="relative z-10">
<div className="flex flex-col items-center text-center space-y-12"> <div className="flex flex-col items-center text-center space-y-6 md:space-y-12">
<Reveal> <Reveal>
<div className="relative"> <div className="relative">
{/* Structural rings around avatar */} {/* Structural rings around avatar */}
<div className="absolute inset-0 -m-8 border border-slate-100 rounded-full animate-[spin_30s_linear_infinite] opacity-50" /> <div className="absolute inset-0 -m-6 md:-m-8 border border-slate-100 rounded-full animate-[spin_30s_linear_infinite] opacity-50" />
<div className="absolute inset-0 -m-4 border border-slate-200 rounded-full animate-[spin_20s_linear_infinite_reverse] opacity-30" /> <div className="absolute inset-0 -m-3 md:-m-4 border border-slate-200 rounded-full animate-[spin_20s_linear_infinite_reverse] opacity-30" />
<div className="relative w-40 h-40 rounded-full overflow-hidden border border-slate-200 shadow-xl bg-white p-1 group"> <div className="relative w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border border-slate-200 shadow-xl bg-white p-1 group">
<div className="w-full h-full rounded-full overflow-hidden relative aspect-square"> <div className="w-full h-full rounded-full overflow-hidden relative aspect-square">
<img <img
src={getImgproxyUrl("/marc-mintel.png", { src={getImgproxyUrl("/marc-mintel.png", {
@@ -65,14 +65,14 @@ export default function AboutPage() {
</div> </div>
</Reveal> </Reveal>
<div className="space-y-6 max-w-3xl"> <div className="space-y-3 md:space-y-6 max-w-3xl">
<Reveal delay={0.1}> <Reveal delay={0.1}>
<div className="flex items-center justify-center gap-4 mb-4"> <div className="flex items-center justify-center gap-2 md:gap-4 mb-1 md:mb-4">
<div className="h-px w-8 bg-slate-900"></div> <div className="h-px w-6 md:w-8 bg-slate-900"></div>
<MonoLabel className="text-slate-900"> <MonoLabel className="text-slate-900 text-[10px] md:text-sm">
Digital Architect Digital Architect
</MonoLabel> </MonoLabel>
<div className="h-px w-8 bg-slate-900"></div> <div className="h-px w-6 md:w-8 bg-slate-900"></div>
</div> </div>
</Reveal> </Reveal>
<PageHeader <PageHeader
@@ -89,7 +89,7 @@ export default function AboutPage() {
</Container> </Container>
{/* Connector to first section */} {/* Connector to first section */}
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-16 bg-gradient-to-b from-transparent to-slate-200" /> <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-12 md:h-16 bg-gradient-to-b from-transparent to-slate-200" />
</section> </section>
{/* Section 01: Story */} {/* Section 01: Story */}
@@ -99,17 +99,17 @@ export default function AboutPage() {
borderTop borderTop
illustration={<ExperienceIllustration className="w-24 h-24" />} illustration={<ExperienceIllustration className="w-24 h-24" />}
> >
<div className="space-y-12"> <div className="space-y-8 md:space-y-12">
<Reveal> <Reveal>
<H3 className="text-3xl md:text-5xl leading-tight max-w-3xl"> <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
Vom Designer <br /> Vom Designer <br />
<span className="text-slate-400">zum Architekten.</span> <span className="text-slate-400">zum Architekten.</span>
</H3> </H3>
</Reveal> </Reveal>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
<Reveal delay={0.1}> <Reveal delay={0.1}>
<div className="space-y-8"> <div className="space-y-6 md:space-y-8">
<LeadText className="text-xl md:text-2xl text-slate-400"> <LeadText className="text-xl md:text-2xl text-slate-400">
Agenturen, Konzerne, Startups – ich habe die Branche von allen Agenturen, Konzerne, Startups – ich habe die Branche von allen
Seiten kennengelernt. Was hängen geblieben ist:{" "} Seiten kennengelernt. Was hängen geblieben ist:{" "}
@@ -140,7 +140,7 @@ export default function AboutPage() {
padding="normal" padding="normal"
className="group" className="group"
> >
<H4 className="text-2xl mb-6"> <H4 className="text-xl mb-6">
Heute: Direkte Zusammenarbeit ohne Reibungsverluste. Heute: Direkte Zusammenarbeit ohne Reibungsverluste.
</H4> </H4>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
@@ -170,7 +170,7 @@ export default function AboutPage() {
> >
<div className="space-y-12"> <div className="space-y-12">
<Reveal> <Reveal>
<H3 className="text-3xl md:text-5xl leading-tight max-w-3xl"> <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
So läuft ein Projekt <br /> So läuft ein Projekt <br />
<span className="text-slate-400">bei mir ab.</span> <span className="text-slate-400">bei mir ab.</span>
</H3> </H3>
@@ -204,7 +204,7 @@ export default function AboutPage() {
}, },
].map((item, i) => ( ].map((item, i) => (
<Reveal key={i} delay={0.1 + i * 0.1}> <Reveal key={i} delay={0.1 + i * 0.1}>
<div className="flex gap-6 py-6 group"> <div className="flex gap-4 md:gap-6 py-2 md:py-6 group">
<div className="relative z-10 shrink-0"> <div className="relative z-10 shrink-0">
<div className="w-8 h-8 rounded-full bg-white border border-slate-200 flex items-center justify-center group-hover:border-slate-400 group-hover:shadow-md transition-all duration-500"> <div className="w-8 h-8 rounded-full bg-white border border-slate-200 flex items-center justify-center group-hover:border-slate-400 group-hover:shadow-md transition-all duration-500">
<span className="text-[9px] font-mono font-bold text-slate-400 group-hover:text-slate-900 transition-colors"> <span className="text-[9px] font-mono font-bold text-slate-400 group-hover:text-slate-900 transition-colors">
@@ -212,9 +212,13 @@ export default function AboutPage() {
</span> </span>
</div> </div>
</div> </div>
<div className="space-y-2 pt-1"> <div className="space-y-1 md:space-y-2 pt-1">
<H4 className="text-xl">{item.title}</H4> <H4 className="text-base md:text-xl font-bold">
<BodyText className="text-slate-500">{item.desc}</BodyText> {item.title}
</H4>
<BodyText className="text-slate-500 text-sm md:text-base">
{item.desc}
</BodyText>
</div> </div>
</div> </div>
</Reveal> </Reveal>
@@ -225,9 +229,9 @@ export default function AboutPage() {
{/* Section 03: Philosophie – what drives me */} {/* Section 03: Philosophie – what drives me */}
<Section number="03" title="Philosophie" borderTop> <Section number="03" title="Philosophie" borderTop>
<div className="space-y-16"> <div className="space-y-12 md:space-y-16">
<Reveal> <Reveal>
<H3 className="text-3xl md:text-5xl leading-tight max-w-3xl"> <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
Ich stehe für <br /> Ich stehe für <br />
<span className="text-slate-400">meine Arbeit gerade.</span> <span className="text-slate-400">meine Arbeit gerade.</span>
</H3> </H3>
@@ -236,7 +240,7 @@ export default function AboutPage() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-12"> <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
<div className="space-y-8"> <div className="space-y-8">
<Reveal delay={0.1}> <Reveal delay={0.1}>
<LeadText className="text-xl text-slate-400"> <LeadText className="text-lg md:text-xl text-slate-400">
Keine Hierarchien, keine Ausreden. Wenn etwas nicht passt, Keine Hierarchien, keine Ausreden. Wenn etwas nicht passt,
liegt die Verantwortung bei mir – und ich{" "} liegt die Verantwortung bei mir – und ich{" "}
<span className="text-slate-900"> <span className="text-slate-900">
@@ -244,7 +248,7 @@ export default function AboutPage() {
</span> </span>
</LeadText> </LeadText>
</Reveal> </Reveal>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{[ {[
"Vollständige Transparenz", "Vollständige Transparenz",
"Ein Ansprechpartner", "Ein Ansprechpartner",
@@ -256,7 +260,9 @@ export default function AboutPage() {
<div className="w-6 h-6 rounded-full bg-white border border-slate-200 flex items-center justify-center shrink-0 group-hover:bg-slate-900 group-hover:border-slate-900 group-hover:shadow-lg group-hover:shadow-blue-500/10 transition-all duration-300"> <div className="w-6 h-6 rounded-full bg-white border border-slate-200 flex items-center justify-center shrink-0 group-hover:bg-slate-900 group-hover:border-slate-900 group-hover:shadow-lg group-hover:shadow-blue-500/10 transition-all duration-300">
<Check className="w-3 h-3 text-slate-400 group-hover:text-white transition-colors duration-300" /> <Check className="w-3 h-3 text-slate-400 group-hover:text-white transition-colors duration-300" />
</div> </div>
<Label className="text-slate-900">{item}</Label> <Label className="text-slate-900 text-xs md:text-sm">
{item}
</Label>
</div> </div>
</Reveal> </Reveal>
))} ))}
@@ -280,9 +286,9 @@ export default function AboutPage() {
illustration={<ContactIllustration className="w-24 h-24" />} illustration={<ContactIllustration className="w-24 h-24" />}
effects={<GradientMesh variant="metallic" className="opacity-60" />} effects={<GradientMesh variant="metallic" className="opacity-60" />}
> >
<div className="space-y-12"> <div className="space-y-10 md:space-y-12">
<Reveal> <Reveal>
<H3 className="text-3xl md:text-5xl leading-tight max-w-3xl"> <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
Bereit für eine <br /> Bereit für eine <br />
<span className="text-slate-400">Zusammenarbeit?</span> <span className="text-slate-400">Zusammenarbeit?</span>
</H3> </H3>
@@ -291,12 +297,12 @@ export default function AboutPage() {
<Card <Card
variant="glass" variant="glass"
hover={false} hover={false}
padding="large" padding="normal"
techBorder techBorder
className="rounded-3xl shadow-xl relative overflow-hidden group" className="rounded-3xl shadow-xl relative overflow-hidden group"
> >
<div className="relative z-10 space-y-8"> <div className="relative z-10 space-y-6 md:space-y-8">
<LeadText className="text-2xl md:text-4xl leading-tight max-w-2xl text-slate-400"> <LeadText className="text-lg md:text-4xl leading-tight max-w-2xl text-slate-400">
Lassen Sie uns gemeinsam etwas bauen, das{" "} Lassen Sie uns gemeinsam etwas bauen, das{" "}
<span className="text-slate-900"> <span className="text-slate-900">
<Marker delay={0.3} color="rgba(148,163,184,0.15)"> <Marker delay={0.3} color="rgba(148,163,184,0.15)">
@@ -305,8 +311,10 @@ export default function AboutPage() {
</span> </span>
</LeadText> </LeadText>
<div className="pt-4"> <div className="pt-2 md:pt-4">
<Button href="/contact">Projekt anfragen</Button> <Button href="/contact" className="w-full md:w-auto">
Projekt anfragen
</Button>
</div> </div>
</div> </div>
</Card> </Card>

22
apps/web/app/blog/[slug]/page.tsx
View File

@@ -37,7 +37,7 @@ export default async function BlogPostPage({
const PostContent = PostComponents[slug]; const PostContent = PostComponents[slug];
return ( return (
<div className="flex flex-col gap-12 py-12 md:py-24 overflow-hidden"> <div className="flex flex-col gap-8 md:gap-12 py-8 md:py-24 overflow-hidden">
<BlogPostClient readingTime={readingTime} title={post.title} /> <BlogPostClient readingTime={readingTime} title={post.title} />
<PageHeader <PageHeader
@@ -49,24 +49,26 @@ export default async function BlogPostPage({
<main id="post-content"> <main id="post-content">
<Section containerVariant="wide" className="pt-0 md:pt-0"> <Section containerVariant="wide" className="pt-0 md:pt-0">
<div className="max-w-5xl mx-auto"> <div className="max-w-5xl mx-auto px-0 sm:px-4 md:px-0">
<Card <Card
variant="glass" variant="glass"
techBorder techBorder
className="relative overflow-hidden" className="relative overflow-hidden rounded-none sm:rounded-3xl"
> >
{/* Decorative background grid inside the card */} {/* Decorative background grid inside the card */}
<div className="absolute inset-0 opacity-[0.03] bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" /> <div className="absolute inset-0 opacity-[0.03] bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
<div className="relative z-10 px-6 py-12 md:px-16 md:py-20"> <div className="relative z-10 px-5 py-10 md:px-16 md:py-20">
<div className="flex flex-wrap items-center justify-between gap-4 text-[10px] font-bold text-slate-400 mb-12 uppercase tracking-[0.2em] border-b border-slate-100 pb-6"> <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 text-[9px] md:text-[10px] font-bold text-slate-400 mb-10 md:mb-12 uppercase tracking-[0.2em] border-b border-slate-100 pb-6">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="w-2 h-2 rounded-full bg-slate-300" /> <span className="w-2 h-2 rounded-full bg-slate-300" />
<time dateTime={post.date}>{formattedDate}</time> <time dateTime={post.date}>{formattedDate}</time>
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4 sm:gap-6">
<span>{readingTime} min Lesezeit</span> <div className="flex items-center gap-2">
<span className="text-slate-200">|</span> <span className="text-slate-200 hidden sm:inline">|</span>
<span>{readingTime} min Lesezeit</span>
</div>
<span> <span>
{slug.substring(0, 4).toUpperCase()}- {slug.substring(0, 4).toUpperCase()}-
{Math.floor(Math.random() * 999)} {Math.floor(Math.random() * 999)}
@@ -75,11 +77,11 @@ export default async function BlogPostPage({
</div> </div>
{post.tags && post.tags.length > 0 && ( {post.tags && post.tags.length > 0 && (
<div className="flex flex-wrap gap-2 mb-12"> <div className="flex flex-wrap gap-2 mb-10 md:mb-12">
{post.tags.map((tag, index) => ( {post.tags.map((tag, index) => (
<span <span
key={tag} key={tag}
className="px-3 py-1 bg-slate-50 border border-slate-100 rounded text-[10px] font-mono text-slate-500 uppercase tracking-widest" className="px-2.5 py-1 bg-slate-50 border border-slate-100 rounded text-[9px] md:text-[10px] font-mono text-slate-500 uppercase tracking-widest"
> >
#{tag} #{tag}
</span> </span>

183
apps/web/app/case-studies/klz-cables/page.tsx
View File

@@ -46,7 +46,7 @@ export default function KLZCablesCaseStudy() {
</motion.div> </motion.div>
{/* --- HERO: INDUSTRIAL INFRASTRUCTURE --- */} {/* --- HERO: INDUSTRIAL INFRASTRUCTURE --- */}
<section className="relative min-h-[40vh] py-20 overflow-hidden border-b border-slate-100 bg-white"> <section className="relative min-h-[30vh] md:min-h-[40vh] py-10 md:py-20 overflow-hidden border-b border-slate-100 bg-white">
<motion.div <motion.div
style={{ y: heroY, rotate: gridRotate }} style={{ y: heroY, rotate: gridRotate }}
className="absolute inset-0 bg-[linear-gradient(to_right,#f1f5f9_1px,transparent_1px),linear-gradient(to_bottom,#f1f5f9_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_20%,transparent_100%)] pointer-events-none opacity-40" className="absolute inset-0 bg-[linear-gradient(to_right,#f1f5f9_1px,transparent_1px),linear-gradient(to_bottom,#f1f5f9_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_20%,transparent_100%)] pointer-events-none opacity-40"
@@ -56,7 +56,7 @@ export default function KLZCablesCaseStudy() {
<Reveal> <Reveal>
<Link <Link
href="/case-studies" href="/case-studies"
className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-12 transition-colors font-bold text-[10px] uppercase tracking-[0.4em] group" className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-8 md:mb-12 transition-colors font-bold text-[10px] uppercase tracking-[0.4em] group"
> >
<ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />{" "} <ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />{" "}
Zurück Zurück
@@ -82,23 +82,25 @@ export default function KLZCablesCaseStudy() {
</div> </div>
</Reveal> </Reveal>
<div className="space-y-12"> <div className="space-y-8 md:space-y-12">
<GlitchText <GlitchText
as="h1" as="h1"
className="text-6xl md:text-8xl tracking-tighter leading-[0.9] font-bold text-slate-900" className="text-4xl md:text-8xl tracking-tighter leading-[0.9] font-bold text-slate-900"
> >
KLZ Cables KLZ Cables
</GlitchText> </GlitchText>
<br /> <br className="hidden md:block" />
<span className="text-slate-100">Case Study.</span> <span className="text-slate-100 text-3xl md:text-6xl font-bold tracking-tighter">
Case Study.
</span>
<Reveal delay={0.2} direction="right" blur> <Reveal delay={0.2} direction="right" blur>
<div className="max-w-3xl border-l-[3px] border-slate-900 pl-8 md:pl-12"> <div className="max-w-3xl border-l-[3px] border-slate-900 pl-6 md:pl-12">
<LeadText className="text-2xl md:text-4xl leading-tight text-slate-900 font-medium"> <LeadText className="text-lg md:text-4xl leading-tight text-slate-900 font-medium">
Engineering eines <br /> Engineering eines <br className="hidden md:block" />
<Marker delay={0.2}>B2B Commerce Systems.</Marker> <Marker delay={0.2}>B2B Commerce Systems.</Marker>
</LeadText> </LeadText>
<BodyText className="mt-6 text-lg md:text-xl text-slate-500 max-w-xl leading-relaxed font-serif italic"> <BodyText className="mt-4 md:mt-6 text-base md:text-xl text-slate-500 max-w-xl leading-relaxed font-serif italic">
Vom statischen Altsystem zum industriellen Standard. Ich Vom statischen Altsystem zum industriellen Standard. Ich
habe das KLZ-System auf das Wesentliche reduziert: Hardened habe das KLZ-System auf das Wesentliche reduziert: Hardened
Infrastructure, parametrische Datenpflege und zero Infrastructure, parametrische Datenpflege und zero
@@ -109,20 +111,24 @@ export default function KLZCablesCaseStudy() {
</div> </div>
<Reveal delay={0.4} direction="up" scale={0.98} blur> <Reveal delay={0.4} direction="up" scale={0.98} blur>
<div className="flex flex-wrap gap-12 md:gap-24 pt-12 border-t border-slate-100"> <div className="flex flex-wrap gap-8 md:gap-24 pt-6 md:pt-12 border-t border-slate-100">
<div className="space-y-2"> <div className="space-y-1 md:space-y-2">
<Label className="text-slate-400">Data Integrity</Label> <Label className="text-slate-400 text-[10px] md:text-xs">
<div className="flex items-center gap-3"> Data Integrity
<div className="w-2.5 h-2.5 bg-[rgba(129,199,132,1)] rounded-full animate-pulse" /> </Label>
<span className="text-2xl font-bold font-mono text-slate-900 tracking-tight"> <div className="flex items-center gap-2 md:gap-3">
<div className="w-2 h-2 md:w-2.5 md:h-2.5 bg-[rgba(129,199,132,1)] rounded-full animate-pulse" />
<span className="text-base md:text-2xl font-bold font-mono text-slate-900 tracking-tight">
Relational Data Relational Data
</span> </span>
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-1 md:space-y-2">
<Label className="text-slate-400">Security Layer</Label> <Label className="text-slate-400 text-[10px] md:text-xs">
<div className="flex items-center gap-3 text-2xl font-bold font-mono text-slate-900"> Security Layer
<ShieldCheck className="w-6 h-6 text-[rgba(129,199,132,1)]" /> </Label>
<div className="flex items-center gap-2 md:gap-3 text-base md:text-2xl font-bold font-mono text-slate-900">
<ShieldCheck className="w-5 h-5 md:w-6 md:h-6 text-[rgba(129,199,132,1)]" />
<span>WP + Varnish</span> <span>WP + Varnish</span>
</div> </div>
</div> </div>
@@ -146,20 +152,20 @@ export default function KLZCablesCaseStudy() {
))} ))}
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-12 gap-16 lg:gap-24 items-start"> <div className="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-24 items-start">
<div className="md:col-span-12 mb-12"> <div className="md:col-span-12 mb-4 md:mb-12">
<H2 className="text-5xl md:text-8xl tracking-tighter mb-12"> <H2 className="text-3xl md:text-8xl tracking-tighter mb-4 md:mb-12">
<GlitchText>Architektur-</GlitchText> <br /> <GlitchText>Architektur-</GlitchText> <br />
Refactor. Refactor.
</H2> </H2>
</div> </div>
<div className="md:col-span-7 space-y-12"> <div className="md:col-span-7 space-y-8 md:space-y-12">
<Reveal delay={0.1} direction="up" blur> <Reveal delay={0.1} direction="up" blur>
<div className="space-y-10"> <div className="space-y-6 md:space-y-10">
<BodyText className="text-2xl leading-relaxed font-serif italic text-slate-500"> <BodyText className="text-xl md:text-2xl leading-relaxed font-serif italic text-slate-500">
Vom statischen HTML zur zentralen Daten-Instanz. Vom statischen HTML zur zentralen Daten-Instanz.
</BodyText> </BodyText>
<BodyText className="text-xl text-slate-600 leading-relaxed"> <BodyText className="text-lg md:text-xl text-slate-600 leading-relaxed">
Ich habe die KLZ-Architektur radikal auf einen entkoppelten Ich habe die KLZ-Architektur radikal auf einen entkoppelten
High-Performance-Stack umgestellt. WordPress fungiert hier High-Performance-Stack umgestellt. WordPress fungiert hier
nicht als CMS-Baukasten, sondern speichert alle technischen nicht als CMS-Baukasten, sondern speichert alle technischen
@@ -172,16 +178,16 @@ export default function KLZCablesCaseStudy() {
</div> </div>
</Reveal> </Reveal>
</div> </div>
<div className="md:col-span-5 relative"> <div className="md:col-span-5 relative mt-8 md:mt-0">
<Reveal delay={0.3} direction="right" scale={0.98} blur> <Reveal delay={0.3} direction="right" scale={0.98} blur>
<motion.div <motion.div
whileHover={{ y: -5, scale: 1.01 }} whileHover={{ y: -5, scale: 1.01 }}
transition={{ type: "spring", stiffness: 200, damping: 25 }} transition={{ type: "spring", stiffness: 200, damping: 25 }}
className="p-12 bg-slate-50 rounded-[3rem] border border-slate-100 space-y-12 relative overflow-hidden group shadow-sm text-left" className="p-6 md:p-12 bg-slate-50 rounded-[2.5rem] md:rounded-[3rem] border border-slate-100 space-y-6 md:space-y-12 relative overflow-hidden group shadow-sm text-left"
> >
<div className="space-y-8 relative z-10"> <div className="space-y-6 md:space-y-8 relative z-10">
<Label className="text-slate-900">System Metriken</Label> <Label className="text-slate-900">System Metriken</Label>
<div className="space-y-8"> <div className="space-y-6 md:space-y-8">
{[ {[
{ {
label: "Edge Caching", label: "Edge Caching",
@@ -204,11 +210,11 @@ export default function KLZCablesCaseStudy() {
initial={{ x: -20, opacity: 0 }} initial={{ x: -20, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }} whileInView={{ x: 0, opacity: 1 }}
transition={{ delay: 0.5 + i * 0.1, duration: 0.5 }} transition={{ delay: 0.5 + i * 0.1, duration: 0.5 }}
className="flex gap-6 border-b border-slate-200/50 pb-6 last:border-0 last:pb-0" className="flex gap-4 md:gap-6 border-b border-slate-200/50 pb-6 last:border-0 last:pb-0"
> >
<div className="shrink-0 mt-1">{item.icon}</div> <div className="shrink-0 mt-1">{item.icon}</div>
<div className="space-y-1"> <div className="space-y-1">
<MonoLabel className="text-[10px] text-slate-400"> <MonoLabel className="text-[9px] md:text-[10px] text-slate-400">
{item.label} {item.label}
</MonoLabel> </MonoLabel>
<BodyText className="text-base font-bold text-slate-900"> <BodyText className="text-base font-bold text-slate-900">
@@ -226,15 +232,15 @@ export default function KLZCablesCaseStudy() {
</Section> </Section>
{/* --- SHOWCASE: LANDING --- */} {/* --- SHOWCASE: LANDING --- */}
<section className="py-32 bg-slate-50 border-y border-slate-100 overflow-hidden relative"> <section className="py-12 md:py-32 bg-slate-50 border-y border-slate-100 overflow-hidden relative">
<div className="w-full max-w-[1920px] mx-auto px-4 md:px-12 relative z-10"> <div className="w-full max-w-[1920px] mx-auto px-4 md:px-12 relative z-10">
<Reveal direction="none" blur> <Reveal direction="none" blur>
<div className="relative mb-16 flex justify-between items-end"> <div className="relative mb-8 md:mb-16 flex justify-between items-end">
<div className="space-y-6"> <div className="space-y-6">
<Label className="text-slate-500"> <Label className="text-slate-500">
Infrastructure Validation Infrastructure Validation
</Label> </Label>
<H3 className="text-5xl md:text-8xl tracking-tighter"> <H3 className="text-3xl md:text-8xl tracking-tighter">
<GlitchText>Global Hub.</GlitchText> <GlitchText>Global Hub.</GlitchText>
</H3> </H3>
</div> </div>
@@ -254,7 +260,9 @@ export default function KLZCablesCaseStudy() {
> >
<IframeSection <IframeSection
src="/showcase/klz-cables.com/index.html" src="/showcase/klz-cables.com/index.html"
height="850px" height="400px"
mobileHeight="350px"
desktopHeight="850px"
desktopWidth={1920} desktopWidth={1920}
allowScroll allowScroll
browserFrame browserFrame
@@ -273,18 +281,22 @@ export default function KLZCablesCaseStudy() {
borderBottom borderBottom
containerVariant="wide" containerVariant="wide"
> >
<div className="grid grid-cols-1 gap-16"> <div className="grid grid-cols-1 gap-8 md:gap-16">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-end"> <div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-24 items-end">
<Reveal direction="left" blur> <div className="md:col-span-8">
<div className="space-y-6"> <Reveal direction="left" blur>
<Label className="text-slate-400">Asset Pipelines</Label> <div className="space-y-6 md:space-y-12">
<H3 className="text-4xl md:text-6xl tracking-tighter"> <Label className="text-slate-400 text-xs md:text-sm">
Automated Documentation. Asset Pipelines
</H3> </Label>
</div> <H3 className="text-2xl md:text-6xl tracking-tighter">
</Reveal> Automated Documentation.
</H3>
</div>
</Reveal>
</div>
<Reveal delay={0.1} direction="right" blur> <Reveal delay={0.1} direction="right" blur>
<BodyText className="text-xl text-slate-500 pb-2 font-serif italic"> <BodyText className="text-lg md:text-xl text-slate-500 pb-2 font-serif italic leading-relaxed">
Für Hochspannungs-N2XS(F)2Y Kabel ist Datentreue eine Für Hochspannungs-N2XS(F)2Y Kabel ist Datentreue eine
Sicherheitsanforderung. Ich habe eine automatisierte Sicherheitsanforderung. Ich habe eine automatisierte
Asset-Pipeline entwickelt, die technische Datenblätter Asset-Pipeline entwickelt, die technische Datenblätter
@@ -302,7 +314,9 @@ export default function KLZCablesCaseStudy() {
<div className="relative w-full overflow-visible"> <div className="relative w-full overflow-visible">
<IframeSection <IframeSection
src="/showcase/klz-cables.com/power-cables-medium-voltage-cables.html" src="/showcase/klz-cables.com/power-cables-medium-voltage-cables.html"
height="1000px" height="450px"
mobileHeight="400px"
desktopHeight="1000px"
desktopWidth={1920} desktopWidth={1920}
allowScroll allowScroll
offsetY={100} offsetY={100}
@@ -321,9 +335,9 @@ export default function KLZCablesCaseStudy() {
borderBottom borderBottom
containerVariant="wide" containerVariant="wide"
> >
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16 items-center">
<div className="lg:col-span-12 mb-12 text-center lg:text-left relative z-10"> <div className="lg:col-span-12 mb-4 md:mb-12 text-center lg:text-left relative z-10">
<H3 className="text-4xl md:text-6xl max-w-4xl tracking-tighter"> <H3 className="text-3xl md:text-6xl max-w-4xl tracking-tighter">
Fokus auf <br /> Fokus auf <br />
<Marker delay={0.2}>Spezifikationen.</Marker> <Marker delay={0.2}>Spezifikationen.</Marker>
</H3> </H3>
@@ -334,7 +348,7 @@ export default function KLZCablesCaseStudy() {
<motion.div <motion.div
whileHover={{ scale: 1.01 }} whileHover={{ scale: 1.01 }}
transition={{ type: "spring", stiffness: 200, damping: 20 }} transition={{ type: "spring", stiffness: 200, damping: 20 }}
className="relative h-[650px] w-full overflow-hidden group" className="relative h-[400px] md:h-[650px] w-full overflow-hidden group"
> >
<IframeSection <IframeSection
src="/showcase/klz-cables.com/which-cables-for-wind-power-differences-from-low-to-extra-high-voltage-explained-2.html" src="/showcase/klz-cables.com/which-cables-for-wind-power-differences-from-low-to-extra-high-voltage-explained-2.html"
@@ -350,9 +364,9 @@ export default function KLZCablesCaseStudy() {
<div className="lg:col-span-4 space-y-10 relative z-10"> <div className="lg:col-span-4 space-y-10 relative z-10">
<Reveal delay={0.2} direction="right" blur> <Reveal delay={0.2} direction="right" blur>
<div className="space-y-6"> <div className="space-y-4 md:space-y-6">
<Label className="text-slate-400">Katalog-Struktur</Label> <Label className="text-slate-400">Katalog-Struktur</Label>
<LeadText className="text-lg"> <LeadText className="text-base md:text-lg leading-relaxed">
Der Produktbereich wurde konsequent auf die Bedürfnisse Der Produktbereich wurde konsequent auf die Bedürfnisse
technischer Planer optimiert. Klare Hierarchien und der technischer Planer optimiert. Klare Hierarchien und der
Verzicht auf E-Commerce-Rauschen ermöglichen einen direkten Verzicht auf E-Commerce-Rauschen ermöglichen einen direkten
@@ -360,9 +374,9 @@ export default function KLZCablesCaseStudy() {
</LeadText> </LeadText>
<motion.div <motion.div
whileHover={{ x: 10 }} whileHover={{ x: 10 }}
className="p-8 bg-white border border-slate-200 rounded-3xl shadow-sm" className="p-5 md:p-8 bg-white border border-slate-200 rounded-2xl md:rounded-3xl shadow-sm"
> >
<Layers className="w-6 h-6 text-slate-400 mb-4" /> <Layers className="w-5 h-5 md:w-6 md:h-6 text-slate-400 mb-3 md:mb-4" />
<BodyText className="text-sm font-medium"> <BodyText className="text-sm font-medium">
Strukturierte Aufbereitung technischer Produktdaten. Strukturierte Aufbereitung technischer Produktdaten.
</BodyText> </BodyText>
@@ -386,7 +400,7 @@ export default function KLZCablesCaseStudy() {
<Reveal direction="left" blur> <Reveal direction="left" blur>
<div className="space-y-6"> <div className="space-y-6">
<Label className="text-slate-400">Knowledge Transfer</Label> <Label className="text-slate-400">Knowledge Transfer</Label>
<H3 className="text-4xl md:text-6xl tracking-tighter"> <H3 className="text-3xl md:text-6xl tracking-tighter">
Insights & News. Insights & News.
</H3> </H3>
<BodyText className="text-xl text-slate-500 font-serif italic"> <BodyText className="text-xl text-slate-500 font-serif italic">
@@ -403,7 +417,7 @@ export default function KLZCablesCaseStudy() {
<motion.div <motion.div
whileHover={{ scale: 1.01 }} whileHover={{ scale: 1.01 }}
transition={{ type: "spring", stiffness: 200, damping: 20 }} transition={{ type: "spring", stiffness: 200, damping: 20 }}
className="relative h-[700px] w-full" className="relative h-[450px] md:h-[700px] w-full"
> >
<IframeSection <IframeSection
src="/showcase/klz-cables.com/blog.html" src="/showcase/klz-cables.com/blog.html"
@@ -426,12 +440,12 @@ export default function KLZCablesCaseStudy() {
borderBottom borderBottom
containerVariant="wide" containerVariant="wide"
> >
<div className="space-y-16 text-center"> <div className="space-y-10 md:space-y-16 text-center">
<Reveal direction="up" blur> <Reveal direction="up" blur>
<H3 className="text-5xl md:text-8xl tracking-tighter"> <H3 className="text-3xl md:text-8xl tracking-tighter">
System-Lifecycle. System-Lifecycle.
</H3> </H3>
<LeadText className="mx-auto max-w-2xl pt-6 text-xl"> <LeadText className="mx-auto max-w-2xl pt-2 md:pt-6 text-lg md:text-xl leading-relaxed">
Die Migration von einer statischen Datei-Struktur zu einer Die Migration von einer statischen Datei-Struktur zu einer
zentralisierten Daten-Instanz eliminiert technische Schulden und zentralisierten Daten-Instanz eliminiert technische Schulden und
manuelle Fehlerquellen. Das Ergebnis ist eine wartungsfreie manuelle Fehlerquellen. Das Ergebnis ist eine wartungsfreie
@@ -445,7 +459,9 @@ export default function KLZCablesCaseStudy() {
<div className="relative block w-full overflow-visible"> <div className="relative block w-full overflow-visible">
<IframeSection <IframeSection
src="/showcase/klz-cables.com/team.html" src="/showcase/klz-cables.com/team.html"
height="1100px" height="450px"
mobileHeight="400px"
desktopHeight="1100px"
desktopWidth={1440} desktopWidth={1440}
allowScroll allowScroll
browserFrame browserFrame
@@ -465,15 +481,15 @@ export default function KLZCablesCaseStudy() {
containerVariant="wide" containerVariant="wide"
className="!pb-32" className="!pb-32"
> >
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 items-center"> <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-24 items-center">
<div className="lg:col-span-5 space-y-12"> <div className="md:col-span-6 md:order-2">
<Reveal direction="left" blur> <Reveal direction="left" blur>
<div className="space-y-6"> <div className="space-y-6">
<Label className="text-slate-400">Interaction Layer</Label> <Label className="text-slate-400">Interaction Layer</Label>
<H3 className="text-5xl md:text-7xl tracking-tighter text-slate-900"> <H3 className="text-3xl md:text-7xl tracking-tighter text-slate-900 leading-[1.1]">
Direkter Draht. Direkter Draht.
</H3> </H3>
<BodyText className="text-xl text-slate-500 font-serif italic leading-relaxed"> <BodyText className="text-lg md:text-xl text-slate-500 font-serif italic leading-relaxed">
Das Kontakt-System wurde auf maximale Reduktion getrimmt. Ein Das Kontakt-System wurde auf maximale Reduktion getrimmt. Ein
deterministischer Kanal zwischen technischem Bedarf und deterministischer Kanal zwischen technischem Bedarf und
individueller Beratung – ohne Umwege, ohne Rauschen. individueller Beratung – ohne Umwege, ohne Rauschen.
@@ -528,7 +544,9 @@ export default function KLZCablesCaseStudy() {
> >
<IframeSection <IframeSection
src="/showcase/klz-cables.com/contact.html" src="/showcase/klz-cables.com/contact.html"
height="750px" height="450px"
mobileHeight="400px"
desktopHeight="750px"
desktopWidth={1200} desktopWidth={1200}
mobileWidth={390} mobileWidth={390}
allowScroll allowScroll
@@ -545,20 +563,20 @@ export default function KLZCablesCaseStudy() {
<BackgroundGrid /> <BackgroundGrid />
<Container variant="normal" className="relative z-10"> <Container variant="normal" className="relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center text-left"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center text-left">
<div className="space-y-12"> <div className="space-y-8 md:space-y-12">
<Reveal direction="left" blur> <Reveal direction="left" blur>
<div className="space-y-4"> <div className="space-y-3 md:space-y-6">
<MonoLabel className="text-slate-400 tracking-[0.4em]"> <MonoLabel className="text-slate-400 tracking-[0.2em] md:tracking-[0.4em]">
CONSULTING // ENGINEERING CONSULTING // ENGINEERING
</MonoLabel> </MonoLabel>
<H2 className="text-6xl md:text-8xl tracking-tighter leading-none font-bold"> <H2 className="text-4xl md:text-8xl tracking-tighter leading-none font-bold">
Architektur <br /> Architektur <br />
<span className="text-slate-100">ohne Altlasten.</span> <span className="text-slate-100">ohne Altlasten.</span>
</H2> </H2>
</div> </div>
</Reveal> </Reveal>
<Reveal delay={0.2} direction="left" blur> <Reveal delay={0.2} direction="left" blur>
<BodyText className="text-2xl text-slate-500 max-w-xl font-serif italic leading-relaxed"> <BodyText className="text-xl md:text-2xl text-slate-500 max-w-xl font-serif italic leading-relaxed">
Vom Prototyp zum industriellen Standard. Ich entwickle Vom Prototyp zum industriellen Standard. Ich entwickle
digitale Infrastrukturen, die technische Freiheit und digitale Infrastrukturen, die technische Freiheit und
operative Stabilität garantieren – wartungsfrei und operative Stabilität garantieren – wartungsfrei und
@@ -567,13 +585,13 @@ export default function KLZCablesCaseStudy() {
</Reveal> </Reveal>
</div> </div>
<div className="bg-slate-50/80 backdrop-blur-sm border border-slate-100 p-10 md:p-14 rounded-[3.5rem] space-y-12 relative group shadow-sm"> <div className="bg-slate-50/80 backdrop-blur-sm border border-slate-100 p-6 md:p-14 rounded-[3.5rem] space-y-10 md:space-y-12 relative group shadow-sm">
<Reveal direction="right" blur> <Reveal direction="right" blur>
<div className="inline-flex items-center gap-3 px-4 py-2 bg-white rounded-full border border-slate-200 mb-4 font-mono text-[10px] tracking-widest text-slate-500 uppercase"> <div className="inline-flex items-center gap-2 md:gap-3 px-3 py-1.5 md:px-4 md:py-2 bg-white rounded-full border border-slate-200 mb-4 md:mb-8 font-mono text-[9px] md:text-[10px] tracking-widest text-slate-500 uppercase">
<div className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" /> <div className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
Operational Excellence Operational Excellence
</div> </div>
<div className="space-y-10"> <div className="space-y-8 md:space-y-10">
{[ {[
{ {
title: "Hardened Infrastructure", title: "Hardened Infrastructure",
@@ -588,11 +606,14 @@ export default function KLZCablesCaseStudy() {
desc: "Plugin-freie Logik für deterministische System-Sicherheit.", desc: "Plugin-freie Logik für deterministische System-Sicherheit.",
}, },
].map((item, i) => ( ].map((item, i) => (
<div key={i} className="space-y-3 group/item"> <div
<MonoLabel className="text-[10px] text-slate-400 group-hover/item:text-slate-900 transition-colors duration-500"> key={i}
className="space-y-2 md:space-y-3 group/item text-left"
>
<MonoLabel className="text-[9px] md:text-[10px] text-slate-400 group-hover/item:text-slate-900 transition-colors duration-500">
{item.title} {item.title}
</MonoLabel> </MonoLabel>
<BodyText className="text-lg font-bold text-slate-900 leading-tight"> <BodyText className="text-base md:text-lg font-bold text-slate-900 leading-tight">
{item.desc} {item.desc}
</BodyText> </BodyText>
</div> </div>
@@ -604,10 +625,10 @@ export default function KLZCablesCaseStudy() {
href="/contact" href="/contact"
variant="outline" variant="outline"
showArrow={false} showArrow={false}
className="w-full py-8 text-lg group border-2 border-slate-900 rounded-full bg-white hover:bg-slate-900 hover:text-white transition-all duration-700" className="w-full py-6 md:py-8 text-base md:text-lg group border-2 border-slate-900 rounded-full bg-white hover:bg-slate-900 hover:text-white transition-all duration-700"
> >
Jetzt anfragen Jetzt anfragen
<ArrowRight className="inline-block ml-4 w-6 h-6 group-hover:translate-x-4 transition-transform duration-700" /> <ArrowRight className="inline-block ml-3 md:ml-4 w-5 h-5 md:w-6 md:h-6 group-hover:translate-x-4 transition-transform duration-700" />
</Button> </Button>
</Reveal> </Reveal>
</div> </div>

46
apps/web/app/case-studies/page.tsx
View File

@@ -38,29 +38,31 @@ export default function CaseStudiesPage() {
variant="glass" variant="glass"
padding="none" padding="none"
techBorder techBorder
className="overflow-hidden relative group min-h-[500px] flex flex-col md:flex-row" className="overflow-hidden relative group min-h-[400px] md:min-h-[500px] flex flex-col md:flex-row"
> >
{/* Brand Gradient Background */} {/* Brand Gradient Background */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(14,165,233,0.08)_0%,transparent_50%),radial-gradient(circle_at_70%_70%,rgba(99,102,241,0.05)_0%,transparent_50%)]" /> <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(14,165,233,0.08)_0%,transparent_50%),radial-gradient(circle_at_70%_70%,rgba(99,102,241,0.05)_0%,transparent_50%)]" />
{/* Left Column: Content */} {/* Left Column: Content */}
<div className="flex-1 p-8 md:p-12 relative z-10 flex flex-col justify-between"> <div className="flex-1 p-4 md:p-12 relative z-10 flex flex-col justify-between">
<div className="space-y-8"> <div className="space-y-4 md:space-y-8">
<div className="flex items-center gap-4"> <div className="flex items-center gap-3 md:gap-4">
<img <img
src="/showcase/klz-cables.com/assets/klz-cables.com/wp-content/uploads/2024/11/white_logo_transparent_background.svg" src="/showcase/klz-cables.com/assets/klz-cables.com/wp-content/uploads/2024/11/white_logo_transparent_background.svg"
alt="KLZ Logo" alt="KLZ Logo"
className="h-8 invert opacity-80 group-hover:opacity-100 transition-opacity duration-500" className="h-6 md:h-8 invert opacity-80 group-hover:opacity-100 transition-opacity duration-500"
/> />
<div className="h-px w-12 bg-slate-100" /> <div className="h-px w-8 md:w-12 bg-slate-100" />
<Label className="text-slate-400">Case Study 2025</Label> <Label className="text-slate-400 text-[9px] md:text-[10px]">
Case Study 2025
</Label>
</div> </div>
<div className="space-y-4"> <div className="space-y-3 md:space-y-4">
<H3 className="text-4xl md:text-6xl tracking-tighter"> <H3 className="text-3xl md:text-6xl tracking-tighter">
KLZ <span className="text-slate-300">Cables</span> KLZ <span className="text-slate-300">Cables</span>
</H3> </H3>
<LeadText className="text-slate-500 text-lg md:text-xl max-w-xl leading-relaxed"> <LeadText className="text-slate-500 text-base md:text-xl max-w-xl leading-relaxed">
Engineering eines industriellen B2B-Systems mit Engineering eines industriellen B2B-Systems mit
<span className="text-slate-900 font-medium"> <span className="text-slate-900 font-medium">
{" "} {" "}
@@ -70,12 +72,12 @@ export default function CaseStudiesPage() {
</LeadText> </LeadText>
</div> </div>
<div className="flex flex-wrap gap-2 pt-2"> <div className="flex flex-wrap gap-2 pt-1 md:pt-2">
{["Next.js", "Varnish", "Asset Pipeline", "B2B DB"].map( {["Next.js", "Varnish", "Asset Pipeline", "B2B DB"].map(
(tag, i) => ( (tag, i) => (
<span <span
key={i} key={i}
className="px-2.5 py-1 border border-slate-100 bg-white/50 rounded-md text-[9px] font-mono text-slate-400 uppercase tracking-widest group-hover:border-slate-300 transition-colors duration-500" className="px-2 py-0.5 md:px-2.5 md:py-1 border border-slate-100 bg-white/50 rounded-md text-[8px] md:text-[9px] font-mono text-slate-400 uppercase tracking-widest group-hover:border-slate-300 transition-colors duration-500"
> >
{tag} {tag}
</span> </span>
@@ -84,8 +86,8 @@ export default function CaseStudiesPage() {
</div> </div>
</div> </div>
<div className="pt-12"> <div className="pt-8 md:pt-12">
<div className="inline-flex items-center gap-3 text-sm font-bold text-slate-400 group-hover:text-slate-900 transition-all duration-500"> <div className="inline-flex items-center gap-2 md:gap-3 text-[10px] md:text-sm font-bold text-slate-400 group-hover:text-slate-900 transition-all duration-500">
<span>EXPLORE PROJECT</span> <span>EXPLORE PROJECT</span>
<ArrowRight className="w-4 h-4 group-hover:translate-x-2 transition-transform duration-500" /> <ArrowRight className="w-4 h-4 group-hover:translate-x-2 transition-transform duration-500" />
</div> </div>
@@ -93,11 +95,11 @@ export default function CaseStudiesPage() {
</div> </div>
{/* Right Column: Visual/Technical Decor */} {/* Right Column: Visual/Technical Decor */}
<div className="w-full md:w-1/3 bg-slate-50 relative overflow-hidden border-t md:border-t-0 md:border-l border-slate-100"> <div className="w-full md:w-1/3 min-h-[150px] md:min-h-0 bg-slate-50 relative overflow-hidden border-t md:border-t-0 md:border-l border-slate-100">
<div className="absolute inset-0 opacity-[0.03] select-none pointer-events-none font-mono text-[8px] p-4 flex flex-col gap-1 overflow-hidden"> <div className="absolute inset-0 opacity-[0.03] select-none pointer-events-none font-mono text-[6px] md:text-[8px] p-4 flex flex-col gap-1 overflow-hidden">
{Array.from({ length: 40 }).map((_, i) => ( {Array.from({ length: 40 }).map((_, i) => (
<div key={i} className="whitespace-nowrap"> <div key={i} className="whitespace-nowrap">
{Array.from({ length: 10 }) {Array.from({ length: 15 })
.map((_, j) => ( .map((_, j) => (
<span <span
key={j} key={j}
@@ -116,7 +118,7 @@ export default function CaseStudiesPage() {
</div> </div>
{/* Abstract "Cable" lines */} {/* Abstract "Cable" lines */}
<div className="absolute inset-0 flex items-center justify-center p-12"> <div className="absolute inset-0 flex items-center justify-center p-8 md:p-12">
<div className="w-full h-full relative"> <div className="w-full h-full relative">
{[1, 2, 3].map((v) => ( {[1, 2, 3].map((v) => (
<motion.div <motion.div
@@ -131,7 +133,7 @@ export default function CaseStudiesPage() {
</div> </div>
</div> </div>
<div className="absolute bottom-8 right-8 text-[10px] font-mono text-slate-300 rotate-90 origin-right uppercase tracking-[0.3em]"> <div className="absolute bottom-4 right-4 md:bottom-8 md:right-8 text-[8px] md:text-[10px] font-mono text-slate-300 rotate-90 origin-right uppercase tracking-[0.3em]">
Industrial Grade Industrial Grade
</div> </div>
</div> </div>
@@ -149,12 +151,12 @@ export default function CaseStudiesPage() {
techBorder techBorder
className="text-center relative overflow-hidden group" className="text-center relative overflow-hidden group"
> >
<div className="relative z-10 space-y-6 py-8"> <div className="relative z-10 space-y-4 py-4 md:py-8">
<div className="flex items-center justify-center gap-3"> <div className="flex items-center justify-center gap-2 md:gap-3">
<div className="w-2 h-2 rounded-full bg-slate-300 animate-pulse" /> <div className="w-2 h-2 rounded-full bg-slate-300 animate-pulse" />
<Label className="text-slate-400">In Arbeit</Label> <Label className="text-slate-400">In Arbeit</Label>
</div> </div>
<H3 className="text-3xl text-slate-400"> <H3 className="text-2xl md:text-3xl text-slate-400">
Weitere Case Studies in Kürze. Weitere Case Studies in Kürze.
</H3> </H3>
<BodyText className="text-slate-400 max-w-md mx-auto"> <BodyText className="text-slate-400 max-w-md mx-auto">

34
apps/web/app/contact/page.tsx
View File

@@ -29,14 +29,14 @@ export default function ContactPage() {
</> </>
} }
> >
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-12 lg:gap-24">
{/* Form */} {/* Form */}
<div className="md:col-span-7"> <div className="lg:col-span-7">
<Reveal> <Reveal>
<Card <Card
variant="glass" variant="glass"
padding="large" padding="normal"
className="relative overflow-hidden" className="relative overflow-hidden p-5 md:p-12"
> >
<ContactForm /> <ContactForm />
</Card> </Card>
@@ -44,7 +44,7 @@ export default function ContactPage() {
</div> </div>
{/* Sidebar */} {/* Sidebar */}
<div className="md:col-span-5 space-y-8"> <div className="lg:col-span-5 space-y-4 md:space-y-8">
<Reveal delay={0.2}> <Reveal delay={0.2}>
<Card <Card
variant="glass" variant="glass"
@@ -52,12 +52,14 @@ export default function ContactPage() {
techBorder techBorder
className="group" className="group"
> >
<div className="space-y-4"> <div className="space-y-3 md:space-y-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div> <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
<Label className="text-slate-900">Verfügbarkeit</Label> <Label className="text-slate-900 text-xs md:text-sm">
Verfügbarkeit
</Label>
</div> </div>
<LeadText className="text-lg text-slate-400"> <LeadText className="text-lg md:text-xl text-slate-400">
Aktuell nehme ich Projekte für{" "} Aktuell nehme ich Projekte für{" "}
<span className="text-slate-900 font-bold">Q2 2026</span>{" "} <span className="text-slate-900 font-bold">Q2 2026</span>{" "}
an. an.
@@ -68,11 +70,13 @@ export default function ContactPage() {
<Reveal delay={0.3}> <Reveal delay={0.3}>
<Card variant="glass" padding="normal" className="group"> <Card variant="glass" padding="normal" className="group">
<div className="space-y-4"> <div className="space-y-3 md:space-y-4">
<Label className="text-slate-900">Direkt per E-Mail</Label> <Label className="text-slate-900 text-xs md:text-sm">
Direkt per E-Mail
</Label>
<a <a
href="mailto:marc@mintel.me" href="mailto:marc@mintel.me"
className="block text-xl md:text-2xl font-bold text-slate-900 hover:text-slate-400 transition-colors duration-500 border-b border-slate-100 hover:border-slate-400 pb-1" className="block text-lg md:text-2xl font-bold text-slate-900 hover:text-slate-400 transition-colors duration-500 border-b border-slate-100 hover:border-slate-400 pb-1"
> >
marc@mintel.me marc@mintel.me
</a> </a>
@@ -81,9 +85,11 @@ export default function ContactPage() {
</Reveal> </Reveal>
<Reveal delay={0.4}> <Reveal delay={0.4}>
<div className="p-6 space-y-3 rounded-2xl border border-slate-50 bg-slate-50/30"> <div className="p-5 md:p-6 space-y-2 md:space-y-3 rounded-2xl border border-slate-50 bg-slate-50/30">
<Label className="text-slate-400">Antwortzeit</Label> <Label className="text-slate-400 text-xs md:text-sm">
<H3 className="text-2xl text-slate-300"> Antwortzeit
</Label>
<H3 className="text-lg md:text-2xl text-slate-300">
<span className="text-slate-900">&lt; 24h</span> an Werktagen. <span className="text-slate-900">&lt; 24h</span> an Werktagen.
</H3> </H3>
</div> </div>

20
apps/web/app/globals.css
View File

@@ -24,27 +24,27 @@
} }
h1 { h1 {
@apply text-6xl md:text-8xl leading-[0.95] mb-12; @apply text-4xl md:text-8xl leading-[1.1] md:leading-[0.95] mb-6 md:mb-12;
} }
h2 { h2 {
@apply text-4xl md:text-6xl leading-tight mb-8 mt-16; @apply text-2xl md:text-6xl leading-tight mb-4 md:mb-8 mt-12 md:mt-16;
} }
h3 { h3 {
@apply text-3xl md:text-5xl leading-tight mb-6 mt-12; @apply text-xl md:text-5xl leading-tight mb-3 md:mb-6 mt-8 md:mt-12;
} }
h4 { h4 {
@apply text-2xl md:text-3xl leading-tight mb-4 mt-8; @apply text-lg md:text-3xl leading-tight mb-3 md:mb-4 mt-6 md:mt-8;
} }
p { p {
@apply mb-4 text-base leading-relaxed text-slate-700; @apply mb-4 text-sm md:text-base leading-relaxed text-slate-700;
} }
.lead { .lead {
@apply text-xl md:text-2xl text-slate-600 mb-6 leading-relaxed; @apply text-base md:text-2xl text-slate-600 mb-6 leading-relaxed;
font-weight: 400; font-weight: 400;
} }
@@ -66,7 +66,7 @@
} }
blockquote { blockquote {
@apply border-l-4 border-slate-900 pl-6 italic text-slate-700 my-8 text-xl md:text-2xl font-serif; @apply border-l-4 border-slate-900 pl-6 italic text-slate-700 my-8 text-lg md:text-2xl font-serif;
} }
/* Focus states */ /* Focus states */
@@ -92,15 +92,15 @@
} }
.container { .container {
@apply max-w-6xl mx-auto px-6 py-12; @apply max-w-6xl mx-auto px-5 md:px-6 py-8 md:py-12;
} }
.wide-container { .wide-container {
@apply max-w-7xl mx-auto px-6 py-16; @apply max-w-7xl mx-auto px-5 md:px-6 py-10 md:py-16;
} }
.narrow-container { .narrow-container {
@apply max-w-4xl mx-auto px-6 py-10; @apply max-w-4xl mx-auto px-5 md:px-6 py-6 md:py-10;
} }
.highlighter-tag { .highlighter-tag {

73
apps/web/app/page.tsx
View File

@@ -41,7 +41,7 @@ export default function LandingPage() {
borderTop borderTop
effects={<GradientMesh variant="metallic" className="opacity-70" />} effects={<GradientMesh variant="metallic" className="opacity-70" />}
> >
<div className="space-y-16 relative"> <div className="space-y-10 md:space-y-16 relative">
<Reveal> <Reveal>
<H3 className="max-w-3xl"> <H3 className="max-w-3xl">
Kein Agentur-Zirkus. <br /> Kein Agentur-Zirkus. <br />
@@ -100,7 +100,7 @@ export default function LandingPage() {
{/* Section 03: The Difference – Visual Comparison */} {/* Section 03: The Difference – Visual Comparison */}
<Section number="03" title="Der Unterschied" variant="white" borderTop> <Section number="03" title="Der Unterschied" variant="white" borderTop>
<div className="space-y-16 relative"> <div className="space-y-10 md:space-y-16 relative">
<Reveal> <Reveal>
<H3 className="max-w-3xl"> <H3 className="max-w-3xl">
Ich arbeite für das Ergebnis, <br /> Ich arbeite für das Ergebnis, <br />
@@ -135,23 +135,23 @@ export default function LandingPage() {
{/* Section 04: Target Group */} {/* Section 04: Target Group */}
<Section number="04" title="Für wen" borderTop> <Section number="04" title="Für wen" borderTop>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 relative z-10">
<Reveal> <Reveal>
<Card variant="glass" padding="normal" techBorder className="group"> <Card variant="glass" padding="normal" techBorder className="group">
<div className="space-y-6 relative overflow-hidden"> <div className="space-y-4 md:space-y-6 relative overflow-hidden">
<div className="w-16 h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center"> <div className="w-12 h-12 md:w-16 md:h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
<ConceptPrice className="w-8 h-8" /> <ConceptPrice className="w-6 h-6 md:w-8 md:h-8" />
</div> </div>
<H3 className="text-3xl"> <H3 className="text-xl md:text-3xl">
Unternehmer & <br /> Unternehmer & <br />
Geschäftsführer Geschäftsführer
</H3> </H3>
<LeadText className="text-slate-400 text-lg"> <LeadText className="text-slate-400 text-base md:text-lg">
Sie wollen eine Website, die funktioniert – ohne sich mit Sie wollen eine Website, die funktioniert – ohne sich mit
Technik beschäftigen zu müssen. Technik beschäftigen zu müssen.
</LeadText> </LeadText>
</div> </div>
<div className="pt-8 border-t border-slate-50 mt-8"> <div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8">
<Label className="group-hover:text-slate-900 transition-colors"> <Label className="group-hover:text-slate-900 transition-colors">
Perfekt für Sie Perfekt für Sie
</Label> </Label>
@@ -161,16 +161,20 @@ export default function LandingPage() {
<Reveal delay={0.2}> <Reveal delay={0.2}>
<Card variant="glass" padding="normal" techBorder className="group"> <Card variant="glass" padding="normal" techBorder className="group">
<div className="space-y-6 relative overflow-hidden"> <div className="space-y-6 relative overflow-hidden">
<H3 className="text-3xl"> <div className="w-12 h-12 md:w-16 md:h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
{/* Icon placeholder or same as above if needed */}
<ConceptWebsite className="w-6 h-6 md:w-8 md:h-8" />
</div>
<H3 className="text-xl md:text-3xl">
Marketing & <br /> Marketing & <br />
Vertrieb Vertrieb
</H3> </H3>
<LeadText className="text-slate-400 text-lg"> <LeadText className="text-slate-400 text-base md:text-lg">
Sie brauchen Landingpages und Tools, die Ergebnisse liefern. Sie brauchen Landingpages und Tools, die Ergebnisse liefern.
Schnell und zuverlässig. Schnell und zuverlässig.
</LeadText> </LeadText>
</div> </div>
<div className="pt-8 border-t border-slate-50 mt-8"> <div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8">
<Label className="group-hover:text-slate-900 transition-colors"> <Label className="group-hover:text-slate-900 transition-colors">
Perfekt für Sie Perfekt für Sie
</Label> </Label>
@@ -210,15 +214,15 @@ export default function LandingPage() {
}, },
].map((service, i) => ( ].map((service, i) => (
<Reveal key={i} delay={0.1 + i * 0.15}> <Reveal key={i} delay={0.1 + i * 0.15}>
<div className="group py-12 md:py-16 border-b border-slate-100 last:border-b-0 cursor-pointer transition-all duration-500"> <div className="group py-8 md:py-16 border-b border-slate-100 last:border-b-0 cursor-pointer transition-all duration-500">
<div className="flex flex-col md:flex-row md:items-start gap-8 md:gap-16"> <div className="flex flex-col md:flex-row md:items-start gap-6 md:gap-16">
{/* Number + Binary */} {/* Number + Binary */}
<div className="md:w-32 shrink-0"> <div className="shrink-0 flex md:block items-baseline gap-4">
<span className="text-5xl md:text-6xl font-black text-slate-100 group-hover:text-slate-200 transition-colors duration-500 tracking-tighter block leading-none"> <span className="text-4xl md:text-6xl font-black text-slate-100 group-hover:text-slate-200 transition-colors duration-500 tracking-tighter block leading-none">
{service.num} {service.num}
</span> </span>
<span <span
className="text-[8px] font-mono text-slate-200 tracking-[0.3em] mt-2 block select-none group-hover:text-blue-300 transition-colors duration-700" className="text-[8px] font-mono text-slate-200 tracking-[0.3em] mt-2 block select-none group-hover:text-blue-300 transition-colors duration-700 leading-none"
aria-hidden="true" aria-hidden="true"
> >
{service.binary} {service.binary}
@@ -226,8 +230,8 @@ export default function LandingPage() {
</div> </div>
{/* Content */} {/* Content */}
<div className="flex-1 space-y-6"> <div className="flex-1 space-y-4 md:space-y-6">
<H3 className="text-3xl md:text-4xl group-hover:translate-x-2 transition-transform duration-500"> <H3 className="text-xl md:text-4xl group-hover:translate-x-2 transition-transform duration-500">
<GlitchText <GlitchText
trigger="inView" trigger="inView"
delay={0.2 + i * 0.15} delay={0.2 + i * 0.15}
@@ -236,7 +240,7 @@ export default function LandingPage() {
{service.title} {service.title}
</GlitchText> </GlitchText>
</H3> </H3>
<BodyText className="text-slate-400 max-w-xl group-hover:text-slate-500 transition-colors duration-500"> <BodyText className="text-slate-400 text-sm md:text-base max-w-xl group-hover:text-slate-500 transition-colors duration-500">
{service.text} {service.text}
</BodyText> </BodyText>
{/* Tags */} {/* Tags */}
@@ -244,7 +248,7 @@ export default function LandingPage() {
{service.tags.map((tag, j) => ( {service.tags.map((tag, j) => (
<span <span
key={j} key={j}
className="px-3 py-1 text-[9px] font-mono uppercase tracking-widest text-slate-400 border border-slate-100 rounded-full bg-white/50 group-hover:border-slate-200 group-hover:text-slate-500 transition-all duration-500" className="px-3 py-1 text-[8px] md:text-[9px] font-mono uppercase tracking-widest text-slate-400 border border-slate-100 rounded-full bg-white/50 group-hover:border-slate-200 group-hover:text-slate-500 transition-all duration-500"
> >
{tag} {tag}
</span> </span>
@@ -253,12 +257,13 @@ export default function LandingPage() {
</div> </div>
{/* Arrow */} {/* Arrow */}
<div className="md:self-center shrink-0"> <div className="md:self-center shrink-0 pt-4 md:pt-0">
<Button <Button
href={service.href} href={service.href}
variant="ghost" variant="ghost"
size="normal" size="normal"
showArrow showArrow
className="w-full md:w-auto"
> >
Details Details
</Button> </Button>
@@ -272,36 +277,40 @@ export default function LandingPage() {
{/* Section 06: Contact */} {/* Section 06: Contact */}
<Section number="06" title="Kontakt" borderTop> <Section number="06" title="Kontakt" borderTop>
<div className="relative py-12" id="contact"> <div className="relative py-4 md:py-12" id="contact">
<Reveal> <Reveal>
<div className="space-y-16"> <div className="space-y-8 md:space-y-16">
<H1 className="text-6xl md:text-8xl"> <H1 className="text-3xl md:text-8xl">
Lassen Sie uns <br /> Lassen Sie uns <br />
<span className="text-slate-400">starten.</span> <span className="text-slate-400">starten.</span>
</H1> </H1>
<div className="flex flex-col md:flex-row gap-16 items-start relative z-10"> <div className="flex flex-col md:flex-row gap-6 md:gap-16 items-start relative z-10">
<div className="space-y-8 flex-1"> <div className="space-y-4 md:space-y-8 flex-1">
<LeadText className="text-2xl md:text-3xl text-slate-400"> <LeadText className="text-lg md:text-3xl text-slate-400">
Beschreiben Sie kurz Ihr Vorhaben. Ich melde mich{" "} Beschreiben Sie kurz Ihr Vorhaben. Ich melde mich{" "}
<span className="text-slate-900 border-b-2 border-slate-900/10"> <span className="text-slate-900 border-b-2 border-slate-900/10">
<Marker color="rgba(255,235,59,0.5)">zeitnah</Marker> <Marker color="rgba(255,235,59,0.5)">zeitnah</Marker>
</span>{" "} </span>{" "}
bei Ihnen. bei Ihnen.
</LeadText> </LeadText>
<div className="pt-4"> <div className="pt-2 md:pt-4">
<Button href="/contact" size="large"> <Button
href="/contact"
size="large"
className="w-full md:w-auto"
>
Projekt anfragen Projekt anfragen
</Button> </Button>
</div> </div>
</div> </div>
<div className="w-full md:w-72 space-y-6 p-6 glass rounded-2xl"> <div className="w-full md:w-72 space-y-4 md:space-y-6 p-6 glass rounded-2xl border border-slate-100">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div> <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
<Label className="text-slate-900">Verfügbarkeit</Label> <Label className="text-slate-900">Verfügbarkeit</Label>
</div> </div>
<BodyText className="text-base leading-snug"> <BodyText className="text-sm md:text-base leading-snug">
Aktuell nehme ich Projekte für{" "} Aktuell nehme ich Projekte für{" "}
<span className="font-bold text-slate-900">Q2 2026</span>{" "} <span className="font-bold text-slate-900">Q2 2026</span>{" "}
an. an.

81
apps/web/app/websites/page.tsx
View File

@@ -46,6 +46,7 @@ export default function WebsitesPage() {
} }
description="Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur für maximale Performance." description="Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur für maximale Performance."
backgroundSymbol="W" backgroundSymbol="W"
className="px-5 md:px-0"
/> />
{/* 01: Architektur – WIE ich baue */} {/* 01: Architektur – WIE ich baue */}
@@ -55,9 +56,9 @@ export default function WebsitesPage() {
borderTop borderTop
illustration={<SystemArchitecture className="w-24 h-24" />} illustration={<SystemArchitecture className="w-24 h-24" />}
> >
<div className="space-y-12"> <div className="space-y-8 md:space-y-12">
<Reveal> <Reveal>
<H3 className="text-3xl md:text-5xl leading-tight max-w-3xl"> <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
Systeme, nicht Broschüren. <br /> Systeme, nicht Broschüren. <br />
<span className="text-slate-400"> <span className="text-slate-400">
Jede Website ist Ingenieursarbeit. Jede Website ist Ingenieursarbeit.
@@ -65,7 +66,7 @@ export default function WebsitesPage() {
</H3> </H3>
</Reveal> </Reveal>
<Reveal delay={0.2}> <Reveal delay={0.2}>
<LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400"> <LeadText className="text-lg md:text-2xl max-w-2xl text-slate-400">
Ich entwickle Websites von Grund auf – mit modernen Frameworks, Ich entwickle Websites von Grund auf – mit modernen Frameworks,
eigener Infrastruktur und einem Deployment-Prozess, der{" "} eigener Infrastruktur und einem Deployment-Prozess, der{" "}
<span className="text-slate-900"> <span className="text-slate-900">
@@ -79,7 +80,7 @@ export default function WebsitesPage() {
{/* Tech Stack Visual */} {/* Tech Stack Visual */}
<Reveal delay={0.4}> <Reveal delay={0.4}>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
{[ {[
{ label: "Next.js", sub: "Framework" }, { label: "Next.js", sub: "Framework" },
{ label: "TypeScript", sub: "Sprache" }, { label: "TypeScript", sub: "Sprache" },
@@ -93,11 +94,11 @@ export default function WebsitesPage() {
techBorder techBorder
className="group text-center" className="group text-center"
> >
<div className="space-y-2"> <div className="space-y-1 md:space-y-2">
<Label className="text-slate-900 text-sm"> <Label className="text-slate-900 text-xs md:text-sm">
{item.label} {item.label}
</Label> </Label>
<span className="block text-[9px] font-mono text-slate-300 uppercase tracking-widest"> <span className="block text-[8px] md:text-[9px] font-mono text-slate-300 uppercase tracking-widest">
{item.sub} {item.sub}
</span> </span>
</div> </div>
@@ -124,9 +125,9 @@ export default function WebsitesPage() {
illustration={<SpeedPerformance className="w-24 h-24" />} illustration={<SpeedPerformance className="w-24 h-24" />}
effects={<GradientMesh variant="metallic" className="opacity-60" />} effects={<GradientMesh variant="metallic" className="opacity-60" />}
> >
<div className="space-y-12"> <div className="space-y-8 md:space-y-12">
<Reveal> <Reveal>
<H3 className="text-3xl md:text-5xl leading-tight max-w-3xl"> <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
Geschwindigkeit ist <br /> Geschwindigkeit ist <br />
<span className="text-slate-400"> <span className="text-slate-400">
<Marker delay={0.3} color="rgba(148,163,184,0.15)"> <Marker delay={0.3} color="rgba(148,163,184,0.15)">
@@ -135,17 +136,17 @@ export default function WebsitesPage() {
</span> </span>
</H3> </H3>
</Reveal> </Reveal>
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center"> <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-center">
<div className="md:col-span-7 space-y-8"> <div className="md:col-span-12 lg:col-span-7 space-y-6 md:space-y-8">
<Reveal delay={0.2}> <Reveal delay={0.2}>
<LeadText className="text-xl text-slate-400"> <LeadText className="text-lg md:text-xl text-slate-400">
Jede Seite wird vorab gerendert und über ein CDN ausgeliefert. Jede Seite wird vorab gerendert und über ein CDN ausgeliefert.
Das Ergebnis: Ladezeiten unter einer Sekunde. Messbar.{" "} Das Ergebnis: Ladezeiten unter einer Sekunde. Messbar.{" "}
<span className="text-slate-900">Reproduzierbar.</span> <span className="text-slate-900">Reproduzierbar.</span>
</LeadText> </LeadText>
</Reveal> </Reveal>
<Reveal delay={0.4}> <Reveal delay={0.4}>
<IconList className="space-y-4"> <IconList className="space-y-2 md:space-y-4">
{[ {[
"Server-Side Rendering für sofortige Inhalte", "Server-Side Rendering für sofortige Inhalte",
"Automatische Bild-Optimierung (WebP, AVIF)", "Automatische Bild-Optimierung (WebP, AVIF)",
@@ -153,7 +154,9 @@ export default function WebsitesPage() {
"Core Web Vitals im grünen Bereich", "Core Web Vitals im grünen Bereich",
].map((item, i) => ( ].map((item, i) => (
<IconListItem key={i} bullet> <IconListItem key={i} bullet>
<LeadText className="text-lg md:text-xl">{item}</LeadText> <LeadText className="text-base md:text-xl">
{item}
</LeadText>
</IconListItem> </IconListItem>
))} ))}
</IconList> </IconList>
@@ -165,13 +168,13 @@ export default function WebsitesPage() {
variant="glass" variant="glass"
padding="normal" padding="normal"
techBorder techBorder
className="text-center group" className="text-center group py-10 md:py-12"
> >
<div className="text-7xl md:text-8xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-700"> <div className="text-5xl md:text-8xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-700">
90+ 90+
</div> </div>
<Label className="mt-4">Lighthouse Score</Label> <Label className="mt-4">Lighthouse Score</Label>
<span className="block text-[9px] font-mono text-slate-300 mt-2 tracking-wider"> <span className="block text-[8px] md:text-[9px] font-mono text-slate-300 mt-2 tracking-wider">
PERFORMANCE · ACCESSIBILITY · SEO PERFORMANCE · ACCESSIBILITY · SEO
</span> </span>
</Card> </Card>
@@ -188,9 +191,9 @@ export default function WebsitesPage() {
borderTop borderTop
illustration={<SolidFoundation className="w-24 h-24" />} illustration={<SolidFoundation className="w-24 h-24" />}
> >
<div className="space-y-12"> <div className="space-y-8 md:space-y-12">
<Reveal> <Reveal>
<H3 className="text-3xl md:text-5xl leading-tight max-w-3xl"> <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
Keine Plugins. <br /> Keine Plugins. <br />
<span className="text-slate-400">Keine Abhängigkeiten.</span> <span className="text-slate-400">Keine Abhängigkeiten.</span>
</H3> </H3>
@@ -210,7 +213,7 @@ export default function WebsitesPage() {
<CodeSnippet variant="git" /> <CodeSnippet variant="git" />
</Reveal> </Reveal>
<Reveal delay={0.5}> <Reveal delay={0.5}>
<div className="space-y-6"> <div className="space-y-4 md:space-y-6">
<Card variant="glass" padding="normal" className="group"> <Card variant="glass" padding="normal" className="group">
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-slate-900">Versionskontrolle</Label> <Label className="text-slate-900">Versionskontrolle</Label>
@@ -246,17 +249,17 @@ export default function WebsitesPage() {
illustration={<LayerSeparation className="w-24 h-24" />} illustration={<LayerSeparation className="w-24 h-24" />}
effects={<GradientMesh variant="subtle" className="opacity-60" />} effects={<GradientMesh variant="subtle" className="opacity-60" />}
> >
<div className="space-y-12"> <div className="space-y-8 md:space-y-12">
<Reveal> <Reveal>
<H3 className="text-3xl md:text-5xl leading-tight max-w-3xl"> <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
Inhalte pflegen <br /> Inhalte pflegen <br />
<span className="text-slate-400">ohne Angst.</span> <span className="text-slate-400">ohne Angst.</span>
</H3> </H3>
</Reveal> </Reveal>
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-start"> <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-start">
<div className="md:col-span-7"> <div className="md:col-span-12 lg:col-span-7">
<Reveal delay={0.2}> <Reveal delay={0.2}>
<LeadText className="text-xl md:text-2xl text-slate-400"> <LeadText className="text-lg md:text-2xl text-slate-400">
Technik und Inhalt sind{" "} Technik und Inhalt sind{" "}
<span className="text-slate-900"> <span className="text-slate-900">
<Marker color="rgba(255,235,59,0.5)"> <Marker color="rgba(255,235,59,0.5)">
@@ -268,7 +271,7 @@ export default function WebsitesPage() {
</LeadText> </LeadText>
</Reveal> </Reveal>
</div> </div>
<div className="md:col-span-5"> <div className="md:col-span-12 lg:col-span-5">
<Reveal delay={0.4}> <Reveal delay={0.4}>
<Card <Card
variant="glass" variant="glass"
@@ -281,7 +284,7 @@ export default function WebsitesPage() {
<div className="w-2 h-2 rounded-full bg-green-500"></div> <div className="w-2 h-2 rounded-full bg-green-500"></div>
<Label className="text-slate-900">Sie dürfen</Label> <Label className="text-slate-900">Sie dürfen</Label>
</div> </div>
<BodyText className="font-medium"> <BodyText className="font-medium text-sm md:text-base">
Texte, Bilder und Inhalte frei bearbeiten. Texte, Bilder und Inhalte frei bearbeiten.
</BodyText> </BodyText>
</div> </div>
@@ -290,7 +293,7 @@ export default function WebsitesPage() {
<div className="w-2 h-2 rounded-full bg-slate-300"></div> <div className="w-2 h-2 rounded-full bg-slate-300"></div>
<Label>Geschützt</Label> <Label>Geschützt</Label>
</div> </div>
<BodyText className="line-through"> <BodyText className="line-through text-xs md:text-base">
Design, Layout, Code-Struktur. Design, Layout, Code-Struktur.
</BodyText> </BodyText>
</div> </div>
@@ -308,15 +311,15 @@ export default function WebsitesPage() {
borderTop borderTop
illustration={<TaskDone className="w-24 h-24" />} illustration={<TaskDone className="w-24 h-24" />}
> >
<div className="space-y-16"> <div className="space-y-8 md:space-y-16">
<Reveal> <Reveal>
<H3 className="text-4xl md:text-6xl tracking-tighter"> <H3 className="text-2xl md:text-5xl tracking-tighter">
Was Sie konkret <br /> Was Sie konkret <br />
<span className="text-slate-400">bekommen.</span> <span className="text-slate-400">bekommen.</span>
</H3> </H3>
</Reveal> </Reveal>
<div className="grid grid-cols-1 md:grid-cols-3 gap-12"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
{[ {[
{ {
title: "Ihr Code", title: "Ihr Code",
@@ -332,10 +335,12 @@ export default function WebsitesPage() {
}, },
].map((item, i) => ( ].map((item, i) => (
<Reveal key={i} delay={i * 0.1}> <Reveal key={i} delay={i * 0.1}>
<div className="space-y-4 group"> <div className="space-y-3 md:space-y-4 group">
<div className="w-8 h-px bg-slate-200 group-hover:w-full transition-all duration-1000" /> <div className="w-8 h-px bg-slate-200 group-hover:w-full transition-all duration-1000" />
<H4 className="text-2xl">{item.title}</H4> <H4 className="text-lg md:text-2xl font-bold">
<LeadText className="text-lg text-slate-400"> {item.title}
</H4>
<LeadText className="text-sm md:text-lg text-slate-400">
{item.desc} {item.desc}
</LeadText> </LeadText>
</div> </div>
@@ -344,14 +349,16 @@ export default function WebsitesPage() {
</div> </div>
<Reveal delay={0.4}> <Reveal delay={0.4}>
<div className="pt-16 border-t border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-8"> <div className="pt-10 md:pt-16 border-t border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-6 md:gap-8">
<div className="space-y-2"> <div className="space-y-2">
<Label>Bereit?</Label> <Label>Bereit?</Label>
<LeadText className="text-2xl"> <LeadText className="text-xl md:text-2xl">
Lassen Sie uns über Ihr Projekt sprechen. Lassen Sie uns über Ihr Projekt sprechen.
</LeadText> </LeadText>
</div> </div>
<Button href="/contact">Projekt anfragen</Button> <Button href="/contact" className="w-full md:w-auto">
Projekt anfragen
</Button>
</div> </div>
</Reveal> </Reveal>
</div> </div>

15
apps/web/src/components/Footer.tsx
View File

@@ -7,7 +7,7 @@ export const Footer: React.FC = () => {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
return ( return (
<footer className="relative py-16 mt-24 border-t border-slate-100 bg-white z-10"> <footer className="relative py-10 md:py-16 mt-8 md:mt-24 border-t border-slate-100 bg-white z-10">
{/* Tech border at top */} {/* Tech border at top */}
<div className="absolute top-0 left-0 right-0 h-px overflow-hidden"> <div className="absolute top-0 left-0 right-0 h-px overflow-hidden">
<div <div
@@ -20,14 +20,19 @@ export const Footer: React.FC = () => {
</div> </div>
<div className="narrow-container"> <div className="narrow-container">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-end">
<div className="space-y-8"> <div className="space-y-6">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Image src={LogoBlack} alt="Marc Mintel" height={72} /> <Image
src={LogoBlack}
alt="Marc Mintel"
height={64}
className="h-12 md:h-16 w-auto"
/>
</div> </div>
</div> </div>
<div className="flex flex-col md:items-end gap-4 text-sm font-mono text-slate-300 uppercase tracking-widest"> <div className="flex flex-col md:items-end gap-3 md:gap-4 text-xs md:text-sm font-mono text-slate-300 uppercase tracking-widest">
<span>© {currentYear}</span> <span>© {currentYear}</span>
<div className="flex gap-8"> <div className="flex gap-8">
<a <a

250
apps/web/src/components/Header.tsx
View File

@@ -1,5 +1,5 @@
"use client"; "use client";
import { AnimatePresence, motion } from "framer-motion";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
@@ -10,6 +10,7 @@ import IconWhite from "../assets/logo/Icon White Transparent.svg";
export const Header: React.FC = () => { export const Header: React.FC = () => {
const pathname = usePathname(); const pathname = usePathname();
const [isScrolled, setIsScrolled] = React.useState(false); const [isScrolled, setIsScrolled] = React.useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
React.useEffect(() => { React.useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
@@ -19,18 +20,44 @@ export const Header: React.FC = () => {
return () => window.removeEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll);
}, []); }, []);
// Close mobile menu on pathname change and handle body scroll lock
React.useEffect(() => {
setIsMobileMenuOpen(false);
}, [pathname]);
React.useEffect(() => {
if (isMobileMenuOpen) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "unset";
}
return () => {
document.body.style.overflow = "unset";
};
}, [isMobileMenuOpen]);
const isActive = (path: string) => pathname === path; const isActive = (path: string) => pathname === path;
const navLinks = [
{ href: "/about", label: "Über mich" },
{ href: "/websites", label: "Websites" },
{ href: "/case-studies", label: "Case Studies", prefix: true },
{ href: "/blog", label: "Blog", prefix: true },
];
return ( return (
<header <header className="sticky top-0 z-[100] w-full">
className={`sticky top-0 z-50 transition-all duration-500 ${ {/* Decoupled Background Layer - Prevents backdrop-filter parent context bugs */}
isScrolled <div
? "bg-white/70 backdrop-blur-xl border-b border-slate-100 shadow-sm shadow-slate-100/50" className={`absolute inset-0 transition-all duration-500 -z-10 ${
: "bg-white/80 backdrop-blur-md border-b border-slate-50" isScrolled
}`} ? "bg-white/70 backdrop-blur-xl border-b border-slate-100 shadow-sm shadow-slate-100/50"
> : "bg-white/80 backdrop-blur-md border-b border-slate-50"
}`}
/>
{/* Animated tech border at bottom */} {/* Animated tech border at bottom */}
<div className="absolute bottom-0 left-0 right-0 h-px overflow-hidden"> <div className="absolute bottom-0 left-0 right-0 h-px overflow-hidden pointer-events-none">
<div <div
className="h-full w-full" className="h-full w-full"
style={{ style={{
@@ -42,28 +69,24 @@ export const Header: React.FC = () => {
/> />
</div> </div>
<div className="narrow-container py-4 flex items-center justify-between"> <div className="narrow-container py-4 flex items-center justify-between relative z-10">
<Link href="/" className="flex items-center gap-4 group"> <Link href="/" className="flex items-center gap-4 group">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-12 h-12 bg-black rounded-xl flex items-center justify-center group-hover:scale-105 transition-all duration-500 shadow-sm shrink-0 relative overflow-hidden"> <div className="w-10 h-10 md:w-12 md:h-12 bg-black rounded-xl flex items-center justify-center group-hover:scale-105 transition-all duration-500 shadow-sm shrink-0 relative overflow-hidden">
<Image <Image
src={IconWhite} src={IconWhite}
alt="Marc Mintel Icon" alt="Marc Mintel Icon"
width={32} width={32}
height={32} height={32}
className="w-8 h-8 relative z-10" className="w-6 h-6 md:w-8 md:h-8 relative z-10"
/> />
</div> </div>
</div> </div>
</Link> </Link>
<nav className="flex items-center gap-8"> {/* Desktop Navigation */}
{[ <nav className="hidden md:flex items-center gap-8">
{ href: "/about", label: "Über mich" }, {navLinks.map((link) => {
{ href: "/websites", label: "Websites" },
{ href: "/case-studies", label: "Case Studies", prefix: true },
{ href: "/blog", label: "Blog", prefix: true },
].map((link) => {
const active = link.prefix const active = link.prefix
? isActive(link.href) || pathname?.startsWith(`${link.href}/`) ? isActive(link.href) || pathname?.startsWith(`${link.href}/`)
: isActive(link.href); : isActive(link.href);
@@ -97,7 +120,196 @@ export const Header: React.FC = () => {
Anfrage Anfrage
</Link> </Link>
</nav> </nav>
{/* Mobile Toggle */}
<button
className="md:hidden relative z-[110] p-2 w-10 h-10 flex items-center justify-center rounded-xl bg-slate-900 text-white active:scale-90 transition-all duration-300 shadow-lg shadow-slate-200"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
aria-label="Toggle Menu"
>
<div className="w-5 h-3.5 relative flex flex-col justify-between">
<motion.span
animate={
isMobileMenuOpen ? { rotate: 45, y: 7 } : { rotate: 0, y: 0 }
}
transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
className="w-full h-0.5 bg-current rounded-full origin-center"
/>
<motion.span
animate={
isMobileMenuOpen ? { opacity: 0, x: -10 } : { opacity: 1, x: 0 }
}
transition={{ duration: 0.2 }}
className="w-full h-0.5 bg-current rounded-full"
/>
<motion.span
animate={
isMobileMenuOpen ? { rotate: -45, y: -7 } : { rotate: 0, y: 0 }
}
transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
className="w-full h-0.5 bg-current rounded-full origin-center"
/>
</div>
</button>
</div> </div>
{/* Mobile Navigation - Bottom-Anchored Control Center */}
<AnimatePresence>
{isMobileMenuOpen && (
<React.Fragment key="mobile-control-center">
{/* Dimmed Backdrop */}
<motion.div
key="cc-backdrop"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.25 }}
onClick={() => setIsMobileMenuOpen(false)}
className="fixed inset-0 z-[101] bg-black/30 backdrop-blur-sm md:hidden"
/>
{/* Bottom Sheet */}
<motion.div
key="cc-sheet"
initial={{ y: "100%" }}
animate={{ y: 0 }}
exit={{ y: "100%" }}
transition={{
type: "spring",
stiffness: 350,
damping: 30,
mass: 0.8,
}}
drag="y"
dragConstraints={{ top: 0, bottom: 0 }}
dragElastic={0.15}
onDragEnd={(_, info) => {
if (info.offset.y > 80 || info.velocity.y > 300) {
setIsMobileMenuOpen(false);
}
}}
className="fixed inset-x-0 bottom-0 z-[102] md:hidden bg-white rounded-t-[2rem] shadow-[0_-8px_40px_rgba(0,0,0,0.12)] flex flex-col max-h-[85vh] overflow-hidden"
>
{/* Grab Handle */}
<div className="flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing">
<div className="w-10 h-1 bg-slate-200 rounded-full" />
</div>
{/* Status Bar */}
<div className="px-6 py-3 flex justify-between items-center border-b border-slate-100/80">
<div className="flex items-center gap-2 text-[9px] font-mono font-bold tracking-[0.15em] text-slate-400 uppercase">
<div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
Online
</div>
<div className="text-[9px] font-mono font-bold tracking-widest text-slate-400 uppercase">
{pathname === "/"
? "HOME"
: pathname.toUpperCase().replace(/^\//, "")}
</div>
</div>
{/* Tiled Navigation Grid */}
<div className="px-5 pt-5 pb-3 flex-1 overflow-y-auto">
<div className="grid grid-cols-2 gap-2.5">
{[
{ href: "/about", label: "Über mich", sub: "Architect" },
{ href: "/websites", label: "Websites", sub: "Systems" },
{
href: "/case-studies",
label: "Cases",
sub: "Solutions",
prefix: true,
},
{
href: "/blog",
label: "Blog",
sub: "Insights",
prefix: true,
},
].map((item, i) => {
const active = item.prefix
? pathname?.startsWith(item.href)
: pathname === item.href;
return (
<motion.div
key={item.href}
initial={{ opacity: 0, scale: 0.85, y: 15 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{
delay: 0.05 + i * 0.04,
type: "spring",
stiffness: 400,
damping: 25,
}}
whileTap={{ scale: 0.95 }}
>
<Link
href={item.href}
onClick={() => setIsMobileMenuOpen(false)}
className={`relative flex flex-col justify-center p-6 h-[110px] rounded-2xl border transition-all duration-200 ${
active
? "bg-slate-50 border-slate-200 ring-1 ring-slate-200"
: "bg-white border-slate-100 active:bg-slate-50"
}`}
>
<div>
<span className="text-[15px] font-black tracking-tight text-slate-900 block leading-tight mb-1">
{item.label}
</span>
<span className="text-[9px] font-mono font-bold text-slate-400 uppercase tracking-[0.2em]">
{item.sub}
</span>
</div>
{active && (
<div className="absolute top-4 right-4 w-1.5 h-1.5 rounded-full bg-slate-900" />
)}
</Link>
</motion.div>
);
})}
</div>
</div>
{/* Primary CTA */}
<div className="px-5 pb-5 pt-2">
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.25, type: "spring", stiffness: 300 }}
whileTap={{ scale: 0.97 }}
>
<Link
href="/contact"
onClick={() => setIsMobileMenuOpen(false)}
className="flex items-center justify-between w-full p-4 bg-slate-900 text-white rounded-2xl active:bg-slate-800 transition-colors"
>
<span className="text-[13px] font-bold uppercase tracking-[0.15em]">
Projekt anfragen
</span>
<svg
className="w-4 h-4 text-slate-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
d="M14 5l7 7m0 0l-7 7m7-7H3"
/>
</svg>
</Link>
</motion.div>
</div>
{/* Safe-Area Spacer (iOS home indicator) */}
<div className="h-[env(safe-area-inset-bottom,0px)]" />
</motion.div>
</React.Fragment>
)}
</AnimatePresence>
</header> </header>
); );
}; };

57
apps/web/src/components/Hero.tsx
View File

@@ -1,54 +1,69 @@
import { BookOpen, Code2, Terminal, Wrench } from 'lucide-react'; import { BookOpen, Code2, Terminal, Wrench } from "lucide-react";
import * as React from 'react'; import * as React from "react";
export const Hero: React.FC = () => { export const Hero: React.FC = () => {
return ( return (
<section className="relative bg-slate-900 text-white py-20 md:py-24 overflow-hidden"> <section className="relative bg-slate-900 text-white py-16 md:py-24 overflow-hidden text-center">
{/* Background pattern */} {/* Background pattern */}
<div className="absolute inset-0 opacity-10"> <div className="absolute inset-0 opacity-10">
<div className="absolute inset-0" style={{ <div
backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)', className="absolute inset-0"
backgroundSize: '40px 40px' style={{
}} /> backgroundImage:
"radial-gradient(circle at 1px 1px, white 1px, transparent 0)",
backgroundSize: "32px 32px",
}}
/>
</div> </div>
<div className="container relative z-10"> <div className="container relative z-10">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto">
{/* Main heading */} {/* Main heading */}
<h1 className="text-4xl md:text-6xl font-bold mb-6 animate-slide-up"> <h1 className="text-4xl md:text-6xl font-bold mb-4 md:mb-6 animate-slide-up leading-tight">
Digital Problem Solver Digital Problem Solver
</h1> </h1>
<p className="text-xl md:text-2xl text-slate-300 mb-8 leading-relaxed animate-fade-in"> <p className="text-lg md:text-2xl text-slate-300 mb-8 leading-relaxed animate-fade-in px-4 md:px-0">
I work on Digital problems and build tools, scripts, and systems to solve them. I work on Digital problems and build tools, scripts, and systems to
solve them.
</p> </p>
{/* Quick stats or focus areas */} {/* Quick stats or focus areas */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12 animate-fade-in"> <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-12 animate-fade-in">
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300"> <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<Code2 className="mx-auto mb-3 text-slate-400" size={28} /> <Code2 className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">Code</div> <div className="text-xs font-bold uppercase tracking-widest text-slate-300">
Code
</div>
</div> </div>
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300"> <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<Wrench className="mx-auto mb-3 text-slate-400" size={28} /> <Wrench className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">Tools</div> <div className="text-xs font-bold uppercase tracking-widest text-slate-300">
Tools
</div>
</div> </div>
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300"> <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<Terminal className="mx-auto mb-3 text-slate-400" size={28} /> <Terminal className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">Automation</div> <div className="text-xs font-bold uppercase tracking-widest text-slate-300">
Automation
</div>
</div> </div>
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300"> <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<BookOpen className="mx-auto mb-3 text-slate-400" size={28} /> <BookOpen className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">Learning</div> <div className="text-xs font-bold uppercase tracking-widest text-slate-300">
Learning
</div>
</div> </div>
</div> </div>
{/* Topics */} {/* Topics */}
<div className="mt-8 text-sm text-slate-400 animate-fade-in"> <div className="mt-8 text-sm text-slate-400 animate-fade-in">
<span className="font-semibold text-slate-300">Topics:</span> Vibe coding with AI • Debugging • Mac tools • Automation • Small scripts • Learning notes • FOSS <span className="font-semibold text-slate-300">Topics:</span> Vibe
coding with AI • Debugging • Mac tools • Automation • Small scripts
• Learning notes • FOSS
</div> </div>
</div> </div>
</div> </div>
</section> </section>
); );
}; };

38
apps/web/src/components/HeroSection.tsx
View File

@@ -20,17 +20,17 @@ export const HeroSection: React.FC = () => {
const opacity = useTransform(scrollY, [0, 600], [1, 0]); const opacity = useTransform(scrollY, [0, 600], [1, 0]);
return ( return (
<section className="relative min-h-[100vh] flex items-center justify-center overflow-hidden bg-white"> <section className="relative min-h-[85dvh] md:min-h-[100dvh] flex items-center justify-center overflow-hidden bg-white px-5 md:px-0">
{/* 1. The Binary Architecture (Background) */} {/* 1. The Binary Architecture (Background) */}
<div className="absolute inset-0 z-0"> <div className="absolute inset-0 z-0">
<AbstractCircuit /> <AbstractCircuit />
</div> </div>
{/* 2. Content Layer */} {/* 2. Content Layer */}
<div className="relative z-10 container mx-auto px-6 h-full flex flex-col justify-center items-center"> <div className="relative z-10 container mx-auto h-full flex flex-col justify-center items-center">
<motion.div <motion.div
style={{ y, opacity }} style={{ y, opacity }}
className="text-center relative max-w-[90vw]" className="text-center relative max-w-full md:max-w-[90vw]"
> >
{/* Architectural Coordinate Labels */} {/* Architectural Coordinate Labels */}
<div className="absolute -left-20 top-0 hidden xl:flex flex-col gap-8 opacity-20 pointer-events-none"> <div className="absolute -left-20 top-0 hidden xl:flex flex-col gap-8 opacity-20 pointer-events-none">
@@ -47,19 +47,19 @@ export const HeroSection: React.FC = () => {
initial={{ opacity: 0, scale: 0.95 }} initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 1, delay: 0.2 }} transition={{ duration: 1, delay: 0.2 }}
className="mb-10 inline-flex items-center gap-4 px-6 py-2 border border-slate-100 bg-white/40 backdrop-blur-sm rounded-full" className="mb-4 md:mb-10 inline-flex items-center gap-3 md:gap-4 px-4 md:px-6 py-2 border border-slate-100 bg-white/40 backdrop-blur-sm rounded-full"
> >
<div className="flex gap-1"> <div className="flex gap-1">
<div className="w-1 h-1 rounded-full bg-blue-500 animate-pulse" /> <div className="w-1 h-1 rounded-full bg-blue-500 animate-pulse" />
<div className="w-1 h-1 rounded-full bg-blue-300 animate-pulse delay-100" /> <div className="w-1 h-1 rounded-full bg-blue-300 animate-pulse delay-100" />
</div> </div>
<span className="text-[10px] font-mono font-bold tracking-[0.4em] text-slate-500 uppercase"> <span className="text-[9px] md:text-[10px] font-mono font-bold tracking-[0.3em] md:tracking-[0.4em] text-slate-500 uppercase">
Digital_Architect // v.2026 Digital_Architect // v.2026
</span> </span>
</motion.div> </motion.div>
{/* Headline */} {/* Headline */}
<h1 className="text-7xl md:text-[11rem] font-black tracking-tighter leading-[0.8] text-slate-900 mb-12 uppercase"> <h1 className="text-3xl md:text-[11rem] font-black tracking-tighter leading-[0.9] md:leading-[0.8] text-slate-900 mb-6 md:mb-12 uppercase">
<div className="block"> <div className="block">
<GlitchText delay={0.5} duration={1.2}> <GlitchText delay={0.5} duration={1.2}>
Websites Websites
@@ -80,20 +80,26 @@ export const HeroSection: React.FC = () => {
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1, delay: 0.8 }} transition={{ duration: 1, delay: 0.8 }}
className="flex flex-col items-center gap-12" className="flex flex-col items-center gap-6 md:gap-12"
> >
<p className="text-xl md:text-3xl text-slate-400 font-medium max-w-2xl leading-relaxed"> <p className="text-base md:text-3xl text-slate-400 font-medium max-w-2xl leading-relaxed px-4">
Ein Entwickler. Ein Ansprechpartner. <br /> Ein Entwickler. Ein Ansprechpartner.{" "}
<br className="hidden md:block" />
<span className="text-slate-900 font-bold tracking-tight"> <span className="text-slate-900 font-bold tracking-tight">
Systematische Architekturen für das Web. Systematische Architekturen für das Web.
</span> </span>
</p> </p>
<div className="flex flex-wrap items-center justify-center gap-6"> <div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-6 w-full px-5 md:px-0">
<Button href="/contact" size="large"> <Button href="/contact" size="large" className="w-full md:w-auto">
Projekt anfragen Projekt anfragen
</Button> </Button>
<Button href="/websites" variant="outline" size="large"> <Button
href="/websites"
variant="outline"
size="large"
className="w-full md:w-auto"
>
Prozess ansehen Prozess ansehen
</Button> </Button>
</div> </div>
@@ -102,13 +108,13 @@ export const HeroSection: React.FC = () => {
</div> </div>
{/* 3. Blueprint Frame (Decorative Borders) */} {/* 3. Blueprint Frame (Decorative Borders) */}
<div className="absolute inset-0 pointer-events-none border-[1px] border-slate-100 m-8 opacity-40" /> <div className="absolute inset-0 pointer-events-none border-[1px] border-slate-100 m-4 md:m-8 opacity-40 md:opacity-40" />
<div className="absolute top-8 left-8 p-4 hidden md:block opacity-20 transform -rotate-90 origin-top-left transition-opacity hover:opacity-100 group"> <div className="absolute top-8 left-8 p-4 hidden md:block opacity-20 transform -rotate-90 origin-top-left transition-opacity hover:opacity-100 group">
<span className="text-[10px] font-mono tracking-widest text-slate-400"> <span className="text-[10px] font-mono tracking-widest text-slate-400">
POS_TRANSMISSION_001 POS_TRANSMISSION_001
</span> </span>
</div> </div>
<div className="absolute bottom-8 right-8 p-4 hidden md:block opacity-20 transition-opacity hover:opacity-100"> <div className="absolute bottom-4 right-4 md:bottom-8 md:right-8 p-4 opacity-20 transition-opacity hover:opacity-100 scale-75 md:scale-100 origin-bottom-right">
<span className="text-[10px] font-mono tracking-widest text-slate-400"> <span className="text-[10px] font-mono tracking-widest text-slate-400">
EST_2026 // M-ARCH EST_2026 // M-ARCH
</span> </span>
@@ -116,10 +122,10 @@ export const HeroSection: React.FC = () => {
{/* 4. Scroll Indicator */} {/* 4. Scroll Indicator */}
<motion.div <motion.div
className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 opacity-40" className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 opacity-40"
style={{ opacity }} style={{ opacity }}
> >
<div className="w-[1px] h-12 bg-slate-200" /> <div className="w-[1px] h-8 md:h-12 bg-slate-200" />
<span className="text-[9px] font-mono uppercase tracking-[0.3em] text-slate-400"> <span className="text-[9px] font-mono uppercase tracking-[0.3em] text-slate-400">
Scroll Scroll
</span> </span>

23
apps/web/src/components/IframeSection.tsx
View File

@@ -27,6 +27,8 @@ interface IframeSectionProps {
dynamicGlow?: boolean; dynamicGlow?: boolean;
minHeight?: number; minHeight?: number;
mobileWidth?: number; mobileWidth?: number;
mobileHeight?: string;
desktopHeight?: string;
} }
import PropTypes from "prop-types"; import PropTypes from "prop-types";
@@ -129,6 +131,8 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
dynamicGlow = true, dynamicGlow = true,
minHeight = 400, minHeight = 400,
mobileWidth = 390, mobileWidth = 390,
mobileHeight,
desktopHeight,
}) => { }) => {
const containerRef = React.useRef<HTMLDivElement>(null); const containerRef = React.useRef<HTMLDivElement>(null);
const iframeRef = React.useRef<HTMLIFrameElement>(null); const iframeRef = React.useRef<HTMLIFrameElement>(null);
@@ -264,7 +268,20 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
return match ? parseFloat(match[1]) : null; return match ? parseFloat(match[1]) : null;
}; };
const baseNumericHeight = parseNumericHeight(height); const [isMobile, setIsMobile] = React.useState(false);
React.useEffect(() => {
const checkMobile = () => setIsMobile(window.innerWidth < 768);
checkMobile();
window.addEventListener("resize", checkMobile);
return () => window.removeEventListener("resize", checkMobile);
}, []);
const activeHeight = isMobile
? mobileHeight || height
: desktopHeight || height;
const baseNumericHeight = parseNumericHeight(activeHeight);
const finalScaledHeight = clipHeight const finalScaledHeight = clipHeight
? clipHeight * scale ? clipHeight * scale
: baseNumericHeight : baseNumericHeight
@@ -273,11 +290,11 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
const chassisStyle = { const chassisStyle = {
height: height:
height === "100%" activeHeight === "100%"
? "100%" ? "100%"
: finalScaledHeight : finalScaledHeight
? `${finalScaledHeight + headerHeightPx}px` ? `${finalScaledHeight + headerHeightPx}px`
: `calc(${height} + ${headerHeightPx}px)`, : `calc(${activeHeight} + ${headerHeightPx}px)`,
minHeight: minHeight ? `${minHeight}px` : undefined, minHeight: minHeight ? `${minHeight}px` : undefined,
}; };

14
apps/web/src/components/Layout.tsx
View File

@@ -44,9 +44,9 @@ export const Card: React.FC<CardProps> = ({
const paddings = { const paddings = {
none: "p-0", none: "p-0",
small: "p-6 md:p-8", small: "p-4 md:p-8",
normal: "p-8 md:p-10", normal: "p-5 md:p-10",
large: "p-10 md:p-12", large: "p-6 md:p-12",
}; };
const [hexId, setHexId] = React.useState("0x0000"); const [hexId, setHexId] = React.useState("0x0000");
@@ -103,7 +103,13 @@ export const Container: React.FC<{
}; };
return ( return (
<div className={cn("mx-auto px-6 w-full", variants[variant], className)}> <div
className={cn(
"mx-auto px-5 md:px-6 w-full",
variants[variant],
className,
)}
>
{children} {children}
</div> </div>
); );

18
apps/web/src/components/MediumCard.tsx
View File

@@ -29,18 +29,18 @@ export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
variant="glass" variant="glass"
padding="normal" padding="normal"
techBorder={false} techBorder={false}
className="relative overflow-hidden transition-all duration-300 border-slate-100 hover:border-slate-300 bg-white/30 backdrop-blur-sm" className="relative overflow-hidden transition-all duration-300 border-slate-100 hover:border-slate-300 bg-white/30 backdrop-blur-sm p-5 md:p-6"
> >
<div className="space-y-4"> <div className="space-y-3 md:space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<time className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400"> <time className="text-[9px] md:text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
{formattedDate} {formattedDate}
</time> </time>
<div className="flex gap-2"> <div className="flex gap-1.5 md:gap-2">
{tags?.slice(0, 2).map((tag) => ( {tags?.slice(0, 2).map((tag) => (
<span <span
key={tag} key={tag}
className="text-[9px] font-mono text-slate-300 uppercase" className="text-[8px] md:text-[9px] font-mono text-slate-300 uppercase"
> >
#{tag} #{tag}
</span> </span>
@@ -48,16 +48,16 @@ export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-1.5 md:space-y-2">
<h3 className="text-2xl font-bold text-slate-900 tracking-tight leading-tight group-hover:text-black transition-colors"> <h3 className="text-xl md:text-2xl font-bold text-slate-900 tracking-tight leading-tight group-hover:text-black transition-colors">
{title} {title}
</h3> </h3>
<p className="text-base text-slate-500 font-serif italic leading-relaxed line-clamp-2"> <p className="text-sm md:text-base text-slate-500 font-serif italic leading-relaxed line-clamp-2">
{description} {description}
</p> </p>
</div> </div>
<div className="pt-2 flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-all"> <div className="pt-1 md:pt-2 flex items-center gap-2 text-[9px] md:text-[10px] font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-all">
<span>Beitrag öffnen</span> <span>Beitrag öffnen</span>
<ArrowRight className="w-3 h-3 translate-x-0 group-hover:translate-x-1 transition-transform" /> <ArrowRight className="w-3 h-3 translate-x-0 group-hover:translate-x-1 transition-transform" />
</div> </div>

14
apps/web/src/components/PageHeader.tsx
View File

@@ -23,7 +23,7 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
return ( return (
<section <section
className={cn( className={cn(
"narrow-container relative", "narrow-container relative overflow-hidden md:overflow-visible",
isBlog isBlog
? "pt-32 pb-12 md:pt-48 md:pb-16" ? "pt-32 pb-12 md:pt-48 md:pb-16"
: "pt-24 pb-16 md:pt-40 md:pb-24", : "pt-24 pb-16 md:pt-40 md:pb-24",
@@ -35,8 +35,8 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
className={cn( className={cn(
"absolute font-bold text-slate-50 select-none -z-10 opacity-40 tracking-tighter leading-none", "absolute font-bold text-slate-50 select-none -z-10 opacity-40 tracking-tighter leading-none",
isBlog isBlog
? "-left-8 top-12 text-[12rem] md:text-[16rem]" ? "-left-4 md:-left-8 top-12 text-[10rem] md:text-[16rem]"
: "-left-24 -top-12 text-[20rem] md:text-[24rem]", : "-left-12 md:-left-24 -top-8 md:-top-12 text-[15rem] md:text-[24rem]",
)} )}
> >
{backgroundSymbol} {backgroundSymbol}
@@ -51,13 +51,13 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
)} )}
<div <div
className={cn("space-y-6 md:space-y-8 relative", isBlog && "max-w-7xl")} className={cn("space-y-4 md:space-y-8 relative", isBlog && "max-w-7xl")}
> >
<Reveal> <Reveal>
<h1 <h1
className={cn( className={cn(
"font-bold text-slate-900 tracking-tighter leading-[1.1]", "font-bold text-slate-900 tracking-tighter leading-[1.1]",
isBlog ? "text-4xl md:text-6xl" : "text-5xl md:text-7xl", isBlog ? "text-xl md:text-6xl" : "text-2xl md:text-7xl",
)} )}
> >
{title} {title}
@@ -70,8 +70,8 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
className={cn( className={cn(
"font-serif italic text-slate-400 leading-relaxed", "font-serif italic text-slate-400 leading-relaxed",
isBlog isBlog
? "text-lg md:text-xl max-w-xl" ? "text-sm md:text-xl max-w-xl"
: "text-xl md:text-2xl max-w-2xl", : "text-base md:text-2xl max-w-2xl",
)} )}
> >
{description} {description}

62
apps/web/src/components/Section.tsx
View File

@@ -49,7 +49,7 @@ export const Section: React.FC<SectionProps> = ({
return ( return (
<section <section
className={cn( className={cn(
"relative py-24 md:py-40 group overflow-hidden", "relative py-6 md:py-40 group overflow-hidden",
bgClass, bgClass,
borderTopClass, borderTopClass,
borderBottomClass, borderBottomClass,
@@ -81,41 +81,43 @@ export const Section: React.FC<SectionProps> = ({
{effects} {effects}
<div className={cn("relative z-10", containerClass)}> <div className={cn("relative z-10", containerClass)}>
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24"> <div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-24">
{/* Sidebar: Number & Title (Only if provided) */} {/* Sidebar: Number & Title (Only if provided) */}
{(number || title || illustration) && ( {(number || title || illustration) && (
<div className="md:col-span-3"> <div className="md:col-span-3">
<div className="md:sticky md:top-40 space-y-8"> <div className="md:sticky md:top-40 flex flex-col gap-4 md:gap-8">
{number && ( <div className="flex items-end md:flex-col md:items-start gap-6 md:gap-8">
<Reveal delay={delay}> {number && (
<span className="block text-7xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter relative"> <Reveal delay={delay}>
{number} <span className="block text-4xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter relative">
{/* Subtle binary overlay on number */} {number}
<span {/* Subtle binary overlay on number */}
className="absolute top-1 left-0 text-[8px] font-mono text-slate-200/30 tracking-wider leading-none select-none pointer-events-none" <span
aria-hidden="true" className="absolute -top-1 md:top-1 left-0 text-[7px] md:text-[8px] font-mono text-slate-200/30 tracking-wider leading-none select-none pointer-events-none"
> aria-hidden="true"
{parseInt(number || "0") >
.toString(2) {parseInt(number || "0")
.padStart(8, "0")} .toString(2)
.padStart(8, "0")}
</span>
</span> </span>
</span> </Reveal>
</Reveal> )}
)} {title && (
{title && ( <Reveal delay={delay + 0.1}>
<Reveal delay={delay + 0.1}> <div className="flex items-center gap-3 md:gap-4 mb-2 md:mb-0">
<div className="flex items-center gap-4"> {/* Animated dot indicator */}
{/* Animated dot indicator */} <div className="w-1.5 h-1.5 rounded-full bg-slate-300 animate-circuit-pulse shrink-0" />
<div className="w-1.5 h-1.5 rounded-full bg-slate-300 animate-circuit-pulse shrink-0" /> <Label className="text-slate-900 text-[9px] md:text-[10px] tracking-[0.3em] md:tracking-[0.4em]">
<Label className="text-slate-900 text-[10px] tracking-[0.4em]"> {title}
{title} </Label>
</Label> </div>
</div> </Reveal>
</Reveal> )}
)} </div>
{illustration && ( {illustration && (
<Reveal delay={delay + 0.2}> <Reveal delay={delay + 0.2}>
<div className="pt-8 opacity-100 group-hover:scale-105 transition-transform duration-1000 ease-out origin-left grayscale hover:grayscale-0"> <div className="pt-2 md:pt-8 opacity-100 group-hover:scale-105 transition-transform duration-1000 ease-out origin-left grayscale hover:grayscale-0">
{illustration} {illustration}
</div> </div>
</Reveal> </Reveal>

54
apps/web/src/components/Typography.tsx
View File

@@ -1,4 +1,4 @@
import * as React from 'react'; import * as React from "react";
interface TypographyProps { interface TypographyProps {
children: React.ReactNode; children: React.ReactNode;
@@ -6,49 +6,77 @@ interface TypographyProps {
} }
export const H1: React.FC<TypographyProps> = ({ children, className = "" }) => ( export const H1: React.FC<TypographyProps> = ({ children, className = "" }) => (
<h1 className={`text-5xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-[1.1] ${className}`}> <h1
className={`text-4xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-[1.1] ${className}`}
>
{children} {children}
</h1> </h1>
); );
export const H2: React.FC<TypographyProps> = ({ children, className = "" }) => ( export const H2: React.FC<TypographyProps> = ({ children, className = "" }) => (
<h2 className={`text-3xl md:text-5xl font-bold text-slate-900 tracking-tighter leading-tight ${className}`}> <h2
className={`text-xl md:text-5xl font-bold text-slate-900 tracking-tighter leading-tight ${className}`}
>
{children} {children}
</h2> </h2>
); );
export const H3: React.FC<TypographyProps> = ({ children, className = "" }) => ( export const H3: React.FC<TypographyProps> = ({ children, className = "" }) => (
<h3 className={`text-2xl md:text-4xl font-bold text-slate-900 tracking-tight leading-tight ${className}`}> <h3
className={`text-lg md:text-4xl font-bold text-slate-900 tracking-tight leading-tight ${className}`}
>
{children} {children}
</h3> </h3>
); );
export const H4: React.FC<TypographyProps> = ({ children, className = "" }) => ( export const H4: React.FC<TypographyProps> = ({ children, className = "" }) => (
<h4 className={`text-xl md:text-2xl font-bold text-slate-900 tracking-tight ${className}`}> <h4
className={`text-base md:text-2xl font-bold text-slate-900 tracking-tight ${className}`}
>
{children} {children}
</h4> </h4>
); );
export const LeadText: React.FC<TypographyProps> = ({ children, className = "" }) => ( export const LeadText: React.FC<TypographyProps> = ({
<p className={`text-lg md:text-xl font-serif italic text-slate-500 leading-relaxed ${className}`}> children,
className = "",
}) => (
<p
className={`text-sm md:text-xl font-serif italic text-slate-500 leading-relaxed ${className}`}
>
{children} {children}
</p> </p>
); );
export const BodyText: React.FC<TypographyProps> = ({ children, className = "" }) => ( export const BodyText: React.FC<TypographyProps> = ({
<p className={`text-base text-slate-500 leading-relaxed ${className}`}> children,
className = "",
}) => (
<p
className={`text-sm md:text-base text-slate-500 leading-relaxed ${className}`}
>
{children} {children}
</p> </p>
); );
export const Label: React.FC<TypographyProps> = ({ children, className = "" }) => ( export const Label: React.FC<TypographyProps> = ({
<span className={`text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400 block ${className}`}> children,
className = "",
}) => (
<span
className={`text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400 block ${className}`}
>
{children} {children}
</span> </span>
); );
export const MonoLabel: React.FC<TypographyProps> = ({ children, className = "" }) => ( export const MonoLabel: React.FC<TypographyProps> = ({
<span className={`text-[10px] font-mono uppercase tracking-[0.2em] text-slate-400 block ${className}`}> children,
className = "",
}) => (
<span
className={`text-[10px] font-mono uppercase tracking-[0.2em] text-slate-400 block ${className}`}
>
{children} {children}
</span> </span>
); );

20
apps/web/src/components/blog/BlogCommandBar.tsx
View File

@@ -24,30 +24,30 @@ export const BlogCommandBar: React.FC<BlogCommandBarProps> = ({
return ( return (
<div <div
className={cn( className={cn(
"w-full max-w-2xl mx-auto flex flex-col items-center space-y-6 px-4 md:px-0", "w-full max-w-2xl mx-auto flex flex-col items-center space-y-4 md:space-y-6 px-0",
className, className,
)} )}
> >
{/* Command Input Area */} {/* Command Input Area */}
<div className="relative group w-full"> <div className="relative group w-full px-0 sm:px-4 md:px-0">
{/* Glow Effect */} {/* Glow Effect */}
<div className="absolute -inset-0.5 bg-gradient-to-r from-slate-200 to-slate-100 rounded-2xl blur opacity-30 group-hover:opacity-100 transition duration-500" /> <div className="absolute -inset-0.5 bg-gradient-to-r from-slate-200 to-slate-100 rounded-2xl blur opacity-20 group-hover:opacity-100 transition duration-500" />
<div className="relative flex items-center bg-white rounded-2xl border border-slate-200 p-2 shadow-sm transition-all focus-within:ring-2 focus-within:ring-slate-100 focus-within:border-slate-300"> <div className="relative flex items-center bg-white rounded-2xl border border-slate-200 p-1.5 md:p-2 shadow-sm transition-all focus-within:ring-2 focus-within:ring-slate-100 focus-within:border-slate-300">
<div className="pl-4 text-slate-400"> <div className="pl-3 md:pl-4 text-slate-400">
<Search className="w-5 h-5" /> <Search className="w-4 h-4 md:w-5 md:h-5" />
</div> </div>
<input <input
type="text" type="text"
value={searchQuery} value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)} onChange={(e) => onSearchChange(e.target.value)}
placeholder="Search posts..." placeholder="Search posts..."
className="w-full bg-transparent px-4 py-3 text-lg text-slate-900 placeholder:text-slate-300 outline-none font-bold" className="w-full bg-transparent px-3 md:px-4 py-2 md:py-3 text-base md:text-lg text-slate-900 placeholder:text-slate-300 outline-none font-bold"
/> />
{searchQuery && ( {searchQuery && (
<button <button
onClick={() => onSearchChange("")} onClick={() => onSearchChange("")}
className="mr-2 px-3 py-1.5 bg-slate-100 hover:bg-slate-200 rounded-lg text-[10px] font-bold uppercase tracking-wider text-slate-500 hover:text-slate-900 transition-colors" className="mr-2 px-2.5 py-1 md:px-3 md:py-1.5 bg-slate-100 hover:bg-slate-200 rounded-lg text-[9px] md:text-[10px] font-bold uppercase tracking-wider text-slate-500 hover:text-slate-900 transition-colors"
> >
Clear Clear
</button> </button>
@@ -56,7 +56,7 @@ export const BlogCommandBar: React.FC<BlogCommandBarProps> = ({
</div> </div>
{/* Tag Command Row */} {/* Tag Command Row */}
<div className="flex flex-wrap items-center justify-center gap-2"> <div className="flex flex-wrap items-center justify-center gap-1.5 md:gap-2 px-4 md:px-0">
{tags.map((tag) => { {tags.map((tag) => {
const isActive = activeTags.includes(tag); const isActive = activeTags.includes(tag);
return ( return (
@@ -64,7 +64,7 @@ export const BlogCommandBar: React.FC<BlogCommandBarProps> = ({
key={tag} key={tag}
onClick={() => onTagToggle(tag)} onClick={() => onTagToggle(tag)}
className={cn( className={cn(
"px-3 py-1.5 rounded-lg text-[10px] font-mono uppercase tracking-wider border transition-all duration-200 select-none", "px-2.5 py-1 md:px-3 md:py-1.5 rounded-lg text-[9px] md:text-[10px] font-mono uppercase tracking-wider border transition-all duration-200 select-none",
isActive isActive
? "bg-slate-900 text-white border-slate-900 shadow-md transform scale-105" ? "bg-slate-900 text-white border-slate-900 shadow-md transform scale-105"
: "bg-white text-slate-500 border-slate-200 hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50", : "bg-white text-slate-500 border-slate-200 hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50",