96 lines
3.0 KiB
JavaScript
96 lines
3.0 KiB
JavaScript
import { useState } from "react";
|
||
|
||
export default function Contact() {
|
||
const [sent, setSent] = useState(false);
|
||
|
||
return (
|
||
<section id="kontakt" className="section">
|
||
<div className="section-head">
|
||
<div>
|
||
<span className="num">— Sprechen wir</span>
|
||
</div>
|
||
<div>
|
||
<span className="eyebrow">finden Sie uns</span>
|
||
<h2>
|
||
Schreiben Sie uns — <em>wir freuen uns</em>.
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="contact">
|
||
<aside className="contact-card">
|
||
<div className="letterhead">
|
||
<h3>Familie Dotzauer</h3>
|
||
<span className="h">in der Werkstatt erreichbar</span>
|
||
</div>
|
||
<ul>
|
||
<li>
|
||
<strong>Werkstatt</strong>
|
||
<span className="value">Maiberger Str. 2 · 03044 Cottbus</span>
|
||
</li>
|
||
<li>
|
||
<strong>Telefon</strong>
|
||
<a href="tel:+4935586034 5">0355 / 86 03 45</a>
|
||
</li>
|
||
<li>
|
||
<strong>Notdienst (24 / 7)</strong>
|
||
<a href="tel:+4935586034 6">0355 / 86 03 46</a>
|
||
</li>
|
||
<li>
|
||
<strong>E-Post</strong>
|
||
<a href="mailto:info@dotzauer-kaelte-klima.de">
|
||
info@dotzauer-kaelte-klima.de
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<strong>Öffnungszeit</strong>
|
||
<span className="value">Mo – Fr · 7 – 17 Uhr</span>
|
||
</li>
|
||
</ul>
|
||
</aside>
|
||
|
||
<form
|
||
className="contact-form"
|
||
onSubmit={(e) => { e.preventDefault(); setSent(true); }}
|
||
>
|
||
<span className="form-label">
|
||
Hallo!
|
||
<span className="small">Erzählen Sie uns, worum es geht — wir antworten binnen eines Werktages.</span>
|
||
</span>
|
||
|
||
<div className="form-row">
|
||
<label>
|
||
<span>Ihr Name</span>
|
||
<input type="text" required placeholder="Vor- und Nachname" />
|
||
</label>
|
||
<label>
|
||
<span>E-Post</span>
|
||
<input type="email" required placeholder="ihre@adresse.de" />
|
||
</label>
|
||
</div>
|
||
|
||
<div className="form-row full">
|
||
<label>
|
||
<span>Worum geht es?</span>
|
||
<textarea rows="4" required placeholder="Was beschäftigt Sie? Welche Anlage, welcher Standort, welcher Termin?" />
|
||
</label>
|
||
</div>
|
||
|
||
{sent ? (
|
||
<p className="form-success">
|
||
Vielen Dank! Wir melden uns binnen eines Werktages bei Ihnen. — Familie Dotzauer
|
||
</p>
|
||
) : (
|
||
<div className="actions">
|
||
<span className="note">Wir antworten binnen 24h ✓</span>
|
||
<button type="submit" className="btn btn-primary">
|
||
Absenden <span className="arrow">→</span>
|
||
</button>
|
||
</div>
|
||
)}
|
||
</form>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|