Merge version_2 into main #9
@@ -1,60 +1,17 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({ variable: "--font-inter", subsets: ["latin"] });
|
||||
const geist = Geist({
|
||||
variable: "--font-geist-sans", subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono", subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
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", 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", type: "image/jpeg"},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
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: [
|
||||
{ url: "/favicon.ico", sizes: "any" },
|
||||
{ url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
|
||||
{ url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
|
||||
],
|
||||
apple: [
|
||||
{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
|
||||
],
|
||||
},
|
||||
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"};
|
||||
title: "Teacher Dashboard", description: "Teacher dashboard with lessons, students, and earnings management"};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
@@ -62,42 +19,9 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<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" />
|
||||
<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
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'G-XXXXXXXXXX');
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body className={inter.variable}>
|
||||
<html lang="en">
|
||||
<body className={`${geist.variable} ${geistMono.variable} antialiased`}>
|
||||
{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={{
|
||||
|
||||
249
src/app/page.tsx
249
src/app/page.tsx
@@ -1,6 +1,5 @@
|
||||
"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";
|
||||
@@ -8,99 +7,20 @@ 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;
|
||||
}
|
||||
import { BookOpen } from "lucide-react";
|
||||
|
||||
export default function HomePage() {
|
||||
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" },
|
||||
{ name: "Öğretmen Paneli", id: "/teacher-dashboard" },
|
||||
{ name: "Etkinlikler", id: "events" },
|
||||
{ name: "Çalışma Programı", id: "schedule" },
|
||||
];
|
||||
|
||||
const heroBtns = [
|
||||
{ text: "Hemen Başla", href: "/teachers" },
|
||||
{
|
||||
text: "Hemen Başla", href: "/teacher-dashboard"},
|
||||
];
|
||||
|
||||
const metricsData = [
|
||||
@@ -144,30 +64,11 @@ export default function HomePage() {
|
||||
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: "#" },
|
||||
{
|
||||
text: "Bize Yazın", href: "/contact"},
|
||||
{
|
||||
text: "Canlı Sohbet", href: "#"},
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -183,75 +84,6 @@ export default function HomePage() {
|
||||
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}
|
||||
@@ -275,28 +107,6 @@ export default function HomePage() {
|
||||
/>
|
||||
</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}
|
||||
@@ -320,18 +130,6 @@ export default function HomePage() {
|
||||
/>
|
||||
</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."
|
||||
@@ -351,33 +149,6 @@ export default function HomePage() {
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
330
src/app/students/page.tsx
Normal file
330
src/app/students/page.tsx
Normal file
@@ -0,0 +1,330 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import Input from "@/components/form/Input";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { Mail } from "lucide-react";
|
||||
|
||||
interface FormErrors {
|
||||
firstName?: string;
|
||||
lastName?: string;
|
||||
email?: string;
|
||||
grade?: string;
|
||||
learningGoals?: string;
|
||||
}
|
||||
|
||||
export default function StudentRegistrationPage() {
|
||||
const navItems = [
|
||||
{ name: "Ana Sayfa", id: "/" },
|
||||
{ name: "Öğretmenler", id: "/teachers" },
|
||||
{ name: "Öğrenciler", id: "/students" },
|
||||
{ name: "Çalışma Programı", id: "schedule" },
|
||||
];
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: "", lastName: "", email: "", grade: "", learningGoals: ""});
|
||||
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
const newErrors: FormErrors = {};
|
||||
|
||||
if (!formData.firstName.trim()) {
|
||||
newErrors.firstName = "Ad gereklidir";
|
||||
}
|
||||
|
||||
if (!formData.lastName.trim()) {
|
||||
newErrors.lastName = "Soyadı gereklidir";
|
||||
}
|
||||
|
||||
if (!formData.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
|
||||
newErrors.email = "Geçerli bir email adı girin";
|
||||
}
|
||||
|
||||
if (!formData.grade.trim()) {
|
||||
newErrors.grade = "Sınıf seçiniz";
|
||||
}
|
||||
|
||||
if (!formData.learningGoals.trim()) {
|
||||
newErrors.learningGoals = "Öğrenme hedefleri gereklidir";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
// Simulate API call
|
||||
setTimeout(() => {
|
||||
console.log("Form submitted:", formData);
|
||||
setSubmitted(true);
|
||||
setIsSubmitting(false);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setFormData({
|
||||
firstName: "", lastName: "", email: "", grade: "", learningGoals: ""});
|
||||
setErrors({});
|
||||
setSubmitted(false);
|
||||
};
|
||||
|
||||
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 id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Öğretmen Platformu"
|
||||
bottomLeftText="Eğitim Topluluğu"
|
||||
bottomRightText="info@platform.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-12 px-4 pt-32">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-slate-900 mb-2">Öğrenci Kaydı</h1>
|
||||
<p className="text-lg text-slate-600">Eğitim yolculuğunuza katılın ve size uygun öğretmen bulun</p>
|
||||
</div>
|
||||
|
||||
{/* Success Message */}
|
||||
{submitted ? (
|
||||
<div className="bg-white rounded-lg shadow-lg p-12 text-center">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-6">
|
||||
<svg
|
||||
className="w-8 h-8 text-green-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-2">Kayıt Başarılı!</h2>
|
||||
<p className="text-slate-600 mb-6">
|
||||
Merhaba <strong>{formData.firstName} {formData.lastName}</strong>, kaydınız başarıyla tamamlanmıştır.
|
||||
</p>
|
||||
<p className="text-slate-600 mb-8">
|
||||
En yakın zamanda size uygun öğretmen önerileri gönderilecektir. Lütfen email kutunuzu kontrol edin.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleReset}
|
||||
className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition"
|
||||
>
|
||||
Yeni Kayıt
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
/* Registration Form */
|
||||
<form onSubmit={handleSubmit} className="bg-white rounded-lg shadow-lg p-8">
|
||||
<div className="space-y-6">
|
||||
{/* First Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Ad *</label>
|
||||
<Input
|
||||
value={formData.firstName}
|
||||
onChange={(value) => {
|
||||
setFormData({ ...formData, firstName: value });
|
||||
if (errors.firstName) {
|
||||
setErrors({ ...errors, firstName: undefined });
|
||||
}
|
||||
}}
|
||||
type="text"
|
||||
placeholder="Adınız"
|
||||
required
|
||||
/>
|
||||
{errors.firstName && (
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className="text-red-500">⚠</span>
|
||||
<p className="text-red-600 text-sm">{errors.firstName}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Last Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Soyadı *</label>
|
||||
<Input
|
||||
value={formData.lastName}
|
||||
onChange={(value) => {
|
||||
setFormData({ ...formData, lastName: value });
|
||||
if (errors.lastName) {
|
||||
setErrors({ ...errors, lastName: undefined });
|
||||
}
|
||||
}}
|
||||
type="text"
|
||||
placeholder="Soyadınız"
|
||||
required
|
||||
/>
|
||||
{errors.lastName && (
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className="text-red-500">⚠</span>
|
||||
<p className="text-red-600 text-sm">{errors.lastName}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Email Adresi *</label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
value={formData.email}
|
||||
onChange={(value) => {
|
||||
setFormData({ ...formData, email: value });
|
||||
if (errors.email) {
|
||||
setErrors({ ...errors, email: undefined });
|
||||
}
|
||||
}}
|
||||
type="email"
|
||||
placeholder="example@email.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{errors.email ? (
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className="text-red-500">⚠</span>
|
||||
<p className="text-red-600 text-sm">{errors.email}</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-slate-500 text-sm mt-2">Güvenli ve gizli tutulacaktır</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Grade Level */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Sınıf Seviyesi *</label>
|
||||
<select
|
||||
value={formData.grade}
|
||||
onChange={(e) => {
|
||||
setFormData({ ...formData, grade: e.target.value });
|
||||
if (errors.grade) {
|
||||
setErrors({ ...errors, grade: undefined });
|
||||
}
|
||||
}}
|
||||
className="w-full px-4 py-2 bg-slate-100 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-slate-900"
|
||||
required
|
||||
>
|
||||
<option value="">Sınıf seçiniz</option>
|
||||
<option value="primary">İlkokul (1-4)</option>
|
||||
<option value="middle">Ortaokul (5-8)</option>
|
||||
<option value="high">Lise (9-12)</option>
|
||||
<option value="university">Üniversite</option>
|
||||
<option value="adult">Yetişkinler</option>
|
||||
</select>
|
||||
{errors.grade && (
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className="text-red-500">⚠</span>
|
||||
<p className="text-red-600 text-sm">{errors.grade}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Learning Goals */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Öğrenme Hedefleri *</label>
|
||||
<textarea
|
||||
value={formData.learningGoals}
|
||||
onChange={(e) => {
|
||||
setFormData({ ...formData, learningGoals: e.target.value });
|
||||
if (errors.learningGoals) {
|
||||
setErrors({ ...errors, learningGoals: undefined });
|
||||
}
|
||||
}}
|
||||
placeholder="Ne öğrenmek istiyorsunuz? Örn: Matematik becerilerimi geliştirmek, İngilizce konuşmayı öğrenmek..."
|
||||
rows={4}
|
||||
className="w-full px-4 py-2 bg-slate-100 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none text-slate-900"
|
||||
required
|
||||
/>
|
||||
{errors.learningGoals ? (
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className="text-red-500">⚠</span>
|
||||
<p className="text-red-600 text-sm">{errors.learningGoals}</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-slate-500 text-sm mt-2">Hedefleriniz, size doğru öğretmen bulunması için önemlidir</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Terms Agreement */}
|
||||
<div className="flex items-start gap-3 p-4 bg-blue-50 rounded-lg">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="terms"
|
||||
className="mt-1 w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
|
||||
defaultChecked
|
||||
/>
|
||||
<label htmlFor="terms" className="text-sm text-slate-700">
|
||||
Kullanım şartlarını ve gizlilik politikasını kabul ediyorum
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div className="mt-8">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg font-medium transition flex items-center justify-center gap-2"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Kaydediliyor...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Mail size={20} />
|
||||
Kaydı Tamamla
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Login Link */}
|
||||
<p className="text-center text-slate-600 mt-6">
|
||||
Zaten kayıtlı mısınız?{" "}
|
||||
<a href="/" className="text-blue-600 hover:text-blue-700 font-medium">
|
||||
Giriş yapın
|
||||
</a>
|
||||
</p>
|
||||
</form>
|
||||
)}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -2,48 +2,85 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
||||
import {
|
||||
Home,
|
||||
Calendar,
|
||||
Users,
|
||||
MessageSquare,
|
||||
DollarSign,
|
||||
BarChart3,
|
||||
Settings,
|
||||
TrendingUp,
|
||||
Award,
|
||||
Star,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
Clock3,
|
||||
Send,
|
||||
} from "lucide-react";
|
||||
|
||||
const TeacherDashboard = () => {
|
||||
const [comments, setComments] = useState<Array<{ id: string; name: string; text: string; date: string }>>([]);
|
||||
const [newComment, setNewComment] = useState("");
|
||||
const [newCommentName, setNewCommentName] = useState("");
|
||||
export default function TeacherDashboard() {
|
||||
const [activeMenu, setActiveMenu] = useState("home");
|
||||
|
||||
// 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 navItems = [
|
||||
{ name: "Ana Sayfa", id: "/" },
|
||||
{ name: "Öğretmen Paneli", id: "/teacher-dashboard" },
|
||||
];
|
||||
|
||||
// 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 menuItems = [
|
||||
{ id: "home", label: "Ana Sayfa", icon: Home },
|
||||
{ id: "calendar", label: "Takvim", icon: Calendar },
|
||||
{ id: "students", label: "Öğrencilerim", icon: Users },
|
||||
{ id: "messages", label: "Mesajlar", icon: MessageSquare },
|
||||
{ id: "earnings", label: "Kazançlar", icon: DollarSign },
|
||||
{ id: "statistics", label: "İstatistikler", icon: BarChart3 },
|
||||
{ id: "settings", label: "Ayarlar", icon: Settings },
|
||||
];
|
||||
|
||||
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", title: "Matematik - Cebir Temelleri", student: "Ahmet Demir", time: "09:00 - 10:00", status: "scheduled"},
|
||||
{
|
||||
id: "2", title: "İngilizce - Konuşma Pratiği", student: "Zeynep Kaya", time: "11:00 - 12:00", status: "scheduled"},
|
||||
{
|
||||
id: "3", title: "Fizik - Hareket Kanunları", student: "Mehmet Yılmaz", time: "14:00 - 15:00", status: "in-progress"},
|
||||
];
|
||||
|
||||
const pendingRequests = [
|
||||
{
|
||||
id: "1", student: "Ali Şahin", subject: "Kimya", date: "5 Şubat 2025", time: "15:00"},
|
||||
{
|
||||
id: "2", student: "Emine Çetin", subject: "Tarih", date: "6 Şubat 2025", time: "16:30"},
|
||||
];
|
||||
|
||||
const newMessages = [
|
||||
{
|
||||
id: "1", from: "Ahmet Demir", message: "Ders için teşekkürler, çok faydalı oldu!", time: "5 dakika önce"},
|
||||
{
|
||||
id: "2", from: "Zeynep Kaya", message: "Sonraki ders için kaynak önerebilir misiniz?", time: "2 saat önce"},
|
||||
{
|
||||
id: "3", from: "Mehmet Yılmaz", message: "Pazartesi dersini erteleyebilir miyim?", time: "4 saat önce"},
|
||||
];
|
||||
|
||||
const monthlyEarnings = [
|
||||
{ month: "Ocak", amount: 2400 },
|
||||
{ month: "Şubat", amount: 2800 },
|
||||
{ month: "Mart", amount: 2200 },
|
||||
{ month: "Nisan", amount: 3000 },
|
||||
{ month: "Mayıs", amount: 2600 },
|
||||
{ month: "Haziran", amount: 3200 },
|
||||
];
|
||||
|
||||
const studentCount = [
|
||||
{ month: "Ocak", count: 12 },
|
||||
{ month: "Şubat", count: 15 },
|
||||
{ month: "Mart", count: 18 },
|
||||
{ month: "Nisan", count: 16 },
|
||||
{ month: "Mayıs", count: 20 },
|
||||
{ month: "Haziran", count: 22 },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -58,121 +95,273 @@ const TeacherDashboard = () => {
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<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="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>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Öğretmen Platformu"
|
||||
bottomLeftText="Öğretmen Paneli"
|
||||
bottomRightText="info@platform.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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}
|
||||
/>
|
||||
<div className="flex min-h-screen bg-background pt-24">
|
||||
{/* Left Sidebar Menu */}
|
||||
<aside className="w-64 bg-card border-r border-accent p-6 fixed left-0 top-20 bottom-0 overflow-y-auto">
|
||||
<nav className="space-y-2">
|
||||
{menuItems.map((item) => {
|
||||
const IconComponent = item.icon;
|
||||
return (
|
||||
<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"
|
||||
key={item.id}
|
||||
onClick={() => setActiveMenu(item.id)}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
|
||||
activeMenu === item.id
|
||||
? "bg-primary-cta text-background"
|
||||
: "text-foreground hover:bg-background-accent"
|
||||
}`}
|
||||
>
|
||||
Yorum Ekle
|
||||
<IconComponent size={20} />
|
||||
<span className="font-medium">{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="ml-64 flex-1 p-8">
|
||||
{activeMenu === "home" && (
|
||||
<div className="space-y-8">
|
||||
{/* Welcome Card */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="md:col-span-4 bg-card border border-accent rounded-lg p-6 shadow-lg">
|
||||
<h2 className="text-3xl font-bold text-foreground mb-2">
|
||||
Hoşgeldiniz, Ayşe!
|
||||
</h2>
|
||||
<p className="text-foreground/70 mb-6">
|
||||
Ocak ayında başarılı bir ay geçiriyorsunuz.
|
||||
</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="bg-background rounded-lg p-4">
|
||||
<div className="text-sm text-foreground/70 mb-1">
|
||||
Aylık Kazanç
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-primary-cta">
|
||||
₺2,400
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-background rounded-lg p-4">
|
||||
<div className="text-sm text-foreground/70 mb-1">
|
||||
Ders Sayısı
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-accent">24</div>
|
||||
</div>
|
||||
<div className="bg-background rounded-lg p-4">
|
||||
<div className="text-sm text-foreground/70 mb-1">
|
||||
Puan
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-secondary-cta">
|
||||
4.8/5
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-background rounded-lg p-4">
|
||||
<div className="text-sm text-foreground/70 mb-1">
|
||||
Yeni Öğrenci
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-accent">3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Today's Lessons */}
|
||||
<div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<Clock size={24} className="text-primary-cta" />
|
||||
<h3 className="text-2xl font-bold text-foreground">
|
||||
Bugünün Dersleri
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{todayLessons.map((lesson) => (
|
||||
<div
|
||||
key={lesson.id}
|
||||
className="flex items-start gap-4 p-4 bg-background rounded-lg border border-background-accent"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-foreground">
|
||||
{lesson.title}
|
||||
</h4>
|
||||
<p className="text-sm text-foreground/70">
|
||||
Öğrenci: {lesson.student}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{lesson.time}
|
||||
</p>
|
||||
<span
|
||||
className={`inline-block text-xs px-2 py-1 rounded-full mt-1 ${
|
||||
lesson.status === "in-progress"
|
||||
? "bg-primary-cta/20 text-primary-cta"
|
||||
: "bg-accent/20 text-accent"
|
||||
}`}
|
||||
>
|
||||
{lesson.status === "in-progress"
|
||||
? "Devam Ediyor"
|
||||
: "Planlandı"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pending Requests and New Messages */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Pending Requests */}
|
||||
<div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<CheckCircle size={24} className="text-accent" />
|
||||
<h3 className="text-xl font-bold text-foreground">
|
||||
Bekleyen İstekler
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{pendingRequests.map((request) => (
|
||||
<div
|
||||
key={request.id}
|
||||
className="p-4 bg-background rounded-lg border border-background-accent"
|
||||
>
|
||||
<p className="font-semibold text-foreground">
|
||||
{request.student}
|
||||
</p>
|
||||
<p className="text-sm text-foreground/70">
|
||||
{request.subject} • {request.date} {request.time}
|
||||
</p>
|
||||
<div className="flex gap-2 mt-3">
|
||||
<button className="flex-1 text-xs bg-primary-cta text-background px-3 py-1 rounded hover:opacity-90 transition-opacity">
|
||||
Onayla
|
||||
</button>
|
||||
<button className="flex-1 text-xs bg-background-accent text-foreground px-3 py-1 rounded hover:opacity-80 transition-opacity">
|
||||
İptal Et
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* New Messages */}
|
||||
<div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<Send size={24} className="text-secondary-cta" />
|
||||
<h3 className="text-xl font-bold text-foreground">
|
||||
Yeni Mesajlar
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-3 max-h-64 overflow-y-auto">
|
||||
{newMessages.map((msg) => (
|
||||
<div
|
||||
key={msg.id}
|
||||
className="p-4 bg-background rounded-lg border border-background-accent hover:border-accent/50 transition-colors cursor-pointer"
|
||||
>
|
||||
<p className="font-semibold text-foreground">{msg.from}</p>
|
||||
<p className="text-sm text-foreground/70 mt-1">{msg.message}</p>
|
||||
<p className="text-xs text-foreground/50 mt-2">{msg.time}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Charts Section */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Monthly Earnings Chart */}
|
||||
<div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
|
||||
<h3 className="text-xl font-bold text-foreground mb-6">
|
||||
Aylık Kazançlar
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{monthlyEarnings.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center gap-3">
|
||||
<span className="w-16 text-sm font-medium text-foreground/70">
|
||||
{item.month}
|
||||
</span>
|
||||
<div className="flex-1 bg-background rounded-full h-8 relative">
|
||||
<div
|
||||
className="bg-gradient-to-r from-primary-cta to-accent h-full rounded-full flex items-center justify-end px-3"
|
||||
style={{
|
||||
width: `${(item.amount / 3200) * 100}%`,
|
||||
}}
|
||||
>
|
||||
{item.amount > 2000 && (
|
||||
<span className="text-xs font-bold text-background">
|
||||
₺{item.amount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{item.amount <= 2000 && (
|
||||
<span className="absolute inset-y-0 right-2 flex items-center text-xs font-bold text-foreground">
|
||||
₺{item.amount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Student Count Chart */}
|
||||
<div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
|
||||
<h3 className="text-xl font-bold text-foreground mb-6">
|
||||
Öğrenci Sayısı Gelişimi
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{studentCount.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center gap-3">
|
||||
<span className="w-16 text-sm font-medium text-foreground/70">
|
||||
{item.month}
|
||||
</span>
|
||||
<div className="flex-1 bg-background rounded-full h-8 relative">
|
||||
<div
|
||||
className="bg-gradient-to-r from-accent to-secondary-cta h-full rounded-full flex items-center justify-end px-3"
|
||||
style={{
|
||||
width: `${(item.count / 22) * 100}%`,
|
||||
}}
|
||||
>
|
||||
{item.count > 10 && (
|
||||
<span className="text-xs font-bold text-background">
|
||||
{item.count}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{item.count <= 10 && (
|
||||
<span className="absolute inset-y-0 right-2 flex items-center text-xs font-bold text-foreground">
|
||||
{item.count}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
))
|
||||
)}
|
||||
{activeMenu !== "home" && (
|
||||
<div className="text-center py-20">
|
||||
<h2 className="text-3xl font-bold text-foreground mb-4">
|
||||
{menuItems.find((m) => m.id === activeMenu)?.label}
|
||||
</h2>
|
||||
<p className="text-foreground/70 text-lg">
|
||||
Bu bölüm yakında hazırlanacaktır.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeacherDashboard;
|
||||
}
|
||||
|
||||
@@ -1,38 +1,167 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import SplitAbout from "@/components/sections/about/SplitAbout";
|
||||
import Input from "@/components/form/Input";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { Users, BookOpen, Clock, Award } from "lucide-react";
|
||||
import { ChevronRight, Check } from "lucide-react";
|
||||
|
||||
export default function TeachersPage() {
|
||||
export default function TeacherRegistrationPage() {
|
||||
const navItems = [
|
||||
{ name: "Ana Sayfa", id: "/" },
|
||||
{ name: "Öğretmenler", id: "/teachers" },
|
||||
{ name: "Etkinlikler", id: "events" },
|
||||
{ name: "Öğrenciler", id: "/students" },
|
||||
{ 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 [currentStep, setCurrentStep] = useState(1);
|
||||
const totalSteps = 5;
|
||||
|
||||
const contactButtons = [
|
||||
{
|
||||
text: "Öğretmen Bul", href: "#"},
|
||||
];
|
||||
// Personal Info Step
|
||||
const [personalInfo, setPersonalInfo] = useState({
|
||||
firstName: "", lastName: "", email: "", phone: ""});
|
||||
const [personalErrors, setPersonalErrors] = useState<Record<string, string>>({});
|
||||
|
||||
// Education Step
|
||||
const [education, setEducation] = useState({
|
||||
degree: "", university: "", field: "", year: ""});
|
||||
const [educationErrors, setEducationErrors] = useState<Record<string, string>>({});
|
||||
|
||||
// Lesson Details Step
|
||||
const [lessonDetails, setLessonDetails] = useState({
|
||||
subjects: "", levels: "", experience: "", bio: ""});
|
||||
const [lessonErrors, setLessonErrors] = useState<Record<string, string>>({});
|
||||
|
||||
// Pricing Step
|
||||
const [pricing, setPricing] = useState({
|
||||
hourlyRate: "", currency: "USD", availability: ""});
|
||||
const [pricingErrors, setPricingErrors] = useState<Record<string, string>>({});
|
||||
|
||||
// Identity Verification Step
|
||||
const [identity, setIdentity] = useState({
|
||||
idType: "", idNumber: "", dob: ""});
|
||||
const [identityErrors, setIdentityErrors] = useState<Record<string, string>>({});
|
||||
|
||||
const validateStep = (step: number): boolean => {
|
||||
let isValid = true;
|
||||
const errors: Record<string, string> = {};
|
||||
|
||||
if (step === 1) {
|
||||
if (!personalInfo.firstName.trim()) {
|
||||
errors.firstName = "Ad gereklidir";
|
||||
isValid = false;
|
||||
}
|
||||
if (!personalInfo.lastName.trim()) {
|
||||
errors.lastName = "Soyadı gereklidir";
|
||||
isValid = false;
|
||||
}
|
||||
if (!personalInfo.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
|
||||
errors.email = "Geçerli bir email adı girin";
|
||||
isValid = false;
|
||||
}
|
||||
if (!personalInfo.phone.match(/^[0-9\s+()-]{10}$/)) {
|
||||
errors.phone = "Geçerli bir telefon numarası girin";
|
||||
isValid = false;
|
||||
}
|
||||
setPersonalErrors(errors);
|
||||
}
|
||||
|
||||
if (step === 2) {
|
||||
if (!education.degree.trim()) {
|
||||
errors.degree = "Derece türü gereklidir";
|
||||
isValid = false;
|
||||
}
|
||||
if (!education.university.trim()) {
|
||||
errors.university = "Üniversite adı gereklidir";
|
||||
isValid = false;
|
||||
}
|
||||
if (!education.field.trim()) {
|
||||
errors.field = "Alan gereklidir";
|
||||
isValid = false;
|
||||
}
|
||||
if (!education.year.trim()) {
|
||||
errors.year = "Mezuniyet yılı gereklidir";
|
||||
isValid = false;
|
||||
}
|
||||
setEducationErrors(errors);
|
||||
}
|
||||
|
||||
if (step === 3) {
|
||||
if (!lessonDetails.subjects.trim()) {
|
||||
errors.subjects = "Konular gereklidir";
|
||||
isValid = false;
|
||||
}
|
||||
if (!lessonDetails.levels.trim()) {
|
||||
errors.levels = "Seviyeler gereklidir";
|
||||
isValid = false;
|
||||
}
|
||||
if (!lessonDetails.experience.trim()) {
|
||||
errors.experience = "Deneyim gereklidir";
|
||||
isValid = false;
|
||||
}
|
||||
if (!lessonDetails.bio.trim()) {
|
||||
errors.bio = "Biyografi gereklidir";
|
||||
isValid = false;
|
||||
}
|
||||
setLessonErrors(errors);
|
||||
}
|
||||
|
||||
if (step === 4) {
|
||||
if (!pricing.hourlyRate.match(/^[0-9]+(\.[0-9]{1,2})?$/)) {
|
||||
errors.hourlyRate = "Geçerli bir fiyat girin";
|
||||
isValid = false;
|
||||
}
|
||||
if (!pricing.availability.trim()) {
|
||||
errors.availability = "Kullanılabilirlik gereklidir";
|
||||
isValid = false;
|
||||
}
|
||||
setPricingErrors(errors);
|
||||
}
|
||||
|
||||
if (step === 5) {
|
||||
if (!identity.idType.trim()) {
|
||||
errors.idType = "Kimlik türü gereklidir";
|
||||
isValid = false;
|
||||
}
|
||||
if (!identity.idNumber.trim()) {
|
||||
errors.idNumber = "Kimlik numarası gereklidir";
|
||||
isValid = false;
|
||||
}
|
||||
if (!identity.dob.trim()) {
|
||||
errors.dob = "Doğum tarihi gereklidir";
|
||||
isValid = false;
|
||||
}
|
||||
setIdentityErrors(errors);
|
||||
}
|
||||
|
||||
return isValid;
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
if (validateStep(currentStep)) {
|
||||
setCurrentStep(currentStep + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePrevious = () => {
|
||||
setCurrentStep(currentStep - 1);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (validateStep(currentStep)) {
|
||||
console.log("Form submitted:", {
|
||||
personalInfo,
|
||||
education,
|
||||
lessonDetails,
|
||||
pricing,
|
||||
identity,
|
||||
});
|
||||
alert("Kayıt başarıyla tamamlandı!");
|
||||
}
|
||||
};
|
||||
|
||||
const progressPercentage = (currentStep / totalSteps) * 100;
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -56,18 +185,343 @@ export default function TeachersPage() {
|
||||
/>
|
||||
</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 className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-12 px-4 pt-32">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-slate-900 mb-2">Öğretmen Kaydı</h1>
|
||||
<p className="text-lg text-slate-600">Adım {currentStep} / {totalSteps}</p>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="mb-8">
|
||||
<div className="flex gap-2 mb-3">
|
||||
{Array.from({ length: totalSteps }).map((_, i) => (
|
||||
<div key={i} className="flex-1">
|
||||
<div className="h-2 bg-slate-300 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all duration-300 ${
|
||||
i + 1 <= currentStep ? "bg-blue-600" : "bg-slate-300"
|
||||
}`}
|
||||
style={{
|
||||
width: i + 1 === currentStep ? "100%" : i + 1 < currentStep ? "100%" : "0%"}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="w-full h-1 bg-slate-300 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-blue-600 transition-all duration-300"
|
||||
style={{ width: `${progressPercentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Container */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-8 mb-8">
|
||||
{/* Step 1: Personal Info */}
|
||||
{currentStep === 1 && (
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-6">Kişisel Bilgiler</h2>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Ad</label>
|
||||
<Input
|
||||
value={personalInfo.firstName}
|
||||
onChange={(value) => setPersonalInfo({ ...personalInfo, firstName: value })}
|
||||
type="text"
|
||||
placeholder="Adınız"
|
||||
required
|
||||
/>
|
||||
{personalErrors.firstName && (
|
||||
<p className="text-red-600 text-sm mt-1">{personalErrors.firstName}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Soyadı</label>
|
||||
<Input
|
||||
value={personalInfo.lastName}
|
||||
onChange={(value) => setPersonalInfo({ ...personalInfo, lastName: value })}
|
||||
type="text"
|
||||
placeholder="Soyadınız"
|
||||
required
|
||||
/>
|
||||
{personalErrors.lastName && (
|
||||
<p className="text-red-600 text-sm mt-1">{personalErrors.lastName}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Email</label>
|
||||
<Input
|
||||
value={personalInfo.email}
|
||||
onChange={(value) => setPersonalInfo({ ...personalInfo, email: value })}
|
||||
type="email"
|
||||
placeholder="example@email.com"
|
||||
required
|
||||
/>
|
||||
{personalErrors.email && (
|
||||
<p className="text-red-600 text-sm mt-1">{personalErrors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Telefon</label>
|
||||
<Input
|
||||
value={personalInfo.phone}
|
||||
onChange={(value) => setPersonalInfo({ ...personalInfo, phone: value })}
|
||||
type="tel"
|
||||
placeholder="+90 5XX XXX XXXX"
|
||||
required
|
||||
/>
|
||||
{personalErrors.phone && (
|
||||
<p className="text-red-600 text-sm mt-1">{personalErrors.phone}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Education */}
|
||||
{currentStep === 2 && (
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-6">Eğitim Bilgileri</h2>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Derece Türü</label>
|
||||
<Input
|
||||
value={education.degree}
|
||||
onChange={(value) => setEducation({ ...education, degree: value })}
|
||||
type="text"
|
||||
placeholder="örn. Lisans, Yüksek Lisans"
|
||||
required
|
||||
/>
|
||||
{educationErrors.degree && (
|
||||
<p className="text-red-600 text-sm mt-1">{educationErrors.degree}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Üniversite</label>
|
||||
<Input
|
||||
value={education.university}
|
||||
onChange={(value) => setEducation({ ...education, university: value })}
|
||||
type="text"
|
||||
placeholder="Üniversite adı"
|
||||
required
|
||||
/>
|
||||
{educationErrors.university && (
|
||||
<p className="text-red-600 text-sm mt-1">{educationErrors.university}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Alan</label>
|
||||
<Input
|
||||
value={education.field}
|
||||
onChange={(value) => setEducation({ ...education, field: value })}
|
||||
type="text"
|
||||
placeholder="Çalışma alanı"
|
||||
required
|
||||
/>
|
||||
{educationErrors.field && (
|
||||
<p className="text-red-600 text-sm mt-1">{educationErrors.field}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Mezuniyet Yılı</label>
|
||||
<Input
|
||||
value={education.year}
|
||||
onChange={(value) => setEducation({ ...education, year: value })}
|
||||
type="text"
|
||||
placeholder="2020"
|
||||
required
|
||||
/>
|
||||
{educationErrors.year && (
|
||||
<p className="text-red-600 text-sm mt-1">{educationErrors.year}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Lesson Details */}
|
||||
{currentStep === 3 && (
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-6">Ders Detayları</h2>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Konular</label>
|
||||
<Input
|
||||
value={lessonDetails.subjects}
|
||||
onChange={(value) => setLessonDetails({ ...lessonDetails, subjects: value })}
|
||||
type="text"
|
||||
placeholder="örn. Matematik, Fizik, İngilizce"
|
||||
required
|
||||
/>
|
||||
{lessonErrors.subjects && (
|
||||
<p className="text-red-600 text-sm mt-1">{lessonErrors.subjects}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Seviyeler</label>
|
||||
<Input
|
||||
value={lessonDetails.levels}
|
||||
onChange={(value) => setLessonDetails({ ...lessonDetails, levels: value })}
|
||||
type="text"
|
||||
placeholder="örn. İlkokul, Ortaokul, Lise"
|
||||
required
|
||||
/>
|
||||
{lessonErrors.levels && (
|
||||
<p className="text-red-600 text-sm mt-1">{lessonErrors.levels}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Deneyim (yıl)</label>
|
||||
<Input
|
||||
value={lessonDetails.experience}
|
||||
onChange={(value) => setLessonDetails({ ...lessonDetails, experience: value })}
|
||||
type="text"
|
||||
placeholder="örn. 5 yıl"
|
||||
required
|
||||
/>
|
||||
{lessonErrors.experience && (
|
||||
<p className="text-red-600 text-sm mt-1">{lessonErrors.experience}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Biyografi</label>
|
||||
<textarea
|
||||
value={lessonDetails.bio}
|
||||
onChange={(e) => setLessonDetails({ ...lessonDetails, bio: e.target.value })}
|
||||
placeholder="Kendiniz hakkında yazın"
|
||||
rows={4}
|
||||
className="w-full px-4 py-2 bg-slate-100 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
{lessonErrors.bio && (
|
||||
<p className="text-red-600 text-sm mt-1">{lessonErrors.bio}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 4: Pricing */}
|
||||
{currentStep === 4 && (
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-6">Fiyatlandırma</h2>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Saatlik Ücret</label>
|
||||
<Input
|
||||
value={pricing.hourlyRate}
|
||||
onChange={(value) => setPricing({ ...pricing, hourlyRate: value })}
|
||||
type="number"
|
||||
placeholder="50"
|
||||
required
|
||||
/>
|
||||
{pricingErrors.hourlyRate && (
|
||||
<p className="text-red-600 text-sm mt-1">{pricingErrors.hourlyRate}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Para Birimi</label>
|
||||
<select
|
||||
value={pricing.currency}
|
||||
onChange={(e) => setPricing({ ...pricing, currency: e.target.value })}
|
||||
className="w-full px-4 py-2 bg-slate-100 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option>USD</option>
|
||||
<option>EUR</option>
|
||||
<option>TRY</option>
|
||||
<option>GBP</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Kullanılabilirlik</label>
|
||||
<Input
|
||||
value={pricing.availability}
|
||||
onChange={(value) => setPricing({ ...pricing, availability: value })}
|
||||
type="text"
|
||||
placeholder="örn. Pazartesi-Cuma 15:00-20:00"
|
||||
required
|
||||
/>
|
||||
{pricingErrors.availability && (
|
||||
<p className="text-red-600 text-sm mt-1">{pricingErrors.availability}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 5: Identity Verification */}
|
||||
{currentStep === 5 && (
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-6">Kimlik Doğrulaması</h2>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Kimlik Türü</label>
|
||||
<Input
|
||||
value={identity.idType}
|
||||
onChange={(value) => setIdentity({ ...identity, idType: value })}
|
||||
type="text"
|
||||
placeholder="örn. Pasaport, Kimlik Kartı"
|
||||
required
|
||||
/>
|
||||
{identityErrors.idType && (
|
||||
<p className="text-red-600 text-sm mt-1">{identityErrors.idType}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Kimlik Numarası</label>
|
||||
<Input
|
||||
value={identity.idNumber}
|
||||
onChange={(value) => setIdentity({ ...identity, idNumber: value })}
|
||||
type="text"
|
||||
placeholder="Kimlik numarası"
|
||||
required
|
||||
/>
|
||||
{identityErrors.idNumber && (
|
||||
<p className="text-red-600 text-sm mt-1">{identityErrors.idNumber}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Doğum Tarihi</label>
|
||||
<Input
|
||||
value={identity.dob}
|
||||
onChange={(value) => setIdentity({ ...identity, dob: value })}
|
||||
type="date"
|
||||
required
|
||||
/>
|
||||
{identityErrors.dob && (
|
||||
<p className="text-red-600 text-sm mt-1">{identityErrors.dob}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-4">
|
||||
<p className="text-sm text-blue-800">✓ Tüm bilgileriniz güvenli şekilde saklanacaktır ve GDPR uyumlu olacaktır.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation Buttons */}
|
||||
<div className="flex gap-4 justify-between">
|
||||
<button
|
||||
onClick={handlePrevious}
|
||||
disabled={currentStep === 1}
|
||||
className="px-6 py-3 bg-slate-200 hover:bg-slate-300 disabled:opacity-50 disabled:cursor-not-allowed text-slate-900 rounded-lg font-medium transition"
|
||||
>
|
||||
Geri
|
||||
</button>
|
||||
{currentStep < totalSteps ? (
|
||||
<button
|
||||
onClick={handleNext}
|
||||
className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition flex items-center gap-2"
|
||||
>
|
||||
İleri <ChevronRight size={20} />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition flex items-center gap-2"
|
||||
>
|
||||
<Check size={20} /> Kayıt Tamamla
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
@@ -81,4 +535,4 @@ export default function TeachersPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user