This commit is contained in:
@@ -0,0 +1,349 @@
|
||||
import * as React from 'react';
|
||||
import Image from 'next/image';
|
||||
import { PageHeader } from '../../src/components/PageHeader';
|
||||
import { Section } from '../../src/components/Section';
|
||||
import { Reveal } from '../../src/components/Reveal';
|
||||
import {
|
||||
ExperienceIllustration,
|
||||
ResponsibilityIllustration,
|
||||
ResultIllustration,
|
||||
ConceptSystem,
|
||||
ConceptTarget,
|
||||
ContactIllustration,
|
||||
ConnectorBranch,
|
||||
ConnectorStart,
|
||||
ConnectorEnd,
|
||||
ConnectorSplit,
|
||||
HeroLines,
|
||||
ParticleNetwork,
|
||||
GridLines
|
||||
} from '../../src/components/Landing';
|
||||
import { Check, ArrowRight } from 'lucide-react';
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div className="flex flex-col bg-white overflow-hidden relative">
|
||||
{/* Background Elements */}
|
||||
<ParticleNetwork className="opacity-20" />
|
||||
<div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.015]" style={{
|
||||
backgroundImage: 'linear-gradient(#0f172a 1px, transparent 1px), linear-gradient(90deg, #0f172a 1px, transparent 1px)',
|
||||
backgroundSize: '80px 80px'
|
||||
}} />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-40 pb-32 overflow-hidden border-b border-slate-50">
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full opacity-10 pointer-events-none">
|
||||
<HeroLines className="w-full h-full" />
|
||||
</div>
|
||||
<div className="absolute right-0 top-0 w-96 h-96 opacity-5 pointer-events-none">
|
||||
<GridLines />
|
||||
</div>
|
||||
|
||||
<div className="narrow-container relative z-10">
|
||||
<div className="flex flex-col items-center text-center space-y-12">
|
||||
<Reveal>
|
||||
<div className="relative">
|
||||
{/* Structural rings around avatar */}
|
||||
<div className="absolute inset-0 -m-8 border border-slate-100 rounded-full animate-[spin_20s_linear_infinite] opacity-50" />
|
||||
<div className="absolute inset-0 -m-4 border border-slate-200 rounded-full animate-[spin_15s_linear_infinite_reverse] opacity-30" />
|
||||
|
||||
<div className="relative w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border border-slate-200 shadow-2xl shadow-slate-200/50 bg-white p-1">
|
||||
<div className="w-full h-full rounded-full overflow-hidden">
|
||||
<img
|
||||
src="/header.webp"
|
||||
alt="Marc Mintel"
|
||||
className="w-full h-full object-cover grayscale transition-all duration-1000 ease-in-out scale-110 hover:scale-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<div className="space-y-6 max-w-2xl">
|
||||
<Reveal delay={0.1}>
|
||||
<div className="flex items-center justify-center gap-3 mb-4">
|
||||
<div className="h-px w-8 bg-slate-900"></div>
|
||||
<span className="text-[10px] font-bold uppercase tracking-[0.4em] text-slate-900">Digital Architect</span>
|
||||
<div className="h-px w-8 bg-slate-900"></div>
|
||||
</div>
|
||||
</Reveal>
|
||||
<PageHeader
|
||||
title={<>Über <span className="text-slate-300">mich.</span></>}
|
||||
description="(oder: Warum das hier kein Agentur-Zirkus ist)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Connector to first section */}
|
||||
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-16 bg-gradient-to-b from-transparent to-slate-200" />
|
||||
</section>
|
||||
|
||||
{/* Section 01: Experience */}
|
||||
<Section
|
||||
number="01"
|
||||
title="Erfahrung"
|
||||
borderTop
|
||||
connector={<ConnectorStart className="h-full" />}
|
||||
illustration={<ExperienceIllustration className="w-32 h-32" />}
|
||||
>
|
||||
<div className="space-y-12">
|
||||
<Reveal>
|
||||
<h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
|
||||
Ich baue Websites und Systeme seit über 15 Jahren. <br />
|
||||
<span className="text-slate-300">Weil ich es hasse, wenn Dinge nicht funktionieren.</span>
|
||||
</h3>
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<Reveal delay={0.1}>
|
||||
<div className="space-y-6">
|
||||
<p className="text-xl text-slate-600 font-serif italic">
|
||||
In diesen 15 Jahren habe ich Agenturen von innen gesehen, Konzerne erlebt und Startups aufgebaut.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
'Marketingversprechen zerlegt',
|
||||
'Systeme repariert, die „fertig“ waren',
|
||||
'Gelernt, wie man Dinge baut, die einfach laufen'
|
||||
].map((item, i) => (
|
||||
<li key={i} className="flex items-center gap-3 text-slate-500">
|
||||
<div className="w-1.5 h-1.5 bg-slate-300 rounded-full shrink-0" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2}>
|
||||
<div className="p-8 bg-slate-50 rounded-3xl border border-slate-100">
|
||||
<p className="text-slate-900 font-bold text-lg mb-4">Heute mache ich das ohne Agentur-Zwischenschichten.</p>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{['Direkt', 'Sauber', 'Verantwortlich'].map((tag, i) => (
|
||||
<span key={i} className="px-4 py-2 bg-white border border-slate-200 rounded-full text-xs font-bold uppercase tracking-widest text-slate-400">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Section 02: Responsibility */}
|
||||
<Section
|
||||
number="02"
|
||||
title="Verantwortung"
|
||||
variant="gray"
|
||||
borderTop
|
||||
connector={<ConnectorBranch className="h-full" />}
|
||||
illustration={<ResponsibilityIllustration className="w-32 h-32" />}
|
||||
>
|
||||
<div className="space-y-12">
|
||||
<Reveal>
|
||||
<h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
|
||||
Ich habe fast alle Fehler schon für Sie gemacht. <br />
|
||||
<span className="text-slate-300">(Damit Sie sie nicht machen müssen)</span>
|
||||
</h3>
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
|
||||
<div className="md:col-span-7 space-y-8">
|
||||
<Reveal delay={0.1}>
|
||||
<p className="text-xl text-slate-600 font-serif italic">
|
||||
Ich habe als Designer angefangen, bin dann Entwickler geworden, und habe irgendwann gemerkt: Das Problem ist selten Technik. Es ist immer Zuständigkeit.
|
||||
</p>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2}>
|
||||
<div className="flex items-start gap-6 p-6 bg-white rounded-2xl border border-slate-100 shadow-sm">
|
||||
<div className="w-12 h-12 bg-slate-900 text-white rounded-xl flex items-center justify-center shrink-0 font-bold">!</div>
|
||||
<p className="text-slate-900 font-medium">
|
||||
Wenn keiner verantwortlich ist, passiert nichts. Also habe ich mir angewöhnt, Verantwortung zu übernehmen.
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Section 03: Systems */}
|
||||
<Section
|
||||
number="03"
|
||||
title="Philosophie"
|
||||
borderTop
|
||||
connector={<ConnectorSplit className="h-full" />}
|
||||
illustration={<ConceptSystem className="w-32 h-32" />}
|
||||
>
|
||||
<div className="space-y-16">
|
||||
<Reveal>
|
||||
<h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
|
||||
Warum ich Websites wie Systeme baue.
|
||||
</h3>
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div className="space-y-8">
|
||||
<Reveal delay={0.1}>
|
||||
<p className="text-slate-500 font-serif italic text-lg">
|
||||
Ich war viele Jahre Senior Developer in Firmen, in denen Millionenumsätze dranhingen, Fehler teuer waren und Performance nicht optional war.
|
||||
</p>
|
||||
</Reveal>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{['Schnell', 'Stabil', 'Boring', 'Erweiterbar', 'Wartungsarm', 'Unabhängig'].map((item, i) => (
|
||||
<Reveal key={i} delay={0.2 + i * 0.05}>
|
||||
<div className="flex items-center gap-2 text-slate-900 font-bold text-sm uppercase tracking-widest">
|
||||
<Check className="w-4 h-4 text-slate-400" />
|
||||
{item}
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Reveal delay={0.3}>
|
||||
<div className="relative p-10 bg-slate-900 text-white rounded-3xl overflow-hidden group">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-white/5 -translate-y-16 translate-x-16 rounded-full blur-3xl group-hover:bg-white/10 transition-colors" />
|
||||
<h4 className="text-2xl font-bold mb-6 relative z-10">Das prägt.</h4>
|
||||
<p className="text-slate-400 font-serif italic text-lg relative z-10">
|
||||
Meine Websites sind nicht abhängig von Plugins oder Agenturen. Sie sind gebaut, um zu bleiben.
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Section 04: Roles */}
|
||||
<Section
|
||||
number="04"
|
||||
title="Perspektive"
|
||||
variant="gray"
|
||||
borderTop
|
||||
connector={<ConnectorBranch className="h-full" />}
|
||||
illustration={<ConceptTarget className="w-32 h-32" />}
|
||||
>
|
||||
<div className="space-y-12">
|
||||
<Reveal>
|
||||
<h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
|
||||
Ich habe beide Seiten gesehen.
|
||||
</h3>
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{[
|
||||
'Webdesigner', 'Entwickler', 'Marketing', 'Vertrieb',
|
||||
'Agentur', 'Inhouse', 'Dienstleister', 'Unternehmer'
|
||||
].map((role, i) => (
|
||||
<Reveal key={i} delay={i * 0.05}>
|
||||
<div className="p-4 bg-white border border-slate-100 rounded-xl text-center hover:border-slate-300 transition-colors group">
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-colors">{role}</span>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Reveal delay={0.4}>
|
||||
<p className="text-2xl text-slate-600 font-serif italic max-w-2xl">
|
||||
Ich weiß, was Unternehmen brauchen – und was sie nicht brauchen. (Meetings, Tickets, Workshops, PowerPoint.)
|
||||
</p>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Section 05: Result */}
|
||||
<Section
|
||||
number="05"
|
||||
title="Ergebnis"
|
||||
borderTop
|
||||
connector={<ConnectorBranch className="h-full" />}
|
||||
illustration={<ResultIllustration className="w-32 h-32" />}
|
||||
>
|
||||
<div className="space-y-16">
|
||||
<Reveal>
|
||||
<h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
|
||||
Was Kunden davon haben.
|
||||
</h3>
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-4">
|
||||
<span className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400">Sie bekommen kein:</span>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{['Projektmanager', 'Prozess', 'Team', 'Ticket', 'CMS-Drama'].map((item, i) => (
|
||||
<span key={i} className="px-4 py-2 border border-slate-100 rounded-full text-slate-400 line-through text-sm italic font-serif">
|
||||
{item}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-4">
|
||||
<span className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-900">Sie bekommen:</span>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ label: 'Eine Person', desc: 'Direkter Kontakt, keine Stille Post.' },
|
||||
{ label: 'Eine Verantwortung', desc: 'Ich stehe für das Ergebnis gerade.' },
|
||||
{ label: 'Ein Ergebnis', desc: 'Funktionierende Systeme, keine Ausreden.' }
|
||||
].map((item, i) => (
|
||||
<Reveal key={i} delay={0.2 + i * 0.1}>
|
||||
<div className="flex gap-4 items-start">
|
||||
<div className="w-6 h-6 rounded-full bg-slate-900 flex items-center justify-center shrink-0 mt-1">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-slate-900">{item.label}</div>
|
||||
<div className="text-slate-500 text-sm font-serif italic">{item.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Section 06: Today */}
|
||||
<Section
|
||||
number="06"
|
||||
title="Heute"
|
||||
variant="gray"
|
||||
borderTop
|
||||
connector={<ConnectorEnd className="h-full" />}
|
||||
illustration={<ContactIllustration className="w-32 h-32" />}
|
||||
>
|
||||
<div className="space-y-12">
|
||||
<Reveal>
|
||||
<h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
|
||||
Heute baue ich Websites für Unternehmen, die keine Lust mehr auf Chaos haben.
|
||||
</h3>
|
||||
</Reveal>
|
||||
|
||||
<div className="p-12 bg-white rounded-[3rem] border border-slate-100 shadow-2xl shadow-slate-200/50 relative overflow-hidden group">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-slate-50 -translate-y-32 translate-x-32 rounded-full blur-3xl group-hover:bg-slate-100 transition-colors" />
|
||||
|
||||
<div className="relative z-10 space-y-8">
|
||||
<p className="text-2xl text-slate-600 font-serif italic leading-relaxed max-w-2xl">
|
||||
Ich übernehme das Thema komplett – damit es für Sie kein Thema mehr ist.
|
||||
</p>
|
||||
|
||||
<div className="pt-8">
|
||||
<a
|
||||
href="/contact"
|
||||
className="inline-flex items-center gap-4 px-10 py-5 bg-slate-900 text-white rounded-full font-bold text-sm uppercase tracking-widest hover:bg-slate-800 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-1 hover:shadow-2xl hover:shadow-slate-900/20 group"
|
||||
>
|
||||
Projekt anfragen
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+123
@@ -0,0 +1,123 @@
|
||||
Über mich
|
||||
|
||||
Ich baue Websites und Systeme seit über 15 Jahren.
|
||||
Nicht weil ich Websites so liebe – sondern weil ich es hasse, wenn Dinge nicht funktionieren.
|
||||
|
||||
In diesen 15 Jahren habe ich:
|
||||
• Agenturen von innen gesehen
|
||||
• Konzerne erlebt
|
||||
• Startups aufgebaut
|
||||
• Marketingversprechen zerlegt
|
||||
• Systeme repariert, die „fertig“ waren
|
||||
• und gelernt, wie man Dinge baut, die einfach laufen
|
||||
|
||||
Heute mache ich das ohne Agentur-Zwischenschichten.
|
||||
Direkt. Sauber. Verantwortlich.
|
||||
|
||||
⸻
|
||||
|
||||
Ich habe fast alle Fehler schon für Sie gemacht
|
||||
|
||||
(damit Sie sie nicht machen müssen)
|
||||
|
||||
Ich habe als Designer angefangen,
|
||||
bin dann Entwickler geworden,
|
||||
und habe irgendwann gemerkt:
|
||||
|
||||
Das Problem ist selten Technik.
|
||||
Es ist immer Zuständigkeit.
|
||||
|
||||
Wenn keiner verantwortlich ist, passiert nichts.
|
||||
Also habe ich mir angewöhnt, Verantwortung zu übernehmen.
|
||||
|
||||
⸻
|
||||
|
||||
Warum ich Websites wie Systeme baue
|
||||
|
||||
Ich war viele Jahre Senior Developer in Firmen, in denen:
|
||||
• Millionenumsätze dranhingen
|
||||
• Fehler teuer waren
|
||||
• Performance nicht optional war
|
||||
• Sicherheit kein Nice-to-Have war
|
||||
• „kurz mal ändern“ trotzdem passieren musste
|
||||
|
||||
Das prägt.
|
||||
|
||||
Deshalb sind meine Websites:
|
||||
• schnell
|
||||
• stabil
|
||||
• boring (im besten Sinne)
|
||||
• erweiterbar
|
||||
• wartungsarm
|
||||
• und nicht abhängig von Plugins oder Agenturen
|
||||
|
||||
⸻
|
||||
|
||||
Ich habe beide Seiten gesehen
|
||||
|
||||
Ich war:
|
||||
• Webdesigner
|
||||
• Entwickler
|
||||
• Marketing
|
||||
• Vertrieb
|
||||
• Agentur
|
||||
• Inhouse
|
||||
• Dienstleister
|
||||
• Unternehmer
|
||||
|
||||
Das heißt:
|
||||
|
||||
Ich weiß, was Unternehmen brauchen –
|
||||
und was sie nicht brauchen.
|
||||
|
||||
(Meetings, Tickets, Workshops, PowerPoint.)
|
||||
|
||||
⸻
|
||||
|
||||
Was Kunden davon haben
|
||||
|
||||
Sie bekommen:
|
||||
• keinen Projektmanager
|
||||
• keinen Prozess
|
||||
• kein Team
|
||||
• kein Ticket
|
||||
• kein CMS-Drama
|
||||
|
||||
Sie bekommen:
|
||||
• eine Person
|
||||
• eine Verantwortung
|
||||
• ein Ergebnis
|
||||
|
||||
⸻
|
||||
|
||||
Ein kurzer Überblick (ohne Lebenslauf-Gefühl)
|
||||
|
||||
Ich habe u. a. gearbeitet bei:
|
||||
• Agenturen
|
||||
• E-Commerce-Plattformen
|
||||
• SaaS-Firmen
|
||||
• Marketing-Teams
|
||||
• internationalen Unternehmen
|
||||
• Mittelständlern
|
||||
• und Konzernen
|
||||
|
||||
Als:
|
||||
• Web Designer
|
||||
• Frontend Developer
|
||||
• Software Developer
|
||||
• Senior Developer
|
||||
• und später Gründer
|
||||
|
||||
Das Ergebnis daraus ist nicht ein Titel.
|
||||
Sondern eine Arbeitsweise.
|
||||
|
||||
⸻
|
||||
|
||||
Heute
|
||||
|
||||
Heute baue ich Websites und Systeme für Unternehmen,
|
||||
die keine Lust mehr auf Agenturen haben
|
||||
und keine Zeit für Chaos.
|
||||
|
||||
Ich übernehme das Thema komplett –
|
||||
damit es für Sie kein Thema mehr ist.
|
||||
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
@@ -23,6 +23,7 @@ export const Footer: React.FC = () => {
|
||||
<div className="flex flex-col md:items-end gap-4 text-sm font-mono text-slate-300 uppercase tracking-widest">
|
||||
<span>© {currentYear}</span>
|
||||
<div className="flex gap-8">
|
||||
<a href="/about" className="hover:text-slate-900 transition-colors no-underline">Über mich</a>
|
||||
<a href="/contact" className="hover:text-slate-900 transition-colors no-underline">Kontakt</a>
|
||||
<a href="https://github.com/marcmintel" className="hover:text-slate-900 transition-colors no-underline">GitHub</a>
|
||||
</div>
|
||||
|
||||
@@ -39,6 +39,14 @@ export const Header: React.FC = () => {
|
||||
</Link>
|
||||
|
||||
<nav className="flex items-center gap-8">
|
||||
<Link
|
||||
href="/about"
|
||||
className={`text-xs font-bold uppercase tracking-widest transition-colors ${
|
||||
isActive('/about') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
|
||||
}`}
|
||||
>
|
||||
Über mich
|
||||
</Link>
|
||||
<Link
|
||||
href="/websites"
|
||||
className={`text-xs font-bold uppercase tracking-widest transition-colors ${
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { IllustrationProps } from './types';
|
||||
|
||||
export const ExperienceIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
|
||||
<svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
{/* Timeline line */}
|
||||
<motion.path
|
||||
d="M 20 100 H 100"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
className="text-slate-200"
|
||||
initial={{ pathLength: 0 }}
|
||||
whileInView={{ pathLength: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1.5, delay }}
|
||||
/>
|
||||
|
||||
{/* Experience nodes */}
|
||||
{[
|
||||
{ x: 30, y: 80, label: "Agency" },
|
||||
{ x: 50, y: 60, label: "Corp" },
|
||||
{ x: 70, y: 40, label: "Startup" },
|
||||
{ x: 90, y: 20, label: "Now" }
|
||||
].map((node, i) => (
|
||||
<React.Fragment key={i}>
|
||||
<motion.circle
|
||||
cx={node.x} cy={node.y} r="4"
|
||||
className={i === 3 ? "fill-slate-900" : "fill-slate-300"}
|
||||
initial={{ scale: 0 }}
|
||||
whileInView={{ scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: delay + 0.5 + i * 0.2, type: "spring" }}
|
||||
/>
|
||||
{i > 0 && (
|
||||
<motion.path
|
||||
d={`M ${30 + (i-1)*20} ${80 - (i-1)*20} L ${node.x} ${node.y}`}
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
className="text-slate-200"
|
||||
initial={{ pathLength: 0 }}
|
||||
whileInView={{ pathLength: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: delay + 0.5 + (i-1) * 0.2 }}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{/* 15+ Years indicator */}
|
||||
<motion.text
|
||||
x="20" y="115"
|
||||
className="text-[8px] font-bold fill-slate-400 uppercase tracking-widest"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: delay + 1.5 }}
|
||||
>
|
||||
15+ YEARS
|
||||
</motion.text>
|
||||
</svg>
|
||||
);
|
||||
@@ -0,0 +1,52 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { IllustrationProps } from './types';
|
||||
|
||||
export const ResponsibilityIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
|
||||
<svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
{/* Shield / Responsibility shape */}
|
||||
<motion.path
|
||||
d="M 60 20 L 90 35 V 65 C 90 85 60 100 60 100 C 60 100 30 85 30 65 V 35 L 60 20 Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
className="text-slate-900"
|
||||
initial={{ pathLength: 0, fill: "rgba(15, 23, 42, 0)" }}
|
||||
whileInView={{ pathLength: 1, fill: "rgba(15, 23, 42, 0.05)" }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1.5, delay }}
|
||||
/>
|
||||
|
||||
{/* Core point */}
|
||||
<motion.circle
|
||||
cx="60" cy="55" r="8"
|
||||
className="fill-slate-900"
|
||||
initial={{ scale: 0 }}
|
||||
whileInView={{ scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: delay + 1, type: "spring" }}
|
||||
/>
|
||||
|
||||
{/* Responsibility lines */}
|
||||
{[0, 120, 240].map((angle, i) => {
|
||||
const x1 = 60 + Math.cos((angle * Math.PI) / 180) * 12;
|
||||
const y1 = 55 + Math.sin((angle * Math.PI) / 180) * 12;
|
||||
const x2 = 60 + Math.cos((angle * Math.PI) / 180) * 30;
|
||||
const y2 = 55 + Math.sin((angle * Math.PI) / 180) * 30;
|
||||
return (
|
||||
<motion.line
|
||||
key={i}
|
||||
x1={x1} y1={y1} x2={x2} y2={y2}
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
className="text-slate-400"
|
||||
initial={{ pathLength: 0 }}
|
||||
whileInView={{ pathLength: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: delay + 1.2 + i * 0.2 }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
);
|
||||
@@ -0,0 +1,54 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { IllustrationProps } from './types';
|
||||
|
||||
export const ResultIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
|
||||
<svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
{/* Result Box */}
|
||||
<motion.rect
|
||||
x="30" y="30" width="60" height="60" rx="4"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
className="text-slate-900"
|
||||
initial={{ pathLength: 0, rotate: -10, opacity: 0 }}
|
||||
whileInView={{ pathLength: 1, rotate: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1, delay }}
|
||||
/>
|
||||
|
||||
{/* Checkmark */}
|
||||
<motion.path
|
||||
d="M 45 60 L 55 70 L 75 50"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-slate-900"
|
||||
initial={{ pathLength: 0 }}
|
||||
whileInView={{ pathLength: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: delay + 1 }}
|
||||
/>
|
||||
|
||||
{/* Sparkles */}
|
||||
{[
|
||||
{ x: 25, y: 25 },
|
||||
{ x: 95, y: 35 },
|
||||
{ x: 85, y: 95 }
|
||||
].map((pos, i) => (
|
||||
<motion.path
|
||||
key={i}
|
||||
d={`M ${pos.x} ${pos.y-4} V ${pos.y+4} M ${pos.x-4} ${pos.y} H ${pos.x+4}`}
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
className="text-slate-300"
|
||||
initial={{ scale: 0, opacity: 0 }}
|
||||
whileInView={{ scale: 1, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: delay + 1.5 + i * 0.2, type: "spring" }}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
);
|
||||
@@ -10,3 +10,6 @@ export * from './ConceptTarget';
|
||||
export * from './ConceptMessy';
|
||||
export * from './HeroArchitecture';
|
||||
export * from './HeroMainIllustration';
|
||||
export * from './ExperienceIllustration';
|
||||
export * from './ResponsibilityIllustration';
|
||||
export * from './ResultIllustration';
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
export * from './AbstractLines';
|
||||
export * from './ExplanatoryIllustrations';
|
||||
export * from './ConceptIllustrations';
|
||||
export * from './Illustrations';
|
||||
export * from './ComparisonRow';
|
||||
export * from './FeatureCard';
|
||||
export * from './HeroItem';
|
||||
|
||||
Vendored
+24
@@ -0,0 +1,24 @@
|
||||
declare module '*.svg' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
|
||||
declare module '*.webp' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
|
||||
declare module '*.png' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
|
||||
declare module '*.jpg' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
|
||||
declare module '*.jpeg' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
Vendored
-4
@@ -1,4 +0,0 @@
|
||||
declare module '*.svg' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
Reference in New Issue
Block a user