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';
import React, { useState, useEffect } from 'react';
import * as React from 'react';
import { useState, useEffect } from 'react';
import { MediumCard } from '../../src/components/MediumCard';
import { SearchBar } from '../../src/components/SearchBar';
import { Tag } from '../../src/components/Tag';
@@ -44,11 +45,11 @@ export default function BlogPage() {
{/* Clean Hero Section */}
<section className="pt-10 pb-8 md:pt-12 md:pb-10 relative overflow-hidden">
{/* 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 */}
<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>
{/* Animated Drawing Paths */}
@@ -59,10 +60,10 @@ export default function BlogPage() {
</svg>
{/* 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-20 right-20 w-16 h-16 bg-indigo-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-10 right-1/3 w-24 h-24 bg-cyan-100/20 animate-float-4"></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-slate-100/20 rotate-45 animate-float-2"></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-slate-100/20 animate-float-4"></div>
<div className="max-w-3xl mx-auto px-6 relative z-10">
<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 {
@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 {
@@ -76,7 +76,7 @@
a:focus,
button:focus,
input:focus {
outline: 2px solid #3b82f6;
outline: 2px solid #0f172a;
outline-offset: 2px;
}
}
@@ -108,7 +108,7 @@
}
.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);
backdrop-filter: blur(10px);
}
@@ -182,7 +182,7 @@
}
.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 {
@@ -309,8 +309,8 @@
/* Selection color */
::selection {
background: #bfdbfe;
color: #1e40af;
background: #0f172a;
color: #ffffff;
}
/* Tag Styles */
@@ -353,8 +353,8 @@
}
.highlighter-blue {
background: linear-gradient(135deg, rgba(100, 181, 246, 0.95) 0%, rgba(66, 165, 245, 0.95) 100%);
color: #001f3f;
background: linear-gradient(135deg, rgba(226, 232, 240, 0.95) 0%, rgba(203, 213, 225, 0.95) 100%);
color: #0f172a;
}
.highlighter-tag:hover::before {
@@ -374,10 +374,10 @@
}
.highlighter-tag:focus {
outline: 2px solid #3b82f6;
outline: 2px solid #0f172a;
outline-offset: 2px;
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 */
@@ -570,7 +570,7 @@
}
.fallback-link {
color: #3b82f6;
@apply text-slate-900 underline underline-offset-4;
text-decoration: none;
font-weight: 500;
margin-top: 0.25rem;

2
app/layout.tsx
View File

@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';
import './globals.css';
import { Footer } from '../src/components/Footer';
import { Header } from '../src/components/Header';
import { CTA } from '../src/components/CTA';
import { InteractiveElements } from '../src/components/InteractiveElements';
import { Analytics } from '../src/components/Analytics';
@@ -33,6 +34,7 @@ export default function RootLayout({
<main>
{children}
</main>
<CTA />
<Footer />
<InteractiveElements />
<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 { 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() {
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 */}
<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="space-y-16 relative">
<h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9] animate-fade-in">
Digitale Systeme <br />
<span className="text-slate-200">ohne Overhead.</span>
</h1>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
<div className="space-y-6 text-2xl text-slate-400 font-serif italic leading-tight">
<p className="animate-slide-up [animation-delay:200ms]">Agenturen sind zu langsam.</p>
<p className="animate-slide-up [animation-delay:400ms]">CMS will keiner pflegen.</p>
<p className="animate-slide-up [animation-delay:600ms]">Digitale Themen bleiben liegen.</p>
</div>
<div className="animate-slide-up [animation-delay:800ms] border-l-2 border-slate-900 pl-8">
<p className="text-3xl font-bold text-slate-900 leading-tight">
Ich mache das anders.
</p>
<Reveal>
<h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
Digitale Systeme <br />
<span className="text-slate-200">ohne Overhead.</span>
</h1>
</Reveal>
<div className="space-y-32">
<div className="space-y-16 max-w-4xl">
{[
{ title: 'Agenturen sind zu langsam.', desc: 'Wochenlange Konzepte statt schneller Ergebnisse.' },
{ title: 'CMS will keiner pflegen.', desc: 'Ich baue Systeme, die so einfach sind, dass sie wirklich genutzt werden.' },
{ title: 'Digitale Themen bleiben liegen.', desc: 'Weil der Overhead die Umsetzung erstickt.' },
].map((item, i) => (
<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>
<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>
</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="grid grid-cols-1 md:grid-cols-12 gap-12">
<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>
<p className="text-4xl font-bold text-slate-900 leading-[1.1]">
Direkt. <br />
Sauber. <br />
Ohne Zirkus.
</p>
<Reveal>
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400">Das Versprechen</h2>
<p className="text-4xl font-bold text-slate-900 leading-[1.1]">
Direkt. <br />
Sauber. <br />
Ohne Zirkus.
</p>
</Reveal>
</div>
<div className="md:col-span-7">
<div className="prose prose-slate font-serif text-2xl leading-relaxed text-slate-700">
<p>
Ich setze digitale Systeme für Unternehmen um – ohne Workshops, ohne Tickets, ohne Tech-Blabla.
</p>
<Reveal delay={0.2}>
<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="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
<Zap 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">Websites & Tools</h3>
<p className="text-slate-500 font-serif text-lg">Alles, was Ihr Unternehmen digital voranbringt.</p>
</div>
<div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
<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 delay={0.4}>
<div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
<Zap 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">Websites & Tools</h3>
<p className="text-slate-500 font-serif text-lg">Alles, was Ihr Unternehmen digital voranbringt.</p>
</div>
</Reveal>
<Reveal delay={0.6}>
<div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
<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>
@@ -69,124 +96,110 @@ export default function LandingPage() {
<div className="space-y-32">
{/* Row 1 */}
<div className="flex flex-col md:flex-row gap-12 items-center">
<div className="flex-1 p-10 bg-slate-50 text-slate-400 line-through decoration-slate-200">
<div className="text-xs font-bold uppercase tracking-widest mb-4">Agentur</div>
<p className="text-xl font-serif italic">Konzeptcalls, Meetings, Slides, Warten auf das Angebot.</p>
<Reveal>
<div className="flex flex-col md:flex-row gap-12 items-center">
<div className="flex-1 p-10 bg-slate-50 text-slate-400">
<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 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>
</Reveal>
{/* Row 2 */}
<div className="flex flex-col md:flex-row-reverse gap-12 items-center">
<div className="flex-1 p-10 bg-slate-50 text-slate-400 line-through decoration-slate-200">
<div className="text-xs font-bold uppercase tracking-widest mb-4">Agentur</div>
<p className="text-xl font-serif italic">"Das dauert nur kurz" <br />→ Überraschung auf der Rechnung.</p>
<Reveal delay={0.2}>
<div className="flex flex-col md:flex-row-reverse gap-12 items-center">
<div className="flex-1 p-10 bg-slate-50 text-slate-400">
<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 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>
</Reveal>
</div>
</section>
{/* Für wen - 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="relative p-12 md:p-24 border border-slate-100">
<div className="absolute top-0 left-12 w-px h-24 bg-slate-900 -translate-y-12"></div>
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-12">Zielgruppe</h2>
<p className="text-4xl md:text-5xl font-bold text-slate-900 leading-tight mb-16 tracking-tighter">
Für Unternehmen, die <br />
<span className="text-slate-300 underline decoration-slate-100 underline-offset-8">Ergebnisse</span> wollen.
</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 Tickets schreiben',
'Keinen eigenen Entwickler',
].map((item, i) => (
<div key={i} className="flex items-center gap-4 text-xl font-serif text-slate-600">
<div className="w-2 h-2 bg-slate-900 rounded-full"></div>
<span>{item}</span>
</div>
))}
<Reveal>
<div className="relative p-12 md:p-24 border border-slate-100">
<div className="absolute top-0 left-12 w-px h-24 bg-slate-900 -translate-y-12"></div>
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-12">Zielgruppe</h2>
<p className="text-4xl md:text-5xl font-bold text-slate-900 leading-tight mb-16 tracking-tighter">
Für Unternehmen, die <br />
<span className="text-slate-300 underline decoration-slate-100 underline-offset-8">Ergebnisse</span> wollen.
</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 Tickets schreiben',
'Keinen eigenen Entwickler',
].map((item, i) => (
<div key={i} className="flex items-center gap-4 text-xl font-serif text-slate-600">
<div className="w-2 h-2 bg-slate-900 rounded-full"></div>
<span>{item}</span>
</div>
))}
</div>
</div>
</div>
</Reveal>
</section>
{/* Leistungen - Visual Cards */}
<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>
<div className="grid grid-cols-1 gap-32">
<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">W</div>
<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">
Neue Seiten, Relaunch oder Übernahme bestehender Systeme. Inklusive Hosting, SEO und Performance.
</p>
<Link href="/websites" className="inline-flex items-center gap-4 text-slate-900 font-bold text-xl group/link">
Preise ansehen
<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
<Reveal>
<div className="group relative">
<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">
Neue Seiten, Relaunch oder Übernahme bestehender Systeme. Inklusive Hosting, SEO und Performance.
</p>
<Link href="/websites" className="inline-flex items-center gap-4 text-slate-900 font-bold text-xl group/link">
Preise ansehen
<div className="w-12 h-px bg-slate-900 group-hover/link:w-20 transition-all"></div>
</Link>
</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>
</section>
</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 { blogPosts } from '../../../src/data/blogPosts';
import { MediumCard } from '../../../src/components/MediumCard';
@@ -32,7 +32,7 @@ export default async function TagPage({ params }: { params: Promise<{ tag: strin
</div>
<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
</Link>
</div>

237
app/websites/page.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { Info, ArrowLeft, Mail, Minus } from 'lucide-react';
import * as React from 'react';
import { Info, ArrowLeft, Minus } from 'lucide-react';
import Link from 'next/link';
import { Reveal } from '../../src/components/Reveal';
export default function WebsitesPage() {
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]">
<ArrowLeft className="w-3 h-3" /> Zurück
</Link>
<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-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>
<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>
{/* 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="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>
<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>
</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>
<p className="text-3xl font-bold text-slate-900 leading-tight tracking-tight">
Die Grundlage für jede Website.
</p>
</div>
</Reveal>
<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>
</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>
<div className="space-y-32">
{/* Seite */}
<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>
<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>
<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>
<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>
</Reveal>
{/* Feature */}
<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>
<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>
<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>
<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>
</Reveal>
{/* Funktion */}
<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>
<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>
<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>
<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>
</Reveal>
</div>
</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>
<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>
<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>
</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>
<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>
</Reveal>
</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>
);
}

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-dom": "^19.2.3",
"@vercel/og": "^0.8.6",
"framer-motion": "^12.29.2",
"ioredis": "^5.9.1",
"lucide-react": "^0.468.0",
"mermaid": "^11.12.2",
@@ -34,6 +35,7 @@
"@types/prismjs": "^1.26.5",
"autoprefixer": "^10.4.20",
"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';
import React, { useEffect, useState } from 'react';
import * as React from 'react';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
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">
<button
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"
>
<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>
<button
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"
>
<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"/>
</svg>
</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">
<button
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">
<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 { usePathname } from 'next/navigation';
export const Header: React.FC = () => {
const pathname = usePathname();
const isActive = (path: string) => pathname === path;
return (
<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">
@@ -13,18 +20,28 @@ export const Header: React.FC = () => {
</Link>
<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
</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
</Link>
<a
href="mailto:marc@mintel.me"
className="text-xs font-bold uppercase tracking-widest text-slate-900 hover:text-slate-600 transition-colors"
<Link
href="/contact"
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
</a>
Anfrage
</Link>
</nav>
</div>
</header>

10
src/components/Hero.tsx
View File

@@ -1,5 +1,5 @@
import { BookOpen, Code2, Terminal, Wrench } from 'lucide-react';
import React from 'react';
import * as React from 'react';
export const Hero: React.FC = () => {
return (
@@ -26,19 +26,19 @@ export const Hero: React.FC = () => {
{/* Quick stats or focus areas */}
<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">
<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>
<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>
<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>
<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>
</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 {
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"/>
</svg>
<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 →
</a>
</div>

16
tailwind.config.js
View File

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