50 lines
2.8 KiB
React
50 lines
2.8 KiB
React
import React from 'react'
|
|
import { useSearchParams, Link } from 'react-router-dom'
|
|
import SEOHead from '../components/SEOHead'
|
|
|
|
export default function Confirmation() {
|
|
const [searchParams] = useSearchParams()
|
|
const status = searchParams.get('status')
|
|
|
|
const isSuccess = status === 'success'
|
|
|
|
return (
|
|
<>
|
|
<SEOHead
|
|
title={isSuccess ? "Vielen Dank" : "Ein Fehler ist aufgetreten"}
|
|
description={isSuccess ? "Ihre Nachricht wurde erfolgreich gesendet." : "Es gab ein Problem beim Senden Ihrer Nachricht."}
|
|
/>
|
|
<main style={{ paddingTop: '120px', minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<div className="app-container" style={{ textAlign: 'center', maxWidth: '600px' }}>
|
|
{isSuccess ? (
|
|
<>
|
|
<div style={{ width: '80px', height: '80px', borderRadius: '50%', background: 'rgba(34, 197, 94, 0.1)', color: '#22c55e', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px' }}>
|
|
<svg width="40" height="40" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<h1 style={{ fontSize: '3rem', marginBottom: '16px' }}><span className="text-gradient">Vielen Dank!</span></h1>
|
|
<p style={{ color: 'var(--text-secondary)', fontSize: '1.2rem', marginBottom: '32px' }}>
|
|
Ihre Nachricht wurde erfolgreich gesendet. Ich werde mich so schnell wie möglich bei Ihnen melden.
|
|
</p>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div style={{ width: '80px', height: '80px', borderRadius: '50%', background: 'rgba(239, 68, 68, 0.1)', color: '#ef4444', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px' }}>
|
|
<svg width="40" height="40" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</div>
|
|
<h1 style={{ fontSize: '3rem', marginBottom: '16px' }}><span className="text-gradient">Ein Fehler ist aufgetreten</span></h1>
|
|
<p style={{ color: 'var(--text-secondary)', fontSize: '1.2rem', marginBottom: '32px' }}>
|
|
Leider gab es ein Problem beim Senden Ihrer Nachricht. Bitte versuchen Sie es später noch einmal oder kontaktieren Sie mich direkt per E-Mail.
|
|
</p>
|
|
</>
|
|
)}
|
|
<Link to="/" className="primary-button">Zurück zur Startseite</Link>
|
|
</div>
|
|
</main>
|
|
</>
|
|
)
|
|
}
|