rootandClaude Opus 5.5
1c8cfa5c1c
- Hero: wechselnde Überschrift (ein Durchlauf, Pause-Knopf), Karte zeichnet sich, roter Punkt auf Falkenstein - Kundenportal: Bühne mit Browserfenster und Handy-Rahmen (Desktop), Wisch-Reihe (Handy), Schrittzeile statt „So arbeiten wir“ - Leistungen als nummerierte Zeilen, Preise aus src/data/abos.ts - Unterseiten ohne eigenen Kopfbereich, Wortlaut der Rechtstexte unverändert - Tests für Hero, Kundenportal, Leistungen/Preise und Layout Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { ABOS, preisText, weitereArbeitTeile } from "@/data/abos";
|
|
import "./preise.css";
|
|
|
|
/** Spezifikation 7.5 (Standardtext; der Preisanker für O1 ist noch nicht freigegeben). */
|
|
const EINLEITUNG =
|
|
"Für Ihr Projekt bekommen Sie vorher ein Angebot mit Preis. Für den Betrieb danach gibt es zwei Abos. " +
|
|
"Alle Preise sind Endpreise; als Kleinunternehmer (§\u00a019\u00a0UStG) berechnen wir keine Umsatzsteuer.";
|
|
|
|
/** Spezifikation 7.5: zwei Abos nebeneinander (Handy untereinander). Zahlen kommen aus src/data/abos.ts. */
|
|
const Preise = () => {
|
|
const [vorher, schritte, nachher] = weitereArbeitTeile();
|
|
|
|
return (
|
|
<section id="preise" className="wk-section wk-section--alt wk-preise" aria-labelledby="preise-titel">
|
|
<div className="wk-container">
|
|
<h2 id="preise-titel" className="wk-h2 wk-reveal">
|
|
Was es kostet. Vorher.
|
|
</h2>
|
|
<p className="wk-lead wk-reveal">{EINLEITUNG}</p>
|
|
|
|
<div className="wk-preise__raster">
|
|
{ABOS.map((abo) => (
|
|
<article key={abo.id} className="wk-abo wk-reveal" aria-labelledby={`abo-${abo.id}`}>
|
|
<h3 id={`abo-${abo.id}`} className="wk-h3 wk-abo__name">
|
|
{abo.name}
|
|
</h3>
|
|
<p className="wk-abo__preis">
|
|
<span className="wk-abo__betrag wk-num">{preisText(abo.preis)}</span>{" "}
|
|
<span className="wk-abo__einheit">im Monat</span>
|
|
</p>
|
|
<p className="wk-abo__text">{abo.beschreibung}</p>
|
|
<p className="wk-abo__aktion">
|
|
<Link to={abo.link.to} className="wk-link wk-abo__link">
|
|
{abo.link.text}
|
|
</Link>
|
|
</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
<p className="wk-preise__weitere wk-reveal">
|
|
{vorher}
|
|
<span className="wk-preise__nicht-trennen">{schritte}</span>
|
|
{nachher}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Preise;
|