Add src/app/help/page.tsx
This commit is contained in:
208
src/app/help/page.tsx
Normal file
208
src/app/help/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user