Gitlab-Migration/demo-websites
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new Kontakt page with motion effects, integrated Google Maps embed, and a contact form using shadcn UI components. Update dependencies to include @radix-ui/react-select and related packages. Refactor KontaktForm to redirect to the new Kontakt page.

Browse Source
This commit is contained in:
Thatsaphorn
2025-06-26 10:55:05 +09:00
parent 0db35f0138
commit 11281ba316
4 changed files with 309 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
lawfirm-demos/demo-2/app/kontakt/page.tsx Normal file
View File

@@ -0,0 +1,101 @@
"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>
);
}