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

blog design

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 21:13:54 +01:00
parent ec0a055c13
commit eafb740b1d
14 changed files with 291 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/websites/page.tsx
View File

@@ -1,37 +1,24 @@
import * as React from 'react';
import { Info, ArrowLeft, Minus } from 'lucide-react';
import Link from 'next/link';
import { Info, Minus } from 'lucide-react';
import { Reveal } from '../../src/components/Reveal';
import { PageHeader } from '../../src/components/PageHeader';
import { Section } from '../../src/components/Section';
export default function WebsitesPage() {
return (
<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>
<Reveal>
<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>
</Reveal>
<Reveal delay={0.2}>
<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>
</Reveal>
</section>
<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 digitale Systeme mit klaren Preisen und Ergebnissen – keine Stunden, keine Überraschungen."
backLink={{ href: '/', label: 'Zurück' }}
backgroundSymbol="€"
/>
{/* 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>
<Section number="01" title="Die Basis">
<div className="space-y-20">
<Reveal>
<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>
@@ -66,12 +53,10 @@ export default function WebsitesPage() {
</div>
</Reveal>
</div>
</section>
</Section>
{/* 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>
<Section number="02" title="Produktion" numberPosition="left">
<div className="space-y-32">
{/* Seite */}
<Reveal>
@@ -128,15 +113,13 @@ export default function WebsitesPage() {
</div>
</Reveal>
</div>
</section>
</Section>
{/* 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>
<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>
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400">Betrieb</h2>
<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>
@@ -160,8 +143,7 @@ export default function WebsitesPage() {
</div>
</div>
</Reveal>
</section>
</Section>
</div>
);
}