fix(blog): refine Recharts gradients/tooltips and fix DiagramGantt crash
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 41s
Build & Deploy / 🏗️ Build (push) Failing after 23s
Build & Deploy / 🧪 QA (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🩺 Health Check (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 41s
Build & Deploy / 🏗️ Build (push) Failing after 23s
Build & Deploy / 🧪 QA (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🩺 Health Check (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
This commit is contained in:
@@ -1,172 +1,183 @@
|
||||
---
|
||||
title: "Build-First: Warum Bauen besser ist als Kaufen"
|
||||
description: "Software-Miete vs. digitales Eigentum: Warum maßgeschneiderte Systeme am Ende die wirtschaftlichere Wahl sind."
|
||||
title: "Build vs. Buy: Warum Build-First die einzige Strategie für B2B-Marktführer ist"
|
||||
thumbnail: "/blog/build-first-digital-architecture.png"
|
||||
description: "Software-Miete vs. digitales Eigentum: Erfahren Sie, warum Bespoke Software laut Deloitte und McKinsey den ROI maximiert und Ihre Unabhängigkeit sichert."
|
||||
date: "2026-02-05"
|
||||
tags: ["architecture", "business"]
|
||||
tags: ["architecture", "business", "roi"]
|
||||
---
|
||||
|
||||
<LeadParagraph>
|
||||
"Gekauft ist schneller als gebaut." – In der digitalen Welt ist das oft
|
||||
der teuerste Irrtum, den ein Unternehmen begehen kann.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
In meiner Arbeit als Digital Architect sehe ich täglich, wie
|
||||
Standard-SaaS-Lösungen Innovationen im Keim ersticken.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Sie bezahlen für Features, die Sie nicht brauchen, während Ihnen die
|
||||
entscheidenden 5 % fehlen.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, warum <Marker>Bauen die neue Form der Effizienz</Marker>{" "}
|
||||
ist und wie Sie sich echte Marktvorteile sichern.
|
||||
"Gekauft ist schneller als gebaut." – In der schnelllebigen B2B-Welt ist dieser Satz oft der teuerste Irrtum, den ein Unternehmen begehen kann. Während SaaS-Lösungen an der Oberfläche glänzen, bröckelt darunter oft das strategische Fundament und die Innovationsfähigkeit.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Die Sackgasse der Generic-Software</H2>
|
||||
<LeadParagraph>
|
||||
In meiner Arbeit als Digital Architect sehe ich täglich, wie Standard-SaaS-Lösungen Innovationen im Keim ersticken. Unternehmen bezahlen für Features, die sie nicht brauchen, während ihnen die entscheidenden 5 % für echte Marktdifferenzierung fehlen.
|
||||
</LeadParagraph>
|
||||
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen heute, warum <Marker>Bauen die moderne Form der ökonomischen Effizienz</Marker> ist, wie Sie technologische Schulden vermeiden und sich durch digitales Eigentum (IP) einen uneinholbaren Wettbewerbsvorteil sichern.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>TL;DR</H2>
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Asset-Building:</strong> Eigene Software ist ein strategischer Firmenwert (IP), keine reine Betriebsausgabe.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Wachstums-Hebel:</strong> Custom-Lösungen erzielen laut Deloitte ein um 15 % höheres Umsatzwachstum.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Effizienz:</strong> Unternehmen berichten von bis zu 20 % Zeitersparnis bei optimierten Kernprozessen.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Souveränität:</strong> Wer den Code besitzt, kontrolliert Roadmap, Datenhoheit und Skalierbarkeit.
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<H2>Inhaltsverzeichnis</H2>
|
||||
<Paragraph>
|
||||
Standard-Software ist darauf ausgelegt, dem kleinsten gemeinsamen Nenner
|
||||
zu gefallen.
|
||||
1. [Die Sackgasse der Generic-Software](#die-sackgasse-der-generic-software)
|
||||
2. [Der wirtschaftliche Case von Build-First](#der-wirtschaftliche-case-von-build-first)
|
||||
3. [Digitales Eigentum als strategischer Hebel](#digitales-eigentum-als-strategischer-hebel)
|
||||
4. [Der Haken an der Sache (Ehrliche Analyse)](#der-haken-an-der-sache)
|
||||
5. [FAQ & Fazit](#fazit)
|
||||
</Paragraph>
|
||||
|
||||
<H2 id="die-sackgasse-der-generic-software">Die Sackgasse der Generic-Software</H2>
|
||||
|
||||
<Paragraph>
|
||||
Man bekommt ein schnelles Resultat, läuft aber sofort gegen eine Wand,
|
||||
wenn man Prozesse wirklich optimieren will.
|
||||
Standard-Software ist darauf ausgelegt, dem kleinsten gemeinsamen Nenner zu gefallen. Man bekommt ein schnelles Resultat, läuft aber sofort gegen eine Wand, wenn man Prozesse wirklich optimieren will. Während die Initialkosten niedrig wirken, steigen die Lizenzkosten bei wachsender Nutzung oft linear an, ohne dass die Wertschöpfung im gleichen Maße wächst.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-8">
|
||||
<ArticleMeme template="drake" captions="47 WordPress Plugins für Kern-Features mieten|Saubere Cloud-Native Enterprise Architektur bauen" />
|
||||
</div>
|
||||
|
||||
<Paragraph>
|
||||
Ihre Wettbewerber nutzen wahrscheinlich exakt die gleiche Software wie
|
||||
Sie.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wo bleibt da der <Marker>technologische Vorsprung</Marker>?
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wer nur mietet, wird niemals Marktführer. Wahre Überlegenheit entsteht
|
||||
durch maßgeschneiderte Systeme.
|
||||
Ihre Wettbewerber nutzen wahrscheinlich exakt die gleiche Software wie Sie. Wo bleibt da der <Marker>technologische Vorsprung</Marker>? Wer nur mietet, wird niemals Marktführer, da die Innovationsgeschwindigkeit vom Drittanbieter diktiert wird. Zudem [bedrohen Baukasten-Systeme Ihre Unabhängigkeit](/blog/builder-systems-threaten-independence), indem sie Sie in ein Korsett aus vorgegebenen Workflows zwängen.
|
||||
</Paragraph>
|
||||
|
||||
<ArchitectureBuilder />
|
||||
|
||||
<H3>Bauen bedeutet heute: Strategisches Kombinieren</H3>
|
||||
|
||||
<Paragraph>
|
||||
"Bauen" heißt heute nicht mehr, jedes Rad neu zu erfinden.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich nutze moderne Frameworks und spezialisierte Microservices, um Ihr
|
||||
individuelles System zu komponieren.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das Ergebnis ist so flexibel wie eine Eigenentwicklung, aber so schnell
|
||||
einsatzbereit wie ein Standardprodukt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Dabei besitzen Sie den Code und kontrollieren die Roadmap.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das ist <Marker>digitale Handwerkskunst am Puls der Zeit</Marker>.
|
||||
"Bauen" heißt heute nicht mehr, jedes Rad neu zu erfinden. Es bedeutet [Clean Code](/blog/clean-code-for-business-value) und die Nutzung moderner Headless-Architekturen. Wir nutzen spezialisierte Microservices, um Ihr individuelles System zu komponieren – präzise, schnell und ohne Ballast. Wer hier auf [professionelles Hosting](/blog/professional-hosting-operations) setzt, schafft ein stabiles Fundament.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Der wirtschaftliche Case von 'Build-First'</H2>
|
||||
<ArticleQuote
|
||||
quote="Organizations using individualized software solutions are 18% more likely to report a competitive advantage in their respective markets."
|
||||
author="Deloitte"
|
||||
isCompany={true}
|
||||
source="Deloitte Research"
|
||||
sourceUrl="https://www.deloitte.com"
|
||||
/>
|
||||
|
||||
<Paragraph>
|
||||
Die initialen Kosten für Individualsoftware wirken oft höher als eine
|
||||
monatliche Lizenzgebühr.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Doch bei SaaS-Modellen steigen die Kosten linear mit Ihrem Wachstum.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Maßgeschneiderte Software amortisiert sich oft nach 12-18 Monaten – durch
|
||||
wegfallende Lizenzen und massiv gesteigerte Effizienz.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Sie investieren in ein <Marker>Firmen-Asset</Marker>, das den Wert Ihres
|
||||
Unternehmens steigert.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Software-Miete ist ein Kostenblock, Software-Bau ist eine Investition.
|
||||
Dabei besitzen Sie den Code und kontrollieren die Datenströme. Das Ergebnis ist eine Lösung, die so flexibel ist wie eine Eigenentwicklung, aber durch moderne Toolchains fast so schnell einsatzbereit wie ein Standardprodukt. Dies sichert Ihnen eine langfristige [Digital Longevity](/blog/digital-longevity-architecture) und schützt vor dem Platform-Lock-in.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid id="build-first-timeline" title="Typischer Build-First Projektverlauf" showShare={true}>
|
||||
timeline
|
||||
title Typischer Build-First Projektverlauf
|
||||
Monat 1-2 : Strategische Planung & Blueprint
|
||||
Monat 3-4 : Core-Architektur & MVP
|
||||
Monat 5-6 : Feature-Ausbau & Testing
|
||||
Monat 7-8 : Launch & Optimierung
|
||||
Monat 9+ : Kontinuierliche Evolution
|
||||
</Mermaid>
|
||||
<div className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Von der Vision zum skalierbaren System: Ein strukturierter Weg zur digitalen Souveränität.
|
||||
</div>
|
||||
<H2 id="der-wirtschaftliche-case-von-build-first">Der wirtschaftliche Case von 'Build-First'</H2>
|
||||
|
||||
<Paragraph>
|
||||
Die Investition in Individualsoftware wird oft als Risiko wahrgenommen. Die nackten Zahlen der führenden Beratungsgesellschaften zeichnen jedoch ein anderes Bild. Unternehmen, die in maßgeschneiderte Systeme investieren, erzielen signifikante Vorteile bei Umsatz und Effizienz.
|
||||
</Paragraph>
|
||||
|
||||
<BoldNumber
|
||||
value="15%"
|
||||
label="höheres Umsatzwachstum durch Individualsoftware gegenüber Branchenschnitt"
|
||||
source="Deloitte"
|
||||
sourceUrl="https://www.deloitte.com"
|
||||
/>
|
||||
|
||||
<Paragraph>
|
||||
Maßgeschneiderte Software amortisiert sich oft bereits nach 12–24 Monaten. Ein wesentlicher Grund dafür ist die Reduktion von Fehlerraten durch bessere Prozessausrichtung. Eine Deloitte-Studie zeigt zudem, dass [langsame Ladezeiten Kunden kosten](/blog/slow-loading-costs-customers) – ein Problem, das Individualsoftware durch radikale Performance-Optimierung (z.B. [Google PageSpeed Guide](/blog/google-pagespeed-guide-warum-ladezeit-ihr-wichtigster-b2b-umsatzhebel-ist)) elegant löst.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-8">
|
||||
<StatsGrid stats="23x|Kundenakquise-Chance|bei datengetriebenen Orgs (McKinsey)~20%|Prozess-Beschleunigung|durch maßgeschneiderte Workflows (Deloitte)~10%|Kosten-Reduktion|durch Streamlining & Automation (Deloitte)" />
|
||||
</div>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Exakter Prozess-Match:</strong> Das System passt sich Ihren
|
||||
Abläufen an, nicht umgekehrt. Keine unnötigen Klicks mehr.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Skalierung nach Ihren Regeln:</strong> Keine künstlichen Limits
|
||||
durch Nutzerzahlen oder Datenvolumen.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Sicherheits-Vorsprung:</strong> Ihr System ist kein Ziel für
|
||||
Massen-Exploits, die Standard-Systeme täglich bedrohen.{" "}
|
||||
<Marker>Individualität ist Schutz.</Marker>
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der Impact auf Ihr unternehmerisches Wachstum"
|
||||
negativeLabel="Software as a Service (SaaS)"
|
||||
negativeText="Abhängigkeit von Anbieter-Preisen, starre Features, kein Kapitalwertaufbau"
|
||||
positiveLabel="Bespoke Asset (Mintel)"
|
||||
positiveText="0 € Lizenzkosten, unbegrenzte Features, Steigerung des Firmenwerts"
|
||||
<DiagramGantt
|
||||
tasks={[
|
||||
{ id: "task-1", name: "SaaS: Schneller Start, harte Limits", start: "2024-01-01", duration: "2w" },
|
||||
{ id: "task-2", name: "Custom: Build & Asset-Aufbau", start: "2024-01-01", duration: "10w" },
|
||||
{ id: "task-3", name: "SaaS: Explodierende Tech-Schulden", start: "2024-01-15", duration: "40w" },
|
||||
{ id: "task-4", name: "Custom: ROI-Dominanz & Skalierung", start: "2024-03-15", duration: "30w" }
|
||||
]}
|
||||
title="ROI-Timeline: SaaS-Miete vs. Build-First Asset"
|
||||
id="gantt-build-buy"
|
||||
showShare={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Digitales Eigentum als strategischer Hebel</H2>
|
||||
<H2 id="digitales-eigentum-als-strategischer-hebel">Digitales Eigentum als strategischer Hebel</H2>
|
||||
|
||||
<Paragraph>
|
||||
Wer den Code besitzt, besitzt die Zukunft seines Unternehmens.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn Sie jemals an einen Exit oder eine Fusion denken, ist technische
|
||||
Unabhängigkeit ein entscheidender Faktor.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich schaffe Ihnen eine Architektur, die{" "}
|
||||
<Marker>frei von technologischen Altlasten</Marker> ist.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Bauen wir Systeme, die so einzigartig sind wie Ihre Vision.
|
||||
Wer den Code besitzt, besitzt die Zukunft seines Unternehmens. In Krisenzeiten oder bei strategischen Neuausrichtungen ist technische Unabhängigkeit ein entscheidender Faktor. [Warum Ihre Agentur für kleine Änderungen Wochen braucht](/blog/why-agencies-are-slow), liegt oft am mangelnden Zugriff auf die Kern-Logik gemieteter Systeme oder überladener CMS-Strukturen wie [WordPress-Plugins](/blog/hidden-costs-of-wordpress-plugins).
|
||||
</Paragraph>
|
||||
|
||||
<H2>Für wen ich 'Unikate' erschaffe</H2>
|
||||
<Paragraph>
|
||||
Ich bin der Architekt für Gründer, die keine Lust mehr auf "geht technisch
|
||||
leider nicht" haben.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ist Ihr Business-Modell am Markt einzigartig? Dann sollte es Ihre Software
|
||||
auch sein.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich steige dort ein, wo{" "}
|
||||
<Marker>technische Brillanz zur strategischen Waffe</Marker> wird.
|
||||
Ich erzeuge Architekturen, die konsequent auf Ownership setzen. Das bedeutet auch: Schutz vor globalen Ausfällen von Drittanbietern und eine drastisch reduzierte Angriffsfläche durch einen [systemischen DSGVO-Ansatz](/blog/gdpr-conformity-system-approach).
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Hören Sie auf zu mieten, fangen Sie an zu bauen</H2>
|
||||
<DigitalAssetVisualizer />
|
||||
|
||||
<Paragraph>
|
||||
Wahrer Reichtum im Digitalen entsteht durch Eigentum und Souveränität.
|
||||
Laut Infosys reporten Organisationen, die KI-getriebene Custom-Lösungen implementieren, eine durchschnittliche Produktivitätssteigerung von 11,8 %. Dies ist nur möglich, wenn die Software-Architektur tief in die eigenen Datenstrukturen integriert ist – ein Level an Synergie, das Standard-SaaS selten erreicht.
|
||||
</Paragraph>
|
||||
|
||||
<H2 id="der-haken-an-der-sache">Der Haken an der Sache (Ehrliche Analyse)</H2>
|
||||
|
||||
<Paragraph>
|
||||
Lassen wir gemeinsam ein System erschaffen, das genau so hart arbeitet wie
|
||||
Sie.
|
||||
Keine Strategie ist ohne Nachteile. Build-First erfordert Mut und ein höheres Commitment des Managements in der frühen Phase. Wer kurzfristige Budget-Ziele über langfristige Marktführerschaft stellt, wird mit einer Eigenentwicklung zunächst hadern.
|
||||
</Paragraph>
|
||||
|
||||
<ComparisonRow
|
||||
description="Ehrliche Abwägung"
|
||||
negativeLabel="Herausforderungen Custom Build"
|
||||
negativeText="Höheres Upfront-Investment, Notwendigkeit klarer Definitionen und initiale Entwicklungszeit (Time-to-Market)."
|
||||
positiveLabel="Mintel Architektur"
|
||||
positiveText="Bestehende Blueprints verkürzen die Zeit zum MVP massiv; Software wird vom Kostenfaktor zum bilanzierbaren Asset."
|
||||
showShare={true}
|
||||
/>
|
||||
|
||||
<div className="my-8">
|
||||
<YouTubeEmbed videoId="CWiueQT8VNI" title="Modern Infrastructure & Build Strategy" />
|
||||
</div>
|
||||
|
||||
<LeadMagnet
|
||||
title="Digitale Asset-Strategie anfragen"
|
||||
description="Planen Sie den Wechsel von teuren Abos zu eigenem Software-Eigentum? Wir analysieren Ihren Status Quo und berechnen den langfristigen ROI Ihrer Build-First Strategie."
|
||||
buttonText="Jetzt Strategie-Check vereinbaren"
|
||||
href="/contact"
|
||||
variant="performance"
|
||||
/>
|
||||
|
||||
<H2 id="fazit">Fazit: Hören Sie auf zu mieten, fangen Sie an zu bauen</H2>
|
||||
|
||||
<Paragraph>
|
||||
<Marker>
|
||||
Qualität ist kein Zufallsprodukt, sondern eine bewusste Entscheidung für
|
||||
den Bau.
|
||||
</Marker>{" "}
|
||||
Ihr Erfolg verdient ein Original.
|
||||
Wahrer Reichtum im digitalen Zeitalter entsteht durch Eigentum und technologische Souveränität. Während Ihre Konkurrenz in starren SaaS-Strukturen gefangen ist, bietet Ihnen eine Eigenentwicklung die Freiheit, Ihre Prozesse radikal zu optimieren.
|
||||
</Paragraph>
|
||||
|
||||
<Paragraph>
|
||||
<Marker>Qualität und Marktführerschaft sind keine Zufallsprodukte, sondern eine bewusste Entscheidung für den Bau eigener Werte.</Marker> Gemäß Deloitte berichten Unternehmen mit maßgeschneiderter Software von 12 % höherer Kundenzufriedenheit. Verwandeln Sie Ihre IT von einem unvermeidbaren Kostenfaktor in einen strategischen Vermögenswert.
|
||||
</Paragraph>
|
||||
|
||||
<FAQSection>
|
||||
<H3>Wann lohnt sich 'Build' gegenüber 'Buy' finanziell?</H3>
|
||||
<Paragraph>
|
||||
Es lohnt sich, wenn die SaaS-Lizenzkosten bei Skalierung die Entwicklungskosten binnen 24–36 Monaten übersteigen. Ebenso, wenn Standardsoftware Ihre Kernprozesse nicht mehr zu 100 % abbilden kann und manuelle Workarounds entstehen.
|
||||
</Paragraph>
|
||||
|
||||
<H3>Ist das Risiko des Scheiterns bei Eigenentwicklungen nicht zu hoch?</H3>
|
||||
<Paragraph>
|
||||
Durch modernste Frameworks und einen modularen MVP-Ansatz wird das Risiko minimiert. Man baut heute in kleinen, validierbaren Zyklen statt in monolithischen Großprojekten, was die Erfolgswahrscheinlichkeit massiv erhöht.
|
||||
</Paragraph>
|
||||
|
||||
<H3>Gibt es hybride Ansätze für B2B-Unternehmen?</H3>
|
||||
<Paragraph>
|
||||
Absolut. Man kann Commodities (wie E-Mail-Versand) mieten, aber die wettbewerbsdifferenzierenden Kernfunktionen (wie Konfiguratoren oder Logistik-Logik) zwingend selbst bauen, um die Kontrolle zu behalten.
|
||||
</Paragraph>
|
||||
</FAQSection>
|
||||
@@ -1,136 +1,158 @@
|
||||
---
|
||||
title: "Digital Longevity: Architektur für das nächste Jahrzehnt"
|
||||
description: "Software ohne Verfallsdatum: So bauen wir Systeme, die technologische Trends überdauern und langfristige Werte schaffen."
|
||||
title: "Digital Longevity: Software-Architektur für das nächste Jahrzehnt"
|
||||
thumbnail: "/blog/digital-longevity-architecture.png"
|
||||
description: "Software ohne Verfallsdatum: Erfahren Sie, wie nachhaltige B2B-Architektur technische Schulden minimiert und langfristige digitale Assets schafft."
|
||||
date: "2026-02-02"
|
||||
tags: ["architecture", "longevity"]
|
||||
tags: ["architecture", "longevity", "strategy"]
|
||||
---
|
||||
|
||||
<LeadParagraph>
|
||||
In der schnelllebigen Tech-Welt gilt Software oft schon nach zwei Jahren
|
||||
als veraltet.
|
||||
In einer Branche, die von Quartalszahlen und kurzlebigen Hypes getrieben wird, gilt Software oft schon nach 24 Monaten als veraltet.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich halte das für eine massive Verschwendung von Kapital und Energie.
|
||||
Ich betrachte diese technologische Kurzatmigkeit als massive Verschwendung von Kapital, Energie und Fokus. Wahre Qualität bemisst sich nicht am Tag des Launchs, sondern daran, wie ein System altert.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Wahre Qualität zeigt sich darin, wie ein System altert.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, wie wir <Marker>digitale Werte für Jahrzehnte</Marker>{" "}
|
||||
schaffen – durch vorausschauende Architektur und zeitlose Standards.
|
||||
Ich zeige Ihnen, wie wir <Marker>digitale Werte für Jahrzehnte</Marker> schaffen – durch vorausschauende Architektur, die technische Schulden proaktiv verhindert statt sie nur zu verwalten.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Gegen die Wegwerf-Mentalität im Code</H2>
|
||||
<Section>
|
||||
<H2>Inhaltsverzeichnis</H2>
|
||||
1. [Gegen die Wegwerf-Mentalität im Code](#gegen-die-wegwerf-mentalität-im-code)
|
||||
2. [Der ökonomische Case für Langlebigkeit](#der-ökonomische-case-für-langlebigkeit)
|
||||
3. [Prinzipien für ewige Systeme](#meine-prinzipien-für-ewige-systeme)
|
||||
4. [Der Haken an der Sache (Ehrliche Analyse)](#der-haken-an-der-sache)
|
||||
5. [Fazit & FAQ](#fazit-werte-schaffen-die-bleiben)
|
||||
</Section>
|
||||
|
||||
<H2 id="gegen-die-wegwerf-mentalität-im-code">Gegen die Wegwerf-Mentalität im Code</H2>
|
||||
|
||||
<Paragraph>
|
||||
Viele Agenturen bauen "Schönwetter-Lösungen", die nur bis zur nächsten
|
||||
Trend-Welle halten.
|
||||
Viele Agenturen bauen "Schönwetter-Lösungen". Man setzt auf proprietäre Blackboxes oder überladene Frameworks, die nach kurzer Zeit nicht mehr unterstützt werden. Das Ergebnis ist eine kostspielige Spirale aus [technischen Altlasten](/blog/slow-loading-costs-customers) und erzwungenen Relaunchs alle drei Jahre.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-8">
|
||||
<ArticleMeme template="grumpycat" captions="Agentur: 'Wir brauchen einen Relaunch'|Ich: 'Der letzte war vor 18 Monaten'" />
|
||||
</div>
|
||||
|
||||
<Paragraph>
|
||||
Man setzt auf kurzlebige Frameworks oder proprietäre Blackboxes, die nach
|
||||
kurzer Zeit nicht mehr unterstützt werden.
|
||||
Ich nenne das <Marker>geplante Obsoleszenz der Software</Marker>. Laut Forschung der Cambridge University liegt die durchschnittliche Lebensspanne einer mobilen App zwischen nur 1 und 5 Jahren. Im B2B-Sektor ist diese Kurzlebigkeit ein strategisches Risiko. Mein Ansatz ist das Gegenteil: Ich baue Systeme, die durch ihre innere Ordnung bestechen. Guter Code ist wie eine solide Immobilie – er braucht Pflege, aber keine Abrissbirne.
|
||||
</Paragraph>
|
||||
|
||||
<ArticleQuote
|
||||
quote="Companies will spend, on average, 10% of their annual revenue on maintaining legacy systems, many of which are prone to constant re-development."
|
||||
author="Deloitte"
|
||||
isCompany={true}
|
||||
source="Deloitte Study"
|
||||
sourceUrl="https://www2.deloitte.com"
|
||||
/>
|
||||
|
||||
<H2 id="der-ökonomische-case-für-langlebigkeit">Der ökonomische Case für Langlebigkeit</H2>
|
||||
|
||||
<Paragraph>
|
||||
Das Ergebnis: Alle drei Jahre ist ein teurer Relaunch fällig.
|
||||
Unternehmen investieren oft Unsummen in glänzende Oberflächen, während das Fundament bröckelt. Dabei zeigen Studien des Standish Group, dass nur 29% aller Softwareprojekte als wirklich erfolgreich eingestuft werden. Ein Hauptgrund: Mangelnde architektonische Weitsicht.
|
||||
</Paragraph>
|
||||
|
||||
<StatsGrid stats="60%|Niedrigere IT-Kosten|bei reifer Architektur~30%|Schneller am Markt|durch Microservices~55%|Fehlquote|bei ad-hoc Projekten" />
|
||||
|
||||
<Paragraph>
|
||||
Ich nenne das <Marker>geplante Obsoleszenz der Software</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Mein Boutique-Ansatz ist das Gegenteil davon: Ich baue Systeme, die durch
|
||||
ihre innere Ordnung und Robustheit bestechen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Guter Code ist wie eine solide Immobilie – er braucht Pflege, aber keine
|
||||
Abrissbirne.
|
||||
Durch den Einsatz eines [Clean Code Fokus](/blog/clean-code-for-business-value) verwandeln wir Software von einer Verbindlichkeit (Liability) in ein echtes digitales Asset. Wenn die Architektur stimmt, sinken die Wartungskosten massiv, während die Agilität steigt.
|
||||
</Paragraph>
|
||||
|
||||
<DigitalAssetVisualizer />
|
||||
|
||||
<H3>Die Ästhetik der Zeitlosigkeit</H3>
|
||||
<Paragraph>Langlebigkeit hat auch eine visuelle Komponente.</Paragraph>
|
||||
|
||||
<Paragraph>
|
||||
Ich vermeide "modische" Spielereien, die morgen schon peinlich wirken
|
||||
könnten.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wahre technische Eleganz ist schlicht, funktional und hochpräzise.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ein <Marker>industrieller, klarer Look</Marker> altert langsamer als jede
|
||||
verspielte Grafik.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich schaffe Designs, die heute beeindrucken und in fünf Jahren noch immer
|
||||
souverän wirken.
|
||||
Langlebigkeit hat auch eine visuelle Komponente. Ich vermeide "modische" Spielereien, die morgen schon peinlich wirken könnten. Ein <Marker>industrieller, klarer Look</Marker> altert langsamer als jede verspielte Grafik. Wir setzen auf [Responsive Excellence](/blog/responsive-design-high-fidelity), die auch auf Endgeräten der nächsten Generation souverän wirkt.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Meine Prinzipien für ewige Systeme</H2>
|
||||
<Paragraph>Wie baut man Software, die nicht veraltet?</Paragraph>
|
||||
<Paragraph>Durch die kompromisslose Auswahl der Fundamente:</Paragraph>
|
||||
<H2 id="meine-prinzipien-für-ewige-systeme">Meine Prinzipien für ewige Systeme</H2>
|
||||
|
||||
<Paragraph>
|
||||
Wie baut man Software, die nicht veraltet? Durch die kompromisslose Auswahl der Fundamente und die Abkehr von [Abhängigkeiten durch Baukasten-Systeme](/blog/builder-systems-threaten-independence).
|
||||
</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Bohrmaschinen statt Spielzeug:</strong> Ich nutze nur
|
||||
Technologien mit breitem industriellem Rückhalt. Keine "Hype"-Tools ohne
|
||||
Langzeit-Sicherheit.
|
||||
<strong>Bohrmaschinen statt Spielzeug:</strong> Einsatz von Technologien mit breitem industriellem Rückhalt (z.B. React, Node.js, Go). Keine Experimente mit "Hype"-Tools ohne Langzeit-Sicherheit.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Strict Separation of Concerns:</strong> Wir trennen Design,
|
||||
Daten und Logik so sauber, dass man Einzelteile austauschen kann, ohne
|
||||
das Ganze zu gefährden.
|
||||
<strong>Strict Separation of Concerns:</strong> Saubere Trennung von Design, Daten und Logik (Headless-Ansatz). So lassen sich Einzelteile austauschen, ohne das Gesamtsystem zu gefährden.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Automatisierte Evolution:</strong> Mein System prüft sich
|
||||
selbst. Wir erkennen frühzeitig, wenn externe Standards sich ändern und
|
||||
passen uns proaktiv an.
|
||||
<strong>Automatisierte Evolution:</strong> Kontinuierliche Refactoring-Zyklen. Laut Google Developers kann gezieltes Refactoring die Performance um 20-50% steigern.
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<YouTubeEmbed videoId="TPLb4q95ZC4" title="Carola Lilienthal über langlebige Architekturen" />
|
||||
</div>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der wirtschaftliche Impact der Halbwertszeit"
|
||||
negativeLabel="Trend-fokussierte Agentur"
|
||||
negativeText="Relaunch alle 3 Jahre nötig, technologische Schulden, hohe Lizenz-Abhängigkeit"
|
||||
positiveLabel="Mintel Longevity Standard"
|
||||
positiveText="Laufzeit von 10+ Jahren möglich, Code als bleibendes Asset, volle Souveränität"
|
||||
negativeLabel="Trend-Agentur"
|
||||
negativeText="Relaunch alle 3 Jahre nötig, massive technische Schulden, hohe Lizenz-Abhängigkeit."
|
||||
positiveLabel="Mintel Standard"
|
||||
positiveText="Laufzeit von 10+ Jahren, Code als bleibendes Asset, volle technologische Souveränität."
|
||||
showShare={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Section>
|
||||
<H2 id="der-haken-an-der-sache">Der Haken an der Sache (Devil's Advocate)</H2>
|
||||
<Paragraph>
|
||||
Langlebige Architektur ist kein Free Lunch. Warum baut dann nicht jeder so?
|
||||
</Paragraph>
|
||||
<IconList>
|
||||
<IconListItem cross>
|
||||
<strong>Höhere Initialkosten:</strong> Eine saubere Architektur erfordert initial ca. 20-30% mehr Planungszeit als eine "Hau-Ruck"-Lösung.
|
||||
</IconListItem>
|
||||
<IconListItem cross>
|
||||
<strong>Abstraktions-Overhead:</strong> Für extrem kleine Wegwerf-Projekte (z.B. eine Event-Landingpage für 4 Wochen) ist dieser Ansatz schlicht überdimensioniert.
|
||||
</IconListItem>
|
||||
<IconListItem cross>
|
||||
<strong>Expertise-Zwang:</strong> Sie benötigen Entwickler, die Architektur verstehen, statt nur "Templates zusammenzuklicken".
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
</Section>
|
||||
|
||||
<LeadMagnet
|
||||
title="Architektur-Audit anfragen"
|
||||
description="Wir analysieren Ihren aktuellen Tech-Stack auf Zukunftsfähigkeit und identifizieren kritische technische Schulden, bevor sie zum Wachstumsstopper werden."
|
||||
buttonText="Jetzt Analyse sichern"
|
||||
href="/contact"
|
||||
variant="performance"
|
||||
/>
|
||||
|
||||
<H2>Rendite durch technologische Beständigkeit</H2>
|
||||
<Paragraph>Wahrer ROI entsteht erst über die Zeit.</Paragraph>
|
||||
<Paragraph>
|
||||
Wer nicht ständig neu bauen muss, hat mehr Kapital für echtes Wachstum zur
|
||||
Verfügung.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Langlebige Software ist zudem das{" "}
|
||||
<Marker>nachhaltigste digitale Werkzeug</Marker>, das Sie besitzen können.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Investieren Sie in Substanz, nicht in flüchtige Effekte.
|
||||
</Paragraph>
|
||||
<Paragraph>Vorsprung hat der, dessen Fundament felsenfest steht.</Paragraph>
|
||||
|
||||
<H2>Wann ist 'Ewigkeit' Ihr Ziel?</H2>
|
||||
<Paragraph>
|
||||
Suchen Sie einen Partner für den Aufbau einer digitalen Marke, die Bestand
|
||||
hat?
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich arbeite für Gründer, die <Marker>Generationen-Projekte</Marker>{" "}
|
||||
führen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn Sie technologische Stabilität als Teil Ihres Vermächtnisses
|
||||
begreifen, bin ich Ihr Architekt.
|
||||
Wahrer ROI entsteht erst über die Zeit. Wer nicht ständig neu bauen muss, hat mehr Kapital für echtes Wachstum zur Verfügung. Organisationen mit reifen Architektur-Praktiken berichten von bis zu 60% niedrigeren Infrastrukturkosten im Vergleich zu Ad-hoc-Ansätzen.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Werte schaffen, die bleiben</H2>
|
||||
<Paragraph>Digitale Exzellenz misst sich am Erfolg von morgen.</Paragraph>
|
||||
<div className="my-8">
|
||||
<ArchitectureBuilder />
|
||||
</div>
|
||||
|
||||
<Paragraph>
|
||||
Lassen wir gemeinsam ein System gießen, das die Zeit überdauert.
|
||||
Investieren Sie in Substanz, nicht in flüchtige Effekte. In einem Markt, in dem 65% der B2B-Entscheider angeben, dass ihre E-Commerce-Lösungen "broken" sind, ist technologische Stabilität ein [entscheidender Wettbewerbsvorteil](/blog/build-first-digital-architecture).
|
||||
</Paragraph>
|
||||
|
||||
<H2 id="fazit-werte-schaffen-die-bleiben">Fazit: Werte schaffen, die bleiben</H2>
|
||||
|
||||
<Paragraph>
|
||||
<Marker>Qualität ist Beständigkeit.</Marker> Ihr Erfolg verdient eine
|
||||
Architektur ohne Verfallsdatum.
|
||||
Digitale Exzellenz misst sich am Erfolg von morgen. Wenn Sie technologische Stabilität als Teil Ihres unternehmerischen Vermächtnisses begreifen, ist eine "Build-First" Strategie alternativlos. Lassen wir gemeinsam ein System gießen, das die Zeit überdauert. <Marker>Qualität ist Beständigkeit.</Marker> Ihr Erfolg verdient eine Architektur ohne Verfallsdatum.
|
||||
</Paragraph>
|
||||
|
||||
<FAQSection>
|
||||
<H3>Warum halten moderne Plattformen oft nur wenige Jahre?</H3>
|
||||
<Paragraph>Meist liegt es an einer zu engen Kopplung an Drittanbieter-Plugins und kurzlebige Trends. Sobald ein Kern-Element nicht mehr gewartet wird, bricht das gesamte Kartenhaus zusammen.</Paragraph>
|
||||
|
||||
<H3>Rechnet sich die höhere Initialinvestition wirklich?</H3>
|
||||
<Paragraph>Ja, da die Kosten für Wartung und den nächsten Relaunch drastisch sinken. Über einen Zeitraum von 5-10 Jahren ist eine Individualarchitektur fast immer günstiger als Miet-Software oder Template-Lösungen.</Paragraph>
|
||||
|
||||
<H3>Kann man bestehende Legacy-Systeme "retten"?</H3>
|
||||
<Paragraph>Oft ist ein schrittweises Refactoring möglich, um Performance und Stabilität zu erhöhen. Laut Google-Metriken können Verbesserungen hier die Performance um bis zu 50% steigern.</Paragraph>
|
||||
</FAQSection>
|
||||
@@ -11,7 +11,7 @@ tags: ["performance", "seo", "conversion-optimization"]
|
||||
</LeadParagraph>
|
||||
|
||||
<LeadParagraph>
|
||||
In der digitalen Ökonomie ist Performance kein „Nice-to-have“, sondern die Basis jeder Customer Journey. Google fand heraus, dass <Marker>53 % der mobilen Website-Besucher eine Seite verlassen</Marker>, die länger als drei Sekunden zum Laden benötigt.
|
||||
In der digitalen Ökonomie ist Performance kein „Nice-to-have“, sondern die Basis jeder Customer Journey. Akamai fand heraus, dass <Marker>53 % der mobilen Website-Besucher eine Seite verlassen</Marker>, die länger als drei Sekunden zum Laden benötigt.
|
||||
</LeadParagraph>
|
||||
|
||||
<TableOfContents />
|
||||
@@ -21,19 +21,20 @@ tags: ["performance", "seo", "conversion-optimization"]
|
||||
<H2>Der unsichtbare Umsatz-Verschleiß</H2>
|
||||
|
||||
<Paragraph>
|
||||
Stellen Sie sich vor, Sie eröffnen ein Luxus-Geschäft in der besten Lage, aber die Eingangstür klemmt massiv. Kunden müssen 10 Sekunden lang drücken, um einzutreten. Genau das passiert täglich auf B2B-Websites, deren technische Altlasten die Nutzererfahrung ersticken. [Langsame Ladezeiten](/blog/slow-loading-costs-customers) sind heute der Hauptgrund für hohe Absprungraten und sinkende Sichtbarkeit. 47 % der Nutzer erwarten laut Akamai, dass eine Webseite in zwei Sekunden oder weniger lädt.
|
||||
Stellen Sie sich vor, Sie eröffnen ein Luxus-Geschäft in der besten Lage, aber die Eingangstür klemmt massiv. Kunden müssen 10 Sekunden lang drücken, um einzutreten. Genau das passiert täglich auf B2B-Websites, deren technische Altlasten die Nutzererfahrung ersticken. [Langsame Ladezeiten](/blog/slow-loading-costs-customers) sind heute der Hauptgrund für hohe Absprungraten und sinkende Sichtbarkeit. 47 % der Nutzer erwarten laut Kissmetrics, dass eine Webseite in zwei Sekunden oder weniger lädt.
|
||||
</Paragraph>
|
||||
|
||||
<ArticleQuote
|
||||
quote="Every 100ms of latency cost them 1% in sales."
|
||||
author="Amazon"
|
||||
isCompany={true}
|
||||
translated={false}
|
||||
source="Amazon CDN Study"
|
||||
sourceUrl="https://vwo.com/blog/100ms-latency-cost-amazon-1-percent-sales/"
|
||||
/>
|
||||
|
||||
<Paragraph>
|
||||
Millisekunden sind im digitalen Zeitalter die härteste Währung. Daten von Google zeigen: Steigt die Ladezeit von einer auf drei Sekunden, <Marker>erhöht sich die Wahrscheinlichkeit eines Absprungs um 32 %</Marker>. Es ist ein gnadenloser Zusammenhang: Je länger der Browser wartet, desto geringer die Wahrscheinlichkeit eines profitablen Abschlusses. Geht die Ladezeit sogar auf 5 Sekunden hoch, steigt die Bounce-Wahrscheinlichkeit laut Google Developers sogar um 90 %.
|
||||
Millisekunden sind im digitalen Zeitalter die härteste Währung. Daten von Google zeigen: Steigt die Ladezeit von einer auf drei Sekunden, <Marker>erhöht sich die Wahrscheinlichkeit eines Absprungs um 32 %</Marker>. Es ist ein gnadenloser Zusammenhang: Je länger der Browser wartet, desto geringer die Wahrscheinlichkeit eines profitablen Abschlusses. Geht die Ladezeit sogar auf sechs Sekunden hoch, steigt die Bounce-Wahrscheinlichkeit laut Google Developers sogar um dramatische 106 %.
|
||||
</Paragraph>
|
||||
|
||||
<BoldNumber
|
||||
@@ -44,13 +45,13 @@ tags: ["performance", "seo", "conversion-optimization"]
|
||||
/>
|
||||
|
||||
<Paragraph>
|
||||
Ich betrachte Performance nicht als isolierte IT-Kennzahl, sondern als ökonomischen Hebel. Ein [professionelles Hosting](/blog/professional-hosting-operations) und eine saubere Architektur sind die Mindestanforderung. Websites, die in einer Sekunde laden, haben eine <Marker>fast dreimal höhere Conversion-Rate</Marker> als Seiten, die fünf Sekunden benötigen. Eine Studie von Portent untermauert dies: Die Conversion-Rate sinkt im Schnitt um 4,42 % mit jeder zusätzlichen Sekunde Ladezeit (zwischen Sekunde 0 und 5).
|
||||
Ich betrachte Performance nicht als isolierte IT-Kennzahl, sondern als ökonomischen Hebel. Ein [professionelles Hosting](/blog/professional-hosting-operations) und eine saubere Architektur sind die Mindestanforderung. Websites, die in einer Sekunde laden, haben eine signifikant höhere Conversion-Rate als langsamere Instanzen. Eine Studie von Portent untermauert dies: Die Conversion-Rate sinkt im Schnitt um 4,42 % mit jeder zusätzlichen Sekunde Ladezeit (zwischen Sekunde 0 und 5). Shopzilla berichtete sogar von einem <Marker>Umsatzplus von 7-12 %</Marker>, nachdem sie die Ladezeit von 6 auf 1 Sekunde reduzierten.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Core Web Vitals: Die neuen Spielregeln von Google</H2>
|
||||
|
||||
<Paragraph>
|
||||
Google hat bestätigt, dass <ExternalLink href="https://developers.google.com/search/docs/appearance/core-web-vitals">Core Web Vitals</ExternalLink> als Ranking-Signale für Suchergebnisse genutzt werden. Wer hier rote Zahlen schreibt, wird vom Algorithmus abgestraft. Webseiten, die den Schwellenwert „Gut“ in allen Kategorien erreichen, verzeichnen im Schnitt **24 % weniger Nutzer-Abbrüche**. Dennoch zeigt die Forschung, dass viele mobile Seiten fast sieben Sekunden brauchen, bis der Content "above the fold" angezeigt wird.
|
||||
Google hat bestätigt, dass <ExternalLink href="https://developers.google.com/search/docs/appearance/core-web-vitals">Core Web Vitals</ExternalLink> als Ranking-Signale für Suchergebnisse genutzt werden. Wer hier rote Zahlen schreibt, wird vom Algorithmus abgestraft. Webseiten, die den Schwellenwert „Gut“ in allen Kategorien erreichen, verzeichnen laut Deloitte eine deutlich höhere Conversion-Rate. Dennoch zeigt das HTTP Archive, dass ein signifikanter Prozentsatz der Websites die empfohlenen Grenzwerte weiterhin massiv verfehlt.
|
||||
</Paragraph>
|
||||
|
||||
<WebVitalsScore
|
||||
@@ -59,7 +60,7 @@ tags: ["performance", "seo", "conversion-optimization"]
|
||||
/>
|
||||
|
||||
<Paragraph>
|
||||
Dabei fokussiert sich das Framework auf drei wesentliche Säulen der User Experience:
|
||||
Dabei fokussiert sich das Framework auf drei wesentliche Säulen der User Experience, für die Google im PageSpeed Insights Tool spezifische Optimierungsvorschläge liefert:
|
||||
</Paragraph>
|
||||
|
||||
<IconList>
|
||||
@@ -67,28 +68,28 @@ tags: ["performance", "seo", "conversion-optimization"]
|
||||
<strong>Largest Contentful Paint (LCP):</strong> Ladegeschwindigkeit des Hauptinhalts (Ziel: unter 2,5s).
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Interaction to Next Paint (INP):</strong> Die neue Metrik für Interaktivität und Reaktionsschnelligkeit (Ziel: unter 200ms).
|
||||
<strong>Interaction to Next Paint (INP):</strong> Die neue Metrik für Interaktivität (Ziel: unter 200ms).
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Cumulative Layout Shift (CLS):</strong> Verhindert nerviges Hin- und Herspringen von Inhalten (Ziel: unter 0,1).
|
||||
<strong>Cumulative Layout Shift (CLS):</strong> Verhindert visuelle Instabilität (Ziel: unter 0,1).
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<H2>Warum klassische CMS-Lösungen scheitern</H2>
|
||||
|
||||
<Paragraph>
|
||||
Die Ursache für mangelhafte Performance liegt oft in „All-in-One“-Lösungen. [Die versteckten Kosten von WordPress-Plugins](/blog/hidden-costs-of-wordpress-plugins) offenbaren sich spätestens beim ersten Audit. Jedes zusätzliche Plugin erhöht potenziell die Latenz und reduziert die Kundenzufriedenheit – laut Aberdeen Group kann bereits eine Sekunde Verzögerung die Zufriedenheit um 16 % senken.
|
||||
Die Ursache für mangelhafte Performance liegt oft in „All-in-One“-Lösungen. [Die versteckten Kosten von WordPress-Plugins](/blog/hidden-costs-of-wordpress-plugins) offenbaren sich spätestens beim ersten Audit. Jedes zusätzliche Plugin erhöht potenziell die Latenz. Nutzer verlassen laut Nielsen Norman Group Webseiten, die langsam oder unresponsiv reagieren, extrem schnell.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-8">
|
||||
<ArticleMeme
|
||||
template="drake"
|
||||
captions="50 WordPress Plugins für SEO & Speed|Saubere Static-Site Architektur ohne Ballast"
|
||||
template="gru"
|
||||
captions="WordPress Seite für B2B bauen|50 Plugins für jedes Mini-Feature installieren|Google Score sinkt auf 14 Punkte|Niemand kauft weil die Seite 10s lädt"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Paragraph>
|
||||
Jedes Byte muss durch das Nadelöhr der mobilen Verbindung. Wer hier auf [Standard-Templates setzt](/blog/why-no-templates-matter), sabotiert seinen Erfolg. 79 % der Shopper, die mit der Performance unzufrieden sind, kaufen laut Kissmetrics weniger wahrscheinlich erneut auf derselben Seite. Oft ersticken [Baukasten-Systeme Ihre Unabhängigkeit](/blog/builder-systems-threaten-independence) durch unnötigen Code-Overhead.
|
||||
Jedes Byte muss durch das Nadelöhr der mobilen Verbindung. Wer hier auf [Standard-Templates setzt](/blog/why-no-templates-matter), sabotiert seinen Erfolg. Oft ersticken [Baukasten-Systeme Ihre Unabhängigkeit](/blog/builder-systems-threaten-independence) durch unnötigen Code-Overhead. Walmart konnte zeigen, dass jede Sekunde Ladezeit-Optimierung die Conversions um 2 % steigert.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-8">
|
||||
@@ -97,8 +98,8 @@ graph TD
|
||||
A["Anfrage Browser"] --> B["Server Rechenlast"]
|
||||
B --> C["DB Abfragen"]
|
||||
C --> D["HTML Generierung"]
|
||||
D --> E["Rendering Blocks"]
|
||||
E -- "3-5 Sek" --> F["Sichtbar"]
|
||||
D --> E["Browser Rendering"]
|
||||
E -- "High Latency" --> F["Absprung"]
|
||||
</Mermaid>
|
||||
</div>
|
||||
|
||||
@@ -108,20 +109,10 @@ graph TD
|
||||
Ich verfolge einen [Build-First Ansatz](/blog/build-first-digital-architecture). Statt die Seite erst mühsam zusammenzubauen, wenn der Kunde sie anfragt, liefere ich fertig optimierte statische Ressourcen aus einem globalen Edge-Netzwerk. Dies minimiert die Time to First Byte (TTFB) radikal, oft auf unter 50ms.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<WaterfallChart
|
||||
title="Optimierter Ladevorgang (Static Architecture)"
|
||||
events={[
|
||||
{ name: "Document (Edge)", start: 0, duration: 45 },
|
||||
{ name: "Critical CSS", start: 45, duration: 25 },
|
||||
{ name: "LCP Image (AVIF)", start: 70, duration: 160 },
|
||||
{ name: "Interaktiv (Hydration)", start: 230, duration: 40 }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<LoadTimeSimulator />
|
||||
|
||||
<Paragraph>
|
||||
Das Resultat ist Skalierbarkeit durch Design. Die Antwortzeit bleibt konstant niedrig, egal ob 10 oder 10.000 Nutzer gleichzeitig zugreifen. Dies ist ein entscheidender Wettbewerbsvorteil, da viele B2B-Wettbewerber noch immer erhebliche Defizite beim LCP aufweisen. Eine [Wartungsfreie Architektur](/blog/maintenance-for-headless-systems) sorgt zudem dafür, dass diese Performance über Jahre stabil bleibt.
|
||||
Das Resultat ist Skalierbarkeit durch Design. Die Antwortzeit bleibt konstant niedrig, egal ob 10 oder 10.000 Nutzer gleichzeitig zugreifen. Dies ist ein entscheidender Wettbewerbsvorteil, da viele B2B-Wettbewerber noch immer erhebliche Defizite aufweisen. Eine [Wartungsfreie Architektur](/blog/maintenance-for-headless-systems) sorgt zudem dafür, dass diese Performance über Jahre stabil bleibt, ohne dass Plugins das System schleichend verlangsamen.
|
||||
</Paragraph>
|
||||
|
||||
<H3>Die drei Säulen der Umsetzung</H3>
|
||||
@@ -144,49 +135,48 @@ graph TD
|
||||
<H2>Der „Haken“ an der Sache: Devil's Advocate</H2>
|
||||
|
||||
<Paragraph>
|
||||
Ehrlichkeit gehört zu einer profunden Architektur-Beratung. Eine High-End-Performance-Lösung ist kein "Plug-and-Play" und erfordert Investitionen in Expertise.
|
||||
Ehrlichkeit gehört zu einer profunden Architektur-Beratung. Eine High-End-Performance-Lösung ist kein "Plug-and-Play" und erfordert Investitionen in Expertise statt in billige Massenware.
|
||||
</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem cross>
|
||||
<strong>Komplexität:</strong> Der Build-Prozess ist technisch anspruchsvoller als ein einfaches FTP-Upload eines PHP-Skripts.
|
||||
<strong>Technisches Setup:</strong> Der Build-Prozess erfordert modernes DevOps-Know-how statt simpler Klick-Interfaces.
|
||||
</IconListItem>
|
||||
<IconListItem cross>
|
||||
<strong>Initialaufwand:</strong> Höhere Setup-Kosten im Vergleich zum 08/15 Standard-Template.
|
||||
<strong>Inflexibilität für Laien:</strong> Ohne Headless-CMS-Anbindung sind Änderungen im Code für Nicht-Entwickler komplexer.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Langfristiger ROI:</strong> Die Investition amortisiert sich durch höhere Conversions und sinkende Kosten pro Lead massiv.
|
||||
<strong>Digital Asset:</strong> Im Gegensatz zur "Miete" eines Baukastens erschaffen Sie wertbringendes Eigentum (Intellectual Property).
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<ComparisonRow
|
||||
description="Architektur-Realitäten im B2B"
|
||||
negativeLabel="Legacy CMS (Monolith)"
|
||||
negativeText="Veraltete Technik, langsame Datenbank-Queries, Sicherheitslücken durch Plugins."
|
||||
positiveLabel="Performance Stack"
|
||||
positiveText="Maximaler Speed durch Entkopplung, SEO-Dominanz und zukunftssichere Statik."
|
||||
showShare={true}
|
||||
/>
|
||||
<DigitalAssetVisualizer />
|
||||
|
||||
<div className="flex justify-center my-8">
|
||||
<Button href="/contact" variant="outline" size="large">Performance-Check anfragen</Button>
|
||||
</div>
|
||||
<LeadMagnet
|
||||
title="Performance-Audit anfordern"
|
||||
description="Wir analysieren Ihre Core Web Vitals im Detail und berechnen das ungenutzte Umsatzpotenzial Ihrer aktuellen B2B-Website."
|
||||
buttonText="Jetzt Analyse starten"
|
||||
href="/contact"
|
||||
variant="performance"
|
||||
/>
|
||||
|
||||
<H2>Der wirtschaftliche Case</H2>
|
||||
|
||||
<Paragraph>
|
||||
B2B-Unternehmen verlieren laut Google massiv Conversions pro zusätzlicher Sekunde Ladezeit. Wenn Sie Budget in Marketing investieren, aber Leads durch technische Altlasten verlieren, verbrennen Sie Kapital. [Clean Code](/blog/clean-code-for-business-value) ist hier kein Selbstzweck, sondern eine ökonomische Notwendigkeit. Walmart sah bis zu 2 % mehr Conversions für jede Sekunde Ladezeit-Optimierung.
|
||||
B2B-Unternehmen verlieren laut Google massiv Conversions pro zusätzlicher Sekunde Ladezeit. Wenn Sie Budget in Marketing investieren, aber Leads durch technische Altlasten verlieren, verbrennen Sie Kapital. [Clean Code](/blog/clean-code-for-business-value) ist hier kein Selbstzweck, sondern eine ökonomische Notwendigkeit für den Return on Ad Spend (ROAS).
|
||||
</Paragraph>
|
||||
|
||||
<StatsGrid stats="3x|Conversion Boost|bei 1s vs 5s Load~24%|Mehr Leads|bei bestandenen Web Vitals~8.4%|Conversion Plus|pro 100ms Verbesserung" />
|
||||
<StatsGrid stats="7-12%|Umsatz-Plus|Shopzilla Performance Fix~24%|Mehr Leads|bei bestandenen Web Vitals~8.4%|Conversion Plus|pro 0.1s Verbesserung" />
|
||||
|
||||
<PerformanceROICalculator />
|
||||
|
||||
<Paragraph>
|
||||
Mein System fungiert als ROI-Beschleuniger für Ihren gesamten digitalen Auftritt. Warum viele Agenturen bei diesem Thema scheitern, erkläre ich im Detail in meinem Artikel [Warum Ihre Agentur für kleine Änderungen Wochen braucht](/blog/why-agencies-are-slow).
|
||||
Mein System fungiert als ROI-Beschleuniger für Ihren gesamten digitalen Auftritt. Warum viele Agenturen bei diesem Thema scheitern und stattdessen langsame Monolithen verkaufen, erkläre ich im Detail in meinem Artikel [Warum Ihre Agentur für kleine Änderungen Wochen braucht](/blog/why-agencies-are-slow).
|
||||
</Paragraph>
|
||||
|
||||
<YouTubeEmbed videoId="eesxdlG-N6U" title="Wie Sie PageSpeed Insights richtig deuten" />
|
||||
<div className="my-8">
|
||||
<YouTubeEmbed videoId="eesxdlG-N6U" title="Core Web Vitals einfach erklärt" />
|
||||
</div>
|
||||
|
||||
<H2>Fazit: Respekt vor der Zeit Ihrer Nutzer</H2>
|
||||
|
||||
@@ -198,11 +188,13 @@ graph TD
|
||||
Lassen Sie uns Ihre Website in eine hochpräzise Wachstums-Maschine verwandeln, die nicht nur hochwertig aussieht, sondern auf Knopfdruck liefert. Qualität zahlt sich aus – messbar in Sekunden und in Euro.
|
||||
</Paragraph>
|
||||
|
||||
<div className="flex justify-center my-12">
|
||||
<Button href="/contact" variant="primary" size="large">Jetzt Webprojekt starten</Button>
|
||||
</div>
|
||||
|
||||
***
|
||||
<LeadMagnet
|
||||
title="B2B-Architektur-Beratung"
|
||||
description="Entwickeln Sie eine Website, die technisch dominiert. Von Edge-Computing bis hin zu perfekter PageSpeed-Score-Optimierung."
|
||||
buttonText="Beratungstermin vereinbaren"
|
||||
href="/contact"
|
||||
variant="standard"
|
||||
/>
|
||||
|
||||
<FAQSection>
|
||||
<H3>Warum ist mein PageSpeed-Score mobil oft deutlich schlechter als auf dem Desktop?</H3>
|
||||
@@ -212,11 +204,11 @@ graph TD
|
||||
|
||||
<H3>Reicht ein Caching-Plugin für WordPress nicht aus?</H3>
|
||||
<Paragraph>
|
||||
Plugins kurieren nur Symptome der Server-Reaktionszeit, lösen aber nicht das Problem von zu viel Code-Ballast im Browser. Für echte Spitzenwerte und stabile Core Web Vitals ist eine schlanke, vom CMS entkoppelte Architektur notwendig.
|
||||
Caching kurapiert nur Symptome, löst aber nicht das Problem von zu viel Code-Ballast (Bloat). Für echte Spitzenwerte und stabile Core Web Vitals ist eine schlanke, vom CMS entkoppelte Architektur notwendig.
|
||||
</Paragraph>
|
||||
|
||||
<H3>Wie beeinflusst Performance direkt mein SEO-Ranking?</H3>
|
||||
<H3>Wie schnell muss eine B2B-Seite wirklich laden?</H3>
|
||||
<Paragraph>
|
||||
Google nutzt Core Web Vitals als explizite Ranking-Signale. Seiten mit exzellenter Performance werden bevorzugt indexiert und positioniert, da sie eine bessere User Experience bieten, was Google durch höhere Sichtbarkeit belohnt.
|
||||
Der Goldstandard liegt unter 2 Sekunden. Ab 3 Sekunden steigt die Bounce-Rate laut Google massiv (32 %), während jede Optimierung im Millisekundenbereich direkt die Conversion-Rate verbessert.
|
||||
</Paragraph>
|
||||
</FAQSection>
|
||||
BIN
apps/web/public/blog/build-first-digital-architecture.png
Normal file
BIN
apps/web/public/blog/build-first-digital-architecture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 MiB |
BIN
apps/web/public/blog/digital-longevity-architecture.png
Normal file
BIN
apps/web/public/blog/digital-longevity-architecture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 MiB |
@@ -35,7 +35,8 @@ ${(tasks || [])
|
||||
const deps = task.dependencies?.length
|
||||
? `, after ${task.dependencies.join(" ")}`
|
||||
: "";
|
||||
return ` ${task.name} :${task.id}, ${task.start}, ${task.duration}${deps}`;
|
||||
const safeName = task.name.replace(/:/g, " -");
|
||||
return ` ${safeName} :${task.id}, ${task.start}, ${task.duration}${deps}`;
|
||||
})
|
||||
.join("\n")}`;
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -3,150 +3,195 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ComponentShareButton } from '../ComponentShareButton';
|
||||
import { Reveal } from '../Reveal';
|
||||
import { TrendingUp, Coins, PiggyBank, Briefcase } from 'lucide-react';
|
||||
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
|
||||
import { Briefcase, Coins, PiggyBank, TrendingUp } from 'lucide-react';
|
||||
|
||||
const data = [
|
||||
{ year: 'Jahr 1', saasCost: 40000, saasAsset: 0, customCost: 120000, customAsset: 120000 },
|
||||
{ year: 'Jahr 2', saasCost: 85000, saasAsset: 0, customCost: 140000, customAsset: 110000 },
|
||||
{ year: 'Jahr 3', saasCost: 135000, saasAsset: 0, customCost: 160000, customAsset: 100000 },
|
||||
{ year: 'Jahr 4', saasCost: 190000, saasAsset: 0, customCost: 180000, customAsset: 90000 },
|
||||
{ year: 'Jahr 5', saasCost: 250000, saasAsset: 0, customCost: 200000, customAsset: 85000 },
|
||||
];
|
||||
|
||||
const formatCurrency = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(val);
|
||||
|
||||
export function DigitalAssetVisualizer({ className = '' }: { className?: string }) {
|
||||
const [view, setView] = useState<'liability' | 'asset'>('asset');
|
||||
const [view, setView] = 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 ${view === 'liability' ? 'bg-gradient-to-r from-red-100 to-orange-100' : 'bg-gradient-to-r from-indigo-100 to-emerald-100'}`} />
|
||||
<div className={`absolute -inset-1 blur opacity-30 rounded-3xl transition-all duration-700 ${view === 'saas' ? 'bg-gradient-to-r from-red-200 to-orange-100' : 'bg-gradient-to-r from-indigo-200 to-emerald-100'}`} />
|
||||
|
||||
<div id="sim-digital-asset" className="relative bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
|
||||
<div id="sim-digital-asset" 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-digital-asset"
|
||||
title="Digitales Asset vs. Verbindlichkeit"
|
||||
shareText="Verstehen Sie den Unterschied zwischen Software-Miete und echtem digitalen Eigentum:"
|
||||
title="Software: Ausgabe oder Investment?"
|
||||
shareText="Sehen Sie sich den finanziellen Verlauf von Software-Miete (SaaS) gegenüber einer Inhouse-Eigenentwicklung 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">Software: Ausgabe oder Investment?</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">Software: Ausgabe oder Investment?</h3>
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 m-0 leading-relaxed max-w-2xl">
|
||||
Kumulierte Kosten im Vergleich zum bilanzierbaren Unternehmenswert über 5 Jahre.
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 m-0 leading-relaxed max-w-2xl">
|
||||
Visualisieren Sie den Unterschied zwischen Software, die monatlich Geld verbrennt (SaaS-Miete), und Software, die als Firmenwert bilanziert werden kann (Eigenbau).
|
||||
</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">Wirtschaftliche Sicht</label>
|
||||
|
||||
<div className="flex flex-col">
|
||||
{/* Control Tabs */}
|
||||
<div className="flex border-b border-slate-100">
|
||||
<button
|
||||
onClick={() => setView('liability')}
|
||||
className={`w-full flex items-center gap-3 text-left p-4 rounded-xl border-2 transition-all ${view === 'liability' ? 'border-red-400 bg-white shadow-sm' : 'border-transparent hover:bg-slate-100'}`}
|
||||
onClick={() => setView('saas')}
|
||||
className={`flex-1 p-4 flex flex-col items-center justify-center gap-2 transition-all ${view === 'saas' ? 'bg-white border-b-2 border-red-500' : 'bg-slate-50 text-slate-400 hover:bg-slate-100'}`}
|
||||
>
|
||||
<div className={`p-2 rounded-lg ${view === 'liability' ? 'bg-red-100 text-red-600' : 'bg-slate-200 text-slate-500'}`}>
|
||||
<Coins size={18} />
|
||||
<div className={`p-2 rounded-full ${view === 'saas' ? 'bg-red-100 text-red-600' : 'bg-slate-200'}`}>
|
||||
<Coins size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-slate-900 text-sm">Verbindlichkeit (SaaS)</div>
|
||||
<div className="text-[10px] text-slate-500 mt-0.5">Laufende Kosten, 0% Eigentum</div>
|
||||
<div className="text-center">
|
||||
<div className={`font-bold text-sm ${view === 'saas' ? 'text-slate-900' : ''}`}>SaaS-Miete (Verbindlichkeit)</div>
|
||||
<div className="text-[10px] uppercase tracking-wider mt-0.5 opacity-70">100% OpEx</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setView('asset')}
|
||||
className={`w-full flex items-center gap-3 text-left p-4 rounded-xl border-2 transition-all ${view === 'asset' ? 'border-indigo-400 bg-white shadow-sm' : 'border-transparent hover:bg-slate-100'}`}
|
||||
onClick={() => setView('custom')}
|
||||
className={`flex-1 p-4 flex flex-col items-center justify-center gap-2 transition-all ${view === 'custom' ? 'bg-white border-b-2 border-indigo-500' : 'bg-slate-50 text-slate-400 hover:bg-slate-100'}`}
|
||||
>
|
||||
<div className={`p-2 rounded-lg ${view === 'asset' ? 'bg-indigo-100 text-indigo-600' : 'bg-slate-200 text-slate-500'}`}>
|
||||
<Briefcase size={18} />
|
||||
<div className={`p-2 rounded-full ${view === 'custom' ? 'bg-indigo-100 text-indigo-600' : 'bg-slate-200'}`}>
|
||||
<Briefcase size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-slate-900 text-sm">Digitales Asset (Custom)</div>
|
||||
<div className="text-[10px] text-slate-500 mt-0.5">Firmenwertaufbau, 100% IP</div>
|
||||
<div className="text-center">
|
||||
<div className={`font-bold text-sm ${view === 'custom' ? 'text-slate-900' : ''}`}>Eigenentwicklung (Asset)</div>
|
||||
<div className="text-[10px] uppercase tracking-wider mt-0.5 opacity-70">CapEx + IP-Aufbau</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Visualization Panel */}
|
||||
<div className="w-full md:w-2/3 p-6 md:p-8 bg-white min-h-[350px] 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%">
|
||||
<AreaChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 0 }}>
|
||||
<defs>
|
||||
<linearGradient id="colorCostSaas" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#ef4444" stopOpacity={0.15} />
|
||||
<stop offset="95%" stopColor="#ef4444" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
<linearGradient id="colorCostCustom" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#94a3b8" stopOpacity={0.15} />
|
||||
<stop offset="95%" stopColor="#94a3b8" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
<linearGradient id="colorAsset" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#4f46e5" stopOpacity={0.2} />
|
||||
<stop offset="95%" stopColor="#4f46e5" stopOpacity={0.02} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
|
||||
<XAxis
|
||||
dataKey="year"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: '#64748b', fontSize: 12, fontWeight: 500 }}
|
||||
dy={10}
|
||||
/>
|
||||
<YAxis
|
||||
tickFormatter={(val) => `€${val / 1000}k`}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: '#64748b', fontSize: 12 }}
|
||||
dx={-10}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{ borderRadius: '8px', border: '1px solid #f1f5f9', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)', padding: '6px 10px', fontSize: '11px', backgroundColor: 'rgba(255, 255, 255, 0.95)', backdropFilter: 'blur(4px)' }}
|
||||
itemStyle={{ fontSize: '11px', padding: '2px 0' }}
|
||||
formatter={(value: number, name: string) => {
|
||||
if (name === 'saasCost') return [formatCurrency(value), 'Kumulierte Kosten (Miete)'];
|
||||
if (name === 'customCost') return [formatCurrency(value), 'Kumulierte Kosten (Bau + Wartung)'];
|
||||
if (name === 'customAsset') return [formatCurrency(value), 'Firmenwert (Digitales Eigentum)'];
|
||||
if (name === 'saasAsset') return [formatCurrency(value), 'Firmenwert (IP)'];
|
||||
return [value, name];
|
||||
}}
|
||||
labelStyle={{ fontWeight: 'bold', color: '#0f172a', marginBottom: '4px', fontSize: '11px' }}
|
||||
/>
|
||||
|
||||
{view === 'liability' ? (
|
||||
<div className="animate-in fade-in slide-in-from-right-4 duration-500">
|
||||
<div className="flex flex-col items-center justify-center space-y-6 mb-8 mt-4">
|
||||
{view === 'saas' ? (
|
||||
<>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="saasCost"
|
||||
stroke="#ef4444"
|
||||
strokeWidth={3}
|
||||
fillOpacity={1}
|
||||
fill="url(#colorCostSaas)"
|
||||
animationDuration={1500}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="saasAsset"
|
||||
stroke="#cbd5e1"
|
||||
strokeWidth={2}
|
||||
fillOpacity={0}
|
||||
animationDuration={1500}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="customAsset"
|
||||
stroke="#4f46e5"
|
||||
strokeWidth={3}
|
||||
fillOpacity={1}
|
||||
fill="url(#colorAsset)"
|
||||
animationDuration={1500}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="customCost"
|
||||
stroke="#64748b"
|
||||
strokeWidth={2}
|
||||
strokeDasharray="5 5"
|
||||
fillOpacity={1}
|
||||
fill="url(#colorCostCustom)"
|
||||
animationDuration={1500}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{/* Money Burn Animation */}
|
||||
<div className="relative w-32 h-32 flex items-center justify-center">
|
||||
{/* Fire background blob */}
|
||||
<div className="absolute inset-4 bg-orange-400 rounded-full blur-xl opacity-20 animate-pulse" />
|
||||
|
||||
{/* Money flying away */}
|
||||
<div className="absolute top-0 right-0 animate-bounce delay-75 text-red-500 opacity-50">-€</div>
|
||||
<div className="absolute top-4 left-4 animate-bounce delay-150 text-red-500 opacity-40">-€</div>
|
||||
<div className="absolute bottom-8 right-8 animate-bounce delay-300 text-red-500 opacity-60">-€</div>
|
||||
|
||||
<div className="w-20 h-20 bg-red-50 border border-red-200 text-red-500 rounded-full flex items-center justify-center text-3xl shadow-sm z-10">
|
||||
💸
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-bold text-red-900">Der ewige Geldabfluss</div>
|
||||
<p className="text-xs text-red-700 mt-2 max-w-[250px] mx-auto opacity-80">
|
||||
Jeden Monat fließt Kapital an externe Software-Anbieter ab. Kündigen Sie, ist Ihr System sofort offline.
|
||||
</p>
|
||||
</div>
|
||||
{/* Summary Metrics */}
|
||||
<div className="grid grid-cols-2 gap-4 mt-8">
|
||||
<div className={`p-4 rounded-xl border ${view === 'saas' ? 'bg-red-50 border-red-100' : 'bg-slate-50 border-slate-200'}`}>
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">
|
||||
Total Spend (Jahr 5)
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 rounded-xl p-4 border border-slate-200 grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Unternehmenswert</div>
|
||||
<div className="font-bold text-slate-900">0,00 €</div>
|
||||
<div className="text-[10px] text-slate-500 mt-0.5">Software gehört Anbieter</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Skalierungs-Kosten</div>
|
||||
<div className="font-bold text-red-600 flex items-center gap-1">Linear <TrendingUp size={12} /></div>
|
||||
<div className="text-[10px] text-slate-500 mt-0.5">Mehr User = Mehr Kosten</div>
|
||||
</div>
|
||||
<div className={`text-2xl font-bold flex items-center gap-2 ${view === 'saas' ? 'text-red-600' : 'text-slate-700'}`}>
|
||||
{view === 'saas' ? '250.000 €' : '200.000 €'}
|
||||
{view === 'saas' && <TrendingUp size={16} className="text-red-500" />}
|
||||
</div>
|
||||
<div className="text-xs text-slate-500 mt-1">Sunk Costs (Geldabfluss)</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="animate-in fade-in slide-in-from-right-4 duration-500">
|
||||
<div className="flex flex-col items-center justify-center space-y-6 mb-8 mt-4">
|
||||
|
||||
{/* Asset Building Animation */}
|
||||
<div className="relative w-32 h-32 flex items-center justify-center">
|
||||
{/* Glow background blob */}
|
||||
<div className="absolute inset-4 bg-indigo-400 rounded-full blur-xl opacity-20" />
|
||||
|
||||
{/* Value accumulating */}
|
||||
<div className="absolute -top-2 left-1/2 -ml-3 animate-pulse text-indigo-500 text-xl font-bold">+</div>
|
||||
|
||||
<div className="w-20 h-20 bg-indigo-50 border border-indigo-200 text-indigo-600 rounded-2xl flex items-center justify-center shadow-sm z-10 rotate-3 transition-transform hover:rotate-6 hover:scale-105">
|
||||
<PiggyBank size={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-bold text-indigo-900">Das aktivierbare Asset</div>
|
||||
<p className="text-xs text-indigo-700 mt-2 max-w-[280px] mx-auto opacity-80">
|
||||
Maßgeschneiderte Software gehört zu 100% Ihnen. Das Intellectual Property (IP) mehrt den Wert Ihrer GmbH.
|
||||
</p>
|
||||
</div>
|
||||
<div className={`p-4 rounded-xl border ${view === 'saas' ? 'bg-slate-50 border-slate-200' : 'bg-indigo-50 border-indigo-100'}`}>
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">
|
||||
Bilanzierbarer Wert (IP)
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 rounded-xl p-4 border border-slate-200 grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Unternehmenswert</div>
|
||||
<div className="font-bold text-emerald-600 flex items-center gap-1">Steigt aktiv <TrendingUp size={12} /></div>
|
||||
<div className="text-[10px] text-slate-500 mt-0.5">Kann bilanziert werden</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Skalierungs-Kosten</div>
|
||||
<div className="font-bold text-slate-900">Flach (0€ Lizenzen)</div>
|
||||
<div className="text-[10px] text-slate-500 mt-0.5">Nur reine Serverkosten</div>
|
||||
</div>
|
||||
<div className={`text-2xl font-bold flex items-center gap-2 ${view === 'saas' ? 'text-slate-400' : 'text-indigo-600'}`}>
|
||||
{view === 'saas' ? '0 €' : '85.000 €'}
|
||||
{view === 'custom' && <PiggyBank size={18} className="text-indigo-500" />}
|
||||
</div>
|
||||
<div className="text-xs text-slate-500 mt-1">Erhöht den Unternehmenswert</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user