113 lines
5.1 KiB
JavaScript
113 lines
5.1 KiB
JavaScript
import './Contact.css'
|
||
|
||
// Replace BOOKING_URL with your actual booking portal URL
|
||
const BOOKING_URL = 'https://termine.superfice.de'
|
||
|
||
export default function Contact() {
|
||
return (
|
||
<div className="contact section">
|
||
<div className="container">
|
||
<div className="contact-inner">
|
||
|
||
{/* Left: copy */}
|
||
<div className="contact-copy">
|
||
<span className="contact-label">Kontakt</span>
|
||
<h2 className="contact-title">Bereit für Ihr Aufmaß?</h2>
|
||
<p className="contact-body">
|
||
Buchen Sie Ihren Termin direkt online – wählen Sie Datum, Uhrzeit und
|
||
Aufmaßbereiche in unserem Buchungsportal. Schnell, unkompliziert, verbindlich.
|
||
</p>
|
||
|
||
<div className="contact-promises">
|
||
<div className="contact-promise">
|
||
<div className="contact-promise-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.5"/>
|
||
<path d="M10 6v4l2.5 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
|
||
</svg>
|
||
</div>
|
||
Terminbestätigung innerhalb von Minuten
|
||
</div>
|
||
<div className="contact-promise">
|
||
<div className="contact-promise-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<path d="M4 10l4 4 8-8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
Aufmaß-Ergebnis innerhalb von 24 Stunden
|
||
</div>
|
||
<div className="contact-promise">
|
||
<div className="contact-promise-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<rect x="3" y="4" width="14" height="13" rx="2" stroke="currentColor" strokeWidth="1.5"/>
|
||
<path d="M3 9h14M7 4V2M13 4V2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
|
||
</svg>
|
||
</div>
|
||
Flexibel stornierbar bis 24 h vorher
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right: CTA card */}
|
||
<div className="contact-card">
|
||
<div className="contact-card-top">
|
||
<div className="contact-card-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<rect x="6" y="10" width="36" height="32" rx="3" stroke="currentColor" strokeWidth="2"/>
|
||
<path d="M6 20h36" stroke="currentColor" strokeWidth="2"/>
|
||
<path d="M16 6v8M32 6v8" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
|
||
<rect x="14" y="28" width="6" height="6" rx="1" fill="currentColor" opacity="0.6"/>
|
||
<rect x="28" y="28" width="6" height="6" rx="1" fill="currentColor" opacity="0.3"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div className="contact-card-heading">Termin buchen</div>
|
||
<div className="contact-card-sub">Online · Sofort bestätigt</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a
|
||
href={BOOKING_URL}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="btn btn--primary contact-book-btn"
|
||
>
|
||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
|
||
<rect x="2" y="3" width="14" height="13" rx="2" stroke="currentColor" strokeWidth="1.5"/>
|
||
<path d="M2 8h14" stroke="currentColor" strokeWidth="1.5"/>
|
||
<path d="M6 1v4M12 1v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
|
||
</svg>
|
||
Jetzt Termin wählen
|
||
</a>
|
||
|
||
<div className="contact-divider">
|
||
<span>oder direkt melden</span>
|
||
</div>
|
||
|
||
<div className="contact-direct">
|
||
<a href="mailto:info@superfice.de" className="contact-direct-link">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
||
<rect x="1" y="3" width="14" height="10" rx="2" stroke="currentColor" strokeWidth="1.5"/>
|
||
<path d="M1 5l7 5 7-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
|
||
</svg>
|
||
info@superfice.de
|
||
</a>
|
||
<a href="tel:+4930000000" className="contact-direct-link">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
||
<path d="M3 2h3l1.5 3.5-2 1.5a8 8 0 003.5 3.5l1.5-2L14 10v3a1 1 0 01-1 1C6 14 2 8 2 3a1 1 0 011-1z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
|
||
</svg>
|
||
+49 30 000000
|
||
</a>
|
||
</div>
|
||
|
||
<p className="contact-card-note">
|
||
Mo–Fr, 8–18 Uhr · Antwort garantiert innerhalb von 24 h
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|