Merge version_2 into main #8
12
public/robots.txt
Normal file
12
public/robots.txt
Normal file
@@ -0,0 +1,12 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow: /admin
|
||||
Disallow: /api
|
||||
Disallow: /_next
|
||||
Disallow: /private
|
||||
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://ogretmen-platformu.com/sitemap.xml
|
||||
|
||||
Crawl-delay: 1
|
||||
@@ -1,30 +1,33 @@
|
||||
{
|
||||
"name": "Öğretmen Platformu", "short_name": "Öğretmen", "description": "Kişiselleştirilmiş online eğitim platformu", "start_url": "/", "scope": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "orientation": "portrait-primary", "icons": [
|
||||
"name": "Öğretmen Platformu", "short_name": "Öğretmen Platformu", "description": "50+ deneyimli öğretmenle bağlantı kurun. Kişiselleştirilmiş eğitim, esnek zaman planlaması ve etkili öğrenme deneyimi.", "start_url": "/", "scope": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "orientation": "portrait-primary", "icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any"
|
||||
"src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any"
|
||||
"src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-192x192-maskable.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable"
|
||||
"src": "/favicon-maskable-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable"
|
||||
"src": "/favicon-maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable"
|
||||
}
|
||||
],
|
||||
"screenshots": [
|
||||
{
|
||||
"src": "/screenshot-1.png", "sizes": "540x720", "type": "image/png", "form_factor": "narrow"
|
||||
"src": "/screenshot1.png", "sizes": "540x720", "type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/screenshot-2.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide"
|
||||
"src": "/screenshot2.png", "sizes": "1280x720", "type": "image/png"
|
||||
}
|
||||
],
|
||||
"categories": ["education", "productivity"],
|
||||
"screenshots": [
|
||||
"categories": ["education", "business"],
|
||||
"shortcuts": [
|
||||
{
|
||||
"src": "/screenshot-1.png", "sizes": "540x720", "type": "image/png"
|
||||
"name": "Öğretmen Bul", "short_name": "Öğretmen Bul", "description": "Öğretmen platformumuzda öğretmen bulun", "url": "/teachers", "icons": [{ "src": "/favicon-192x192.png", "sizes": "192x192" }]
|
||||
},
|
||||
{
|
||||
"name": "Derslerim", "short_name": "Derslerim", "description": "Kayıtlı derslerinizi görüntüleyin", "url": "/my-lessons", "icons": [{ "src": "/favicon-192x192.png", "sizes": "192x192" }]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,32 +2,19 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
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);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
@@ -41,6 +28,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,115 +44,78 @@ 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>
|
||||
{/* Contact Form Section */}
|
||||
<div id="contact-form" data-section="contact-form" className="mt-16">
|
||||
<ContactText
|
||||
text="Mesajınızı bize gönderin ve en kısa sürede yanıt alalım."
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "İletişim Formu", href: "https://example.com/contact" }]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer" className="mt-16">
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Öğretmen Platformu"
|
||||
leftLink={{
|
||||
text: "Gizlilik Politikası", href: "#"}}
|
||||
text: "Gizlilik Politikası", href: "#"
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Kullanım Şartları", href: "#"}}
|
||||
text: "Kullanım Şartları", href: "#"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
|
||||
import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
|
||||
import TimelineHorizontalCardStack from "@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack";
|
||||
import TeamCardTen from "@/components/sections/team/TeamCardTen";
|
||||
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
||||
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
||||
import TeamCardFive from "@/components/sections/team/TeamCardFive";
|
||||
import FaqBase from "@/components/sections/faq/FaqBase";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { Target, Calendar, TrendingUp } from "lucide-react";
|
||||
import { TrendingUp, Users, Clock, Target } from "lucide-react";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const navItems = [
|
||||
@@ -15,64 +15,71 @@ export default function DashboardPage() {
|
||||
{ name: "Öğretmenler", id: "/teachers" },
|
||||
{ name: "Etkinlikler", id: "events" },
|
||||
{ name: "Çalışma Programı", id: "schedule" },
|
||||
{ name: "Öğrenci Paneli", id: "/dashboard" },
|
||||
{ name: "Dashboard", id: "/dashboard" },
|
||||
];
|
||||
|
||||
// Target tracking metrics
|
||||
const targetMetrics = [
|
||||
{
|
||||
id: "math", title: "Matematik Hedefim", subtitle: "İleri Cebir · Hedef: %85 Başarı", category: "Matematik", value: "72%"
|
||||
id: "1", value: "85", title: "%", description: "Haftalık Hedef İlerleme", icon: Target,
|
||||
},
|
||||
{
|
||||
id: "english", title: "İngilizce Konuşma", subtitle: "Sertifikasyon · Hedef: İleri Seviye", category: "İngilizce", value: "Orta"
|
||||
id: "2", value: "12", title: "Saat", description: "Bu Ay Ders Saati", icon: Clock,
|
||||
},
|
||||
{
|
||||
id: "science", title: "Fen Bilimleri Paketi", subtitle: "Kimya & Fizik · Hedef: %90 Başarı", category: "Bilim", value: "68%"
|
||||
id: "3", value: "4.8", title: "/5", description: "Ortalama Performans", icon: TrendingUp,
|
||||
},
|
||||
];
|
||||
|
||||
// Upcoming lessons
|
||||
const upcomingLessons = [
|
||||
{
|
||||
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/happy-office-colleagues-watching-project-presentation-together_74855-10013.jpg", videoAlt: "Matematik dersi", category: ["Matematik"],
|
||||
title: "İleri Cebir Dersi", excerpt: "Polinomlar ve denklemler konusunda derinlemesine çalışma. Zor problemleri çözmek için pratik yapalım.", imageAlt: "Matematik Dersi", authorName: "Dr. Ahmet Matematik", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg", date: "Yarın 14:00"
|
||||
title: "Matematik - Kalkülüs Temelleri", description: "Diferansiyel ve integral hesaplamalar üzerine odaklanmış dersin temellerini öğrenin.", imageSrc: "http://img.b2bpic.net/free-vector/modern-background-with-geometric-shapes_23-2147546962.jpg", imageAlt: "mathematics calculus lesson", button: { text: "Derse Katıl", href: "#" },
|
||||
},
|
||||
{
|
||||
id: "2", category: ["İngilizce"],
|
||||
title: "İngilizce Konuşma Pratiği", excerpt: "Günlük hayat senaryolarında İngilizce konuşma becerilerini geliştirmek. İfade ve aksanda odaklanacağız.", imageSrc: "http://img.b2bpic.net/free-vector/language-concept-background_23-2147872796.jpg", imageAlt: "İngilizce Dersi", authorName: "Miss Sarah English", authorAvatar: "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg", date: "27 Ocak 15:30"
|
||||
title: "İngilizce - Akademik Yazı", description: "İngilizce akademik yazı ve essay yazma tekniklerini geliştiriniz.", imageSrc: "http://img.b2bpic.net/free-vector/language-concept-background_23-2147872796.jpg", imageAlt: "english writing lesson", button: { text: "Derse Katıl", href: "#" },
|
||||
},
|
||||
{
|
||||
id: "3", category: ["Kimya"],
|
||||
title: "Kimya Deneyimleri Lab", excerpt: "Sanal laboratuvarda pratik deneyimler. Kimyasal reaksiyonları gözlemleyin ve analiz edin.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laboratory-test-tubes_23-2148891898.jpg", imageAlt: "Kimya Dersi", authorName: "Prof. Zeynep Kimya", authorAvatar: "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg", date: "29 Ocak 16:00"
|
||||
title: "Fizik - Kuantum Mekaniklerine Giriş", description: "Kuantum fiziğinin temel prensipleri ve uygulamaları.", imageSrc: "http://img.b2bpic.net/free-photo/crop-men-discussing-graph-tablet_23-2147785037.jpg", imageAlt: "physics quantum lesson", button: { text: "Derse Katıl", href: "#" },
|
||||
},
|
||||
{
|
||||
title: "Kimya - Organik Kimya Temelleri", description: "Organik kimyada karbon bileşikleri ve reaksiyonları.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laboratory-test-tubes_23-2148891898.jpg", imageAlt: "chemistry organic lesson", button: { text: "Derse Katıl", href: "#" },
|
||||
},
|
||||
];
|
||||
|
||||
// Recommended teachers
|
||||
const recommendedTeachers = [
|
||||
{
|
||||
id: "1", name: "Dr. Ahmet Yıldız", imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg", imageAlt: "Dr. Ahmet Yıldız"
|
||||
},
|
||||
id: "1", name: "Dr. Ahmet Kara", role: "Matematik Öğretmeni", imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg", imageAlt: "Dr. Ahmet Kara"},
|
||||
{
|
||||
id: "2", name: "Ayşe Şahin", imageSrc: "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg", imageAlt: "Ayşe Şahin"
|
||||
},
|
||||
id: "2", name: "Prof. Elif Yılmaz", role: "İngilizce Uzmanı", imageSrc: "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg", imageAlt: "Prof. Elif Yılmaz"},
|
||||
{
|
||||
id: "3", name: "Prof. Mehmet Kara", imageSrc: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-satisfied_1298-169.jpg", imageAlt: "Prof. Mehmet Kara"
|
||||
},
|
||||
id: "3", name: "Yrd. Doç. Mustafa Şahin", role: "Fizik Profesörü", imageSrc: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-satisfied_1298-169.jpg", imageAlt: "Yrd. Doç. Mustafa Şahin"},
|
||||
{
|
||||
id: "4", name: "Dr. Zeynep Demir", imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg", imageAlt: "Dr. Zeynep Demir"
|
||||
},
|
||||
id: "4", name: "Doç. Dr. Ziya Demir", role: "Kimya Öğretmeni", imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg", imageAlt: "Doç. Dr. Ziya Demir"},
|
||||
];
|
||||
|
||||
const weeklyProgress = [
|
||||
// Weekly progress data
|
||||
const weeklyProgressItems = [
|
||||
{
|
||||
id: "mon", imageSrc: "http://img.b2bpic.net/free-photo/happy-office-colleagues-watching-project-presentation-together_74855-10013.jpg", imageAlt: "Pazartesi dersleri"
|
||||
},
|
||||
title: "Pazartesi", description: "Matematik dersi tamamlandı - 95% başarı oranı", imageSrc: "http://img.b2bpic.net/free-vector/modern-background-with-geometric-shapes_23-2147546962.jpg", imageAlt: "Monday progress"},
|
||||
{
|
||||
id: "tue", imageSrc: "http://img.b2bpic.net/free-photo/front-view-older-business-woman-with-glasses-writing-agenda-looking-laptop_23-2148661168.jpg", imageAlt: "Salı dersleri"
|
||||
},
|
||||
title: "Salı", description: "İngilizce konuşma alıştırması - 88% başarı oranı", imageSrc: "http://img.b2bpic.net/free-vector/language-concept-background_23-2147872796.jpg", imageAlt: "Tuesday progress"},
|
||||
{
|
||||
id: "wed", imageSrc: "http://img.b2bpic.net/free-photo/friends-learning-study-group_23-2149257210.jpg", imageAlt: "Çarşamba dersleri"
|
||||
},
|
||||
title: "Çarşamba", description: "Fizik laboratuvarı deneyi - 92% başarı oranı", imageSrc: "http://img.b2bpic.net/free-photo/crop-men-discussing-graph-tablet_23-2147785037.jpg", imageAlt: "Wednesday progress"},
|
||||
{
|
||||
id: "thu", imageSrc: "http://img.b2bpic.net/free-photo/crop-men-discussing-graph-tablet_23-2147785037.jpg", imageAlt: "Perşembe dersleri"
|
||||
},
|
||||
title: "Perşembe", description: "Kimya uygulaması tamamlandı - 90% başarı oranı", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laboratory-test-tubes_23-2148891898.jpg", imageAlt: "Thursday progress"},
|
||||
];
|
||||
|
||||
const faqData = [
|
||||
{
|
||||
id: "1", title: "Dersi nasıl kaydedebilirim?", content: "Yaklaşan dersler bölümünde istediğiniz dersi bulun ve 'Derse Katıl' düğmesine tıklayın. Sistem sizi otomatik olarak kayıt edecektir."},
|
||||
{
|
||||
id: "2", title: "Öğretmeni nasıl değiştirebilirim?", content: "Ayarlar bölümünden 'Profil' seçeneğine gidin ve 'Tercih Edilen Öğretmen' değişikliğini yapın. Yeni öğretmen size yakında iletişim kuracaktır."},
|
||||
{
|
||||
id: "3", title: "Haftalık ilerlememizi nasıl izlerim?", content: "Dashboard'da 'Haftalık İlerleme' kartını kontrol edin. Günlük aktiviteleriniz ve başarı oranlarınız otomatik olarak güncellenir."},
|
||||
{
|
||||
id: "4", title: "Hedefimi nasıl ayarlayabilirim?", content: "Ana sayfada 'Hedef Ayarla' düğmesine tıklayın ve haftalık öğrenme hedeflerinizi belirleyin. İlerlemeniz gerçek zamanlı olarak izlenecektir."},
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -92,92 +99,83 @@ export default function DashboardPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Öğretmen Platformu"
|
||||
bottomLeftText="Öğrenci Paneli"
|
||||
bottomLeftText="Öğrenci Dashboard"
|
||||
bottomRightText="dashboard@platform.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Target Tracking Card */}
|
||||
<div id="targets" data-section="targets">
|
||||
<MetricCardTen
|
||||
<MetricCardOne
|
||||
metrics={targetMetrics}
|
||||
animationType="slide-up"
|
||||
title="Öğrenme Hedeflerim"
|
||||
description="Kişisel eğitim hedefleriniz ve ilerlemeniz"
|
||||
tag="Hedefler"
|
||||
tagIcon={Target}
|
||||
title="Haftalık Hedef Takibi"
|
||||
description="Öğrenme hedefleriniz ve ilerlemeniz"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="calendar" data-section="calendar">
|
||||
<BlogCardTwo
|
||||
blogs={upcomingLessons}
|
||||
{/* Upcoming Lessons Calendar */}
|
||||
<div id="lessons" data-section="lessons">
|
||||
<FeatureCardOne
|
||||
features={upcomingLessons}
|
||||
title="Yaklaşan Dersler"
|
||||
description="Planladığınız özel ders oturumları"
|
||||
description="Planlanmış dersleri görmek ve derse katılmak için tıklayın"
|
||||
textboxLayout="default"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
tag="Takvim"
|
||||
tagIcon={Calendar}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Recommended Teachers Section */}
|
||||
<div id="teachers" data-section="teachers">
|
||||
<TeamCardTen
|
||||
title="Sizin İçin Önerilen Öğretmenler"
|
||||
tag="Öneriler"
|
||||
tagAnimation="slide-up"
|
||||
membersAnimation="slide-up"
|
||||
members={recommendedTeachers}
|
||||
memberVariant="card"
|
||||
<TeamCardFive
|
||||
team={recommendedTeachers}
|
||||
title="Tavsiye Edilen Öğretmenler"
|
||||
description="Sizin için seçilen deneyimli eğitim uzmanları"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="weekly" data-section="weekly">
|
||||
<TimelineHorizontalCardStack
|
||||
{/* Weekly Progress Report */}
|
||||
<div id="progress" data-section="progress">
|
||||
<FeatureCardOne
|
||||
features={weeklyProgressItems}
|
||||
title="Haftalık İlerleme Raporu"
|
||||
description="Bu haftanın ders etkinliğini ve başarınızı görüntüleyin"
|
||||
description="Bu hafkası hatta adımlarınızı ve başarılarını görmek"
|
||||
textboxLayout="default"
|
||||
mediaItems={weeklyProgress}
|
||||
tag="İlerleme"
|
||||
tagIcon={TrendingUp}
|
||||
>
|
||||
<div>
|
||||
<h3 className="font-semibold">Pazartesi</h3>
|
||||
<p className="text-sm text-accent/75">Matematik: 2 saat çalışma</p>
|
||||
<p className="text-sm text-accent/75">Başarı: %85</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold">Salı</h3>
|
||||
<p className="text-sm text-accent/75">İngilizce: 1.5 saat konuşma</p>
|
||||
<p className="text-sm text-accent/75">Başarı: %78</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold">Çarşamba</h3>
|
||||
<p className="text-sm text-accent/75">Kimya: 2 saat lab çalışması</p>
|
||||
<p className="text-sm text-accent/75">Başarı: %90</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold">Perşembe</h3>
|
||||
<p className="text-sm text-accent/75">Tarih: 1 saat tartışma</p>
|
||||
<p className="text-sm text-accent/75">Başarı: %82</p>
|
||||
</div>
|
||||
</TimelineHorizontalCardStack>
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
faqs={faqData}
|
||||
title="Sıkça Sorulan Sorular"
|
||||
description="Dashboard hakkında sorularınızın cevaplarını bulun"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Öğretmen Platformu"
|
||||
leftLink={{
|
||||
text: "Gizlilik Politikası", href: "#"
|
||||
}}
|
||||
text: "Gizlilik Politikası", href: "#"}}
|
||||
rightLink={{
|
||||
text: "Kullanım Şartları", href: "#"
|
||||
}}
|
||||
text: "Kullanım Şartları", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,25 +1,38 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ReactLenis } from "lenis/react";
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
||||
});
|
||||
const inter = Inter({ variable: "--font-inter", subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Öğretmen Platformu - Kişiselleştirilmiş Online Eğitim", description: "50+ deneyimli öğretmenle bağlantı kurun ve kişiselleştirilmiş eğitim alın. Esnek zaman planlaması ve etkili öğrenme deneyimi.", keywords: "online eğitim, öğretmen, tutor, kişiselleştirilmiş öğrenme, ders, eğitim platformu", authors: [{ name: "Öğretmen Platformu" }],
|
||||
title: "Öğretmen Platformu - Online Eğitim Çözümleri", description: "50+ deneyimli öğretmenle bağlantı kurun. Kişiselleştirilmiş eğitim, esnek zaman planlaması ve etkili öğrenme deneyimi.", keywords: [
|
||||
"online eğitim", "öğretmen bulma", "özel ders", "eğitim platformu", "e-learning", "web tuition"],
|
||||
authors: [{ name: "Öğretmen Platformu" }],
|
||||
creator: "Öğretmen Platformu", publisher: "Öğretmen Platformu", formatDetection: {
|
||||
email: false,
|
||||
telephone: false,
|
||||
},
|
||||
metadataBase: new URL("https://ogretmen-platformu.com"),
|
||||
openGraph: {
|
||||
type: "website", locale: "tr_TR", url: "https://ogretmen-platformu.com", title: "Öğretmen Platformu - Kişiselleştirilmiş Online Eğitim", description: "50+ deneyimli öğretmenle bağlantı kurun ve kişiselleştirilmiş eğitim alın.", siteName: "Öğretmen Platformu", images: [
|
||||
type: "website", locale: "tr_TR", url: "https://ogretmen-platformu.com", siteName: "Öğretmen Platformu", title: "Öğretmen Platformu - Online Eğitim Çözümleri", description: "50+ deneyimli öğretmenle bağlantı kurun. Kişiselleştirilmiş eğitim, esnek zaman planlaması ve etkili öğrenme deneyimi.", images: [
|
||||
{
|
||||
url: "https://ogretmen-platformu.com/og-image.jpg", width: 1200,
|
||||
height: 630,
|
||||
alt: "Öğretmen Platformu"},
|
||||
alt: "Öğretmen Platformu", type: "image/jpeg"},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "Öğretmen Platformu", description: "Kişiselleştirilmiş online eğitim platformu", images: ["https://ogretmen-platformu.com/twitter-image.jpg"],
|
||||
card: "summary_large_image", title: "Öğretmen Platformu - Online Eğitim Çözümleri", description: "50+ deneyimli öğretmenle bağlantı kurun. Kişiselleştirilmiş eğitim, esnek zaman planlaması ve etkili öğrenme deneyimi.", creator: "@ogretmenplatformu", images: ["https://ogretmen-platformu.com/og-image.jpg"],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
googleBot: {
|
||||
index: true,
|
||||
follow: true,
|
||||
"max-video-preview": -1,
|
||||
"max-image-preview": "large", "max-snippet": -1,
|
||||
},
|
||||
},
|
||||
icons: {
|
||||
icon: [
|
||||
@@ -31,40 +44,60 @@ export const metadata: Metadata = {
|
||||
{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
|
||||
],
|
||||
},
|
||||
manifest: "/site.webmanifest", viewport: "width=device-width, initial-scale=1, maximum-scale=5", appleWebApp: {
|
||||
capable: true,
|
||||
statusBarStyle: "black-translucent", title: "Öğretmen Platformu"},
|
||||
manifest: "/site.webmanifest", alternates: {
|
||||
canonical: "https://ogretmen-platformu.com", languages: {
|
||||
"tr-TR": "https://ogretmen-platformu.com"},
|
||||
},
|
||||
};
|
||||
|
||||
export const viewport = {
|
||||
width: "device-width", initialScale: 1,
|
||||
maximumScale: 5,
|
||||
userScalable: true,
|
||||
themeColor: "#ffffff"};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="tr">
|
||||
<html lang="tr" suppressHydrationWarning>
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<link rel="alternate" hrefLang="tr" href="https://ogretmen-platformu.com" />
|
||||
<meta name="apple-mobile-web-app-title" content="Öğretmen Platformu" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
|
||||
></script>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify({
|
||||
"@context": "https://schema.org", "@type": "EducationalOrganization", "name": "Öğretmen Platformu", "url": "https://ogretmen-platformu.com", "logo": "https://ogretmen-platformu.com/logo.png", "description": "Kişiselleştirilmiş online eğitim platformu", "sameAs": [
|
||||
"https://twitter.com/ogretmenplatformu", "https://facebook.com/ogretmenplatformu", "https://instagram.com/ogretmenplatformu"
|
||||
]
|
||||
})
|
||||
__html: `
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'G-XXXXXXXXXX');
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body className={`${inter.variable} bg-background text-foreground`}>
|
||||
<ReactLenis root>
|
||||
{children}
|
||||
</ReactLenis>
|
||||
<CookieConsentBanner />
|
||||
<body className={inter.variable}>
|
||||
{children}
|
||||
<noscript>
|
||||
<iframe
|
||||
src="https://www.googletagmanager.com/ns.html?id=G-XXXXXXXXXX"
|
||||
height="0"
|
||||
width="0"
|
||||
style={{ display: "none", visibility: "hidden" }}
|
||||
></iframe>
|
||||
</noscript>
|
||||
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
@@ -1436,56 +1469,3 @@ export default function RootLayout({
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
function CookieConsentBanner() {
|
||||
return (
|
||||
<div
|
||||
id="cookie-consent"
|
||||
className="fixed bottom-0 left-0 right-0 z-50 p-4 bg-card border-t border-accent rounded-t-lg shadow-lg transform translate-y-full transition-transform duration-300 md:bottom-4 md:left-4 md:right-auto md:max-w-sm md:rounded-lg"
|
||||
role="region"
|
||||
aria-label="Cookie consent"
|
||||
>
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-sm text-foreground leading-relaxed">
|
||||
Deneyiminizi iyileştirmek için çerezleri kullanıyoruz. Site kullanımına devam ederek, çerez politikamızı kabul etmiş olursunuz.
|
||||
</p>
|
||||
<div className="flex gap-2 flex-col sm:flex-row sm:justify-end">
|
||||
<button
|
||||
onClick={() => {
|
||||
const banner = document.getElementById('cookie-consent');
|
||||
if (banner) banner.style.transform = 'translateY(100%)';
|
||||
localStorage.setItem('cookieConsent', 'accepted');
|
||||
}}
|
||||
className="px-4 py-2 rounded-md bg-primary-cta text-card font-medium text-sm hover:opacity-90 transition-opacity min-h-11 min-w-11 flex items-center justify-center"
|
||||
aria-label="Accept cookies"
|
||||
>
|
||||
Kabul Et
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
const banner = document.getElementById('cookie-consent');
|
||||
if (banner) banner.style.transform = 'translateY(100%)';
|
||||
localStorage.setItem('cookieConsent', 'rejected');
|
||||
}}
|
||||
className="px-4 py-2 rounded-md border border-accent text-foreground font-medium text-sm hover:bg-background-accent transition-colors min-h-11 min-w-11 flex items-center justify-center"
|
||||
aria-label="Reject cookies"
|
||||
>
|
||||
Reddet
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
(function() {
|
||||
const consent = localStorage.getItem('cookieConsent');
|
||||
if (!consent) {
|
||||
document.getElementById('cookie-consent').style.transform = 'translateY(0)';
|
||||
}
|
||||
})();
|
||||
`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,84 +1,59 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { Home, ArrowLeft } from "lucide-react";
|
||||
import { AlertCircle, Home, Search } from "lucide-react";
|
||||
|
||||
export default function NotFound() {
|
||||
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"
|
||||
>
|
||||
<div className="min-h-screen flex items-center justify-center px-4 py-8">
|
||||
<div className="text-center max-w-md w-full">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-9xl font-bold bg-gradient-to-r from-primary-cta to-secondary-cta bg-clip-text text-transparent mb-4">
|
||||
404
|
||||
</h1>
|
||||
<p className="text-2xl font-bold text-foreground mb-2">Sayfa Bulunamadı</p>
|
||||
<p className="text-foreground opacity-75">
|
||||
Aradığınız sayfa maalesef mevcut değil veya taşınmış olabilir.
|
||||
</p>
|
||||
</div>
|
||||
<div className="min-h-screen flex items-center justify-center px-4 py-12 bg-gradient-to-br from-background to-card">
|
||||
<div className="max-w-md w-full text-center">
|
||||
<div className="flex justify-center mb-6">
|
||||
<AlertCircle size={64} className="text-primary-cta opacity-80" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl font-bold text-foreground mb-2">404</h1>
|
||||
<h2 className="text-2xl font-semibold text-foreground mb-4">Sayfa Bulunamadı</h2>
|
||||
|
||||
<p className="text-gray-600 mb-8">
|
||||
Aradığınız sayfa taşınmış, silinmiş veya hiç var olmayabilir. Lütfen aşağıdaki bağlantılardan birini kullanarak geri dönün.
|
||||
</p>
|
||||
|
||||
<div className="bg-card border border-accent rounded-lg p-6 mb-8">
|
||||
<svg
|
||||
className="w-24 h-24 mx-auto mb-4 text-accent opacity-50"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-foreground text-sm opacity-75">
|
||||
Oops! Bir şeyler yanlış gitti. Lütfen ana sayfaya dönün veya bize ulaşın.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90 transition-opacity font-semibold"
|
||||
>
|
||||
<Home size={18} />
|
||||
Ana Sayfaya Dön
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/teachers"
|
||||
className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-card border border-border text-foreground rounded-lg hover:bg-background transition-colors font-semibold"
|
||||
>
|
||||
<Search size={18} />
|
||||
Öğretmenleri Gözat
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary-cta text-card font-medium hover:opacity-90 transition-opacity min-h-11 min-w-11"
|
||||
>
|
||||
<Home className="w-5 h-5" />
|
||||
Ana Sayfaya Dön
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => window.history.back()}
|
||||
className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg border border-accent text-foreground font-medium hover:bg-background-accent transition-colors min-h-11 min-w-11"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
Geri Git
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 pt-8 border-t border-accent">
|
||||
<p className="text-foreground opacity-50 text-sm mb-4">
|
||||
Halen sorun yaşıyor musunuz?
|
||||
</p>
|
||||
<Link
|
||||
href="#contact"
|
||||
className="inline-block px-4 py-2 text-primary-cta font-medium hover:underline text-sm"
|
||||
>
|
||||
Bize ulaşın →
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mt-12 p-6 bg-card rounded-lg border border-border">
|
||||
<h3 className="font-semibold text-foreground mb-3">Başka ne yapabiliriz?</h3>
|
||||
<ul className="text-sm text-gray-600 space-y-2 text-left">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-primary-cta mt-1">•</span>
|
||||
<span>Arama yardımı için destek ekibimizle iletişime geçin</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-primary-cta mt-1">•</span>
|
||||
<span>Ana menüyü kullanarak platformda gezin</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-primary-cta mt-1">•</span>
|
||||
<span>İstenilen dersi veya konuyu seçin</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
380
src/app/page.tsx
380
src/app/page.tsx
@@ -1,9 +1,383 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
||||
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import Link from "next/link";
|
||||
import { BookOpen, Star, TrendingUp, Users, Award, Filter, Search } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
interface SearchResult {
|
||||
id: string;
|
||||
name: string;
|
||||
category: string;
|
||||
rating: number;
|
||||
}
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Welcome to Home Page</h1>
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [autocompleteResults, setAutocompleteResults] = useState<SearchResult[]>([]);
|
||||
const [showAutocomplete, setShowAutocomplete] = useState(false);
|
||||
const [activeFilters, setActiveFilters] = useState<string[]>([]);
|
||||
const [showCookieConsent, setShowCookieConsent] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const cookieConsent = localStorage.getItem("cookie-consent");
|
||||
if (!cookieConsent) {
|
||||
setShowCookieConsent(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleCookieConsent = (accepted: boolean) => {
|
||||
localStorage.setItem("cookie-consent", accepted ? "accepted" : "rejected");
|
||||
setShowCookieConsent(false);
|
||||
};
|
||||
|
||||
const handleSearch = (query: string) => {
|
||||
setSearchQuery(query);
|
||||
if (query.length > 0) {
|
||||
const mockResults: SearchResult[] = [
|
||||
{ id: "1", name: "Matematik Özel Ders", category: "Matematik", rating: 4.9 },
|
||||
{ id: "2", name: "İngilizce Konuşma", category: "İngilizce", rating: 4.8 },
|
||||
{ id: "3", name: "Kimya Deneyleri", category: "Kimya", rating: 4.7 },
|
||||
{ id: "4", name: "Tarih Dersleri", category: "Tarih", rating: 4.9 },
|
||||
].filter(
|
||||
(r) =>
|
||||
r.name.toLowerCase().includes(query.toLowerCase()) ||
|
||||
r.category.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
setAutocompleteResults(mockResults);
|
||||
setShowAutocomplete(true);
|
||||
} else {
|
||||
setAutocompleteResults([]);
|
||||
setShowAutocomplete(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleFilter = (filter: string) => {
|
||||
setActiveFilters((prev) =>
|
||||
prev.includes(filter) ? prev.filter((f) => f !== filter) : [...prev, filter]
|
||||
);
|
||||
};
|
||||
|
||||
const formatTurkishCurrency = (amount: number): string => {
|
||||
return new Intl.NumberFormat("tr-TR", {
|
||||
style: "currency", currency: "TRY", minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const formatTurkishDate = (date: Date): string => {
|
||||
return new Intl.DateTimeFormat("tr-TR", {
|
||||
year: "numeric", month: "long", day: "numeric"}).format(date);
|
||||
};
|
||||
|
||||
const StarRating = ({ rating, count }: { rating: number; count?: number }) => (
|
||||
<div className="flex items-center gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
size={16}
|
||||
className={i < Math.floor(rating) ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}
|
||||
/>
|
||||
))}
|
||||
{count && <span className="text-sm text-gray-600 ml-1">({count})</span>}
|
||||
<span className="text-sm font-semibold ml-1">{rating}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Ana Sayfa", id: "/" },
|
||||
{ name: "Öğretmenler", id: "/teachers" },
|
||||
{ name: "Etkinlikler", id: "/events" },
|
||||
{ name: "Çalışma Programı", id: "/schedule" },
|
||||
];
|
||||
|
||||
const heroBtns = [
|
||||
{ text: "Hemen Başla", href: "/teachers" },
|
||||
];
|
||||
|
||||
const metricsData = [
|
||||
{
|
||||
id: "1", value: "50+", title: "Öğretmen", description: "Deneyimli eğitim profesyonelleri", imageSrc: "http://img.b2bpic.net/free-photo/people-standing-with-papers_23-2147657172.jpg", imageAlt: "professional teachers group portrait education"},
|
||||
{
|
||||
id: "2", value: "1000+", title: "Öğrenci", description: "Aktif kullanıcı topluluğu", imageSrc: "http://img.b2bpic.net/free-photo/happy-office-colleagues-watching-project-presentation-together_74855-10013.jpg", imageAlt: "students group learning education diverse"},
|
||||
{
|
||||
id: "3", value: "200+", title: "Ders", description: "Çeşitli konu başlıkları", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-educational-elements-arrangement-with-empty-notepad_23-2148721242.jpg", imageAlt: "course curriculum education subjects books"},
|
||||
{
|
||||
id: "4", value: "4.9/5", title: "Puan", description: "Ortalama memnuniyet oranı", imageSrc: "http://img.b2bpic.net/free-vector/education-white_24877-49399.jpg", imageAlt: "five star rating excellent satisfaction feedback"},
|
||||
];
|
||||
|
||||
const carouselItems = [
|
||||
{
|
||||
id: "1", imageSrc: "http://img.b2bpic.net/free-psd/children-school-education-landing-page_23-2149901102.jpg", imageAlt: "online learning education platform interface"},
|
||||
{
|
||||
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/senior-people-school-class-with-laptop-computer_23-2150104980.jpg", imageAlt: "online course learning platform screen"},
|
||||
{
|
||||
id: "3", imageSrc: "http://img.b2bpic.net/free-vector/virtual-graduation-ceremony-with-computer_23-2148569138.jpg", imageAlt: "online tutor video conference interface"},
|
||||
{
|
||||
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/friends-learning-study-group_23-2149257210.jpg", imageAlt: "education app notification schedule planning"},
|
||||
{
|
||||
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/crop-men-discussing-graph-tablet_23-2147785037.jpg", imageAlt: "digital education platform analytics dashboard"},
|
||||
{
|
||||
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/front-view-older-business-woman-with-glasses-writing-agenda-looking-laptop_23-2148661168.jpg", imageAlt: "online class registration booking system"},
|
||||
];
|
||||
|
||||
const eventsBlogsData = [
|
||||
{
|
||||
id: "1", category: ["Matematik"],
|
||||
title: "Trigonometri Ustalaşma Sürümü", excerpt: "Trigonometri kurallarını derinlemesine öğrenin, örnekler ve pratik problemlerle desteklenen kapsamlı ders.", imageSrc: "http://img.b2bpic.net/free-vector/modern-background-with-geometric-shapes_23-2147546962.jpg", imageAlt: "mathematics geometry trigonometry education board", authorName: "Ayşe Kaya", authorAvatar: "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg", date: "25 Ocak 2025"},
|
||||
{
|
||||
id: "2", category: ["İngilizce"],
|
||||
title: "İngilizce Konuşma Atölyesi", excerpt: "Günlük İngilizce konuşma becerilerinizi geliştirin, doğal diyaloglar ve kültürel bağlam ile.", imageSrc: "http://img.b2bpic.net/free-vector/language-concept-background_23-2147872796.jpg", imageAlt: "english language learning book study", authorName: "Mehmet Yıldız", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg", date: "27 Ocak 2025"},
|
||||
{
|
||||
id: "3", category: ["Kimya"],
|
||||
title: "Kimya Deneyimleri Laboratuvarı", excerpt: "Sanal laboratuvarıyla pratik deneyimler gain ve kimyasal reaksiyonları canlı tutun.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laboratory-test-tubes_23-2148891898.jpg", imageAlt: "chemistry laboratory science experiment beakers", authorName: "Zeynep Demir", authorAvatar: "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg", date: "29 Ocak 2025"},
|
||||
{
|
||||
id: "4", category: ["Tarih"],
|
||||
title: "Osmanlı İmparatorluğu Hikayesi", excerpt: "Osmanlı tarihinin önemli dönemleri, simgesel olaylar ve kültürel etkilerin kapsamlı incelemesi.", imageSrc: "http://img.b2bpic.net/free-photo/view-ancient-paper-scroll-writing-documenting_23-2151751754.jpg", imageAlt: "history book ancient civilization artifacts", authorName: "İbrahim Çelik", authorAvatar: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-satisfied_1298-169.jpg", date: "31 Ocak 2025"},
|
||||
];
|
||||
|
||||
const faqData = [
|
||||
{
|
||||
id: "1", title: "Platformda nasıl başlarım?", content: "Kayıt olun, öğretmen kategorilerini seçin ve profilinizi tamamlayın. Ardından istediğiniz öğretmenleri görüntüleyin ve rezervasyon yapın."},
|
||||
{
|
||||
id: "2", title: "Ders fiyatları ne kadar?", content: `Fiyatlar öğretmene ve derse göre değişir. Ortalama fiyatlar:
|
||||
<ul>
|
||||
<li>Bireysel Dersler: ${formatTurkishCurrency(150)} - ${formatTurkishCurrency(300)}</li>
|
||||
<li>Grup Dersleri: ${formatTurkishCurrency(100)} - ${formatTurkishCurrency(200)}</li>
|
||||
<li>Paket Fiyatları: ${formatTurkishCurrency(1500)} - ${formatTurkishCurrency(5000)}</li>
|
||||
</ul>`,
|
||||
},
|
||||
{
|
||||
id: "3", title: "İptal politikası nedir?", content: "Dersler başlamadan 24 saat önce iptal edebilirsiniz. Geç iptal edilen dersler geri iade edilmez. Öğretmen kaynaklı iptal durumlarında tam geri iade yapılır."},
|
||||
{
|
||||
id: "4", title: "Öğretmen değiştirebilir miyim?", content: "Evet! İlk dersten sonra öğretmen değiştirebilirsiniz. Destek ekibimizle iletişime geçerek yeni bir öğretmen seçebilirsiniz."},
|
||||
{
|
||||
id: "5", title: "Sertifikat alınır mı?", content: "Evet, kursları tamamlayan öğrenciler resmi sertifika alırlar. Sertifika, tamamlanan kurs saatini ve başarı notunuzu içerir."},
|
||||
{
|
||||
id: "6", title: "24/7 destek var mı?", content: "Evet! Canlı sohbet, email ve telefon desteği 24/7 mevcuttur. Ortalama yanıt süresi 5 dakikadır."},
|
||||
];
|
||||
|
||||
const contactButtons = [
|
||||
{ text: "Bize Yazın", href: "/contact" },
|
||||
{ text: "Canlı Sohbet", href: "#" },
|
||||
];
|
||||
|
||||
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 Navigation */}
|
||||
<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">Eğitim Platformu</span>
|
||||
</nav>
|
||||
|
||||
{/* Search & Filter Bar */}
|
||||
<div className="sticky top-0 z-40 bg-background border-b border-card p-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:gap-2">
|
||||
{/* Search with Autocomplete */}
|
||||
<div className="relative flex-1">
|
||||
<div className="flex items-center border border-card rounded-lg px-3 py-2 bg-card">
|
||||
<Search size={18} className="text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Öğretmen, ders veya konuyu ara..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
onFocus={() => searchQuery && setShowAutocomplete(true)}
|
||||
onBlur={() => setTimeout(() => setShowAutocomplete(false), 200)}
|
||||
className="w-full ml-2 bg-transparent outline-none text-foreground"
|
||||
aria-label="Arama"
|
||||
/>
|
||||
</div>
|
||||
{/* Autocomplete Dropdown */}
|
||||
{showAutocomplete && autocompleteResults.length > 0 && (
|
||||
<div className="absolute top-full left-0 right-0 mt-2 bg-card border border-card rounded-lg shadow-lg z-50">
|
||||
{autocompleteResults.map((result) => (
|
||||
<div
|
||||
key={result.id}
|
||||
className="px-4 py-3 border-b border-background last:border-0 hover:bg-background cursor-pointer flex justify-between items-center"
|
||||
>
|
||||
<div>
|
||||
<div className="font-semibold text-foreground">{result.name}</div>
|
||||
<div className="text-sm text-gray-500">{result.category}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Star size={16} className="fill-yellow-400 text-yellow-400" />
|
||||
<span className="text-sm font-semibold">{result.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filter Chips */}
|
||||
<div className="flex gap-2 overflow-x-auto pb-2 md:pb-0">
|
||||
{["Popüler", "En Yüksek Puan", "Yakında"].map((filter) => (
|
||||
<button
|
||||
key={filter}
|
||||
onClick={() => toggleFilter(filter)}
|
||||
className={`px-4 py-2 rounded-full text-sm whitespace-nowrap transition-colors ${
|
||||
activeFilters.includes(filter)
|
||||
? "bg-primary-cta text-white"
|
||||
: "bg-card text-foreground border border-card hover:bg-background"
|
||||
}`}
|
||||
aria-pressed={activeFilters.includes(filter)}
|
||||
>
|
||||
{filter}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Öğretmen Platformu"
|
||||
bottomLeftText="Eğitim Topluluğu"
|
||||
bottomRightText="info@platform.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Hayalinizdeki Öğretmeni Bulun"
|
||||
description="50+ deneyimli öğretmenle bağlantı kurun ve kişiselleştirilmiş eğitim alın. Esnek zaman planlaması ve etkili öğrenme deneyimi."
|
||||
tag="Çevrimiçi Eğitim"
|
||||
tagIcon={BookOpen}
|
||||
buttons={heroBtns}
|
||||
background={{ variant: "plain" }}
|
||||
carouselItems={carouselItems}
|
||||
autoPlay={true}
|
||||
autoPlayInterval={4000}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Trust Badges Section */}
|
||||
<div className="py-8 px-4 bg-card/50">
|
||||
<div className="max-w-7xl mx-auto flex flex-wrap justify-center gap-8 items-center">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Award size={20} className="text-primary-cta" />
|
||||
<span className="font-semibold">SSL Güvenli</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Award size={20} className="text-primary-cta" />
|
||||
<span className="font-semibold">Doğrulanmış Öğretmenler</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Award size={20} className="text-primary-cta" />
|
||||
<span className="font-semibold">Para İade Garantisi</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Award size={20} className="text-primary-cta" />
|
||||
<span className="font-semibold">4.9/5 Yıldız Puan</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
metrics={metricsData}
|
||||
title="Platformumuz ile Tanışın"
|
||||
description="Kalite ve etkililik konusunda güvenilebilir bir seçim"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="events" data-section="events">
|
||||
<BlogCardTwo
|
||||
blogs={eventsBlogsData}
|
||||
title="Yaklaşan Etkinlikler"
|
||||
description="Etkileşimli ders saatleri ve webinarlar"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<div id="faq" data-section="faq" className="py-12 px-4">
|
||||
<FaqDouble
|
||||
faqs={faqData}
|
||||
title="Sıkça Sorulan Sorular"
|
||||
description="Platformumuz hakkında merak ettiklerinizi öğrenin"
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Halen sorularınız mı var? Bize ulaşın ve eğitim yolculuğunuza başlayın. Destek ekibimiz 24/7 sizin hizmetinizde."
|
||||
animationType="entrance-slide"
|
||||
buttons={contactButtons}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Öğretmen Platformu"
|
||||
leftLink={{
|
||||
text: "Gizlilik Politikası", href: "#"}}
|
||||
rightLink={{
|
||||
text: "Kullanım Şartları", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Cookie Consent Banner */}
|
||||
{showCookieConsent && (
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-card border-t border-border p-4 shadow-lg z-50">
|
||||
<div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<p className="text-sm text-foreground">
|
||||
Bu web sitesi deneyimi geliştirmek için çerezleri kullanır. Kullanımına devam ederek kabulünüz olduğunu kabul edersiniz.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => handleCookieConsent(false)}
|
||||
className="px-4 py-2 text-sm border border-border rounded-lg hover:bg-background transition-colors"
|
||||
aria-label="Çerezleri reddet"
|
||||
>
|
||||
Reddet
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleCookieConsent(true)}
|
||||
className="px-4 py-2 text-sm bg-primary-cta text-white rounded-lg hover:opacity-90 transition-opacity"
|
||||
aria-label="Çerezleri kabul et"
|
||||
>
|
||||
Kabul Et
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,50 +1,242 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import { useState } from "react";
|
||||
import Textarea from "@/components/form/Textarea";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: "", lastName: "", email: "", phone: "", subject: "", message: ""});
|
||||
|
||||
const handleRegister = async (e: React.FormEvent) => {
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Ana Sayfa", id: "/" },
|
||||
{ name: "Öğretmenler", id: "/teachers" },
|
||||
{ name: "Kayıt", id: "/register" },
|
||||
{ name: "Çalışma Programı", id: "schedule" },
|
||||
];
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.firstName.trim()) {
|
||||
newErrors.firstName = "Ad gereklidir";
|
||||
}
|
||||
if (!formData.lastName.trim()) {
|
||||
newErrors.lastName = "Soyadı gereklidir";
|
||||
}
|
||||
if (!formData.email.trim()) {
|
||||
newErrors.email = "E-posta gereklidir";
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
||||
newErrors.email = "Geçerli bir e-posta adresi giriniz";
|
||||
}
|
||||
if (!formData.phone.trim()) {
|
||||
newErrors.phone = "Telefon numarası gereklidir";
|
||||
} else if (!/^[0-9+\-\s()]+$/.test(formData.phone)) {
|
||||
newErrors.phone = "Geçerli bir telefon numarası giriniz";
|
||||
}
|
||||
if (!formData.subject.trim()) {
|
||||
newErrors.subject = "Konu gereklidir";
|
||||
}
|
||||
if (!formData.message.trim()) {
|
||||
newErrors.message = "Mesaj gereklidir";
|
||||
} else if (formData.message.trim().length < 10) {
|
||||
newErrors.message = "Mesaj en az 10 karakter olmalıdır";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
if (errors[field]) {
|
||||
setErrors((prev) => ({
|
||||
...prev,
|
||||
[field]: ""}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
console.log("Registering with:", email, password);
|
||||
} catch (err) {
|
||||
console.log("Registration failed");
|
||||
if (validateForm()) {
|
||||
console.log("Form gönderildi:", formData);
|
||||
setSubmitted(true);
|
||||
setFormData({
|
||||
firstName: "", lastName: "", email: "", phone: "", subject: "", message: ""});
|
||||
setTimeout(() => setSubmitted(false), 5000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<form onSubmit={handleRegister} className="w-full max-w-md">
|
||||
<h1 className="text-2xl font-bold mb-6">Register</h1>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="Email"
|
||||
className="w-full p-2 mb-4 border rounded"
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Öğretmen Platformu"
|
||||
bottomLeftText="Eğitim Topluluğu"
|
||||
bottomRightText="info@platform.com"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Password"
|
||||
className="w-full p-2 mb-4 border rounded"
|
||||
</div>
|
||||
|
||||
<div id="register" data-section="register" className="min-h-screen py-20 px-4">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl md:text-5xl font-light mb-4">Öğrenci Kaydı</h1>
|
||||
<p className="text-lg text-foreground/70">
|
||||
Platformumuza katılın ve eğitim yolculuğunuza başlayın
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{submitted && (
|
||||
<div className="mb-6 p-4 bg-green-500/20 border border-green-500 rounded-lg">
|
||||
<p className="text-green-700">Başarıyla gönderildi! Yakında sizinle iletişime geçeceğiz.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="space-y-6 bg-card rounded-lg p-8 border border-foreground/10"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Ad *</label>
|
||||
<input
|
||||
value={formData.firstName}
|
||||
onChange={(e) => handleChange("firstName", e.target.value)}
|
||||
type="text"
|
||||
placeholder="Adınız"
|
||||
required
|
||||
className={`w-full px-4 py-2 rounded-md bg-secondary-button border border-foreground/10 text-foreground placeholder:text-foreground/75 focus:outline-none focus:ring-2 focus:ring-primary-cta transition-all ${
|
||||
errors.firstName ? "border-red-500" : ""
|
||||
}`}
|
||||
/>
|
||||
{errors.firstName && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.firstName}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Soyadı *</label>
|
||||
<input
|
||||
value={formData.lastName}
|
||||
onChange={(e) => handleChange("lastName", e.target.value)}
|
||||
type="text"
|
||||
placeholder="Soyadınız"
|
||||
required
|
||||
className={`w-full px-4 py-2 rounded-md bg-secondary-button border border-foreground/10 text-foreground placeholder:text-foreground/75 focus:outline-none focus:ring-2 focus:ring-primary-cta transition-all ${
|
||||
errors.lastName ? "border-red-500" : ""
|
||||
}`}
|
||||
/>
|
||||
{errors.lastName && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.lastName}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">E-posta *</label>
|
||||
<input
|
||||
value={formData.email}
|
||||
onChange={(e) => handleChange("email", e.target.value)}
|
||||
type="email"
|
||||
placeholder="örnek@email.com"
|
||||
required
|
||||
className={`w-full px-4 py-2 rounded-md bg-secondary-button border border-foreground/10 text-foreground placeholder:text-foreground/75 focus:outline-none focus:ring-2 focus:ring-primary-cta transition-all ${
|
||||
errors.email ? "border-red-500" : ""
|
||||
}`}
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Telefon *</label>
|
||||
<input
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleChange("phone", e.target.value)}
|
||||
type="tel"
|
||||
placeholder="+90 555 123 4567"
|
||||
required
|
||||
className={`w-full px-4 py-2 rounded-md bg-secondary-button border border-foreground/10 text-foreground placeholder:text-foreground/75 focus:outline-none focus:ring-2 focus:ring-primary-cta transition-all ${
|
||||
errors.phone ? "border-red-500" : ""
|
||||
}`}
|
||||
/>
|
||||
{errors.phone && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.phone}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Konu *</label>
|
||||
<input
|
||||
value={formData.subject}
|
||||
onChange={(e) => handleChange("subject", e.target.value)}
|
||||
type="text"
|
||||
placeholder="Kayıt nedeni"
|
||||
required
|
||||
className={`w-full px-4 py-2 rounded-md bg-secondary-button border border-foreground/10 text-foreground placeholder:text-foreground/75 focus:outline-none focus:ring-2 focus:ring-primary-cta transition-all ${
|
||||
errors.subject ? "border-red-500" : ""
|
||||
}`}
|
||||
/>
|
||||
{errors.subject && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.subject}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Mesaj *</label>
|
||||
<Textarea
|
||||
value={formData.message}
|
||||
onChange={(value) => handleChange("message", value)}
|
||||
placeholder="Bize hakkınızda biraz bilgi verin"
|
||||
rows={6}
|
||||
required
|
||||
className={errors.message ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.message && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-3 bg-primary-cta text-white rounded-md font-medium hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Kaydı Tamamla
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Öğretmen Platformu"
|
||||
leftLink={{
|
||||
text: "Gizlilik Politikası", href: "#"}}
|
||||
rightLink={{
|
||||
text: "Kullanım Şartları", href: "#"}}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
placeholder="Confirm Password"
|
||||
className="w-full p-2 mb-4 border rounded"
|
||||
/>
|
||||
<button type="submit" className="w-full p-2 bg-blue-500 text-white rounded">
|
||||
Register
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ html {
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-open-sans), sans-serif;
|
||||
font-family: var(--font-dm-sans), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
@@ -24,5 +24,5 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
font-family: var(--font-dm-sans), sans-serif;
|
||||
}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #0f1419;
|
||||
--card: #1a1f2e;
|
||||
--foreground: #e8eef5;
|
||||
--primary-cta: #1e4a7a;
|
||||
--background: #0a1628;
|
||||
--card: #0f1f35;
|
||||
--foreground: #e8f0f8;
|
||||
--primary-cta: #1a5c3a;
|
||||
--primary-cta-text: #f7f6f7;
|
||||
--secondary-cta: #0f9d6f;
|
||||
--secondary-cta: #0f1f35;
|
||||
--secondary-cta-text: #250c0d;
|
||||
--accent: #5d9cec;
|
||||
--background-accent: #2d6a9f;
|
||||
--accent: #22c55e;
|
||||
--background-accent: #16a34a;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
7
src/app/teacher-dashboard/layout.tsx
Normal file
7
src/app/teacher-dashboard/layout.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function TeacherDashboardLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
@@ -1,148 +1,50 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Home,
|
||||
Calendar,
|
||||
Users,
|
||||
MessageSquare,
|
||||
DollarSign,
|
||||
BarChart3,
|
||||
Settings,
|
||||
LogOut,
|
||||
Menu,
|
||||
X,
|
||||
Star,
|
||||
Clock,
|
||||
AlertCircle,
|
||||
CheckCircle,
|
||||
} from "lucide-react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts";
|
||||
|
||||
export default function TeacherDashboard() {
|
||||
const [activeMenu, setActiveMenu] = useState("home");
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
const TeacherDashboard = () => {
|
||||
const [comments, setComments] = useState<Array<{ id: string; name: string; text: string; date: string }>>([]);
|
||||
const [newComment, setNewComment] = useState("");
|
||||
const [newCommentName, setNewCommentName] = useState("");
|
||||
|
||||
const menuItems = [
|
||||
{ id: "home", label: "Home", icon: Home },
|
||||
{ id: "calendar", label: "Calendar", icon: Calendar },
|
||||
{ id: "students", label: "My Students", icon: Users },
|
||||
{ id: "messages", label: "Messages", icon: MessageSquare },
|
||||
{ id: "earnings", label: "Earnings", icon: DollarSign },
|
||||
{ id: "statistics", label: "Statistics", icon: BarChart3 },
|
||||
{ id: "settings", label: "Settings", icon: Settings },
|
||||
// Monthly earning data
|
||||
const earningData = [
|
||||
{ month: "Ocak", earning: 2400 },
|
||||
{ month: "Şubat", earning: 3200 },
|
||||
{ month: "Mart", earning: 2800 },
|
||||
{ month: "Nisan", earning: 3900 },
|
||||
{ month: "Mayıs", earning: 4200 },
|
||||
{ month: "Haziran", earning: 3800 },
|
||||
];
|
||||
|
||||
const monthlyStats = {
|
||||
earnings: "$4,280", lessons: 24,
|
||||
rating: 4.9,
|
||||
newStudents: 5,
|
||||
// Student count data
|
||||
const studentData = [
|
||||
{ month: "Ocak", students: 15 },
|
||||
{ month: "Şubat", students: 22 },
|
||||
{ month: "Mart", students: 28 },
|
||||
{ month: "Nisan", students: 35 },
|
||||
{ month: "Mayıs", students: 42 },
|
||||
{ month: "Haziran", students: 45 },
|
||||
];
|
||||
|
||||
const handleAddComment = () => {
|
||||
if (newComment.trim() && newCommentName.trim()) {
|
||||
setComments([
|
||||
...comments,
|
||||
{
|
||||
id: Date.now().toString(),
|
||||
name: newCommentName,
|
||||
text: newComment,
|
||||
date: new Date().toLocaleDateString("tr-TR"),
|
||||
},
|
||||
]);
|
||||
setNewComment("");
|
||||
setNewCommentName("");
|
||||
}
|
||||
};
|
||||
|
||||
const todayLessons = [
|
||||
{
|
||||
id: 1,
|
||||
studentName: "John Doe", subject: "Mathematics", time: "09:00 AM", duration: "1 hour", status: "upcoming"},
|
||||
{
|
||||
id: 2,
|
||||
studentName: "Sarah Smith", subject: "Physics", time: "10:30 AM", duration: "1 hour", status: "upcoming"},
|
||||
{
|
||||
id: 3,
|
||||
studentName: "Mike Johnson", subject: "English", time: "02:00 PM", duration: "45 minutes", status: "upcoming"},
|
||||
];
|
||||
|
||||
const pendingRequests = [
|
||||
{
|
||||
id: 1,
|
||||
studentName: "Emma Wilson", subject: "Chemistry", message: "Requesting trial lesson", requestDate: "2 hours ago"},
|
||||
{
|
||||
id: 2,
|
||||
studentName: "Alex Brown", subject: "Biology", message: "Requesting regular classes", requestDate: "5 hours ago"},
|
||||
{
|
||||
id: 3,
|
||||
studentName: "Jordan Lee", subject: "Mathematics", message: "Requesting intensive tutoring", requestDate: "1 day ago"},
|
||||
];
|
||||
|
||||
const MenuItem = ({ item }: any) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = activeMenu === item.id;
|
||||
return (
|
||||
<button
|
||||
onClick={() => setActiveMenu(item.id)}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 ${
|
||||
isActive
|
||||
? "bg-primary-cta text-white"
|
||||
: "text-foreground hover:bg-card"
|
||||
}`}
|
||||
>
|
||||
<Icon size={20} />
|
||||
{sidebarOpen && <span>{item.label}</span>}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
const StatCard = ({ label, value, icon: Icon }: any) => (
|
||||
<div className="bg-card rounded-lg p-6 border border-background-accent">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-foreground/60 text-sm">{label}</p>
|
||||
<p className="text-3xl font-bold text-foreground mt-2">{value}</p>
|
||||
</div>
|
||||
<Icon size={32} className="text-primary-cta opacity-50" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const LessonCard = ({ lesson }: any) => (
|
||||
<div className="bg-card rounded-lg p-4 border border-background-accent hover:shadow-lg transition-shadow">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="font-semibold text-foreground">{lesson.studentName}</h3>
|
||||
<span className="text-xs bg-primary-cta/10 text-primary-cta px-2 py-1 rounded">
|
||||
{lesson.subject}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-foreground/60">
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock size={16} />
|
||||
{lesson.time}
|
||||
</div>
|
||||
<span>{lesson.duration}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="px-4 py-2 bg-primary-cta text-white rounded-lg hover:bg-primary-cta/90 transition-colors text-sm">
|
||||
Join
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const RequestCard = ({ request }: any) => (
|
||||
<div className="bg-card rounded-lg p-4 border border-background-accent">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="font-semibold text-foreground">{request.studentName}</h3>
|
||||
<span className="text-xs bg-secondary-cta/10 text-secondary-cta px-2 py-1 rounded">
|
||||
{request.subject}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-foreground/70 mb-2">{request.message}</p>
|
||||
<p className="text-xs text-foreground/50">{request.requestDate}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button className="p-2 bg-green-500/10 text-green-600 rounded-lg hover:bg-green-500/20 transition-colors">
|
||||
<CheckCircle size={18} />
|
||||
</button>
|
||||
<button className="p-2 bg-red-500/10 text-red-600 rounded-lg hover:bg-red-500/20 transition-colors">
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
@@ -150,128 +52,127 @@ export default function TeacherDashboard() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="none"
|
||||
background="circleGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div className="flex h-screen bg-background">
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className={`${sidebarOpen ? "w-64" : "w-20"} bg-card border-r border-background-accent transition-all duration-300 flex flex-col`}
|
||||
>
|
||||
<div className="min-h-screen p-8 bg-gradient-to-br from-slate-50 to-slate-100">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="p-4 flex items-center justify-between border-b border-background-accent">
|
||||
{sidebarOpen && (
|
||||
<h2 className="text-xl font-bold text-foreground">Dashboard</h2>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
className="p-2 hover:bg-background rounded-lg transition-colors"
|
||||
>
|
||||
{sidebarOpen ? <X size={20} /> : <Menu size={20} />}
|
||||
</button>
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl font-bold text-slate-900 mb-2">Öğretmen Kontrol Paneli</h1>
|
||||
<p className="text-lg text-slate-600">Aylık kazanç, öğrenci sayısı ve yorumları takip edin</p>
|
||||
</div>
|
||||
|
||||
{/* Menu Items */}
|
||||
<nav className="flex-1 p-4 space-y-2 overflow-y-auto">
|
||||
{menuItems.map((item) => (
|
||||
<MenuItem key={item.id} item={item} />
|
||||
))}
|
||||
</nav>
|
||||
{/* Charts Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
|
||||
{/* Monthly Earning Chart */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-8 border border-slate-200">
|
||||
<h2 className="text-2xl font-semibold text-slate-900 mb-6">Aylık Kazançlar</h2>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={earningData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
|
||||
<XAxis dataKey="month" stroke="#64748b" />
|
||||
<YAxis stroke="#64748b" />
|
||||
<Tooltip
|
||||
contentStyle={{ backgroundColor: "#1e293b", border: "1px solid #475569", borderRadius: "8px", color: "#fff" }}
|
||||
formatter={(value) => `₺${value}`}
|
||||
/>
|
||||
<Legend />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="earning"
|
||||
stroke="#3b82f6"
|
||||
strokeWidth={3}
|
||||
dot={{ fill: "#3b82f6", r: 6 }}
|
||||
activeDot={{ r: 8 }}
|
||||
name="Kazanç (₺)"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{/* Logout */}
|
||||
<div className="p-4 border-t border-background-accent">
|
||||
<button className="w-full flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-500/10 rounded-lg transition-colors">
|
||||
<LogOut size={20} />
|
||||
{sidebarOpen && <span>Logout</span>}
|
||||
</button>
|
||||
{/* Student Count Chart */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-8 border border-slate-200">
|
||||
<h2 className="text-2xl font-semibold text-slate-900 mb-6">Öğrenci Sayısı Artışı</h2>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={studentData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
|
||||
<XAxis dataKey="month" stroke="#64748b" />
|
||||
<YAxis stroke="#64748b" />
|
||||
<Tooltip
|
||||
contentStyle={{ backgroundColor: "#1e293b", border: "1px solid #475569", borderRadius: "8px", color: "#fff" }}
|
||||
formatter={(value) => `${value} öğrenci`}
|
||||
/>
|
||||
<Legend />
|
||||
<Bar
|
||||
dataKey="students"
|
||||
fill="#10b981"
|
||||
radius={[8, 8, 0, 0]}
|
||||
name="Öğrenci Sayısı"
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="p-8 max-w-7xl mx-auto">
|
||||
{/* Welcome Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold text-foreground mb-2">
|
||||
Welcome back, Teacher!
|
||||
</h1>
|
||||
<p className="text-foreground/60">
|
||||
Here's your teaching dashboard for today
|
||||
</p>
|
||||
{/* Comments Section */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-8 border border-slate-200">
|
||||
<h2 className="text-2xl font-semibold text-slate-900 mb-6">Öğrenci Yorumları</h2>
|
||||
|
||||
{/* Add Comment Form */}
|
||||
<div className="mb-8 p-6 bg-slate-50 rounded-lg border border-slate-200">
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Yeni Yorum Ekle</h3>
|
||||
<div className="space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Adınız"
|
||||
value={newCommentName}
|
||||
onChange={(e) => setNewCommentName(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-slate-900 placeholder-slate-500"
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Yorumunuz"
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-slate-900 placeholder-slate-500 resize-none"
|
||||
rows={4}
|
||||
/>
|
||||
<button
|
||||
onClick={handleAddComment}
|
||||
className="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
|
||||
>
|
||||
Yorum Ekle
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Monthly Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<StatCard
|
||||
label="Monthly Earnings"
|
||||
value={monthlyStats.earnings}
|
||||
icon={DollarSign}
|
||||
/>
|
||||
<StatCard
|
||||
label="Lessons This Month"
|
||||
value={monthlyStats.lessons}
|
||||
icon={Calendar}
|
||||
/>
|
||||
<StatCard
|
||||
label="Your Rating"
|
||||
value={`${monthlyStats.rating} ⭐`}
|
||||
icon={Star}
|
||||
/>
|
||||
<StatCard
|
||||
label="New Students"
|
||||
value={monthlyStats.newStudents}
|
||||
icon={Users}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Today's Lessons */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4">
|
||||
Today's Lessons
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{todayLessons.map((lesson) => (
|
||||
<LessonCard key={lesson.id} lesson={lesson} />
|
||||
))}
|
||||
{/* Comments List */}
|
||||
<div className="space-y-4">
|
||||
{comments.length === 0 ? (
|
||||
<p className="text-center text-slate-500 py-8">Henüz yorum yok. Öğrencilerden aldığınız ilk yorumu ekleyin.</p>
|
||||
) : (
|
||||
comments.map((comment) => (
|
||||
<div
|
||||
key={comment.id}
|
||||
className="p-4 border border-slate-200 rounded-lg bg-slate-50 hover:bg-slate-100 transition-colors duration-200"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h4 className="font-semibold text-slate-900">{comment.name}</h4>
|
||||
<span className="text-sm text-slate-500">{comment.date}</span>
|
||||
</div>
|
||||
<p className="text-slate-700">{comment.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pending Requests */}
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<h2 className="text-2xl font-bold text-foreground">
|
||||
Pending Requests
|
||||
</h2>
|
||||
<span className="text-xs bg-accent/10 text-accent px-2 py-1 rounded-full">
|
||||
{pendingRequests.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{pendingRequests.length > 0 ? (
|
||||
pendingRequests.map((request) => (
|
||||
<RequestCard key={request.id} request={request} />
|
||||
))
|
||||
) : (
|
||||
<div className="bg-card rounded-lg p-6 border border-background-accent text-center">
|
||||
<AlertCircle size={32} className="mx-auto text-foreground/40 mb-2" />
|
||||
<p className="text-foreground/60">No pending requests</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default TeacherDashboard;
|
||||
|
||||
@@ -1,9 +1,84 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import SplitAbout from "@/components/sections/about/SplitAbout";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { Users, BookOpen, Clock, Award } from "lucide-react";
|
||||
|
||||
export default function TeachersPage() {
|
||||
const navItems = [
|
||||
{ name: "Ana Sayfa", id: "/" },
|
||||
{ name: "Öğretmenler", id: "/teachers" },
|
||||
{ name: "Etkinlikler", id: "events" },
|
||||
{ name: "Çalışma Programı", id: "schedule" },
|
||||
];
|
||||
|
||||
const bulletPoints = [
|
||||
{
|
||||
title: "Deneyimli Profesyoneller", description: "50+ sertifikalı ve deneyimli öğretmen", icon: Users,
|
||||
},
|
||||
{
|
||||
title: "Kapsamlı Ders Katalogları", description: "200+ farklı konu ve disiplin", icon: BookOpen,
|
||||
},
|
||||
{
|
||||
title: "Esnek Zaman Planlaması", description: "Kendi zaman diliminizde dersler", icon: Clock,
|
||||
},
|
||||
{
|
||||
title: "Kalite Garantisi", description: "4.9/5 ortalama memnuniyet oranı", icon: Award,
|
||||
},
|
||||
];
|
||||
|
||||
const contactButtons = [
|
||||
{
|
||||
text: "Öğretmen Bul", href: "#"},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Teachers Page</h1>
|
||||
</div>
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Öğretmen Platformu"
|
||||
bottomLeftText="Eğitim Topluluğu"
|
||||
bottomRightText="info@platform.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
title="Platformumuzun Öğretmenleri"
|
||||
description="Deneyimli, tutkulu ve eğitim konusunda deryabarı profesyonellerin özel topluluğu"
|
||||
textboxLayout="default"
|
||||
bulletPoints={bulletPoints}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/happy-office-colleagues-watching-project-presentation-together_74855-10013.jpg"
|
||||
imageAlt="experienced teachers collaboration education"
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
buttons={contactButtons}
|
||||
/>
|
||||
</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