diff --git a/apps/web/src/components/simulations/PerformanceROICalculator.tsx b/apps/web/src/components/simulations/PerformanceROICalculator.tsx index 6ca15ec..f1e9bf2 100644 --- a/apps/web/src/components/simulations/PerformanceROICalculator.tsx +++ b/apps/web/src/components/simulations/PerformanceROICalculator.tsx @@ -5,10 +5,10 @@ import { ComponentShareButton } from '../ComponentShareButton'; import { Reveal } from '../Reveal'; export function PerformanceROICalculator({ className = '' }: { className?: string }) { - const [traffic, setTraffic] = useState(100); // 1000 visitors/month (approx 30/day) - const [aov, setAov] = useState(100); // e.g. average value of a craftsman quote or small B2B service - const [loadTime, setLoadTime] = useState(2.0); - const [baseConv, setBaseConv] = useState(2.0); + const [traffic, setTraffic] = useState(800); // Typical niche B2B traffic + const [aov, setAov] = useState(25000); // Typical B2B project value + const [loadTime, setLoadTime] = useState(4.5); + const [baseConv, setBaseConv] = useState(2.0); // 2% Lead-Rate as default // B2B Deloitte metric: 0.1s improvement = 8.4% conversion relative lift // We cap the improvement to realistic bounds (e.g. optimizing to 1.5s) @@ -32,55 +32,67 @@ export function PerformanceROICalculator({ className = '' }: { className?: strin
- +
-

Performance ROI für den Mittelstand

+

B2B Lead-Potential Kalkulator

- Simulieren Sie, wie sich die Ladezeit auf die Jahresumsätze Ihres Betriebs (Handwerk, Kanzlei, B2B-Service) auswirkt. Basierend auf der Branchen-Erkenntnis: Schon 0.1s schnellere Ladezeit hebt die Kontakt-Wandlungsrate um bis zu 8,4%. + Für B2B-Unternehmen: Berechnen Sie, wie viele zusätzliche qualifizierte Anfragen (Leads) und Projekt-Umsätze Ihnen durch eine langsame Website entgehen.

{/* Inputs */} -
+
- + {loadTime.toFixed(1)}s
setLoadTime(Number(e.target.value))} - className="w-full accent-slate-900" + className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900" />
- + {traffic.toLocaleString('de-DE')}
setTraffic(Number(e.target.value))} - className="w-full accent-slate-900" + className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900" />
- + + {baseConv.toFixed(1)}% +
+ setBaseConv(Number(e.target.value))} + className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900" + /> +
+ +
+
+ {formatCurrency(aov)}
setAov(Number(e.target.value))} - className="w-full accent-slate-900" + className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900" />
@@ -89,29 +101,35 @@ export function PerformanceROICalculator({ className = '' }: { className?: strin
-
Status Quo Conv.
-
{baseConv.toFixed(2)}%
-
{formatCurrency(currentRevenue * 12)} / Jahr
+
Status Quo
+
{(traffic * (baseConv / 100)).toFixed(1)} Leads
+
pro Monat
-
Ziel Konversion (1.5s)
+
Ziel-Impact (1.5s)
- {newConv.toFixed(2)}% - {relativeLiftPercentage > 0 && +{relativeLiftPercentage.toFixed(1)}%} + {(traffic * (newConv / 100)).toFixed(1)} + {relativeLiftPercentage > 0 && +{relativeLiftPercentage.toFixed(0)}%}
-
{formatCurrency(newRevenue * 12)} / Jahr
+
Leads pro Monat
-
-
-
+
+
+
-
Potenzieller Mehrumsatz / Jahr
-
Durch {loadTime.toFixed(1)}s Ladezeit vs. Industrie-Standard (1.5s) entgangen.
+
Zusätzliches Projekt-Volumen / Jahr
+
Verlorenes Potenzial durch {loadTime.toFixed(1)}s Ladezeit gegenüber einem schnellen Mintel-System.
-
- {additionalAnnualRevenue > 0 ? '+' : ''}{formatCurrency(additionalAnnualRevenue)} +
+
+ {additionalAnnualRevenue > 0 ? '+' : ''}{formatCurrency(additionalAnnualRevenue)} +
+
+
Extra Leads / Jahr
+
+{Math.round((traffic * (newConv / 100) - (traffic * (baseConv / 100))) * 12)}
+
diff --git a/apps/web/video/compositions/ButtonShowcase.tsx b/apps/web/video/compositions/ButtonShowcase.tsx index 0ff0406..81196ac 100644 --- a/apps/web/video/compositions/ButtonShowcase.tsx +++ b/apps/web/video/compositions/ButtonShowcase.tsx @@ -12,7 +12,7 @@ import { MouseCursor } from "../components/MouseCursor"; import { Button } from "@/src/components/Button"; import { Loader2, Check, ShieldCheck } from "lucide-react"; -/* eslint-disable no-unused-vars */ + // Import logo using the alias setup in remotion.config.ts import IconBlack from "@/src/assets/logo/Icon Black Transparent.svg"; diff --git a/apps/web/video/compositions/ContactFormShowcase.tsx b/apps/web/video/compositions/ContactFormShowcase.tsx index ad3aac7..972dbbd 100644 --- a/apps/web/video/compositions/ContactFormShowcase.tsx +++ b/apps/web/video/compositions/ContactFormShowcase.tsx @@ -10,7 +10,7 @@ import { Img, } from "remotion"; -/* eslint-disable no-unused-vars */ + import { MouseCursor } from "../components/MouseCursor"; import { ContactForm } from "@/src/components/ContactForm"; import { BackgroundGrid } from "@/src/components/Layout"; diff --git a/apps/web/video/mocks/framer-motion.tsx b/apps/web/video/mocks/framer-motion.tsx index fab04f9..f53743d 100644 --- a/apps/web/video/mocks/framer-motion.tsx +++ b/apps/web/video/mocks/framer-motion.tsx @@ -1,4 +1,4 @@ -/* eslint-disable no-unused-vars */ + import React from "react"; // ULTRA-CRITICAL ANIMATION KILLER