update
This commit is contained in:
@@ -1,6 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Mail, Phone, MapPin, Send, CheckCircle } from 'lucide-react';
|
||||
|
||||
const Contact = () => {
|
||||
@@ -35,36 +34,134 @@ const Contact = () => {
|
||||
return (
|
||||
<div className="container">
|
||||
<section>
|
||||
<div className="grid contact-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '4rem' }}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
>
|
||||
<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: '1.1rem', color: 'var(--text-secondary)', marginBottom: '3rem' }}>
|
||||
<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: '2rem' }}>
|
||||
<div className="contact-info-item" style={{ display: 'flex', gap: '1.5rem', alignItems: 'flex-start' }}>
|
||||
<div style={{ color: 'var(--accent-green)', background: 'white', padding: '1rem', border: '1px solid var(--secondary-bg)' }}><Mail size={24} /></div>
|
||||
<div>
|
||||
<h4 style={{ marginBottom: '0.25rem', fontSize: '1rem' }}>E-Mail</h4>
|
||||
<a href="mailto:info@mb-grid-solutions.com" style={{ fontSize: '1.1rem', fontWeight: 500 }}>info@mb-grid-solutions.com</a>
|
||||
<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>
|
||||
<div className="contact-info-item" style={{ display: 'flex', gap: '1.5rem', alignItems: 'flex-start' }}>
|
||||
<div style={{ color: 'var(--accent-green)', background: 'white', padding: '1rem', border: '1px solid var(--secondary-bg)' }}><Phone size={24} /></div>
|
||||
<div>
|
||||
<h4 style={{ marginBottom: '0.25rem', fontSize: '1rem' }}>Telefon</h4>
|
||||
<a href="tel:+49123456789" style={{ fontSize: '1.1rem', fontWeight: 500 }}>+49 (0) 123 456789</a>
|
||||
<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>
|
||||
<div className="contact-info-item" style={{ display: 'flex', gap: '1.5rem', alignItems: 'flex-start' }}>
|
||||
<div style={{ color: 'var(--accent-green)', background: 'white', padding: '1rem', border: '1px solid var(--secondary-bg)' }}><MapPin size={24} /></div>
|
||||
<div>
|
||||
<h4 style={{ marginBottom: '0.25rem', fontSize: '1rem' }}>Anschrift</h4>
|
||||
<p style={{ fontSize: '1.1rem', fontWeight: 500, color: 'var(--primary-color)' }}>
|
||||
<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
|
||||
@@ -72,54 +169,180 @@ const Contact = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="card"
|
||||
>
|
||||
<div className="card">
|
||||
{submitted ? (
|
||||
<div style={{ textAlign: 'center', padding: '3rem 0' }}>
|
||||
<div style={{ color: 'var(--accent-green)', marginBottom: '1.5rem' }}><CheckCircle size={64} /></div>
|
||||
<h3>Nachricht gesendet</h3>
|
||||
<p style={{ color: 'var(--text-secondary)' }}>Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.</p>
|
||||
<button onClick={() => setSubmitted(false)} className="cta-button" style={{ marginTop: '2rem' }}>Weitere Nachricht</button>
|
||||
<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: '1rem' }}>
|
||||
<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: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Name *</label>
|
||||
<input type="text" id="name" name="name" required minLength={2} maxLength={100} placeholder="Ihr Name" />
|
||||
<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: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Firma</label>
|
||||
<input type="text" id="company" name="company" placeholder="Ihr Unternehmen" />
|
||||
<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: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>E-Mail *</label>
|
||||
<input type="email" id="email" name="email" required placeholder="ihre@email.de" />
|
||||
<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: '0.5rem', fontSize: '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?"></textarea>
|
||||
<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">
|
||||
<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" />
|
||||
<input
|
||||
type="text"
|
||||
id="website"
|
||||
name="website"
|
||||
tabIndex={-1}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" disabled={loading} className="cta-button" style={{ alignSelf: 'flex-start' }}>
|
||||
{loading ? 'Wird gesendet...' : 'Nachricht senden'} <Send size={18} />
|
||||
<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: '0.75rem', marginTop: '1.5rem', color: 'var(--text-secondary)', lineHeight: 1.4 }}>
|
||||
* Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer <Link to="/datenschutz" style={{ textDecoration: 'underline' }}>Datenschutzerklärung</Link> einverstanden.
|
||||
<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>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user