design
This commit is contained in:
@@ -1,161 +1,159 @@
|
||||
import React from 'react';
|
||||
import { Check, Info, ArrowLeft, Mail } from 'lucide-react';
|
||||
import { Info, ArrowLeft, Mail, Minus } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function WebsitesPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-24 py-20 md:py-32">
|
||||
{/* Header */}
|
||||
<section className="narrow-container">
|
||||
<Link href="/" className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-12 transition-colors font-mono text-xs uppercase tracking-widest">
|
||||
<div className="flex flex-col gap-48 py-24 md:py-48 overflow-hidden">
|
||||
{/* Header - Designed */}
|
||||
<section className="narrow-container relative">
|
||||
<div className="absolute -left-24 -top-24 text-[20rem] font-bold text-slate-50 select-none -z-10">€</div>
|
||||
<Link href="/" className="inline-flex items-center gap-2 text-slate-300 hover:text-slate-900 mb-16 transition-colors font-mono text-xs uppercase tracking-[0.3em]">
|
||||
<ArrowLeft className="w-3 h-3" /> Zurück
|
||||
</Link>
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 tracking-tight mb-8 leading-tight">
|
||||
Websites & Preise
|
||||
<h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9] mb-12">
|
||||
Websites <br />
|
||||
<span className="text-slate-200">& Preise.</span>
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-slate-500 font-serif italic leading-relaxed">
|
||||
<p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl">
|
||||
Ich baue digitale Systeme mit klaren Preisen und Ergebnissen – keine Stunden, keine Überraschungen.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* 1. Website - Fixpreis */}
|
||||
<section className="narrow-container">
|
||||
<div className="border-t-4 border-slate-900 pt-12">
|
||||
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mb-8">1. Website – Fixpreis</h2>
|
||||
<div className="flex flex-col md:flex-row md:items-baseline gap-4 mb-12">
|
||||
<div className="text-6xl font-bold text-slate-900">6.000 €</div>
|
||||
<div className="text-slate-400 font-serif italic text-xl">einmalige Basis</div>
|
||||
{/* 1. Website - Designed Pricing */}
|
||||
<section className="narrow-container relative">
|
||||
<div className="absolute -right-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">01</div>
|
||||
<div className="space-y-20">
|
||||
<div className="border-l-4 border-slate-900 pl-12 py-4">
|
||||
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-12">Die Basis</h2>
|
||||
<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 font-bold text-slate-900 leading-tight tracking-tight">
|
||||
Die Grundlage für jede Website.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-10">
|
||||
<p className="text-xl text-slate-700 font-serif leading-relaxed">
|
||||
Die Grundlage für jede Website:
|
||||
</p>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-4">
|
||||
{[
|
||||
'Projekt-Setup & Infrastruktur',
|
||||
'Hosting-Bereitstellung',
|
||||
'Grundstruktur & Design-Vorlage',
|
||||
'technisches SEO-Basics',
|
||||
'Analytics (mit Mail-Report)',
|
||||
'Livegang',
|
||||
].map((item, i) => (
|
||||
<li key={i} className="flex items-center gap-3 border-b border-slate-50 pb-2">
|
||||
<Check className="w-4 h-4 text-slate-900 shrink-0" />
|
||||
<span className="text-slate-600 font-serif">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-8 flex items-start gap-3 text-sm text-slate-400 italic font-serif">
|
||||
<Info className="w-4 h-4 shrink-0 mt-0.5 text-slate-300" />
|
||||
<p>Enthält keine Seiten, Inhalte oder Funktionen. Diese werden nach Bedarf ergänzt.</p>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. Entwicklung (Produktion) */}
|
||||
<section className="narrow-container">
|
||||
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mb-12">2. Entwicklung (Produktion)</h2>
|
||||
<div className="space-y-16">
|
||||
{/* 2. Entwicklung - Designed Grid */}
|
||||
<section className="narrow-container relative">
|
||||
<div className="absolute -left-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">02</div>
|
||||
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-24">Produktion</h2>
|
||||
<div className="space-y-32">
|
||||
{/* Seite */}
|
||||
<div className="group">
|
||||
<div className="flex justify-between items-baseline mb-4 border-b border-slate-100 pb-4">
|
||||
<h3 className="text-2xl font-bold text-slate-900">Seite</h3>
|
||||
<div className="text-2xl font-bold text-slate-900">800 €</div>
|
||||
<div className="relative group">
|
||||
<div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">S</div>
|
||||
<div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
|
||||
<h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Seite</h3>
|
||||
<div className="text-4xl font-bold text-slate-900 tracking-tighter">800 €</div>
|
||||
</div>
|
||||
<p className="text-slate-500 font-serif text-lg leading-relaxed max-w-xl">
|
||||
<p className="text-2xl text-slate-500 font-serif leading-relaxed max-w-2xl">
|
||||
Individuell gestaltete Seite – mit Layout, Struktur, Textaufteilung, responsivem Design.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature */}
|
||||
<div className="group">
|
||||
<div className="flex justify-between items-baseline mb-4 border-b border-slate-100 pb-4">
|
||||
<h3 className="text-2xl font-bold text-slate-900">Feature (System)</h3>
|
||||
<div className="text-2xl font-bold text-slate-900">2.000 €</div>
|
||||
<div className="relative group">
|
||||
<div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">F</div>
|
||||
<div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
|
||||
<h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Feature</h3>
|
||||
<div className="text-4xl font-bold text-slate-900 tracking-tighter">2.000 €</div>
|
||||
</div>
|
||||
<p className="text-slate-500 font-serif text-lg leading-relaxed max-w-xl mb-6">
|
||||
<p className="text-2xl text-slate-500 font-serif leading-relaxed max-w-2xl mb-12">
|
||||
Ein in sich geschlossenes System mit Datenstruktur, Darstellung und Pflegefähigkeit.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-x-4 gap-y-2">
|
||||
<div className="flex flex-wrap gap-x-8 gap-y-4">
|
||||
{['Blog', 'News', 'Jobs', 'Referenzen', 'Events', 'Produktbereich'].map(tag => (
|
||||
<span key={tag} className="text-xs font-mono uppercase tracking-widest text-slate-400">{tag}</span>
|
||||
<span key={tag} className="text-xs font-bold uppercase tracking-[0.3em] text-slate-300">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Funktion */}
|
||||
<div className="group">
|
||||
<div className="flex justify-between items-baseline mb-4 border-b border-slate-100 pb-4">
|
||||
<h3 className="text-2xl font-bold text-slate-900">Funktion (Logik)</h3>
|
||||
<div className="text-2xl font-bold text-slate-900">1.000 €</div>
|
||||
<div className="relative group">
|
||||
<div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">L</div>
|
||||
<div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
|
||||
<h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Funktion</h3>
|
||||
<div className="text-4xl font-bold text-slate-900 tracking-tighter">1.000 €</div>
|
||||
</div>
|
||||
<p className="text-slate-500 font-serif text-lg leading-relaxed max-w-xl mb-8">
|
||||
<p className="text-2xl text-slate-500 font-serif leading-relaxed max-w-2xl mb-12">
|
||||
Funktionen liefern Logik und Interaktion.
|
||||
</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm font-mono uppercase tracking-wider text-slate-400">
|
||||
<div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> Kontaktformular</div>
|
||||
<div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> Suche & Filter</div>
|
||||
<div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> PDF-Export</div>
|
||||
<div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> API-Anbindungen</div>
|
||||
<div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> Mailversand</div>
|
||||
<div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> Automatisierung</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-6 text-sm 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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. Design & Interaktion */}
|
||||
<section className="narrow-container">
|
||||
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mb-12">3. Design & Interaktion (Extras)</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div>
|
||||
<h3 className="font-bold text-slate-900 mb-2 text-lg">Visuelle Inszenierung</h3>
|
||||
<div className="text-slate-900 font-bold mb-4 text-xl">2.000 € <span className="text-sm text-slate-400 font-normal">/ Abschnitt</span></div>
|
||||
<p className="text-slate-500 font-serif leading-relaxed">
|
||||
Erweiterte Gestaltung: Hero-Story, visuelle Abläufe, Scroll-Effekte, speziell inszenierte Sektionen.
|
||||
</p>
|
||||
{/* 5. Betrieb - Designed Box */}
|
||||
<section className="narrow-container relative">
|
||||
<div className="absolute -right-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">03</div>
|
||||
<div className="bg-slate-900 text-white p-16 md:p-24 space-y-16 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 text-[20rem] font-bold text-white/5 select-none translate-x-1/4 -translate-y-1/4">B</div>
|
||||
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-500">Betrieb</h2>
|
||||
<div className="flex items-baseline gap-6">
|
||||
<div className="text-7xl md:text-9xl font-bold tracking-tighter">120 €</div>
|
||||
<div className="text-slate-500 font-serif italic text-2xl">/ Monat</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-slate-900 mb-2 text-lg">Komplexe Interaktion</h3>
|
||||
<div className="text-slate-900 font-bold mb-4 text-xl">1.500 € <span className="text-sm text-slate-400 font-normal">/ Interaktion</span></div>
|
||||
<p className="text-slate-500 font-serif leading-relaxed">
|
||||
Dargestellte, interaktive UI-Erlebnisse: Konfiguratoren, Live-Previews, mehrstufige Auswahlprozesse.
|
||||
</p>
|
||||
<p className="text-3xl md:text-4xl font-bold leading-tight tracking-tight">
|
||||
Hosting, Wartung & Sicherheit. <br />
|
||||
<span className="text-slate-500">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-white/10">
|
||||
{[
|
||||
'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-400 font-serif">
|
||||
<div className="w-1.5 h-1.5 bg-white rounded-full"></div>
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 5. Betrieb & Wartung */}
|
||||
<section className="narrow-container">
|
||||
<div className="bg-slate-50 p-12 rounded-sm border border-slate-100">
|
||||
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mb-8">5. Betrieb & Wartung (Pflicht)</h2>
|
||||
<div className="flex items-baseline gap-2 mb-10">
|
||||
<div className="text-5xl font-bold text-slate-900">120 €</div>
|
||||
<div className="text-slate-400 font-serif italic text-xl">/ Monat</div>
|
||||
</div>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 gap-4 text-slate-600 font-serif">
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-900" /> Webhosting & Verfügbarkeit</li>
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-900" /> Sicherheitsupdates & Backups</li>
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-900" /> Analytics inkl. Reports</li>
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-900" /> Medien-Speicher (20 GB)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="narrow-container text-center py-20 border-t border-slate-100">
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-8 tracking-tight">Bereit für ein Projekt?</h2>
|
||||
<p className="text-xl text-slate-500 font-serif mb-12 leading-relaxed">
|
||||
Schreiben Sie mir einfach, was Sie vorhaben. <br />
|
||||
Ich erstelle Ihnen ein passendes Angebot.
|
||||
{/* CTA - Designed Impact */}
|
||||
<section className="narrow-container text-center py-32 border-t border-slate-100">
|
||||
<h2 className="text-6xl md:text-8xl font-bold text-slate-900 mb-12 tracking-tighter">Bereit?</h2>
|
||||
<p className="text-2xl md:text-3xl text-slate-500 font-serif mb-20 leading-tight italic max-w-xl mx-auto">
|
||||
Schreiben Sie mir einfach, was Sie vorhaben. Ich erstelle Ihnen ein passendes Angebot.
|
||||
</p>
|
||||
<a
|
||||
href="mailto:marc@mintel.me"
|
||||
className="inline-flex items-center gap-3 bg-slate-900 text-white px-10 py-5 rounded-sm font-bold text-lg hover:bg-slate-800 transition-colors"
|
||||
className="inline-flex items-center gap-6 bg-slate-900 text-white px-12 py-6 font-bold text-2xl hover:bg-slate-800 transition-all hover:scale-[1.05]"
|
||||
>
|
||||
<Mail className="w-5 h-5" />
|
||||
<Mail className="w-8 h-8" />
|
||||
Anfrage senden
|
||||
</a>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user