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

49
lawfirm-demos/demo-2/components/KontaktForm.tsx
View File

@@ -1,29 +1,28 @@
"use client";
import {Input} from "@/components/ui/input";
import {Textarea} from "@/components/ui/textarea";
import {Button} from "@/components/ui/button";
import {motion} from "framer-motion";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import { useRouter } from "next/navigation";
export default function KontaktForm() {
const router = useRouter();
return (
<section className="py-20 px-4 bg-[#f9f9f6] dark:bg-[#1a1a1a]">
<div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-start">
<div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
{/* Text links */}
<motion.div
initial={{opacity: 0, x: -30}}
whileInView={{opacity: 1, x: 0}}
transition={{duration: 0.6}}
viewport={{once: true}}
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6 }}
viewport={{ once: true }}
>
<h2 className="text-3xl md:text-4xl font-bold text-left text-gray-900 dark:text-white mb-4">
Kontakt
</h2>
<div className="w-20 h-1 bg-yellow-500 rounded mb-6"/>
<div className="w-20 h-1 bg-yellow-500 rounded mb-6" />
<p className="text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
Sie haben Fragen oder möchten einen Beratungstermin vereinbaren? Nutzen Sie gern das
Kontaktformular oder schreiben Sie mir direkt per E-Mail. Ich melde mich schnellstmöglich bei
Ihnen zurück.
Sie haben Fragen oder möchten einen Beratungstermin vereinbaren? Nutzen Sie gern das Kontaktformular auf der nächsten Seite oder schreiben Sie mir 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>
@@ -32,22 +31,18 @@ export default function KontaktForm() {
</div>
</motion.div>
{/* Formular rechts */}
<motion.form
className="space-y-6"
initial={{opacity: 0, x: 30}}
whileInView={{opacity: 1, x: 0}}
transition={{duration: 0.6, delay: 0.2}}
viewport={{once: true}}
onSubmit={(e) => e.preventDefault()} // Dummy – kann ersetzt werden
{/* CTA rechts */}
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
viewport={{ once: true }}
className="w-full flex justify-center"
>
<Input type="text" placeholder="Ihr Name" required/>
<Input type="email" placeholder="Ihre E-Mail" required/>
<Textarea placeholder="Ihre Nachricht" rows={5} required/>
<Button type="submit" className="w-full">
Nachricht senden
<Button size="lg" className="px-10 py-6 text-base" onClick={() => router.push("/kontakt")}>
Zum Kontaktformular
</Button>
</motion.form>
</motion.div>
</div>
</section>
);