save

gebos-site-assets/ASSET-MAP.md

@@ -0,0 +1,27 @@
+# GebOS visual asset map
+
+All page-specific folders contain an assembled preview and a short `assets.md`. Reusable masters live in `shared/` and should be referenced from there in production.
+
+| Page | Page-specific composition | Shared assets used |
+| --- | --- | --- |
+| 01 Homepage | `pages/01-homepage/hero.png` | Building, smoke alarm, teal bars, UVI badge, consumption ring, five feature icons |
+| 02 So funktioniert GebOS | `pages/02-process/steps.png` | UVI badge, building, glass cubes, package box, gateway, heat meter, wireless orb |
+| 03 Unsere Lösungen | `pages/03-solutions/cards.png` | Gateway, glass cubes, consumption ring, smoke alarm, euro orb |
+| 04 Für wen ist GebOS? | `pages/04-for-whom/hero.png` | Building, teal bars, consumption ring |
+| 05 Hauseigentümer | `pages/05-homeowners/hero.png` | Building, smoke alarm, check orb |
+| 06 Hausverwaltungen | `pages/06-property-management/hero.png` | Building, teal bars, consumption ring |
+| 07 Messdienstleister | `pages/07-metering-services/hero.png` | Laptop/dashboard, glass cubes, cloud/support |
+| 08 Installateure & Heizungsbauer | `pages/08-installers/hero.png` | Heat meter, gateway, glass cubes, check orb |
+| 09 Konfigurator | `pages/09-configurator/hero.png` | Euro orb, consumption ring |
+
+## Shared raster masters
+
+The building, smoke alarm, gateway, heat meter, and laptop use a clean pure-white matte. They are intended for the white or near-white backgrounds used throughout the concepts. WebP and AVIF derivatives are in `shared/raster/web/`.
+
+## Shared vectors
+
+The ring, bars, cubes, UVI badge, check orb, euro orb, cloud/support, package, and wireless badge are transparent editable SVGs. Their gradients use the same GebOS teal family and can be adjusted without rerendering.
+
+## Page previews
+
+Page composition PNGs are positioning references and quick drop-in images. For a responsive production website, compose the shared objects independently in HTML/CSS, using the page preview as the layout guide.

gebos-site-assets/GENERATION-NOTES.md

@@ -0,0 +1,21 @@
+# Raster generation notes
+
+The raster masters were generated with the built-in image workflow from the supplied GebOS concept board.
+
+## Shared prompt specification
+
+- Use case: product mockup / reusable website asset.
+- Style: premium high-key 3D product visualization matching the GebOS concept board.
+- Lighting: soft studio daylight from the upper left, cool-grey ambient shading and restrained reflections.
+- Background: uniform pure white.
+- Constraints: one isolated subject, generous padding, no brand text, no watermark, no unrelated floating elements.
+
+## Per-asset subjects
+
+- Building: modern white apartment building with glass balconies and sparse greenery, elevated three-quarter view.
+- Smoke alarm: white circular detector with perimeter vents, central test button and tiny teal status LED.
+- Gateway: softly rounded white square IoT enclosure with one teal status LED.
+- Heat meter: white cylindrical calculator head on a compact brass threaded flow body.
+- Laptop/dashboard: silver laptop with a navy/teal metering dashboard containing cards, bar chart and donut chart.
+
+The vectors were authored directly as SVG rather than generated as raster images.

gebos-site-assets/README.md

@@ -0,0 +1,34 @@
+# GebOS website visual assets
+
+This package contains the complete first-pass visual kit for all nine concept pages.
+
+Start with:
+
+1. `previews/all-pages-contact-sheet.png` for the overall visual inventory.
+2. `ASSET-MAP.md` for page-to-asset mappings.
+3. `pages/<page>/assets.md` for page-specific usage notes.
+4. `shared/` for reusable production masters.
+
+## Folder structure
+
+```text
+shared/
+  raster/source/    lossless PNG masters
+  raster/web/       WebP and AVIF derivatives
+  vector/           editable transparent SVG plus 2× PNG previews
+  icons/            small homepage feature icons
+pages/
+  01-homepage/ ... 09-configurator/
+previews/
+  all-pages-contact-sheet.png
+```
+
+Each page composition is supplied as PNG and WebP. These compositions are convenient drop-ins and positioning references. For the responsive production site, compose the shared assets independently with CSS.
+
+## Important raster note
+
+The generated building and device renders use a pure-white matte. This is intentional for the white visual environment in the supplied concepts and avoids low-quality artificial alpha edges around white and translucent surfaces. The SVG assets have genuine transparency.
+
+## Rebuilding previews
+
+`build-previews.sh` deterministically rebuilds the page compositions from the shared assets using ImageMagick.

gebos-site-assets/build-previews.sh

@@ -0,0 +1,82 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+ROOT="$(cd "$(dirname "$0")" && pwd)"
+R="$ROOT/shared/raster/source"
+V="$ROOT/shared/vector"
+
+convert -size 1400x900 xc:white \
+  \( "$V/teal-bars@2x.png" -resize 390x330 \) -geometry +965+175 -composite \
+  \( "$R/building-master.png" -resize 900x680 \) -geometry +330+95 -compose multiply -composite \
+  \( "$R/smoke-alarm-master.png" -resize 190x190 \) -geometry +265+105 -compose multiply -composite \
+  \( "$V/uvi-badge@2x.png" -resize 145x175 \) -geometry +345+505 -compose over -composite \
+  \( "$V/consumption-ring@2x.png" -resize 430x270 \) -geometry +930+610 -compose over -composite \
+  "$ROOT/pages/01-homepage/hero.png"
+
+convert -size 1800x520 xc:white \
+  -stroke '#dce9eb' -strokewidth 3 -fill '#fbfdfd' \
+  -draw 'roundrectangle 30,60 330,470 24,24 roundrectangle 390,60 690,470 24,24 roundrectangle 750,60 1050,470 24,24 roundrectangle 1110,60 1410,470 24,24 roundrectangle 1470,60 1770,470 24,24' \
+  \( "$V/uvi-badge@2x.png" -resize 180x225 \) -geometry +90+155 -compose over -composite \
+  \( "$R/building-master.png" -resize 260x200 \) -geometry +402+180 -compose multiply -composite \
+  \( "$V/glass-cubes@2x.png" -resize 120x100 \) -geometry +555+315 -compose over -composite \
+  \( "$V/package-box@2x.png" -resize 205x190 \) -geometry +780+175 -compose over -composite \
+  \( "$R/gateway-master.png" -resize 100x100 \) -geometry +925+310 -compose multiply -composite \
+  \( "$R/heat-meter-master.png" -resize 170x170 \) -geometry +1125+210 -compose multiply -composite \
+  \( "$R/gateway-master.png" -resize 125x125 \) -geometry +1260+260 -compose multiply -composite \
+  \( "$V/wireless-orb@2x.png" -resize 165x165 \) -geometry +1510+160 -compose over -composite \
+  \( "$R/smoke-alarm-master.png" -resize 145x145 \) -geometry +1600+285 -compose multiply -composite \
+  "$ROOT/pages/02-process/steps.png"
+
+convert -size 1500x560 xc:white \
+  -stroke '#e0ebed' -strokewidth 3 -fill '#fbfdfd' \
+  -draw 'roundrectangle 30,40 470,520 28,28 roundrectangle 530,40 970,520 28,28 roundrectangle 1030,40 1470,520 28,28' \
+  \( "$R/gateway-master.png" -resize 270x270 \) -geometry +70+130 -compose multiply -composite \
+  \( "$V/glass-cubes@2x.png" -resize 220x185 \) -geometry +245+235 -compose over -composite \
+  \( "$V/consumption-ring@2x.png" -resize 400x255 \) -geometry +550+180 -compose over -composite \
+  \( "$R/smoke-alarm-master.png" -resize 310x310 \) -geometry +1095+130 -compose multiply -composite \
+  "$ROOT/pages/03-solutions/cards.png"
+
+convert -size 1400x850 xc:white \
+  \( "$V/teal-bars@2x.png" -resize 440x370 \) -geometry +930+150 -compose over -composite \
+  \( "$R/building-master.png" -resize 900x680 \) -geometry +300+75 -compose multiply -composite \
+  \( "$V/consumption-ring@2x.png" -resize 450x285 \) -geometry +875+570 -compose over -composite \
+  "$ROOT/pages/04-for-whom/hero.png"
+
+convert -size 1400x850 xc:white \
+  \( "$R/building-master.png" -resize 900x680 \) -geometry +420+75 -compose multiply -composite \
+  \( "$R/smoke-alarm-master.png" -resize 235x235 \) -geometry +245+125 -compose multiply -composite \
+  \( "$V/check-orb@2x.png" -resize 190x190 \) -geometry +360+430 -compose over -composite \
+  "$ROOT/pages/05-homeowners/hero.png"
+
+convert -size 1400x850 xc:white \
+  \( "$V/teal-bars@2x.png" -resize 440x370 \) -geometry +930+145 -compose over -composite \
+  \( "$R/building-master.png" -resize 900x680 \) -geometry +350+70 -compose multiply -composite \
+  \( "$V/consumption-ring@2x.png" -resize 420x265 \) -geometry +240+575 -compose over -composite \
+  "$ROOT/pages/06-property-management/hero.png"
+
+convert -size 1400x850 xc:white \
+  \( "$V/glass-cubes@2x.png" -resize 330x275 \) -geometry +160+495 -compose over -composite \
+  \( "$R/laptop-dashboard-master.png" -resize 900x600 \) -geometry +280+145 -compose multiply -composite \
+  \( "$V/cloud-support@2x.png" -resize 360x290 \) -geometry +990+50 -compose over -composite \
+  \( "$V/glass-cubes@2x.png" -resize 260x215 \) -geometry +1040+545 -compose over -composite \
+  "$ROOT/pages/07-metering-services/hero.png"
+
+convert -size 1400x850 xc:white \
+  \( "$R/heat-meter-master.png" -resize 430x430 \) -geometry +190+220 -compose multiply -composite \
+  \( "$R/gateway-master.png" -resize 470x470 \) -geometry +580+170 -compose multiply -composite \
+  \( "$V/glass-cubes@2x.png" -resize 350x290 \) -geometry +900+410 -compose over -composite \
+  \( "$V/check-orb@2x.png" -resize 190x190 \) -geometry +950+105 -compose over -composite \
+  "$ROOT/pages/08-installers/hero.png"
+
+convert -size 1400x850 xc:white \
+  \( "$V/euro-orb@2x.png" -resize 470x470 \) -geometry +250+180 -compose over -composite \
+  \( "$V/consumption-ring@2x.png" -resize 550x350 \) -geometry +700+335 -compose over -composite \
+  "$ROOT/pages/09-configurator/hero.png"
+
+montage \
+  "$ROOT/pages/01-homepage/hero.png" "$ROOT/pages/02-process/steps.png" "$ROOT/pages/03-solutions/cards.png" \
+  "$ROOT/pages/04-for-whom/hero.png" "$ROOT/pages/05-homeowners/hero.png" "$ROOT/pages/06-property-management/hero.png" \
+  "$ROOT/pages/07-metering-services/hero.png" "$ROOT/pages/08-installers/hero.png" "$ROOT/pages/09-configurator/hero.png" \
+  -thumbnail 560x340 -tile 3x3 -geometry +24+24 -background '#eef4f5' "$ROOT/previews/all-pages-contact-sheet.png"
+
+for img in "$ROOT"/pages/*/*.png; do convert "$img" -strip -quality 88 "${img%.png}.webp"; done

gebos-site-assets/pages/01-homepage/assets.md

@@ -0,0 +1,7 @@
+# Homepage
+
+- `hero.png`: ready composition.
+- Shared: `building`, `smoke-alarm`, `teal-bars`, `uvi-badge`, `consumption-ring`.
+- Lower feature strip: all SVGs in `shared/icons/`.
+
+This is the same visual family as the previously delivered first-run kit.

gebos-site-assets/pages/02-process/assets.md

@@ -0,0 +1,8 @@
+# So funktioniert GebOS
+
+- `steps.png`: five-step visual strip.
+- Step 1: `uvi-badge.svg` — building/data capture.
+- Step 2: `building` + `glass-cubes.svg` — determine equipment requirement.
+- Step 3: `package-box.svg` + `gateway` — preconfigured delivery.
+- Step 4: `gateway` + `heat-meter` — installation.
+- Step 5: `wireless-orb.svg` + `smoke-alarm` — automatic operation.

gebos-site-assets/pages/03-solutions/assets.md

@@ -0,0 +1,7 @@
+# Unsere Lösungen
+
+- `cards.png`: three solution illustrations.
+- UVI: `gateway` + `glass-cubes.svg`.
+- Heizkostenabrechnung: `consumption-ring.svg`.
+- Rauchwarnmelder: `smoke-alarm`.
+- CTA price visual: `euro-orb.svg`.

gebos-site-assets/pages/04-for-whom/assets.md

@@ -0,0 +1,5 @@
+# Für wen ist GebOS?
+
+- `hero.png`: building portfolio composition.
+- Shared: `building`, `teal-bars.svg`, `consumption-ring.svg`.
+- Reuse the audience/navigation icons from the site UI; they are not baked into the hero.

gebos-site-assets/pages/05-homeowners/assets.md

@@ -0,0 +1,5 @@
+# Für Hauseigentümer
+
+- `hero.png`: homeowner hero composition.
+- Shared: `building`, `smoke-alarm`, `check-orb.svg`.
+- The detached check badge can be positioned or animated independently.

gebos-site-assets/pages/06-property-management/assets.md

@@ -0,0 +1,5 @@
+# Für Hausverwaltungen
+
+- `hero.png`: portfolio/rollout hero composition.
+- Shared: `building`, `teal-bars.svg`, `consumption-ring.svg`.
+- This deliberately reuses the same canonical building as the homepage and audience selector.

gebos-site-assets/pages/07-metering-services/assets.md

@@ -0,0 +1,5 @@
+# Für Messdienstleister
+
+- `hero.png`: platform hero composition.
+- Shared: `laptop-dashboard`, `glass-cubes.svg`, `cloud-support.svg`.
+- The screen is baked into the laptop master for this first run. Replace it later with a real product screenshot if needed.

gebos-site-assets/pages/08-installers/assets.md

@@ -0,0 +1,5 @@
+# Für Installateure & Heizungsbauer
+
+- `hero.png`: installer product composition.
+- Shared: `heat-meter`, `gateway`, `glass-cubes.svg`, `check-orb.svg`.
+- Both device renders are independent so their spacing can adapt at smaller breakpoints.

gebos-site-assets/pages/09-configurator/assets.md

@@ -0,0 +1,5 @@
+# Konfigurator
+
+- `hero.png`: price/configuration accent composition.
+- Shared: `euro-orb.svg`, `consumption-ring.svg`.
+- Both are true transparent SVG and suitable for subtle CSS motion.

gebos-site-assets/shared/icons/icon-billing.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><circle cx="48" cy="48" r="42" fill="#f2f8f9"/><path d="M30 23h28l10 10v38H30Z" fill="none" stroke="#008e96" stroke-width="4" stroke-linejoin="round"/><path d="M58 23v12h12M39 44h19M39 53h13" fill="none" stroke="#008e96" stroke-width="4" stroke-linecap="round"/><circle cx="61" cy="62" r="12" fill="#fff" stroke="#008e96" stroke-width="4"/><path d="m56 62 4 4 7-9" fill="none" stroke="#008e96" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

gebos-site-assets/shared/icons/icon-portal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><circle cx="48" cy="48" r="42" fill="#f2f8f9"/><rect x="22" y="26" width="52" height="38" rx="6" fill="none" stroke="#008e96" stroke-width="4"/><path d="M38 72h20M48 64v8M31 52l8-9 7 6 10-13 9 8" fill="none" stroke="#008e96" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

gebos-site-assets/shared/icons/icon-radio.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><circle cx="48" cy="48" r="42" fill="#f2f8f9"/><rect x="25" y="24" width="34" height="49" rx="8" fill="none" stroke="#008e96" stroke-width="4"/><circle cx="42" cy="61" r="4" fill="#008e96"/><path d="M65 35c8 7 8 19 0 26M72 28c13 12 13 28 0 40" fill="none" stroke="#008e96" stroke-width="4" stroke-linecap="round"/></svg>

gebos-site-assets/shared/icons/icon-smoke-alarm.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><circle cx="48" cy="48" r="42" fill="#f2f8f9"/><path d="M25 46c0-15 10-25 23-25s23 10 23 25c0 17-11 29-23 29S25 63 25 46Z" fill="none" stroke="#008e96" stroke-width="4"/><circle cx="48" cy="48" r="8" fill="none" stroke="#008e96" stroke-width="4"/><path d="M34 32 29 27M62 32l5-5M48 26v-7" stroke="#008e96" stroke-width="4" stroke-linecap="round"/></svg>

gebos-site-assets/shared/icons/icon-uvi.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><circle cx="48" cy="48" r="42" fill="#f2f8f9"/><path d="M31 33 48 23l17 10v28L48 71 31 61Z" fill="none" stroke="#008e96" stroke-width="4" stroke-linejoin="round"/><path d="M42 53V39h12v14M39 58h18" fill="none" stroke="#008e96" stroke-width="4" stroke-linecap="round"/></svg>

gebos-site-assets/shared/vector/check-orb.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 520" role="img" aria-label="Teal approval check badge">
+ <defs><radialGradient id="o" cx="32%" cy="24%"><stop stop-color="#36e4d4"/><stop offset=".65" stop-color="#009b9a"/><stop offset="1" stop-color="#006175"/></radialGradient><filter id="sh" x="-40%" y="-40%" width="180%" height="190%"><feDropShadow dx="0" dy="22" stdDeviation="22" flood-color="#005a6c" flood-opacity=".24"/></filter></defs>
+ <ellipse cx="260" cy="423" rx="150" ry="30" fill="#007284" opacity=".15" filter="url(#sh)"/>
+ <circle cx="260" cy="238" r="162" fill="url(#o)" stroke="#9afff2" stroke-opacity=".55" stroke-width="5" filter="url(#sh)"/>
+ <circle cx="260" cy="238" r="126" fill="none" stroke="#fff" stroke-opacity=".16" stroke-width="4"/>
+ <path d="m172 238 56 58 122-132" fill="none" stroke="#fff" stroke-width="34" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

gebos-site-assets/shared/vector/cloud-support.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 620" role="img" aria-label="Cloud platform and support headphones">
+ <defs><linearGradient id="c" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#fff"/><stop offset="1" stop-color="#d9e8eb"/></linearGradient><linearGradient id="t" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#37e1d2"/><stop offset="1" stop-color="#00798b"/></linearGradient><filter id="sh" x="-40%" y="-40%" width="190%" height="200%"><feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#075465" flood-opacity=".18"/></filter></defs>
+ <g filter="url(#sh)"><path d="M117 290c0-62 49-112 110-115 27-66 88-105 157-105 90 0 164 68 174 155 58 2 104 48 104 106 0 59-48 107-107 107H219c-57 0-102-46-102-103 0-16 3-31 10-45Z" fill="url(#c)" stroke="#e3eef0" stroke-width="5"/><path d="m356 331 66-66m-10 0h10v10" fill="none" stroke="url(#t)" stroke-width="22" stroke-linecap="round" stroke-linejoin="round"/></g>
+ <g transform="translate(451 304)" filter="url(#sh)" fill="none" stroke="url(#t)" stroke-width="28" stroke-linecap="round"><path d="M20 112v-25c0-79 59-137 132-137s132 58 132 137v25"/><path d="M20 108v76c0 25 20 45 45 45h24v-121H65c-25 0-45 20-45 45ZM284 108v76c0 25-20 45-45 45h-24v-121h24c25 0 45 20 45 45Z" fill="#e8fbf8" stroke-width="18"/><path d="M216 229c-8 32-33 45-73 45" stroke-width="14"/></g>
+</svg>

gebos-site-assets/shared/vector/consumption-ring.svg

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 560" role="img" aria-labelledby="title desc">
+  <title id="title">GebOS segmented consumption ring</title>
+  <desc id="desc">A substantial eight-part white, teal and translucent cyan ring in three-quarter perspective.</desc>
+  <defs>
+    <linearGradient id="whiteTop" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#ffffff"/><stop offset=".58" stop-color="#f1f5f6"/><stop offset="1" stop-color="#d9e2e5"/></linearGradient>
+    <linearGradient id="whiteSide" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#d8e1e4"/><stop offset="1" stop-color="#aebdc2"/></linearGradient>
+    <linearGradient id="aquaTop" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#78f3e6"/><stop offset=".52" stop-color="#23cfc4"/><stop offset="1" stop-color="#00a5a6"/></linearGradient>
+    <linearGradient id="aquaGlass" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#b9fff7" stop-opacity=".76"/><stop offset=".52" stop-color="#41dcd1" stop-opacity=".68"/><stop offset="1" stop-color="#059ca1" stop-opacity=".78"/></linearGradient>
+    <linearGradient id="tealTop" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#18c8c0"/><stop offset=".52" stop-color="#008f96"/><stop offset="1" stop-color="#006579"/></linearGradient>
+    <linearGradient id="deepTop" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#009198"/><stop offset=".5" stop-color="#006d7d"/><stop offset="1" stop-color="#00485e"/></linearGradient>
+    <linearGradient id="aquaSide" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#00a3a4"/><stop offset="1" stop-color="#006774"/></linearGradient>
+    <linearGradient id="tealSide" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#007681"/><stop offset="1" stop-color="#003d52"/></linearGradient>
+    <filter id="shadow" x="-35%" y="-110%" width="170%" height="320%"><feGaussianBlur stdDeviation="24"/></filter>
+    <filter id="lift" x="-25%" y="-60%" width="150%" height="230%"><feDropShadow dx="0" dy="16" stdDeviation="12" flood-color="#073f4f" flood-opacity=".2"/></filter>
+  </defs>
+  <ellipse cx="450" cy="430" rx="285" ry="55" fill="#0b4856" opacity=".16" filter="url(#shadow)"/>
+  <g transform="translate(450 250) scale(1 .58) translate(0 58) rotate(-18)" fill="none" stroke-width="132" stroke-linecap="butt">
+    <circle r="216" stroke="url(#whiteSide)" stroke-dasharray="168 1189" stroke-dashoffset="0"/>
+    <circle r="216" stroke="url(#whiteSide)" stroke-dasharray="168 1189" stroke-dashoffset="-170"/>
+    <circle r="216" stroke="url(#tealSide)" stroke-dasharray="168 1189" stroke-dashoffset="-340"/>
+    <circle r="216" stroke="url(#aquaSide)" stroke-dasharray="168 1189" stroke-dashoffset="-510"/>
+    <circle r="216" stroke="url(#aquaSide)" stroke-dasharray="168 1189" stroke-dashoffset="-680"/>
+    <circle r="216" stroke="url(#tealSide)" stroke-dasharray="168 1189" stroke-dashoffset="-850"/>
+    <circle r="216" stroke="url(#tealSide)" stroke-dasharray="168 1189" stroke-dashoffset="-1020"/>
+    <circle r="216" stroke="url(#whiteSide)" stroke-dasharray="168 1189" stroke-dashoffset="-1190"/>
+  </g>
+  <g transform="translate(450 250) scale(1 .58) rotate(-18)" fill="none" stroke-width="132" stroke-linecap="butt" filter="url(#lift)">
+    <circle r="216" stroke="url(#whiteTop)" stroke-dasharray="168 1189" stroke-dashoffset="0"/>
+    <circle r="216" stroke="url(#whiteTop)" stroke-dasharray="168 1189" stroke-dashoffset="-170"/>
+    <circle r="216" stroke="url(#deepTop)" stroke-dasharray="168 1189" stroke-dashoffset="-340"/>
+    <circle r="216" stroke="url(#aquaTop)" stroke-dasharray="168 1189" stroke-dashoffset="-510"/>
+    <circle r="216" stroke="url(#aquaGlass)" stroke-dasharray="168 1189" stroke-dashoffset="-680"/>
+    <circle r="216" stroke="url(#tealTop)" stroke-dasharray="168 1189" stroke-dashoffset="-850"/>
+    <circle r="216" stroke="url(#deepTop)" stroke-dasharray="168 1189" stroke-dashoffset="-1020"/>
+    <circle r="216" stroke="url(#whiteTop)" stroke-dasharray="168 1189" stroke-dashoffset="-1190"/>
+  </g>
+  <g transform="translate(450 250) scale(1 .58)" fill="none">
+    <ellipse rx="150" ry="150" stroke="#ffffff" stroke-opacity=".72" stroke-width="8"/>
+    <ellipse rx="283" ry="283" stroke="#dffffb" stroke-opacity=".34" stroke-width="6"/>
+  </g>
+</svg>

gebos-site-assets/shared/vector/euro-orb.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 620" role="img" aria-label="Glass euro price orb">
+ <defs>
+  <radialGradient id="g" cx="30%" cy="20%"><stop stop-color="#dffffb" stop-opacity=".78"/><stop offset=".45" stop-color="#4cded4" stop-opacity=".46"/><stop offset="1" stop-color="#007487" stop-opacity=".7"/></radialGradient>
+  <linearGradient id="r" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#8ffff2"/><stop offset=".5" stop-color="#00b4ad"/><stop offset="1" stop-color="#006276"/></linearGradient>
+  <filter id="gl" x="-50%" y="-50%" width="200%" height="220%"><feGaussianBlur stdDeviation="18" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
+  <filter id="sh" x="-50%" y="-50%" width="200%" height="220%"><feDropShadow dx="0" dy="24" stdDeviation="20" flood-color="#005b6b" flood-opacity=".28"/></filter>
+ </defs>
+ <ellipse cx="310" cy="500" rx="215" ry="66" fill="none" stroke="url(#r)" stroke-width="18" opacity=".8" filter="url(#gl)"/>
+ <ellipse cx="310" cy="500" rx="145" ry="38" fill="#35e1d3" opacity=".26" filter="url(#gl)"/>
+ <circle cx="310" cy="283" r="190" fill="url(#g)" stroke="#b9fff8" stroke-opacity=".78" stroke-width="5" filter="url(#sh)"/>
+ <circle cx="270" cy="216" r="80" fill="#fff" opacity=".15"/>
+ <text x="310" y="360" text-anchor="middle" font-family="Arial,sans-serif" font-weight="700" font-size="220" fill="#fff">€</text>
+</svg>

gebos-site-assets/shared/vector/glass-cubes.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 600" role="img" aria-label="Translucent teal data cubes">
+ <defs>
+  <linearGradient id="f" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#34e5d5" stop-opacity=".78"/><stop offset="1" stop-color="#008c99" stop-opacity=".62"/></linearGradient>
+  <linearGradient id="s" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#008b96" stop-opacity=".72"/><stop offset="1" stop-color="#005267" stop-opacity=".82"/></linearGradient>
+  <linearGradient id="t" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#b9fff7" stop-opacity=".82"/><stop offset="1" stop-color="#30ded1" stop-opacity=".6"/></linearGradient>
+  <filter id="sh" x="-40%" y="-40%" width="190%" height="200%"><feDropShadow dx="0" dy="18" stdDeviation="17" flood-color="#006b77" flood-opacity=".18"/></filter>
+ </defs>
+ <ellipse cx="360" cy="522" rx="270" ry="36" fill="#006678" opacity=".12" filter="url(#sh)"/>
+ <g filter="url(#sh)" stroke="#8afff2" stroke-opacity=".45" stroke-width="3">
+  <g transform="translate(75 235)"><path d="m0 60 90 26v104L0 164Z" fill="url(#f)"/><path d="m90 86 52-38v104l-52 38Z" fill="url(#s)"/><path d="M0 60 52 22l90 26-52 38Z" fill="url(#t)"/></g>
+  <g transform="translate(220 105)"><path d="m0 60 90 26v104L0 164Z" fill="url(#f)"/><path d="m90 86 52-38v104l-52 38Z" fill="url(#s)"/><path d="M0 60 52 22l90 26-52 38Z" fill="url(#t)"/></g>
+  <g transform="translate(220 315)"><path d="m0 60 90 26v104L0 164Z" fill="url(#f)"/><path d="m90 86 52-38v104l-52 38Z" fill="url(#s)"/><path d="M0 60 52 22l90 26-52 38Z" fill="url(#t)"/></g>
+  <g transform="translate(365 210)"><path d="m0 60 90 26v104L0 164Z" fill="url(#f)"/><path d="m90 86 52-38v104l-52 38Z" fill="url(#s)"/><path d="M0 60 52 22l90 26-52 38Z" fill="url(#t)"/></g>
+  <g transform="translate(510 315)"><path d="m0 60 90 26v104L0 164Z" fill="url(#f)"/><path d="m90 86 52-38v104l-52 38Z" fill="url(#s)"/><path d="M0 60 52 22l90 26-52 38Z" fill="url(#t)"/></g>
+ </g>
+</svg>

gebos-site-assets/shared/vector/package-box.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 560" role="img" aria-label="Preconfigured device package">
+ <defs><linearGradient id="f" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#fff"/><stop offset="1" stop-color="#dce8ea"/></linearGradient><linearGradient id="s" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#c8dadd"/><stop offset="1" stop-color="#9db4ba"/></linearGradient><linearGradient id="t" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#f7ffff"/><stop offset="1" stop-color="#dff4f2"/></linearGradient><filter id="sh" x="-40%" y="-40%" width="190%" height="200%"><feDropShadow dx="0" dy="20" stdDeviation="18" flood-color="#064d5b" flood-opacity=".18"/></filter></defs>
+ <ellipse cx="310" cy="492" rx="225" ry="35" fill="#006576" opacity=".12" filter="url(#sh)"/>
+ <g filter="url(#sh)" stroke="#b9cbcf" stroke-width="4" stroke-linejoin="round"><path d="m104 188 234 67v221l-234-68Z" fill="url(#f)"/><path d="m338 255 178-129v221L338 476Z" fill="url(#s)"/><path d="M104 188 282 59l234 67-178 129Z" fill="url(#t)"/><path d="m241 99 233 67-55 40-234-67Z" fill="#20cfc3" fill-opacity=".7" stroke="none"/></g>
+ <circle cx="221" cy="323" r="56" fill="#009b9a"/><path d="m192 323 20 21 40-46" fill="none" stroke="#fff" stroke-width="15" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

gebos-site-assets/shared/vector/teal-bars.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 640" role="img" aria-labelledby="title desc">
+  <title id="title">GebOS translucent data bars</title>
+  <desc id="desc">Five translucent teal isometric bars of increasing height.</desc>
+  <defs>
+    <linearGradient id="front" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#19e1d2" stop-opacity=".86"/><stop offset="1" stop-color="#008797" stop-opacity=".72"/></linearGradient>
+    <linearGradient id="side" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#00788b" stop-opacity=".74"/><stop offset="1" stop-color="#004c68" stop-opacity=".84"/></linearGradient>
+    <linearGradient id="top" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#9efff2" stop-opacity=".88"/><stop offset="1" stop-color="#2ce0d4" stop-opacity=".72"/></linearGradient>
+    <filter id="shadow" x="-30%" y="-30%" width="170%" height="180%"><feDropShadow dx="0" dy="18" stdDeviation="17" flood-color="#006875" flood-opacity=".18"/></filter>
+  </defs>
+  <ellipse cx="385" cy="572" rx="310" ry="38" fill="#007789" opacity=".13" filter="url(#shadow)"/>
+  <g filter="url(#shadow)" stroke="#75fff1" stroke-opacity=".34" stroke-width="2">
+    <g><path d="M75 425 159 449 159 551 75 527Z" fill="url(#front)"/><path d="m159 449 43-31v102l-43 31Z" fill="url(#side)"/><path d="m75 425 43-31 84 24-43 31Z" fill="url(#top)"/></g>
+    <g><path d="m195 352 84 24v175l-84-24Z" fill="url(#front)"/><path d="m279 376 43-31v175l-43 31Z" fill="url(#side)"/><path d="m195 352 43-31 84 24-43 31Z" fill="url(#top)"/></g>
+    <g><path d="m315 270 84 24v257l-84-24Z" fill="url(#front)"/><path d="m399 294 43-31v257l-43 31Z" fill="url(#side)"/><path d="m315 270 43-31 84 24-43 31Z" fill="url(#top)"/></g>
+    <g><path d="m435 176 84 24v351l-84-24Z" fill="url(#front)"/><path d="m519 200 43-31v351l-43 31Z" fill="url(#side)"/><path d="m435 176 43-31 84 24-43 31Z" fill="url(#top)"/></g>
+    <g><path d="m555 83 84 24v444l-84-24Z" fill="url(#front)"/><path d="m639 107 43-31v444l-43 31Z" fill="url(#side)"/><path d="m555 83 43-31 84 24-43 31Z" fill="url(#top)"/></g>
+  </g>
+</svg>

gebos-site-assets/shared/vector/uvi-badge.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 620" role="img" aria-labelledby="title desc">
+  <title id="title">GebOS UVI sensor badge</title>
+  <desc id="desc">A white sensor with a teal consumption display and wireless symbol.</desc>
+  <defs>
+    <linearGradient id="case" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#fff"/><stop offset="1" stop-color="#dce7e9"/></linearGradient>
+    <linearGradient id="screen" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#20d9c9"/><stop offset="1" stop-color="#007b8b"/></linearGradient>
+    <radialGradient id="orb"><stop stop-color="#22dacd"/><stop offset=".78" stop-color="#008796"/><stop offset="1" stop-color="#005568"/></radialGradient>
+    <filter id="s" x="-40%" y="-40%" width="180%" height="200%"><feDropShadow dx="0" dy="22" stdDeviation="20" flood-color="#064b58" flood-opacity=".2"/></filter>
+  </defs>
+  <ellipse cx="245" cy="548" rx="160" ry="30" fill="#005c6f" opacity=".13" filter="url(#s)"/>
+  <g filter="url(#s)">
+    <rect x="98" y="98" width="240" height="400" rx="54" fill="url(#case)" stroke="#d7e4e7" stroke-width="4"/>
+    <rect x="135" y="170" width="166" height="192" rx="34" fill="url(#screen)"/>
+    <path d="M180 273c16-31 31 31 47 0s31 31 47 0" fill="none" stroke="#fff" stroke-width="15" stroke-linecap="round"/>
+    <circle cx="218" cy="423" r="12" fill="#00b5aa"/>
+  </g>
+  <g transform="translate(320 320)" filter="url(#s)">
+    <circle r="108" fill="url(#orb)" stroke="#77fff2" stroke-opacity=".55" stroke-width="3"/>
+    <circle r="72" fill="none" stroke="#fff" stroke-opacity=".17" stroke-width="3"/>
+    <path d="M-15 35V-35M8-52c34 25 34 79 0 104M37-75c58 43 58 107 0 150M-38-24c-14 14-14 34 0 48" fill="none" stroke="#fff" stroke-width="14" stroke-linecap="round"/>
+  </g>
+</svg>

gebos-site-assets/shared/vector/wireless-orb.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 520" role="img" aria-label="Wireless operation badge">
+ <defs><radialGradient id="o" cx="30%" cy="20%"><stop stop-color="#37e7d7"/><stop offset=".65" stop-color="#009796"/><stop offset="1" stop-color="#005d72"/></radialGradient><filter id="sh" x="-40%" y="-40%" width="180%" height="190%"><feDropShadow dx="0" dy="22" stdDeviation="22" flood-color="#005a6c" flood-opacity=".24"/></filter></defs>
+ <ellipse cx="260" cy="423" rx="150" ry="30" fill="#007284" opacity=".15" filter="url(#sh)"/><circle cx="260" cy="238" r="162" fill="url(#o)" stroke="#9afff2" stroke-opacity=".55" stroke-width="5" filter="url(#sh)"/>
+ <circle cx="260" cy="277" r="18" fill="#fff"/><path d="M211 231c27-27 71-27 98 0M178 198c46-46 118-46 164 0M147 166c63-63 163-63 226 0" fill="none" stroke="#fff" stroke-width="20" stroke-linecap="round"/>
+</svg>