From ab9f0ce23ea5b3bb8a90c86ba5812cebe79fc5e1 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 6 Mar 2026 21:46:55 +0000
Subject: [PATCH] Add src/app/help/page.tsx

---
 src/app/help/page.tsx | 208 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 208 insertions(+)
 create mode 100644 src/app/help/page.tsx

diff --git a/src/app/help/page.tsx b/src/app/help/page.tsx
new file mode 100644
index 0000000..633fc92
--- /dev/null
+++ b/src/app/help/page.tsx
@@ -0,0 +1,208 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import FaqDouble from "@/components/sections/faq/FaqDouble";
+import { Search, ChevronRight } from "lucide-react";
+import Link from "next/link";
+
+export default function HelpPage() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState("tümü");
+
+  const navItems = [
+    { name: "Ana Sayfa", id: "/" },
+    { name: "Öğretmenler", id: "/teachers" },
+    { name: "Etkinlikler", id: "/events" },
+    { name: "Çalışma Programı", id: "/schedule" },
+  ];
+
+  const categories = [
+    { id: "tümü", name: "Tüm Kategoriler", icon: "📚" },
+    { id: "başlangıç", name: "Başlangıç Rehberi", icon: "🚀" },
+    { id: "ödeme", name: "Ödeme & Faturalama", icon: "💳" },
+    { id: "ders", name: "Dersler", icon: "📖" },
+    { id: "teknik", name: "Teknik Destek", icon: "🔧" },
+    { id: "hesap", name: "Hesap Yönetimi", icon: "👤" },
+  ];
+
+  const helpArticles = [
+    {
+      id: "1",      category: "başlangıç",      title: "Nasıl Başlarım?",      excerpt: "Platformda yeni misiniz? Adım adım başlangıç rehberimizi takip edin.",      content: "Kayıt olun, profil oluşturun ve ilk öğretmeninizi seçin..."},
+    {
+      id: "2",      category: "ödeme",      title: "Ödeme Yöntemleri",      excerpt: "Hangi ödeme yöntemlerini destekliyoruz?",      content: "Kredi kartı, banka transferi, e-cüzdan ve daha fazlası..."},
+    {
+      id: "3",      category: "ders",      title: "Ders Rezervasyonu",      excerpt: "Ders nasıl ayırılır?",      content: "Öğretmen seçin, uygun saati bulun ve dersi rezerve edin..."},
+    {
+      id: "4",      category: "teknik",      title: "Video Konferans Problemi",      excerpt: "Kamera veya mikrofon çalışmıyor mu?",      content: "Tarayıcı izinlerini kontrol edin ve bağlantıyı yenileyin..."},
+    {
+      id: "5",      category: "hesap",      title: "Şifre Sıfırlama",      excerpt: "Şifrenizi unuttuysanız ne yapmalısınız?",      content: "Giriş sayfasında 'Şifremi Unuttum' seçeneğine tıklayın..."},
+    {
+      id: "6",      category: "başlangıç",      title: "Profil Oluşturma",      excerpt: "Profilinizi nasıl tamamlayabilirsiniz?",      content: "Fotoğraf yükleyin, hedeflerinizi belirtin ve tercihlerinizi ayarlayın..."},
+  ];
+
+  const faqData = [
+    {
+      id: "1",      title: "Ders iptal etmek istiyorum. Ne yapmalıyım?",      content: "Dersin başlamadan 24 saat önce iptal edebilirsiniz. Uygulamada 'Derslerim' bölümüne giderek iptal düğmesine tıklayın. Geç iptaller geri iade edilmeyebilir."},
+    {
+      id: "2",      title: "Öğretmen değiştirmek istiyorum.",      content: "Evet, istediğiniz zaman öğretmen değiştirebilirsiniz. Destek ekibimizle iletişime geçerek veya uygulama içinden yeni bir öğretmen seçebilirsiniz."},
+    {
+      id: "3",      title: "Sertifikat nasıl alırım?",      content: "Kurs tamamlandıktan sonra sertifika otomatik olarak hesabınıza gönderilir. Sertifikayı indirip yazdırabilirsiniz."},
+    {
+      id: "4",      title: "Para iadesi nasıl talep ederim?",      content: "Tamamlanmamış dersler için 30 gün içinde para iade talebinde bulunabilirsiniz. Destek ekibimizle iletişime geçin."},
+    {
+      id: "5",      title: "Grup dersine katılabilir miyim?",      content: "Evet! Bireysel dersler dışında grup dersleri de bulunmaktadır. Platform üzerinde grup derslerine ayrı olarak kaydolabilirsiniz."},
+    {
+      id: "6",      title: "Teknik sorularım için ne yapmalıyım?",      content: "Canlı sohbet, email veya telefon aracılığıyla teknik desteğimize ulaşabilirsiniz. Ortalama yanıt süresi 5 dakikadır."},
+  ];
+
+  const filteredArticles = helpArticles.filter((article) => {
+    const matchesCategory = selectedCategory === "tümü" || article.category === selectedCategory;
+    const matchesSearch = article.title.toLowerCase().includes(searchQuery.toLowerCase());
+    return matchesCategory && matchesSearch;
+  });
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="shadow"
+      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">Yardım Merkezi</span>
+      </nav>
+
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          brandName="Öğretmen Platformu"
+          bottomLeftText="Eğitim Topluluğu"
+          bottomRightText="info@platform.com"
+        />
+      </div>
+
+      <div className="py-12 px-4 md:py-20">
+        <div className="max-w-6xl mx-auto">
+          {/* Header */}
+          <div className="text-center mb-12">
+            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Yardım Merkezi</h1>
+            <p className="text-lg text-gray-600 mb-8">Soruların cevaplarını ve rehberleri burada bulabilirsiniz.</p>
+
+            {/* Search */}
+            <div className="max-w-2xl mx-auto">
+              <div className="flex items-center gap-2 bg-card border border-border rounded-lg px-4 py-3">
+                <Search size={20} className="text-gray-400" />
+                <input
+                  type="text"
+                  placeholder="Makaleler ve cevapları arayın..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full bg-transparent outline-none text-foreground"
+                  aria-label="Yardım arama"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Categories */}
+          <div className="flex flex-wrap gap-2 justify-center mb-12 pb-8 border-b border-border">
+            {categories.map((cat) => (
+              <button
+                key={cat.id}
+                onClick={() => setSelectedCategory(cat.id)}
+                className={`px-4 py-2 rounded-lg text-sm font-semibold transition-colors ${
+                  selectedCategory === cat.id
+                    ? "bg-primary-cta text-white"
+                    : "bg-card text-foreground border border-border hover:bg-background"
+                }`}
+                aria-pressed={selectedCategory === cat.id}
+              >
+                {cat.icon} {cat.name}
+              </button>
+            ))}
+          </div>
+
+          {/* Articles Grid */}
+          {filteredArticles.length > 0 ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-16">
+              {filteredArticles.map((article) => (
+                <div
+                  key={article.id}
+                  className="bg-card border border-border rounded-lg p-6 hover:border-primary-cta/50 cursor-pointer transition-colors group"
+                >
+                  <h3 className="text-lg font-semibold text-foreground mb-2 group-hover:text-primary-cta transition-colors">
+                    {article.title}
+                  </h3>
+                  <p className="text-sm text-gray-600 mb-4">{article.excerpt}</p>
+                  <div className="flex items-center gap-2 text-primary-cta text-sm font-semibold">
+                    Okuyun
+                    <ChevronRight size={16} className="group-hover:translate-x-1 transition-transform" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-12">
+              <p className="text-gray-600 text-lg">Aradığınız makaleler bulunamadı.</p>
+            </div>
+          )}
+
+          {/* FAQ Section */}
+          <div id="faq" data-section="faq" className="mt-20">
+            <h2 className="text-3xl font-bold text-foreground mb-8 text-center">Sıkça Sorulan Sorular</h2>
+            <FaqDouble
+              faqs={faqData}
+              title=""
+              description=""
+              faqsAnimation="slide-up"
+              textboxLayout="default"
+              useInvertedBackground={false}
+            />
+          </div>
+
+          {/* Contact CTA */}
+          <div className="mt-16 bg-card border border-border rounded-lg p-8 text-center">
+            <h3 className="text-2xl font-bold text-foreground mb-2">Hala yardıma mı ihtiyacınız var?</h3>
+            <p className="text-gray-600 mb-6">Destek ekibimiz 24/7 burada sizin için.</p>
+            <div className="flex gap-4 justify-center flex-wrap">
+              <Link
+                href="/contact"
+                className="px-6 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90 transition-opacity font-semibold"
+              >
+                Bize Ulaşın
+              </Link>
+              <a
+                href="#"
+                className="px-6 py-3 bg-card border border-border text-foreground rounded-lg hover:bg-background transition-colors font-semibold"
+              >
+                Canlı Sohbet Başlat
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Öğretmen Platformu"
+          leftLink={{
+            text: "Gizlilik Politikası",            href: "#"}}
+          rightLink={{
+            text: "Kullanım Şartları",            href: "#"}}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}