From 802d7074873889edaaee269bb52e204859804306 Mon Sep 17 00:00:00 2001 From: Marc Mintel Date: Thu, 29 Jan 2026 22:11:28 +0100 Subject: [PATCH] design --- app/page.tsx | 397 +++++++++++++---------- app/websites/page.tsx | 4 +- src/components/Landing/AbstractLines.tsx | 116 +++++++ src/components/Landing/FeatureCard.tsx | 7 +- src/components/Landing/HeroItem.tsx | 3 + src/components/Landing/ServiceCard.tsx | 4 + src/components/Landing/index.ts | 1 + src/components/Section.tsx | 47 ++- 8 files changed, 389 insertions(+), 190 deletions(-) create mode 100644 src/components/Landing/AbstractLines.tsx diff --git a/app/page.tsx b/app/page.tsx index fc31716..3ea5d06 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,68 +1,71 @@ import * as React from 'react'; -import { Zap, Shield, MousePointer2, Sparkles } from 'lucide-react'; +import { Zap, Shield, MousePointer2, Sparkles, ArrowRight, Check, X } from 'lucide-react'; import { Reveal } from '../src/components/Reveal'; import { Section } from '../src/components/Section'; -import { HeroItem, FeatureCard, ComparisonRow, ServiceCard } from '../src/components/Landing'; +import { HeroItem, FeatureCard, ComparisonRow, ServiceCard, HeroLines, GridLines, FlowLines, CirclePattern } from '../src/components/Landing'; export default function LandingPage() { return (
{/* Global Background Pattern */} -
- {/* Hero Section - High Impact */} -
-
- {/* Background Illustration/Pattern */} -
- 00 -
- - {/* Floating Elements */} -
- -
- -
-
- - Digital Architect & Developer + {/* Hero Section - Split Layout */} +
+
+
+ {/* Left Column: Brand & Number */} +
+ +
+
+ + Digital Architect +
+

+ Digitale
+ Systeme
+ ohne
Overhead. +

+
-

- Digitale Systeme
- ohne Overhead. -

-
- - -
-
- {[ - { 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) => ( - - ))} + +
+ + {/* Right Column: Visual & Context */} +
+ {/* Abstract Lines Illustration */} +
+
- -
-
-
-

- Kein Zirkus.
- Nur Ergebnisse. -

+ +
+
+ 00 +
+

+ "Ich baue digitale Systeme für Unternehmen, die Ergebnisse wollen – ohne Agentur-Zirkus, ohne Overhead, ohne Tech-Blabla." +

+
+
+ {/* Placeholder for avatar if needed, or just a symbol */} +
M
+
+
+ Marc Mintel +
@@ -71,153 +74,209 @@ export default function LandingPage() {
- {/* Was ich mache - Designed Grid */} -
-
-
- -
-
- + {/* Section 01: The Promise */} +
+
+
+ +
+ + +

+ Schluss mit aufgeblähten Prozessen.
+ Ich reduziere auf das Wesentliche. +

+ + +
+ +
+
+
+ Was ich biete
-

- Direkt.
- Sauber.
- Ohne Zirkus. -

+
    + {[ + 'Direkte Kommunikation ohne Account Manager', + 'Schnelle Prototypen statt langer Konzepte', + 'Sauberer Code, der auch morgen noch läuft', + 'Fixpreise für klare Budgetsicherheit' + ].map((item, i) => ( +
  • + + {item} +
    • + ))} +
+
+ + + +
+
+
+ Was ich nicht mache +
+
    + {[ + 'Endlose Workshops ohne Ergebnis', + 'PowerPoint-Schlachten', + 'Outsourcing an Billig-Anbieter', + 'Wartungsverträge mit versteckten Kosten' + ].map((item, i) => ( +
  • + + {item} +
    • + ))} +
-
-
- -

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

- -
- - -
-
+
+
+ + {/* Section 02: The Difference */} +
+
+ +

+ Der klassische Agentur-Weg ist oft langsam und teuer. Mein Ansatz ist radikal anders: Ich baue zuerst, dann reden wir über Details. +

+ + +
+ + +
- {/* Comparison - Visual Path */} -
-
- {/* Connecting line */} -
- - Ich baue zuerst.
Dann reden wir.} - delay={0.1} - /> - - - "Das dauert nur kurz"
- → Überraschung auf der Rechnung. - } - positiveLabel="Ich" - positiveText={<>Fixpreise.
Immer.} - reverse - delay={0.2} - /> + {/* Section 03: Target Group */} +
+
+
+ +
+
+ +
+
+
+ +
+

Unternehmer &
Geschäftsführer

+

+ "Ich brauche eine Lösung, die funktioniert. Ich habe keine Zeit für technische Details oder lange Meetings." +

+
+
+ Perfekt für Sie +
+
+ + +
+
+
+ +
+

Marketing &
Vertrieb

+

+ "Wir brauchen Landingpages, Tools und Automatisierungen, um unsere Ziele zu erreichen. Schnell und zuverlässig." +

+
+
+ Perfekt für Sie +
+
+ +
- {/* Für wen - Designed Box */} -
- -
- {/* Decorative elements */} -
- -
-

- Für Unternehmen, die
- Ergebnisse wollen. -

-
- {[ - 'Keine Lust auf Agentur-Zirkus', - 'Kein CMS selbst pflegen', - 'Keine Tickets schreiben', - 'Keinen eigenen Entwickler', - ].map((item, i) => ( -
-
- {item} -
- ))} -
-
- -
- - {/* Leistungen - Visual Cards */} -
-
+ {/* Section 04: Services */} +
+
- -
- {/* Final CTA - New Section */} -
- -
-

- Bereit für
- echten Fortschritt? -

-
- - Projekt anfragen - -
- - Kein Zirkus, versprochen. + {/* Section 05: Contact */} +
+
+
+ +
+ +
+

+ Lassen Sie uns
+ starten. +

+ +
+
+

+ Schreiben Sie mir kurz, worum es geht. Ich melde mich innerhalb von 24 Stunden mit einer ersten Einschätzung. +

+ + hello@mintel.me + +
+ +
+
+
+ Verfügbar für neue Projekte +
+

+ Aktuell nehme ich Projekte für Q2 2026 an. +

+
-
- + +
); diff --git a/app/websites/page.tsx b/app/websites/page.tsx index 7c80e7c..83aa6fd 100644 --- a/app/websites/page.tsx +++ b/app/websites/page.tsx @@ -56,7 +56,7 @@ export default function WebsitesPage() {
{/* 2. Entwicklung - Designed Grid */} -
+
{/* Seite */} @@ -116,7 +116,7 @@ export default function WebsitesPage() {
{/* 5. Betrieb - Designed Box */} -
+
B
diff --git a/src/components/Landing/AbstractLines.tsx b/src/components/Landing/AbstractLines.tsx new file mode 100644 index 0000000..953dbae --- /dev/null +++ b/src/components/Landing/AbstractLines.tsx @@ -0,0 +1,116 @@ +'use client'; + +import * as React from 'react'; +import { motion } from 'framer-motion'; + +interface LineProps { + className?: string; + delay?: number; +} + +export const HeroLines: React.FC = ({ className = "", delay = 0 }) => { + return ( + + + + {/* Nodes */} + + + + ); +}; + +export const GridLines: React.FC = ({ className = "", delay = 0 }) => { + return ( + + + + + + + + + {/* Highlighted Path */} + + + + ); +}; + +export const FlowLines: React.FC = ({ className = "", delay = 0 }) => { + return ( + + + + + + + + + ); +}; + +export const CirclePattern: React.FC = ({ className = "", delay = 0 }) => { + return ( + + + + + + ) +} diff --git a/src/components/Landing/FeatureCard.tsx b/src/components/Landing/FeatureCard.tsx index 067e468..aa3d6a9 100644 --- a/src/components/Landing/FeatureCard.tsx +++ b/src/components/Landing/FeatureCard.tsx @@ -13,7 +13,12 @@ export const FeatureCard: React.FC = ({ icon: Icon, title, des return (
-
+ {/* Animated Top Line */} +
+ + {/* Decorative Ring */} +
+

{title} diff --git a/src/components/Landing/HeroItem.tsx b/src/components/Landing/HeroItem.tsx index effad32..82889fd 100644 --- a/src/components/Landing/HeroItem.tsx +++ b/src/components/Landing/HeroItem.tsx @@ -12,6 +12,9 @@ export const HeroItem: React.FC = ({ number, title, description, return (
+ {/* Animated Bottom Line */} +
+
{number} diff --git a/src/components/Landing/ServiceCard.tsx b/src/components/Landing/ServiceCard.tsx index ee49bd2..4c1ed92 100644 --- a/src/components/Landing/ServiceCard.tsx +++ b/src/components/Landing/ServiceCard.tsx @@ -20,6 +20,10 @@ export const ServiceCard: React.FC = ({ return (
+ {/* Decorative Corner */} +
+
+ {/* Decorative background text */}
{title.charAt(0)} diff --git a/src/components/Landing/index.ts b/src/components/Landing/index.ts index 894d628..d4e5737 100644 --- a/src/components/Landing/index.ts +++ b/src/components/Landing/index.ts @@ -2,3 +2,4 @@ export * from './HeroItem'; export * from './FeatureCard'; export * from './ComparisonRow'; export * from './ServiceCard'; +export * from './AbstractLines'; diff --git a/src/components/Section.tsx b/src/components/Section.tsx index f0f82d7..d560b18 100644 --- a/src/components/Section.tsx +++ b/src/components/Section.tsx @@ -6,7 +6,6 @@ interface SectionProps { title?: string; children: React.ReactNode; className?: string; - numberPosition?: 'left' | 'right'; delay?: number; variant?: 'white' | 'gray'; borderTop?: boolean; @@ -17,32 +16,44 @@ export const Section: React.FC = ({ title, children, className = "", - numberPosition = 'left', delay = 0, variant = 'white', borderTop = false, }) => { - const bgClass = variant === 'gray' ? 'bg-slate-50/50' : 'bg-white'; + const bgClass = variant === 'gray' ? 'bg-slate-50' : 'bg-white'; const borderClass = borderTop ? 'border-t border-slate-100' : ''; return (
-
- {number && ( -
- {number} -
- )} - {title && ( - -
-
-

{title}

+
+
+ {/* Sidebar: Number & Title */} +
+
+ {number && ( + + + {number} + + + )} + {title && ( + +
+
+

+ {title} +

+
+ + )}
- - )} -
- {children} +
+ + {/* Main Content */} +
+ {children} +