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:44:55 +01:00
parent 762226f744
commit ec0a055c13
16 changed files with 535 additions and 5413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/blog/page.tsx
View File

@@ -1,6 +1,7 @@
'use client'; 'use client';
import React, { useState, useEffect } from 'react'; import * as React from 'react';
import { useState, useEffect } from 'react';
import { MediumCard } from '../../src/components/MediumCard'; import { MediumCard } from '../../src/components/MediumCard';
import { SearchBar } from '../../src/components/SearchBar'; import { SearchBar } from '../../src/components/SearchBar';
import { Tag } from '../../src/components/Tag'; import { Tag } from '../../src/components/Tag';
@@ -44,11 +45,11 @@ export default function BlogPage() {
{/* Clean Hero Section */} {/* Clean Hero Section */}
<section className="pt-10 pb-8 md:pt-12 md:pb-10 relative overflow-hidden"> <section className="pt-10 pb-8 md:pt-12 md:pb-10 relative overflow-hidden">
{/* Animated Background */} {/* Animated Background */}
<div className="absolute inset-0 bg-gradient-to-br from-white via-slate-50/30 to-blue-50/20 animate-gradient-shift"></div> <div className="absolute inset-0 bg-gradient-to-br from-white via-slate-50/30 to-slate-100/20 animate-gradient-shift"></div>
{/* Morphing Blob */} {/* Morphing Blob */}
<div className="absolute inset-0 flex items-center justify-center pointer-events-none"> <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
<div className="w-48 h-48 bg-gradient-to-br from-blue-200/15 via-purple-200/10 to-indigo-200/15 animate-morph"></div> <div className="w-48 h-48 bg-gradient-to-br from-slate-200/15 via-slate-100/10 to-slate-200/15 animate-morph"></div>
</div> </div>
{/* Animated Drawing Paths */} {/* Animated Drawing Paths */}
@@ -59,10 +60,10 @@ export default function BlogPage() {
</svg> </svg>
{/* Floating Shapes */} {/* Floating Shapes */}
<div className="absolute top-10 left-10 w-20 h-20 bg-blue-100/20 rounded-full animate-float-1"></div> <div className="absolute top-10 left-10 w-20 h-20 bg-slate-100/20 rounded-full animate-float-1"></div>
<div className="absolute top-20 right-20 w-16 h-16 bg-indigo-100/20 rotate-45 animate-float-2"></div> <div className="absolute top-20 right-20 w-16 h-16 bg-slate-100/20 rotate-45 animate-float-2"></div>
<div className="absolute bottom-20 left-1/4 w-12 h-12 bg-purple-100/20 rounded-full animate-float-3"></div> <div className="absolute bottom-20 left-1/4 w-12 h-12 bg-slate-100/20 rounded-full animate-float-3"></div>
<div className="absolute bottom-10 right-1/3 w-24 h-24 bg-cyan-100/20 animate-float-4"></div> <div className="absolute bottom-10 right-1/3 w-24 h-24 bg-slate-100/20 animate-float-4"></div>
<div className="max-w-3xl mx-auto px-6 relative z-10"> <div className="max-w-3xl mx-auto px-6 relative z-10">
<div className="text-center animate-fade-in"> <div className="text-center animate-fade-in">

65
app/contact/page.tsx Normal file
View File

@@ -0,0 +1,65 @@
import * as React from 'react';
import { ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import { Reveal } from '../../src/components/Reveal';
export default function ContactPage() {
return (
<div className="flex flex-col gap-24 py-24 md:py-48 overflow-hidden">
<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>
<div className="space-y-16">
<Reveal>
<h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
Kontakt <br />
<span className="text-slate-200">& Anfrage.</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">
Haben Sie ein Projekt im Kopf? Schreiben Sie mir einfach. Ich antworte meistens innerhalb von 24 Stunden.
</p>
</Reveal>
</div>
</section>
<section className="narrow-container">
<div className="grid grid-cols-1 gap-24">
<Reveal delay={0.4}>
<div className="space-y-8">
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400">Direkt</h2>
<a
href="mailto:marc@mintel.me"
className="group block space-y-2"
>
<span className="text-xs font-bold uppercase tracking-widest text-slate-300 group-hover:text-slate-900 transition-colors">Email</span>
<p className="text-3xl md:text-5xl font-bold text-slate-900 border-b-4 border-slate-100 group-hover:border-slate-900 transition-all pb-4">
marc@mintel.me
</p>
</a>
</div>
</Reveal>
<Reveal delay={0.6}>
<div className="p-12 border-2 border-slate-900 bg-slate-50 relative overflow-hidden">
<div className="absolute top-0 right-0 text-[15rem] font-bold text-slate-200/20 select-none translate-x-1/4 -translate-y-1/4">!</div>
<div className="relative z-10 space-y-8">
<h2 className="text-2xl font-bold text-slate-900">Was ich von Ihnen brauche:</h2>
<ul className="space-y-6 text-xl md:text-2xl text-slate-600 font-serif italic">
<li className="flex gap-6"><span className="text-slate-900 font-bold font-sans not-italic">01</span> Was ist das Ziel des Projekts?</li>
<li className="flex gap-6"><span className="text-slate-900 font-bold font-sans not-italic">02</span> Gibt es eine Deadline?</li>
<li className="flex gap-6"><span className="text-slate-900 font-bold font-sans not-italic">03</span> Welches Budget ist eingeplant?</li>
</ul>
</div>
</div>
</Reveal>
</div>
</section>
</div>
);
}

22
app/globals.css
View File

@@ -53,7 +53,7 @@
} }
a { a {
@apply text-blue-600 hover:text-blue-800 transition-colors; @apply text-slate-900 hover:text-slate-700 transition-colors underline underline-offset-4;
} }
ul, ol { ul, ol {
@@ -76,7 +76,7 @@
a:focus, a:focus,
button:focus, button:focus,
input:focus { input:focus {
outline: 2px solid #3b82f6; outline: 2px solid #0f172a;
outline-offset: 2px; outline-offset: 2px;
} }
} }
@@ -108,7 +108,7 @@
} }
.search-box { .search-box {
@apply w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue-400 transition-colors; @apply w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-slate-900 transition-colors;
background: rgba(255,255,255,0.9); background: rgba(255,255,255,0.9);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@@ -182,7 +182,7 @@
} }
.btn-primary { .btn-primary {
@apply bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded transition-colors; @apply bg-slate-900 hover:bg-slate-800 text-white px-3 py-1.5 rounded transition-colors;
} }
.btn-secondary { .btn-secondary {
@@ -309,8 +309,8 @@
/* Selection color */ /* Selection color */
::selection { ::selection {
background: #bfdbfe; background: #0f172a;
color: #1e40af; color: #ffffff;
} }
/* Tag Styles */ /* Tag Styles */
@@ -353,8 +353,8 @@
} }
.highlighter-blue { .highlighter-blue {
background: linear-gradient(135deg, rgba(100, 181, 246, 0.95) 0%, rgba(66, 165, 245, 0.95) 100%); background: linear-gradient(135deg, rgba(226, 232, 240, 0.95) 0%, rgba(203, 213, 225, 0.95) 100%);
color: #001f3f; color: #0f172a;
} }
.highlighter-tag:hover::before { .highlighter-tag:hover::before {
@@ -374,10 +374,10 @@
} }
.highlighter-tag:focus { .highlighter-tag:focus {
outline: 2px solid #3b82f6; outline: 2px solid #0f172a;
outline-offset: 2px; outline-offset: 2px;
transform: rotate(-1deg) translateY(-2px) scale(1.05); transform: rotate(-1deg) translateY(-2px) scale(1.05);
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3), 3px 3px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.1), 3px 3px 0 rgba(0, 0, 0, 0.15);
} }
/* Marker Title Styles */ /* Marker Title Styles */
@@ -570,7 +570,7 @@
} }
.fallback-link { .fallback-link {
color: #3b82f6; @apply text-slate-900 underline underline-offset-4;
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
margin-top: 0.25rem; margin-top: 0.25rem;

2
app/layout.tsx
View File

@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';
import './globals.css'; import './globals.css';
import { Footer } from '../src/components/Footer'; import { Footer } from '../src/components/Footer';
import { Header } from '../src/components/Header'; import { Header } from '../src/components/Header';
import { CTA } from '../src/components/CTA';
import { InteractiveElements } from '../src/components/InteractiveElements'; import { InteractiveElements } from '../src/components/InteractiveElements';
import { Analytics } from '../src/components/Analytics'; import { Analytics } from '../src/components/Analytics';
@@ -33,6 +34,7 @@ export default function RootLayout({
<main> <main>
{children} {children}
</main> </main>
<CTA />
<Footer /> <Footer />
<InteractiveElements /> <InteractiveElements />
<Analytics /> <Analytics />

279
app/page.tsx
View File

@@ -1,29 +1,48 @@
import React from 'react'; import * as React from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { ArrowRight, MessageSquare, Minus, Zap, Shield, Clock } from 'lucide-react'; import { ArrowRight, Minus, Zap, Shield, Clock } from 'lucide-react';
import { Reveal } from '../src/components/Reveal';
export default function LandingPage() { export default function LandingPage() {
return ( return (
<div className="flex flex-col gap-48 py-24 md:py-48 overflow-hidden"> <div className="flex flex-col gap-48 pt-12 md:pt-24 pb-24 md:pb-48 overflow-hidden">
{/* Hero Section - High Impact */} {/* Hero Section - High Impact */}
<section className="narrow-container relative"> <section className="narrow-container relative">
<div className="absolute -left-24 -top-24 text-[20rem] font-bold text-slate-50 select-none -z-10">00</div> <div className="absolute -left-24 -top-24 text-[20rem] font-bold text-slate-50 select-none -z-10">00</div>
<div className="space-y-16 relative"> <div className="space-y-16 relative">
<h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9] animate-fade-in"> <Reveal>
Digitale Systeme <br /> <h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
<span className="text-slate-200">ohne Overhead.</span> Digitale Systeme <br />
</h1> <span className="text-slate-200">ohne Overhead.</span>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end"> </h1>
<div className="space-y-6 text-2xl text-slate-400 font-serif italic leading-tight"> </Reveal>
<p className="animate-slide-up [animation-delay:200ms]">Agenturen sind zu langsam.</p> <div className="space-y-32">
<p className="animate-slide-up [animation-delay:400ms]">CMS will keiner pflegen.</p> <div className="space-y-16 max-w-4xl">
<p className="animate-slide-up [animation-delay:600ms]">Digitale Themen bleiben liegen.</p> {[
</div> { title: 'Agenturen sind zu langsam.', desc: 'Wochenlange Konzepte statt schneller Ergebnisse.' },
<div className="animate-slide-up [animation-delay:800ms] border-l-2 border-slate-900 pl-8"> { title: 'CMS will keiner pflegen.', desc: 'Ich baue Systeme, die so einfach sind, dass sie wirklich genutzt werden.' },
<p className="text-3xl font-bold text-slate-900 leading-tight"> { title: 'Digitale Themen bleiben liegen.', desc: 'Weil der Overhead die Umsetzung erstickt.' },
Ich mache das anders. ].map((item, i) => (
</p> <Reveal key={i} delay={0.2 * (i + 1)}>
<div className="group flex gap-8 md:gap-12">
<span className="text-sm font-mono text-slate-200 group-hover:text-slate-900 transition-colors pt-2">0{i+1}</span>
<div className="space-y-3">
<p className="text-3xl md:text-5xl font-bold text-slate-900 tracking-tight">{item.title}</p>
<p className="text-xl md:text-2xl text-slate-400 font-serif italic leading-tight">{item.desc}</p>
</div>
</div>
</Reveal>
))}
</div> </div>
<Reveal delay={0.8}>
<div className="border-l-4 border-slate-900 pl-12 py-4">
<p className="text-4xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-none">
Kein Zirkus. <br />
<span className="text-slate-200">Nur Ergebnisse.</span>
</p>
</div>
</Reveal>
</div> </div>
</div> </div>
</section> </section>
@@ -33,29 +52,37 @@ export default function LandingPage() {
<div className="absolute -right-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">01</div> <div className="absolute -right-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">01</div>
<div className="grid grid-cols-1 md:grid-cols-12 gap-12"> <div className="grid grid-cols-1 md:grid-cols-12 gap-12">
<div className="md:col-span-5 space-y-8"> <div className="md:col-span-5 space-y-8">
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400">Das Versprechen</h2> <Reveal>
<p className="text-4xl font-bold text-slate-900 leading-[1.1]"> <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400">Das Versprechen</h2>
Direkt. <br /> <p className="text-4xl font-bold text-slate-900 leading-[1.1]">
Sauber. <br /> Direkt. <br />
Ohne Zirkus. Sauber. <br />
</p> Ohne Zirkus.
</p>
</Reveal>
</div> </div>
<div className="md:col-span-7"> <div className="md:col-span-7">
<div className="prose prose-slate font-serif text-2xl leading-relaxed text-slate-700"> <div className="prose prose-slate font-serif text-2xl leading-relaxed text-slate-700">
<p> <Reveal delay={0.2}>
Ich setze digitale Systeme für Unternehmen um – ohne Workshops, ohne Tickets, ohne Tech-Blabla. <p>
</p> Ich setze digitale Systeme für Unternehmen um – ohne Workshops, ohne Tickets, ohne Tech-Blabla.
</p>
</Reveal>
<div className="mt-12 grid grid-cols-1 gap-8 not-prose"> <div className="mt-12 grid grid-cols-1 gap-8 not-prose">
<div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group"> <Reveal delay={0.4}>
<Zap className="w-6 h-6 mb-4 text-slate-300 group-hover:text-slate-900 transition-colors" /> <div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
<h3 className="text-xl font-bold text-slate-900 mb-2">Websites & Tools</h3> <Zap className="w-6 h-6 mb-4 text-slate-300 group-hover:text-slate-900 transition-colors" />
<p className="text-slate-500 font-serif text-lg">Alles, was Ihr Unternehmen digital voranbringt.</p> <h3 className="text-xl font-bold text-slate-900 mb-2">Websites & Tools</h3>
</div> <p className="text-slate-500 font-serif text-lg">Alles, was Ihr Unternehmen digital voranbringt.</p>
<div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group"> </div>
<Shield className="w-6 h-6 mb-4 text-slate-300 group-hover:text-slate-900 transition-colors" /> </Reveal>
<h3 className="text-xl font-bold text-slate-900 mb-2">Kein Overhead</h3> <Reveal delay={0.6}>
<p className="text-slate-500 font-serif text-lg">Sie erklären, ich baue. Es funktioniert einfach.</p> <div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
</div> <Shield className="w-6 h-6 mb-4 text-slate-300 group-hover:text-slate-900 transition-colors" />
<h3 className="text-xl font-bold text-slate-900 mb-2">Kein Overhead</h3>
<p className="text-slate-500 font-serif text-lg">Sie erklären, ich baue. Es funktioniert einfach.</p>
</div>
</Reveal>
</div> </div>
</div> </div>
</div> </div>
@@ -69,124 +96,110 @@ export default function LandingPage() {
<div className="space-y-32"> <div className="space-y-32">
{/* Row 1 */} {/* Row 1 */}
<div className="flex flex-col md:flex-row gap-12 items-center"> <Reveal>
<div className="flex-1 p-10 bg-slate-50 text-slate-400 line-through decoration-slate-200"> <div className="flex flex-col md:flex-row gap-12 items-center">
<div className="text-xs font-bold uppercase tracking-widest mb-4">Agentur</div> <div className="flex-1 p-10 bg-slate-50 text-slate-400">
<p className="text-xl font-serif italic">Konzeptcalls, Meetings, Slides, Warten auf das Angebot.</p> <div className="text-xs font-bold uppercase tracking-widest mb-4 line-through decoration-slate-300">Agentur</div>
<p className="text-xl font-serif italic line-through decoration-slate-300">Konzeptcalls, Meetings, Slides, Warten auf das Angebot.</p>
</div>
<div className="shrink-0">
<ArrowRight className="w-8 h-8 text-slate-200 hidden md:block" />
</div>
<div className="flex-1 p-10 border-2 border-slate-900">
<div className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-4">Ich</div>
<p className="text-3xl font-bold text-slate-900 leading-tight">Ich baue zuerst. <br />Dann reden wir.</p>
</div>
</div> </div>
<div className="shrink-0"> </Reveal>
<ArrowRight className="w-8 h-8 text-slate-200 hidden md:block" />
</div>
<div className="flex-1 p-10 border-2 border-slate-900">
<div className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-4">Ich</div>
<p className="text-3xl font-bold text-slate-900 leading-tight">Ich baue zuerst. <br />Dann reden wir.</p>
</div>
</div>
{/* Row 2 */} {/* Row 2 */}
<div className="flex flex-col md:flex-row-reverse gap-12 items-center"> <Reveal delay={0.2}>
<div className="flex-1 p-10 bg-slate-50 text-slate-400 line-through decoration-slate-200"> <div className="flex flex-col md:flex-row-reverse gap-12 items-center">
<div className="text-xs font-bold uppercase tracking-widest mb-4">Agentur</div> <div className="flex-1 p-10 bg-slate-50 text-slate-400">
<p className="text-xl font-serif italic">"Das dauert nur kurz" <br />→ Überraschung auf der Rechnung.</p> <div className="text-xs font-bold uppercase tracking-widest mb-4 line-through decoration-slate-300">Agentur</div>
<p className="text-xl font-serif italic">
<span className="line-through decoration-slate-300">"Das dauert nur kurz"</span> <br />
→ Überraschung auf der Rechnung.
</p>
</div>
<div className="shrink-0">
<ArrowRight className="w-8 h-8 text-slate-200 hidden md:block rotate-180" />
</div>
<div className="flex-1 p-10 border-2 border-slate-900">
<div className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-4">Ich</div>
<p className="text-3xl font-bold text-slate-900 leading-tight">Fixpreise. <br />Immer.</p>
</div>
</div> </div>
<div className="shrink-0"> </Reveal>
<ArrowRight className="w-8 h-8 text-slate-200 hidden md:block rotate-180" />
</div>
<div className="flex-1 p-10 border-2 border-slate-900">
<div className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-4">Ich</div>
<p className="text-3xl font-bold text-slate-900 leading-tight">Fixpreise. <br />Immer.</p>
</div>
</div>
</div> </div>
</section> </section>
{/* Für wen - Designed Box */} {/* Für wen - Designed Box */}
<section className="narrow-container relative"> <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="absolute -right-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">03</div>
<div className="relative p-12 md:p-24 border border-slate-100"> <Reveal>
<div className="absolute top-0 left-12 w-px h-24 bg-slate-900 -translate-y-12"></div> <div className="relative p-12 md:p-24 border border-slate-100">
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-12">Zielgruppe</h2> <div className="absolute top-0 left-12 w-px h-24 bg-slate-900 -translate-y-12"></div>
<p className="text-4xl md:text-5xl font-bold text-slate-900 leading-tight mb-16 tracking-tighter"> <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-12">Zielgruppe</h2>
Für Unternehmen, die <br /> <p className="text-4xl md:text-5xl font-bold text-slate-900 leading-tight mb-16 tracking-tighter">
<span className="text-slate-300 underline decoration-slate-100 underline-offset-8">Ergebnisse</span> wollen. Für Unternehmen, die <br />
</p> <span className="text-slate-300 underline decoration-slate-100 underline-offset-8">Ergebnisse</span> wollen.
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-8"> </p>
{[ <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-8">
'Keine Lust auf Agentur-Zirkus', {[
'Kein CMS selbst pflegen', 'Keine Lust auf Agentur-Zirkus',
'Keine Tickets schreiben', 'Kein CMS selbst pflegen',
'Keinen eigenen Entwickler', 'Keine Tickets schreiben',
].map((item, i) => ( 'Keinen eigenen Entwickler',
<div key={i} className="flex items-center gap-4 text-xl font-serif text-slate-600"> ].map((item, i) => (
<div className="w-2 h-2 bg-slate-900 rounded-full"></div> <div key={i} className="flex items-center gap-4 text-xl font-serif text-slate-600">
<span>{item}</span> <div className="w-2 h-2 bg-slate-900 rounded-full"></div>
</div> <span>{item}</span>
))} </div>
))}
</div>
</div> </div>
</div> </Reveal>
</section> </section>
{/* Leistungen - Visual Cards */} {/* Leistungen - Visual Cards */}
<section className="narrow-container relative"> <section className="narrow-container relative">
<div className="absolute -left-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">04</div> <div className="absolute -left-24 -top-32 text-[15rem] font-bold text-slate-50 select-none -z-10">04</div>
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-24">Leistungen</h2> <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-24">Leistungen</h2>
<div className="grid grid-cols-1 gap-32"> <div className="grid grid-cols-1 gap-32">
<div className="group relative"> <Reveal>
<div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">W</div> <div className="group relative">
<h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Websites</h3> <h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Websites</h3>
<p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl"> <p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
Neue Seiten, Relaunch oder Übernahme bestehender Systeme. Inklusive Hosting, SEO und Performance. Neue Seiten, Relaunch oder Übernahme bestehender Systeme. Inklusive Hosting, SEO und Performance.
</p> </p>
<Link href="/websites" className="inline-flex items-center gap-4 text-slate-900 font-bold text-xl group/link"> <Link href="/websites" className="inline-flex items-center gap-4 text-slate-900 font-bold text-xl group/link">
Preise ansehen Preise ansehen
<div className="w-12 h-px bg-slate-900 group-hover/link:w-20 transition-all"></div> <div className="w-12 h-px bg-slate-900 group-hover/link:w-20 transition-all"></div>
</Link>
</div>
<div className="group relative">
<div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">S</div>
<h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Systeme</h3>
<p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
Produktbereiche, Blogs, Jobs, API-Anbindungen, PDF-Generatoren und Sonderlogik.
</p>
</div>
<div className="group relative">
<div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">T</div>
<h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Tools</h3>
<p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
Interne Inhouse-Tools, Excel-Ablösungen und Prozess-Automatisierung.
</p>
</div>
</div>
</section>
{/* CTA - Designed Impact */}
<section className="narrow-container">
<div className="relative py-32 px-12 md:px-24 bg-slate-900 text-white 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">?</div>
<div className="relative z-10 space-y-12">
<h2 className="text-6xl md:text-8xl font-bold tracking-tighter leading-none">Interesse?</h2>
<p className="text-2xl md:text-3xl text-slate-400 font-serif italic leading-tight max-w-xl">
Schreiben Sie mir einfach, was Sie brauchen. Ich sage Ihnen ehrlich, ob ich es mache.
</p>
<div className="pt-8">
<a
href="mailto:marc@mintel.me"
className="inline-flex items-center gap-6 bg-white text-slate-900 px-12 py-6 font-bold text-2xl hover:bg-slate-100 transition-all hover:scale-[1.05]"
>
<MessageSquare className="w-8 h-8" />
Projekt anfragen
</a>
</div>
<div className="pt-12">
<Link href="/blog" className="text-slate-500 hover:text-white text-sm font-bold uppercase tracking-[0.5em] transition-colors">
Zum Blog
</Link> </Link>
</div> </div>
</div> </Reveal>
<Reveal delay={0.2}>
<div className="group relative">
<h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Systeme</h3>
<p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
Produktbereiche, Blogs, Jobs, API-Anbindungen, PDF-Generatoren und Sonderlogik.
</p>
</div>
</Reveal>
<Reveal delay={0.4}>
<div className="group relative">
<h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Tools</h3>
<p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
Interne Inhouse-Tools, Excel-Ablösungen und Prozess-Automatisierung.
</p>
</div>
</Reveal>
</div> </div>
</section> </section>
</div> </div>
); );
} }

4
app/tags/[tag]/page.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react'; import * as React from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { blogPosts } from '../../../src/data/blogPosts'; import { blogPosts } from '../../../src/data/blogPosts';
import { MediumCard } from '../../../src/components/MediumCard'; import { MediumCard } from '../../../src/components/MediumCard';
@@ -32,7 +32,7 @@ export default async function TagPage({ params }: { params: Promise<{ tag: strin
</div> </div>
<div className="mt-8 pt-6 border-t border-slate-200"> <div className="mt-8 pt-6 border-t border-slate-200">
<Link href="/blog" className="text-blue-600 hover:text-blue-800 inline-flex items-center"> <Link href="/blog" className="text-slate-600 hover:text-slate-900 inline-flex items-center">
← Back to blog ← Back to blog
</Link> </Link>
</div> </div>

237
app/websites/page.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react'; import * as React from 'react';
import { Info, ArrowLeft, Mail, Minus } from 'lucide-react'; import { Info, ArrowLeft, Minus } from 'lucide-react';
import Link from 'next/link'; import Link from 'next/link';
import { Reveal } from '../../src/components/Reveal';
export default function WebsitesPage() { export default function WebsitesPage() {
return ( return (
@@ -11,49 +12,59 @@ export default function WebsitesPage() {
<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]"> <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 <ArrowLeft className="w-3 h-3" /> Zurück
</Link> </Link>
<h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9] mb-12"> <Reveal>
Websites <br /> <h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9] mb-12">
<span className="text-slate-200">& Preise.</span> Websites <br />
</h1> <span className="text-slate-200">& Preise.</span>
<p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl"> </h1>
Ich baue digitale Systeme mit klaren Preisen und Ergebnissen – keine Stunden, keine Überraschungen. </Reveal>
</p> <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> </section>
{/* 1. Website - Designed Pricing */} {/* 1. Website - Designed Pricing */}
<section className="narrow-container relative"> <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="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="space-y-20">
<div className="border-l-4 border-slate-900 pl-12 py-4"> <Reveal>
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-12">Die Basis</h2> <div className="border-l-4 border-slate-900 pl-12 py-4">
<div className="flex flex-col md:flex-row md:items-baseline gap-6 mb-8"> <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-12">Die Basis</h2>
<div className="text-7xl md:text-9xl font-bold text-slate-900 tracking-tighter">6.000 €</div> <div className="flex flex-col md:flex-row md:items-baseline gap-6 mb-8">
<div className="text-slate-300 font-serif italic text-2xl">einmalig</div> <div className="text-7xl md:text-9xl font-bold text-slate-900 tracking-tighter">6.000 €</div>
</div> <div className="text-slate-300 font-serif italic text-2xl">einmalig</div>
<p className="text-3xl font-bold text-slate-900 leading-tight tracking-tight">
Die Grundlage für jede Website.
</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>
))} <p className="text-3xl font-bold text-slate-900 leading-tight tracking-tight">
</div> Die Grundlage für jede Website.
<div className="pt-12 flex items-start gap-4 text-sm text-slate-400 italic font-serif max-w-md"> </p>
<Info className="w-5 h-5 shrink-0 mt-0.5 text-slate-200" /> </div>
<p>Enthält keine Seiten, Inhalte oder Funktionen. Diese werden nach Bedarf ergänzt.</p> </Reveal>
</div>
<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> </div>
</section> </section>
@@ -63,100 +74,94 @@ export default function WebsitesPage() {
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-24">Produktion</h2> <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-24">Produktion</h2>
<div className="space-y-32"> <div className="space-y-32">
{/* Seite */} {/* Seite */}
<div className="relative group"> <Reveal>
<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="relative group">
<div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6"> <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">S</div>
<h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Seite</h3> <div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
<div className="text-4xl font-bold text-slate-900 tracking-tighter">800 €</div> <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-2xl text-slate-500 font-serif leading-relaxed max-w-2xl">
Individuell gestaltete Seite – mit Layout, Struktur, Textaufteilung, responsivem Design.
</p>
</div> </div>
<p className="text-2xl text-slate-500 font-serif leading-relaxed max-w-2xl"> </Reveal>
Individuell gestaltete Seite – mit Layout, Struktur, Textaufteilung, responsivem Design.
</p>
</div>
{/* Feature */} {/* Feature */}
<div className="relative group"> <Reveal delay={0.2}>
<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="relative group">
<div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6"> <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">F</div>
<h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Feature</h3> <div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
<div className="text-4xl font-bold text-slate-900 tracking-tighter">2.000 €</div> <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-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-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>
))}
</div>
</div> </div>
<p className="text-2xl text-slate-500 font-serif leading-relaxed max-w-2xl mb-12"> </Reveal>
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>
))}
</div>
</div>
{/* Funktion */} {/* Funktion */}
<div className="relative group"> <Reveal delay={0.4}>
<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="relative group">
<div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6"> <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">L</div>
<h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Funktion</h3> <div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
<div className="text-4xl font-bold text-slate-900 tracking-tighter">1.000 €</div> <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-2xl text-slate-500 font-serif leading-relaxed 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="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>
<p className="text-2xl text-slate-500 font-serif leading-relaxed max-w-2xl mb-12"> </Reveal>
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="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> </div>
</section> </section>
{/* 5. Betrieb - Designed Box */} {/* 5. Betrieb - Designed Box */}
<section className="narrow-container relative"> <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="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"> <Reveal width="100%">
<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> <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">
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-500">Betrieb</h2> <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="flex items-baseline gap-6"> <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400">Betrieb</h2>
<div className="text-7xl md:text-9xl font-bold tracking-tighter">120 €</div> <div className="flex items-baseline gap-6">
<div className="text-slate-500 font-serif italic text-2xl">/ Monat</div> <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> </div>
<p className="text-3xl md:text-4xl font-bold leading-tight tracking-tight"> </Reveal>
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> </section>
{/* 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-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-8 h-8" />
Anfrage senden
</a>
</section>
</div> </div>
); );
} }

5162
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -18,6 +18,7 @@
"@types/react": "^19.2.8", "@types/react": "^19.2.8",
"@types/react-dom": "^19.2.3", "@types/react-dom": "^19.2.3",
"@vercel/og": "^0.8.6", "@vercel/og": "^0.8.6",
"framer-motion": "^12.29.2",
"ioredis": "^5.9.1", "ioredis": "^5.9.1",
"lucide-react": "^0.468.0", "lucide-react": "^0.468.0",
"mermaid": "^11.12.2", "mermaid": "^11.12.2",
@@ -34,6 +35,7 @@
"@types/prismjs": "^1.26.5", "@types/prismjs": "^1.26.5",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"postcss": "^8.4.49", "postcss": "^8.4.49",
"tsx": "^4.21.0" "tsx": "^4.21.0",
"typescript": "5.9.3"
} }
} }

11
src/components/BlogPostClient.tsx
View File

@@ -1,6 +1,7 @@
'use client'; 'use client';
import React, { useEffect, useState } from 'react'; import * as React from 'react';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
interface BlogPostClientProps { interface BlogPostClientProps {
@@ -88,7 +89,7 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
<div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between"> <div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
<button <button
onClick={handleBack} onClick={handleBack}
className="flex items-center gap-2 text-slate-700 hover:text-blue-600 transition-colors duration-200 group" className="flex items-center gap-2 text-slate-700 hover:text-slate-900 transition-colors duration-200 group"
aria-label="Back to home" aria-label="Back to home"
> >
<svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -103,10 +104,10 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
</span> </span>
<button <button
onClick={handleShare} onClick={handleShare}
className="share-button-top flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 hover:bg-blue-50 border border-slate-200 hover:border-blue-300 rounded-full transition-all duration-200" className="share-button-top flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 hover:bg-slate-200 border border-slate-200 hover:border-slate-300 rounded-full transition-all duration-200"
aria-label="Share this post" aria-label="Share this post"
> >
<svg className="w-4 h-4 text-slate-600 group-hover:text-blue-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4 text-slate-600 group-hover:text-slate-900 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
</svg> </svg>
</button> </button>
@@ -117,7 +118,7 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
<div className="mt-16 pt-8 border-t border-slate-200 text-center"> <div className="mt-16 pt-8 border-t border-slate-200 text-center">
<button <button
onClick={handleBack} onClick={handleBack}
className="inline-flex items-center gap-2 px-6 py-3 bg-white border-2 border-slate-200 text-slate-700 rounded-full hover:border-blue-400 hover:text-blue-600 hover:shadow-md transition-all duration-300 font-medium group" className="inline-flex items-center gap-2 px-6 py-3 bg-white border-2 border-slate-200 text-slate-700 rounded-full hover:border-slate-900 hover:text-slate-900 hover:shadow-md transition-all duration-300 font-medium group"
> >
<svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />

40
src/components/CTA.tsx Normal file
View File

@@ -0,0 +1,40 @@
import * as React from 'react';
import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import { Reveal } from './Reveal';
export const CTA: React.FC = () => {
return (
<section className="container relative py-32 md:py-48">
<Reveal width="100%">
<div className="relative p-12 md:p-24 border-2 border-slate-900 bg-white">
<div className="absolute top-0 left-12 w-px h-24 bg-slate-900 -translate-y-12"></div>
<div className="absolute -right-12 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">?</div>
<div className="space-y-16 relative z-10">
<h2 className="text-6xl md:text-8xl font-bold tracking-tighter leading-[0.8] text-slate-900">
Interesse? <br />
<span className="text-slate-200">Fragen kostet nichts.</span>
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
<p className="text-2xl md:text-3xl text-slate-400 font-serif italic leading-tight">
Schreiben Sie mir einfach, was Sie brauchen. Ich sage Ihnen ehrlich, ob ich es mache.
</p>
<div className="flex flex-col items-start gap-8">
<Link
href="/contact"
className="group inline-flex items-center gap-4 bg-white border border-slate-200 rounded-full px-10 py-5 text-2xl font-bold text-slate-900 hover:border-slate-900 hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
>
Projekt anfragen
<ArrowRight className="w-6 h-6 group-hover:translate-x-2 transition-transform" />
</Link>
</div>
</div>
</div>
</div>
</Reveal>
</section>
);
};

33
src/components/Header.tsx
View File

@@ -1,7 +1,14 @@
import React from 'react'; 'use client';
import * as React from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { usePathname } from 'next/navigation';
export const Header: React.FC = () => { export const Header: React.FC = () => {
const pathname = usePathname();
const isActive = (path: string) => pathname === path;
return ( return (
<header className="bg-white/80 backdrop-blur-md sticky top-0 z-50"> <header className="bg-white/80 backdrop-blur-md sticky top-0 z-50">
<div className="max-w-4xl mx-auto px-6 py-8 flex items-center justify-between"> <div className="max-w-4xl mx-auto px-6 py-8 flex items-center justify-between">
@@ -13,18 +20,28 @@ export const Header: React.FC = () => {
</Link> </Link>
<nav className="flex items-center gap-8"> <nav className="flex items-center gap-8">
<Link href="/websites" className="text-xs font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors"> <Link
href="/websites"
className={`text-xs font-bold uppercase tracking-widest transition-colors ${
isActive('/websites') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
}`}
>
Websites Websites
</Link> </Link>
<Link href="/blog" className="text-xs font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors"> <Link
href="/blog"
className={`text-xs font-bold uppercase tracking-widest transition-colors ${
isActive('/blog') || pathname?.startsWith('/blog/') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
}`}
>
Blog Blog
</Link> </Link>
<a <Link
href="mailto:marc@mintel.me" href="/contact"
className="text-xs font-bold uppercase tracking-widest text-slate-900 hover:text-slate-600 transition-colors" className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 bg-white border border-slate-200 rounded-full px-5 py-2.5 hover:border-slate-900 hover:shadow-sm transition-all duration-300"
> >
Kontakt Anfrage
</a> </Link>
</nav> </nav>
</div> </div>
</header> </header>

10
src/components/Hero.tsx
View File

@@ -1,5 +1,5 @@
import { BookOpen, Code2, Terminal, Wrench } from 'lucide-react'; import { BookOpen, Code2, Terminal, Wrench } from 'lucide-react';
import React from 'react'; import * as React from 'react';
export const Hero: React.FC = () => { export const Hero: React.FC = () => {
return ( return (
@@ -26,19 +26,19 @@ export const Hero: React.FC = () => {
{/* Quick stats or focus areas */} {/* Quick stats or focus areas */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10 animate-fade-in"> <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10 animate-fade-in">
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4"> <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
<Code2 className="mx-auto mb-2 text-primary-400" size={24} /> <Code2 className="mx-auto mb-2 text-slate-400" size={24} />
<div className="text-sm font-mono text-slate-300">Code</div> <div className="text-sm font-mono text-slate-300">Code</div>
</div> </div>
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4"> <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
<Wrench className="mx-auto mb-2 text-primary-400" size={24} /> <Wrench className="mx-auto mb-2 text-slate-400" size={24} />
<div className="text-sm font-mono text-slate-300">Tools</div> <div className="text-sm font-mono text-slate-300">Tools</div>
</div> </div>
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4"> <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
<Terminal className="mx-auto mb-2 text-primary-400" size={24} /> <Terminal className="mx-auto mb-2 text-slate-400" size={24} />
<div className="text-sm font-mono text-slate-300">Automation</div> <div className="text-sm font-mono text-slate-300">Automation</div>
</div> </div>
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4"> <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
<BookOpen className="mx-auto mb-2 text-primary-400" size={24} /> <BookOpen className="mx-auto mb-2 text-slate-400" size={24} />
<div className="text-sm font-mono text-slate-300">Learning</div> <div className="text-sm font-mono text-slate-300">Learning</div>
</div> </div>
</div> </div>

44
src/components/Reveal.tsx Normal file
View File

@@ -0,0 +1,44 @@
'use client';
import React, { useEffect, useRef } from 'react';
import { motion, useInView, useAnimation, Variant } from 'framer-motion';
interface RevealProps {
children: React.ReactNode;
width?: 'fit-content' | '100%';
delay?: number;
className?: string;
}
export const Reveal: React.FC<RevealProps> = ({
children,
width = 'fit-content',
delay = 0.25,
className = ""
}) => {
const ref = useRef(null);
const isInView = useInView(ref, { once: true });
const mainControls = useAnimation();
useEffect(() => {
if (isInView) {
mainControls.start("visible");
}
}, [isInView, mainControls]);
return (
<div ref={ref} style={{ position: "relative", width, overflow: "hidden" }} className={className}>
<motion.div
variants={{
hidden: { opacity: 0, y: 75 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate={mainControls}
transition={{ duration: 0.5, delay: delay, type: "spring", stiffness: 100, damping: 20 }}
>
{children}
</motion.div>
</div>
);
};

4
src/components/TwitterEmbed.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react'; import * as React from 'react';
interface TwitterEmbedProps { interface TwitterEmbedProps {
tweetId: string; tweetId: string;
@@ -41,7 +41,7 @@ export async function TwitterEmbed({
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/>
</svg> </svg>
<span>Unable to load tweet</span> <span>Unable to load tweet</span>
<a href={`https://twitter.com/i/status/${tweetId}`} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:text-blue-700 font-medium text-sm"> <a href={`https://twitter.com/i/status/${tweetId}`} target="_blank" rel="noopener noreferrer" className="text-slate-600 hover:text-slate-900 font-medium text-sm">
View on Twitter → View on Twitter →
</a> </a>
</div> </div>

16
tailwind.config.js
View File

@@ -9,18 +9,6 @@ export default {
theme: { theme: {
extend: { extend: {
colors: { colors: {
primary: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
},
slate: { slate: {
850: '#1e293b', 850: '#1e293b',
900: '#0f172a', 900: '#0f172a',
@@ -36,9 +24,9 @@ export default {
css: { css: {
color: theme('colors.slate.800'), color: theme('colors.slate.800'),
a: { a: {
color: theme('colors.primary.600'), color: theme('colors.slate.900'),
'&:hover': { '&:hover': {
color: theme('colors.primary.700'), color: theme('colors.slate.700'),
}, },
}, },
}, },