mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 19:06:45 +01:00
parent 2b56f317f7
commit 1cc583c976
7 changed files with 675 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
app/websites/page.tsx Normal file
View File

@@ -0,0 +1,164 @@
import React from 'react';
import { Check, Info, ArrowLeft, Mail } 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">
<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>
<p className="text-xl md:text-2xl text-slate-500 font-serif italic leading-relaxed">
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>
</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>
</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">
{/* 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>
<p className="text-slate-500 font-serif text-lg leading-relaxed max-w-xl">
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>
<p className="text-slate-500 font-serif text-lg leading-relaxed max-w-xl mb-6">
Ein in sich geschlossenes System mit Datenstruktur, Darstellung und Pflegefähigkeit.
</p>
<div className="flex flex-wrap gap-x-4 gap-y-2">
{['Blog', 'News', 'Jobs', 'Referenzen', 'Events', 'Produktbereich'].map(tag => (
<span key={tag} className="text-xs font-mono uppercase tracking-widest text-slate-400">{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>
<p className="text-slate-500 font-serif text-lg leading-relaxed max-w-xl mb-8">
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>
</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>
</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>
</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.
</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"
>
<Mail className="w-5 h-5" />
Anfrage senden
</a>
</section>
</div>
);
}