102 lines
4.2 KiB
TypeScript
102 lines
4.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">
|
|
{["Dein Name", "Deine E-Mail"].map((label, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: index * 0.1}}
|
|
>
|
|
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
|
|
{label}
|
|
</label>
|
|
<input
|
|
type={index === 0 ? "text" : "email"}
|
|
placeholder={index === 0 ? "Max Mustermann" : "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>
|
|
))}
|
|
</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}}>
|
|
Deine Nachricht
|
|
</label>
|
|
<textarea
|
|
rows={4}
|
|
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.4}}
|
|
>
|
|
<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;
|