save
This commit is contained in:
Lars Nolden
@@ -0,0 +1,348 @@
|
||||
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="UVI"
|
||||
eyebrow="Produkt"
|
||||
title={
|
||||
<span className="block text-[2.25rem] text-pretty sm:text-[2.75rem]">
|
||||
Unterjährige Verbrauchs­information
|
||||
</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">Preis für mein Gebäude berechnen</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="lg">
|
||||
<Link to="/wissen/gesetzliche-anforderungen">
|
||||
Gesetzliche Anforderungen
|
||||
</Link>
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
note="Wenige Angaben · unverbindliche Kostenschätzung"
|
||||
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="Was kostet die UVI für Ihr Gebäude?"
|
||||
description="Mit wenigen Angaben zu Gebäude, Wohnungen und Wärmeverteilung erhalten Sie eine erste Preisindikation."
|
||||
actions={
|
||||
<>
|
||||
<Button asChild variant="inverse" size="lg">
|
||||
<Link to="/konfigurator">Preis berechnen</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={
|
||||
<span className="text-[1.15rem] whitespace-nowrap">
|
||||
UVI-Komplettbetrieb
|
||||
</span>
|
||||
}
|
||||
cadence="Monatlich"
|
||||
price="10,50 €"
|
||||
unit="je Wohnung / Monat"
|
||||
allocation={{
|
||||
label: "Grundsätzlich umlagefähig",
|
||||
tone: "positive",
|
||||
}}
|
||||
description="Sensoren, Daten, Portal und Verbrauchsinformation inklusive."
|
||||
media={
|
||||
<AssetRender
|
||||
render={renders.uviGlassPane}
|
||||
alt=""
|
||||
className="w-full"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Button asChild variant="link" className="mt-4 h-auto p-0 font-bold">
|
||||
<Link to="/klarpreis">
|
||||
Alle Preise im SolenOS Klarpreis
|
||||
<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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user