feedback

app/feedback/page.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import Navigation from '@/components/Navigation';
+import Footer from '@/components/Footer';
+
+export default function FeedbackPage() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    message: '',
+  });
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    
+    // Handle form submission here
+    console.log('Feedback submitted:', formData);
+    
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 500));
+    
+    alert('Thank you for your feedback! We appreciate your input.');
+    setFormData({
+      name: '',
+      email: '',
+      message: '',
+    });
+    setIsSubmitting(false);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  return (
+    <main className="min-h-screen">
+      <Navigation />
+      <section className="py-20 md:py-32" style={{ backgroundColor: '#FBF7F4' }}>
+        <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
+            className="text-center mb-12"
+          >
+            <h1 style={{ color: '#00171F' }} className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
+              Share Your Feedback
+            </h1>
+            <p style={{ color: '#00171F' }} className="text-lg md:text-xl opacity-90">
+              I value your thoughts and suggestions. Your feedback helps me improve my work and services.
+            </p>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
+          >
+            <form
+              onSubmit={handleSubmit}
+              className="space-y-6"
+            >
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium mb-2" style={{ color: '#00171F' }}>
+                  Name <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  required
+                  value={formData.name}
+                  onChange={handleChange}
+                  className="w-full px-4 py-3 border rounded-lg outline-none transition-all focus:ring-2 focus:ring-opacity-50"
+                  style={{ 
+                    borderColor: '#EED2CC', 
+                    color: '#00171F',
+                    backgroundColor: '#FBF7F4'
+                  }}
+                />
+              </div>
+
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-2" style={{ color: '#00171F' }}>
+                  Email (optional)
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  className="w-full px-4 py-3 border rounded-lg outline-none transition-all focus:ring-2 focus:ring-opacity-50"
+                  style={{ 
+                    borderColor: '#EED2CC', 
+                    color: '#00171F',
+                    backgroundColor: '#FBF7F4'
+                  }}
+                />
+           
+              </div>
+
+              <div>
+                <label htmlFor="message" className="block text-sm font-medium mb-2" style={{ color: '#00171F' }}>
+                  Message <span className="text-red-500">*</span>
+                </label>
+                <textarea
+                  id="message"
+                  name="message"
+                  rows={6}
+                  required
+                  value={formData.message}
+                  onChange={handleChange}
+                  className="w-full px-4 py-3 border rounded-lg outline-none transition-all resize-none focus:ring-2 focus:ring-opacity-50"
+                  style={{ 
+                    borderColor: '#EED2CC', 
+                    color: '#00171F',
+                    backgroundColor: '#FBF7F4'
+                  }}
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                style={{ backgroundColor: '#00171F' }}
+                className="w-full text-white px-8 py-4 rounded-full text-lg font-semibold hover:opacity-90 transition-all transform hover:scale-105 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
+              >
+                {isSubmitting ? 'Sending...' : 'Send Feedback'}
+              </button>
+            </form>
+          </motion.div>
+        </div>
+      </section>
+      <Footer />
+    </main>
+  );
+}
+