From f3c358c000e82f547bf6f0717be8e41da3d08ef3 Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 6 Mar 2026 21:48:38 +0000 Subject: [PATCH] Update src/app/page.tsx --- src/app/page.tsx | 249 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 239 insertions(+), 10 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index a32a65a..e6b7d84 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,5 +1,6 @@ "use client"; +import { useEffect, useState } from "react"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen"; import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel"; @@ -7,20 +8,99 @@ import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven"; import BlogCardTwo from "@/components/sections/blog/BlogCardTwo"; import ContactText from "@/components/sections/contact/ContactText"; import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal"; +import FaqDouble from "@/components/sections/faq/FaqDouble"; import Link from "next/link"; -import { BookOpen } from "lucide-react"; +import { BookOpen, Star, TrendingUp, Users, Award, Filter, Search } from "lucide-react"; +import Image from "next/image"; + +interface SearchResult { + id: string; + name: string; + category: string; + rating: number; +} export default function HomePage() { + const [searchQuery, setSearchQuery] = useState(""); + const [autocompleteResults, setAutocompleteResults] = useState([]); + const [showAutocomplete, setShowAutocomplete] = useState(false); + const [activeFilters, setActiveFilters] = useState([]); + const [showCookieConsent, setShowCookieConsent] = useState(false); + + useEffect(() => { + const cookieConsent = localStorage.getItem("cookie-consent"); + if (!cookieConsent) { + setShowCookieConsent(true); + } + }, []); + + const handleCookieConsent = (accepted: boolean) => { + localStorage.setItem("cookie-consent", accepted ? "accepted" : "rejected"); + setShowCookieConsent(false); + }; + + const handleSearch = (query: string) => { + setSearchQuery(query); + if (query.length > 0) { + const mockResults: SearchResult[] = [ + { id: "1", name: "Matematik Özel Ders", category: "Matematik", rating: 4.9 }, + { id: "2", name: "İngilizce Konuşma", category: "İngilizce", rating: 4.8 }, + { id: "3", name: "Kimya Deneyleri", category: "Kimya", rating: 4.7 }, + { id: "4", name: "Tarih Dersleri", category: "Tarih", rating: 4.9 }, + ].filter( + (r) => + r.name.toLowerCase().includes(query.toLowerCase()) || + r.category.toLowerCase().includes(query.toLowerCase()) + ); + setAutocompleteResults(mockResults); + setShowAutocomplete(true); + } else { + setAutocompleteResults([]); + setShowAutocomplete(false); + } + }; + + const toggleFilter = (filter: string) => { + setActiveFilters((prev) => + prev.includes(filter) ? prev.filter((f) => f !== filter) : [...prev, filter] + ); + }; + + const formatTurkishCurrency = (amount: number): string => { + return new Intl.NumberFormat("tr-TR", { + style: "currency", currency: "TRY", minimumFractionDigits: 0, + maximumFractionDigits: 2, + }).format(amount); + }; + + const formatTurkishDate = (date: Date): string => { + return new Intl.DateTimeFormat("tr-TR", { + year: "numeric", month: "long", day: "numeric"}).format(date); + }; + + const StarRating = ({ rating, count }: { rating: number; count?: number }) => ( +
+ {[...Array(5)].map((_, i) => ( + + ))} + {count && ({count})} + {rating} +
+ ); + const navItems = [ { name: "Ana Sayfa", id: "/" }, { name: "Öğretmenler", id: "/teachers" }, - { name: "Etkinlikler", id: "events" }, - { name: "Çalışma Programı", id: "schedule" }, + { name: "Etkinlikler", id: "/events" }, + { name: "Çalışma Programı", id: "/schedule" }, ]; const heroBtns = [ - { - text: "Hemen Başla", href: "/teachers"}, + { text: "Hemen Başla", href: "/teachers" }, ]; const metricsData = [ @@ -64,11 +144,30 @@ export default function HomePage() { title: "Osmanlı İmparatorluğu Hikayesi", excerpt: "Osmanlı tarihinin önemli dönemleri, simgesel olaylar ve kültürel etkilerin kapsamlı incelemesi.", imageSrc: "http://img.b2bpic.net/free-photo/view-ancient-paper-scroll-writing-documenting_23-2151751754.jpg", imageAlt: "history book ancient civilization artifacts", authorName: "İbrahim Çelik", authorAvatar: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-satisfied_1298-169.jpg", date: "31 Ocak 2025"}, ]; + const faqData = [ + { + id: "1", title: "Platformda nasıl başlarım?", content: "Kayıt olun, öğretmen kategorilerini seçin ve profilinizi tamamlayın. Ardından istediğiniz öğretmenleri görüntüleyin ve rezervasyon yapın."}, + { + id: "2", title: "Ders fiyatları ne kadar?", content: `Fiyatlar öğretmene ve derse göre değişir. Ortalama fiyatlar: +
    +
  • Bireysel Dersler: ${formatTurkishCurrency(150)} - ${formatTurkishCurrency(300)}
    • +
  • Grup Dersleri: ${formatTurkishCurrency(100)} - ${formatTurkishCurrency(200)}
    • +
  • Paket Fiyatları: ${formatTurkishCurrency(1500)} - ${formatTurkishCurrency(5000)}
    • +
`, + }, + { + id: "3", title: "İptal politikası nedir?", content: "Dersler başlamadan 24 saat önce iptal edebilirsiniz. Geç iptal edilen dersler geri iade edilmez. Öğretmen kaynaklı iptal durumlarında tam geri iade yapılır."}, + { + id: "4", title: "Öğretmen değiştirebilir miyim?", content: "Evet! İlk dersten sonra öğretmen değiştirebilirsiniz. Destek ekibimizle iletişime geçerek yeni bir öğretmen seçebilirsiniz."}, + { + id: "5", title: "Sertifikat alınır mı?", content: "Evet, kursları tamamlayan öğrenciler resmi sertifika alırlar. Sertifika, tamamlanan kurs saatini ve başarı notunuzu içerir."}, + { + id: "6", title: "24/7 destek var mı?", content: "Evet! Canlı sohbet, email ve telefon desteği 24/7 mevcuttur. Ortalama yanıt süresi 5 dakikadır."}, + ]; + const contactButtons = [ - { - text: "Bize Yazın", href: "/contact"}, - { - text: "Canlı Sohbet", href: "#"}, + { text: "Bize Yazın", href: "/contact" }, + { text: "Canlı Sohbet", href: "#" }, ]; return ( @@ -84,6 +183,75 @@ export default function HomePage() { secondaryButtonStyle="layered" headingFontWeight="light" > + {/* Breadcrumb Navigation */} + + + {/* Search & Filter Bar */} +
+
+
+ {/* Search with Autocomplete */} +
+
+ + handleSearch(e.target.value)} + onFocus={() => searchQuery && setShowAutocomplete(true)} + onBlur={() => setTimeout(() => setShowAutocomplete(false), 200)} + className="w-full ml-2 bg-transparent outline-none text-foreground" + aria-label="Arama" + /> +
+ {/* Autocomplete Dropdown */} + {showAutocomplete && autocompleteResults.length > 0 && ( +
+ {autocompleteResults.map((result) => ( +
+
+
{result.name}
+
{result.category}
+
+
+ + {result.rating} +
+
+ ))} +
+ )} +
+ + {/* Filter Chips */} +
+ {["Popüler", "En Yüksek Puan", "Yakında"].map((filter) => ( + + ))} +
+
+
+
+ + {/* Trust Badges Section */} +
+
+
+ + SSL Güvenli +
+
+ + Doğrulanmış Öğretmenler +
+
+ + Para İade Garantisi +
+
+ + 4.9/5 Yıldız Puan +
+
+
+
+ {/* FAQ Section */} +
+ +
+
+ + {/* Cookie Consent Banner */} + {showCookieConsent && ( +
+
+

+ Bu web sitesi deneyimi geliştirmek için çerezleri kullanır. Kullanımına devam ederek kabulünüz olduğunu kabul edersiniz. +

+
+ + +
+
+
+ )} ); -} \ No newline at end of file +}