chore: overhaul infrastructure and integrate @mintel packages
Some checks failed
🧪 CI (QA) / 🧪 Quality Assurance (push) Failing after 1m3s
Some checks failed
🧪 CI (QA) / 🧪 Quality Assurance (push) Failing after 1m3s
- Restructure to pnpm monorepo (site moved to apps/web) - Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config - Implement Docker service architecture (Varnish, Directus, Gatekeeper) - Setup environment-aware Gitea Actions deployment
This commit is contained in:
309
apps/web/app/websites/page.tsx
Normal file
309
apps/web/app/websites/page.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
'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';
|
||||
|
||||
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}>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
'Seiten laden ohne Verzögerung',
|
||||
'Optimiert für Suchmaschinen (SEO)',
|
||||
'Bessere Nutzererfahrung',
|
||||
'Höhere Conversion-Rates',
|
||||
].map((item, i) => (
|
||||
<li key={i} className="flex items-center gap-4 group">
|
||||
<div className="w-1.5 h-1.5 bg-slate-900 rounded-full group-hover:scale-150 transition-transform" />
|
||||
<LeadText className="text-lg md:text-xl">{item}</LeadText>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user