public/site.webmanifest

@@ -0,0 +1,30 @@
+{
+  "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": [
+    {
+      "src": "/android-chrome-192x192.png",      "sizes": "192x192",      "type": "image/png",      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-512x512.png",      "sizes": "512x512",      "type": "image/png",      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-192x192-maskable.png",      "sizes": "192x192",      "type": "image/png",      "purpose": "maskable"
+    },
+    {
+      "src": "/android-chrome-512x512-maskable.png",      "sizes": "512x512",      "type": "image/png",      "purpose": "maskable"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "/screenshot-1.png",      "sizes": "540x720",      "type": "image/png",      "form_factor": "narrow"
+    },
+    {
+      "src": "/screenshot-2.png",      "sizes": "1280x720",      "type": "image/png",      "form_factor": "wide"
+    }
+  ],
+  "categories": ["education", "productivity"],
+  "screenshots": [
+    {
+      "src": "/screenshot-1.png",      "sizes": "540x720",      "type": "image/png"
+    }
+  ]
+}

src/app/api/auth/login/route.ts

@@ -0,0 +1,95 @@
+import { NextRequest, NextResponse } from "next/server";
+
+interface LoginRequest {
+  email: string;
+  password: string;
+  rememberMe: boolean;
+}
+
+// Mock user storage for demonstration
+const mockUsers: {
+  [key: string]: {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    password: string;
+    userType: "student" | "teacher";
+  };
+} = {
+  "demo@example.com": {
+    id: "user_1",    firstName: "Demo",    lastName: "User",    email: "demo@example.com",    password: "DemoPassword123", // Demo password
+    userType: "student"},
+  "teacher@example.com": {
+    id: "user_2",    firstName: "Demo",    lastName: "Teacher",    email: "teacher@example.com",    password: "TeacherPassword123",    userType: "teacher"},
+};
+
+export async function POST(request: NextRequest) {
+  try {
+    const body: LoginRequest = await request.json();
+
+    // Validate input
+    if (!body.email || !body.password) {
+      return NextResponse.json(
+        { message: "E-posta ve şifre gereklidir" },
+        { status: 400 }
+      );
+    }
+
+    // Find user
+    const user = mockUsers[body.email];
+
+    if (!user) {
+      return NextResponse.json(
+        { message: "E-posta veya şifre hatalı" },
+        { status: 401 }
+      );
+    }
+
+    // In production, use bcrypt.compare()
+    // const passwordMatch = await bcrypt.compare(body.password, user.password);
+
+    if (user.password !== body.password) {
+      return NextResponse.json(
+        { message: "E-posta veya şifre hatalı" },
+        { status: 401 }
+      );
+    }
+
+    // Create response with user data
+    const response = NextResponse.json(
+      {
+        message: "Giriş başarıyla gerçekleştirildi",        user: {
+          id: user.id,
+          firstName: user.firstName,
+          lastName: user.lastName,
+          email: user.email,
+          userType: user.userType,
+        },
+      },
+      { status: 200 }
+    );
+
+    // In production, set secure HTTP-only cookies
+    if (body.rememberMe) {
+      // Set longer expiration for "remember me"
+      response.cookies.set("authToken", `token_${user.id}`, {
+        maxAge: 30 * 24 * 60 * 60, // 30 days
+        httpOnly: true,
+        secure: process.env.NODE_ENV === "production",        sameSite: "lax"});
+    } else {
+      response.cookies.set("authToken", `token_${user.id}`, {
+        maxAge: 24 * 60 * 60, // 24 hours
+        httpOnly: true,
+        secure: process.env.NODE_ENV === "production",        sameSite: "lax"});
+    }
+
+    return response;
+  } catch (error) {
+    console.error("Login error:", error);
+    return NextResponse.json(
+      { message: "Sunucu hatası oluştu" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/auth/register/route.ts

@@ -0,0 +1,84 @@
+import { NextRequest, NextResponse } from "next/server";
+
+interface RegisterRequest {
+  firstName: string;
+  lastName: string;
+  email: string;
+  password: string;
+  userType: "student" | "teacher";
+}
+
+// This is a mock implementation. In production, you would:
+// 1. Hash the password using bcrypt or similar
+// 2. Store the user in a database
+// 3. Send verification email
+// 4. Create JWT tokens
+
+const mockUsers: { [key: string]: RegisterRequest & { id: string } } = {};
+
+export async function POST(request: NextRequest) {
+  try {
+    const body: RegisterRequest = await request.json();
+
+    // Validate input
+    if (
+      !body.firstName ||
+      !body.lastName ||
+      !body.email ||
+      !body.password ||
+      !body.userType
+    ) {
+      return NextResponse.json(
+        { message: "Tüm alanlar zorunludur" },
+        { status: 400 }
+      );
+    }
+
+    // Check if user already exists
+    if (mockUsers[body.email]) {
+      return NextResponse.json(
+        { message: "Bu e-posta adresi zaten kullanımda" },
+        { status: 409 }
+      );
+    }
+
+    // In production, hash the password
+    // const hashedPassword = await bcrypt.hash(body.password, 10);
+
+    // Create new user
+    const newUser = {
+      id: `user_${Date.now()}`,
+      firstName: body.firstName,
+      lastName: body.lastName,
+      email: body.email,
+      password: body.password, // Never store plaintext in production!
+      userType: body.userType,
+    };
+
+    mockUsers[body.email] = newUser;
+
+    // In production, you would:
+    // 1. Create a JWT token
+    // 2. Set secure HTTP-only cookie
+    // 3. Send verification email
+
+    return NextResponse.json(
+      {
+        message: "Kayıt başarıyla tamamlandı",        user: {
+          id: newUser.id,
+          firstName: newUser.firstName,
+          lastName: newUser.lastName,
+          email: newUser.email,
+          userType: newUser.userType,
+        },
+      },
+      { status: 201 }
+    );
+  } catch (error) {
+    console.error("Registration error:", error);
+    return NextResponse.json(
+      { message: "Sunucu hatası oluştu" },
+      { status: 500 }
+    );
+  }
+}

src/app/contact/page.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Mail, Phone, MapPin, Send } from "lucide-react";
+import { useState } from "react";
+
+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" },
+  ];
+
+  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"
+      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="py-16 md:py-24 px-4">
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12">
+            <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>
+          </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>
+              );
+            })}
+          </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>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer" className="mt-16">
+        <FooterLogoReveal
+          logoText="Öğretmen Platformu"
+          leftLink={{
+            text: "Gizlilik Politikası",            href: "#"}}
+          rightLink={{
+            text: "Kullanım Şartları",            href: "#"}}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/dashboard/page.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+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 FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Target, Calendar, Users, TrendingUp } from "lucide-react";
+
+export default function DashboardPage() {
+  const navItems = [
+    { name: "Ana Sayfa", id: "/" },
+    { name: "Öğretmenler", id: "/teachers" },
+    { name: "Etkinlikler", id: "events" },
+    { name: "Çalışma Programı", id: "schedule" },
+    { name: "Öğrenci Paneli", id: "/dashboard" },
+  ];
+
+  const targetMetrics = [
+    {
+      id: "math",      title: "Matematik Hedefim",      subtitle: "İleri Cebir · Hedef: %85 Başarı",      category: "Matematik",      value: "72%"},
+    {
+      id: "english",      title: "İngilizce Konuşma",      subtitle: "Sertifikasyon · Hedef: İleri Seviye",      category: "İngilizce",      value: "Orta"},
+    {
+      id: "science",      title: "Fen Bilimleri Paketi",      subtitle: "Kimya & Fizik · Hedef: %90 Başarı",      category: "Bilim",      value: "68%"},
+  ];
+
+  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.",      imageSrc: "http://img.b2bpic.net/free-photo/happy-office-colleagues-watching-project-presentation-together_74855-10013.jpg",      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"},
+    {
+      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"},
+    {
+      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"},
+  ];
+
+  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: "2",      name: "Ayşe Şahin",      imageSrc: "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg",      imageAlt: "Ayşe Şahin"},
+    {
+      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: "4",      name: "Dr. Zeynep Demir",      imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg",      imageAlt: "Dr. Zeynep Demir"},
+  ];
+
+  const weeklyProgress = [
+    {
+      id: "mon",      imageSrc: "http://img.b2bpic.net/free-photo/happy-office-colleagues-watching-project-presentation-together_74855-10013.jpg",      imageAlt: "Pazartesi dersleri"},
+    {
+      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"},
+    {
+      id: "wed",      imageSrc: "http://img.b2bpic.net/free-photo/friends-learning-study-group_23-2149257210.jpg",      imageAlt: "Çarşamba dersleri"},
+    {
+      id: "thu",      imageSrc: "http://img.b2bpic.net/free-photo/crop-men-discussing-graph-tablet_23-2147785037.jpg",      imageAlt: "Perşembe dersleri"},
+  ];
+
+  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="Öğrenci Paneli"
+          bottomRightText="dashboard@platform.com"
+        />
+      </div>
+
+      <div id="targets" data-section="targets">
+        <MetricCardTen
+          metrics={targetMetrics}
+          animationType="slide-up"
+          title="Öğrenme Hedeflerim"
+          description="Kişisel eğitim hedefleriniz ve ilerlemeniz"
+          tag="Hedefler"
+          tagIcon={Target}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          carouselMode="buttons"
+        />
+      </div>
+
+      <div id="calendar" data-section="calendar">
+        <BlogCardTwo
+          blogs={upcomingLessons}
+          title="Yaklaşan Dersler"
+          description="Planladığınız özel ders oturumları"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          carouselMode="buttons"
+          tag="Takvim"
+          tagIcon={Calendar}
+        />
+      </div>
+
+      <div id="teachers" data-section="teachers">
+        <TeamCardTen
+          title="Sizin İçin Önerilen Öğretmenler"
+          tag="Öneriler"
+          tagAnimation="slide-up"
+          membersAnimation="slide-up"
+          members={recommendedTeachers}
+          memberVariant="card"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="weekly" data-section="weekly">
+        <TimelineHorizontalCardStack
+          title="Haftalık İlerleme Raporu"
+          description="Bu haftanın ders etkinliğini ve başarınızı görüntüleyin"
+          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>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Öğretmen Platformu"
+          leftLink={{
+            text: "Gizlilik Politikası",            href: "#"
+          }}
+          rightLink={{
+            text: "Kullanım Şartları",            href: "#"
+          }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,58 +1,71 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
-import { Open_Sans } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
-
-const halant = Halant({
-  variable: "--font-halant",
-  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
+import { ReactLenis } from "lenis/react";
 
 const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-});
-
-const openSans = Open_Sans({
-  variable: "--font-open-sans",
-  subsets: ["latin"],
+  variable: "--font-inter",  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
 });
 
 export const metadata: Metadata = {
-  title: "Çevrimiçi Öğretmen Platformu - Uzman Eğitim",
-  description: "50+ deneyimli öğretmenle bağlantı kurun. Kişiselleştirilmiş eğitim, esnek zaman planlaması ve 4.9/5 memnuniyet oranı.",
-  keywords: "çevrimiçi öğretmen, ders platformu, eğitim, uzak eğitim, dersler",
+  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" }],
   openGraph: {
-    title: "Çevrimiçi Öğretmen Platformu",
-    description: "50+ deneyimli öğretmenle bağlantı kurun ve etkili eğitim alın",
-    siteName: "Öğretmen Platformu",
-    type: "website",
+    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: [
+      {
+        url: "https://ogretmen-platformu.com/og-image.jpg",        width: 1200,
+        height: 630,
+        alt: "Öğretmen Platformu"},
+    ],
   },
   twitter: {
-    card: "summary_large_image",
-    title: "Çevrimiçi Öğretmen Platformu",
-    description: "Uzman öğretmenlerle dersler için kaydolun",
+    card: "summary_large_image",    title: "Öğretmen Platformu",    description: "Kişiselleştirilmiş online eğitim platformu",    images: ["https://ogretmen-platformu.com/twitter-image.jpg"],
   },
+  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",  viewport: "width=device-width, initial-scale=1, maximum-scale=5",  appleWebApp: {
+    capable: true,
+    statusBarStyle: "black-translucent",    title: "Öğretmen Platformu"},
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${openSans.variable} antialiased`}
-        >
-          <Tag />
+    <html lang="tr">
+      <head>
+        <meta charSet="utf-8" />
+        <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" />
+        <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"
+              ]
+            })
+          }}
+        />
+      </head>
+      <body className={`${inter.variable} bg-background text-foreground`}>
+        <ReactLenis root>
           {children}
-        
+        </ReactLenis>
+        <CookieConsentBanner />
+      
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1420,7 +1433,59 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </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>
+  );
 }

src/app/login/page.tsx

@@ -0,0 +1,257 @@
+"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 { Eye, EyeOff, AlertCircle, CheckCircle } from "lucide-react";
+
+interface LoginFormData {
+  email: string;
+  password: string;
+}
+
+interface LoginErrors {
+  email?: string;
+  password?: string;
+}
+
+export default function LoginPage() {
+  const navItems = [
+    { name: "Ana Sayfa", id: "/" },
+    { name: "Öğretmenler", id: "/teachers" },
+    { name: "Etkinlikler", id: "events" },
+    { name: "Çalışma Programı", id: "schedule" },
+  ];
+
+  const [formData, setFormData] = useState<LoginFormData>({
+    email: "",    password: ""});
+
+  const [errors, setErrors] = useState<LoginErrors>({});
+  const [showPassword, setShowPassword] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitSuccess, setSubmitSuccess] = useState(false);
+  const [rememberMe, setRememberMe] = useState(false);
+
+  const validateForm = (): boolean => {
+    const newErrors: LoginErrors = {};
+
+    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 girin";
+    }
+
+    if (!formData.password) {
+      newErrors.password = "Şifre gereklidir";
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    if (errors[name as keyof LoginErrors]) {
+      setErrors((prev) => ({
+        ...prev,
+        [name]: undefined,
+      }));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch("/api/auth/login", {
+        method: "POST",        headers: {
+          "Content-Type": "application/json"},
+        body: JSON.stringify({
+          email: formData.email,
+          password: formData.password,
+          rememberMe: rememberMe,
+        }),
+      });
+
+      if (response.ok) {
+        setSubmitSuccess(true);
+        setFormData({
+          email: "",          password: ""});
+        setTimeout(() => {
+          window.location.href = "/dashboard";
+        }, 1500);
+      } else {
+        const data = await response.json();
+        setErrors({ email: data.message || "Giriş başarısız oldu" });
+      }
+    } catch (error) {
+      setErrors({ email: "Bir hata oluştu. Lütfen tekrar deneyin." });
+    } finally {
+      setIsSubmitting(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 pt-24 pb-20 px-4">
+        <div className="max-w-md mx-auto">
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold mb-2">Giriş Yap</h1>
+            <p className="text-gray-600">Hesabınıza giriş yaparak öğrenmeye başlayın</p>
+          </div>
+
+          {submitSuccess && (
+            <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-start gap-3">
+              <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
+              <div>
+                <h3 className="font-semibold text-green-900">Başarılı!</h3>
+                <p className="text-sm text-green-800 mt-1">
+                  Giriş başarıyla gerçekleştirildi. Yönlendiriliyorsunuz...
+                </p>
+              </div>
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium mb-2">
+                E-posta *
+              </label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                placeholder="your@email.com"
+                className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  errors.email ? "border-red-500" : "border-gray-300"
+                }`}
+              />
+              {errors.email && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.email}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium mb-2">
+                Şifre *
+              </label>
+              <div className="relative">
+                <input
+                  type={showPassword ? "text" : "password"}
+                  id="password"
+                  name="password"
+                  value={formData.password}
+                  onChange={handleChange}
+                  placeholder="Şifrenizi girin"
+                  className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10 ${
+                    errors.password ? "border-red-500" : "border-gray-300"
+                  }`}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500"
+                >
+                  {showPassword ? (
+                    <EyeOff className="w-5 h-5" />
+                  ) : (
+                    <Eye className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+              {errors.password && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.password}
+                </div>
+              )}
+            </div>
+
+            <div className="flex items-center">
+              <input
+                type="checkbox"
+                id="rememberMe"
+                checked={rememberMe}
+                onChange={(e) => setRememberMe(e.target.checked)}
+                className="rounded border-gray-300"
+              />
+              <label htmlFor="rememberMe" className="ml-2 text-sm text-gray-700">
+                Beni hatırla
+              </label>
+            </div>
+
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-semibold py-2 rounded-lg transition-colors"
+            >
+              {isSubmitting ? "Giriş yapılıyor..." : "Giriş Yap"}
+            </button>
+          </form>
+
+          <div className="mt-6 space-y-4 text-center text-sm text-gray-600">
+            <p>
+              <a href="/forgot-password" className="text-blue-600 hover:underline font-medium">
+                Şifremi unuttum
+              </a>
+            </p>
+            <p>
+              Hesabınız yok mu?{" "}
+              <a href="/register" className="text-blue-600 hover:underline font-medium">
+                Kayıt olun
+              </a>
+            </p>
+          </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>
+  );
+}

src/app/not-found.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import Link from "next/link";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Home, ArrowLeft } 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="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 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>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -8,9 +8,30 @@ import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
 import Link from "next/link";
-import { BookOpen } from "lucide-react";
+import { BookOpen, Share2, Copy, Check } from "lucide-react";
+import { useState, useEffect } from "react";
 
 export default function HomePage() {
+  const [copied, setCopied] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const formatTurkishLira = (amount: number) => {
+    return new Intl.NumberFormat("tr-TR", {
+      style: "currency",      currency: "TRY",      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(amount);
+  };
+
+  const formatTurkishDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat("tr-TR", {
+      year: "numeric",      month: "long",      day: "numeric"}).format(date);
+  };
+
   const navItems = [
     { name: "Ana Sayfa", id: "/" },
     { name: "Öğretmenler", id: "/teachers" },
@@ -31,7 +52,7 @@ export default function HomePage() {
     {
       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"},
+      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 = [
@@ -71,84 +92,251 @@ export default function HomePage() {
       text: "Canlı Sohbet",      href: "#"},
   ];
 
+  const handleShare = () => {
+    const url = typeof window !== "undefined" ? window.location.href : "";
+    const title = "Öğretmen Platformu - Kişiselleştirilmiş Online Eğitim";
+    const text = "50+ deneyimli öğretmenle bağlantı kurun ve kişiselleştirilmiş eğitim alın.";
+
+    if (navigator.share) {
+      navigator.share({ title, text, url }).catch(() => {});
+    } else {
+      navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
   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"
+    <>
+      <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="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>
+
+        <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>
+
+        <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>
+      </ThemeProvider>
+
+      {mounted && (
+        <>
+          {/* Mobile Hamburger Menu */}
+          <MobileHamburgerMenu navItems={navItems} />
+          {/* Sticky Mobile CTA */}
+          <StickyMobileCTA />
+          {/* Social Sharing Button */}
+          <SocialShareButton copied={copied} onShare={handleShare} />
+        </>
+      )}
+    </>
+  );
+}
+
+function MobileHamburgerMenu({
+  navItems,
+}: {
+  navItems: Array<{ name: string; id: string }>;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+  }, [isOpen]);
+
+  return (
+    <>
+      {/* Hamburger Button - Mobile Only */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="fixed top-4 right-4 z-40 md:hidden p-2 rounded-lg bg-card border border-accent hover:bg-background-accent transition-colors min-h-11 min-w-11 flex items-center justify-center"
+        aria-label="Toggle menu"
+        aria-expanded={isOpen}
+      >
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d={isOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"}
+          />
+        </svg>
+      </button>
+
+      {/* Mobile Menu Drawer */}
+      <div
+        className={`fixed inset-0 z-30 md:hidden transition-all duration-300 ${
+          isOpen ? "pointer-events-auto" : "pointer-events-none"
+        }`}
+      >
+        {/* Backdrop */}
+        <div
+          className={`absolute inset-0 bg-black transition-opacity duration-300 ${
+            isOpen ? "opacity-50" : "opacity-0"
+          }`}
+          onClick={() => setIsOpen(false)}
+          aria-hidden="true"
+        />
+
+        {/* Drawer */}
+        <nav
+          className={`absolute top-0 right-0 h-full w-64 bg-card border-l border-accent shadow-lg transform transition-transform duration-300 ${
+            isOpen ? "translate-x-0" : "translate-x-full"
+          } overflow-y-auto`}
+          role="navigation"
+          aria-label="Mobile menu"
+        >
+          <div className="p-4 space-y-2">
+            {navItems.map((item) => (
+              <Link
+                key={item.id}
+                href={item.id}
+                className="block px-4 py-3 rounded-lg hover:bg-background-accent transition-colors text-foreground font-medium min-h-11 flex items-center"
+                onClick={() => setIsOpen(false)}
+              >
+                {item.name}
+              </Link>
+            ))}
+            <button
+              className="w-full mt-4 px-4 py-3 rounded-lg bg-primary-cta text-card font-medium hover:opacity-90 transition-opacity min-h-11"
+              onClick={() => {
+                window.location.href = "/teachers";
+                setIsOpen(false);
+              }}
+            >
+              Hemen Başla
+            </button>
+          </div>
+        </nav>
+      </div>
+    </>
+  );
+}
+
+function StickyMobileCTA() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsVisible(window.scrollY > 300);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <div
+      className={`fixed bottom-0 left-0 right-0 md:hidden z-20 p-4 bg-gradient-to-t from-card to-transparent transform transition-all duration-300 ${
+        isVisible ? "translate-y-0" : "translate-y-full"
+      }`}
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
-          navItems={navItems}
-          brandName="Öğretmen Platformu"
-          bottomLeftText="Eğitim Topluluğu"
-          bottomRightText="info@platform.com"
-        />
-      </div>
+      <button
+        className="w-full py-3 rounded-lg bg-primary-cta text-card font-medium hover:opacity-90 transition-opacity min-h-11"
+        onClick={() => (window.location.href = "/teachers")}
+      >
+        Hemen Başla
+      </button>
+    </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>
-
-      <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>
-
-      <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>
-    </ThemeProvider>
+function SocialShareButton({
+  copied,
+  onShare,
+}: {
+  copied: boolean;
+  onShare: () => void;
+}) {
+  return (
+    <button
+      onClick={onShare}
+      className="fixed bottom-20 md:bottom-8 right-4 z-20 p-3 rounded-full bg-primary-cta text-card hover:opacity-90 transition-opacity shadow-lg min-h-11 min-w-11 flex items-center justify-center"
+      aria-label="Share page"
+      title="Sayfayı Paylaş"
+    >
+      {copied ? (
+        <Check className="w-5 h-5" />
+      ) : (
+        <Share2 className="w-5 h-5" />
+      )}
+    </button>
   );
 }

src/app/register/page.tsx

@@ -0,0 +1,382 @@
+"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 { Eye, EyeOff, AlertCircle, CheckCircle } from "lucide-react";
+
+interface FormData {
+  firstName: string;
+  lastName: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+  userType: "student" | "teacher" | "";
+}
+
+interface FormErrors {
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+  password?: string;
+  confirmPassword?: string;
+  userType?: string;
+}
+
+export default function RegisterPage() {
+  const navItems = [
+    { name: "Ana Sayfa", id: "/" },
+    { name: "Öğretmenler", id: "/teachers" },
+    { name: "Etkinlikler", id: "events" },
+    { name: "Çalışma Programı", id: "schedule" },
+  ];
+
+  const [formData, setFormData] = useState<FormData>({
+    firstName: "",    lastName: "",    email: "",    password: "",    confirmPassword: "",    userType: ""});
+
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitSuccess, setSubmitSuccess] = useState(false);
+
+  const validateForm = (): boolean => {
+    const newErrors: FormErrors = {};
+
+    if (!formData.firstName.trim()) {
+      newErrors.firstName = "Ad gereklidir";
+    } else if (formData.firstName.length < 2) {
+      newErrors.firstName = "Ad en az 2 karakter olmalıdır";
+    }
+
+    if (!formData.lastName.trim()) {
+      newErrors.lastName = "Soyad gereklidir";
+    } else if (formData.lastName.length < 2) {
+      newErrors.lastName = "Soyad en az 2 karakter olmalıdır";
+    }
+
+    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 girin";
+    }
+
+    if (!formData.password) {
+      newErrors.password = "Şifre gereklidir";
+    } else if (formData.password.length < 8) {
+      newErrors.password = "Şifre en az 8 karakter olmalıdır";
+    } else if (!/[A-Z]/.test(formData.password)) {
+      newErrors.password = "Şifre en az bir büyük harf içermelidir";
+    } else if (!/[0-9]/.test(formData.password)) {
+      newErrors.password = "Şifre en az bir rakam içermelidir";
+    }
+
+    if (formData.password !== formData.confirmPassword) {
+      newErrors.confirmPassword = "Şifreler eşleşmiyor";
+    }
+
+    if (!formData.userType) {
+      newErrors.userType = "Kullanıcı türünü seçin";
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    if (errors[name as keyof FormErrors]) {
+      setErrors((prev) => ({
+        ...prev,
+        [name]: undefined,
+      }));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch("/api/auth/register", {
+        method: "POST",        headers: {
+          "Content-Type": "application/json"},
+        body: JSON.stringify({
+          firstName: formData.firstName,
+          lastName: formData.lastName,
+          email: formData.email,
+          password: formData.password,
+          userType: formData.userType,
+        }),
+      });
+
+      if (response.ok) {
+        setSubmitSuccess(true);
+        setFormData({
+          firstName: "",          lastName: "",          email: "",          password: "",          confirmPassword: "",          userType: ""});
+        setTimeout(() => {
+          setSubmitSuccess(false);
+        }, 5000);
+      } else {
+        const data = await response.json();
+        setErrors({ email: data.message || "Kayıt başarısız oldu" });
+      }
+    } catch (error) {
+      setErrors({ email: "Bir hata oluştu. Lütfen tekrar deneyin." });
+    } finally {
+      setIsSubmitting(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 pt-24 pb-20 px-4">
+        <div className="max-w-md mx-auto">
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold mb-2">Hesap Oluştur</h1>
+            <p className="text-gray-600">Eğitim yolculuğunuza bugün başlayın</p>
+          </div>
+
+          {submitSuccess && (
+            <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-start gap-3">
+              <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
+              <div>
+                <h3 className="font-semibold text-green-900">Başarılı!</h3>
+                <p className="text-sm text-green-800 mt-1">
+                  Hesabınız başarıyla oluşturuldu. Şimdi giriş yapabilirsiniz.
+                </p>
+              </div>
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div>
+              <label htmlFor="userType" className="block text-sm font-medium mb-2">
+                Kullanıcı Türünü Seçin *
+              </label>
+              <select
+                id="userType"
+                name="userType"
+                value={formData.userType}
+                onChange={handleChange}
+                className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  errors.userType ? "border-red-500" : "border-gray-300"
+                }`}
+              >
+                <option value="">Seçin...</option>
+                <option value="student">Öğrenci</option>
+                <option value="teacher">Öğretmen</option>
+              </select>
+              {errors.userType && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.userType}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="firstName" className="block text-sm font-medium mb-2">
+                Ad *
+              </label>
+              <input
+                type="text"
+                id="firstName"
+                name="firstName"
+                value={formData.firstName}
+                onChange={handleChange}
+                placeholder="Adınızı girin"
+                className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  errors.firstName ? "border-red-500" : "border-gray-300"
+                }`}
+              />
+              {errors.firstName && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.firstName}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="lastName" className="block text-sm font-medium mb-2">
+                Soyad *
+              </label>
+              <input
+                type="text"
+                id="lastName"
+                name="lastName"
+                value={formData.lastName}
+                onChange={handleChange}
+                placeholder="Soyadınızı girin"
+                className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  errors.lastName ? "border-red-500" : "border-gray-300"
+                }`}
+              />
+              {errors.lastName && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.lastName}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium mb-2">
+                E-posta *
+              </label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                placeholder="your@email.com"
+                className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  errors.email ? "border-red-500" : "border-gray-300"
+                }`}
+              />
+              {errors.email && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.email}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium mb-2">
+                Şifre *
+              </label>
+              <div className="relative">
+                <input
+                  type={showPassword ? "text" : "password"}
+                  id="password"
+                  name="password"
+                  value={formData.password}
+                  onChange={handleChange}
+                  placeholder="En az 8 karakter"
+                  className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10 ${
+                    errors.password ? "border-red-500" : "border-gray-300"
+                  }`}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500"
+                >
+                  {showPassword ? (
+                    <EyeOff className="w-5 h-5" />
+                  ) : (
+                    <Eye className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+              {errors.password && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.password}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="confirmPassword" className="block text-sm font-medium mb-2">
+                Şifreyi Onayla *
+              </label>
+              <div className="relative">
+                <input
+                  type={showConfirmPassword ? "text" : "password"}
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  value={formData.confirmPassword}
+                  onChange={handleChange}
+                  placeholder="Şifreyi tekrar girin"
+                  className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10 ${
+                    errors.confirmPassword ? "border-red-500" : "border-gray-300"
+                  }`}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500"
+                >
+                  {showConfirmPassword ? (
+                    <EyeOff className="w-5 h-5" />
+                  ) : (
+                    <Eye className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+              {errors.confirmPassword && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.confirmPassword}
+                </div>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-semibold py-2 rounded-lg transition-colors"
+            >
+              {isSubmitting ? "Kaydediliyor..." : "Hesap Oluştur"}
+            </button>
+          </form>
+
+          <div className="mt-6 text-center text-sm text-gray-600">
+            <p>
+              Zaten hesabınız var mı?{" "}
+              <a href="/login" className="text-blue-600 hover:underline font-medium">
+                Giriş yapın
+              </a>
+            </p>
+          </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>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
-  --card: #ffffff;
-  --foreground: #250c0d;
-  --primary-cta: #b82b40;
+  --background: #0f1419;
+  --card: #1a1f2e;
+  --foreground: #e8eef5;
+  --primary-cta: #1e4a7a;
   --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #0f9d6f;
   --secondary-cta-text: #250c0d;
-  --accent: #b90941;
-  --background-accent: #e8a8b6;
+  --accent: #5d9cec;
+  --background-accent: #2d6a9f;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/teacher-dashboard/page.tsx

@@ -0,0 +1,277 @@
+"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";
+
+export default function TeacherDashboard() {
+  const [activeMenu, setActiveMenu] = useState("home");
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+
+  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 },
+  ];
+
+  const monthlyStats = {
+    earnings: "$4,280",    lessons: 24,
+    rating: 4.9,
+    newStudents: 5,
+  };
+
+  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"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumSizeLargeTitles"
+      background="none"
+      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`}
+        >
+          {/* 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>
+
+          {/* Menu Items */}
+          <nav className="flex-1 p-4 space-y-2 overflow-y-auto">
+            {menuItems.map((item) => (
+              <MenuItem key={item.id} item={item} />
+            ))}
+          </nav>
+
+          {/* 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>
+          </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>
+            </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} />
+                    ))}
+                  </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>
+  );
+}

src/app/teachers/[id]/page.tsx

@@ -0,0 +1,307 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Star, MapPin, Clock, ChevronLeft, Users } from "lucide-react";
+import Link from "next/link";
+
+const teachersData: Record<string, any> = {
+  "1": {
+    id: "1",    name: "Ayşe Kaya",    specialization: "Matematik",    rating: 4.9,
+    students: 250,
+    bio: "10 yıl öğretim deneyimi ile üniversite giriş sınavlarına hazırlık konusunda uzman. Öğrencilerim %95 başarı oranı ile hedeflerine ulaşıyor.",    image: "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg",    location: "İstanbul",    availability: "Pazartesi-Cuma 18:00-22:00",    hourlyRate: "₺150/saat",    reviews: [
+      {
+        id: "1",        author: "Ali Başkan",        rating: 5,
+        date: "15 Ocak 2025",        text: "Ayşe öğretmen çok sabırlı ve açıklayıcı. Zor konuları çok iyi anlatıyor."},
+      {
+        id: "2",        author: "Zeynep Şimşek",        rating: 5,
+        date: "20 Ocak 2025",        text: "Dersleri çok eğlenceli ve etkili. Sınavda 20 puan artış yaşadım!"},
+      {
+        id: "3",        author: "Emre Yilmaz",        rating: 4,
+        date: "22 Ocak 2025",        text: "Profesyonel bir yaklaşım var. Çok memnun kaldım."},
+    ],
+    similarTeachers: [
+      {
+        id: "2",        name: "Mehmet Yıldız",        specialization: "İngilizce",        rating: 4.8,
+        image: "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg"},
+      {
+        id: "3",        name: "Zeynep Demir",        specialization: "Kimya",        rating: 4.7,
+        image: "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg"},
+    ],
+  },
+  "2": {
+    id: "2",    name: "Mehmet Yıldız",    specialization: "İngilizce",    rating: 4.8,
+    students: 180,
+    bio: "Amerikalı İngilizce öğretmeni, akıcı iletişim becerilerine odaklanır. Konuşma pratiği ve kültürel öğrenmeyi destekler.",    image: "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg",    location: "Ankara",    availability: "Salı-Perşembe 17:00-21:00",    hourlyRate: "₺120/saat",    reviews: [
+      {
+        id: "1",        author: "Selin Kara",        rating: 5,
+        date: "18 Ocak 2025",        text: "İngilizce konuşmak artık çok daha doğal hissettiriyor. Müthiş bir öğretmen!"},
+      {
+        id: "2",        author: "Deniz Güzel",        rating: 5,
+        date: "21 Ocak 2025",        text: "Üst düzey derse hazırlanıyorum ve çok yardımcı oldu."},
+      {
+        id: "3",        author: "Gül Yaşar",        rating: 4,
+        date: "23 Ocak 2025",        text: "Güzel dersi var ama zaman sınırlı."},
+    ],
+    similarTeachers: [
+      {
+        id: "1",        name: "Ayşe Kaya",        specialization: "Matematik",        rating: 4.9,
+        image: "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg"},
+      {
+        id: "3",        name: "Zeynep Demir",        specialization: "Kimya",        rating: 4.7,
+        image: "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg"},
+    ],
+  },
+  "3": {
+    id: "3",    name: "Zeynep Demir",    specialization: "Kimya",    rating: 4.7,
+    students: 160,
+    bio: "Laboratuvar deneyimli, interaktif öğrenme yönetimiyle başarı sağlar. Kimya konseptlerini pratik örneklerle açıklar.",    image: "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg",    location: "İzmir",    availability: "Pazartesi-Çarşamba 19:00-23:00",    hourlyRate: "₺130/saat",    reviews: [
+      {
+        id: "1",        author: "Kerem Aslan",        rating: 5,
+        date: "16 Ocak 2025",        text: "Kimya hiçbir zaman bu kadar kolay olmamıştı. Teşekkürler!"},
+      {
+        id: "2",        author: "Nur Özcan",        rating: 5,
+        date: "19 Ocak 2025",        text: "Sınavda başarılı oldum, çokça yardımı oldu."},
+      {
+        id: "3",        author: "Hakan Demir",        rating: 4,
+        date: "24 Ocak 2025",        text: "Güzel açıklamaları var."},
+    ],
+    similarTeachers: [
+      {
+        id: "1",        name: "Ayşe Kaya",        specialization: "Matematik",        rating: 4.9,
+        image: "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg"},
+      {
+        id: "2",        name: "Mehmet Yıldız",        specialization: "İngilizce",        rating: 4.8,
+        image: "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg"},
+    ],
+  },
+};
+
+export default function TeacherProfilePage({ params }: { params: { id: string } }) {
+  const teacher = teachersData[params.id];
+  const navItems = [
+    { name: "Ana Sayfa", id: "/" },
+    { name: "Öğretmenler", id: "/teachers" },
+    { name: "Etkinlikler", id: "events" },
+    { name: "Çalışma Programı", id: "schedule" },
+  ];
+
+  if (!teacher) {
+    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 flex items-center justify-center">
+          <h1 className="text-2xl font-light">Öğretmen bulunamadı</h1>
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  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>
+
+      {/* Breadcrumb Navigation */}
+      <div className="bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 pt-32 px-4 pb-8">
+        <div className="max-w-6xl mx-auto">
+          <nav className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-8">
+            <Link href="/" className="hover:text-gray-900 dark:hover:text-gray-200 transition-colors">
+              Ana Sayfa
+            </Link>
+            <span>/</span>
+            <Link href="/teachers" className="hover:text-gray-900 dark:hover:text-gray-200 transition-colors">
+              Öğretmenler
+            </Link>
+            <span>/</span>
+            <span className="text-gray-900 dark:text-gray-100 font-medium">{teacher.name}</span>
+          </nav>
+        </div>
+      </div>
+
+      <div className="bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 pb-20 px-4">
+        <div className="max-w-6xl mx-auto">
+          {/* Teacher Profile Header */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+            {/* Image */}
+            <div className="md:col-span-1">
+              <div className="aspect-square rounded-lg overflow-hidden shadow-lg">
+                <img src={teacher.image} alt={teacher.name} className="w-full h-full object-cover" />
+              </div>
+            </div>
+
+            {/* Teacher Info */}
+            <div className="md:col-span-2">
+              <h1 className="text-4xl font-light mb-2">{teacher.name}</h1>
+              <p className="text-xl text-blue-600 dark:text-blue-400 font-medium mb-4">{teacher.specialization}</p>
+
+              <div className="flex items-center gap-4 mb-6">
+                <div className="flex items-center gap-2">
+                  <Star className="w-5 h-5 fill-yellow-400 text-yellow-400" />
+                  <span className="text-lg font-semibold">{teacher.rating}</span>
+                  <span className="text-gray-600 dark:text-gray-400">({teacher.students} öğrenci)</span>
+                </div>
+              </div>
+
+              <p className="text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">{teacher.bio}</p>
+
+              <div className="space-y-3 mb-8">
+                <div className="flex items-center gap-3 text-gray-700 dark:text-gray-300">
+                  <MapPin className="w-5 h-5 text-blue-600 dark:text-blue-400" />
+                  <span>{teacher.location}</span>
+                </div>
+                <div className="flex items-center gap-3 text-gray-700 dark:text-gray-300">
+                  <Clock className="w-5 h-5 text-blue-600 dark:text-blue-400" />
+                  <span>{teacher.availability}</span>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-4">
+                <div className="text-3xl font-bold text-blue-600 dark:text-blue-400">{teacher.hourlyRate}</div>
+                <button className="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
+                  Ders Ayırt Et
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Available Hours Section */}
+          <section className="mb-16">
+            <h2 className="text-3xl font-light mb-8">Uygun Saatler</h2>
+            <div className="bg-white dark:bg-slate-800 rounded-lg shadow-lg p-8">
+              <div className="grid grid-cols-1 md:grid-cols-7 gap-4">
+                {[
+                  { day: "Pazartesi", available: true },
+                  { day: "Salı", available: true },
+                  { day: "Çarşamba", available: true },
+                  { day: "Perşembe", available: true },
+                  { day: "Cuma", available: true },
+                  { day: "Cumartesi", available: false },
+                  { day: "Pazar", available: false },
+                ].map((d) => (
+                  <div
+                    key={d.day}
+                    className={`p-4 rounded-lg text-center ${
+                      d.available
+                        ? "bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100"
+                        : "bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400"
+                    }`}
+                  >
+                    <div className="font-semibold">{d.day}</div>
+                    <div className="text-sm">{d.available ? "18:00 - 22:00" : "Müsait değil"}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* Reviews Section */}
+          <section className="mb-16">
+            <h2 className="text-3xl font-light mb-8">Öğrenci Yorumları</h2>
+            <div className="space-y-6">
+              {teacher.reviews.map((review: any) => (
+                <div key={review.id} className="bg-white dark:bg-slate-800 rounded-lg shadow-lg p-6">
+                  <div className="flex items-start justify-between mb-4">
+                    <div>
+                      <h3 className="font-semibold text-lg">{review.author}</h3>
+                      <p className="text-sm text-gray-500 dark:text-gray-400">{review.date}</p>
+                    </div>
+                    <div className="flex gap-1">
+                      {[...Array(5)].map((_, i) => (
+                        <Star
+                          key={i}
+                          className={`w-4 h-4 ${
+                            i < review.rating
+                              ? "fill-yellow-400 text-yellow-400"
+                              : "text-gray-300 dark:text-gray-600"
+                          }`}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                  <p className="text-gray-700 dark:text-gray-300">{review.text}</p>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          {/* Similar Teachers Section */}
+          <section>
+            <h2 className="text-3xl font-light mb-8">Benzer Öğretmenler</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {teacher.similarTeachers.map((similar: any) => (
+                <Link
+                  key={similar.id}
+                  href={`/teachers/${similar.id}`}
+                  className="bg-white dark:bg-slate-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow overflow-hidden group cursor-pointer"
+                >
+                  <div className="aspect-video overflow-hidden">
+                    <img
+                      src={similar.image}
+                      alt={similar.name}
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                    />
+                  </div>
+                  <div className="p-6">
+                    <h3 className="text-xl font-semibold mb-2">{similar.name}</h3>
+                    <p className="text-blue-600 dark:text-blue-400 font-medium mb-3">{similar.specialization}</p>
+                    <div className="flex items-center gap-2">
+                      <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                      <span className="font-medium">{similar.rating}</span>
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </section>
+        </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>
+  );
+}

src/app/teachers/page.tsx

@@ -2,11 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
-import FaqSplitText from "@/components/sections/faq/FaqSplitText";
+import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { BookOpen, Star } from "lucide-react";
+import { useState } from "react";
+import Image from "next/image";
 
 export default function TeachersPage() {
+  const [favorites, setFavorites] = useState<Set<string>>(new Set());
+
   const navItems = [
     { name: "Ana Sayfa", id: "/" },
     { name: "Öğretmenler", id: "/teachers" },
@@ -14,79 +18,62 @@ export default function TeachersPage() {
     { name: "Çalışma Programı", id: "schedule" },
   ];
 
-  const teacherGroups = [
+  const teachers = [
     {
-      id: "group-1",
-      groupTitle: "İleri Seviye Öğretmenler",
-      members: [
-        {
-          id: "1",
-          title: "Ayşe Kaya",
-          subtitle: "Matematik & Fizik",
-          detail: "12 yıl tecrübe | 5.0 puan",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg?_wi=1",
-          imageAlt: "professional woman teacher portrait headshot",
-        },
-        {
-          id: "2",
-          title: "Mehmet Yıldız",
-          subtitle: "İngilizce & Dil",
-          detail: "15 yıl tecrübe | 4.9 puan",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg?_wi=1",
-          imageAlt: "professional man teacher portrait headshot",
-        },
-        {
-          id: "3",
-          title: "Zeynep Demir",
-          subtitle: "Kimya & Biyoloji",
-          detail: "10 yıl tecrübe | 4.8 puan",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg?_wi=1",
-          imageAlt: "female scientist professor portrait headshot",
-        },
-        {
-          id: "4",
-          title: "İbrahim Çelik",
-          subtitle: "Tarih & Sosyal Bilgiler",
-          detail: "8 yıl tecrübe | 4.9 puan",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-satisfied_1298-169.jpg?_wi=1",
-          imageAlt: "male professor teacher history expert portrait",
-        },
-      ],
+      id: "1",      name: "Dr. Ahmet Yılmaz",      subject: "Matematik",      bio: "20 yıl öğretim deneyimi",      image: "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg",      rating: 4.9,
+      reviews: 342,
+      price: 150,
+      badge: "Doktor",      students: 500,
+    },
+    {
+      id: "2",      name: "Prof. Zeynep Demir",      subject: "Kimya",      bio: "Üniversite hocası",      image: "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg",      rating: 4.8,
+      reviews: 278,
+      price: 200,
+      badge: "Profesör",      students: 450,
+    },
+    {
+      id: "3",      name: "Mehmet Kaya",      subject: "İngilizce",      bio: "Dil sertifikasyonları",      image: "http://img.b2bpic.net/free-photo/young-male-student-with-backpack-reading_23-2148639349.jpg",      rating: 4.7,
+      reviews: 215,
+      price: 120,
+      badge: "Sertifikalı",      students: 320,
+    },
+    {
+      id: "4",      name: "Ayşe Kara",      subject: "Tarih",      bio: "Araştırmacı ve yazar",      image: "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg",      rating: 4.9,
+      reviews: 289,
+      price: 140,
+      badge: "Uzman",      students: 380,
     },
   ];
 
-  const faqData = [
-    {
-      id: "1",
-      title: "Öğretmen seçerken nelere dikkat etmeliyim?",
-      content:
-        "Öğretmen profillerinde deneyim, uzmanlık alanı ve öğrenci puanlarını inceleyebilirsiniz. İlk dersini denemek için \"İletişime Geç\" düğmesini kullanarak öğretmenle bağlantı kurabilirsiniz.",
-    },
-    {
-      id: "2",
-      title: "Ders saatlerini nasıl düzenleyebilirim?",
-      content:
-        "Çalışma Programı sayfasında haftalık ders takvimini görebilirsiniz. Istediğiniz ders saatine tıklayarak \"Katıl\" butonu ile kaydolabilirsiniz.",
-    },
-    {
-      id: "3",
-      title: "Etkinliklere nasıl katılabilirim?",
-      content:
-        "Etkinlikler sayfasında tüm yaklaşan dersleri ve webinarları görebilirsiniz. İlgilendiğiniz etkinliğin \"Kayıt Ol\" düğmesine tıklayarak katılabilirsiniz.",
-    },
-    {
-      id: "4",
-      title: "Ödeme seçenekleri nelerdir?",
-      content:
-        "Kredi kartı, banka havalesi ve e-cüzdan gibi çeşitli ödeme yöntemlerini destekliyoruz. Ödeme bilgileri gizli ve güvenlidir.",
-    },
-    {
-      id: "5",
-      title: "Dersi iptal etmek istiyorsam ne yapmalıyım?",
-      content:
-        "Dersin başlamasından en az 24 saat önce iptal edebilirsiniz. Profil bölümünde 'Kayıtlı Dersler' kısmından ders iptalini gerçekleştirebilirsiniz.",
-    },
-  ];
+  const formatTurkishLira = (amount: number) => {
+    return new Intl.NumberFormat("tr-TR", {
+      style: "currency",      currency: "TRY",      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(amount);
+  };
+
+  const toggleFavorite = (id: string) => {
+    const newFavorites = new Set(favorites);
+    if (newFavorites.has(id)) {
+      newFavorites.delete(id);
+    } else {
+      newFavorites.add(id);
+    }
+    setFavorites(newFavorites);
+  };
+
+  const StarRating = ({ rating }: { rating: number }) => {
+    return (
+      <div className="flex items-center gap-1">
+        {[...Array(5)].map((_, i) => (
+          <span key={i} className={i < Math.floor(rating) ? "text-yellow-400" : "text-gray-300"}>
+            ★
+          </span>
+        ))}
+        <span className="text-sm text-foreground opacity-75 ml-2">{rating}</span>
+      </div>
+    );
+  };
 
   return (
     <ThemeProvider
@@ -95,7 +82,7 @@ export default function TeachersPage() {
       borderRadius="rounded"
       contentWidth="compact"
       sizing="mediumSizeLargeTitles"
-      background="noise"
+      background="circleGradient"
       cardStyle="layered-gradient"
       primaryButtonStyle="shadow"
       secondaryButtonStyle="layered"
@@ -110,40 +97,86 @@ export default function TeachersPage() {
         />
       </div>
 
-      <div id="teachers" data-section="teachers">
-        <TeamCardEleven
-          groups={teacherGroups}
-          animationType="slide-up"
-          title="Uzman Öğretmenlerimiz"
-          description="Alanlarında deneyimli, nitelikli eğitim profesyonelleri"
-          textboxLayout="default"
-          useInvertedBackground={true}
-        />
+      <div id="hero" data-section="hero" className="py-16 md:py-24">
+        <div className="max-w-6xl mx-auto px-4">
+          <div className="text-center mb-12">
+            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Uzman Öğretmenlerimiz</h1>
+            <p className="text-lg text-foreground opacity-75">
+              Alanlarında uzmanlaşmış, deneyimli eğitimciler sizin başarı yolculuğunuza eşlik etmek için hazır.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {teachers.map((teacher) => (
+              <div
+                key={teacher.id}
+                className="bg-card border border-accent rounded-lg overflow-hidden hover:shadow-lg transition-shadow"
+              >
+                {/* Image Container */}
+                <div className="relative aspect-square overflow-hidden bg-background-accent">
+                  <img
+                    src={teacher.image}
+                    alt={teacher.name}
+                    className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
+                  />
+                  {/* Trust Badge */}
+                  <div className="absolute top-2 left-2 bg-primary-cta text-card text-xs font-bold px-2 py-1 rounded-full">
+                    {teacher.badge}
+                  </div>
+                  {/* Favorite Button */}
+                  <button
+                    onClick={() => toggleFavorite(teacher.id)}
+                    className="absolute top-2 right-2 p-2 rounded-full bg-white/90 hover:bg-white transition-colors min-h-11 min-w-11 flex items-center justify-center"
+                    aria-label={`Add ${teacher.name} to favorites`}
+                  >
+                    <Star
+                      className={`w-5 h-5 transition-colors ${
+                        favorites.has(teacher.id)
+                          ? "fill-yellow-400 text-yellow-400"
+                          : "text-gray-300"
+                      }`}
+                    />
+                  </button>
+                </div>
+
+                {/* Content */}
+                <div className="p-4 space-y-3">
+                  <div>
+                    <h3 className="font-bold text-foreground">{teacher.name}</h3>
+                    <p className="text-sm text-foreground opacity-75">{teacher.subject}</p>
+                  </div>
+
+                  {/* Star Rating System */}
+                  <div>
+                    <StarRating rating={teacher.rating} />
+                    <p className="text-xs text-foreground opacity-50 mt-1">
+                      {teacher.reviews} değerlendirme • {teacher.students}+ öğrenci
+                    </p>
+                  </div>
+
+                  {/* Price */}
+                  <div className="pt-2 border-t border-accent">
+                    <p className="text-lg font-bold text-primary-cta">{formatTurkishLira(teacher.price)}/saat</p>
+                  </div>
+
+                  {/* CTA Button - Touch target 44px minimum */}
+                  <button className="w-full py-3 rounded-lg bg-primary-cta text-card font-medium hover:opacity-90 transition-opacity min-h-11">
+                    Ders Rezerv Et
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
 
-      <div id="faq" data-section="faq">
-        <FaqSplitText
-          faqs={faqData}
-          sideTitle="Sık Sorulan Sorular"
-          sideDescription="Platformumuz hakkında bilmeniz gereken her şey"
-          textPosition="left"
-          useInvertedBackground={false}
-          animationType="smooth"
-          faqsAnimation="slide-up"
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
+      <div id="footer" data-section="footer" className="mt-16">
         <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>