91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import Navigation from '@/components/Navigation'
|
|
import Footer from '@/components/Footer'
|
|
|
|
export default function Kontakt() {
|
|
return (
|
|
<>
|
|
<Navigation />
|
|
<main>
|
|
<section className="page-hero">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="container"
|
|
>
|
|
<h1>Kontakt</h1>
|
|
<p className="page-hero-subtitle">
|
|
Wir freuen uns auf Ihre Nachricht
|
|
</p>
|
|
</motion.div>
|
|
</section>
|
|
|
|
<section className="page-content">
|
|
<div className="container">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="content-block"
|
|
>
|
|
<h2>Kontaktieren Sie uns</h2>
|
|
<p style={{ marginBottom: '40px' }}>
|
|
Haben Sie Fragen oder möchten Sie mehr über unsere Angebote erfahren? Schreiben Sie uns eine E-Mail oder buchen Sie direkt einen Termin.
|
|
</p>
|
|
|
|
<a
|
|
href="mailto:info@doing-it.de"
|
|
className="btn btn-primary btn-large"
|
|
style={{
|
|
display: 'inline-block',
|
|
marginBottom: '40px',
|
|
fontSize: '20px',
|
|
padding: '20px 40px'
|
|
}}
|
|
>
|
|
E-Mail senden: info@doing-it.de
|
|
</a>
|
|
</motion.div>
|
|
|
|
{/* Cal.com Widget */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="cal-widget"
|
|
>
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
height: '700px',
|
|
border: '1px solid rgba(255, 255, 255, 0.1)',
|
|
borderRadius: '20px',
|
|
overflow: 'hidden',
|
|
background: 'var(--color-card)'
|
|
}}
|
|
>
|
|
<iframe
|
|
src="https://cal.com/embed/doing-it-de"
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
border: 'none',
|
|
borderRadius: '20px'
|
|
}}
|
|
title="Cal.com Booking"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
)
|
|
}
|