feat(ui): enhance component share UX and add new interactive simulations
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🏗️ Build (push) Failing after 26s
Build & Deploy / 🧪 QA (push) Failing after 1m14s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🏗️ Build (push) Failing after 26s
Build & Deploy / 🧪 QA (push) Failing after 1m14s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
This commit is contained in:
@@ -0,0 +1,136 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { ComponentShareButton } from '../ComponentShareButton';
|
||||
import { Reveal } from '../Reveal';
|
||||
import { Check, X, Shield, Zap, Expand, Database } from 'lucide-react';
|
||||
|
||||
export function ArchitectureBuilder({ className = '' }: { className?: string }) {
|
||||
const [stack, setStack] = useState<'saas' | 'custom'>('saas');
|
||||
|
||||
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 id="sim-arch-builder" className="relative bg-white rounded-2xl border border-slate-200 shadow-sm 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:"
|
||||
/>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<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'}`}
|
||||
>
|
||||
<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>
|
||||
</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'}`}
|
||||
>
|
||||
<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>
|
||||
</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">
|
||||
|
||||
{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>
|
||||
</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="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>
|
||||
</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>
|
||||
</Reveal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user