From 762226f744be877d952e439bf7d6d8dd3a4751ca Mon Sep 17 00:00:00 2001 From: Marc Mintel Date: Thu, 29 Jan 2026 19:13:03 +0100 Subject: [PATCH] design --- app/globals.css | 8 +- app/page.tsx | 445 +++++++++++------------------- app/websites/page.tsx | 212 +++++++------- src/components/BlogPostClient.tsx | 12 +- 4 files changed, 288 insertions(+), 389 deletions(-) diff --git a/app/globals.css b/app/globals.css index 2f0ad42..cd4b01e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -97,7 +97,7 @@ } .narrow-container { - @apply max-w-2xl mx-auto px-6 py-8; + @apply max-w-3xl mx-auto px-6 py-8; } .highlighter-tag { @@ -222,11 +222,11 @@ top: 0; left: 0; width: 100%; - height: 2px; - background: #3b82f6; + height: 1px; + background: #0f172a; transform-origin: left; transform: scaleX(0); - z-index: 50; + z-index: 100; transition: transform 0.1s ease-out; } diff --git a/app/page.tsx b/app/page.tsx index cd8e2b5..4805114 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,299 +1,190 @@ import React from 'react'; import Link from 'next/link'; -import { Check, ArrowRight, MessageSquare } from 'lucide-react'; +import { ArrowRight, MessageSquare, Minus, Zap, Shield, Clock } from 'lucide-react'; export default function LandingPage() { return ( -
- {/* Hero Section */} -
-

- Digitale Systeme für Unternehmen, die keinen Overhead wollen -

-
-

Agenturen sind zu langsam.

-

CMS will keiner pflegen.

-

Digitale Themen bleiben liegen.

-
-

- Ich mache das anders. -

-
- - {/* Was ich mache */} -
-
-
-

Was ich mache

-
-
-
-

- Ich setze digitale Systeme für Unternehmen um – direkt, sauber und ohne Agentur-Zirkus. -

-

- Websites, Funktionen, Systeme, interne Tools. -

-

- Keine Workshops. Keine Tickets. Kein Tech-Blabla. -

-

- Sie erklären mir, was Sie brauchen.
- Ich sorge dafür, dass es funktioniert. +

+ {/* Hero Section - High Impact */} +
+
00
+
+

+ Digitale Systeme
+ ohne Overhead. +

+
+
+

Agenturen sind zu langsam.

+

CMS will keiner pflegen.

+

Digitale Themen bleiben liegen.

+
+
+

+ Ich mache das anders.

- {/* Für wen das ist */} -
-
-
-

Für wen das ist

-
-
-

Für Unternehmen, die:

-
    - {[ - 'regelmäßig Änderungen an Website oder Systemen brauchen', - 'keine Lust auf Agenturen haben', - 'kein CMS anfassen wollen', - 'keine Tickets schreiben möchten', - 'keinen Entwickler einstellen wollen', - 'und wollen, dass Dinge einfach erledigt werden', - ].map((item, i) => ( -
  • - - {item} -
    • - ))} -
-
-

- Wenn bei Ihnen öfter der Satz fällt:
- „Das müsste man mal machen …“ -

-

- … aber es passiert nie – dann sind Sie hier richtig. -

-
-
-
-
- - {/* Das eigentliche Problem */} -
-
-
-

Das Problem

-
-
-
-

- Digitale Arbeit scheitert nicht an Technik.
- Sie scheitert an Zuständigkeit. -

-
-

Agenturen wollen Projekte.

-

Mitarbeiter haben Wichtigeres zu tun.

-

IT ist ausgelastet.

-

Kleine Aufgaben sind zu klein für große Angebote.

-
-

Also bleibt alles liegen.

-
-
-
-
- - {/* Warum keine Agentur */} -
-
-
-

Warum keine Agentur

-
-
-

- Ich habe über 15 Jahre in Agenturen gearbeitet. Ich kenne das Spiel. Und ich weiß, warum es nervt. -

- -
-
-

Agenturen machen einfache Dinge kompliziert

-
-
-

Ein Button ändern?

-

→ Konzeptcall

-

→ Abstimmung

-

→ internes Meeting

-

→ Angebot

-

→ Warten

-

→ Rechnung

-
-
-

Mein Ansatz

-

Ich mache es einfach fertig.

-
-
-
- -
-
-

Prozesse statt Ergebnisse

-

- Workshops, Slides, Roadmaps. Klingt nach Fortschritt, ist oft nur Beschäftigungstherapie. Bei mir zählt nur Umsetzung. -

-
-
-

Stundenabrechnung

-

- „Das dauert nur kurz“ → Überraschung auf der Rechnung. Ich arbeite mit Fixpreisen. Sie wissen vorher, was es kostet. -

-
-
-

Aufgaben-Ping-Pong

-

- Heute Projektmanager, morgen Entwickler, übermorgen niemand. Bei mir: Eine Person. Eine Verantwortung. -

-
-
-

Verschwinden nach dem Projekt

-

- Kleine Änderung? Neues Angebot. Dringend? Warteschleife. Ich bleibe, solange Sie Dinge brauchen. -

-
-
-
-
-
-
- - {/* Wie ich arbeite */} -
-
-
-

Arbeitsweise

-
-
-

- Ich baue zuerst. Dann reden wir drüber. -

-
-

- Sie erklären mir Ihre Vorstellung. Ich setze den ersten echten Stand um. -

-
- Keine Slides - Kein Konzept-PDF - Kein Ratespiel -
-

- Dann arbeiten wir direkt am Ergebnis, bis es passt. Ohne jedes Mal ein neues Angebot. Ohne Scope-Diskussionen. Ohne Theater. -

-
-
-
-
- - {/* Was ich konkret umsetze */} -
-
-
-

Leistungen

-
-
-
-
-

Websites

-
    -
  • neue Websites (klarer Standard)
    • -
  • bestehende Websites übernehmen
    • -
  • Seiten ändern oder ergänzen
    • -
  • Performance & SEO
    • -
  • Hosting & Betrieb (inklusive)
    • -
-
- - Details zu Websites & Preisen - -
-
- -
-

Funktionen & Systeme

-
    -
  • Produktbereiche
    • -
  • Blogs, News, Jobs
    • -
  • Formulare
    • -
  • Suche & Filter
    • -
  • PDF-Generatoren
    • -
  • API-Ausgaben & Daten-Sync
    • -
-
- -
-

Interne Tools

-
    -
  • kleine Inhouse-Tools
    • -
  • Excel ersetzen
    • -
  • Automatisierung
    • -
  • Importe & Exporte
    • -
-
-
-
-
-
- - {/* Warum Kunden bleiben */} -
-
-
-

Vorteile

-
-
-
- {[ - { label: 'Schnelligkeit', desc: 'Dinge passieren schnell' }, - { label: 'Erledigt', desc: 'Aufgaben verschwinden wirklich' }, - { label: 'Kein Erklären', desc: 'Ich verstehe, was Sie brauchen' }, - { label: 'Kein Nachfassen', desc: 'Ich melde mich, wenn es fertig ist' }, - { label: 'Kein Stress', desc: 'Kein Projektstress' }, - { label: 'Ruhe', desc: 'Kein Agentur-Zirkus' }, - ].map((item, i) => ( -
-
{item.label}
-
{item.desc}
-
- ))} -
-

- Kurz: Ruhe. + {/* Was ich mache - Designed Grid */} +

+
01
+
+
+

Das Versprechen

+

+ Direkt.
+ Sauber.
+ Ohne Zirkus.

+
+
+

+ Ich setze digitale Systeme für Unternehmen um – ohne Workshops, ohne Tickets, ohne Tech-Blabla. +

+
+
+ +

Websites & Tools

+

Alles, was Ihr Unternehmen digital voranbringt.

+
+
+ +

Kein Overhead

+

Sie erklären, ich baue. Es funktioniert einfach.

+
+
+
+
- {/* CTA */} -
-
-

Interesse?

-

- Schreiben Sie mir einfach, was Sie brauchen.
- Ich sage Ihnen ehrlich, ob ich es mache – und was es kostet. + {/* Comparison - Visual Path */} +

+
02
+

Der Unterschied

+ +
+ {/* Row 1 */} +
+
+
Agentur
+

Konzeptcalls, Meetings, Slides, Warten auf das Angebot.

+
+
+ +
+
+
Ich
+

Ich baue zuerst.
Dann reden wir.

+
+
+ + {/* Row 2 */} +
+
+
Agentur
+

"Das dauert nur kurz"
→ Überraschung auf der Rechnung.

+
+
+ +
+
+
Ich
+

Fixpreise.
Immer.

+
+
+
+
+ + {/* Für wen - Designed Box */} +
+
03
+
+
+

Zielgruppe

+

+ Für Unternehmen, die
+ Ergebnisse wollen.

- - - Projekt anfragen - -
- - Zum Blog +
+ {[ + 'Keine Lust auf Agentur-Zirkus', + 'Kein CMS selbst pflegen', + 'Keine Tickets schreiben', + 'Keinen eigenen Entwickler', + ].map((item, i) => ( +
+
+ {item} +
+ ))} +
+
+
+ + {/* Leistungen - Visual Cards */} +
+
04
+

Leistungen

+
+
+
W
+

Websites

+

+ Neue Seiten, Relaunch oder Übernahme bestehender Systeme. Inklusive Hosting, SEO und Performance. +

+ + Preise ansehen +
+ +
+
S
+

Systeme

+

+ Produktbereiche, Blogs, Jobs, API-Anbindungen, PDF-Generatoren und Sonderlogik. +

+
+ +
+
T
+

Tools

+

+ Interne Inhouse-Tools, Excel-Ablösungen und Prozess-Automatisierung. +

+
+
+
+ + {/* CTA - Designed Impact */} +
+
+
?
+
+

Interesse?

+

+ Schreiben Sie mir einfach, was Sie brauchen. Ich sage Ihnen ehrlich, ob ich es mache. +

+ +
+ + Zum Blog + +
+
diff --git a/app/websites/page.tsx b/app/websites/page.tsx index dab7c40..2154dcd 100644 --- a/app/websites/page.tsx +++ b/app/websites/page.tsx @@ -1,161 +1,159 @@ import React from 'react'; -import { Check, Info, ArrowLeft, Mail } from 'lucide-react'; +import { Info, ArrowLeft, Mail, Minus } from 'lucide-react'; import Link from 'next/link'; export default function WebsitesPage() { return ( -
- {/* Header */} -
- +
+ {/* Header - Designed */} +
+
€
+ Zurück -

- Websites & Preise +

+ Websites
+ & Preise.

-

+

Ich baue digitale Systeme mit klaren Preisen und Ergebnissen – keine Stunden, keine Überraschungen.

- {/* 1. Website - Fixpreis */} -
-
-

1. Website – Fixpreis

-
-
6.000 €
-
einmalige Basis
+ {/* 1. Website - Designed Pricing */} +
+
01
+
+
+

Die Basis

+
+
6.000 €
+
einmalig
+
+

+ Die Grundlage für jede Website. +

-
-

- Die Grundlage für jede Website: -

-
    - {[ - 'Projekt-Setup & Infrastruktur', - 'Hosting-Bereitstellung', - 'Grundstruktur & Design-Vorlage', - 'technisches SEO-Basics', - 'Analytics (mit Mail-Report)', - 'Livegang', - ].map((item, i) => ( -
  • - - {item} -
    • - ))} -
-
- -

Enthält keine Seiten, Inhalte oder Funktionen. Diese werden nach Bedarf ergänzt.

-
+
+ {[ + 'Projekt-Setup & Infrastruktur', + 'Hosting-Bereitstellung', + 'Grundstruktur & Design-Vorlage', + 'technisches SEO-Basics', + 'Analytics (mit Mail-Report)', + 'Livegang', + ].map((item, i) => ( +
+
+ {item} +
+ ))} +
+
+ +

Enthält keine Seiten, Inhalte oder Funktionen. Diese werden nach Bedarf ergänzt.

- {/* 2. Entwicklung (Produktion) */} -
-

2. Entwicklung (Produktion)

-
+ {/* 2. Entwicklung - Designed Grid */} +
+
02
+

Produktion

+
{/* Seite */} -
-
-

Seite

-
800 €
+
+
S
+
+

Seite

+
800 €
-

+

Individuell gestaltete Seite – mit Layout, Struktur, Textaufteilung, responsivem Design.

{/* Feature */} -
-
-

Feature (System)

-
2.000 €
+
+
F
+
+

Feature

+
2.000 €
-

+

Ein in sich geschlossenes System mit Datenstruktur, Darstellung und Pflegefähigkeit.

-
+
{['Blog', 'News', 'Jobs', 'Referenzen', 'Events', 'Produktbereich'].map(tag => ( - {tag} + {tag} ))}
{/* Funktion */} -
-
-

Funktion (Logik)

-
1.000 €
+
+
L
+
+

Funktion

+
1.000 €
-

+

Funktionen liefern Logik und Interaktion.

-
-
Kontaktformular
-
Suche & Filter
-
PDF-Export
-
API-Anbindungen
-
Mailversand
-
Automatisierung
+
+
Kontaktformular
+
Suche & Filter
+
PDF-Export
+
API-Anbindungen
+
Mailversand
+
Automatisierung
- {/* 3. Design & Interaktion */} -
-

3. Design & Interaktion (Extras)

-
-
-

Visuelle Inszenierung

-
2.000 € / Abschnitt
-

- Erweiterte Gestaltung: Hero-Story, visuelle Abläufe, Scroll-Effekte, speziell inszenierte Sektionen. -

+ {/* 5. Betrieb - Designed Box */} +
+
03
+
+
B
+

Betrieb

+
+
120 €
+
/ Monat
-
-

Komplexe Interaktion

-
1.500 € / Interaktion
-

- Dargestellte, interaktive UI-Erlebnisse: Konfiguratoren, Live-Previews, mehrstufige Auswahlprozesse. -

+

+ Hosting, Wartung & Sicherheit.
+ Damit Sie sich um nichts kümmern müssen. +

+
+ {[ + 'Webhosting & Verfügbarkeit', + 'Sicherheitsupdates & Backups', + 'Analytics inkl. Reports', + 'Medien-Speicher (20 GB)', + ].map((item, i) => ( +
+
+ {item} +
+ ))}
- {/* 5. Betrieb & Wartung */} -
-
-

5. Betrieb & Wartung (Pflicht)

-
-
120 €
-
/ Monat
-
-
    -
  • Webhosting & Verfügbarkeit
    • -
  • Sicherheitsupdates & Backups
    • -
  • Analytics inkl. Reports
    • -
  • Medien-Speicher (20 GB)
    • -
-
-
- - {/* CTA */} -
-

Bereit für ein Projekt?

-

- Schreiben Sie mir einfach, was Sie vorhaben.
- Ich erstelle Ihnen ein passendes Angebot. + {/* CTA - Designed Impact */} +

+

Bereit?

+

+ Schreiben Sie mir einfach, was Sie vorhaben. Ich erstelle Ihnen ein passendes Angebot.

- + Anfrage senden
diff --git a/src/components/BlogPostClient.tsx b/src/components/BlogPostClient.tsx index 4d1edef..5ebc80f 100644 --- a/src/components/BlogPostClient.tsx +++ b/src/components/BlogPostClient.tsx @@ -15,6 +15,15 @@ export const BlogPostClient: React.FC = ({ readingTime, tit useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 100); + + // Update progress bar + const winScroll = document.body.scrollTop || document.documentElement.scrollTop; + const height = document.documentElement.scrollHeight - document.documentElement.clientHeight; + const scrolled = (winScroll / height); + const progressBar = document.querySelector('.reading-progress-bar') as HTMLElement; + if (progressBar) { + progressBar.style.transform = `scaleX(${scrolled})`; + } }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); @@ -69,7 +78,8 @@ export const BlogPostClient: React.FC = ({ readingTime, tit return ( <> -