353 lines
12 KiB
TypeScript
353 lines
12 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { Mail, Phone, MapPin, Send, CheckCircle } from 'lucide-react';
|
|
|
|
const Contact = () => {
|
|
const [submitted, setSubmitted] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
const formData = new FormData(e.currentTarget);
|
|
const data = Object.fromEntries(formData.entries());
|
|
|
|
try {
|
|
const response = await fetch('/api/contact', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data),
|
|
});
|
|
if (response.ok) {
|
|
setSubmitted(true);
|
|
} else {
|
|
const err = await response.json();
|
|
alert(`Fehler: ${err.error || 'Es gab einen Fehler beim Senden Ihrer Nachricht.'}`);
|
|
}
|
|
} catch (error) {
|
|
alert('Es gab einen Fehler beim Senden Ihrer Nachricht.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="container">
|
|
<section>
|
|
<div className="grid contact-grid" style={{
|
|
gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
|
|
gap: 'clamp(2rem, 6vw, 4rem)'
|
|
}}>
|
|
<div>
|
|
<h1>Kontakt</h1>
|
|
<p style={{
|
|
fontSize: 'clamp(1.0625rem, 2.5vw, 1.1rem)',
|
|
color: 'var(--text-secondary)',
|
|
marginBottom: 'var(--spacing-2xl)',
|
|
lineHeight: 1.65
|
|
}}>
|
|
Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
|
|
</p>
|
|
|
|
<div style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 'var(--spacing-xl)'
|
|
}}>
|
|
<a
|
|
href="mailto:info@mb-grid-solutions.com"
|
|
className="contact-info-item"
|
|
style={{
|
|
display: 'flex',
|
|
gap: 'var(--spacing-lg)',
|
|
alignItems: 'flex-start',
|
|
textDecoration: 'none'
|
|
}}
|
|
aria-label="E-Mail an info@mb-grid-solutions.com senden"
|
|
>
|
|
<div style={{
|
|
color: 'var(--accent-green)',
|
|
background: 'white',
|
|
padding: 'var(--spacing-md)',
|
|
border: '1px solid var(--secondary-bg)',
|
|
borderRadius: '12px',
|
|
flexShrink: 0
|
|
}}>
|
|
<Mail size={24} strokeWidth={2} />
|
|
</div>
|
|
<div>
|
|
<h4 style={{
|
|
marginBottom: '0.25rem',
|
|
fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
|
|
fontWeight: 600
|
|
}}>
|
|
E-Mail
|
|
</h4>
|
|
<span style={{
|
|
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
|
|
fontWeight: 500,
|
|
color: 'var(--primary-color)'
|
|
}}>
|
|
info@mb-grid-solutions.com
|
|
</span>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="tel:+49123456789"
|
|
className="contact-info-item"
|
|
style={{
|
|
display: 'flex',
|
|
gap: 'var(--spacing-lg)',
|
|
alignItems: 'flex-start',
|
|
textDecoration: 'none'
|
|
}}
|
|
aria-label="Anrufen unter +49 (0) 123 456789"
|
|
>
|
|
<div style={{
|
|
color: 'var(--accent-green)',
|
|
background: 'white',
|
|
padding: 'var(--spacing-md)',
|
|
border: '1px solid var(--secondary-bg)',
|
|
borderRadius: '12px',
|
|
flexShrink: 0
|
|
}}>
|
|
<Phone size={24} strokeWidth={2} />
|
|
</div>
|
|
<div>
|
|
<h4 style={{
|
|
marginBottom: '0.25rem',
|
|
fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
|
|
fontWeight: 600
|
|
}}>
|
|
Telefon
|
|
</h4>
|
|
<span style={{
|
|
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
|
|
fontWeight: 500,
|
|
color: 'var(--primary-color)'
|
|
}}>
|
|
+49 (0) 123 456789
|
|
</span>
|
|
</div>
|
|
</a>
|
|
<div
|
|
className="contact-info-item"
|
|
style={{
|
|
display: 'flex',
|
|
gap: 'var(--spacing-lg)',
|
|
alignItems: 'flex-start'
|
|
}}
|
|
>
|
|
<div style={{
|
|
color: 'var(--accent-green)',
|
|
background: 'white',
|
|
padding: 'var(--spacing-md)',
|
|
border: '1px solid var(--secondary-bg)',
|
|
borderRadius: '12px',
|
|
flexShrink: 0
|
|
}}>
|
|
<MapPin size={24} strokeWidth={2} />
|
|
</div>
|
|
<div>
|
|
<h4 style={{
|
|
marginBottom: '0.25rem',
|
|
fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
|
|
fontWeight: 600
|
|
}}>
|
|
Anschrift
|
|
</h4>
|
|
<p style={{
|
|
fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
|
|
fontWeight: 500,
|
|
color: 'var(--primary-color)',
|
|
lineHeight: 1.6
|
|
}}>
|
|
MB Grid Solutions GmbH<br />
|
|
Raiffeisenstraße 22<br />
|
|
73630 Remshalden
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card">
|
|
{submitted ? (
|
|
<div style={{
|
|
textAlign: 'center',
|
|
padding: 'clamp(2rem, 6vw, 3rem) 0'
|
|
}}>
|
|
<div style={{
|
|
color: 'var(--accent-green)',
|
|
marginBottom: 'var(--spacing-lg)',
|
|
display: 'flex',
|
|
justifyContent: 'center'
|
|
}}>
|
|
<CheckCircle size={64} strokeWidth={2} />
|
|
</div>
|
|
<h3 style={{
|
|
fontSize: 'clamp(1.25rem, 4vw, 1.5rem)',
|
|
marginBottom: 'var(--spacing-md)'
|
|
}}>
|
|
Nachricht gesendet
|
|
</h3>
|
|
<p style={{
|
|
color: 'var(--text-secondary)',
|
|
fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
|
|
lineHeight: 1.65,
|
|
marginBottom: 'var(--spacing-xl)'
|
|
}}>
|
|
Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.
|
|
</p>
|
|
<button
|
|
onClick={() => setSubmitted(false)}
|
|
className="cta-button"
|
|
aria-label="Weitere Nachricht senden"
|
|
>
|
|
Weitere Nachricht
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} style={{
|
|
display: 'flex',
|
|
flexDirection: 'column'
|
|
}}>
|
|
<div className="grid contact-form-grid" style={{
|
|
gridTemplateColumns: '1fr 1fr',
|
|
gap: 'var(--spacing-md)'
|
|
}}>
|
|
<div>
|
|
<label
|
|
htmlFor="name"
|
|
style={{
|
|
display: 'block',
|
|
marginBottom: 'var(--spacing-xs)',
|
|
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
|
|
fontWeight: 600
|
|
}}
|
|
>
|
|
Name *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
required
|
|
minLength={2}
|
|
maxLength={100}
|
|
placeholder="Ihr Name"
|
|
aria-required="true"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
htmlFor="company"
|
|
style={{
|
|
display: 'block',
|
|
marginBottom: 'var(--spacing-xs)',
|
|
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
|
|
fontWeight: 600
|
|
}}
|
|
>
|
|
Firma
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="company"
|
|
name="company"
|
|
placeholder="Ihr Unternehmen"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<label
|
|
htmlFor="email"
|
|
style={{
|
|
display: 'block',
|
|
marginBottom: 'var(--spacing-xs)',
|
|
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
|
|
fontWeight: 600
|
|
}}
|
|
>
|
|
E-Mail *
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
required
|
|
placeholder="ihre@email.de"
|
|
aria-required="true"
|
|
/>
|
|
|
|
<label
|
|
htmlFor="message"
|
|
style={{
|
|
display: 'block',
|
|
marginBottom: 'var(--spacing-xs)',
|
|
fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
|
|
fontWeight: 600
|
|
}}
|
|
>
|
|
Nachricht *
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
required
|
|
minLength={20}
|
|
maxLength={4000}
|
|
rows={6}
|
|
placeholder="Wie können wir Ihnen helfen?"
|
|
aria-required="true"
|
|
></textarea>
|
|
|
|
<div className="visually-hidden" style={{ display: 'none' }}>
|
|
<label htmlFor="website">Website (bitte leer lassen)</label>
|
|
<input
|
|
type="text"
|
|
id="website"
|
|
name="website"
|
|
tabIndex={-1}
|
|
autoComplete="off"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="cta-button"
|
|
style={{ alignSelf: 'flex-start' }}
|
|
aria-label={loading ? 'Nachricht wird gesendet' : 'Nachricht senden'}
|
|
>
|
|
{loading ? 'Wird gesendet...' : 'Nachricht senden'} <Send size={18} strokeWidth={2.5} />
|
|
</button>
|
|
<p style={{
|
|
fontSize: 'clamp(0.6875rem, 2vw, 0.75rem)',
|
|
marginTop: 'var(--spacing-lg)',
|
|
color: 'var(--text-secondary)',
|
|
lineHeight: 1.5
|
|
}}>
|
|
* Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
|
|
<Link
|
|
to="/datenschutz"
|
|
style={{
|
|
textDecoration: 'underline',
|
|
fontWeight: 500
|
|
}}
|
|
>
|
|
Datenschutzerklärung
|
|
</Link>{' '}
|
|
einverstanden.
|
|
</p>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Contact;
|