Marc Mintel
c1295546a6
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 8s
Build & Deploy / 🧪 QA (push) Failing after 1m2s
Build & Deploy / 🏗️ Build (push) Failing after 3m44s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
363 lines
13 KiB
TypeScript
363 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import { PageHeader } from "../../src/components/PageHeader";
|
||
import { Reveal } from "../../src/components/Reveal";
|
||
import { Section } from "../../src/components/Section";
|
||
import {
|
||
SystemArchitecture,
|
||
SpeedPerformance,
|
||
SolidFoundation,
|
||
LayerSeparation,
|
||
DirectService,
|
||
TaskDone,
|
||
} from "../../src/components/Landing";
|
||
import {
|
||
H3,
|
||
H4,
|
||
LeadText,
|
||
BodyText,
|
||
Label,
|
||
} from "../../src/components/Typography";
|
||
import { Card } from "../../src/components/Layout";
|
||
import { Button } from "../../src/components/Button";
|
||
import { IconList, IconListItem } from "../../src/components/IconList";
|
||
import {
|
||
GradientMesh,
|
||
CodeSnippet,
|
||
AbstractCircuit,
|
||
} from "../../src/components/Effects";
|
||
import { Marker } from "../../src/components/Marker";
|
||
|
||
export default function WebsitesPage() {
|
||
return (
|
||
<div className="flex flex-col bg-white overflow-hidden relative">
|
||
<AbstractCircuit />
|
||
|
||
<PageHeader
|
||
title={
|
||
<>
|
||
Websites, die <br />
|
||
<span className="text-slate-400">
|
||
<Marker color="rgba(255,235,59,0.5)">
|
||
einfach funktionieren.
|
||
</Marker>
|
||
</span>
|
||
</>
|
||
}
|
||
description="Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur für maximale Performance."
|
||
backLink={{ href: "/", label: "Zurück" }}
|
||
backgroundSymbol="W"
|
||
/>
|
||
|
||
{/* 01: Architektur – WIE ich baue */}
|
||
<Section
|
||
number="01"
|
||
title="Architektur"
|
||
borderTop
|
||
illustration={<SystemArchitecture className="w-24 h-24" />}
|
||
>
|
||
<div className="space-y-12">
|
||
<Reveal>
|
||
<H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
|
||
Systeme, nicht Broschüren. <br />
|
||
<span className="text-slate-400">
|
||
Jede Website ist Ingenieursarbeit.
|
||
</span>
|
||
</H3>
|
||
</Reveal>
|
||
<Reveal delay={0.2}>
|
||
<LeadText className="text-xl 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">
|
||
<Marker delay={0.2} color="rgba(148,163,184,0.1)">
|
||
automatisiert und reproduzierbar
|
||
</Marker>
|
||
</span>{" "}
|
||
ist.
|
||
</LeadText>
|
||
</Reveal>
|
||
|
||
{/* Tech Stack Visual */}
|
||
<Reveal delay={0.4}>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
{[
|
||
{ label: "Next.js", sub: "Framework" },
|
||
{ label: "TypeScript", sub: "Sprache" },
|
||
{ label: "Docker", sub: "Infrastruktur" },
|
||
{ label: "Directus", sub: "CMS" },
|
||
].map((item, i) => (
|
||
<Card
|
||
key={i}
|
||
variant="glass"
|
||
padding="small"
|
||
techBorder
|
||
className="group text-center"
|
||
>
|
||
<div className="space-y-2">
|
||
<Label className="text-slate-900 text-sm">
|
||
{item.label}
|
||
</Label>
|
||
<span className="block text-[9px] font-mono text-slate-300 uppercase tracking-widest">
|
||
{item.sub}
|
||
</span>
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</Reveal>
|
||
|
||
{/* Decorative Code Snippet */}
|
||
<Reveal delay={0.6}>
|
||
<div className="max-w-md opacity-70">
|
||
<CodeSnippet variant="code" />
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* 02: Performance */}
|
||
<Section
|
||
number="02"
|
||
title="Performance"
|
||
borderTop
|
||
variant="gray"
|
||
illustration={<SpeedPerformance className="w-24 h-24" />}
|
||
effects={<GradientMesh variant="metallic" className="opacity-60" />}
|
||
>
|
||
<div className="space-y-12">
|
||
<Reveal>
|
||
<H3 className="text-3xl 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)">
|
||
kein Extra. Sie ist Standard.
|
||
</Marker>
|
||
</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">
|
||
<Reveal delay={0.2}>
|
||
<LeadText className="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">
|
||
{[
|
||
"Server-Side Rendering für sofortige Inhalte",
|
||
"Automatische Bild-Optimierung (WebP, AVIF)",
|
||
"Lighthouse-Score 90+ als Mindeststandard",
|
||
"Core Web Vitals im grünen Bereich",
|
||
].map((item, i) => (
|
||
<IconListItem key={i} bullet>
|
||
<LeadText className="text-lg md:text-xl">{item}</LeadText>
|
||
</IconListItem>
|
||
))}
|
||
</IconList>
|
||
</Reveal>
|
||
</div>
|
||
<div className="md:col-span-5">
|
||
<Reveal delay={0.6}>
|
||
<Card
|
||
variant="glass"
|
||
padding="normal"
|
||
techBorder
|
||
className="text-center group"
|
||
>
|
||
<div className="text-7xl 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">
|
||
PERFORMANCE · ACCESSIBILITY · SEO
|
||
</span>
|
||
</Card>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* 03: Code-Qualität */}
|
||
<Section
|
||
number="03"
|
||
title="Code"
|
||
borderTop
|
||
illustration={<SolidFoundation className="w-24 h-24" />}
|
||
>
|
||
<div className="space-y-12">
|
||
<Reveal>
|
||
<H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
|
||
Keine Plugins. <br />
|
||
<span className="text-slate-400">Keine Abhängigkeiten.</span>
|
||
</H3>
|
||
</Reveal>
|
||
<Reveal delay={0.2}>
|
||
<LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
|
||
Ihre Website besteht aus{" "}
|
||
<span className="text-slate-900">Ihrem Code</span>. Kein
|
||
WordPress, kein Wix, keine Blackbox. Alles versioniert, alles
|
||
nachvollziehbar.
|
||
</LeadText>
|
||
</Reveal>
|
||
|
||
{/* Git Branch Visualization */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<Reveal delay={0.4}>
|
||
<CodeSnippet variant="git" />
|
||
</Reveal>
|
||
<Reveal delay={0.5}>
|
||
<div className="space-y-6">
|
||
<Card variant="glass" padding="normal" className="group">
|
||
<div className="space-y-2">
|
||
<Label className="text-slate-900">Versionskontrolle</Label>
|
||
<BodyText>
|
||
Jede Änderung ist dokumentiert. Rollbacks in Sekunden.
|
||
Kein „wer hat das kaputt gemacht?".
|
||
</BodyText>
|
||
</div>
|
||
</Card>
|
||
<Card variant="glass" padding="normal" className="group">
|
||
<div className="space-y-2">
|
||
<Label className="text-slate-900">
|
||
Automatisches Deployment
|
||
</Label>
|
||
<BodyText>
|
||
Code wird geprüft, getestet und automatisch live
|
||
geschaltet. Ohne manuellen Eingriff.
|
||
</BodyText>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* 04: Content-System */}
|
||
<Section
|
||
number="04"
|
||
title="Inhalte"
|
||
borderTop
|
||
variant="gray"
|
||
illustration={<LayerSeparation className="w-24 h-24" />}
|
||
effects={<GradientMesh variant="subtle" className="opacity-60" />}
|
||
>
|
||
<div className="space-y-12">
|
||
<Reveal>
|
||
<H3 className="text-3xl 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">
|
||
<Reveal delay={0.2}>
|
||
<LeadText className="text-xl md:text-2xl text-slate-400">
|
||
Technik und Inhalt sind{" "}
|
||
<span className="text-slate-900">
|
||
<Marker color="rgba(255,235,59,0.5)">
|
||
strikt getrennt
|
||
</Marker>
|
||
</span>
|
||
. Sie bearbeiten Texte und Bilder in einem intuitiven System –
|
||
das Design bleibt geschützt.
|
||
</LeadText>
|
||
</Reveal>
|
||
</div>
|
||
<div className="md:col-span-5">
|
||
<Reveal delay={0.4}>
|
||
<Card
|
||
variant="glass"
|
||
padding="normal"
|
||
techBorder
|
||
className="space-y-6"
|
||
>
|
||
<div className="space-y-3">
|
||
<div className="flex items-center gap-3">
|
||
<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">
|
||
Texte, Bilder und Inhalte frei bearbeiten.
|
||
</BodyText>
|
||
</div>
|
||
<div className="space-y-3 opacity-40">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-2 h-2 rounded-full bg-slate-300"></div>
|
||
<Label>Geschützt</Label>
|
||
</div>
|
||
<BodyText className="line-through">
|
||
Design, Layout, Code-Struktur.
|
||
</BodyText>
|
||
</div>
|
||
</Card>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* 05: Was Sie bekommen */}
|
||
<Section
|
||
number="05"
|
||
title="Ergebnis"
|
||
borderTop
|
||
illustration={<TaskDone className="w-24 h-24" />}
|
||
>
|
||
<div className="space-y-16">
|
||
<Reveal>
|
||
<H3 className="text-4xl md:text-6xl 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">
|
||
{[
|
||
{
|
||
title: "Ihr Code",
|
||
desc: "Vollständiger Quellcode, versioniert auf GitHub. Kein Vendor Lock-in.",
|
||
},
|
||
{
|
||
title: "Ihre Infrastruktur",
|
||
desc: "Docker-Container, CI/CD-Pipeline, automatisches Deployment.",
|
||
},
|
||
{
|
||
title: "Ihr CMS",
|
||
desc: "Eigenes Content-Management-System. Volle Kontrolle über Ihre Inhalte.",
|
||
},
|
||
].map((item, i) => (
|
||
<Reveal key={i} delay={i * 0.1}>
|
||
<div className="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">
|
||
{item.desc}
|
||
</LeadText>
|
||
</div>
|
||
</Reveal>
|
||
))}
|
||
</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="space-y-2">
|
||
<Label>Bereit?</Label>
|
||
<LeadText className="text-2xl">
|
||
Lassen Sie uns über Ihr Projekt sprechen.
|
||
</LeadText>
|
||
</div>
|
||
<Button href="/contact">Projekt anfragen</Button>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
</div>
|
||
);
|
||
}
|