From 21e83d6ee7f84111ea5db6dbc4bc05b42706c3f6 Mon Sep 17 00:00:00 2001
From: Thatsaphorn Atchariyaphap <thatsaphorn@outlook.de>
Date: Mon, 21 Apr 2025 01:33:18 +0200
Subject: [PATCH] Add required fields and optional inputs in contact form

---
 .../Contact/Section/ContactFormSection.tsx    | 136 ++++++++++++++----
 1 file changed, 110 insertions(+), 26 deletions(-)

diff --git a/components/Contact/Section/ContactFormSection.tsx b/components/Contact/Section/ContactFormSection.tsx
index f37edf5..18a19b2 100644
--- a/components/Contact/Section/ContactFormSection.tsx
+++ b/components/Contact/Section/ContactFormSection.tsx
@@ -33,42 +33,126 @@ const ContactFormSection = () => {
 
             <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>
-                    ))}
+                    <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.3}}
+                    transition={{duration: 0.5, delay: 0.6}}
                 >
                     <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
-                        Deine Nachricht
+                        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={{
@@ -84,7 +168,7 @@ const ContactFormSection = () => {
                     initial={{opacity: 0, y: 10}}
                     whileInView={{opacity: 1, y: 0}}
                     viewport={{once: true}}
-                    transition={{duration: 0.5, delay: 0.4}}
+                    transition={{duration: 0.5, delay: 0.7}}
                 >
                     <button
                         type="submit"