+ {eyebrow ? (
+
+ {eyebrow} +
+ ) : null}{title}
diff --git a/component-library/src/components/gebos/trust-panel.tsx b/component-library/src/components/gebos/trust-panel.tsx index 1b4e8b6..3b3d3e0 100644 --- a/component-library/src/components/gebos/trust-panel.tsx +++ b/component-library/src/components/gebos/trust-panel.tsx @@ -10,9 +10,9 @@ type TrustPanelItem = { /** * Trust panel: a pale plate carrying the headline and the technical properties - * as white pills (teal line icon beside a short label). Three pills across from - * `lg`, so five items settle into 3 + 2 as in the design, with the security - * render alongside and the follow-up link on the baseline underneath. + * as white pills (teal line icon beside a short label), two across from `sm` + * so the labels stay on one line next to the security render, with the + * follow-up link on the baseline underneath. */ function TrustPanel({ title, @@ -31,34 +31,45 @@ function TrustPanel({ return (
-
+
)
}
@@ -72,7 +83,7 @@ function TrustShieldArt({ className }: { className?: string }) {
+
+
+
+
+
+ )
+}
diff --git a/component-library/src/pages/wissen/gesetzliche-anforderungen.tsx b/component-library/src/pages/wissen/gesetzliche-anforderungen.tsx
new file mode 100644
index 0000000..1ac28f6
--- /dev/null
+++ b/component-library/src/pages/wissen/gesetzliche-anforderungen.tsx
@@ -0,0 +1,138 @@
+import { Link } from "react-router-dom"
+import { BarChart3, KeyRound, Puzzle, RadioTower, ShieldCheck } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { CtaBanner } from "@/components/gebos/cta-banner"
+import { IconBadge } from "@/components/gebos/icon-tile"
+import { Section, SectionHeading } from "@/components/gebos/section"
+import {
+ AssetRender,
+ renders,
+ vectors,
+} from "@/components/gebos/site-assets"
+import {
+ HEIZKOSTENV,
+ TopicCards,
+ WissenArticle,
+ WissenRelated,
+ type Topic,
+} from "@/pages/wissen/wissen-article"
+
+const requirements: Topic[] = [
+ {
+ icon:
+
+
+
+
+
+ )
+}
diff --git a/component-library/src/pages/wissen/index.tsx b/component-library/src/pages/wissen/index.tsx
new file mode 100644
index 0000000..a198ab7
--- /dev/null
+++ b/component-library/src/pages/wissen/index.tsx
@@ -0,0 +1,76 @@
+import type * as React from "react"
+import { Link } from "react-router-dom"
+import { ArrowRight, ScrollText, ShieldCheck } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { IconBadge } from "@/components/gebos/icon-tile"
+import { PageBreadcrumb } from "@/components/gebos/page-breadcrumb"
+import { Container, Section, SectionHeading } from "@/components/gebos/section"
+
+type Article = {
+ icon: React.ReactNode
+ title: string
+ summary: string
+ to: string
+}
+
+const articles: Article[] = [
+ {
+ icon: {children}
+
+ )
+}
+
+/** Baseline link to the sibling article, closing an article out. */
+function WissenRelated({
+ to,
+ title,
+ summary,
+}: {
+ to: string
+ title: string
+ summary: string
+}) {
+ return (
+
+
+
+
+
+
+ )
+}
+
+export { HEIZKOSTENV, TopicCards, WissenArticle, WissenRelated }
+export type { LegalSource, Topic }
diff --git a/seiten/startseite.md b/seiten/startseite.md
index 4470c23..33c8dd8 100644
--- a/seiten/startseite.md
+++ b/seiten/startseite.md
@@ -323,6 +323,21 @@ Setzen Sie Gebos bei Ihren bestehenden Kunden ein, ohne zunächst ein Partnerpro
---
+# Datenschutz & Sicherheit
+
+Zurückhaltender Vertrauensblock kurz vor dem Abschluss. Nur belegbare Eigenschaften, keine Superlative.
+
+- Hosting in Deutschland
+- AES-geschützte Messdaten
+- TLS-verschlüsselte Übertragung
+- Rollenbasierte Zugriffsrechte
+
+**[Mehr zu Datenschutz & Sicherheit]**
+
+→ Führt auf die Wissensseite Datenschutz & Sicherheit.
+
+---
+
# Abschluss
## Messdienstleistungen müssen nicht kompliziert sein.
-
+
- {action ?
+
{title}
-
+
{items.map((item, i) => (
-
+
{item.icon}
-
+
{item.label}
))}
- {visual ? {visual} : null}
+ {visual ? (
+ /* stacked layouts hang the render off the right edge instead of
+ centring it, so it anchors the link underneath rather than
+ leaving the row beside it empty */
+
+ {visual}
+
+ ) : null}
{items.map((item, i) => (
-
+
{item.icon}
-
+
{item.label}
))}
{action}
: null}
+ {action ? (
+ {action}
+ ) : null}
+ 
+
+ )
+}
+
+export default function DatenschutzSicherheitPage() {
+ return (
+
+ 
+
+ )
+}
+
+export default function GesetzlicheAnforderungenPage() {
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/component-library/src/pages/wissen/wissen-article.tsx b/component-library/src/pages/wissen/wissen-article.tsx
new file mode 100644
index 0000000..6b690fc
--- /dev/null
+++ b/component-library/src/pages/wissen/wissen-article.tsx
@@ -0,0 +1,169 @@
+import type * as React from "react"
+import { Link } from "react-router-dom"
+import { ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Card, CardContent } from "@/components/ui/card"
+import { IconBadge } from "@/components/gebos/icon-tile"
+import { PageBreadcrumb } from "@/components/gebos/page-breadcrumb"
+import { PageHero } from "@/components/gebos/page-hero"
+import { Container, Section } from "@/components/gebos/section"
+
+/** The paragraph of the HeizkostenV a property is cited against. */
+type LegalSource = {
+ cite: string
+ href: string
+}
+
+/** One technical property: line icon, title, body, optional legal citation. */
+type Topic = {
+ icon: React.ReactNode
+ title: string
+ body: string
+ source?: LegalSource
+}
+
+const HEIZKOSTENV = "https://www.gesetze-im-internet.de/heizkostenv"
+
+/** Cited source line, pinned to the card's baseline so rows stay aligned. */
+function LegalSourceNote({ source }: { source: LegalSource }) {
+ return (
+
+ {articles.map((article) => (
+
+
+ {article.icon}
+
+
+ ))}
+
+ + {article.title} +
++ {article.summary} +
+
+
+
+ + Quelle:{" "} + + {source.cite} + +
+ ) +} + +/** Property grid: line icon over a navy title, body copy, optional citation. */ +function TopicCards({ + items, + className, +}: { + items: Topic[] + className?: string +}) { + return ( +
+ {items.map((item) => (
+
+
+
+ {item.icon}
+
+
+
+ ))}
+
+ )
+}
+
+/**
+ * Shared shell for the /wissen articles: split PageHero with the
+ * Startseite → Wissen → article breadcrumb, then the article's own sections.
+ */
+function WissenArticle({
+ breadcrumb,
+ eyebrow,
+ title,
+ tagline,
+ lead,
+ visual,
+ children,
+}: {
+ /** label of the current page, appended to Startseite → Wissen */
+ breadcrumb: string
+ eyebrow?: React.ReactNode
+ title: React.ReactNode
+ /** short bold subline under the H1 (e.g. "Für den Messbetrieb gebaut.") */
+ tagline?: React.ReactNode
+ lead?: React.ReactNode
+ visual?: React.ReactNode
+ children?: React.ReactNode
+}) {
+ return (
+ <>
+ + {item.title} +
++ {item.body} +
+ {item.source ?
+
+ + Weiterlesen +
++ {title} +
++ {summary} +
+