update deploy script

.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

.gitea/workflows/deploy.yml

@@ -3,7 +3,10 @@ name: Deploy Static Site
 on:
   push:
     branches:
-      - main
+      - master
+    paths:
+      - "component-library/**"
+      - ".gitea/workflows/deploy.yml"
 
 jobs:
   deploy:
@@ -15,34 +18,38 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: npm
+          cache-dependency-path: component-library/package-lock.json
 
       - name: Install dependencies
+        working-directory: component-library
         run: npm ci
 
       - name: Build static site
+        working-directory: component-library
         run: npm run build
 
       - name: Setup SSH key
         run: |
           mkdir -p ~/.ssh
+          chmod 700 ~/.ssh
           echo "${{ secrets.DEPLOY_SSH_KEY }}" > ~/.ssh/id_ed25519
           chmod 600 ~/.ssh/id_ed25519
 
       - name: Deploy static files to server
         env:
           DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
-          REMOTE_DIR: /home/deploy/projects/ge-bos/static
+          REMOTE_DIR: /home/deploy/projects/solenos/static
         run: |
           SSH="ssh -i ~/.ssh/id_ed25519 -o StrictHostKeyChecking=accept-new"
           # Recreate the target dir so removed files don't linger (rsync --delete equivalent)
           $SSH deploy@"$DEPLOY_HOST" "rm -rf '$REMOTE_DIR' && mkdir -p '$REMOTE_DIR'"
           # Stream the build output over ssh and extract it on the server
-          tar -czf - -C out . | $SSH deploy@"$DEPLOY_HOST" "tar -xzf - -C '$REMOTE_DIR'"
+          tar -czf - -C component-library/dist . | $SSH deploy@"$DEPLOY_HOST" "tar -xzf - -C '$REMOTE_DIR'"
 
       - name: Run deployment script
         run: |
           ssh -i ~/.ssh/id_ed25519 -o StrictHostKeyChecking=accept-new \
             deploy@${{ secrets.DEPLOY_HOST }} \
-            "cd /home/deploy/projects/ge-bos && ./deploy.sh"
+            "cd /home/deploy/projects/solenos && ./deploy.sh"

.gitignore

@@ -1,42 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env
-.env*.local
-
-# vercel
-.vercel
-
-# editors / IDEs
-.idea/
-.vscode/
-*.swp
-*.swo
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts

CHANGELOG.md

@@ -1,122 +0,0 @@
-# Changelog
-
-## 2024-06-21
-
-- Bump Headless UI dependency to v2.1
-- Replaced `PopoverOverlay` with `PopoverBackdrop`
-- Update to new data-attribute-based transition API
-
-## 2024-06-18
-
-- Update `prettier` and `prettier-plugin-tailwindcss` dependencies
-
-## 2024-05-31
-
-- Fix `npm audit` warnings
-
-## 2024-05-07
-
-- Bump Headless UI dependency to v2.0
-
-## 2024-01-17
-
-- Fix `sharp` dependency issues ([#1549](https://github.com/tailwindlabs/tailwindui-issues/issues/1549))
-
-## 2024-01-16
-
-- Replace Twitter with X
-
-## 2024-01-10
-
-- Update Tailwind CSS, Next.js, Prettier, TypeScript, ESLint, and other dependencies
-- Fix indentation in `Button` component
-
-## 2023-12-07
-
-- Fix auth/404 pages being cut off on short screens ([#1528](https://github.com/tailwindlabs/tailwindui-issues/issues/1528))
-
-## 2023-11-10
-
-- Fix types in `Button` component
-
-## 2023-09-07
-
-- Added TypeScript version of template
-
-## 2023-08-17
-
-- Bump Headless UI dependency
-
-## 2023-08-15
-
-- Bump Next.js dependency
-
-## 2023-07-31
-
-- Port template to Next.js app router
-
-## 2023-07-18
-
-- Add 404 page
-- Sort imports
-
-## 2023-05-16
-
-- Bump Next.js dependency
-
-## 2023-04-11
-
-- Bump Next.js dependency
-
-## 2023-03-29
-
-- Bump Tailwind CSS and Prettier dependencies
-- Sort classes
-
-## 2023-03-22
-
-- Bump Headless UI dependency
-
-## 2023-02-02
-
-- Bump Headless UI dependency
-
-## 2022-11-04
-
-- Bump Tailwind CSS and Next.js dependencies
-
-## 2022-09-27
-
-- Update Headless UI, Next.js, and Autoprefixer dependencies
-
-## 2022-09-09
-
-- Update Next.js dependency
-
-## 2022-09-07
-
-- Update Headless UI dependency
-
-## 2022-09-01
-
-- Update Tailwind CSS, Next.js, Headless UI, ESLint, and other dependencies
-
-## 2022-08-16
-
-- Enable experimental Next.js `scrollRestoration` flag
-
-## 2022-07-25
-
-- Update Next.js and React dependencies
-
-## 2022-07-13
-
-- Improve wording of `aria-label` in `Plan` component
-
-## 2022-07-06
-
-- Replace `next/image` with `next/future/image`
-
-## 2022-06-23
-
-- Initial release

LICENSE.md

@@ -1,129 +0,0 @@
-# Tailwind UI License
-
-## Personal License
-
-Tailwind Labs Inc. grants you an on-going, non-exclusive license to use the Components and Templates.
-
-The license grants permission to **one individual** (the Licensee) to access and use the Components and Templates.
-
-You **can**:
-
-- Use the Components and Templates to create unlimited End Products.
-- Modify the Components and Templates to create derivative components and templates. Those components and templates are subject to this license.
-- Use the Components and Templates to create unlimited End Products for unlimited Clients.
-- Use the Components and Templates to create End Products where the End Product is sold to End Users.
-- Use the Components and Templates to create End Products that are open source and freely available to End Users.
-
-You **cannot**:
-
-- Use the Components and Templates to create End Products that are designed to allow an End User to build their own End Products using the Components and Templates or derivatives of the Components and Templates.
-- Re-distribute the Components and Templates or derivatives of the Components and Templates separately from an End Product, neither in code or as design assets.
-- Share your access to the Components and Templates with any other individuals.
-- Use the Components and Templates to produce anything that may be deemed by Tailwind Labs Inc, in their sole and absolute discretion, to be competitive or in conflict with the business of Tailwind Labs Inc.
-
-### Example usage
-
-Examples of usage **allowed** by the license:
-
-- Creating a personal website by yourself.
-- Creating a website or web application for a client that will be owned by that client.
-- Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
-- Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
-- Creating a web application where the primary purpose is clearly not to simply re-distribute the components (like a conference organization app that uses the components for its UI for example) that is free and open source, where the source code is publicly available.
-
-Examples of usage **not allowed** by the license:
-
-- Creating a repository of your favorite Tailwind UI components or templates (or derivatives based on Tailwind UI components or templates) and publishing it publicly.
-- Creating a React or Vue version of Tailwind UI and making it available either for sale or for free.
-- Create a Figma or Sketch UI kit based on the Tailwind UI component designs.
-- Creating a "website builder" project where end users can build their own websites using components or templates included with or derived from Tailwind UI.
-- Creating a theme, template, or project starter kit using the components or templates and making it available either for sale or for free.
-- Creating an admin panel tool (like [Laravel Nova](https://nova.laravel.com/) or [ActiveAdmin](https://activeadmin.info/)) that is made available either for sale or for free.
-
-In simple terms, use Tailwind UI for anything you like as long as it doesn't compete with Tailwind UI.
-
-### Personal License Definitions
-
-Licensee is the individual who has purchased a Personal License.
-
-Components and Templates are the source code and design assets made available to the Licensee after purchasing a Tailwind UI license.
-
-End Product is any artifact produced that incorporates the Components or Templates or derivatives of the Components or Templates.
-
-End User is a user of an End Product.
-
-Client is an individual or entity receiving custom professional services directly from the Licensee, produced specifically for that individual or entity. Customers of software-as-a-service products are not considered clients for the purpose of this document.
-
-## Team License
-
-Tailwind Labs Inc. grants you an on-going, non-exclusive license to use the Components and Templates.
-
-The license grants permission for **up to 25 Employees and Contractors of the Licensee** to access and use the Components and Templates.
-
-You **can**:
-
-- Use the Components and Templates to create unlimited End Products.
-- Modify the Components and Templates to create derivative components and templates. Those components and templates are subject to this license.
-- Use the Components and Templates to create unlimited End Products for unlimited Clients.
-- Use the Components and Templates to create End Products where the End Product is sold to End Users.
-- Use the Components and Templates to create End Products that are open source and freely available to End Users.
-
-You **cannot**:
-
-- Use the Components or Templates to create End Products that are designed to allow an End User to build their own End Products using the Components or Templates or derivatives of the Components or Templates.
-- Re-distribute the Components or Templates or derivatives of the Components or Templates separately from an End Product.
-- Use the Components or Templates to create End Products that are the property of any individual or entity other than the Licensee or Clients of the Licensee.
-- Use the Components or Templates to produce anything that may be deemed by Tailwind Labs Inc, in their sole and absolute discretion, to be competitive or in conflict with the business of Tailwind Labs Inc.
-
-### Example usage
-
-Examples of usage **allowed** by the license:
-
-- Creating a website for your company.
-- Creating a website or web application for a client that will be owned by that client.
-- Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
-- Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
-- Creating a web application where the primary purpose is clearly not to simply re-distribute the components or templates (like a conference organization app that uses the components or a template for its UI for example) that is free and open source, where the source code is publicly available.
-
-Examples of use **not allowed** by the license:
-
-- Creating a repository of your favorite Tailwind UI components or template (or derivatives based on Tailwind UI components or templates) and publishing it publicly.
-- Creating a React or Vue version of Tailwind UI and making it available either for sale or for free.
-- Creating a "website builder" project where end users can build their own websites using components or templates included with or derived from Tailwind UI.
-- Creating a theme or template using the components or templates and making it available either for sale or for free.
-- Creating an admin panel tool (like [Laravel Nova](https://nova.laravel.com/) or [ActiveAdmin](https://activeadmin.info/)) that is made available either for sale or for free.
-- Creating any End Product that is not the sole property of either your company or a client of your company. For example your employees/contractors can't use your company Tailwind UI license to build their own websites or side projects.
-
-### Team License Definitions
-
-Licensee is the business entity who has purchased a Team License.
-
-Components and Templates are the source code and design assets made available to the Licensee after purchasing a Tailwind UI license.
-
-End Product is any artifact produced that incorporates the Components or Templates or derivatives of the Components or Templates.
-
-End User is a user of an End Product.
-
-Employee is a full-time or part-time employee of the Licensee.
-
-Contractor is an individual or business entity contracted to perform services for the Licensee.
-
-Client is an individual or entity receiving custom professional services directly from the Licensee, produced specifically for that individual or entity. Customers of software-as-a-service products are not considered clients for the purpose of this document.
-
-## Enforcement
-
-If you are found to be in violation of the license, access to your Tailwind UI account will be terminated, and a refund may be issued at our discretion. When license violation is blatant and malicious (such as intentionally redistributing the Components or Templates through private warez channels), no refund will be issued.
-
-The copyright of the Components and Templates is owned by Tailwind Labs Inc. You are granted only the permissions described in this license; all other rights are reserved. Tailwind Labs Inc. reserves the right to pursue legal remedies for any unauthorized use of the Components or Templates outside the scope of this license.
-
-## Liability
-
-Tailwind Labs Inc.’s liability to you for costs, damages, or other losses arising from your use of the Components or Templates — including third-party claims against you — is limited to a refund of your license fee. Tailwind Labs Inc. may not be held liable for any consequential damages related to your use of the Components or Templates.
-
-This Agreement is governed by the laws of the Province of Ontario and the applicable laws of Canada. Legal proceedings related to this Agreement may only be brought in the courts of Ontario. You agree to service of process at the e-mail address on your original order.
-
-## Questions?
-
-Unsure which license you need, or unsure if your use case is covered by our licenses?
-
-Email us at [support@tailwindui.com](mailto:support@tailwindui.com) with your questions.

README.md

@@ -1,35 +0,0 @@
-# Salient
-
-Salient is a [Tailwind UI](https://tailwindui.com) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org).
-
-## Getting started
-
-To get started with this template, first install the npm dependencies:
-
-```bash
-npm install
-```
-
-Next, run the development server:
-
-```bash
-npm run dev
-```
-
-Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
-
-## Customizing
-
-You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
-
-## License
-
-This site template is a commercial product and is licensed under the [Tailwind UI license](https://tailwindui.com/license).
-
-## Learn more
-
-To learn more about the technologies used in this site template, see the following resources:
-
-- [Tailwind CSS](https://tailwindcss.com/docs) - the official Tailwind CSS documentation
-- [Next.js](https://nextjs.org/docs) - the official Next.js documentation
-- [Headless UI](https://headlessui.dev) - the official Headless UI documentation

component-library/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.local
+.DS_Store

component-library/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

component-library/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SolenOS – Messdienstleistungen einfach gemacht</title>
+    <meta
+      name="description"
+      content="SolenOS Component Library – shadcn-basierte Komponenten für die SolenOS Landing Pages."
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

component-library/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "solenos-component-library",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.2.5",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.539.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.8.0",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.11",
+    "@types/node": "^24.2.0",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^4.7.0",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.1"
+  },
+  "allowScripts": {
+    "esbuild@0.28.2": true
+  }
+}

component-library/src/App.tsx

@@ -0,0 +1,111 @@
+import { useEffect } from "react"
+import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom"
+
+import { SiteFooter } from "@/components/solenos/site-footer"
+import { SiteHeader } from "@/components/solenos/site-header"
+import HauseigentuemerPage from "@/pages/audiences/hauseigentuemer"
+import HausverwaltungenPage from "@/pages/audiences/hausverwaltungen"
+import InstallateurePage from "@/pages/audiences/installateure"
+import MessdienstleisterPage from "@/pages/audiences/messdienstleister"
+import ConfiguratorPage from "@/pages/configurator"
+import ForWhomPage from "@/pages/for-whom"
+import HomePage from "@/pages/home"
+import HowItWorksPage from "@/pages/how-it-works"
+import KlarpreisPage from "@/pages/klarpreis"
+import { SimplePage } from "@/pages/placeholder"
+import ProductsPage from "@/pages/products"
+import WissenPage from "@/pages/wissen"
+import DatenschutzSicherheitPage from "@/pages/wissen/datenschutz-sicherheit"
+import GesetzlicheAnforderungenPage from "@/pages/wissen/gesetzliche-anforderungen"
+
+function ScrollToTop() {
+  const { pathname } = useLocation()
+
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [pathname])
+
+  return null
+}
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <ScrollToTop />
+      <div className="flex min-h-screen flex-col">
+        <SiteHeader />
+        <main className="flex-1">
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/so-funktionierts" element={<HowItWorksPage />} />
+            <Route path="/produkte" element={<ProductsPage />} />
+            <Route path="/fuer-wen" element={<ForWhomPage />} />
+            <Route
+              path="/fuer-wen/hauseigentuemer"
+              element={<HauseigentuemerPage />}
+            />
+            <Route
+              path="/fuer-wen/hausverwaltungen"
+              element={<HausverwaltungenPage />}
+            />
+            <Route
+              path="/fuer-wen/messdienstleister"
+              element={<MessdienstleisterPage />}
+            />
+            <Route
+              path="/fuer-wen/installateure"
+              element={<InstallateurePage />}
+            />
+            <Route path="/konfigurator" element={<ConfiguratorPage />} />
+            <Route path="/klarpreis" element={<KlarpreisPage />} />
+            <Route path="/wissen" element={<WissenPage />} />
+            <Route
+              path="/wissen/gesetzliche-anforderungen"
+              element={<GesetzlicheAnforderungenPage />}
+            />
+            <Route
+              path="/wissen/datenschutz-sicherheit"
+              element={<DatenschutzSicherheitPage />}
+            />
+            <Route
+              path="/unternehmen"
+              element={
+                <SimplePage
+                  breadcrumb={[
+                    { label: "Startseite", to: "/" },
+                    { label: "Unternehmen" },
+                  ]}
+                  title="Unternehmen"
+                  lead="SolenOS verbindet Messtechnik, Datenerfassung und Software zu einem durchgängigen System für Wohngebäude."
+                />
+              }
+            />
+            <Route
+              path="/kontakt"
+              element={
+                <SimplePage
+                  breadcrumb={[
+                    { label: "Startseite", to: "/" },
+                    { label: "Kontakt" },
+                  ]}
+                  title="Kontakt"
+                  lead="Sprechen Sie mit uns über Ihr Gebäude, Ihr Portfolio oder Ihre Plattform-Anforderungen."
+                />
+              }
+            />
+            <Route
+              path="*"
+              element={
+                <SimplePage
+                  title="Seite nicht gefunden"
+                  lead="Die angeforderte Seite existiert nicht."
+                />
+              }
+            />
+          </Routes>
+        </main>
+        <SiteFooter />
+      </div>
+    </BrowserRouter>
+  )
+}

component-library/src/assets/solenos/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>

component-library/src/assets/solenos/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>

component-library/src/assets/solenos/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">SolenOS 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>

component-library/src/assets/solenos/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>

component-library/src/assets/solenos/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>

component-library/src/assets/solenos/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>

component-library/src/assets/solenos/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>

component-library/src/assets/solenos/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>

component-library/src/assets/solenos/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>

component-library/src/assets/solenos/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>

component-library/src/assets/solenos/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>