149 lines
8.5 KiB
TypeScript
149 lines
8.5 KiB
TypeScript
import { Info, Minus } from 'lucide-react';
|
||
import { PageHeader } from '../../src/components/PageHeader';
|
||
import { Reveal } from '../../src/components/Reveal';
|
||
import { Section } from '../../src/components/Section';
|
||
|
||
export default function WebsitesPage() {
|
||
return (
|
||
<div className="flex flex-col gap-48 py-12 md:py-24 overflow-hidden">
|
||
<PageHeader
|
||
title={<>Websites <br /><span className="text-slate-200">& Preise.</span></>}
|
||
description="Ich baue Websites mit klaren Preisen und Ergebnissen – keine Stunden, keine Überraschungen."
|
||
backLink={{ href: '/', label: 'Zurück' }}
|
||
backgroundSymbol="€"
|
||
/>
|
||
|
||
{/* 1. Website - Designed Pricing */}
|
||
<Section number="01" title="Die Basis">
|
||
<div className="space-y-20">
|
||
<Reveal>
|
||
<div className="border-l-4 border-slate-900 pl-12 py-6">
|
||
<div className="flex flex-col md:flex-row md:items-baseline gap-6 mb-8">
|
||
<div className="text-7xl md:text-9xl font-bold text-slate-900 tracking-tighter">6.000 €</div>
|
||
<div className="text-slate-300 font-serif italic text-2xl">einmalig</div>
|
||
</div>
|
||
<p className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tighter">
|
||
Die Grundlage für jede Website.
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
|
||
<Reveal delay={0.2}>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-8">
|
||
{[
|
||
'Projekt-Setup & Infrastruktur',
|
||
'Hosting-Bereitstellung',
|
||
'Grundstruktur & Design-Vorlage',
|
||
'technisches SEO-Basics',
|
||
'Analytics (mit Mail-Report)',
|
||
'Livegang',
|
||
].map((item, i) => (
|
||
<div key={i} className="flex items-center gap-4 text-xl text-slate-600 font-serif border-b border-slate-100 pb-4">
|
||
<div className="w-1.5 h-1.5 bg-slate-900 rounded-full"></div>
|
||
<span>{item}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.4}>
|
||
<div className="pt-12 flex items-start gap-4 text-sm text-slate-400 italic font-serif max-w-md">
|
||
<Info className="w-5 h-5 shrink-0 mt-0.5 text-slate-200" />
|
||
<p>Enthält keine Seiten, Inhalte oder Funktionen. Diese werden nach Bedarf ergänzt.</p>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* 2. Entwicklung - Designed Grid */}
|
||
<Section number="02" title="Produktion">
|
||
<div className="space-y-32">
|
||
{/* Seite */}
|
||
<Reveal>
|
||
<div className="relative group p-12 border border-slate-200 rounded-[3rem] bg-white hover:border-slate-400 transition-all duration-500">
|
||
<div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors opacity-50">S</div>
|
||
<div className="flex justify-between items-baseline mb-8 border-b border-slate-100 pb-6">
|
||
<h3 className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">Seite</h3>
|
||
<div className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">800 €</div>
|
||
</div>
|
||
<p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl">
|
||
Individuell gestaltete Seite – mit Layout, Struktur, Textaufteilung, responsivem Design.
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
|
||
{/* Feature */}
|
||
<Reveal delay={0.2}>
|
||
<div className="relative group p-12 border border-slate-200 rounded-[3rem] bg-white hover:border-slate-400 transition-all duration-500">
|
||
<div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors opacity-50">F</div>
|
||
<div className="flex justify-between items-baseline mb-8 border-b border-slate-100 pb-6">
|
||
<h3 className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">Feature</h3>
|
||
<div className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">2.000 €</div>
|
||
</div>
|
||
<p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl mb-12">
|
||
Ein in sich geschlossenes System mit Datenstruktur, Darstellung und Pflegefähigkeit.
|
||
</p>
|
||
<div className="flex flex-wrap gap-x-8 gap-y-4">
|
||
{['Blog', 'News', 'Jobs', 'Referenzen', 'Events', 'Produktbereich'].map(tag => (
|
||
<span key={tag} className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-300 hover:text-slate-900 transition-colors cursor-default">{tag}</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
|
||
{/* Funktion */}
|
||
<Reveal delay={0.4}>
|
||
<div className="relative group p-12 border border-slate-200 rounded-[3rem] bg-white hover:border-slate-400 transition-all duration-500">
|
||
<div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors opacity-50">L</div>
|
||
<div className="flex justify-between items-baseline mb-8 border-b border-slate-100 pb-6">
|
||
<h3 className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">Funktion</h3>
|
||
<div className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">1.000 €</div>
|
||
</div>
|
||
<p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl mb-12">
|
||
Funktionen liefern Logik und Interaktion.
|
||
</p>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-6 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
|
||
<div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> Kontaktformular</div>
|
||
<div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> Suche & Filter</div>
|
||
<div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> PDF-Export</div>
|
||
<div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> API-Anbindungen</div>
|
||
<div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> Mailversand</div>
|
||
<div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> Automatisierung</div>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* 5. Betrieb - Designed Box */}
|
||
<Section number="03" title="Betrieb">
|
||
<Reveal width="100%">
|
||
<div className="bg-white border border-slate-200 rounded-[3rem] p-16 md:p-24 space-y-16 relative overflow-hidden -mx-4 md:-mx-24 hover:border-slate-400 transition-all duration-500">
|
||
<div className="absolute top-0 right-0 text-[20rem] font-bold text-slate-50 select-none translate-x-1/4 -translate-y-1/4 opacity-50">B</div>
|
||
<div className="flex items-baseline gap-6">
|
||
<div className="text-7xl md:text-9xl font-bold tracking-tighter text-slate-900">120 €</div>
|
||
<div className="text-slate-400 font-serif italic text-2xl">/ Monat</div>
|
||
</div>
|
||
<p className="text-3xl md:text-4xl font-bold leading-tight tracking-tight text-slate-900">
|
||
Hosting, Wartung & Sicherheit. <br />
|
||
<span className="text-slate-400">Damit Sie sich um nichts kümmern müssen.</span>
|
||
</p>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-8 pt-12 border-t border-slate-200">
|
||
{[
|
||
'Webhosting & Verfügbarkeit',
|
||
'Sicherheitsupdates & Backups',
|
||
'Analytics inkl. Reports',
|
||
'Medien-Speicher (20 GB)',
|
||
].map((item, i) => (
|
||
<div key={i} className="flex items-center gap-4 text-xl text-slate-600 font-serif">
|
||
<div className="w-1.5 h-1.5 bg-slate-900 rounded-full"></div>
|
||
<span>{item}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
</Section>
|
||
</div>
|
||
);
|
||
}
|