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>
104 lines
3.3 KiB
TypeScript
104 lines
3.3 KiB
TypeScript
import { Link } from "react-router-dom";
|
||
import { usePageMeta } from "@/hooks/use-page-meta";
|
||
import "./unterseiten.css";
|
||
|
||
/** „Der Unterschied“: nummerierte Textzeilen statt Karten (Phase 2 schreibt die ganze Seite neu). */
|
||
const UNTERSCHIED = [
|
||
{
|
||
nr: "01",
|
||
titel: "Alles aus einer Hand",
|
||
text: "Website, Automation und Schnittstellen aus einer Hand – ein Ansprechpartner statt fünf Agenturen.",
|
||
},
|
||
{
|
||
nr: "02",
|
||
titel: "Systeme statt Inseln",
|
||
text: "CRM, Formulare und Website tauschen Daten – ohne manuelles Nachpflegen.",
|
||
},
|
||
{
|
||
nr: "03",
|
||
titel: "Betreuung im Abo",
|
||
text: "Nach dem Go-live kümmern wir uns im Wartungs-Abo um Updates und kleine Änderungen.",
|
||
},
|
||
];
|
||
|
||
const About = () => {
|
||
usePageMeta(
|
||
"Über uns",
|
||
"WEBklar hilft KMU beim digitalen Wachstum: Systeme statt Chaos, ein Partner für Website, Prozesse und Automatisierung."
|
||
);
|
||
|
||
return (
|
||
<>
|
||
<div className="wk-seite">
|
||
<div className="wk-container">
|
||
<div className="wk-seite__kopf">
|
||
<span className="wk-eyebrow">Über WEBklar</span>
|
||
<h1 className="wk-seite__titel">Digitalisierung, die im Alltag spürbar wird.</h1>
|
||
</div>
|
||
|
||
<div className="wk-ueber__text">
|
||
<p>
|
||
WEBklar ist die Webagentur für Unternehmen, die wachsen wollen – ohne
|
||
dass Geschäftsführung und Team unter Tool-Chaos und manuellen Abläufen leiden.
|
||
</p>
|
||
|
||
<p>
|
||
Wir verbinden <strong>Website, Prozesse und Automatisierung</strong> zu einem System. Kein
|
||
isoliertes Redesign, kein weiteres Plugin – sondern eine Lösung, die Anfragen, Daten und Abläufe
|
||
zusammenführt.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="wk-ueber__aussage">
|
||
<p>Unser Anspruch: weniger Reibung.</p>
|
||
<p>Mehr planbares Wachstum.</p>
|
||
</div>
|
||
|
||
<p className="wk-ueber__schluss">
|
||
Starten Sie mit einem kostenlosen Gespräch – wir zeigen Ihnen die nächsten Schritte.
|
||
</p>
|
||
|
||
<div className="wk-seite__aktionen">
|
||
<Link to="/kontakt" className="wk-btn wk-btn--primary">
|
||
Projekt besprechen
|
||
</Link>
|
||
<Link to="/" className="wk-btn wk-btn--secondary">
|
||
Zur Startseite
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Der Unterschied */}
|
||
<section className="wk-section wk-section--alt" aria-labelledby="unterschied-titel">
|
||
<div className="wk-container">
|
||
<span className="wk-eyebrow">Der Unterschied</span>
|
||
<h2 id="unterschied-titel" className="wk-h2">
|
||
Warum Unternehmen zu uns wechseln.
|
||
</h2>
|
||
|
||
<ol className="wk-unterschied" role="list">
|
||
{UNTERSCHIED.map((punkt) => (
|
||
<li key={punkt.nr}>
|
||
<p className="wk-unterschied__nr" aria-hidden>
|
||
{punkt.nr}
|
||
</p>
|
||
<h3 className="wk-h3">{punkt.titel}</h3>
|
||
<p>{punkt.text}</p>
|
||
</li>
|
||
))}
|
||
</ol>
|
||
|
||
<div className="wk-seite__aktionen">
|
||
<Link to="/kontakt" className="wk-btn wk-btn--primary">
|
||
Projekt besprechen
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default About;
|