diff --git a/app/page.tsx b/app/page.tsx index b901cee..ef2dec7 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,5 +1,39 @@ -import { ArrowRight, Check, Database, Layout, Shield, Workflow, X, Zap } from 'lucide-react'; -import { CirclePattern, ComparisonRow, ConnectorBranch, ConnectorEnd, ConnectorSplit, ConnectorStart, FlowLines, GridLines, HeroLines, ServicesFlow } from '../src/components/Landing'; +import { ArrowRight } from 'lucide-react'; +import { + CirclePattern, + ComparisonRow, + ConnectorBranch, + ConnectorEnd, + ConnectorSplit, + ConnectorStart, + FlowLines, + GridLines, + HeroLines, + ServicesFlow, + DirectCommunication, + FastPrototyping, + CleanCode, + FixedPrice, + MinimalistArchitect, + WebsitesIllustration, + SystemsIllustration, + AutomationIllustration, + DifferenceIllustration, + TargetGroupIllustration, + ContactIllustration, + PromiseSectionIllustration, + ServicesSectionIllustration, + ConceptCommunication, + ConceptPrototyping, + ConceptCode, + ConceptPrice, + ConceptWebsite, + ConceptSystem, + ConceptAutomation, + ConceptTarget, + FloatingParticles, + ConceptMessy +} from '../src/components/Landing'; import { Reveal } from '../src/components/Reveal'; import { Section } from '../src/components/Section'; @@ -15,10 +49,16 @@ export default function LandingPage() { {/* Hero Section - Split Layout */}
+
+ +
{/* Connector Start for Hero */}
+
+ +
@@ -60,6 +100,12 @@ export default function LandingPage() {
01
+ + {/* Minimalist Architect Illustration in Background */} +
+ +
+

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

@@ -79,8 +125,17 @@ export default function LandingPage() {
{/* Section 02: The Promise */} -
}> +
} + illustration={} + >
+
+ +
@@ -96,19 +151,23 @@ export default function LandingPage() {
-
+
+ +
Was ich biete
-
    +
      {[ - 'Direkte Kommunikation ohne Account Manager', - 'Schnelle Prototypen statt langer Konzepte', - 'Sauberer Code, der auch morgen noch läuft', - 'Fixpreise für klare Budgetsicherheit' + { text: 'Direkte Kommunikation ohne Account Manager', icon: }, + { text: 'Schnelle Prototypen statt langer Konzepte', icon: }, + { text: 'Sauberer Code, der auch morgen noch läuft', icon: }, + { text: 'Fixpreise für klare Budgetsicherheit', icon: } ].map((item, i) => ( -
    • - - {item} +
    • +
      + {item.icon} +
      + {item.text}
      • ))}
    @@ -118,7 +177,9 @@ export default function LandingPage() {
    -
    +
    + +
    Was ich nicht mache
      @@ -141,13 +202,25 @@ export default function LandingPage() {
{/* Section 03: The Difference */} -
}> +
} + illustration={} + >
- -

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

- +
+ +

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

+ + + + +
{/* Section 04: Target Group */} -
}> +
} + illustration={} + >
@@ -185,9 +264,12 @@ export default function LandingPage() {
-
-
- +
+
+ +
+
+

Unternehmer &
Geschäftsführer

@@ -201,9 +283,12 @@ export default function LandingPage() {

-
-
- +
+
+ +
+
+

Marketing &
Vertrieb

@@ -220,7 +305,14 @@ export default function LandingPage() {

{/* Section 05: Services - Visual Flow */} -
}> +
} + illustration={} + >
{/* Connecting Line Illustration */}
@@ -229,9 +321,12 @@ export default function LandingPage() {
-
-
- +
+
+ +
+
+

Websites

@@ -244,9 +339,12 @@ export default function LandingPage() { -

-
- +
+
+ +
+
+

Systeme

@@ -256,9 +354,12 @@ export default function LandingPage() { -

-
- +
+
+ +
+
+

Automatisierung

@@ -271,11 +372,20 @@ export default function LandingPage() {

{/* Section 06: Contact */} -
}> +
} + illustration={} + >
+
+ +

diff --git a/src/components/Landing/ConceptIllustrations.tsx b/src/components/Landing/ConceptIllustrations.tsx new file mode 100644 index 0000000..30212cc --- /dev/null +++ b/src/components/Landing/ConceptIllustrations.tsx @@ -0,0 +1,245 @@ +'use client'; + +import * as React from 'react'; +import { motion } from 'framer-motion'; + +interface IllustrationProps { + className?: string; + delay?: number; +} + +export const ConceptCommunication: React.FC = ({ className = "", delay = 0 }) => ( + + + + + + + + + +); + +export const ConceptPrototyping: React.FC = ({ className = "", delay = 0 }) => ( + + + + + + + +); + +export const ConceptCode: React.FC = ({ className = "", delay = 0 }) => ( + + {[40, 55, 70, 85].map((y, i) => ( + + ))} + + +); + +export const ConceptPrice: React.FC = ({ className = "", delay = 0 }) => ( + + + + + € + +); + +export const ConceptWebsite: React.FC = ({ className = "", delay = 0 }) => ( + + + + + + + + +); + +export const ConceptSystem: React.FC = ({ className = "", delay = 0 }) => ( + + + {[0, 72, 144, 216, 288].map((angle, i) => { + const x = 60 + Math.cos((angle * Math.PI) / 180) * 40; + const y = 60 + Math.sin((angle * Math.PI) / 180) * 40; + return ( + + + + + ); + })} + +); + +export const ConceptAutomation: React.FC = ({ className = "", delay = 0 }) => ( + + + + + + + + + +); + +export const ConceptMessy: React.FC = ({ className = "", delay = 0 }) => ( + + + + +); + +export const FloatingParticles: React.FC = ({ className = "", delay = 0 }) => ( + + {[...Array(10)].map((_, i) => ( + + ))} + +); + +export const ConceptTarget: React.FC = ({ className = "", delay = 0 }) => ( + + + + + +); diff --git a/src/components/Landing/ExplanatoryIllustrations.tsx b/src/components/Landing/ExplanatoryIllustrations.tsx new file mode 100644 index 0000000..d311491 --- /dev/null +++ b/src/components/Landing/ExplanatoryIllustrations.tsx @@ -0,0 +1,313 @@ +'use client'; + +import * as React from 'react'; +import { motion } from 'framer-motion'; + +interface IllustrationProps { + className?: string; + delay?: number; +} + +export const DirectCommunication: React.FC = ({ className = "", delay = 0 }) => ( + + + + + + + + +); + +export const FastPrototyping: React.FC = ({ className = "", delay = 0 }) => ( + + + + + + +); + +export const CleanCode: React.FC = ({ className = "", delay = 0 }) => ( + + + + + + + +); + +export const FixedPrice: React.FC = ({ className = "", delay = 0 }) => ( + + + + + + +); + +export const WebsitesIllustration: React.FC = ({ className = "", delay = 0 }) => ( + + + + + + +); + +export const SystemsIllustration: React.FC = ({ className = "", delay = 0 }) => ( + + + + + +); + +export const AutomationIllustration: React.FC = ({ className = "", delay = 0 }) => ( + + + + + + +); + +export const MinimalistArchitect: React.FC = ({ className = "", delay = 0 }) => ( + + + + + +); + +export const DifferenceIllustration: React.FC = ({ className = "", delay = 0 }) => ( + + {/* Messy Path */} + + {/* Arrow to clean side */} + + {/* Clean Path */} + + +); + +export const TargetGroupIllustration: React.FC = ({ className = "", delay = 0 }) => ( + + + + + +); + +export const ContactIllustration: React.FC = ({ className = "", delay = 0 }) => ( + + + + + +); + +export const PromiseSectionIllustration: React.FC = ({ className = "", delay = 0 }) => ( + + + + +); + +export const ServicesSectionIllustration: React.FC = ({ className = "", delay = 0 }) => ( + + + + + +); diff --git a/src/components/Landing/index.ts b/src/components/Landing/index.ts index af62dbb..501883d 100644 --- a/src/components/Landing/index.ts +++ b/src/components/Landing/index.ts @@ -1,4 +1,6 @@ export * from './AbstractLines'; +export * from './ExplanatoryIllustrations'; +export * from './ConceptIllustrations'; export * from './ComparisonRow'; export * from './FeatureCard'; export * from './HeroItem'; diff --git a/src/components/Section.tsx b/src/components/Section.tsx index db89242..c6dbc09 100644 --- a/src/components/Section.tsx +++ b/src/components/Section.tsx @@ -10,6 +10,7 @@ interface SectionProps { variant?: 'white' | 'gray'; borderTop?: boolean; connector?: React.ReactNode; + illustration?: React.ReactNode; } export const Section: React.FC = ({ @@ -21,12 +22,13 @@ export const Section: React.FC = ({ variant = 'white', borderTop = false, connector, + illustration, }) => { const bgClass = variant === 'gray' ? 'bg-slate-50' : 'bg-white'; const borderClass = borderTop ? 'border-t border-slate-100' : ''; return ( -
+
{/* Sidebar: Number & Title */} @@ -56,6 +58,13 @@ export const Section: React.FC = ({
)} + {illustration && ( + +
+ {illustration} +
+ + )}