Marc Mintel
7c774f65bc
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 36s
Build & Deploy / 🧪 QA (push) Successful in 4m2s
Build & Deploy / 🏗️ Build (push) Successful in 10m53s
Build & Deploy / 🚀 Deploy (push) Successful in 27s
Build & Deploy / 🩺 Health Check (push) Failing after 11s
Build & Deploy / 🔔 Notify (push) Successful in 2s
- Added imgproxy service to docker-compose.dev.yml with URL mapping - Implemented robust Base64 encoding for imgproxy source URLs - Synchronized NEXT_PUBLIC_IMGPROXY_URL and NEXT_PUBLIC_BASE_URL - Refactored About page to use existing marc-mintel.png asset - Created shared IconList component and unified list styles project-wide - Fixed vertical alignment issues in IconList items - Updated dev script with aggressive port 3000 and lock file cleanup
369 lines
14 KiB
TypeScript
369 lines
14 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,
|
||
ConceptAutomation,
|
||
ConceptCode,
|
||
ConceptCommunication,
|
||
ConceptPrototyping,
|
||
ConceptSystem,
|
||
ConceptTarget,
|
||
} from "../../src/components/Landing";
|
||
import { Check } from "lucide-react";
|
||
import {
|
||
H2,
|
||
H3,
|
||
H4,
|
||
LeadText,
|
||
BodyText,
|
||
Label,
|
||
} from "../../src/components/Typography";
|
||
import { BackgroundGrid, Card } from "../../src/components/Layout";
|
||
import { MotionButton } from "../../src/components/Button";
|
||
import { IconList, IconListItem } from "../../src/components/IconList";
|
||
|
||
export default function WebsitesPage() {
|
||
return (
|
||
<div className="flex flex-col bg-white overflow-hidden relative">
|
||
<BackgroundGrid />
|
||
|
||
<PageHeader
|
||
title={
|
||
<>
|
||
Websites, die <br />
|
||
<span className="text-slate-200">einfach funktionieren.</span>
|
||
</>
|
||
}
|
||
description="Keine Baukästen, keine Plugins, kein Overhead. Nur sauberer Code und maximale Performance."
|
||
backLink={{ href: "/", label: "Zurück" }}
|
||
backgroundSymbol="W"
|
||
/>
|
||
|
||
{/* Intro / Problem */}
|
||
<Section
|
||
number="01"
|
||
title="Der Ansatz"
|
||
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">
|
||
Ich baue Websites wie Systeme – <br />
|
||
<span className="text-slate-200">nicht wie Broschüren.</span>
|
||
</H3>
|
||
</Reveal>
|
||
<Reveal delay={0.2}>
|
||
<LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
|
||
Eine Website ist kein Flyer. Sie ist ein{" "}
|
||
<span className="text-slate-900">Werkzeug</span>, das jeden Tag
|
||
arbeitet. Deshalb baue ich sie stabil, schnell und wartungsfrei.
|
||
</LeadText>
|
||
</Reveal>
|
||
<Reveal delay={0.4}>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 pt-8">
|
||
{[
|
||
{ label: "Stabil", icon: ConceptSystem },
|
||
{ label: "Schnell", icon: ConceptAutomation },
|
||
{ label: "Wartungsfrei", icon: ConceptCode },
|
||
{ label: "Sicher", icon: ConceptTarget },
|
||
].map((item, i) => (
|
||
<div key={i} className="flex flex-col gap-3 group">
|
||
<div className="w-12 h-12 rounded-xl bg-slate-50 flex items-center justify-center border border-slate-100 group-hover:scale-110 transition-transform duration-500">
|
||
<item.icon className="w-6 h-6" />
|
||
</div>
|
||
<Label className="text-slate-900">{item.label}</Label>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* Speed */}
|
||
<Section
|
||
number="02"
|
||
title="Performance"
|
||
borderTop
|
||
variant="gray"
|
||
illustration={<SpeedPerformance className="w-24 h-24" />}
|
||
>
|
||
<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-200">
|
||
kein Extra. Sie ist Standard.
|
||
</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">
|
||
Viele Websites sind langsam, weil sie zusammengeklickt sind.
|
||
Meine sind schnell, weil sie{" "}
|
||
<span className="text-slate-900">von Grund auf</span>{" "}
|
||
entwickelt wurden.
|
||
</LeadText>
|
||
</Reveal>
|
||
<Reveal delay={0.4}>
|
||
<IconList className="space-y-4">
|
||
{[
|
||
"Seiten laden ohne Verzögerung",
|
||
"Optimiert für Suchmaschinen (SEO)",
|
||
"Bessere Nutzererfahrung",
|
||
"Höhere Conversion-Rates",
|
||
].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="white"
|
||
padding="normal"
|
||
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">Pagespeed Score</Label>
|
||
</Card>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* No Maintenance */}
|
||
<Section
|
||
number="03"
|
||
title="Technik"
|
||
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-200">Keine Abhängigkeiten.</span>
|
||
</H3>
|
||
</Reveal>
|
||
<Reveal delay={0.2}>
|
||
<LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
|
||
Ich nutze keine Baukästen, die sich selbst zerstören. Ihre Website
|
||
besteht aus <span className="text-slate-900">sauberem Code</span>,
|
||
der Ihnen gehört.
|
||
</LeadText>
|
||
</Reveal>
|
||
<Reveal delay={0.4}>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
|
||
<Card variant="white" padding="normal" className="group">
|
||
<div className="space-y-4">
|
||
<Label className="text-slate-900 mb-2">Code Qualität</Label>
|
||
<H4 className="text-2xl">Langlebigkeit</H4>
|
||
<BodyText>
|
||
Modernste Web-Technologien für maximale Performance und
|
||
Wartbarkeit.
|
||
</BodyText>
|
||
</div>
|
||
</Card>
|
||
<Card variant="white" padding="normal" className="group">
|
||
<div className="space-y-4">
|
||
<Label className="text-slate-900 mb-2">Sicherheit</Label>
|
||
<H4 className="text-2xl">Resilienz</H4>
|
||
<BodyText>
|
||
Minimale Angriffsfläche durch Verzicht auf unnötige
|
||
Drittanbieter-Software.
|
||
</BodyText>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* Content/Tech Separation */}
|
||
<Section
|
||
number="04"
|
||
title="Inhalte"
|
||
borderTop
|
||
variant="gray"
|
||
illustration={<LayerSeparation className="w-24 h-24" />}
|
||
>
|
||
<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-200">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">
|
||
Sie können Texte und Bilder selbst anpassen, ohne das Design
|
||
oder die Technik zu gefährden. Ein{" "}
|
||
<span className="text-slate-900">intuitives System</span>{" "}
|
||
sorgt dafür, dass alles an seinem Platz bleibt.
|
||
</LeadText>
|
||
</Reveal>
|
||
</div>
|
||
<div className="md:col-span-5">
|
||
<Reveal delay={0.4}>
|
||
<Card variant="white" padding="normal" className="space-y-8">
|
||
<div className="space-y-4">
|
||
<Label>Ihre Freiheit</Label>
|
||
<div className="flex items-center gap-3 text-xl font-bold text-slate-900">
|
||
<div className="w-8 h-8 rounded-full bg-slate-900 flex items-center justify-center">
|
||
<Check className="w-3 h-3 text-white" />
|
||
</div>
|
||
Inhalte flexibel verwalten
|
||
</div>
|
||
</div>
|
||
<div className="space-y-4 opacity-30">
|
||
<Label>Mein Schutz</Label>
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">
|
||
Design-Chaos
|
||
</div>
|
||
<div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">
|
||
Technische Fehler
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* Simple Changes */}
|
||
<Section
|
||
number="05"
|
||
title="Service"
|
||
borderTop
|
||
illustration={<DirectService className="w-24 h-24" />}
|
||
>
|
||
<div className="space-y-12">
|
||
<Reveal>
|
||
<H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
|
||
Änderungen sind <br />
|
||
<span className="text-slate-200">Teil des Konzepts.</span>
|
||
</H3>
|
||
</Reveal>
|
||
<Reveal delay={0.2}>
|
||
<LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
|
||
Ihr Business entwickelt sich weiter, Ihre Website auch. <br />
|
||
Keine komplizierten Prozesse, sondern{" "}
|
||
<span className="text-slate-900">direkte Umsetzung</span> Ihrer
|
||
Ideen.
|
||
</LeadText>
|
||
</Reveal>
|
||
<Reveal delay={0.4}>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
|
||
<Card
|
||
variant="white"
|
||
padding="normal"
|
||
className="group hover:border-slate-900"
|
||
>
|
||
<ConceptCommunication className="w-12 h-12 mb-8 group-hover:scale-110 transition-all duration-700" />
|
||
<div className="space-y-2">
|
||
<H4 className="text-2xl">Direkter Draht</H4>
|
||
<BodyText>
|
||
Sie sprechen direkt mit dem Entwickler. Keine Stille Post.
|
||
</BodyText>
|
||
</div>
|
||
</Card>
|
||
<Card
|
||
variant="white"
|
||
padding="normal"
|
||
className="group hover:border-slate-900"
|
||
>
|
||
<ConceptPrototyping className="w-12 h-12 mb-8 group-hover:scale-110 transition-all duration-700" />
|
||
<div className="space-y-2">
|
||
<H4 className="text-2xl">Agile Anpassung</H4>
|
||
<BodyText>
|
||
Schnelle Iterationen statt langer Wartezeiten.
|
||
</BodyText>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* Result */}
|
||
<Section
|
||
number="06"
|
||
title="Ergebnis"
|
||
borderTop
|
||
variant="gray"
|
||
illustration={<TaskDone className="w-24 h-24" />}
|
||
>
|
||
<div className="space-y-16">
|
||
<Reveal>
|
||
<H3 className="text-4xl md:text-6xl tracking-tighter">
|
||
Eine Website, die <br />
|
||
<span className="text-slate-200">einfach läuft.</span>
|
||
</H3>
|
||
</Reveal>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
|
||
{[
|
||
{
|
||
title: "Kein Overhead",
|
||
desc: "Fokus auf das, was Ihre Kunden wirklich brauchen.",
|
||
},
|
||
{
|
||
title: "Volle Kontrolle",
|
||
desc: "Der Code gehört Ihnen, ohne Vendor Lock-in.",
|
||
},
|
||
{
|
||
title: "Echte Performance",
|
||
desc: "Messbare Geschwindigkeit für bessere Ergebnisse.",
|
||
},
|
||
].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 für mehr?</Label>
|
||
<LeadText className="text-2xl">
|
||
Lassen Sie uns über Ihr nächstes Projekt sprechen.
|
||
</LeadText>
|
||
</div>
|
||
<MotionButton href="/contact">Projekt anfragen</MotionButton>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
</div>
|
||
);
|
||
}
|