102 lines
5.8 KiB
TypeScript
102 lines
5.8 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
|
||
export default function KontaktPage() {
|
||
return (
|
||
<section className="bg-white dark:bg-gray-950">
|
||
{/* Kontaktbereich */}
|
||
<div className="py-20 px-4 bg-white dark:bg-gray-950">
|
||
<div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-start">
|
||
{/* Textbereich */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -30 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
>
|
||
<h2 className="text-2xl md:text-3xl font-bold text-left text-gray-900 dark:text-white mb-4">
|
||
Kontaktinformationen
|
||
</h2>
|
||
|
||
<p className="text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
|
||
Sie möchten einen Termin vereinbaren oder haben Fragen zu meinen Leistungen?
|
||
Senden Sie mir gern eine Nachricht über das Kontaktformular oder melden Sie sich direkt per E-Mail.
|
||
</p>
|
||
<div className="text-gray-800 dark:text-gray-300 space-y-2 text-sm">
|
||
<p><strong>Telefon:</strong> 030 / 123 456 78</p>
|
||
<p><strong>E-Mail:</strong> kontakt@kanzlei-mustermann.de</p>
|
||
<p><strong>Adresse:</strong> Musterstraße 1, 10115 Berlin</p>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Google Maps */}
|
||
<motion.div
|
||
className="w-full h-80 rounded-lg overflow-hidden"
|
||
initial={{ opacity: 0, x: 30 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
>
|
||
<iframe
|
||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2429.994634045578!2d13.388859315790138!3d52.51703617981242!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a851e3be111111%3A0x35e53e39c16c110b!2sReichstagsgeb%C3%A4ude!5e0!3m2!1sde!2sde!4v1619442878930!5m2!1sde!2sde"
|
||
width="100%"
|
||
height="100%"
|
||
style={{ border: 0 }}
|
||
allowFullScreen={false}
|
||
loading="lazy"
|
||
referrerPolicy="no-referrer-when-downgrade"
|
||
></iframe>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Formular unterhalb */}
|
||
<motion.div
|
||
className="max-w-4xl mx-auto mt-16"
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
>
|
||
<form onSubmit={(e) => e.preventDefault()} className="space-y-6 pt-6">
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
<div className="md:col-span-1">
|
||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Anrede</label>
|
||
<Select required>
|
||
<SelectTrigger className="w-full">
|
||
<SelectValue placeholder="Bitte auswählen..." />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="herr">Herr</SelectItem>
|
||
<SelectItem value="frau">Frau</SelectItem>
|
||
<SelectItem value="divers">Divers</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Titel</label>
|
||
<Input className="h-12" type="text" placeholder="z. B. Dr." />
|
||
</div>
|
||
<Input className="md:col-span-1 h-12" type="text" placeholder="Vorname*" required />
|
||
<Input className="md:col-span-1 h-12" type="text" placeholder="Nachname*" required />
|
||
<Input className="md:col-span-2 h-12" type="text" placeholder="Straße und Hausnummer*" required />
|
||
<Input className="md:col-span-1 h-12" type="text" placeholder="PLZ*" required />
|
||
<Input className="md:col-span-1 h-12" type="text" placeholder="Ort*" required />
|
||
<Input className="md:col-span-1 h-12" type="text" placeholder="Telefon" />
|
||
<Input className="md:col-span-1 h-12" type="email" placeholder="E-Mail*" required />
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Ihre Nachricht</label>
|
||
<Textarea required rows={8} placeholder="Ihre Nachricht" className="text-base h-48" />
|
||
</div>
|
||
<Button type="submit" className="w-full h-12 text-base">
|
||
Senden
|
||
</Button>
|
||
</form>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|