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 22:02:45 +01:00
parent ae303d8a5a
commit a2e048826f
18 changed files with 396 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/websites/page.tsx
View File

@@ -18,12 +18,12 @@ export default function WebsitesPage() {
<Section number="01" title="Die Basis">
<div className="space-y-20">
<Reveal>
<div className="border-l-4 border-slate-900 pl-12 py-4">
<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 font-bold text-slate-900 leading-tight tracking-tight">
<p className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tighter">
Die Grundlage für jede Website.
</p>
</div>
@@ -60,13 +60,13 @@ export default function WebsitesPage() {
<div className="space-y-32">
{/* Seite */}
<Reveal>
<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 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 text-slate-500 font-serif leading-relaxed max-w-2xl">
<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>
@@ -74,18 +74,18 @@ export default function WebsitesPage() {
{/* Feature */}
<Reveal delay={0.2}>
<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 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 text-slate-500 font-serif leading-relaxed max-w-2xl mb-12">
<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-xs font-bold uppercase tracking-[0.3em] text-slate-300">{tag}</span>
<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>
@@ -93,16 +93,16 @@ export default function WebsitesPage() {
{/* Funktion */}
<Reveal delay={0.4}>
<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 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 text-slate-500 font-serif leading-relaxed max-w-2xl mb-12">
<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-sm font-bold uppercase tracking-[0.2em] text-slate-400">
<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>
@@ -118,8 +118,8 @@ export default function WebsitesPage() {
{/* 5. Betrieb - Designed Box */}
<Section number="03" title="Betrieb" numberPosition="right">
<Reveal width="100%">
<div className="bg-slate-50 border-2 border-slate-900 p-16 md:p-24 space-y-16 relative overflow-hidden -mx-4 md:-mx-24">
<div className="absolute top-0 right-0 text-[20rem] font-bold text-slate-200/20 select-none translate-x-1/4 -translate-y-1/4">B</div>
<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>