186 lines
8.2 KiB
TypeScript
186 lines
8.2 KiB
TypeScript
'use client';
|
|
|
|
import React from "react";
|
|
import {motion} from "framer-motion";
|
|
import {useThemeColors} from "@/utils/useThemeColors";
|
|
|
|
const ContactFormSection = () => {
|
|
const colors = useThemeColors();
|
|
|
|
return (
|
|
<div className="w-full px-6 sm:px-12 py-20 text-left transition-theme">
|
|
<motion.h2
|
|
className="text-2xl sm:text-3xl font-bold mb-2"
|
|
style={{color: colors.primaryText}}
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5}}
|
|
>
|
|
Schreib uns eine Nachricht
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
className="text-sm mb-8 max-w-xl"
|
|
style={{color: colors.secondaryText}}
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.2}}
|
|
>
|
|
Wir freuen uns über dein Interesse und melden uns schnellstmöglich bei dir zurück.
|
|
</motion.p>
|
|
|
|
<form className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<motion.div
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.1}}
|
|
>
|
|
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
|
|
Dein Name *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder="Max Mustermann"
|
|
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
|
|
style={{
|
|
backgroundColor: colors.inputFieldBg,
|
|
border: `1px solid ${colors.inputBorder}`,
|
|
color: colors.primaryText,
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.2}}
|
|
>
|
|
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
|
|
Deine E-Mail *
|
|
</label>
|
|
<input
|
|
type="email"
|
|
required
|
|
placeholder="max@example.com"
|
|
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
|
|
style={{
|
|
backgroundColor: colors.inputFieldBg,
|
|
border: `1px solid ${colors.inputBorder}`,
|
|
color: colors.primaryText,
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.3}}
|
|
>
|
|
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
|
|
Firmenname (optional)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder="Mustermann GmbH"
|
|
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
|
|
style={{
|
|
backgroundColor: colors.inputFieldBg,
|
|
border: `1px solid ${colors.inputBorder}`,
|
|
color: colors.primaryText,
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.4}}
|
|
>
|
|
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
|
|
Telefonnummer (optional)
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
placeholder="+49 123 456789"
|
|
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
|
|
style={{
|
|
backgroundColor: colors.inputFieldBg,
|
|
border: `1px solid ${colors.inputBorder}`,
|
|
color: colors.primaryText,
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.5}}
|
|
>
|
|
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
|
|
Webseite (optional)
|
|
</label>
|
|
<input
|
|
type="url"
|
|
placeholder="https://deinewebseite.de"
|
|
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
|
|
style={{
|
|
backgroundColor: colors.inputFieldBg,
|
|
border: `1px solid ${colors.inputBorder}`,
|
|
color: colors.primaryText,
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.6}}
|
|
>
|
|
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
|
|
Deine Nachricht *
|
|
</label>
|
|
<textarea
|
|
rows={4}
|
|
required
|
|
placeholder="Worum geht es?"
|
|
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
|
|
style={{
|
|
backgroundColor: colors.inputFieldBg,
|
|
border: `1px solid ${colors.inputBorder}`,
|
|
color: colors.primaryText,
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="pt-4 flex justify-end"
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.7}}
|
|
>
|
|
<button
|
|
type="submit"
|
|
className="px-6 py-3 bg-blue-600 text-white text-sm sm:text-base font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-all"
|
|
>
|
|
📩 Nachricht senden
|
|
</button>
|
|
</motion.div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContactFormSection;
|