Ana Sayfa Fix

components/ComplaintForm.tsx

@@ -0,0 +1,237 @@
+'use client';
+
+import { useState } from 'react';
+
+interface ComplaintFormProps {
+  onClose: () => void;
+}
+
+interface FormData {
+  name: string;
+  email: string;
+  phone: string;
+  subject: string;
+  type: string;
+  message: string;
+}
+
+export default function ComplaintForm({ onClose }: ComplaintFormProps) {
+  const [formData, setFormData] = useState<FormData>({
+    name: '',
+    email: '',
+    phone: '',
+    subject: '',
+    type: 'dilek',
+    message: ''
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    alert('Form gönderildi! (Demo)');
+    handleReset();
+    onClose();
+  };
+
+  const handleReset = () => {
+    setFormData({
+      name: '',
+      email: '',
+      phone: '',
+      subject: '',
+      type: 'dilek',
+      message: ''
+    });
+  };
+
+  const handleClose = () => {
+    handleReset();
+    onClose();
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 md:pt-32 pb-8">
+      <div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center space-x-3">
+            <div className="w-10 h-10 bg-[#004B87] rounded-lg flex items-center justify-center">
+              <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
+              </svg>
+            </div>
+            <h2 className="text-2xl font-bold text-[#004B87]">Dilek ve Şikayet Formu</h2>
+          </div>
+          <button 
+            onClick={handleClose}
+            className="text-gray-500 hover:text-red-500 transition-colors"
+          >
+            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Bilgilendirme */}
+        <div className="bg-blue-50 border-l-4 border-[#00B4D8] p-4 mb-6">
+          <div className="flex items-start">
+            <svg className="w-5 h-5 text-[#00B4D8] mt-0.5 mr-3 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+            </svg>
+            <p className="text-sm text-gray-700">
+              A2 Metro Hattı projesi ile ilgili dilek, öneri ve şikayetlerinizi bu form aracılığıyla iletebilirsiniz. Başvurularınız en kısa sürede değerlendirilecektir.
+            </p>
+          </div>
+        </div>
+
+        {/* Form */}
+        <form className="space-y-6" onSubmit={handleSubmit}>
+          {/* Başvuru Tipi */}
+          <div>
+            <label className="block text-sm font-semibold text-[#004B87] mb-3">
+              Başvuru Tipi <span className="text-red-500">*</span>
+            </label>
+            <div className="flex gap-4">
+              <label className="flex items-center cursor-pointer">
+                <input
+                  type="radio"
+                  name="type"
+                  value="dilek"
+                  checked={formData.type === 'dilek'}
+                  onChange={(e) => setFormData({...formData, type: e.target.value})}
+                  className="w-4 h-4 text-[#00B4D8] border-gray-300 focus:ring-[#00B4D8]"
+                />
+                <span className="ml-2 text-gray-700">Dilek / Öneri</span>
+              </label>
+              <label className="flex items-center cursor-pointer">
+                <input
+                  type="radio"
+                  name="type"
+                  value="sikayet"
+                  checked={formData.type === 'sikayet'}
+                  onChange={(e) => setFormData({...formData, type: e.target.value})}
+                  className="w-4 h-4 text-[#00B4D8] border-gray-300 focus:ring-[#00B4D8]"
+                />
+                <span className="ml-2 text-gray-700">Şikayet</span>
+              </label>
+            </div>
+          </div>
+
+          {/* İki Sütunlu Alan */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* Ad Soyad */}
+            <div>
+              <label htmlFor="name" className="block text-sm font-semibold text-[#004B87] mb-2">
+                Ad Soyad <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                id="name"
+                required
+                value={formData.name}
+                onChange={(e) => setFormData({...formData, name: e.target.value})}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
+                placeholder="Adınız ve Soyadınız"
+              />
+            </div>
+
+            {/* E-posta */}
+            <div>
+              <label htmlFor="email" className="block text-sm font-semibold text-[#004B87] mb-2">
+                E-posta <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="email"
+                id="email"
+                required
+                value={formData.email}
+                onChange={(e) => setFormData({...formData, email: e.target.value})}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
+                placeholder="ornek@email.com"
+              />
+            </div>
+
+            {/* Telefon */}
+            <div>
+              <label htmlFor="phone" className="block text-sm font-semibold text-[#004B87] mb-2">
+                Telefon
+              </label>
+              <input
+                type="tel"
+                id="phone"
+                value={formData.phone}
+                onChange={(e) => setFormData({...formData, phone: e.target.value})}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
+                placeholder="0(5__) ___ __ __"
+              />
+            </div>
+
+            {/* Konu */}
+            <div>
+              <label htmlFor="subject" className="block text-sm font-semibold text-[#004B87] mb-2">
+                Konu <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                id="subject"
+                required
+                value={formData.subject}
+                onChange={(e) => setFormData({...formData, subject: e.target.value})}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
+                placeholder="Başvuru konusu"
+              />
+            </div>
+          </div>
+
+          {/* Mesaj */}
+          <div>
+            <label htmlFor="message" className="block text-sm font-semibold text-[#004B87] mb-2">
+              Mesajınız <span className="text-red-500">*</span>
+            </label>
+            <textarea
+              id="message"
+              required
+              rows={6}
+              value={formData.message}
+              onChange={(e) => setFormData({...formData, message: e.target.value})}
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all resize-none text-gray-900 placeholder:text-gray-500"
+              placeholder="Lütfen detaylı bilgi veriniz..."
+            ></textarea>
+          </div>
+
+          {/* KVKK Onayı */}
+          <div className="flex items-start">
+            <input
+              type="checkbox"
+              id="kvkk"
+              required
+              className="w-4 h-4 mt-1 text-[#00B4D8] border-gray-300 rounded focus:ring-[#00B4D8]"
+            />
+            <label htmlFor="kvkk" className="ml-3 text-sm text-gray-700">
+              <span className="text-red-500">*</span> Kişisel verilerimin işlenmesine ilişkin{' '}
+              <span className="text-[#00B4D8] hover:underline">KVKK Aydınlatma Metni</span>&#39;ni okudum ve kabul ediyorum.
+            </label>
+          </div>
+
+          {/* Butonlar */}
+          <div className="flex flex-col sm:flex-row gap-4 pt-4">
+            <button
+              type="submit"
+              className="flex-1 px-6 py-3 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors font-semibold shadow-lg hover:shadow-xl flex items-center justify-center space-x-2"
+            >
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+              </svg>
+              <span>Gönder</span>
+            </button>
+            <button
+              type="button"
+              onClick={handleReset}
+              className="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-semibold"
+            >
+              Temizle
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}