mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

fix(blog): refine Recharts gradients/tooltips and fix DiagramGantt crash
Build & Deploy / 🔍 Prepare (push) Successful in 41s
Details
Build & Deploy / 🏗️ Build (push) Failing after 23s
Details
Build & Deploy / 🧪 QA (push) Has started running
Details
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Details
Build & Deploy / 🩺 Health Check (push) Has been cancelled
Details
Build & Deploy / 🔔 Notify (push) Has been cancelled
Details

Browse Source
This commit is contained in:
mmintel
2026-02-22 17:56:53 +01:00
parent 22f5cb14ed
commit e20e7cb1d0
8 changed files with 580 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/simulations/ArchitectureBuilder.tsx
+131 -92
View File
@@ -3,130 +3,169 @@
import React, { useState } from 'react';
import { ComponentShareButton } from '../ComponentShareButton';
import { Reveal } from '../Reveal';
import { Check, X, Shield, Zap, Expand, Database } from 'lucide-react';
import { ComposedChart, Line, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { ShieldAlert, Rocket, Database, Lock } from 'lucide-react';
const archData = [
{ year: 'Jahr 1', saasInvest: 50, saasIndep: 40, customInvest: 120, customIndep: 80 },
{ year: 'Jahr 2', saasInvest: 100, saasIndep: 30, customInvest: 140, customIndep: 90 },
{ year: 'Jahr 3', saasInvest: 155, saasIndep: 20, customInvest: 155, customIndep: 95 },
{ year: 'Jahr 4', saasInvest: 220, saasIndep: 10, customInvest: 170, customIndep: 100 },
{ year: 'Jahr 5', saasInvest: 290, saasIndep: 5, customInvest: 185, customIndep: 100 },
];
export function ArchitectureBuilder({ className = '' }: { className?: string }) {
const [stack, setStack] = useState<'saas' | 'custom'>('saas');
const [stack, setStack] = useState<'saas' | 'custom'>('custom');
return (
<Reveal direction="up" delay={0.1}>
<div className={`not-prose max-w-4xl mx-auto my-12 relative group ${className}`}>
<div className={`absolute -inset-1 blur opacity-30 rounded-3xl transition-all duration-700 ${stack === 'saas' ? 'bg-gradient-to-r from-orange-100 to-red-100' : 'bg-gradient-to-r from-emerald-100 to-blue-100'}`} />
<div className={`absolute -inset-1 blur opacity-30 rounded-3xl transition-all duration-700 ${stack === 'saas' ? 'bg-gradient-to-r from-orange-200 to-red-100' : 'bg-gradient-to-r from-emerald-200 to-blue-100'}`} />
<div id="sim-arch-builder" className="relative bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
<div id="sim-arch-builder" className="relative bg-white rounded-2xl border border-slate-200 shadow-xl shadow-slate-200/50 overflow-hidden flex flex-col">
<div data-share-wrapper="true" className="absolute top-4 right-4 md:opacity-0 group-hover:opacity-100 transition-opacity z-50">
<ComponentShareButton
targetId="sim-arch-builder"
title="Architektur Vergleich: Miete vs Eigentum"
shareText="Sehen Sie sich diesen Vergleich zwischen Software-Miete und eigenem System an:"
title="Architektur: Investment vs. Unabhängigkeit"
shareText="Sehen Sie sich den zeitlichen Verlauf an: Software-Miete vs. digitales Eigentum."
/>
</div>
<div className="p-6 border-b border-slate-200 bg-slate-50">
<div className="flex items-center gap-3 mb-2">
<span className="text-2xl">🏗️</span>
<h3 className="font-bold text-slate-900 m-0">Architektur-Vergleich: Mieten vs. Bauen</h3>
<div className="p-6 md:p-8 border-b border-slate-200 bg-slate-50 relative overflow-hidden">
<div className="absolute top-0 right-0 w-64 h-64 bg-slate-200 rounded-full blur-3xl -mr-32 -mt-32 opacity-50" />
<div className="relative z-10">
<div className="flex items-center gap-3 mb-2">
<span className="text-2xl">🏗️</span>
<h3 className="font-bold text-slate-900 m-0 text-xl">Zeitlicher Verlauf: Investment vs. Unabhängigkeit</h3>
</div>
<p className="text-sm text-slate-500 m-0 leading-relaxed max-w-2xl">
Wie Plattform-Abhängigkeit (Lock-in) über die Jahre Ihre Skalierbarkeit zerstört, während ein Headless-System echte Souveränität aufbaut.
</p>
</div>
<p className="text-sm text-slate-500 m-0 leading-relaxed max-w-2xl">
Entdecken Sie die strukturellen Unterschiede zwischen einem "Out-of-the-Box" Baukasten und einer maßgeschneiderten Architektur für Ihr Unternehmen.
</p>
</div>
<div className="flex flex-col md:flex-row">
{/* Control Panel */}
<div className="w-full md:w-1/3 p-6 bg-slate-50 md:border-r border-b md:border-b-0 border-slate-100 space-y-4">
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-widest block mb-4">Ihr System-Ansatz</label>
<div className="flex flex-col">
{/* Control Tabs */}
<div className="flex border-b border-slate-100">
<button
onClick={() => setStack('saas')}
className={`w-full text-left p-4 rounded-xl border-2 transition-all ${stack === 'saas' ? 'border-orange-500 bg-white shadow-sm' : 'border-transparent hover:bg-slate-100'}`}
className={`flex-1 p-4 flex flex-col items-center justify-center gap-2 transition-all ${stack === 'saas' ? 'bg-white border-b-2 border-orange-500' : 'bg-slate-50 text-slate-400 hover:bg-slate-100'}`}
>
<div className="font-bold text-slate-900 text-sm">🏡 Software Mieten (SaaS)</div>
<div className="text-xs text-slate-500 mt-1">Baukästen, Plugins, fixe Lizenzen</div>
<div className={`p-2 rounded-full ${stack === 'saas' ? 'bg-orange-100 text-orange-600' : 'bg-slate-200'}`}>
<Lock size={20} />
</div>
<div className="text-center">
<div className={`font-bold text-sm ${stack === 'saas' ? 'text-slate-900' : ''}`}>SaaS / Baukasten</div>
<div className="text-[10px] uppercase tracking-wider mt-0.5 opacity-70">Gekauft ist schneller</div>
</div>
</button>
<button
onClick={() => setStack('custom')}
className={`w-full text-left p-4 rounded-xl border-2 transition-all ${stack === 'custom' ? 'border-emerald-500 bg-white shadow-sm' : 'border-transparent hover:bg-slate-100'}`}
className={`flex-1 p-4 flex flex-col items-center justify-center gap-2 transition-all ${stack === 'custom' ? 'bg-white border-b-2 border-emerald-500' : 'bg-slate-50 text-slate-400 hover:bg-slate-100'}`}
>
<div className="font-bold text-slate-900 text-sm">🏰 System Bauen (Custom)</div>
<div className="text-xs text-slate-500 mt-1">Eigenes IP, Headless, Skalierbar</div>
<div className={`p-2 rounded-full ${stack === 'custom' ? 'bg-emerald-100 text-emerald-600' : 'bg-slate-200'}`}>
<Rocket size={20} />
</div>
<div className="text-center">
<div className={`font-bold text-sm ${stack === 'custom' ? 'text-slate-900' : ''}`}>Build-First / Headless</div>
<div className="text-[10px] uppercase tracking-wider mt-0.5 opacity-70">Architektur als Asset</div>
</div>
</button>
</div>
{/* Visualization Panel */}
<div className="w-full md:w-2/3 p-6 md:p-8 bg-white min-h-[400px] flex flex-col justify-center">
{/* Chart Area */}
<div className="p-6 md:p-8 bg-white">
<div className="h-[350px] w-full">
<ResponsiveContainer width="100%" height="100%">
<ComposedChart data={archData} margin={{ top: 20, right: 30, left: 20, bottom: 0 }}>
<defs>
<linearGradient id="barSaas" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#fb923c" stopOpacity={0.8} />
<stop offset="100%" stopColor="#fb923c" stopOpacity={0.3} />
</linearGradient>
<linearGradient id="barCustom" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#94a3b8" stopOpacity={0.8} />
<stop offset="100%" stopColor="#94a3b8" stopOpacity={0.3} />
</linearGradient>
</defs>
{stack === 'saas' ? (
<div className="animate-in fade-in slide-in-from-right-4 duration-500">
<div className="grid grid-cols-2 gap-4 mb-8">
<div className="p-4 rounded-xl border border-orange-200 bg-orange-50/50 relative overflow-hidden">
<div className="text-3xl mb-2">📦</div>
<div className="font-bold text-sm text-orange-900">Standard-Features</div>
<div className="text-xs text-orange-700/70 mt-1 hidden sm:block">Sie zahlen auch für 80%, die Sie nicht nutzen.</div>
</div>
<div className="p-4 rounded-xl border border-red-200 bg-red-50/50 relative overflow-hidden">
<div className="absolute top-2 right-2 flex gap-1">
<div className="w-2 h-2 rounded-full bg-red-400 animate-pulse" />
</div>
<div className="text-3xl mb-2">🔌</div>
<div className="font-bold text-sm text-red-900">Plugin-Chaos</div>
<div className="text-xs text-red-700/70 mt-1 hidden sm:block">Jedes Update ist ein Sicherheitsrisiko.</div>
</div>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
<XAxis
dataKey="year"
axisLine={false}
tickLine={false}
tick={{ fill: '#64748b', fontSize: 12, fontWeight: 500 }}
dy={10}
/>
{/* Left Y-Axis: Cost */}
<YAxis
yAxisId="left"
tickFormatter={(val) => `€${val}k`}
axisLine={false}
tickLine={false}
tick={{ fill: '#94a3b8', fontSize: 12 }}
dx={-10}
/>
{/* Right Y-Axis: Independence */}
<YAxis
yAxisId="right"
orientation="right"
tickFormatter={(val) => `${val}%`}
axisLine={false}
tickLine={false}
tick={{ fill: '#14b8a6', fontSize: 12, fontWeight: 'bold' }}
dx={10}
domain={[0, 100]}
/>
<Tooltip
contentStyle={{ borderRadius: '12px', border: '1px solid #e2e8f0', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' }}
formatter={(value: number, name: string) => {
if (name === 'saasInvest') return [`€${value}.000`, 'Kumuliertes Investment (Miete + Addons)'];
if (name === 'customInvest') return [`€${value}.000`, 'Kumuliertes Investment (Bau + Betrieb)'];
if (name === 'saasIndep') return [`${value}%`, 'Technische Unabhängigkeit (Lock-in sinkt)'];
if (name === 'customIndep') return [`${value}%`, 'Technische Unabhängigkeit & Datenhoheit'];
return [value, name];
}}
labelStyle={{ fontWeight: 'bold', color: '#0f172a', marginBottom: '8px' }}
/>
{stack === 'saas' ? (
<>
<Bar yAxisId="left" dataKey="saasInvest" fill="#fb923c" radius={[4, 4, 0, 0]} barSize={40} animationDuration={1000} />
<Line yAxisId="right" type="monotone" dataKey="saasIndep" stroke="#ef4444" strokeWidth={4} dot={{ r: 6, fill: "#ef4444", strokeWidth: 2, stroke: "#fff" }} animationDuration={1500} />
</>
) : (
<>
<Bar yAxisId="left" dataKey="customInvest" fill="#94a3b8" radius={[4, 4, 0, 0]} barSize={40} animationDuration={1000} />
<Line yAxisId="right" type="monotone" dataKey="customIndep" stroke="#10b981" strokeWidth={4} dot={{ r: 6, fill: "#10b981", strokeWidth: 2, stroke: "#fff" }} animationDuration={1500} />
</>
)}
</ComposedChart>
</ResponsiveContainer>
</div>
{/* Impact Summary */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
<div className={`p-4 rounded-xl border flex gap-4 ${stack === 'saas' ? 'bg-orange-50 border-orange-100' : 'bg-emerald-50 border-emerald-100'}`}>
<div className={`mt-1 rounded-full p-2 h-fit ${stack === 'saas' ? 'bg-orange-100 text-orange-600' : 'bg-emerald-100 text-emerald-600'}`}>
{stack === 'saas' ? <ShieldAlert size={20} /> : <Database size={20} />}
</div>
<div className="space-y-3">
<div className="flex items-center gap-3 text-sm text-slate-600">
<div className="w-6 h-6 rounded-full bg-red-100 text-red-600 flex items-center justify-center shrink-0 border border-red-200"><X size={12} strokeWidth={3} /></div>
<span>Abhängigkeit von Preiserhöhungen</span>
<div>
<div className={`font-bold text-sm ${stack === 'saas' ? 'text-orange-900' : 'text-emerald-900'}`}>
{stack === 'saas' ? 'Massiver Platform Lock-in' : '100% Datenhoheit'}
</div>
<div className="flex items-center gap-3 text-sm text-slate-600">
<div className="w-6 h-6 rounded-full bg-red-100 text-red-600 flex items-center justify-center shrink-0 border border-red-200"><X size={12} strokeWidth={3} /></div>
<span>Kein Aufbau von eigenem Firmenwert (IP)</span>
</div>
<div className="flex items-center gap-3 text-sm text-slate-600">
<div className="w-6 h-6 rounded-full bg-orange-100 text-orange-600 flex items-center justify-center shrink-0 border border-orange-200"><Zap size={12} /></div>
<span>Träge Ladezeiten durch geteilte Server</span>
<div className="text-xs mt-1 text-slate-600 leading-relaxed">
{stack === 'saas'
? 'Ihre Daten und Prozesse liegen bei Dritten. Umzüge werden nach Jahr 2 exponentiell teuers und riskant.'
: 'Sie besitzen die Kern-Datenbanken und APIs. Keine Lizenzschocks, keine Blackbox-Updates.'}
</div>
</div>
</div>
) : (
<div className="animate-in fade-in slide-in-from-right-4 duration-500">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
<div className="p-4 rounded-xl border border-emerald-200 bg-emerald-50/50 relative">
<div className="text-emerald-500 mb-2"><Zap size={24} /></div>
<div className="font-bold text-sm text-emerald-900">Edge Content</div>
<div className="text-[10px] text-emerald-700/70 mt-1">Instante globale Ladezeiten.</div>
</div>
<div className="p-4 rounded-xl border border-blue-200 bg-blue-50/50 relative">
<div className="text-blue-500 mb-2"><Database size={24} /></div>
<div className="font-bold text-sm text-blue-900">Headless API</div>
<div className="text-[10px] text-blue-700/70 mt-1">Daten systemunabhängig.</div>
</div>
<div className="p-4 rounded-xl border border-slate-200 bg-slate-50 relative">
<div className="text-slate-500 mb-2"><Expand size={24} /></div>
<div className="font-bold text-sm text-slate-900">Custom UI</div>
<div className="text-[10px] text-slate-500 mt-1">100% Passform für Sie.</div>
</div>
</div>
<div className="space-y-3">
<div className="flex items-center gap-3 text-sm text-slate-600">
<div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0 border border-emerald-200"><Check size={12} strokeWidth={3} /></div>
<span>0€ monatliche Fixkosten für Lizenzen</span>
</div>
<div className="flex items-center gap-3 text-sm text-slate-600">
<div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0 border border-emerald-200"><Check size={12} strokeWidth={3} /></div>
<span>Sie besitzen den Code = Echter Firmenwertaufbau</span>
</div>
<div className="flex items-center gap-3 text-sm text-slate-600">
<div className="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center shrink-0 border border-blue-200"><Shield size={12} /></div>
<span>Maximale Security (keine Standard-Plugins als Einfallstor)</span>
</div>
</div>
</div>
)}
</div>
</div>
</div>
</div>