Update src/app/teachers/page.tsx
This commit is contained in:
@@ -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