add

component-library/src/pages/configurator.tsx

@@ -17,6 +17,7 @@ import { Container, Section, SectionHeading } from "@/components/gebos/section"
 import { PageBreadcrumb } from "@/components/gebos/page-breadcrumb"
 import {
   AssetRender,
+  GlassNumber,
   renders,
   type RenderAsset,
 } from "@/components/gebos/site-assets"
@@ -154,15 +155,9 @@ function readPreset(params: URLSearchParams): Preset {
   }
 }
 
-/** glossy numerals for the three configurator steps */
+/** the three configurator steps */
 type Step = 1 | 2 | 3
 
-const STEP_BADGES: Record<Step, RenderAsset> = {
-  1: renders.glassBadge1,
-  2: renders.glassBadge2,
-  3: renders.glassBadge3,
-}
-
 function StepCard({
   step,
   title,
@@ -175,12 +170,7 @@ function StepCard({
   return (
     <Card className="gap-0 p-6 sm:p-7">
       <div className="flex items-center gap-3">
-        <AssetRender
-          render={STEP_BADGES[step]}
-          className="flex size-11 shrink-0 items-center justify-center"
-          imgClassName="w-11"
-          loading="eager"
-        />
+        <GlassNumber n={step} className="size-11" loading="eager" />
         <h3 className="text-lg font-extrabold tracking-tight text-navy">
           <span className="sr-only">Schritt {step}: </span>
           {title}