Update src/app/contact/page.tsx

src/app/contact/page.tsx

@@ -2,30 +2,22 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
-import { Mail, Phone, MapPin, Send } from "lucide-react";
-import { useState } from "react";
+import { Mail, Phone, MapPin, Clock } from "lucide-react";
+import Link from "next/link";
 
 export default function ContactPage() {
-  const [formData, setFormData] = useState({
-    name: "",    email: "",    subject: "",    message: ""});
-  const [submitted, setSubmitted] = useState(false);
-
   const navItems = [
     { name: "Ana Sayfa", id: "/" },
     { name: "Öğretmenler", id: "/teachers" },
-    { name: "Etkinlikler", id: "events" },
-    { name: "Çalışma Programı", id: "schedule" },
+    { name: "Etkinlikler", id: "/events" },
+    { name: "Çalışma Programı", id: "/schedule" },
   ];
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    // Simulate form submission
-    setSubmitted(true);
-    setTimeout(() => {
-      setFormData({ name: "", email: "", subject: "", message: "" });
-      setSubmitted(false);
-    }, 2000);
+  const handleFormSubmit = (data: Record<string, string>) => {
+    console.log("Form submitted:", data);
+    alert("Teşekkürler! Mesajınız alındı. Kısa sürede sizinle iletişime geçeceğiz.");
   };
 
   return (
@@ -41,6 +33,13 @@ export default function ContactPage() {
       secondaryButtonStyle="layered"
       headingFontWeight="light"
     >
+      {/* Breadcrumb */}
+      <nav className="hidden md:flex items-center gap-2 p-4 text-sm text-gray-600" aria-label="Breadcrumb">
+        <Link href="/" className="hover:text-primary-cta">Ana Sayfa</Link>
+        <span>/</span>
+        <span className="text-gray-900 font-semibold">İletişim</span>
+      </nav>
+
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
           navItems={navItems}
@@ -50,107 +49,77 @@ export default function ContactPage() {
         />
       </div>
 
-      <div className="py-16 md:py-24 px-4">
-        <div className="max-w-4xl mx-auto">
-          <div className="text-center mb-12">
+      <div className="py-12 px-4 md:py-20">
+        <div className="max-w-6xl mx-auto">
+          {/* Header */}
+          <div className="text-center mb-12 md:mb-16">
             <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Bize Ulaşın</h1>
-            <p className="text-lg text-foreground opacity-75">
-              Sorularınız mı var? Bize mesaj gönderin, en kısa sürede sizinle iletişime geçeceğiz.
+            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+              Sorularınız mı var? Destek ekibimiz size yardımcı olmaktan mutluluk duyacaktır.
             </p>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
-            {/* Contact Info Cards */}
-            {[
-              { icon: Mail, label: "Email", value: "info@platform.com" },
-              { icon: Phone, label: "Telefon", value: "+90 (212) 555-0123" },
-              { icon: MapPin, label: "Adres", value: "İstanbul, Türkiye" },
-            ].map((item, idx) => {
-              const IconComponent = item.icon;
-              return (
-                <div key={idx} className="bg-card border border-accent rounded-lg p-6 text-center">
-                  <IconComponent className="w-8 h-8 text-primary-cta mx-auto mb-3" />
-                  <h3 className="font-bold text-foreground mb-2">{item.label}</h3>
-                  <p className="text-foreground opacity-75 text-sm">{item.value}</p>
-                </div>
-              );
-            })}
+          {/* Contact Info Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
+            <div className="bg-card p-6 rounded-lg border border-border">
+              <div className="flex items-center gap-3 mb-4">
+                <Mail className="text-primary-cta" size={24} />
+                <h3 className="font-semibold text-foreground">Email</h3>
+              </div>
+              <p className="text-sm text-gray-600">info@platform.com</p>
+              <p className="text-xs text-gray-500 mt-2">Yanıt süresi: 2 saat</p>
+            </div>
+
+            <div className="bg-card p-6 rounded-lg border border-border">
+              <div className="flex items-center gap-3 mb-4">
+                <Phone className="text-primary-cta" size={24} />
+                <h3 className="font-semibold text-foreground">Telefon</h3>
+              </div>
+              <p className="text-sm text-gray-600">+90 (212) 555-0123</p>
+              <p className="text-xs text-gray-500 mt-2">Haftada 7 gün açık</p>
+            </div>
+
+            <div className="bg-card p-6 rounded-lg border border-border">
+              <div className="flex items-center gap-3 mb-4">
+                <MapPin className="text-primary-cta" size={24} />
+                <h3 className="font-semibold text-foreground">Adres</h3>
+              </div>
+              <p className="text-sm text-gray-600">İstanbul, Türkiye</p>
+              <p className="text-xs text-gray-500 mt-2">Merkez ofis</p>
+            </div>
+
+            <div className="bg-card p-6 rounded-lg border border-border">
+              <div className="flex items-center gap-3 mb-4">
+                <Clock className="text-primary-cta" size={24} />
+                <h3 className="font-semibold text-foreground">Saatler</h3>
+              </div>
+              <p className="text-sm text-gray-600">24/7 Müşteri Desteği</p>
+              <p className="text-xs text-gray-500 mt-2">Her zaman buradayız</p>
+            </div>
           </div>
 
           {/* Contact Form */}
-          <div className="bg-card border border-accent rounded-lg p-8">
-            <form onSubmit={handleSubmit} className="space-y-6">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-medium text-foreground mb-2">
-                    Ad Soyad *
-                  </label>
-                  <input
-                    type="text"
-                    required
-                    value={formData.name}
-                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                    className="w-full px-4 py-3 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta min-h-11"
-                    placeholder="Adınızı giriniz"
-                  />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-foreground mb-2">
-                    Email *
-                  </label>
-                  <input
-                    type="email"
-                    required
-                    value={formData.email}
-                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-                    className="w-full px-4 py-3 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta min-h-11"
-                    placeholder="E-posta adresiniz"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  Konu *
-                </label>
-                <input
-                  type="text"
-                  required
-                  value={formData.subject}
-                  onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
-                  className="w-full px-4 py-3 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta min-h-11"
-                  placeholder="Konuyu yazınız"
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  Mesaj *
-                </label>
-                <textarea
-                  required
-                  value={formData.message}
-                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
-                  rows={5}
-                  className="w-full px-4 py-3 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta resize-none"
-                  placeholder="Mesajınızı yazınız"
-                />
-              </div>
-
-              <button
-                type="submit"
-                disabled={submitted}
-                className="w-full py-3 rounded-lg bg-primary-cta text-card font-medium hover:opacity-90 disabled:opacity-50 transition-opacity flex items-center justify-center gap-2 min-h-11"
-              >
-                <Send className="w-5 h-5" />
-                {submitted ? "Gönderildi!" : "Gönder"}
-              </button>
-            </form>
-          </div>
+          <ContactSplitForm
+            title="Mesaj Gönderin"
+            description="Lütfen aşağıdaki formu doldurarak bizimle iletişime geçin. En kısa sürede size dönüş yapacağız."
+            inputs={[
+              { name: "name", type: "text", placeholder: "Adınız", required: true },
+              { name: "email", type: "email", placeholder: "E-mail Adresiniz", required: true },
+            ]}
+            textarea={{
+              name: "message",              placeholder: "Mesajınız (En az 20 karakter)",              rows: 6,
+              required: true,
+            }}
+            useInvertedBackground={false}
+            imageSrc="http://img.b2bpic.net/free-photo/front-view-older-business-woman-with-glasses-writing-agenda-looking-laptop_23-2148661168.jpg"
+            mediaAnimation="slide-up"
+            buttonText="Gönder"
+            onSubmit={handleFormSubmit}
+          />
         </div>
       </div>
 
-      <div id="footer" data-section="footer" className="mt-16">
+      <div id="footer" data-section="footer">
         <FooterLogoReveal
           logoText="Öğretmen Platformu"
           leftLink={{
@@ -161,4 +130,4 @@ export default function ContactPage() {
       </div>
     </ThemeProvider>
   );
-}
+}