save

component-library/src/components/gebos/site-assets.tsx

@@ -1,5 +1,9 @@
 import { cn } from "@/lib/utils"
 
+import barChartManyFewAvif from "@/assets/gebos/bar-chart-many-few.avif"
+import barChartManyFewWebp from "@/assets/gebos/bar-chart-many-few.webp"
+import barChartManyFullAvif from "@/assets/gebos/bar-chart-many-full.avif"
+import barChartManyFullWebp from "@/assets/gebos/bar-chart-many-full.webp"
 import barChartAvif from "@/assets/gebos/bar-chart.avif"
 import barChartWebp from "@/assets/gebos/bar-chart.webp"
 import brandCubeAvif from "@/assets/gebos/brand-cube-render.avif"
@@ -307,6 +311,18 @@ const renders = {
     alt: "",
     matte: "alpha",
   },
+  barChartManyFew: {
+    avif: barChartManyFewAvif,
+    webp: barChartManyFewWebp,
+    alt: "",
+    matte: "alpha",
+  },
+  barChartManyFull: {
+    avif: barChartManyFullAvif,
+    webp: barChartManyFullWebp,
+    alt: "",
+    matte: "alpha",
+  },
   drillTool: {
     avif: drillToolAvif,
     webp: drillToolWebp,

component-library/src/pages/home.tsx

@@ -271,7 +271,7 @@ const audiences = [
 
 const scaleFlows = [
   {
-    vector: vectors.tealBars,
+    render: renders.barChartManyFew,
     label: "1 Gebäude",
     sub: "Ein Eigentümer kann ein Mehrfamilienhaus konfigurieren.",
     steps: [
@@ -281,7 +281,7 @@ const scaleFlows = [
     ],
   },
   {
-    vector: vectors.consumptionRing,
+    render: renders.barChartManyFull,
     label: "50 Gebäude",
     sub: "Eine Hausverwaltung kann denselben Prozess auf viele Gebäude übertragen.",
     steps: [
@@ -440,11 +440,11 @@ export default function HomePage() {
               {scaleFlows.map((flow) => (
                 <div key={flow.label} className="flex flex-col gap-5 p-6 sm:p-8">
                   <div className="flex items-center gap-4">
-                    <img
-                      src={flow.vector}
+                    <AssetRender
+                      render={flow.render}
                       alt=""
-                      className="size-14"
-                      loading="lazy"
+                      className="flex size-14 shrink-0 items-center justify-center"
+                      imgClassName="w-14"
                     />
                     <div>
                       <h3 className="text-xl font-extrabold tracking-tight text-navy">