Ihor_Zhekov/Superfice_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit — Superfice.de website

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ihor_Zhekov
2026-04-30 16:11:39 +02:00
commit 75beb3607e
63 changed files with 11514 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/components/Contact/Contact.jsx Normal file
View File

@@ -0,0 +1,112 @@
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&nbsp;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>
)
}