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

192
src/components/Contact/Contact.css Normal file
View File

@@ -0,0 +1,192 @@
.contact {
background: rgba(18, 18, 18, 0.68);
border-top: 1px solid var(--color-border);
}
.contact-inner {
display: grid;
grid-template-columns: 1fr 420px;
gap: var(--space-16);
align-items: start;
}
/* Left copy */
.contact-copy {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.contact-label {
font-size: var(--font-size-xs);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-accent);
font-weight: 600;
}
.contact-title {
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--color-text);
line-height: 1.1;
}
.contact-body {
font-size: var(--font-size-md);
color: var(--color-text-muted);
line-height: 1.7;
max-width: 440px;
}
.contact-promises {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: var(--space-4);
}
.contact-promise {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.contact-promise-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-accent-dim);
border: 1px solid var(--color-accent-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
flex-shrink: 0;
}
.contact-promise-icon svg {
width: 14px;
height: 14px;
}
/* Right card */
.contact-card {
background: var(--color-surface-2);
border: 1px solid var(--color-accent-border);
border-radius: var(--radius-xl);
padding: var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-5);
box-shadow: var(--shadow-accent);
}
.contact-card-top {
display: flex;
align-items: center;
gap: var(--space-4);
}
.contact-card-icon {
width: 52px;
height: 52px;
border-radius: var(--radius-lg);
background: var(--color-accent-dim);
border: 1px solid var(--color-accent-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
flex-shrink: 0;
}
.contact-card-icon svg {
width: 28px;
height: 28px;
}
.contact-card-heading {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--color-text);
line-height: 1.2;
}
.contact-card-sub {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
margin-top: var(--space-1);
}
.contact-book-btn {
width: 100%;
justify-content: center;
font-size: 1rem;
padding: 1rem 1.5rem;
gap: var(--space-3);
}
.contact-divider {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--color-text-faint);
font-size: var(--font-size-xs);
}
.contact-divider::before,
.contact-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--color-border);
}
.contact-direct {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.contact-direct-link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0.75rem 1rem;
background: var(--color-surface-3);
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
transition: all var(--transition);
}
.contact-direct-link:hover {
border-color: var(--color-accent-border);
color: var(--color-text);
background: var(--color-accent-dim);
}
.contact-direct-link svg {
color: var(--color-accent);
flex-shrink: 0;
}
.contact-card-note {
font-size: var(--font-size-xs);
color: var(--color-text-faint);
text-align: center;
padding-top: var(--space-2);
border-top: 1px solid var(--color-border);
}
@media (max-width: 960px) {
.contact-inner {
grid-template-columns: 1fr;
max-width: 560px;
}
}

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>
)
}