feat: ultra-aggressive mobile spacing refinement & native fidelity navigation redesign
This commit is contained in:
@@ -39,16 +39,16 @@ export default function AboutPage() {
|
||||
<AbstractCircuit />
|
||||
|
||||
{/* 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">
|
||||
<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>
|
||||
<div className="relative">
|
||||
{/* 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-4 border border-slate-200 rounded-full animate-[spin_20s_linear_infinite_reverse] opacity-30" />
|
||||
<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-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">
|
||||
<img
|
||||
src={getImgproxyUrl("/marc-mintel.png", {
|
||||
@@ -65,14 +65,14 @@ export default function AboutPage() {
|
||||
</div>
|
||||
</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}>
|
||||
<div className="flex items-center justify-center gap-4 mb-4">
|
||||
<div className="h-px w-8 bg-slate-900"></div>
|
||||
<MonoLabel className="text-slate-900">
|
||||
<div className="flex items-center justify-center gap-2 md:gap-4 mb-1 md:mb-4">
|
||||
<div className="h-px w-6 md:w-8 bg-slate-900"></div>
|
||||
<MonoLabel className="text-slate-900 text-[10px] md:text-sm">
|
||||
Digital Architect
|
||||
</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>
|
||||
</Reveal>
|
||||
<PageHeader
|
||||
@@ -89,7 +89,7 @@ export default function AboutPage() {
|
||||
</Container>
|
||||
|
||||
{/* 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 01: Story */}
|
||||
@@ -99,17 +99,17 @@ export default function AboutPage() {
|
||||
borderTop
|
||||
illustration={<ExperienceIllustration className="w-24 h-24" />}
|
||||
>
|
||||
<div className="space-y-12">
|
||||
<div className="space-y-8 md:space-y-12">
|
||||
<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 />
|
||||
<span className="text-slate-400">zum Architekten.</span>
|
||||
</H3>
|
||||
</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}>
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-6 md:space-y-8">
|
||||
<LeadText className="text-xl md:text-2xl text-slate-400">
|
||||
Agenturen, Konzerne, Startups – ich habe die Branche von allen
|
||||
Seiten kennengelernt. Was hängen geblieben ist:{" "}
|
||||
@@ -140,7 +140,7 @@ export default function AboutPage() {
|
||||
padding="normal"
|
||||
className="group"
|
||||
>
|
||||
<H4 className="text-2xl mb-6">
|
||||
<H4 className="text-xl mb-6">
|
||||
Heute: Direkte Zusammenarbeit ohne Reibungsverluste.
|
||||
</H4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
@@ -170,7 +170,7 @@ export default function AboutPage() {
|
||||
>
|
||||
<div className="space-y-12">
|
||||
<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 />
|
||||
<span className="text-slate-400">bei mir ab.</span>
|
||||
</H3>
|
||||
@@ -204,7 +204,7 @@ export default function AboutPage() {
|
||||
},
|
||||
].map((item, i) => (
|
||||
<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="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">
|
||||
@@ -212,9 +212,13 @@ export default function AboutPage() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 pt-1">
|
||||
<H4 className="text-xl">{item.title}</H4>
|
||||
<BodyText className="text-slate-500">{item.desc}</BodyText>
|
||||
<div className="space-y-1 md:space-y-2 pt-1">
|
||||
<H4 className="text-base md:text-xl font-bold">
|
||||
{item.title}
|
||||
</H4>
|
||||
<BodyText className="text-slate-500 text-sm md:text-base">
|
||||
{item.desc}
|
||||
</BodyText>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
@@ -225,9 +229,9 @@ export default function AboutPage() {
|
||||
|
||||
{/* Section 03: Philosophie – what drives me */}
|
||||
<Section number="03" title="Philosophie" borderTop>
|
||||
<div className="space-y-16">
|
||||
<div className="space-y-12 md:space-y-16">
|
||||
<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 />
|
||||
<span className="text-slate-400">meine Arbeit gerade.</span>
|
||||
</H3>
|
||||
@@ -236,7 +240,7 @@ export default function AboutPage() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div className="space-y-8">
|
||||
<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,
|
||||
liegt die Verantwortung bei mir – und ich{" "}
|
||||
<span className="text-slate-900">
|
||||
@@ -244,7 +248,7 @@ export default function AboutPage() {
|
||||
</span>
|
||||
</LeadText>
|
||||
</Reveal>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{[
|
||||
"Vollständige Transparenz",
|
||||
"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">
|
||||
<Check className="w-3 h-3 text-slate-400 group-hover:text-white transition-colors duration-300" />
|
||||
</div>
|
||||
<Label className="text-slate-900">{item}</Label>
|
||||
<Label className="text-slate-900 text-xs md:text-sm">
|
||||
{item}
|
||||
</Label>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
@@ -280,9 +286,9 @@ export default function AboutPage() {
|
||||
illustration={<ContactIllustration className="w-24 h-24" />}
|
||||
effects={<GradientMesh variant="metallic" className="opacity-60" />}
|
||||
>
|
||||
<div className="space-y-12">
|
||||
<div className="space-y-10 md:space-y-12">
|
||||
<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 />
|
||||
<span className="text-slate-400">Zusammenarbeit?</span>
|
||||
</H3>
|
||||
@@ -291,12 +297,12 @@ export default function AboutPage() {
|
||||
<Card
|
||||
variant="glass"
|
||||
hover={false}
|
||||
padding="large"
|
||||
padding="normal"
|
||||
techBorder
|
||||
className="rounded-3xl shadow-xl relative overflow-hidden group"
|
||||
>
|
||||
<div className="relative z-10 space-y-8">
|
||||
<LeadText className="text-2xl md:text-4xl leading-tight max-w-2xl text-slate-400">
|
||||
<div className="relative z-10 space-y-6 md:space-y-8">
|
||||
<LeadText className="text-lg md:text-4xl leading-tight max-w-2xl text-slate-400">
|
||||
Lassen Sie uns gemeinsam etwas bauen, das{" "}
|
||||
<span className="text-slate-900">
|
||||
<Marker delay={0.3} color="rgba(148,163,184,0.15)">
|
||||
@@ -305,8 +311,10 @@ export default function AboutPage() {
|
||||
</span>
|
||||
</LeadText>
|
||||
|
||||
<div className="pt-4">
|
||||
<Button href="/contact">Projekt anfragen</Button>
|
||||
<div className="pt-2 md:pt-4">
|
||||
<Button href="/contact" className="w-full md:w-auto">
|
||||
Projekt anfragen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -37,7 +37,7 @@ export default async function BlogPostPage({
|
||||
const PostContent = PostComponents[slug];
|
||||
|
||||
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} />
|
||||
|
||||
<PageHeader
|
||||
@@ -49,24 +49,26 @@ export default async function BlogPostPage({
|
||||
|
||||
<main id="post-content">
|
||||
<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
|
||||
variant="glass"
|
||||
techBorder
|
||||
className="relative overflow-hidden"
|
||||
className="relative overflow-hidden rounded-none sm:rounded-3xl"
|
||||
>
|
||||
{/* 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="relative z-10 px-6 py-12 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="relative z-10 px-5 py-10 md:px-16 md:py-20">
|
||||
<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">
|
||||
<span className="w-2 h-2 rounded-full bg-slate-300" />
|
||||
<time dateTime={post.date}>{formattedDate}</time>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span>{readingTime} min Lesezeit</span>
|
||||
<span className="text-slate-200">|</span>
|
||||
<div className="flex items-center gap-4 sm:gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-slate-200 hidden sm:inline">|</span>
|
||||
<span>{readingTime} min Lesezeit</span>
|
||||
</div>
|
||||
<span>
|
||||
{slug.substring(0, 4).toUpperCase()}-
|
||||
{Math.floor(Math.random() * 999)}
|
||||
@@ -75,11 +77,11 @@ export default async function BlogPostPage({
|
||||
</div>
|
||||
|
||||
{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) => (
|
||||
<span
|
||||
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}
|
||||
</span>
|
||||
|
||||
@@ -46,7 +46,7 @@ export default function KLZCablesCaseStudy() {
|
||||
</motion.div>
|
||||
|
||||
{/* --- 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
|
||||
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"
|
||||
@@ -56,7 +56,7 @@ export default function KLZCablesCaseStudy() {
|
||||
<Reveal>
|
||||
<Link
|
||||
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" />{" "}
|
||||
Zurück
|
||||
@@ -82,23 +82,25 @@ export default function KLZCablesCaseStudy() {
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<div className="space-y-12">
|
||||
<div className="space-y-8 md:space-y-12">
|
||||
<GlitchText
|
||||
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
|
||||
</GlitchText>
|
||||
<br />
|
||||
<span className="text-slate-100">Case Study.</span>
|
||||
<br className="hidden md:block" />
|
||||
<span className="text-slate-100 text-3xl md:text-6xl font-bold tracking-tighter">
|
||||
Case Study.
|
||||
</span>
|
||||
|
||||
<Reveal delay={0.2} direction="right" blur>
|
||||
<div className="max-w-3xl border-l-[3px] border-slate-900 pl-8 md:pl-12">
|
||||
<LeadText className="text-2xl md:text-4xl leading-tight text-slate-900 font-medium">
|
||||
Engineering eines <br />
|
||||
<div className="max-w-3xl border-l-[3px] border-slate-900 pl-6 md:pl-12">
|
||||
<LeadText className="text-lg md:text-4xl leading-tight text-slate-900 font-medium">
|
||||
Engineering eines <br className="hidden md:block" />
|
||||
<Marker delay={0.2}>B2B Commerce Systems.</Marker>
|
||||
</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
|
||||
habe das KLZ-System auf das Wesentliche reduziert: Hardened
|
||||
Infrastructure, parametrische Datenpflege und zero
|
||||
@@ -109,20 +111,24 @@ export default function KLZCablesCaseStudy() {
|
||||
</div>
|
||||
|
||||
<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="space-y-2">
|
||||
<Label className="text-slate-400">Data Integrity</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2.5 h-2.5 bg-[rgba(129,199,132,1)] rounded-full animate-pulse" />
|
||||
<span className="text-2xl font-bold font-mono text-slate-900 tracking-tight">
|
||||
<div className="flex flex-wrap gap-8 md:gap-24 pt-6 md:pt-12 border-t border-slate-100">
|
||||
<div className="space-y-1 md:space-y-2">
|
||||
<Label className="text-slate-400 text-[10px] md:text-xs">
|
||||
Data Integrity
|
||||
</Label>
|
||||
<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
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-slate-400">Security Layer</Label>
|
||||
<div className="flex items-center gap-3 text-2xl font-bold font-mono text-slate-900">
|
||||
<ShieldCheck className="w-6 h-6 text-[rgba(129,199,132,1)]" />
|
||||
<div className="space-y-1 md:space-y-2">
|
||||
<Label className="text-slate-400 text-[10px] md:text-xs">
|
||||
Security Layer
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,20 +152,20 @@ export default function KLZCablesCaseStudy() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-16 lg:gap-24 items-start">
|
||||
<div className="md:col-span-12 mb-12">
|
||||
<H2 className="text-5xl md:text-8xl tracking-tighter mb-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-24 items-start">
|
||||
<div className="md:col-span-12 mb-4 md:mb-12">
|
||||
<H2 className="text-3xl md:text-8xl tracking-tighter mb-4 md:mb-12">
|
||||
<GlitchText>Architektur-</GlitchText> <br />
|
||||
Refactor.
|
||||
</H2>
|
||||
</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>
|
||||
<div className="space-y-10">
|
||||
<BodyText className="text-2xl leading-relaxed font-serif italic text-slate-500">
|
||||
<div className="space-y-6 md:space-y-10">
|
||||
<BodyText className="text-xl md:text-2xl leading-relaxed font-serif italic text-slate-500">
|
||||
Vom statischen HTML zur zentralen Daten-Instanz.
|
||||
</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
|
||||
High-Performance-Stack umgestellt. WordPress fungiert hier
|
||||
nicht als CMS-Baukasten, sondern speichert alle technischen
|
||||
@@ -172,16 +178,16 @@ export default function KLZCablesCaseStudy() {
|
||||
</div>
|
||||
</Reveal>
|
||||
</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>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.01 }}
|
||||
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>
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-6 md:space-y-8">
|
||||
{[
|
||||
{
|
||||
label: "Edge Caching",
|
||||
@@ -204,11 +210,11 @@ export default function KLZCablesCaseStudy() {
|
||||
initial={{ x: -20, opacity: 0 }}
|
||||
whileInView={{ x: 0, opacity: 1 }}
|
||||
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="space-y-1">
|
||||
<MonoLabel className="text-[10px] text-slate-400">
|
||||
<MonoLabel className="text-[9px] md:text-[10px] text-slate-400">
|
||||
{item.label}
|
||||
</MonoLabel>
|
||||
<BodyText className="text-base font-bold text-slate-900">
|
||||
@@ -226,15 +232,15 @@ export default function KLZCablesCaseStudy() {
|
||||
</Section>
|
||||
|
||||
{/* --- 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">
|
||||
<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">
|
||||
<Label className="text-slate-500">
|
||||
Infrastructure Validation
|
||||
</Label>
|
||||
<H3 className="text-5xl md:text-8xl tracking-tighter">
|
||||
<H3 className="text-3xl md:text-8xl tracking-tighter">
|
||||
<GlitchText>Global Hub.</GlitchText>
|
||||
</H3>
|
||||
</div>
|
||||
@@ -254,7 +260,9 @@ export default function KLZCablesCaseStudy() {
|
||||
>
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables.com/index.html"
|
||||
height="850px"
|
||||
height="400px"
|
||||
mobileHeight="350px"
|
||||
desktopHeight="850px"
|
||||
desktopWidth={1920}
|
||||
allowScroll
|
||||
browserFrame
|
||||
@@ -273,18 +281,22 @@ export default function KLZCablesCaseStudy() {
|
||||
borderBottom
|
||||
containerVariant="wide"
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-16">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-end">
|
||||
<Reveal direction="left" blur>
|
||||
<div className="space-y-6">
|
||||
<Label className="text-slate-400">Asset Pipelines</Label>
|
||||
<H3 className="text-4xl md:text-6xl tracking-tighter">
|
||||
Automated Documentation.
|
||||
</H3>
|
||||
</div>
|
||||
</Reveal>
|
||||
<div className="grid grid-cols-1 gap-8 md:gap-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-24 items-end">
|
||||
<div className="md:col-span-8">
|
||||
<Reveal direction="left" blur>
|
||||
<div className="space-y-6 md:space-y-12">
|
||||
<Label className="text-slate-400 text-xs md:text-sm">
|
||||
Asset Pipelines
|
||||
</Label>
|
||||
<H3 className="text-2xl md:text-6xl tracking-tighter">
|
||||
Automated Documentation.
|
||||
</H3>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
<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
|
||||
Sicherheitsanforderung. Ich habe eine automatisierte
|
||||
Asset-Pipeline entwickelt, die technische Datenblätter
|
||||
@@ -302,7 +314,9 @@ export default function KLZCablesCaseStudy() {
|
||||
<div className="relative w-full overflow-visible">
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables.com/power-cables-medium-voltage-cables.html"
|
||||
height="1000px"
|
||||
height="450px"
|
||||
mobileHeight="400px"
|
||||
desktopHeight="1000px"
|
||||
desktopWidth={1920}
|
||||
allowScroll
|
||||
offsetY={100}
|
||||
@@ -321,9 +335,9 @@ export default function KLZCablesCaseStudy() {
|
||||
borderBottom
|
||||
containerVariant="wide"
|
||||
>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
|
||||
<div className="lg:col-span-12 mb-12 text-center lg:text-left relative z-10">
|
||||
<H3 className="text-4xl md:text-6xl max-w-4xl tracking-tighter">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16 items-center">
|
||||
<div className="lg:col-span-12 mb-4 md:mb-12 text-center lg:text-left relative z-10">
|
||||
<H3 className="text-3xl md:text-6xl max-w-4xl tracking-tighter">
|
||||
Fokus auf <br />
|
||||
<Marker delay={0.2}>Spezifikationen.</Marker>
|
||||
</H3>
|
||||
@@ -334,7 +348,7 @@ export default function KLZCablesCaseStudy() {
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.01 }}
|
||||
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
|
||||
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">
|
||||
<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>
|
||||
<LeadText className="text-lg">
|
||||
<LeadText className="text-base md:text-lg leading-relaxed">
|
||||
Der Produktbereich wurde konsequent auf die Bedürfnisse
|
||||
technischer Planer optimiert. Klare Hierarchien und der
|
||||
Verzicht auf E-Commerce-Rauschen ermöglichen einen direkten
|
||||
@@ -360,9 +374,9 @@ export default function KLZCablesCaseStudy() {
|
||||
</LeadText>
|
||||
<motion.div
|
||||
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">
|
||||
Strukturierte Aufbereitung technischer Produktdaten.
|
||||
</BodyText>
|
||||
@@ -386,7 +400,7 @@ export default function KLZCablesCaseStudy() {
|
||||
<Reveal direction="left" blur>
|
||||
<div className="space-y-6">
|
||||
<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.
|
||||
</H3>
|
||||
<BodyText className="text-xl text-slate-500 font-serif italic">
|
||||
@@ -403,7 +417,7 @@ export default function KLZCablesCaseStudy() {
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.01 }}
|
||||
transition={{ type: "spring", stiffness: 200, damping: 20 }}
|
||||
className="relative h-[700px] w-full"
|
||||
className="relative h-[450px] md:h-[700px] w-full"
|
||||
>
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables.com/blog.html"
|
||||
@@ -426,12 +440,12 @@ export default function KLZCablesCaseStudy() {
|
||||
borderBottom
|
||||
containerVariant="wide"
|
||||
>
|
||||
<div className="space-y-16 text-center">
|
||||
<div className="space-y-10 md:space-y-16 text-center">
|
||||
<Reveal direction="up" blur>
|
||||
<H3 className="text-5xl md:text-8xl tracking-tighter">
|
||||
<H3 className="text-3xl md:text-8xl tracking-tighter">
|
||||
System-Lifecycle.
|
||||
</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
|
||||
zentralisierten Daten-Instanz eliminiert technische Schulden und
|
||||
manuelle Fehlerquellen. Das Ergebnis ist eine wartungsfreie
|
||||
@@ -445,7 +459,9 @@ export default function KLZCablesCaseStudy() {
|
||||
<div className="relative block w-full overflow-visible">
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables.com/team.html"
|
||||
height="1100px"
|
||||
height="450px"
|
||||
mobileHeight="400px"
|
||||
desktopHeight="1100px"
|
||||
desktopWidth={1440}
|
||||
allowScroll
|
||||
browserFrame
|
||||
@@ -465,15 +481,15 @@ export default function KLZCablesCaseStudy() {
|
||||
containerVariant="wide"
|
||||
className="!pb-32"
|
||||
>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 items-center">
|
||||
<div className="lg:col-span-5 space-y-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-24 items-center">
|
||||
<div className="md:col-span-6 md:order-2">
|
||||
<Reveal direction="left" blur>
|
||||
<div className="space-y-6">
|
||||
<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.
|
||||
</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
|
||||
deterministischer Kanal zwischen technischem Bedarf und
|
||||
individueller Beratung – ohne Umwege, ohne Rauschen.
|
||||
@@ -528,7 +544,9 @@ export default function KLZCablesCaseStudy() {
|
||||
>
|
||||
<IframeSection
|
||||
src="/showcase/klz-cables.com/contact.html"
|
||||
height="750px"
|
||||
height="450px"
|
||||
mobileHeight="400px"
|
||||
desktopHeight="750px"
|
||||
desktopWidth={1200}
|
||||
mobileWidth={390}
|
||||
allowScroll
|
||||
@@ -545,20 +563,20 @@ export default function KLZCablesCaseStudy() {
|
||||
<BackgroundGrid />
|
||||
<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="space-y-12">
|
||||
<div className="space-y-8 md:space-y-12">
|
||||
<Reveal direction="left" blur>
|
||||
<div className="space-y-4">
|
||||
<MonoLabel className="text-slate-400 tracking-[0.4em]">
|
||||
<div className="space-y-3 md:space-y-6">
|
||||
<MonoLabel className="text-slate-400 tracking-[0.2em] md:tracking-[0.4em]">
|
||||
CONSULTING // ENGINEERING
|
||||
</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 />
|
||||
<span className="text-slate-100">ohne Altlasten.</span>
|
||||
</H2>
|
||||
</div>
|
||||
</Reveal>
|
||||
<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
|
||||
digitale Infrastrukturen, die technische Freiheit und
|
||||
operative Stabilität garantieren – wartungsfrei und
|
||||
@@ -567,13 +585,13 @@ export default function KLZCablesCaseStudy() {
|
||||
</Reveal>
|
||||
</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>
|
||||
<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" />
|
||||
Operational Excellence
|
||||
</div>
|
||||
<div className="space-y-10">
|
||||
<div className="space-y-8 md:space-y-10">
|
||||
{[
|
||||
{
|
||||
title: "Hardened Infrastructure",
|
||||
@@ -588,11 +606,14 @@ export default function KLZCablesCaseStudy() {
|
||||
desc: "Plugin-freie Logik für deterministische System-Sicherheit.",
|
||||
},
|
||||
].map((item, i) => (
|
||||
<div key={i} className="space-y-3 group/item">
|
||||
<MonoLabel className="text-[10px] text-slate-400 group-hover/item:text-slate-900 transition-colors duration-500">
|
||||
<div
|
||||
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}
|
||||
</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}
|
||||
</BodyText>
|
||||
</div>
|
||||
@@ -604,10 +625,10 @@ export default function KLZCablesCaseStudy() {
|
||||
href="/contact"
|
||||
variant="outline"
|
||||
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
|
||||
<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>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
@@ -38,29 +38,31 @@ export default function CaseStudiesPage() {
|
||||
variant="glass"
|
||||
padding="none"
|
||||
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 */}
|
||||
<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 */}
|
||||
<div className="flex-1 p-8 md:p-12 relative z-10 flex flex-col justify-between">
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex-1 p-4 md:p-12 relative z-10 flex flex-col justify-between">
|
||||
<div className="space-y-4 md:space-y-8">
|
||||
<div className="flex items-center gap-3 md:gap-4">
|
||||
<img
|
||||
src="/showcase/klz-cables.com/assets/klz-cables.com/wp-content/uploads/2024/11/white_logo_transparent_background.svg"
|
||||
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" />
|
||||
<Label className="text-slate-400">Case Study 2025</Label>
|
||||
<div className="h-px w-8 md:w-12 bg-slate-100" />
|
||||
<Label className="text-slate-400 text-[9px] md:text-[10px]">
|
||||
Case Study 2025
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<H3 className="text-4xl md:text-6xl tracking-tighter">
|
||||
<div className="space-y-3 md:space-y-4">
|
||||
<H3 className="text-3xl md:text-6xl tracking-tighter">
|
||||
KLZ <span className="text-slate-300">Cables</span>
|
||||
</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
|
||||
<span className="text-slate-900 font-medium">
|
||||
{" "}
|
||||
@@ -70,12 +72,12 @@ export default function CaseStudiesPage() {
|
||||
</LeadText>
|
||||
</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(
|
||||
(tag, i) => (
|
||||
<span
|
||||
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}
|
||||
</span>
|
||||
@@ -84,8 +86,8 @@ export default function CaseStudiesPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="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="pt-8 md:pt-12">
|
||||
<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>
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-2 transition-transform duration-500" />
|
||||
</div>
|
||||
@@ -93,11 +95,11 @@ export default function CaseStudiesPage() {
|
||||
</div>
|
||||
|
||||
{/* 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="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="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-[6px] md:text-[8px] p-4 flex flex-col gap-1 overflow-hidden">
|
||||
{Array.from({ length: 40 }).map((_, i) => (
|
||||
<div key={i} className="whitespace-nowrap">
|
||||
{Array.from({ length: 10 })
|
||||
{Array.from({ length: 15 })
|
||||
.map((_, j) => (
|
||||
<span
|
||||
key={j}
|
||||
@@ -116,7 +118,7 @@ export default function CaseStudiesPage() {
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
{[1, 2, 3].map((v) => (
|
||||
<motion.div
|
||||
@@ -131,7 +133,7 @@ export default function CaseStudiesPage() {
|
||||
</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
|
||||
</div>
|
||||
</div>
|
||||
@@ -149,12 +151,12 @@ export default function CaseStudiesPage() {
|
||||
techBorder
|
||||
className="text-center relative overflow-hidden group"
|
||||
>
|
||||
<div className="relative z-10 space-y-6 py-8">
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<div className="relative z-10 space-y-4 py-4 md:py-8">
|
||||
<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" />
|
||||
<Label className="text-slate-400">In Arbeit</Label>
|
||||
</div>
|
||||
<H3 className="text-3xl text-slate-400">
|
||||
<H3 className="text-2xl md:text-3xl text-slate-400">
|
||||
Weitere Case Studies in Kürze.
|
||||
</H3>
|
||||
<BodyText className="text-slate-400 max-w-md mx-auto">
|
||||
|
||||
@@ -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 */}
|
||||
<div className="md:col-span-7">
|
||||
<div className="lg:col-span-7">
|
||||
<Reveal>
|
||||
<Card
|
||||
variant="glass"
|
||||
padding="large"
|
||||
className="relative overflow-hidden"
|
||||
padding="normal"
|
||||
className="relative overflow-hidden p-5 md:p-12"
|
||||
>
|
||||
<ContactForm />
|
||||
</Card>
|
||||
@@ -44,7 +44,7 @@ export default function ContactPage() {
|
||||
</div>
|
||||
|
||||
{/* 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}>
|
||||
<Card
|
||||
variant="glass"
|
||||
@@ -52,12 +52,14 @@ export default function ContactPage() {
|
||||
techBorder
|
||||
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="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>
|
||||
<LeadText className="text-lg text-slate-400">
|
||||
<LeadText className="text-lg md:text-xl text-slate-400">
|
||||
Aktuell nehme ich Projekte für{" "}
|
||||
<span className="text-slate-900 font-bold">Q2 2026</span>{" "}
|
||||
an.
|
||||
@@ -68,11 +70,13 @@ export default function ContactPage() {
|
||||
|
||||
<Reveal delay={0.3}>
|
||||
<Card variant="glass" padding="normal" className="group">
|
||||
<div className="space-y-4">
|
||||
<Label className="text-slate-900">Direkt per E-Mail</Label>
|
||||
<div className="space-y-3 md:space-y-4">
|
||||
<Label className="text-slate-900 text-xs md:text-sm">
|
||||
Direkt per E-Mail
|
||||
</Label>
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
@@ -81,9 +85,11 @@ export default function ContactPage() {
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.4}>
|
||||
<div className="p-6 space-y-3 rounded-2xl border border-slate-50 bg-slate-50/30">
|
||||
<Label className="text-slate-400">Antwortzeit</Label>
|
||||
<H3 className="text-2xl text-slate-300">
|
||||
<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 text-xs md:text-sm">
|
||||
Antwortzeit
|
||||
</Label>
|
||||
<H3 className="text-lg md:text-2xl text-slate-300">
|
||||
<span className="text-slate-900">< 24h</span> an Werktagen.
|
||||
</H3>
|
||||
</div>
|
||||
|
||||
@@ -24,27 +24,27 @@
|
||||
}
|
||||
|
||||
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 {
|
||||
@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 {
|
||||
@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 {
|
||||
@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 {
|
||||
@apply mb-4 text-base leading-relaxed text-slate-700;
|
||||
@apply mb-4 text-sm md:text-base leading-relaxed text-slate-700;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
}
|
||||
|
||||
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 */
|
||||
@@ -92,15 +92,15 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
@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 {
|
||||
@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 {
|
||||
|
||||
@@ -41,7 +41,7 @@ export default function LandingPage() {
|
||||
borderTop
|
||||
effects={<GradientMesh variant="metallic" className="opacity-70" />}
|
||||
>
|
||||
<div className="space-y-16 relative">
|
||||
<div className="space-y-10 md:space-y-16 relative">
|
||||
<Reveal>
|
||||
<H3 className="max-w-3xl">
|
||||
Kein Agentur-Zirkus. <br />
|
||||
@@ -100,7 +100,7 @@ export default function LandingPage() {
|
||||
|
||||
{/* Section 03: The Difference – Visual Comparison */}
|
||||
<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>
|
||||
<H3 className="max-w-3xl">
|
||||
Ich arbeite für das Ergebnis, <br />
|
||||
@@ -135,23 +135,23 @@ export default function LandingPage() {
|
||||
|
||||
{/* Section 04: Target Group */}
|
||||
<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>
|
||||
<Card variant="glass" padding="normal" techBorder className="group">
|
||||
<div className="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">
|
||||
<ConceptPrice className="w-8 h-8" />
|
||||
<div className="space-y-4 md:space-y-6 relative overflow-hidden">
|
||||
<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-6 h-6 md:w-8 md:h-8" />
|
||||
</div>
|
||||
<H3 className="text-3xl">
|
||||
<H3 className="text-xl md:text-3xl">
|
||||
Unternehmer & <br />
|
||||
Geschäftsführer
|
||||
</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
|
||||
Technik beschäftigen zu müssen.
|
||||
</LeadText>
|
||||
</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">
|
||||
Perfekt für Sie
|
||||
</Label>
|
||||
@@ -161,16 +161,20 @@ export default function LandingPage() {
|
||||
<Reveal delay={0.2}>
|
||||
<Card variant="glass" padding="normal" techBorder className="group">
|
||||
<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 />
|
||||
Vertrieb
|
||||
</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.
|
||||
Schnell und zuverlässig.
|
||||
</LeadText>
|
||||
</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">
|
||||
Perfekt für Sie
|
||||
</Label>
|
||||
@@ -210,15 +214,15 @@ export default function LandingPage() {
|
||||
},
|
||||
].map((service, i) => (
|
||||
<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="flex flex-col md:flex-row md:items-start gap-8 md:gap-16">
|
||||
<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-6 md:gap-16">
|
||||
{/* Number + Binary */}
|
||||
<div className="md:w-32 shrink-0">
|
||||
<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">
|
||||
<div className="shrink-0 flex md:block items-baseline gap-4">
|
||||
<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}
|
||||
</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"
|
||||
>
|
||||
{service.binary}
|
||||
@@ -226,8 +230,8 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 space-y-6">
|
||||
<H3 className="text-3xl md:text-4xl group-hover:translate-x-2 transition-transform duration-500">
|
||||
<div className="flex-1 space-y-4 md:space-y-6">
|
||||
<H3 className="text-xl md:text-4xl group-hover:translate-x-2 transition-transform duration-500">
|
||||
<GlitchText
|
||||
trigger="inView"
|
||||
delay={0.2 + i * 0.15}
|
||||
@@ -236,7 +240,7 @@ export default function LandingPage() {
|
||||
{service.title}
|
||||
</GlitchText>
|
||||
</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}
|
||||
</BodyText>
|
||||
{/* Tags */}
|
||||
@@ -244,7 +248,7 @@ export default function LandingPage() {
|
||||
{service.tags.map((tag, j) => (
|
||||
<span
|
||||
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}
|
||||
</span>
|
||||
@@ -253,12 +257,13 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
{/* Arrow */}
|
||||
<div className="md:self-center shrink-0">
|
||||
<div className="md:self-center shrink-0 pt-4 md:pt-0">
|
||||
<Button
|
||||
href={service.href}
|
||||
variant="ghost"
|
||||
size="normal"
|
||||
showArrow
|
||||
className="w-full md:w-auto"
|
||||
>
|
||||
Details
|
||||
</Button>
|
||||
@@ -272,36 +277,40 @@ export default function LandingPage() {
|
||||
|
||||
{/* Section 06: Contact */}
|
||||
<Section number="06" title="Kontakt" borderTop>
|
||||
<div className="relative py-12" id="contact">
|
||||
<div className="relative py-4 md:py-12" id="contact">
|
||||
<Reveal>
|
||||
<div className="space-y-16">
|
||||
<H1 className="text-6xl md:text-8xl">
|
||||
<div className="space-y-8 md:space-y-16">
|
||||
<H1 className="text-3xl md:text-8xl">
|
||||
Lassen Sie uns <br />
|
||||
<span className="text-slate-400">starten.</span>
|
||||
</H1>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-16 items-start relative z-10">
|
||||
<div className="space-y-8 flex-1">
|
||||
<LeadText className="text-2xl md:text-3xl text-slate-400">
|
||||
<div className="flex flex-col md:flex-row gap-6 md:gap-16 items-start relative z-10">
|
||||
<div className="space-y-4 md:space-y-8 flex-1">
|
||||
<LeadText className="text-lg md:text-3xl text-slate-400">
|
||||
Beschreiben Sie kurz Ihr Vorhaben. Ich melde mich{" "}
|
||||
<span className="text-slate-900 border-b-2 border-slate-900/10">
|
||||
<Marker color="rgba(255,235,59,0.5)">zeitnah</Marker>
|
||||
</span>{" "}
|
||||
bei Ihnen.
|
||||
</LeadText>
|
||||
<div className="pt-4">
|
||||
<Button href="/contact" size="large">
|
||||
<div className="pt-2 md:pt-4">
|
||||
<Button
|
||||
href="/contact"
|
||||
size="large"
|
||||
className="w-full md:w-auto"
|
||||
>
|
||||
Projekt anfragen
|
||||
</Button>
|
||||
</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="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
||||
<Label className="text-slate-900">Verfügbarkeit</Label>
|
||||
</div>
|
||||
<BodyText className="text-base leading-snug">
|
||||
<BodyText className="text-sm md:text-base leading-snug">
|
||||
Aktuell nehme ich Projekte für{" "}
|
||||
<span className="font-bold text-slate-900">Q2 2026</span>{" "}
|
||||
an.
|
||||
|
||||
@@ -46,6 +46,7 @@ export default function WebsitesPage() {
|
||||
}
|
||||
description="Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur für maximale Performance."
|
||||
backgroundSymbol="W"
|
||||
className="px-5 md:px-0"
|
||||
/>
|
||||
|
||||
{/* 01: Architektur – WIE ich baue */}
|
||||
@@ -55,9 +56,9 @@ export default function WebsitesPage() {
|
||||
borderTop
|
||||
illustration={<SystemArchitecture className="w-24 h-24" />}
|
||||
>
|
||||
<div className="space-y-12">
|
||||
<div className="space-y-8 md:space-y-12">
|
||||
<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 />
|
||||
<span className="text-slate-400">
|
||||
Jede Website ist Ingenieursarbeit.
|
||||
@@ -65,7 +66,7 @@ export default function WebsitesPage() {
|
||||
</H3>
|
||||
</Reveal>
|
||||
<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,
|
||||
eigener Infrastruktur und einem Deployment-Prozess, der{" "}
|
||||
<span className="text-slate-900">
|
||||
@@ -79,7 +80,7 @@ export default function WebsitesPage() {
|
||||
|
||||
{/* Tech Stack Visual */}
|
||||
<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: "TypeScript", sub: "Sprache" },
|
||||
@@ -93,11 +94,11 @@ export default function WebsitesPage() {
|
||||
techBorder
|
||||
className="group text-center"
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-slate-900 text-sm">
|
||||
<div className="space-y-1 md:space-y-2">
|
||||
<Label className="text-slate-900 text-xs md:text-sm">
|
||||
{item.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}
|
||||
</span>
|
||||
</div>
|
||||
@@ -124,9 +125,9 @@ export default function WebsitesPage() {
|
||||
illustration={<SpeedPerformance className="w-24 h-24" />}
|
||||
effects={<GradientMesh variant="metallic" className="opacity-60" />}
|
||||
>
|
||||
<div className="space-y-12">
|
||||
<div className="space-y-8 md:space-y-12">
|
||||
<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 />
|
||||
<span className="text-slate-400">
|
||||
<Marker delay={0.3} color="rgba(148,163,184,0.15)">
|
||||
@@ -135,17 +136,17 @@ export default function WebsitesPage() {
|
||||
</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
|
||||
<div className="md:col-span-7 space-y-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-center">
|
||||
<div className="md:col-span-12 lg:col-span-7 space-y-6 md:space-y-8">
|
||||
<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.
|
||||
Das Ergebnis: Ladezeiten unter einer Sekunde. Messbar.{" "}
|
||||
<span className="text-slate-900">Reproduzierbar.</span>
|
||||
</LeadText>
|
||||
</Reveal>
|
||||
<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",
|
||||
"Automatische Bild-Optimierung (WebP, AVIF)",
|
||||
@@ -153,7 +154,9 @@ export default function WebsitesPage() {
|
||||
"Core Web Vitals im grünen Bereich",
|
||||
].map((item, i) => (
|
||||
<IconListItem key={i} bullet>
|
||||
<LeadText className="text-lg md:text-xl">{item}</LeadText>
|
||||
<LeadText className="text-base md:text-xl">
|
||||
{item}
|
||||
</LeadText>
|
||||
</IconListItem>
|
||||
))}
|
||||
</IconList>
|
||||
@@ -165,13 +168,13 @@ export default function WebsitesPage() {
|
||||
variant="glass"
|
||||
padding="normal"
|
||||
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+
|
||||
</div>
|
||||
<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
|
||||
</span>
|
||||
</Card>
|
||||
@@ -188,9 +191,9 @@ export default function WebsitesPage() {
|
||||
borderTop
|
||||
illustration={<SolidFoundation className="w-24 h-24" />}
|
||||
>
|
||||
<div className="space-y-12">
|
||||
<div className="space-y-8 md:space-y-12">
|
||||
<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 />
|
||||
<span className="text-slate-400">Keine Abhängigkeiten.</span>
|
||||
</H3>
|
||||
@@ -210,7 +213,7 @@ export default function WebsitesPage() {
|
||||
<CodeSnippet variant="git" />
|
||||
</Reveal>
|
||||
<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">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-slate-900">Versionskontrolle</Label>
|
||||
@@ -246,17 +249,17 @@ export default function WebsitesPage() {
|
||||
illustration={<LayerSeparation className="w-24 h-24" />}
|
||||
effects={<GradientMesh variant="subtle" className="opacity-60" />}
|
||||
>
|
||||
<div className="space-y-12">
|
||||
<div className="space-y-8 md:space-y-12">
|
||||
<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 />
|
||||
<span className="text-slate-400">ohne Angst.</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-start">
|
||||
<div className="md:col-span-7">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-start">
|
||||
<div className="md:col-span-12 lg:col-span-7">
|
||||
<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{" "}
|
||||
<span className="text-slate-900">
|
||||
<Marker color="rgba(255,235,59,0.5)">
|
||||
@@ -268,7 +271,7 @@ export default function WebsitesPage() {
|
||||
</LeadText>
|
||||
</Reveal>
|
||||
</div>
|
||||
<div className="md:col-span-5">
|
||||
<div className="md:col-span-12 lg:col-span-5">
|
||||
<Reveal delay={0.4}>
|
||||
<Card
|
||||
variant="glass"
|
||||
@@ -281,7 +284,7 @@ export default function WebsitesPage() {
|
||||
<div className="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
<Label className="text-slate-900">Sie dürfen</Label>
|
||||
</div>
|
||||
<BodyText className="font-medium">
|
||||
<BodyText className="font-medium text-sm md:text-base">
|
||||
Texte, Bilder und Inhalte frei bearbeiten.
|
||||
</BodyText>
|
||||
</div>
|
||||
@@ -290,7 +293,7 @@ export default function WebsitesPage() {
|
||||
<div className="w-2 h-2 rounded-full bg-slate-300"></div>
|
||||
<Label>Geschützt</Label>
|
||||
</div>
|
||||
<BodyText className="line-through">
|
||||
<BodyText className="line-through text-xs md:text-base">
|
||||
Design, Layout, Code-Struktur.
|
||||
</BodyText>
|
||||
</div>
|
||||
@@ -308,15 +311,15 @@ export default function WebsitesPage() {
|
||||
borderTop
|
||||
illustration={<TaskDone className="w-24 h-24" />}
|
||||
>
|
||||
<div className="space-y-16">
|
||||
<div className="space-y-8 md:space-y-16">
|
||||
<Reveal>
|
||||
<H3 className="text-4xl md:text-6xl tracking-tighter">
|
||||
<H3 className="text-2xl md:text-5xl tracking-tighter">
|
||||
Was Sie konkret <br />
|
||||
<span className="text-slate-400">bekommen.</span>
|
||||
</H3>
|
||||
</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",
|
||||
@@ -332,10 +335,12 @@ export default function WebsitesPage() {
|
||||
},
|
||||
].map((item, i) => (
|
||||
<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" />
|
||||
<H4 className="text-2xl">{item.title}</H4>
|
||||
<LeadText className="text-lg text-slate-400">
|
||||
<H4 className="text-lg md:text-2xl font-bold">
|
||||
{item.title}
|
||||
</H4>
|
||||
<LeadText className="text-sm md:text-lg text-slate-400">
|
||||
{item.desc}
|
||||
</LeadText>
|
||||
</div>
|
||||
@@ -344,14 +349,16 @@ export default function WebsitesPage() {
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<Label>Bereit?</Label>
|
||||
<LeadText className="text-2xl">
|
||||
<LeadText className="text-xl md:text-2xl">
|
||||
Lassen Sie uns über Ihr Projekt sprechen.
|
||||
</LeadText>
|
||||
</div>
|
||||
<Button href="/contact">Projekt anfragen</Button>
|
||||
<Button href="/contact" className="w-full md:w-auto">
|
||||
Projekt anfragen
|
||||
</Button>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user