diff --git a/app/page.tsx b/app/page.tsx index ef2dec7..abc8ec6 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -31,8 +31,9 @@ import { ConceptSystem, ConceptAutomation, ConceptTarget, - FloatingParticles, - ConceptMessy + ConceptMessy, + HeroArchitecture, + HeroMainIllustration } from '../src/components/Landing'; import { Reveal } from '../src/components/Reveal'; import { Section } from '../src/components/Section'; @@ -49,21 +50,15 @@ export default function LandingPage() { {/* Hero Section - Split Layout */}
-
- -
{/* Connector Start for Hero */}
-
- -
-
+
{/* Left Column: Brand & Number */} -
+
@@ -89,34 +84,15 @@ export default function LandingPage() {
{/* Right Column: Visual & Context */} -
- {/* Abstract Lines Illustration */} -
- +
+ {/* Hero Architecture Illustration - Background Layer */} +
+
- -
-
- 01 -
- - {/* Minimalist Architect Illustration in Background */} -
- -
- -

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

-
-
- M -
-
- Marc Mintel -
-
+ +
+
@@ -130,12 +106,8 @@ export default function LandingPage() { title="Das Versprechen" borderTop connector={} - illustration={} >
-
- -
@@ -164,7 +136,7 @@ export default function LandingPage() { { text: 'Fixpreise für klare Budgetsicherheit', icon: } ].map((item, i) => (
  • -
    +
    {item.icon}
    {item.text} @@ -189,8 +161,8 @@ export default function LandingPage() { 'Outsourcing an Billig-Anbieter', 'Wartungsverträge mit versteckten Kosten' ].map((item, i) => ( -
  • - +
  • + {item}
    • ))} @@ -208,7 +180,6 @@ export default function LandingPage() { variant="white" borderTop connector={} - illustration={} >
    @@ -255,7 +226,6 @@ export default function LandingPage() { title="Zielgruppe" borderTop connector={} - illustration={} >
    @@ -265,9 +235,6 @@ export default function LandingPage() {
    -
    - -
    @@ -284,9 +251,6 @@ export default function LandingPage() {
    -
    - -
    @@ -311,7 +275,6 @@ export default function LandingPage() { variant="gray" borderTop connector={} - illustration={} >
    {/* Connecting Line Illustration */} @@ -322,9 +285,6 @@ export default function LandingPage() {
    -
    - -
    @@ -340,9 +300,6 @@ export default function LandingPage() {
    -
    - -
    @@ -355,9 +312,6 @@ export default function LandingPage() {
    -
    - -
    @@ -377,7 +331,6 @@ export default function LandingPage() { title="Kontakt" borderTop connector={} - illustration={} >
    diff --git a/src/components/Landing/ConceptIllustrations.tsx b/src/components/Landing/ConceptIllustrations.tsx index 30212cc..c012717 100644 --- a/src/components/Landing/ConceptIllustrations.tsx +++ b/src/components/Landing/ConceptIllustrations.tsx @@ -10,9 +10,9 @@ interface IllustrationProps { export const ConceptCommunication: React.FC = ({ className = "", delay = 0 }) => ( - + - + = ({ className = export const ConceptPrototyping: React.FC = ({ className = "", delay = 0 }) => ( - - + + @@ -66,7 +66,7 @@ export const ConceptCode: React.FC = ({ className = "", delay stroke="currentColor" strokeWidth="2" strokeLinecap="round" - className="text-slate-200" + className="text-slate-400" initial={{ pathLength: 0 }} animate={{ pathLength: [0, 1, 1, 0] }} transition={{ duration: 4, repeat: Infinity, delay: i * 0.2 + delay }} @@ -87,12 +87,12 @@ export const ConceptCode: React.FC = ({ className = "", delay export const ConceptPrice: React.FC = ({ className = "", delay = 0 }) => ( - + = ({ className = "", dela animate={{ y: [0, -5, 0], rotate: [0, 10, 0] }} transition={{ duration: 4, repeat: Infinity }} /> - € ); 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; @@ -137,7 +137,7 @@ export const ConceptSystem: React.FC = ({ className = "", del = ({ className = "", transition={{ duration: 10, repeat: Infinity, ease: "linear" }} style={{ originX: "40px", originY: "60px" }} > - + - + = ({ className = "", ); -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 }) => ( = ({ className = "", del /> ); + +export const ConceptMessy: React.FC = ({ className = "", delay = 0 }) => ( + + + + +); + +export const HeroArchitecture: React.FC = ({ className = "", delay = 0 }) => ( + + + {[ + { x: 80, y: 60 }, { x: 320, y: 60 }, + { x: 80, y: 240 }, { x: 320, y: 240 } + ].map((node, i) => ( + + + + + ))} + +); + +// Binary text component for reuse +const BinaryText: React.FC<{ x: number; y: number; delay?: number }> = ({ x, y, delay = 0 }) => ( + + {Math.random() > 0.5 ? '0' : '1'} + +); + +export const HeroMainIllustration: React.FC = ({ className = "", delay = 0 }) => { + return ( + + {/* Matrix-style Binary Rain Background */} + + {Array.from({ length: 20 }).map((_, col) => { + const colX = 20 + col * 40; + const speed = 8 + Math.random() * 6; + const startDelay = Math.random() * 5; + return ( + + {Array.from({ length: 25 }).map((_, row) => ( + + {Math.random() > 0.5 ? '1' : '0'} + + ))} + + ); + })} + + + {/* Layer 1: Base Platform */} + + + + {/* Binary on base */} + 01010101010101010101010101010101010101 + + + {/* Layer 2: Server/Database Layer */} + + {/* Left Server Block */} + + + + + + + SERVER + + + {/* Right Database Block */} + + + + + + + DATABASE + + + {/* Connection Lines */} + + + + {/* Layer 3: Browser/Website */} + + {/* Browser Window */} + + + {/* Browser Chrome */} + + + + {/* Browser Dots */} + + + + + {/* Address Bar */} + + + {/* Website Content */} + + {/* Navigation */} + + + + + + + {/* Hero Section */} + + + + + + + {/* Hero Image Placeholder */} + + + + {/* Cards Section */} + + + + + + + + + + + + + + + + + {/* Connecting Lines from Browser to Infrastructure */} + + + + + + + + ); +}; diff --git a/src/components/Section.tsx b/src/components/Section.tsx index c6dbc09..7efd5ee 100644 --- a/src/components/Section.tsx +++ b/src/components/Section.tsx @@ -10,7 +10,6 @@ interface SectionProps { variant?: 'white' | 'gray'; borderTop?: boolean; connector?: React.ReactNode; - illustration?: React.ReactNode; } export const Section: React.FC = ({ @@ -22,7 +21,6 @@ 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' : ''; @@ -58,13 +56,6 @@ export const Section: React.FC = ({
    )} - {illustration && ( - -
    - {illustration} -
    -     - )}