Merge branch 'homepage-refactoring-pt4' into 'dev'

Homepage refactoring pt4 See merge request rheinsw/website!31
2025-04-20 09:42:40 +00:00
parent 5e1bca87a3
commit f2221815c8
24 changed files with 797 additions and 211 deletions
--- a/components/Contact/Section/ContactFormSection.tsx
+++ b/components/Contact/Section/ContactFormSection.tsx
@@ -0,0 +1,101 @@
+'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;