Update src/app/page.tsx
This commit is contained in:
337
src/app/page.tsx
337
src/app/page.tsx
@@ -1,342 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
||||
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import Link from "next/link";
|
||||
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" },
|
||||
{ name: "Etkinlikler", id: "events" },
|
||||
{ name: "Çalışma Programı", id: "schedule" },
|
||||
];
|
||||
|
||||
const heroBtns = [
|
||||
{
|
||||
text: "Hemen Başla", href: "/teachers"},
|
||||
];
|
||||
|
||||
const metricsData = [
|
||||
{
|
||||
id: "1", value: "50+", title: "Öğretmen", description: "Deneyimli eğitim profesyonelleri", imageSrc: "http://img.b2bpic.net/free-photo/people-standing-with-papers_23-2147657172.jpg", imageAlt: "professional teachers group portrait education"},
|
||||
{
|
||||
id: "2", value: "1000+", title: "Öğrenci", description: "Aktif kullanıcı topluluğu", imageSrc: "http://img.b2bpic.net/free-photo/happy-office-colleagues-watching-project-presentation-together_74855-10013.jpg", imageAlt: "students group learning education diverse"},
|
||||
{
|
||||
id: "3", value: "200+", title: "Ders", description: "Çeşitli konu başlıkları", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-educational-elements-arrangement-with-empty-notepad_23-2148721242.jpg", imageAlt: "course curriculum education subjects books"},
|
||||
{
|
||||
id: "4", value: "4.9/5", title: "Puan", description: "Ortalama memnuniyet oranı ⭐", imageSrc: "http://img.b2bpic.net/free-vector/education-white_24877-49399.jpg", imageAlt: "five star rating excellent satisfaction feedback"},
|
||||
];
|
||||
|
||||
const carouselItems = [
|
||||
{
|
||||
id: "1", imageSrc: "http://img.b2bpic.net/free-psd/children-school-education-landing-page_23-2149901102.jpg", imageAlt: "online learning education platform interface"},
|
||||
{
|
||||
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/senior-people-school-class-with-laptop-computer_23-2150104980.jpg", imageAlt: "online course learning platform screen"},
|
||||
{
|
||||
id: "3", imageSrc: "http://img.b2bpic.net/free-vector/virtual-graduation-ceremony-with-computer_23-2148569138.jpg", imageAlt: "online tutor video conference interface"},
|
||||
{
|
||||
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/friends-learning-study-group_23-2149257210.jpg", imageAlt: "education app notification schedule planning"},
|
||||
{
|
||||
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/crop-men-discussing-graph-tablet_23-2147785037.jpg", imageAlt: "digital education platform analytics dashboard"},
|
||||
{
|
||||
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/front-view-older-business-woman-with-glasses-writing-agenda-looking-laptop_23-2148661168.jpg", imageAlt: "online class registration booking system"},
|
||||
];
|
||||
|
||||
const eventsBlogsData = [
|
||||
{
|
||||
id: "1", category: ["Matematik"],
|
||||
title: "Trigonometri Ustalaşma Sürümü", excerpt: "Trigonometri kurallarını derinlemesine öğrenin, örnekler ve pratik problemlerle desteklenen kapsamlı ders.", imageSrc: "http://img.b2bpic.net/free-vector/modern-background-with-geometric-shapes_23-2147546962.jpg", imageAlt: "mathematics geometry trigonometry education board", authorName: "Ayşe Kaya", authorAvatar: "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg", date: "25 Ocak 2025"},
|
||||
{
|
||||
id: "2", category: ["İngilizce"],
|
||||
title: "İngilizce Konuşma Atölyesi", excerpt: "Günlük İngilizce konuşma becerilerinizi geliştirin, doğal diyaloglar ve kültürel bağlam ile.", imageSrc: "http://img.b2bpic.net/free-vector/language-concept-background_23-2147872796.jpg", imageAlt: "english language learning book study", authorName: "Mehmet Yıldız", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg", date: "27 Ocak 2025"},
|
||||
{
|
||||
id: "3", category: ["Kimya"],
|
||||
title: "Kimya Deneyimleri Laboratuvarı", excerpt: "Sanal laboratuvarıyla pratik deneyimler gain ve kimyasal reaksiyonları canlı tutun.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laboratory-test-tubes_23-2148891898.jpg", imageAlt: "chemistry laboratory science experiment beakers", authorName: "Zeynep Demir", authorAvatar: "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg", date: "29 Ocak 2025"},
|
||||
{
|
||||
id: "4", category: ["Tarih"],
|
||||
title: "Osmanlı İmparatorluğu Hikayesi", excerpt: "Osmanlı tarihinin önemli dönemleri, simgesel olaylar ve kültürel etkilerin kapsamlı incelemesi.", imageSrc: "http://img.b2bpic.net/free-photo/view-ancient-paper-scroll-writing-documenting_23-2151751754.jpg", imageAlt: "history book ancient civilization artifacts", authorName: "İbrahim Çelik", authorAvatar: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-satisfied_1298-169.jpg", date: "31 Ocak 2025"},
|
||||
];
|
||||
|
||||
const contactButtons = [
|
||||
{
|
||||
text: "Bize Yazın", href: "/contact"},
|
||||
{
|
||||
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"
|
||||
>
|
||||
<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"
|
||||
}`}
|
||||
>
|
||||
<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>
|
||||
<h1>Welcome to Home Page</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user