379 lines
15 KiB
TypeScript
379 lines
15 KiB
TypeScript
import { Link } from "react-router-dom"
|
||
import {
|
||
ArrowRight,
|
||
CalendarClock,
|
||
Euro,
|
||
FileCheck2,
|
||
RadioTower,
|
||
} from "lucide-react"
|
||
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card } from "@/components/ui/card"
|
||
import { Checklist } from "@/components/solenos/checklist"
|
||
import { CtaBanner } from "@/components/solenos/cta-banner"
|
||
import { FaqAccordion, type FaqItem } from "@/components/solenos/faq-accordion"
|
||
import { PortalGaugeIcon } from "@/components/solenos/line-icons"
|
||
import { NoticeArt, NoticeBanner } from "@/components/solenos/notice-banner"
|
||
import { PriceCard } from "@/components/solenos/price-card"
|
||
import { StepRail } from "@/components/solenos/process-steps"
|
||
import { Section, SectionHeading } from "@/components/solenos/section"
|
||
import {
|
||
AssetRender,
|
||
renders,
|
||
vectors,
|
||
} from "@/components/solenos/site-assets"
|
||
import { heizkostenv } from "@/lib/legal"
|
||
import { ProductCrossLinks, ProductPage } from "@/pages/products/product-page"
|
||
|
||
/**
|
||
* Hero art: the UVI pane as the subject – what the resident receives – with
|
||
* the consumption bars behind it and the consumption ring as the accent.
|
||
* Decorative; the copy carries the meaning.
|
||
*/
|
||
function UviHeroArt() {
|
||
return (
|
||
<div className="relative mx-auto flex aspect-[1.3] w-full max-w-md items-center">
|
||
<img
|
||
src={vectors.consumptionRing}
|
||
alt=""
|
||
className="absolute top-0 right-[2%] w-[24%]"
|
||
/>
|
||
<AssetRender
|
||
render={renders.uviGlassPane}
|
||
alt=""
|
||
className="mx-auto w-[76%]"
|
||
loading="eager"
|
||
/>
|
||
<AssetRender
|
||
render={renders.barChart}
|
||
alt=""
|
||
className="absolute bottom-[2%] left-0 w-[28%]"
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const MONTHLY_STEPS = [
|
||
{
|
||
media: <AssetRender render={renders.heatMeter} imgClassName="w-24" />,
|
||
title: "Verbrauch erfassen",
|
||
description:
|
||
"Wärmezähler, Heizkostenverteiler und Wasserzähler messen laufend je Wohnung.",
|
||
},
|
||
{
|
||
media: <AssetRender render={renders.gateway} imgClassName="w-24" />,
|
||
title: "Werte übertragen",
|
||
description:
|
||
"Das Gateway sammelt die Funkdaten im Gebäude und überträgt sie verschlüsselt an SolenOS.",
|
||
},
|
||
{
|
||
media: <AssetRender render={renders.refreshLoopCloud} imgClassName="w-28" />,
|
||
title: "Daten prüfen und zuordnen",
|
||
description:
|
||
"Die Werte werden plausibilisiert und Wohnung, Gerät und Nutzungszeitraum zugeordnet.",
|
||
},
|
||
{
|
||
media: <AssetRender render={renders.uviGlassPane} alt="" className="w-28" />,
|
||
title: "Verbrauchsinformation erzeugen",
|
||
description:
|
||
"Monatswert, Vergleichswerte und die nach § 6a HeizkostenV geforderten Angaben werden aufbereitet.",
|
||
},
|
||
{
|
||
media: (
|
||
<AssetRender render={renders.laptopDashboard} imgClassName="w-40" />
|
||
),
|
||
title: "Bewohnern bereitstellen",
|
||
description:
|
||
"Bewohner rufen ihre Information im Mieterportal ab, Eigentümer sehen den Versandstatus.",
|
||
},
|
||
]
|
||
|
||
const MONTHLY_CONTENT = [
|
||
"Verbrauch des Nutzers im letzten Monat in Kilowattstunden",
|
||
"Vergleich mit dem Vormonat desselben Nutzers",
|
||
"Vergleich mit dem entsprechenden Monat des Vorjahres, soweit die Daten erhoben wurden",
|
||
"Vergleich mit dem Verbrauch eines normierten Durchschnittsnutzers derselben Nutzerkategorie",
|
||
]
|
||
|
||
const BILLING_CONTENT = [
|
||
"Anteil der eingesetzten Energieträger, bei Fernwärme zusätzlich Treibhausgasemissionen und Primärenergiefaktor",
|
||
"erhobene Steuern, Abgaben und Zölle",
|
||
"Entgelte für Messtechnik, Eichung, Ablesung und Abrechnung",
|
||
"grafischer Vergleich des witterungsbereinigten Energieverbrauchs mit dem vorherigen Abrechnungszeitraum",
|
||
"Kontaktinformationen zu Energieeffizienz und Hinweise zur Streitbeilegung",
|
||
]
|
||
|
||
const INCLUDED = [
|
||
"fernablesbare Messtechnik für Wärme und Warmwasser",
|
||
"Gateway, Datenübertragung und Geräteüberwachung",
|
||
"monatliche Erzeugung der Verbrauchsinformation",
|
||
"Bereitstellung im Mieterportal für jede Wohnung",
|
||
"Nutzerwechsel ohne Ablesetermin vor Ort",
|
||
"Portalzugang für Eigentümer und Verwaltung",
|
||
]
|
||
|
||
const NOT_INCLUDED = [
|
||
"Jahresabrechnung der Heiz- und Warmwasserkosten",
|
||
"Rauchwarnmelder und deren Inspektion",
|
||
"Betriebskostenabrechnung des gesamten Gebäudes",
|
||
]
|
||
|
||
const FAQS: FaqItem[] = [
|
||
{
|
||
question: "Ab wann muss die Verbrauchsinformation monatlich erfolgen?",
|
||
answer:
|
||
"Sobald fernablesbare Ausstattungen zur Verbrauchserfassung installiert sind, sind die Verbrauchsinformationen nach § 6a Absatz 1 Nummer 2 HeizkostenV seit dem 1. Januar 2022 monatlich mitzuteilen. Für Abrechnungszeiträume ab dem 1. Dezember 2021 galt zunächst ein mindestens vierteljährlicher bzw. halbjährlicher Rhythmus.",
|
||
},
|
||
{
|
||
question: "Wie erhalten die Bewohner ihre Verbrauchsinformation?",
|
||
answer:
|
||
"Über das Mieterportal. Jeder Bewohner erhält einen eigenen Zugang und sieht ausschließlich die Werte der eigenen Wohnung und des eigenen Nutzungszeitraums – nicht die Daten von Vor- oder Nachmietern.",
|
||
},
|
||
{
|
||
question: "Was passiert, wenn ein Bewohner keinen digitalen Zugang nutzt?",
|
||
answer:
|
||
"Die Information wird im Portal bereitgestellt und kann als Dokument ausgegeben werden, sodass die Verwaltung sie auf dem für das Gebäude vereinbarten Weg zustellen kann. Die Pflicht trifft den Gebäudeeigentümer; SolenOS liefert die dafür benötigten Inhalte vollständig aufbereitet.",
|
||
},
|
||
{
|
||
question: "Muss für die UVI jemand in die Wohnung?",
|
||
answer:
|
||
"Nein. Fernablesbar heißt, dass die Ausstattung ohne Zugang zu den einzelnen Nutzeinheiten abgelesen werden kann (§ 5 Absatz 2 HeizkostenV). Auch bei einem Nutzerwechsel werden die Werte zum Stichtag aus der laufenden Datenerfassung übernommen.",
|
||
},
|
||
{
|
||
question: "Kann ich die UVI ohne Heizkostenabrechnung buchen?",
|
||
answer:
|
||
"Ja. Der UVI-Komplettbetrieb umfasst die benötigte Messtechnik und die zugehörigen digitalen Dienstleistungen. Die Heizkostenabrechnung baut auf denselben erfassten Verbrauchsdaten auf und kann jederzeit ergänzt werden.",
|
||
},
|
||
]
|
||
|
||
export default function UviProductPage() {
|
||
return (
|
||
<ProductPage
|
||
breadcrumb="Verbrauchsinformation (UVI)"
|
||
eyebrow="Produkt"
|
||
title={
|
||
<span className="block text-[2.25rem] text-pretty sm:text-[2.75rem]">
|
||
Unterjährige Verbrauchs­information (UVI)
|
||
</span>
|
||
}
|
||
tagline="Monatlich. Automatisch. Nachweisbar."
|
||
lead="Sind fernablesbare Zähler installiert, muss jeder Nutzer monatlich über seinen Verbrauch informiert werden. SolenOS erzeugt diese Information aus den laufend erfassten Werten und stellt sie den Bewohnern im Mieterportal bereit."
|
||
actions={
|
||
<>
|
||
<Button asChild size="lg">
|
||
<Link to="/konfigurator">Konfiguration für mein Gebäude starten</Link>
|
||
</Button>
|
||
<Button asChild variant="outline" size="lg">
|
||
<Link to="/wissen/gesetzliche-anforderungen">
|
||
Gesetzliche Anforderungen
|
||
</Link>
|
||
</Button>
|
||
</>
|
||
}
|
||
note="Wenige Angaben · vollständige Prüfung im Folgeprozess"
|
||
extra={
|
||
<div
|
||
role="note"
|
||
className="rounded-2xl border border-brand-300 bg-brand-50/80 p-4 shadow-card"
|
||
>
|
||
<div className="flex items-start gap-3">
|
||
<Euro
|
||
aria-hidden="true"
|
||
className="mt-0.5 size-6 shrink-0 text-brand-700"
|
||
/>
|
||
<div>
|
||
<p className="font-extrabold text-navy">
|
||
Bis zu 3 % Kürzungsrecht
|
||
</p>
|
||
<p className="mt-1 text-sm leading-relaxed text-muted-foreground">
|
||
Fehlt die monatliche Verbrauchsinformation oder ist sie
|
||
unvollständig, können Nutzer ihren Kostenanteil um 3 %
|
||
kürzen.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm font-semibold">
|
||
<Link
|
||
to="/wissen/gesetzliche-anforderungen"
|
||
className="inline-flex items-center gap-1 text-brand-800 underline decoration-brand-400 underline-offset-4"
|
||
>
|
||
Anforderungen im Detail
|
||
<ArrowRight className="size-4" />
|
||
</Link>
|
||
<a
|
||
href={heizkostenv("6a")}
|
||
className="text-muted-foreground underline underline-offset-4"
|
||
>
|
||
Quelle: § 6a HeizkostenV
|
||
</a>
|
||
</div>
|
||
</div>
|
||
}
|
||
visual={<UviHeroArt />}
|
||
features={[
|
||
{
|
||
icon: <CalendarClock strokeWidth={1.6} />,
|
||
title: "Monatlich automatisch",
|
||
sub: "Erfassung, Aufbereitung und Bereitstellung laufen ohne Zutun.",
|
||
},
|
||
{
|
||
icon: <RadioTower strokeWidth={1.6} />,
|
||
title: "Ohne Wohnungszugang",
|
||
sub: "Fernablesung statt Ablesetermin – auch beim Nutzerwechsel.",
|
||
},
|
||
{
|
||
icon: <PortalGaugeIcon />,
|
||
title: "Eigener Bewohnerzugang",
|
||
sub: "Jede Wohnung sieht ausschließlich ihren eigenen Verbrauch.",
|
||
},
|
||
{
|
||
icon: <FileCheck2 strokeWidth={1.6} />,
|
||
title: "Pflichtangaben enthalten",
|
||
sub: "Monatswert und Vergleiche nach § 6a HeizkostenV.",
|
||
},
|
||
]}
|
||
closing={
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<CtaBanner
|
||
icon={<Euro />}
|
||
title="Verbrauchsinformation für Ihr Gebäude konfigurieren"
|
||
description="Gebäude und Leistungen online erfassen; SolenOS prüft anschließend Ausstattung und Gesamtpreis."
|
||
actions={
|
||
<>
|
||
<Button asChild variant="inverse" size="lg">
|
||
<Link to="/konfigurator">Konfiguration starten</Link>
|
||
</Button>
|
||
<Button asChild variant="inverseOutline" size="lg">
|
||
<Link to="/kontakt">Kontakt aufnehmen</Link>
|
||
</Button>
|
||
</>
|
||
}
|
||
/>
|
||
</Section>
|
||
}
|
||
>
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<NoticeBanner
|
||
title="Monatliche Verbrauchsinformation ist Pflicht"
|
||
source={{ cite: "§ 6a HeizkostenV", href: heizkostenv("6a") }}
|
||
visual={<NoticeArt className="max-lg:hidden" />}
|
||
action={
|
||
<Button
|
||
asChild
|
||
variant="link"
|
||
className="h-auto p-0 text-[15px] font-bold text-brand-800 underline decoration-brand-500 decoration-2 underline-offset-[6px] hover:text-navy hover:decoration-brand-800"
|
||
>
|
||
<Link to="/wissen/gesetzliche-anforderungen">
|
||
Anforderungen im Detail
|
||
<ArrowRight />
|
||
</Link>
|
||
</Button>
|
||
}
|
||
>
|
||
Wo fernablesbare Ausstattungen installiert sind, sind die
|
||
Verbrauchsinformationen seit dem 1. Januar 2022 monatlich
|
||
mitzuteilen. Werden sie nicht oder nicht vollständig mitgeteilt,
|
||
können Nutzer ihren Kostenanteil um 3 % kürzen.
|
||
</NoticeBanner>
|
||
</Section>
|
||
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
eyebrow="Inhalte"
|
||
title="Was die Bewohner erhalten"
|
||
lead="Die monatliche Information und die Angaben zur Jahresabrechnung sind in der HeizkostenV unterschiedlich geregelt. SolenOS bereitet beide Sätze aus derselben Datenbasis auf."
|
||
/>
|
||
<div className="mt-10 grid gap-6 lg:grid-cols-2">
|
||
<Card className="gap-0 p-6 sm:p-7">
|
||
<p className="text-xs font-bold tracking-[0.14em] text-primary uppercase">
|
||
Monatlich
|
||
</p>
|
||
<h3 className="mt-2 text-lg font-extrabold tracking-tight text-navy">
|
||
Verbrauchsinformation je Wohnung
|
||
</h3>
|
||
<Checklist items={MONTHLY_CONTENT} className="mt-5" />
|
||
<p className="mt-5 text-xs text-muted-foreground">
|
||
§ 6a Absatz 2 HeizkostenV
|
||
</p>
|
||
</Card>
|
||
<Card className="gap-0 p-6 sm:p-7">
|
||
<p className="text-xs font-bold tracking-[0.14em] text-primary uppercase">
|
||
Zur Abrechnung
|
||
</p>
|
||
<h3 className="mt-2 text-lg font-extrabold tracking-tight text-navy">
|
||
Zusätzliche Informationen
|
||
</h3>
|
||
<Checklist items={BILLING_CONTENT} className="mt-5" />
|
||
<p className="mt-5 text-xs text-muted-foreground">
|
||
§ 6a Absatz 3 HeizkostenV
|
||
</p>
|
||
</Card>
|
||
</div>
|
||
</Section>
|
||
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
eyebrow="Schritt für Schritt"
|
||
title="So entsteht die monatliche UVI"
|
||
lead="Vom Messwert in der Wohnung bis zur Information im Mieterportal – ein Ablauf, der nach der Installation ohne weitere Eingriffe läuft."
|
||
/>
|
||
<StepRail steps={MONTHLY_STEPS} className="mt-10" />
|
||
</Section>
|
||
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
eyebrow="Leistungsumfang"
|
||
title="Was im UVI-Betrieb enthalten ist"
|
||
/>
|
||
<div className="mt-10 grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
|
||
<Card className="gap-0 p-6 sm:p-7">
|
||
<h3 className="text-base font-bold text-navy">Enthalten</h3>
|
||
<Checklist items={INCLUDED} className="mt-5" />
|
||
<h3 className="mt-8 text-base font-bold text-navy">
|
||
Nicht im UVI-Betrieb enthalten
|
||
</h3>
|
||
<Checklist items={NOT_INCLUDED} className="mt-5" tone="excluded" />
|
||
<p className="mt-5 text-sm leading-relaxed text-muted-foreground">
|
||
Heizkostenabrechnung und Rauchwarnmelder sind eigene Leistungen –
|
||
einzeln buchbar und jederzeit ergänzbar.
|
||
</p>
|
||
</Card>
|
||
<div>
|
||
<PriceCard
|
||
title="Monatliche Verbrauchsinformation (UVI)"
|
||
cadence="Gesamtangebot"
|
||
price="Nach Prüfung"
|
||
unit="nach vollständiger Objektkonfiguration"
|
||
description="Messtechnik, erforderliche Gateway-Infrastruktur, Daten, Portal und Verbrauchsinformation werden gemeinsam angeboten."
|
||
media={
|
||
<AssetRender
|
||
render={renders.uviGlassPane}
|
||
alt=""
|
||
className="w-full"
|
||
/>
|
||
}
|
||
/>
|
||
<Button asChild variant="link" className="mt-4 h-auto p-0 font-bold">
|
||
<Link to="/konfigurator">
|
||
Gesamtangebot konfigurieren
|
||
<ArrowRight />
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
align="center"
|
||
eyebrow="Häufige Fragen"
|
||
title="Fragen zur Verbrauchsinformation"
|
||
/>
|
||
<FaqAccordion className="mt-10" items={FAQS} />
|
||
</Section>
|
||
|
||
<ProductCrossLinks current="/produkte/uvi" />
|
||
</ProductPage>
|
||
)
|
||
}
|