342 lines
13 KiB
TypeScript
342 lines
13 KiB
TypeScript
import { Link } from "react-router-dom"
|
||
import {
|
||
ArrowRight,
|
||
BellRing,
|
||
ClipboardCheck,
|
||
ScrollText,
|
||
ShieldCheck,
|
||
Timer,
|
||
Wifi,
|
||
} from "lucide-react"
|
||
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card } from "@/components/ui/card"
|
||
import { Checklist } from "@/components/solenos/checklist"
|
||
import {
|
||
ComparisonTable,
|
||
type ComparisonColumn,
|
||
type ComparisonRow,
|
||
} from "@/components/solenos/comparison-table"
|
||
import { CtaBanner } from "@/components/solenos/cta-banner"
|
||
import { FaqAccordion, type FaqItem } from "@/components/solenos/faq-accordion"
|
||
import { PortalGaugeIcon } from "@/components/solenos/line-icons"
|
||
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 { TopicCards, type Topic } from "@/components/solenos/topic-cards"
|
||
import { SmokeDetectorIllustration } from "@/components/solenos/illustrations"
|
||
import { ProductCrossLinks, ProductPage } from "@/pages/products/product-page"
|
||
|
||
/**
|
||
* Hero art: the glass smoke detector as the subject with the real device
|
||
* beside it and the check orb as the accent – device plus verified operational
|
||
* readiness. Decorative; the copy carries the meaning.
|
||
*/
|
||
function SmokeAlarmHeroArt() {
|
||
return (
|
||
<div className="relative mx-auto flex aspect-[1.3] w-full max-w-md items-center">
|
||
<img
|
||
src={vectors.checkOrb}
|
||
alt=""
|
||
className="absolute top-[4%] right-[6%] w-[20%]"
|
||
/>
|
||
<AssetRender
|
||
render={renders.glassSmokeDetector}
|
||
alt=""
|
||
className="mx-auto w-[64%]"
|
||
loading="eager"
|
||
/>
|
||
<AssetRender
|
||
render={renders.smokeAlarmAlpha}
|
||
className="absolute bottom-[2%] left-[2%] w-[30%]"
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const DUTIES: Topic[] = [
|
||
{
|
||
icon: <ScrollText />,
|
||
title: "Einbau und Betriebsbereitschaft",
|
||
body: "Rauchwarnmelder sind in Wohnungen nach den Bauordnungen der Länder vorgeschrieben. Wer für die Sicherstellung der Betriebsbereitschaft verantwortlich ist, regelt das jeweilige Landesrecht – in den meisten Ländern der Eigentümer.",
|
||
},
|
||
{
|
||
icon: <ClipboardCheck />,
|
||
title: "Jährliche Inspektion",
|
||
body: "Die Anwendungsnorm DIN 14676-1 verlangt eine Inspektion mindestens einmal jährlich: Energieversorgung, Rauchzutrittsöffnungen und Umfeld des Melders werden geprüft.",
|
||
},
|
||
{
|
||
icon: <Wifi />,
|
||
title: "Ferninspektion nach Norm",
|
||
body: "Die DIN 14676-1 kennt neben der Vor-Ort-Inspektion die Teil- und die vollständige Ferninspektion. Geeignete Melder melden Verschmutzung, Batteriezustand und Demontage selbst – ohne Termin in der Wohnung.",
|
||
},
|
||
{
|
||
icon: <Timer />,
|
||
title: "Austausch nach zehn Jahren",
|
||
body: "Rauchwarnmelder werden spätestens nach zehn Jahren Nutzungsdauer ausgetauscht. Verbaute Melder, Einbauorte und Austauschtermine sind im Portal je Wohnung dokumentiert.",
|
||
},
|
||
]
|
||
|
||
const ROLLOUT_STEPS = [
|
||
{
|
||
media: <AssetRender render={renders.houseSmallIso} imgClassName="w-24" />,
|
||
title: "Bedarf ermitteln",
|
||
description:
|
||
"Aus Wohnungen und Zimmerzahl ergibt sich, wie viele Melder je Einheit benötigt werden.",
|
||
},
|
||
{
|
||
media: (
|
||
<AssetRender render={renders.shippingBoxClosed} imgClassName="w-32" />
|
||
),
|
||
title: "Vorkonfiguriert erhalten",
|
||
description:
|
||
"Die Melder kommen bereits dem Gebäude und den geplanten Einheiten zugeordnet an.",
|
||
},
|
||
{
|
||
media: <AssetRender render={renders.drillTool} imgClassName="w-28" />,
|
||
title: "Montieren",
|
||
description:
|
||
"Montage durch Sie, Ihren Fachbetrieb oder als Komplettleistung durch SolenOS.",
|
||
},
|
||
{
|
||
media: <AssetRender render={renders.gateway} imgClassName="w-24" />,
|
||
title: "Anbinden",
|
||
description:
|
||
"Die Melder funken über dieselbe Gebäudeinfrastruktur wie die Verbrauchserfassung.",
|
||
},
|
||
{
|
||
media: (
|
||
<AssetRender render={renders.laptopDashboard} imgClassName="w-40" />
|
||
),
|
||
title: "Ferninspektion läuft",
|
||
description:
|
||
"Status, Meldungen und Inspektionsnachweise stehen laufend im Portal bereit.",
|
||
},
|
||
]
|
||
|
||
const INSPECTION_COLUMNS: ComparisonColumn[] = [
|
||
{ title: "Ferninspektion", highlight: true },
|
||
{ title: "Vor-Ort-Inspektion", check: false },
|
||
]
|
||
|
||
const INSPECTION_ROWS: ComparisonRow[] = [
|
||
{
|
||
label: "Termin in der Wohnung",
|
||
cells: ["nicht erforderlich", "je Wohnung, inklusive Nachterminen"],
|
||
},
|
||
{
|
||
label: "Prüfung",
|
||
cells: ["laufend durch den Melder", "einmal jährlich vor Ort"],
|
||
},
|
||
{
|
||
label: "Störungen",
|
||
cells: ["werden gemeldet, sobald sie auftreten", "fallen beim Jahrestermin auf"],
|
||
},
|
||
{
|
||
label: "Nachweis",
|
||
cells: ["automatisch dokumentiert", "Protokoll je Begehung"],
|
||
},
|
||
{
|
||
label: "Aufwand für Bewohner",
|
||
cells: ["keine Anwesenheitspflicht", "Anwesenheit erforderlich"],
|
||
},
|
||
]
|
||
|
||
const INCLUDED = [
|
||
"Rauchwarnmelder inklusive Montage und Eigentumsübertragung",
|
||
"Bedarfsermittlung je Wohnung aus den Gebäudedaten",
|
||
"regelmäßige Ferninspektion und Störungsmeldungen",
|
||
"Inspektionsnachweise je Wohnung im Portal",
|
||
"Support für Rückfragen von Verwaltung und Bewohnern",
|
||
]
|
||
|
||
const FAQS: FaqItem[] = [
|
||
{
|
||
question: "Wie oft müssen Rauchwarnmelder geprüft werden?",
|
||
answer:
|
||
"Mindestens einmal jährlich. Die Anwendungsnorm DIN 14676-1 lässt dafür neben der Vor-Ort-Inspektion auch die Teil- und die vollständige Ferninspektion zu, sofern die eingesetzten Melder dafür geeignet sind.",
|
||
},
|
||
{
|
||
question: "Ersetzt die Ferninspektion die Vor-Ort-Prüfung vollständig?",
|
||
answer:
|
||
"Bei Meldern, die für die vollständige Ferninspektion geeignet sind, kann die Sicherstellung der Betriebsbereitschaft über die Gerätelebensdauer aus der Ferne erfolgen. Anlassbezogene Einsätze bleiben möglich – etwa wenn ein Melder demontiert wurde, dauerhaft verschmutzt ist oder ausgetauscht werden muss.",
|
||
},
|
||
{
|
||
question: "Wer ist für die Rauchwarnmelder verantwortlich?",
|
||
answer:
|
||
"Einbau und Sicherstellung der Betriebsbereitschaft richten sich nach der Bauordnung des jeweiligen Landes. In den meisten Ländern trägt der Eigentümer die Verantwortung für die Betriebsbereitschaft; SolenOS liefert die Melder, die Inspektion und die Nachweise, mit denen diese Pflicht erfüllt werden kann.",
|
||
},
|
||
{
|
||
question: "Wann müssen die Melder ausgetauscht werden?",
|
||
answer:
|
||
"Spätestens nach zehn Jahren Nutzungsdauer. Einbaudatum und fälliger Austausch sind je Gerät und Wohnung im Portal hinterlegt, sodass der Austausch mit dem übrigen Gebäudebetrieb geplant werden kann.",
|
||
},
|
||
{
|
||
question: "Sind die Kosten umlagefähig?",
|
||
answer:
|
||
"Die laufenden Kosten der Ferninspektion sind grundsätzlich als Betriebskosten umlagefähig. Die einmaligen Kosten der Hardware inklusive Montage und Eigentumsübertragung sind es nicht – sie sind Anschaffungskosten des Eigentümers.",
|
||
},
|
||
{
|
||
question: "Kann ich Rauchwarnmelder später ergänzen?",
|
||
answer:
|
||
"Ja. Läuft der Messbetrieb bereits über SolenOS, wird die vorhandene Gebäudestruktur weiterverwendet: Wohnungen und Einheiten sind erfasst, die Melder werden lediglich ergänzt und angebunden.",
|
||
},
|
||
]
|
||
|
||
export default function RauchwarnmelderProductPage() {
|
||
return (
|
||
<ProductPage
|
||
breadcrumb="Rauchwarnmelder"
|
||
eyebrow="Produkt"
|
||
title="Rauchwarnmelder"
|
||
tagline="Geprüft, ohne zu klingeln."
|
||
lead="Ferninspizierbare Rauchwarnmelder inklusive Montage, jährlicher Inspektion nach DIN 14676-1 und lückenloser Dokumentation – über dieselbe Gebäudeinfrastruktur wie die Verbrauchserfassung."
|
||
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="/klarpreis">Gesamtangebot ansehen</Link>
|
||
</Button>
|
||
</>
|
||
}
|
||
note="Wenige Angaben · vollständige Prüfung im Folgeprozess"
|
||
visual={<SmokeAlarmHeroArt />}
|
||
features={[
|
||
{
|
||
icon: <Wifi strokeWidth={1.6} />,
|
||
title: "Ferninspizierbar",
|
||
sub: "Prüfung ohne Termin und ohne Anwesenheit der Bewohner.",
|
||
},
|
||
{
|
||
icon: <BellRing strokeWidth={1.6} />,
|
||
title: "Störung fällt sofort auf",
|
||
sub: "Verschmutzung, Batterie und Demontage werden gemeldet.",
|
||
},
|
||
{
|
||
icon: <ClipboardCheck strokeWidth={1.6} />,
|
||
title: "Nachweis je Wohnung",
|
||
sub: "Inspektionen und Austauschfristen sind dokumentiert.",
|
||
},
|
||
{
|
||
icon: <PortalGaugeIcon />,
|
||
title: "Im selben Portal",
|
||
sub: "Melder stehen neben Zählern und Verbrauchsdaten.",
|
||
},
|
||
]}
|
||
closing={
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<CtaBanner
|
||
icon={<ShieldCheck />}
|
||
title="Rauchwarnmelder für Ihr Gebäude"
|
||
description="Bedarf, Montage und Ferninspektion in einem Schritt – auch zusätzlich zu einem laufenden Messbetrieb."
|
||
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">
|
||
<SectionHeading
|
||
eyebrow="Pflichten"
|
||
title="Was für Rauchwarnmelder gilt"
|
||
lead="Einbaupflicht, jährliche Inspektion und Austausch nach zehn Jahren sind gesetzt. Unterschiedlich ist nur, wie viel Aufwand daraus entsteht."
|
||
/>
|
||
<TopicCards items={DUTIES} className="sm:grid-cols-2 lg:grid-cols-4" />
|
||
</Section>
|
||
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
eyebrow="Schritt für Schritt"
|
||
title="Von der Bedarfsermittlung zur laufenden Inspektion"
|
||
/>
|
||
<StepRail steps={ROLLOUT_STEPS} className="mt-10" />
|
||
</Section>
|
||
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
eyebrow="Im Vergleich"
|
||
title="Ferninspektion oder Vor-Ort-Inspektion"
|
||
lead="Beide Verfahren erfüllen die Norm. Der Unterschied liegt im Aufwand für Verwaltung und Bewohner – und darin, wie früh eine Störung auffällt."
|
||
/>
|
||
<ComparisonTable
|
||
className="mt-10"
|
||
columns={INSPECTION_COLUMNS}
|
||
rows={INSPECTION_ROWS}
|
||
labelHead="Inspektionsverfahren"
|
||
/>
|
||
</Section>
|
||
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
eyebrow="Gesamtangebot"
|
||
title="Hardware, Ferninspektion und Montage transparent zusammenführen"
|
||
lead="Geräteanzahl, Inspektionsumfang und gewählte Montagevariante werden nach der vollständigen Objektkonfiguration geprüft und gemeinsam angeboten."
|
||
/>
|
||
<div className="mt-10 grid gap-6 lg:grid-cols-[1fr_1fr_1.1fr]">
|
||
<PriceCard
|
||
title="Rauchwarnmelder"
|
||
cadence="Gesamtangebot"
|
||
price="Nach Prüfung"
|
||
unit="Geräteanzahl und Montagevariante"
|
||
description="Benötigte Rauchwarnmelder, vereinbarte Montage und Eigentumsübertragung."
|
||
media={<SmokeDetectorIllustration />}
|
||
/>
|
||
<PriceCard
|
||
title="Ferninspektion"
|
||
cadence="Gesamtangebot"
|
||
price="Nach Prüfung"
|
||
unit="passend zum vereinbarten Leistungsumfang"
|
||
description="Regelmäßige Prüfung, Nachweise, Meldungen und Support."
|
||
media={
|
||
<div className="relative">
|
||
<SmokeDetectorIllustration />
|
||
<Wifi className="absolute top-1 -right-1 size-5 text-primary" />
|
||
</div>
|
||
}
|
||
/>
|
||
<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" />
|
||
<Button
|
||
asChild
|
||
variant="link"
|
||
className="mt-6 h-auto self-start p-0 font-bold"
|
||
>
|
||
<Link to="/konfigurator">
|
||
Gesamtangebot konfigurieren
|
||
<ArrowRight />
|
||
</Link>
|
||
</Button>
|
||
</Card>
|
||
</div>
|
||
</Section>
|
||
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
align="center"
|
||
eyebrow="Häufige Fragen"
|
||
title="Fragen zu Rauchwarnmeldern"
|
||
/>
|
||
<FaqAccordion className="mt-10" items={FAQS} />
|
||
</Section>
|
||
|
||
<ProductCrossLinks current="/produkte/rauchwarnmelder" />
|
||
</ProductPage>
|
||
)
|
||
}
|