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-30 00:23:38 +01:00
parent 28d99abf39
commit 5587317e9f
3 changed files with 272 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
app/page.tsx
View File

@@ -31,8 +31,9 @@ import {
ConceptSystem, ConceptSystem,
ConceptAutomation, ConceptAutomation,
ConceptTarget, ConceptTarget,
FloatingParticles, ConceptMessy,
ConceptMessy HeroArchitecture,
HeroMainIllustration
} from '../src/components/Landing'; } from '../src/components/Landing';
import { Reveal } from '../src/components/Reveal'; import { Reveal } from '../src/components/Reveal';
import { Section } from '../src/components/Section'; import { Section } from '../src/components/Section';
@@ -49,21 +50,15 @@ export default function LandingPage() {
{/* Hero Section - Split Layout */} {/* Hero Section - Split Layout */}
<section className="relative min-h-[80vh] flex items-center pt-12 md:pt-0 pb-24 md:pb-0"> <section className="relative min-h-[80vh] flex items-center pt-12 md:pt-0 pb-24 md:pb-0">
<div className="absolute inset-0 pointer-events-none">
<FloatingParticles className="w-full h-full" />
</div>
<div className="narrow-container w-full relative"> <div className="narrow-container w-full relative">
{/* Connector Start for Hero */} {/* Connector Start for Hero */}
<div className="absolute left-[2.5rem] top-32 bottom-0 w-24 hidden md:block -z-10 pointer-events-none"> <div className="absolute left-[2.5rem] top-32 bottom-0 w-24 hidden md:block -z-10 pointer-events-none">
<ConnectorStart className="h-full" /> <ConnectorStart className="h-full" />
<div className="absolute top-64 left-0 w-32 h-32 opacity-20">
<MinimalistArchitect />
</div>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-16 items-center"> <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-16 items-center min-h-[600px]">
{/* Left Column: Brand & Number */} {/* Left Column: Brand & Number */}
<div className="md:col-span-5 relative z-10 bg-white/50 backdrop-blur-[2px]"> <div className="md:col-span-4 relative z-10 bg-white/50 backdrop-blur-[2px]">
<Reveal> <Reveal>
<div className="space-y-8"> <div className="space-y-8">
<div className="flex items-center gap-3 text-slate-400 font-mono text-[10px] uppercase tracking-[0.3em]"> <div className="flex items-center gap-3 text-slate-400 font-mono text-[10px] uppercase tracking-[0.3em]">
@@ -89,34 +84,15 @@ export default function LandingPage() {
</div> </div>
{/* Right Column: Visual & Context */} {/* Right Column: Visual & Context */}
<div className="md:col-span-7 relative h-[400px] md:h-[600px] flex items-center justify-center"> <div className="md:col-span-8 relative h-[600px] md:h-[900px] flex items-center justify-center">
{/* Abstract Lines Illustration */} {/* Hero Architecture Illustration - Background Layer */}
<div className="absolute inset-0 -z-10 opacity-80 pointer-events-none"> <div className="absolute inset-0 -z-10 opacity-5 pointer-events-none flex items-center justify-center scale-[2]">
<HeroLines className="w-full h-full" /> <HeroArchitecture className="w-full h-full" />
</div> </div>
<Reveal delay={0.2}> <Reveal delay={0.2} className="w-full h-full flex items-center justify-center">
<div className="relative bg-white/90 backdrop-blur-md p-8 md:p-12 border border-slate-100 rounded-2xl shadow-2xl shadow-slate-100/50 max-w-md mx-auto z-10"> <div className="relative w-full h-full flex items-center justify-center pointer-events-none">
<div className="absolute -top-6 -left-6 w-12 h-12 bg-slate-900 text-white flex items-center justify-center rounded-full font-bold text-xl"> <HeroMainIllustration className="w-full h-full scale-150 md:scale-[1.6] translate-x-12 md:translate-x-16 origin-center" />
01
</div>
{/* Minimalist Architect Illustration in Background */}
<div className="absolute right-4 bottom-4 w-24 h-24 opacity-10 -z-10">
<MinimalistArchitect />
</div>
<p className="text-xl md:text-2xl font-serif italic text-slate-600 leading-relaxed">
"Ich baue digitale Systeme für Unternehmen, die Ergebnisse wollen – ohne Agentur-Zirkus, ohne Overhead, ohne Tech-Blabla."
</p>
<div className="mt-6 flex items-center gap-4">
<div className="w-10 h-10 bg-slate-100 rounded-full overflow-hidden flex items-center justify-center text-slate-400 font-bold">
M
</div>
<div className="text-xs font-bold uppercase tracking-widest text-slate-900">
Marc Mintel
</div>
</div>
</div> </div>
</Reveal> </Reveal>
</div> </div>
@@ -130,12 +106,8 @@ export default function LandingPage() {
title="Das Versprechen" title="Das Versprechen"
borderTop borderTop
connector={<ConnectorBranch className="h-full" />} connector={<ConnectorBranch className="h-full" />}
illustration={<PromiseSectionIllustration className="w-32 h-32" />}
> >
<div className="space-y-16 relative"> <div className="space-y-16 relative">
<div className="absolute inset-0 pointer-events-none">
<FloatingParticles className="w-full h-full" delay={2} />
</div>
<div className="absolute right-0 top-0 w-64 h-64 -z-10 opacity-30 pointer-events-none"> <div className="absolute right-0 top-0 w-64 h-64 -z-10 opacity-30 pointer-events-none">
<GridLines /> <GridLines />
</div> </div>
@@ -164,7 +136,7 @@ export default function LandingPage() {
{ text: 'Fixpreise für klare Budgetsicherheit', icon: <ConceptPrice className="w-16 h-16" /> } { text: 'Fixpreise für klare Budgetsicherheit', icon: <ConceptPrice className="w-16 h-16" /> }
].map((item, i) => ( ].map((item, i) => (
<li key={i} className="flex items-center gap-6 text-slate-600 font-serif italic text-lg group"> <li key={i} className="flex items-center gap-6 text-slate-600 font-serif italic text-lg group">
<div className="shrink-0 opacity-80 group-hover:opacity-100 transition-all duration-500 group-hover:scale-110"> <div className="shrink-0 opacity-100 transition-all duration-500 group-hover:scale-110">
{item.icon} {item.icon}
</div> </div>
{item.text} {item.text}
@@ -189,8 +161,8 @@ export default function LandingPage() {
'Outsourcing an Billig-Anbieter', 'Outsourcing an Billig-Anbieter',
'Wartungsverträge mit versteckten Kosten' 'Wartungsverträge mit versteckten Kosten'
].map((item, i) => ( ].map((item, i) => (
<li key={i} className="flex items-start gap-3 text-slate-400 font-serif italic text-lg decoration-slate-200 line-through"> <li key={i} className="flex items-start gap-3 text-slate-400 font-serif italic text-lg decoration-slate-400 line-through">
<span className="w-1.5 h-1.5 bg-slate-200 rounded-full mt-2.5 shrink-0"></span> <span className="w-1.5 h-1.5 bg-slate-300 rounded-full mt-2.5 shrink-0"></span>
{item} {item}
</li> </li>
))} ))}
@@ -208,7 +180,6 @@ export default function LandingPage() {
variant="white" variant="white"
borderTop borderTop
connector={<ConnectorStart className="h-full" />} connector={<ConnectorStart className="h-full" />}
illustration={<DifferenceIllustration className="w-32 h-32" />}
> >
<div className="space-y-12 relative"> <div className="space-y-12 relative">
<div className="flex flex-col md:flex-row gap-12 items-center"> <div className="flex flex-col md:flex-row gap-12 items-center">
@@ -255,7 +226,6 @@ export default function LandingPage() {
title="Zielgruppe" title="Zielgruppe"
borderTop borderTop
connector={<ConnectorSplit className="h-full" />} connector={<ConnectorSplit className="h-full" />}
illustration={<TargetGroupIllustration className="w-32 h-32" />}
> >
<div className="relative"> <div className="relative">
<div className="absolute left-0 top-0 w-full h-full -z-10 opacity-30 pointer-events-none"> <div className="absolute left-0 top-0 w-full h-full -z-10 opacity-30 pointer-events-none">
@@ -265,9 +235,6 @@ export default function LandingPage() {
<Reveal> <Reveal>
<div className="p-10 bg-slate-900 text-white rounded-3xl h-full flex flex-col justify-between group hover:scale-[1.02] transition-transform duration-500 shadow-2xl shadow-slate-900/20"> <div className="p-10 bg-slate-900 text-white rounded-3xl h-full flex flex-col justify-between group hover:scale-[1.02] transition-transform duration-500 shadow-2xl shadow-slate-900/20">
<div className="space-y-6 relative overflow-hidden"> <div className="space-y-6 relative overflow-hidden">
<div className="absolute -right-4 -top-4 w-32 h-32 opacity-20 pointer-events-none">
<ConceptTarget className="w-full h-full" />
</div>
<div className="w-16 h-16 bg-white/10 rounded-2xl flex items-center justify-center"> <div className="w-16 h-16 bg-white/10 rounded-2xl flex items-center justify-center">
<ConceptPrice className="w-10 h-10" /> <ConceptPrice className="w-10 h-10" />
</div> </div>
@@ -284,9 +251,6 @@ export default function LandingPage() {
<Reveal delay={0.2}> <Reveal delay={0.2}>
<div className="p-10 bg-white border border-slate-100 rounded-3xl h-full flex flex-col justify-between group hover:border-slate-300 transition-colors duration-500 shadow-xl shadow-slate-100/50"> <div className="p-10 bg-white border border-slate-100 rounded-3xl h-full flex flex-col justify-between group hover:border-slate-300 transition-colors duration-500 shadow-xl shadow-slate-100/50">
<div className="space-y-6 relative overflow-hidden"> <div className="space-y-6 relative overflow-hidden">
<div className="absolute -right-4 -top-4 w-32 h-32 opacity-10 pointer-events-none">
<ConceptTarget className="w-full h-full" />
</div>
<div className="w-16 h-16 bg-slate-50 border border-slate-200 rounded-2xl flex items-center justify-center"> <div className="w-16 h-16 bg-slate-50 border border-slate-200 rounded-2xl flex items-center justify-center">
<ConceptWebsite className="w-10 h-10" /> <ConceptWebsite className="w-10 h-10" />
</div> </div>
@@ -311,7 +275,6 @@ export default function LandingPage() {
variant="gray" variant="gray"
borderTop borderTop
connector={<ConnectorBranch className="h-full" />} connector={<ConnectorBranch className="h-full" />}
illustration={<ServicesSectionIllustration className="w-32 h-32" />}
> >
<div className="relative py-12"> <div className="relative py-12">
{/* Connecting Line Illustration */} {/* Connecting Line Illustration */}
@@ -322,9 +285,6 @@ export default function LandingPage() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative z-20"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative z-20">
<Reveal delay={0.1}> <Reveal delay={0.1}>
<div className="bg-white p-8 rounded-2xl border border-slate-100 shadow-lg hover:shadow-xl transition-all duration-300 group h-full relative overflow-hidden"> <div className="bg-white p-8 rounded-2xl border border-slate-100 shadow-lg hover:shadow-xl transition-all duration-300 group h-full relative overflow-hidden">
<div className="absolute -right-4 -top-4 w-32 h-32 opacity-[0.1] group-hover:opacity-[0.2] transition-opacity duration-500 pointer-events-none">
<ConceptWebsite />
</div>
<div className="w-20 h-20 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500"> <div className="w-20 h-20 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
<ConceptWebsite className="w-12 h-12" /> <ConceptWebsite className="w-12 h-12" />
</div> </div>
@@ -340,9 +300,6 @@ export default function LandingPage() {
<Reveal delay={0.3}> <Reveal delay={0.3}>
<div className="bg-white p-8 rounded-2xl border border-slate-100 shadow-lg hover:shadow-xl transition-all duration-300 group h-full mt-8 md:mt-0 relative overflow-hidden"> <div className="bg-white p-8 rounded-2xl border border-slate-100 shadow-lg hover:shadow-xl transition-all duration-300 group h-full mt-8 md:mt-0 relative overflow-hidden">
<div className="absolute -right-4 -top-4 w-32 h-32 opacity-[0.1] group-hover:opacity-[0.2] transition-opacity duration-500 pointer-events-none">
<ConceptSystem />
</div>
<div className="w-20 h-20 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500"> <div className="w-20 h-20 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
<ConceptSystem className="w-12 h-12" /> <ConceptSystem className="w-12 h-12" />
</div> </div>
@@ -355,9 +312,6 @@ export default function LandingPage() {
<Reveal delay={0.5}> <Reveal delay={0.5}>
<div className="bg-white p-8 rounded-2xl border border-slate-100 shadow-lg hover:shadow-xl transition-all duration-300 group h-full relative overflow-hidden"> <div className="bg-white p-8 rounded-2xl border border-slate-100 shadow-lg hover:shadow-xl transition-all duration-300 group h-full relative overflow-hidden">
<div className="absolute -right-4 -top-4 w-32 h-32 opacity-[0.1] group-hover:opacity-[0.2] transition-opacity duration-500 pointer-events-none">
<ConceptAutomation />
</div>
<div className="w-20 h-20 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500"> <div className="w-20 h-20 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
<ConceptAutomation className="w-12 h-12" /> <ConceptAutomation className="w-12 h-12" />
</div> </div>
@@ -377,7 +331,6 @@ export default function LandingPage() {
title="Kontakt" title="Kontakt"
borderTop borderTop
connector={<ConnectorEnd className="h-full" />} connector={<ConnectorEnd className="h-full" />}
illustration={<ContactIllustration className="w-32 h-32" />}
> >
<div className="relative py-12" id="contact"> <div className="relative py-12" id="contact">
<div className="absolute right-0 top-1/2 -translate-y-1/2 w-[400px] h-[200px] -z-10 opacity-40 pointer-events-none"> <div className="absolute right-0 top-1/2 -translate-y-1/2 w-[400px] h-[200px] -z-10 opacity-40 pointer-events-none">

323
src/components/Landing/ConceptIllustrations.tsx
View File

@@ -10,9 +10,9 @@ interface IllustrationProps {
export const ConceptCommunication: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => ( export const ConceptCommunication: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
<svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="60" r="6" className="fill-slate-100 stroke-slate-200" strokeWidth="1" /> <circle cx="20" cy="60" r="6" className="fill-slate-200 stroke-slate-300" strokeWidth="1" />
<circle cx="100" cy="60" r="6" className="fill-slate-900" /> <circle cx="100" cy="60" r="6" className="fill-slate-900" />
<path d="M 26 60 H 94" stroke="currentColor" strokeWidth="1" className="text-slate-100" strokeDasharray="4 4" /> <path d="M 26 60 H 94" stroke="currentColor" strokeWidth="1" className="text-slate-300" strokeDasharray="4 4" />
<motion.path <motion.path
d="M 26 60 H 94" d="M 26 60 H 94"
stroke="currentColor" stroke="currentColor"
@@ -34,17 +34,17 @@ export const ConceptCommunication: React.FC<IllustrationProps> = ({ className =
export const ConceptPrototyping: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => ( export const ConceptPrototyping: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
<svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="15" y="25" width="90" height="70" rx="4" stroke="currentColor" strokeWidth="1" className="text-slate-200" /> <rect x="15" y="25" width="90" height="70" rx="4" stroke="currentColor" strokeWidth="1" className="text-slate-400" />
<path d="M 15 40 H 105" stroke="currentColor" strokeWidth="1" className="text-slate-100" /> <path d="M 15 40 H 105" stroke="currentColor" strokeWidth="1" className="text-slate-300" />
<motion.rect <motion.rect
x="25" y="50" width="40" height="8" rx="1" x="25" y="50" width="40" height="8" rx="1"
className="fill-slate-100" className="fill-slate-300"
animate={{ width: [0, 40, 40, 0] }} animate={{ width: [0, 40, 40, 0] }}
transition={{ duration: 4, repeat: Infinity, delay }} transition={{ duration: 4, repeat: Infinity, delay }}
/> />
<motion.rect <motion.rect
x="25" y="65" width="60" height="8" rx="1" x="25" y="65" width="60" height="8" rx="1"
className="fill-slate-50" className="fill-slate-200"
animate={{ width: [0, 60, 60, 0] }} animate={{ width: [0, 60, 60, 0] }}
transition={{ duration: 4, repeat: Infinity, delay: 0.5 }} transition={{ duration: 4, repeat: Infinity, delay: 0.5 }}
/> />
@@ -66,7 +66,7 @@ export const ConceptCode: React.FC<IllustrationProps> = ({ className = "", delay
stroke="currentColor" stroke="currentColor"
strokeWidth="2" strokeWidth="2"
strokeLinecap="round" strokeLinecap="round"
className="text-slate-200" className="text-slate-400"
initial={{ pathLength: 0 }} initial={{ pathLength: 0 }}
animate={{ pathLength: [0, 1, 1, 0] }} animate={{ pathLength: [0, 1, 1, 0] }}
transition={{ duration: 4, repeat: Infinity, delay: i * 0.2 + delay }} transition={{ duration: 4, repeat: Infinity, delay: i * 0.2 + delay }}
@@ -87,12 +87,12 @@ export const ConceptCode: React.FC<IllustrationProps> = ({ className = "", delay
export const ConceptPrice: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => ( export const ConceptPrice: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
<svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="30" y="30" width="60" height="70" rx="2" stroke="currentColor" strokeWidth="1" className="text-slate-200" /> <rect x="30" y="30" width="60" height="70" rx="2" stroke="currentColor" strokeWidth="1" className="text-slate-400" />
<motion.path <motion.path
d="M 40 50 H 80 M 40 65 H 80 M 40 80 H 60" d="M 40 50 H 80 M 40 65 H 80 M 40 80 H 60"
stroke="currentColor" stroke="currentColor"
strokeWidth="1" strokeWidth="1"
className="text-slate-100" className="text-slate-300"
initial={{ pathLength: 0 }} initial={{ pathLength: 0 }}
animate={{ pathLength: [0, 1, 1, 0] }} animate={{ pathLength: [0, 1, 1, 0] }}
transition={{ duration: 5, repeat: Infinity, delay }} transition={{ duration: 5, repeat: Infinity, delay }}
@@ -104,32 +104,32 @@ export const ConceptPrice: React.FC<IllustrationProps> = ({ className = "", dela
animate={{ y: [0, -5, 0], rotate: [0, 10, 0] }} animate={{ y: [0, -5, 0], rotate: [0, 10, 0] }}
transition={{ duration: 4, repeat: Infinity }} transition={{ duration: 4, repeat: Infinity }}
/> />
<text x="78" y="40" className="fill-slate-900 font-bold text-[10px]">€</text>
</svg> </svg>
); );
export const ConceptWebsite: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => ( export const ConceptWebsite: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
<svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="20" width="100" height="80" rx="4" stroke="currentColor" strokeWidth="1" className="text-slate-200" /> <rect x="10" y="20" width="100" height="80" rx="4" stroke="currentColor" strokeWidth="1" className="text-slate-400" />
<motion.rect <motion.rect
x="20" y="35" width="80" height="15" rx="2" x="20" y="35" width="80" height="15" rx="2"
className="fill-slate-50" className="fill-slate-200"
animate={{ opacity: [0.3, 0.6, 0.3] }} animate={{ opacity: [0.3, 0.6, 0.3] }}
transition={{ duration: 3, repeat: Infinity }} transition={{ duration: 3, repeat: Infinity }}
/> />
<motion.div <motion.g
animate={{ y: [0, 10, 0] }} animate={{ y: [0, 10, 0] }}
transition={{ duration: 4, repeat: Infinity }} transition={{ duration: 4, repeat: Infinity }}
> >
<rect x="20" y="55" width="35" height="35" rx="2" className="fill-slate-100" /> <rect x="20" y="55" width="35" height="35" rx="2" className="fill-slate-300" />
<rect x="65" y="55" width="35" height="35" rx="2" className="fill-slate-100" /> <rect x="65" y="55" width="35" height="35" rx="2" className="fill-slate-300" />
</motion.div> </motion.g>
</svg> </svg>
); );
export const ConceptSystem: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => ( export const ConceptSystem: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
<svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<motion.circle cx="60" cy="60" r="15" className="fill-slate-900" /> <motion.circle cx="60" cy="60" r="15" className="fill-slate-900"
animate={{ scale: [1, 1.1, 1] }} transition={{ duration: 4, repeat: Infinity }} />
{[0, 72, 144, 216, 288].map((angle, i) => { {[0, 72, 144, 216, 288].map((angle, i) => {
const x = 60 + Math.cos((angle * Math.PI) / 180) * 40; const x = 60 + Math.cos((angle * Math.PI) / 180) * 40;
const y = 60 + Math.sin((angle * Math.PI) / 180) * 40; const y = 60 + Math.sin((angle * Math.PI) / 180) * 40;
@@ -137,7 +137,7 @@ export const ConceptSystem: React.FC<IllustrationProps> = ({ className = "", del
<React.Fragment key={i}> <React.Fragment key={i}>
<motion.line <motion.line
x1="60" y1="60" x2={x} y2={y} x1="60" y1="60" x2={x} y2={y}
stroke="currentColor" strokeWidth="1" className="text-slate-200" stroke="currentColor" strokeWidth="1" className="text-slate-400"
animate={{ strokeDashoffset: [0, 10] }} animate={{ strokeDashoffset: [0, 10] }}
strokeDasharray="2 2" strokeDasharray="2 2"
transition={{ duration: 2, repeat: Infinity, ease: "linear" }} transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
@@ -161,18 +161,18 @@ export const ConceptAutomation: React.FC<IllustrationProps> = ({ className = "",
transition={{ duration: 10, repeat: Infinity, ease: "linear" }} transition={{ duration: 10, repeat: Infinity, ease: "linear" }}
style={{ originX: "40px", originY: "60px" }} style={{ originX: "40px", originY: "60px" }}
> >
<path d="M 40 45 L 50 60 L 40 75 L 30 60 Z" className="fill-slate-200" /> <path d="M 40 45 L 50 60 L 40 75 L 30 60 Z" className="fill-slate-300" />
</motion.g> </motion.g>
<motion.g <motion.g
animate={{ rotate: -360 }} animate={{ rotate: -360 }}
transition={{ duration: 10, repeat: Infinity, ease: "linear" }} transition={{ duration: 10, repeat: Infinity, ease: "linear" }}
style={{ originX: "75px", originY: "65px" }} style={{ originX: "75px", originY: "65px" }}
> >
<path d="M 75 50 L 85 65 L 75 80 L 65 65 Z" className="fill-slate-400" /> <path d="M 75 50 L 85 65 L 75 80 L 65 65 Z" className="fill-slate-500" />
</motion.g> </motion.g>
<motion.path <motion.path
d="M 10 60 H 110" d="M 10 60 H 110"
stroke="currentColor" strokeWidth="1" className="text-slate-100" stroke="currentColor" strokeWidth="1" className="text-slate-300"
strokeDasharray="4 4" strokeDasharray="4 4"
animate={{ strokeDashoffset: [0, -20] }} animate={{ strokeDashoffset: [0, -20] }}
transition={{ duration: 2, repeat: Infinity, ease: "linear" }} transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
@@ -180,60 +180,17 @@ export const ConceptAutomation: React.FC<IllustrationProps> = ({ className = "",
</svg> </svg>
); );
export const ConceptMessy: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
<svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<motion.path
d="M 20 60 C 30 20, 40 100, 50 60 C 60 20, 70 100, 80 60 C 90 20, 100 100, 110 60"
stroke="currentColor" strokeWidth="1" className="text-slate-300"
animate={{ strokeDashoffset: [0, 20] }}
strokeDasharray="4 4"
transition={{ duration: 5, repeat: Infinity, ease: "linear" }}
/>
<motion.path
d="M 20 40 L 100 80 M 20 80 L 100 40"
stroke="currentColor" strokeWidth="1" className="text-slate-200 opacity-50"
/>
</svg>
);
export const FloatingParticles: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
<svg className={className} viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
{[...Array(10)].map((_, i) => (
<motion.circle
key={i}
r={Math.random() * 2 + 1}
className="fill-slate-200"
initial={{
x: Math.random() * 200,
y: Math.random() * 200,
opacity: 0
}}
animate={{
y: [null, Math.random() * -50 - 20],
opacity: [0, 0.5, 0]
}}
transition={{
duration: Math.random() * 5 + 5,
repeat: Infinity,
delay: Math.random() * 5 + delay,
ease: "linear"
}}
/>
))}
</svg>
);
export const ConceptTarget: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => ( export const ConceptTarget: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
<svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<motion.circle <motion.circle
cx="60" cy="60" r="50" cx="60" cy="60" r="50"
stroke="currentColor" strokeWidth="1" className="text-slate-100" stroke="currentColor" strokeWidth="1" className="text-slate-300"
animate={{ scale: [1, 1.05, 1] }} animate={{ scale: [1, 1.05, 1] }}
transition={{ duration: 4, repeat: Infinity }} transition={{ duration: 4, repeat: Infinity }}
/> />
<motion.circle <motion.circle
cx="60" cy="60" r="30" cx="60" cy="60" r="30"
stroke="currentColor" strokeWidth="1" className="text-slate-200" stroke="currentColor" strokeWidth="1" className="text-slate-400"
/> />
<motion.circle <motion.circle
cx="60" cy="60" r="10" cx="60" cy="60" r="10"
@@ -243,3 +200,237 @@ export const ConceptTarget: React.FC<IllustrationProps> = ({ className = "", del
/> />
</svg> </svg>
); );
export const ConceptMessy: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
<svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<motion.path
d="M 20 60 C 30 20, 40 100, 50 60 C 60 20, 70 100, 80 60 C 90 20, 100 100, 110 60"
stroke="currentColor" strokeWidth="1" className="text-slate-500"
animate={{ strokeDashoffset: [0, 20] }}
strokeDasharray="4 4"
transition={{ duration: 5, repeat: Infinity, ease: "linear" }}
/>
<motion.path
d="M 20 40 L 100 80 M 20 80 L 100 40"
stroke="currentColor" strokeWidth="1" className="text-slate-200 opacity-50"
animate={{ opacity: [0.2, 0.5, 0.2] }} transition={{ duration: 3, repeat: Infinity }}
/>
</svg>
);
export const HeroArchitecture: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
<svg className={className} viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<motion.rect x="170" y="120" width="60" height="60" rx="8" className="stroke-slate-900 fill-white" strokeWidth="2"
animate={{ scale: [1, 1.05, 1] }} transition={{ duration: 4, repeat: Infinity }} />
{[
{ x: 80, y: 60 }, { x: 320, y: 60 },
{ x: 80, y: 240 }, { x: 320, y: 240 }
].map((node, i) => (
<React.Fragment key={i}>
<motion.path
d={`M 200 150 L ${node.x} ${node.y}`}
stroke="currentColor" strokeWidth="1" className="text-slate-400"
animate={{ strokeDashoffset: [0, -10] }} strokeDasharray="4 4"
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
/>
<motion.circle
cx={node.x} cy={node.y} r="12"
className="fill-white stroke-slate-300"
strokeWidth="1"
animate={{ scale: [1, 1.1, 1] }} transition={{ duration: 3, repeat: Infinity, delay: i * 0.5 }}
/>
</React.Fragment>
))}
</svg>
);
// Binary text component for reuse
const BinaryText: React.FC<{ x: number; y: number; delay?: number }> = ({ x, y, delay = 0 }) => (
<motion.text
x={x}
y={y}
className="fill-slate-300 font-mono"
style={{ fontSize: 10 }}
animate={{ opacity: [0.2, 0.5, 0.2] }}
transition={{ duration: 2, repeat: Infinity, delay }}
>
{Math.random() > 0.5 ? '0' : '1'}
</motion.text>
);
export const HeroMainIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => {
return (
<svg className={className} viewBox="0 0 800 700" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Matrix-style Binary Rain Background */}
<g className="opacity-[0.08]">
{Array.from({ length: 20 }).map((_, col) => {
const colX = 20 + col * 40;
const speed = 8 + Math.random() * 6;
const startDelay = Math.random() * 5;
return (
<motion.g
key={`rain-col-${col}`}
initial={{ y: -700 }}
animate={{ y: 700 }}
transition={{
duration: speed,
repeat: Infinity,
ease: "linear",
delay: startDelay,
}}
>
{Array.from({ length: 25 }).map((_, row) => (
<text
key={`${col}-${row}`}
x={colX}
y={row * 28}
className="fill-slate-900 font-mono"
style={{ fontSize: 12 }}
>
{Math.random() > 0.5 ? '1' : '0'}
</text>
))}
</motion.g>
);
})}
</g>
{/* Layer 1: Base Platform */}
<motion.g
animate={{ y: [0, 8, 0] }}
transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
>
<rect x="150" y="500" width="500" height="30" rx="4" className="fill-slate-100 stroke-slate-300" strokeWidth="1" />
<rect x="170" y="510" width="460" height="10" rx="2" className="fill-slate-200" />
{/* Binary on base */}
<text x="180" y="518" className="fill-slate-400 font-mono" style={{ fontSize: 8 }}>01010101010101010101010101010101010101</text>
</motion.g>
{/* Layer 2: Server/Database Layer */}
<motion.g
animate={{ y: [0, 6, 0] }}
transition={{ duration: 5, repeat: Infinity, ease: "easeInOut", delay: 0.3 }}
>
{/* Left Server Block */}
<g transform="translate(200, 400)">
<rect x="0" y="0" width="120" height="80" rx="6" className="fill-white stroke-slate-900" strokeWidth="2" />
<rect x="10" y="10" width="100" height="15" rx="2" className="fill-slate-100" />
<rect x="10" y="30" width="80" height="10" rx="2" className="fill-slate-200" />
<rect x="10" y="45" width="60" height="10" rx="2" className="fill-slate-200" />
<circle cx="100" cy="65" r="5" className="fill-slate-900" />
<text x="15" y="20" className="fill-slate-500 font-mono" style={{ fontSize: 8 }}>SERVER</text>
</g>
{/* Right Database Block */}
<g transform="translate(480, 400)">
<rect x="0" y="0" width="120" height="80" rx="6" className="fill-white stroke-slate-900" strokeWidth="2" />
<rect x="10" y="10" width="100" height="15" rx="2" className="fill-slate-100" />
<rect x="10" y="30" width="100" height="8" rx="2" className="fill-slate-200" />
<rect x="10" y="42" width="100" height="8" rx="2" className="fill-slate-200" />
<rect x="10" y="54" width="100" height="8" rx="2" className="fill-slate-200" />
<text x="15" y="20" className="fill-slate-500 font-mono" style={{ fontSize: 8 }}>DATABASE</text>
</g>
{/* Connection Lines */}
<motion.path
d="M 320 440 L 400 440 L 480 440"
stroke="currentColor"
strokeWidth="2"
className="text-slate-400"
strokeDasharray="6 4"
animate={{ strokeDashoffset: [0, -20] }}
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
/>
</motion.g>
{/* Layer 3: Browser/Website */}
<motion.g
animate={{ y: [0, 4, 0] }}
transition={{ duration: 5, repeat: Infinity, ease: "easeInOut", delay: 0.6 }}
>
{/* Browser Window */}
<rect x="180" y="100" width="440" height="280" rx="8" className="fill-white stroke-slate-900" strokeWidth="2" />
{/* Browser Chrome */}
<rect x="180" y="100" width="440" height="30" rx="8" className="fill-slate-900" />
<rect x="180" y="120" width="440" height="10" className="fill-slate-900" />
{/* Browser Dots */}
<circle cx="200" cy="115" r="5" className="fill-slate-600" />
<circle cx="218" cy="115" r="5" className="fill-slate-600" />
<circle cx="236" cy="115" r="5" className="fill-slate-600" />
{/* Address Bar */}
<rect x="260" y="108" width="200" height="14" rx="3" className="fill-slate-700" />
{/* Website Content */}
<g transform="translate(200, 150)">
{/* Navigation */}
<rect x="0" y="0" width="400" height="20" className="fill-slate-50" />
<rect x="10" y="5" width="60" height="10" rx="2" className="fill-slate-900" />
<rect x="280" y="5" width="30" height="10" rx="2" className="fill-slate-300" />
<rect x="320" y="5" width="30" height="10" rx="2" className="fill-slate-300" />
<rect x="360" y="5" width="30" height="10" rx="2" className="fill-slate-300" />
{/* Hero Section */}
<rect x="0" y="30" width="400" height="100" className="fill-slate-100" />
<rect x="20" y="50" width="180" height="16" rx="2" className="fill-slate-900" />
<rect x="20" y="72" width="140" height="10" rx="2" className="fill-slate-400" />
<rect x="20" y="88" width="100" height="10" rx="2" className="fill-slate-400" />
<rect x="20" y="108" width="80" height="16" rx="4" className="fill-slate-900" />
{/* Hero Image Placeholder */}
<rect x="240" y="40" width="140" height="80" rx="4" className="fill-slate-200" />
<path d="M 280 80 L 310 60 L 340 80 L 310 100 Z" className="fill-slate-300" />
{/* Cards Section */}
<g transform="translate(0, 140)">
<rect x="0" y="0" width="125" height="70" rx="4" className="fill-slate-50 stroke-slate-200" strokeWidth="1" />
<rect x="10" y="10" width="105" height="30" rx="2" className="fill-slate-200" />
<rect x="10" y="48" width="80" height="8" rx="2" className="fill-slate-300" />
<rect x="137" y="0" width="125" height="70" rx="4" className="fill-slate-50 stroke-slate-200" strokeWidth="1" />
<rect x="147" y="10" width="105" height="30" rx="2" className="fill-slate-200" />
<rect x="147" y="48" width="80" height="8" rx="2" className="fill-slate-300" />
<rect x="274" y="0" width="125" height="70" rx="4" className="fill-slate-50 stroke-slate-200" strokeWidth="1" />
<rect x="284" y="10" width="105" height="30" rx="2" className="fill-slate-200" />
<rect x="284" y="48" width="80" height="8" rx="2" className="fill-slate-300" />
</g>
</g>
</motion.g>
{/* Connecting Lines from Browser to Infrastructure */}
<motion.g>
<motion.path
d="M 400 380 L 400 400"
stroke="currentColor"
strokeWidth="2"
className="text-slate-400"
strokeDasharray="4 4"
animate={{ strokeDashoffset: [0, -16] }}
transition={{ duration: 0.8, repeat: Infinity, ease: "linear" }}
/>
<motion.path
d="M 260 480 L 260 500"
stroke="currentColor"
strokeWidth="2"
className="text-slate-400"
strokeDasharray="4 4"
animate={{ strokeDashoffset: [0, -16] }}
transition={{ duration: 0.8, repeat: Infinity, ease: "linear" }}
/>
<motion.path
d="M 540 480 L 540 500"
stroke="currentColor"
strokeWidth="2"
className="text-slate-400"
strokeDasharray="4 4"
animate={{ strokeDashoffset: [0, -16] }}
transition={{ duration: 0.8, repeat: Infinity, ease: "linear" }}
/>
</motion.g>
</svg>
);
};

9
src/components/Section.tsx
View File

@@ -10,7 +10,6 @@ interface SectionProps {
variant?: 'white' | 'gray'; variant?: 'white' | 'gray';
borderTop?: boolean; borderTop?: boolean;
connector?: React.ReactNode; connector?: React.ReactNode;
illustration?: React.ReactNode;
} }
export const Section: React.FC<SectionProps> = ({ export const Section: React.FC<SectionProps> = ({
@@ -22,7 +21,6 @@ export const Section: React.FC<SectionProps> = ({
variant = 'white', variant = 'white',
borderTop = false, borderTop = false,
connector, connector,
illustration,
}) => { }) => {
const bgClass = variant === 'gray' ? 'bg-slate-50' : 'bg-white'; const bgClass = variant === 'gray' ? 'bg-slate-50' : 'bg-white';
const borderClass = borderTop ? 'border-t border-slate-100' : ''; const borderClass = borderTop ? 'border-t border-slate-100' : '';
@@ -58,13 +56,6 @@ export const Section: React.FC<SectionProps> = ({
</div> </div>
</Reveal> </Reveal>
)} )}
{illustration && (
<Reveal delay={delay + 0.2}>
<div className="pt-12 opacity-20 group-hover:opacity-100 transition-opacity duration-700">
{illustration}
</div>
</Reveal>
)}
</div> </div>
</div> </div>