Issues git resolved

components/Contact.tsx

@@ -1,113 +1,136 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-
-const Contact: React.FC = () => {
-  return (
-    <motion.section
-      id="contact"
-      initial={{ opacity: 0, y: 50 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: true, margin: "-100px" }}
-      transition={{ duration: 0.8, ease: "easeOut" }}
-      className="py-24 bg-white dark:bg-[#0f0f0f] border-t border-gray-100 dark:border-white/5"
-    >
-      <div className="max-w-3xl mx-auto px-6">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          className="text-center mb-12"
-        >
-          <h2 className="font-display text-4xl md:text-5xl font-medium mb-6 text-gray-900 dark:text-white">
-            Get in Touch
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 text-lg">
-            We're here to help you with all your IT needs.
-          </p>
-        </motion.div>
-
-        <motion.form
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          viewport={{ once: true }}
-          transition={{ delay: 0.2 }}
-          className="space-y-6"
-        >
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div>
-              <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name *</label>
-              <motion.input
-                whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
-                transition={{ duration: 0.2 }}
-                type="text"
-                id="name"
-                placeholder="Your Name"
-                required
-                className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all"
-              />
-            </div>
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email *</label>
-              <motion.input
-                whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
-                transition={{ duration: 0.2 }}
-                type="email"
-                id="email"
-                placeholder="Your Email"
-                required
-                className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all"
-              />
-            </div>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div>
-              <label htmlFor="phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Phone (optional)</label>
-              <motion.input
-                whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
-                transition={{ duration: 0.2 }}
-                type="tel"
-                id="phone"
-                placeholder="Your Phone Number"
-                className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all"
-              />
-            </div>
-            <div>
-              <label htmlFor="company" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Company (optional)</label>
-              <motion.input
-                whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
-                transition={{ duration: 0.2 }}
-                type="text"
-                id="company"
-                placeholder="Your Company Name"
-                className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all"
-              />
-            </div>
-          </div>
-          <div>
-            <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Message *</label>
-            <motion.textarea
-              whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
-              transition={{ duration: 0.2 }}
-              id="message"
-              placeholder="Your Message"
-              required
-              className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all h-32 resize-none"
-            ></motion.textarea>
-          </div>
-          <div className="text-center">
-            <motion.button
-              type="submit"
-              whileHover={{ scale: 1.05, backgroundColor: "#3b82f6", color: "#ffffff", border: "none" }}
-              whileTap={{ scale: 0.95 }}
-              className="px-8 py-3 bg-black dark:bg-white text-white dark:text-black rounded-full font-medium transition-all duration-300 w-full md:w-auto shadow-lg"
-            >
-              Send Message
-            </motion.button>
-          </div>
-        </motion.form>
-      </div>
-    </motion.section>
-  );
-};
-
-export default Contact;
+import React from 'react';
+import { motion } from 'framer-motion';
+
+import { useContactForm } from '../src/hooks/useContactForm';
+
+const Contact: React.FC = () => {
+  const { errorMessage, hasError, isSubmitted, isSubmitting, resetFeedback, submitContactForm } = useContactForm();
+
+  return (
+    <motion.section
+      id="contact"
+      initial={{ opacity: 0, y: 50 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "-100px" }}
+      transition={{ duration: 0.8, ease: "easeOut" }}
+      className="py-24 bg-white dark:bg-[#0f0f0f] border-t border-gray-100 dark:border-white/5"
+    >
+      <div className="max-w-3xl mx-auto px-6">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="text-center mb-12"
+        >
+          <h2 className="font-display text-4xl md:text-5xl font-medium mb-6 text-gray-900 dark:text-white">
+            Get in Touch
+          </h2>
+          <p className="text-gray-600 dark:text-gray-400 text-lg">
+            We're here to help you with all your IT needs.
+          </p>
+        </motion.div>
+
+        <motion.form
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+          transition={{ delay: 0.2 }}
+          className="space-y-6"
+          onChange={resetFeedback}
+          onSubmit={submitContactForm}
+        >
+          <input type="text" name="website" tabIndex={-1} autoComplete="off" className="hidden" aria-hidden="true" />
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <label htmlFor="contact-name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name *</label>
+              <motion.input
+                whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
+                transition={{ duration: 0.2 }}
+                type="text"
+                id="contact-name"
+                name="name"
+                placeholder="Your Name"
+                required
+                className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all"
+              />
+            </div>
+            <div>
+              <label htmlFor="contact-email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email *</label>
+              <motion.input
+                whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
+                transition={{ duration: 0.2 }}
+                type="email"
+                id="contact-email"
+                name="email"
+                placeholder="Your Email"
+                required
+                className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all"
+              />
+            </div>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <label htmlFor="contact-phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Phone (optional)</label>
+              <motion.input
+                whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
+                transition={{ duration: 0.2 }}
+                type="tel"
+                id="contact-phone"
+                name="phone"
+                placeholder="Your Phone Number"
+                className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all"
+              />
+            </div>
+            <div>
+              <label htmlFor="contact-company" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Company (optional)</label>
+              <motion.input
+                whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
+                transition={{ duration: 0.2 }}
+                type="text"
+                id="contact-company"
+                name="company"
+                placeholder="Your Company Name"
+                className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all"
+              />
+            </div>
+          </div>
+          <div>
+            <label htmlFor="contact-message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Message *</label>
+            <motion.textarea
+              whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
+              transition={{ duration: 0.2 }}
+              id="contact-message"
+              name="message"
+              placeholder="Your Message"
+              required
+              className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all h-32 resize-none"
+            ></motion.textarea>
+          </div>
+          <div className="text-center">
+            <motion.button
+              type="submit"
+              whileHover={{ scale: isSubmitting ? 1 : 1.05 }}
+              whileTap={{ scale: isSubmitting ? 1 : 0.95 }}
+              disabled={isSubmitting}
+              className="selection-inverse px-8 py-3 bg-black dark:bg-white text-white dark:text-black rounded-full font-medium transition-all duration-300 w-full md:w-auto shadow-lg disabled:cursor-not-allowed disabled:opacity-70"
+            >
+              {isSubmitting ? 'Sending...' : 'Send Message'}
+            </motion.button>
+          </div>
+          {isSubmitted && (
+            <p className="text-sm text-green-600 dark:text-green-400">
+              Thanks. Your message was sent successfully.
+            </p>
+          )}
+          {hasError && (
+            <p className="text-sm text-red-600 dark:text-red-400">
+              {errorMessage}
+            </p>
+          )}
+        </motion.form>
+      </div>
+    </motion.section>
+  );
+};
+
+export default Contact;