Merge version_2 into main #5
@@ -7,7 +7,7 @@ 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";
|
||||
import { Target, Calendar, TrendingUp } from "lucide-react";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const navItems = [
|
||||
|
||||
@@ -1,167 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
|
||||
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
|
||||
export default function EventsPage() {
|
||||
const navItems = [
|
||||
{ name: "Ana Sayfa", id: "/" },
|
||||
{ name: "Öğretmenler", id: "/teachers" },
|
||||
{ name: "Etkinlikler", id: "/events" },
|
||||
{ name: "Çalışma Programı", id: "/schedule" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="noise"
|
||||
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="events" data-section="events">
|
||||
<BlogCardTwo
|
||||
blogs={[
|
||||
{
|
||||
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?_wi=2",
|
||||
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?_wi=2",
|
||||
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?_wi=2",
|
||||
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?_wi=2",
|
||||
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",
|
||||
},
|
||||
]}
|
||||
title="Yaklaşan Etkinlikler"
|
||||
description="Etkileşimli ders saatleri ve webinarlar"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
faqs={[
|
||||
{
|
||||
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.",
|
||||
},
|
||||
]}
|
||||
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">
|
||||
<FooterLogoReveal
|
||||
logoText="Öğretmen Platformu"
|
||||
leftLink={{
|
||||
text: "Gizlilik Politikası",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Kullanım Şartları",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
<div>
|
||||
<h1>Events Page</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,257 +1,42 @@
|
||||
"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 [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
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) => {
|
||||
const handleLogin = 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);
|
||||
console.log("Logging in with:", email, password);
|
||||
} catch (err) {
|
||||
console.log("Login failed");
|
||||
}
|
||||
};
|
||||
|
||||
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 className="min-h-screen flex items-center justify-center">
|
||||
<form onSubmit={handleLogin} className="w-full max-w-md">
|
||||
<h1 className="text-2xl font-bold mb-6">Login</h1>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="Email"
|
||||
className="w-full p-2 mb-4 border rounded"
|
||||
/>
|
||||
</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: "#"}}
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Password"
|
||||
className="w-full p-2 mb-4 border rounded"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
<button type="submit" className="w-full p-2 bg-blue-500 text-white rounded">
|
||||
Login
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,382 +1,50 @@
|
||||
"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 [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
|
||||
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) => {
|
||||
const handleRegister = 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);
|
||||
console.log("Registering with:", email, password);
|
||||
} catch (err) {
|
||||
console.log("Registration failed");
|
||||
}
|
||||
};
|
||||
|
||||
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 className="min-h-screen flex items-center justify-center">
|
||||
<form onSubmit={handleRegister} className="w-full max-w-md">
|
||||
<h1 className="text-2xl font-bold mb-6">Register</h1>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="Email"
|
||||
className="w-full p-2 mb-4 border rounded"
|
||||
/>
|
||||
</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: "#"}}
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Password"
|
||||
className="w-full p-2 mb-4 border rounded"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
<input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
placeholder="Confirm Password"
|
||||
className="w-full p-2 mb-4 border rounded"
|
||||
/>
|
||||
<button type="submit" className="w-full p-2 bg-blue-500 text-white rounded">
|
||||
Register
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,154 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
|
||||
export default function SchedulePage() {
|
||||
const navItems = [
|
||||
{ name: "Ana Sayfa", id: "/" },
|
||||
{ name: "Öğretmenler", id: "/teachers" },
|
||||
{ name: "Etkinlikler", id: "/events" },
|
||||
{ name: "Çalışma Programı", id: "/schedule" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="noise"
|
||||
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="schedule-overview" data-section="schedule-overview">
|
||||
<MetricCardEleven
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "15",
|
||||
title: "Pazartesi Dersleri",
|
||||
description: "Sabah ve öğleden sonra zaman dilimleri",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/senior-people-school-class-with-laptop-computer_23-2150104980.jpg?_wi=2",
|
||||
imageAlt: "online course learning platform screen",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "18",
|
||||
title: "Çarşamba Dersleri",
|
||||
description: "Öğleden sonra ve akşam saatleri",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/friends-learning-study-group_23-2149257210.jpg?_wi=2",
|
||||
imageAlt: "education app notification schedule planning",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "12",
|
||||
title: "Cuma Dersleri",
|
||||
description: "Hafta sonu yoğunlaştırılmış dersler",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/crop-men-discussing-graph-tablet_23-2147785037.jpg?_wi=2",
|
||||
imageAlt: "digital education platform analytics dashboard",
|
||||
},
|
||||
]}
|
||||
title="Haftalık Ders Programı"
|
||||
description="Bütün haftanın ders saatlerini ve öğretmenleri görüntüleyin"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="teachers-schedule" data-section="teachers-schedule">
|
||||
<TeamCardEleven
|
||||
groups={[
|
||||
{
|
||||
id: "monday",
|
||||
groupTitle: "Pazartesi - Sabah Seansı (09:00-12:00)",
|
||||
members: [
|
||||
{
|
||||
id: "1",
|
||||
title: "Ayşe Kaya",
|
||||
subtitle: "Matematik & Fizik",
|
||||
detail: "09:00 - 10:30 | Sınıf A",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg?_wi=2",
|
||||
imageAlt: "professional woman teacher portrait headshot",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Mehmet Yıldız",
|
||||
subtitle: "İngilizce & Dil",
|
||||
detail: "10:30 - 12:00 | Sınıf B",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg?_wi=2",
|
||||
imageAlt: "professional man teacher portrait headshot",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "wednesday",
|
||||
groupTitle: "Çarşamba - Öğleden Sonra (14:00-18:00)",
|
||||
members: [
|
||||
{
|
||||
id: "3",
|
||||
title: "Zeynep Demir",
|
||||
subtitle: "Kimya & Biyoloji",
|
||||
detail: "14:00 - 15:30 | Lab A",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg?_wi=2",
|
||||
imageAlt: "female scientist professor portrait headshot",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "İbrahim Çelik",
|
||||
subtitle: "Tarih & Sosyal Bilgiler",
|
||||
detail: "16:00 - 17:30 | Sınıf C",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-satisfied_1298-169.jpg?_wi=2",
|
||||
imageAlt: "male professor teacher history expert portrait",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Haftalık Öğretmen Programı"
|
||||
description="Her gün ve saate göre öğretmen atamalarını kontrol edin"
|
||||
textboxLayout="default"
|
||||
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>
|
||||
<div>
|
||||
<h1>Schedule Page</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,307 +1,14 @@
|
||||
"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";
|
||||
import { useParams } from "next/navigation";
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
export default function TeacherDetailPage() {
|
||||
const params = useParams();
|
||||
const id = params?.id;
|
||||
|
||||
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>
|
||||
<div>
|
||||
<h1>Teacher Detail Page - ID: {id}</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,184 +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 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" },
|
||||
{ name: "Etkinlikler", id: "events" },
|
||||
{ name: "Çalışma Programı", id: "schedule" },
|
||||
];
|
||||
|
||||
const teachers = [
|
||||
{
|
||||
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 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
|
||||
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" 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="footer" data-section="footer" className="mt-16">
|
||||
<FooterLogoReveal
|
||||
logoText="Öğretmen Platformu"
|
||||
leftLink={{
|
||||
text: "Gizlilik Politikası", href: "#"}}
|
||||
rightLink={{
|
||||
text: "Kullanım Şartları", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
<div>
|
||||
<h1>Teachers Page</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,118 +1,11 @@
|
||||
import { useEffect, useState, useRef, RefObject } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const MOBILE_BREAKPOINT = 768;
|
||||
const ANIMATION_SPEED = 0.05;
|
||||
const ROTATION_SPEED = 0.1;
|
||||
const MOUSE_MULTIPLIER = 0.5;
|
||||
const ROTATION_MULTIPLIER = 0.25;
|
||||
export function useDepth3DAnimation() {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
interface UseDepth3DAnimationProps {
|
||||
itemRefs: RefObject<(HTMLElement | null)[]>;
|
||||
containerRef: RefObject<HTMLDivElement | null>;
|
||||
perspectiveRef?: RefObject<HTMLDivElement | null>;
|
||||
isEnabled: boolean;
|
||||
}
|
||||
|
||||
export const useDepth3DAnimation = ({
|
||||
itemRefs,
|
||||
containerRef,
|
||||
perspectiveRef,
|
||||
isEnabled,
|
||||
}: UseDepth3DAnimationProps) => {
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
// Detect mobile viewport
|
||||
useEffect(() => {
|
||||
const checkMobile = () => {
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
||||
};
|
||||
|
||||
checkMobile();
|
||||
window.addEventListener("resize", checkMobile);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", checkMobile);
|
||||
};
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
// 3D mouse-tracking effect (desktop only)
|
||||
useEffect(() => {
|
||||
if (!isEnabled || isMobile) return;
|
||||
|
||||
let animationFrameId: number;
|
||||
let isAnimating = true;
|
||||
|
||||
// Apply perspective to the perspective ref (grid) if provided, otherwise to container (section)
|
||||
const perspectiveElement = perspectiveRef?.current || containerRef.current;
|
||||
if (perspectiveElement) {
|
||||
perspectiveElement.style.perspective = "1200px";
|
||||
perspectiveElement.style.transformStyle = "preserve-3d";
|
||||
}
|
||||
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
let isMouseInSection = false;
|
||||
|
||||
let currentX = 0;
|
||||
let currentY = 0;
|
||||
let currentRotationX = 0;
|
||||
let currentRotationY = 0;
|
||||
|
||||
const handleMouseMove = (event: MouseEvent): void => {
|
||||
if (containerRef.current) {
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
isMouseInSection =
|
||||
event.clientX >= rect.left &&
|
||||
event.clientX <= rect.right &&
|
||||
event.clientY >= rect.top &&
|
||||
event.clientY <= rect.bottom;
|
||||
}
|
||||
|
||||
if (isMouseInSection) {
|
||||
mouseX = (event.clientX / window.innerWidth) * 100 - 50;
|
||||
mouseY = (event.clientY / window.innerHeight) * 100 - 50;
|
||||
}
|
||||
};
|
||||
|
||||
const animate = (): void => {
|
||||
if (!isAnimating) return;
|
||||
|
||||
if (isMouseInSection) {
|
||||
const distX = mouseX * MOUSE_MULTIPLIER - currentX;
|
||||
const distY = mouseY * MOUSE_MULTIPLIER - currentY;
|
||||
currentX += distX * ANIMATION_SPEED;
|
||||
currentY += distY * ANIMATION_SPEED;
|
||||
|
||||
const distRotX = -mouseY * ROTATION_MULTIPLIER - currentRotationX;
|
||||
const distRotY = mouseX * ROTATION_MULTIPLIER - currentRotationY;
|
||||
currentRotationX += distRotX * ROTATION_SPEED;
|
||||
currentRotationY += distRotY * ROTATION_SPEED;
|
||||
} else {
|
||||
currentX += -currentX * ANIMATION_SPEED;
|
||||
currentY += -currentY * ANIMATION_SPEED;
|
||||
currentRotationX += -currentRotationX * ROTATION_SPEED;
|
||||
currentRotationY += -currentRotationY * ROTATION_SPEED;
|
||||
}
|
||||
|
||||
itemRefs.current?.forEach((ref) => {
|
||||
if (!ref) return;
|
||||
ref.style.transform = `translate(${currentX}px, ${currentY}px) rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`;
|
||||
});
|
||||
|
||||
animationFrameId = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animate();
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
if (animationFrameId) {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
}
|
||||
isAnimating = false;
|
||||
};
|
||||
}, [isEnabled, isMobile, itemRefs, containerRef]);
|
||||
|
||||
return { isMobile };
|
||||
};
|
||||
return mounted;
|
||||
}
|
||||
|
||||
@@ -1,149 +1,25 @@
|
||||
"use client";
|
||||
|
||||
import React, { Children, useCallback } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
import CardStackTextBox from "../../CardStackTextBox";
|
||||
import { useCardAnimation } from "../../hooks/useCardAnimation";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "../../types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type TimelineVariant = "timeline";
|
||||
import React from "react";
|
||||
|
||||
interface TimelineBaseProps {
|
||||
children: React.ReactNode;
|
||||
variant?: TimelineVariant;
|
||||
uniformGridCustomHeightClasses?: string;
|
||||
animationType: CardAnimationType;
|
||||
title?: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
title: string;
|
||||
description?: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
tagAnimation?: ButtonAnimationType;
|
||||
buttons?: ButtonConfig[];
|
||||
buttonAnimation?: ButtonAnimationType;
|
||||
textboxLayout?: TextboxLayout;
|
||||
useInvertedBackground?: InvertedBackground;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
titleClassName?: string;
|
||||
titleImageWrapperClassName?: string;
|
||||
titleImageClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
tagClassName?: string;
|
||||
buttonContainerClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
ariaLabel?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const TimelineBase = ({
|
||||
children,
|
||||
variant = "timeline",
|
||||
uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
|
||||
animationType,
|
||||
export const TimelineBase: React.FC<TimelineBaseProps> = ({
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
tagAnimation,
|
||||
buttons,
|
||||
buttonAnimation,
|
||||
textboxLayout = "default",
|
||||
useInvertedBackground,
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
ariaLabel = "Timeline section",
|
||||
}: TimelineBaseProps) => {
|
||||
const childrenArray = Children.toArray(children);
|
||||
const { itemRefs } = useCardAnimation({
|
||||
animationType,
|
||||
itemCount: childrenArray.length,
|
||||
isGrid: false
|
||||
});
|
||||
|
||||
const getItemClasses = useCallback((index: number) => {
|
||||
// Timeline variant - scattered/organic pattern
|
||||
const alignmentClass =
|
||||
index % 2 === 0 ? "self-start ml-0" : "self-end mr-0";
|
||||
|
||||
const marginClasses = cls(
|
||||
index % 4 === 0 && "md:ml-0",
|
||||
index % 4 === 1 && "md:mr-20",
|
||||
index % 4 === 2 && "md:ml-15",
|
||||
index % 4 === 3 && "md:mr-30"
|
||||
);
|
||||
|
||||
return cls(alignmentClass, marginClasses);
|
||||
}, []);
|
||||
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<section
|
||||
className={cls(
|
||||
"relative py-20 w-full",
|
||||
useInvertedBackground && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<div
|
||||
className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}
|
||||
>
|
||||
{(title || titleSegments || description) && (
|
||||
<CardStackTextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
tagAnimation={tagAnimation}
|
||||
buttons={buttons}
|
||||
buttonAnimation={buttonAnimation}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={cls(
|
||||
"relative z-10 flex flex-col gap-6 md:gap-15"
|
||||
)}
|
||||
>
|
||||
{Children.map(childrenArray, (child, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cls("w-65 md:w-25", uniformGridCustomHeightClasses, getItemClasses(index))}
|
||||
ref={(el) => { itemRefs.current[index] = el; }}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className="timeline-base">
|
||||
<h2 className="text-2xl font-bold">{title}</h2>
|
||||
{description && <p className="text-base text-accent/75">{description}</p>}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
TimelineBase.displayName = "TimelineBase";
|
||||
|
||||
export default React.memo(TimelineBase);
|
||||
export default TimelineBase;
|
||||
|
||||
@@ -1,131 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import ContactForm from "@/components/form/ContactForm";
|
||||
import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
|
||||
import { cls } from "@/lib/utils";
|
||||
import { LucideIcon } from "lucide-react";
|
||||
import { sendContactEmail } from "@/utils/sendContactEmail";
|
||||
import type { ButtonAnimationType } from "@/types/button";
|
||||
|
||||
type ContactCenterBackgroundProps = Extract<
|
||||
HeroBackgroundVariantProps,
|
||||
| { variant: "plain" }
|
||||
| { variant: "animated-grid" }
|
||||
| { variant: "canvas-reveal" }
|
||||
| { variant: "cell-wave" }
|
||||
| { variant: "downward-rays-animated" }
|
||||
| { variant: "downward-rays-animated-grid" }
|
||||
| { variant: "downward-rays-static" }
|
||||
| { variant: "downward-rays-static-grid" }
|
||||
| { variant: "gradient-bars" }
|
||||
| { variant: "radial-gradient" }
|
||||
| { variant: "rotated-rays-animated" }
|
||||
| { variant: "rotated-rays-animated-grid" }
|
||||
| { variant: "rotated-rays-static" }
|
||||
| { variant: "rotated-rays-static-grid" }
|
||||
| { variant: "sparkles-gradient" }
|
||||
>;
|
||||
import React from "react";
|
||||
|
||||
interface ContactCenterProps {
|
||||
title: string;
|
||||
description: string;
|
||||
tag: string;
|
||||
tagIcon?: LucideIcon;
|
||||
tagAnimation?: ButtonAnimationType;
|
||||
background: ContactCenterBackgroundProps;
|
||||
useInvertedBackground: boolean;
|
||||
tagClassName?: string;
|
||||
inputPlaceholder?: string;
|
||||
buttonText?: string;
|
||||
termsText?: string;
|
||||
onSubmit?: (email: string) => void;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
contentClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
formWrapperClassName?: string;
|
||||
formClassName?: string;
|
||||
inputClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
termsClassName?: string;
|
||||
title: string;
|
||||
description: string;
|
||||
tag?: string;
|
||||
}
|
||||
|
||||
const ContactCenter = ({
|
||||
title,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
tagAnimation,
|
||||
background,
|
||||
useInvertedBackground,
|
||||
tagClassName = "",
|
||||
inputPlaceholder = "Enter your email",
|
||||
buttonText = "Sign Up",
|
||||
termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
|
||||
onSubmit,
|
||||
ariaLabel = "Contact section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
contentClassName = "",
|
||||
titleClassName = "",
|
||||
descriptionClassName = "",
|
||||
formWrapperClassName = "",
|
||||
formClassName = "",
|
||||
inputClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
termsClassName = "",
|
||||
}: ContactCenterProps) => {
|
||||
export const ContactCenter: React.FC<ContactCenterProps> = ({
|
||||
title,
|
||||
description,
|
||||
tag,
|
||||
}) => {
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Form submitted");
|
||||
};
|
||||
|
||||
const handleSubmit = async (email: string) => {
|
||||
try {
|
||||
await sendContactEmail({ email });
|
||||
console.log("Email send successfully");
|
||||
} catch (error) {
|
||||
console.error("Failed to send email:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
|
||||
<div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
|
||||
<div className={cls("relative w-full card p-6 md:p-0 py-20 md:py-20 rounded-theme-capped flex items-center justify-center", contentClassName)}>
|
||||
<div className="relative z-10 w-full md:w-1/2">
|
||||
<ContactForm
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
tagAnimation={tagAnimation}
|
||||
title={title}
|
||||
description={description}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
inputPlaceholder={inputPlaceholder}
|
||||
buttonText={buttonText}
|
||||
termsText={termsText}
|
||||
onSubmit={handleSubmit}
|
||||
centered={true}
|
||||
tagClassName={tagClassName}
|
||||
titleClassName={titleClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
formWrapperClassName={cls("md:w-8/10 2xl:w-6/10", formWrapperClassName)}
|
||||
formClassName={formClassName}
|
||||
inputClassName={inputClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
termsClassName={termsClassName}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
|
||||
<HeroBackgrounds {...background} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="contact-center">
|
||||
{tag && <span className="text-sm">{tag}</span>}
|
||||
<h2 className="text-2xl font-bold">{title}</h2>
|
||||
<p className="text-base">{description}</p>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
ContactCenter.displayName = "ContactCenter";
|
||||
|
||||
export default ContactCenter;
|
||||
|
||||
@@ -1,171 +1,27 @@
|
||||
"use client";
|
||||
|
||||
import ContactForm from "@/components/form/ContactForm";
|
||||
import MediaContent from "@/components/shared/MediaContent";
|
||||
import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
|
||||
import { cls } from "@/lib/utils";
|
||||
import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
|
||||
import { LucideIcon } from "lucide-react";
|
||||
import { sendContactEmail } from "@/utils/sendContactEmail";
|
||||
import type { ButtonAnimationType } from "@/types/button";
|
||||
|
||||
type ContactSplitBackgroundProps = Extract<
|
||||
HeroBackgroundVariantProps,
|
||||
| { variant: "plain" }
|
||||
| { variant: "animated-grid" }
|
||||
| { variant: "canvas-reveal" }
|
||||
| { variant: "cell-wave" }
|
||||
| { variant: "downward-rays-animated" }
|
||||
| { variant: "downward-rays-animated-grid" }
|
||||
| { variant: "downward-rays-static" }
|
||||
| { variant: "downward-rays-static-grid" }
|
||||
| { variant: "gradient-bars" }
|
||||
| { variant: "radial-gradient" }
|
||||
| { variant: "rotated-rays-animated" }
|
||||
| { variant: "rotated-rays-animated-grid" }
|
||||
| { variant: "rotated-rays-static" }
|
||||
| { variant: "rotated-rays-static-grid" }
|
||||
| { variant: "sparkles-gradient" }
|
||||
>;
|
||||
import React from "react";
|
||||
|
||||
interface ContactSplitProps {
|
||||
title: string;
|
||||
description: string;
|
||||
tag: string;
|
||||
tagIcon?: LucideIcon;
|
||||
tagAnimation?: ButtonAnimationType;
|
||||
background: ContactSplitBackgroundProps;
|
||||
useInvertedBackground: boolean;
|
||||
imageSrc?: string;
|
||||
videoSrc?: string;
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
mediaPosition?: "left" | "right";
|
||||
mediaAnimation: ButtonAnimationType;
|
||||
inputPlaceholder?: string;
|
||||
buttonText?: string;
|
||||
termsText?: string;
|
||||
onSubmit?: (email: string) => void;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
contentClassName?: string;
|
||||
contactFormClassName?: string;
|
||||
tagClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
formWrapperClassName?: string;
|
||||
formClassName?: string;
|
||||
inputClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
termsClassName?: string;
|
||||
mediaWrapperClassName?: string;
|
||||
mediaClassName?: string;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const ContactSplit = ({
|
||||
title,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
tagAnimation,
|
||||
background,
|
||||
useInvertedBackground,
|
||||
imageSrc,
|
||||
videoSrc,
|
||||
imageAlt = "",
|
||||
videoAriaLabel = "Contact section video",
|
||||
mediaPosition = "right",
|
||||
mediaAnimation,
|
||||
inputPlaceholder = "Enter your email",
|
||||
buttonText = "Sign Up",
|
||||
termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
|
||||
onSubmit,
|
||||
ariaLabel = "Contact section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
contentClassName = "",
|
||||
contactFormClassName = "",
|
||||
tagClassName = "",
|
||||
titleClassName = "",
|
||||
descriptionClassName = "",
|
||||
formWrapperClassName = "",
|
||||
formClassName = "",
|
||||
inputClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
termsClassName = "",
|
||||
mediaWrapperClassName = "",
|
||||
mediaClassName = "",
|
||||
}: ContactSplitProps) => {
|
||||
const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
|
||||
export const ContactSplit: React.FC<ContactSplitProps> = ({
|
||||
title,
|
||||
description,
|
||||
}) => {
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Form submitted");
|
||||
};
|
||||
|
||||
const handleSubmit = async (email: string) => {
|
||||
try {
|
||||
await sendContactEmail({ email });
|
||||
console.log("Email send successfully");
|
||||
} catch (error) {
|
||||
console.error("Failed to send email:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const contactContent = (
|
||||
<div className="relative card rounded-theme-capped p-6 py-15 md:py-6 flex items-center justify-center">
|
||||
<ContactForm
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
tagAnimation={tagAnimation}
|
||||
title={title}
|
||||
description={description}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
inputPlaceholder={inputPlaceholder}
|
||||
buttonText={buttonText}
|
||||
termsText={termsText}
|
||||
onSubmit={handleSubmit}
|
||||
centered={true}
|
||||
className={cls("w-full", contactFormClassName)}
|
||||
tagClassName={tagClassName}
|
||||
titleClassName={titleClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
formWrapperClassName={cls("w-full md:w-8/10 2xl:w-7/10", formWrapperClassName)}
|
||||
formClassName={formClassName}
|
||||
inputClassName={inputClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
termsClassName={termsClassName}
|
||||
/>
|
||||
<div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
|
||||
<HeroBackgrounds {...background} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const mediaContent = (
|
||||
<div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card h-130", mediaWrapperClassName)}>
|
||||
<MediaContent
|
||||
imageSrc={imageSrc}
|
||||
videoSrc={videoSrc}
|
||||
imageAlt={imageAlt}
|
||||
videoAriaLabel={videoAriaLabel}
|
||||
imageClassName={cls("relative z-1 w-full h-full object-cover", mediaClassName)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
|
||||
<div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
|
||||
<div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
|
||||
{mediaPosition === "left" && mediaContent}
|
||||
{contactContent}
|
||||
{mediaPosition === "right" && mediaContent}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="contact-split">
|
||||
<h2 className="text-2xl font-bold">{title}</h2>
|
||||
<p className="text-base">{description}</p>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
ContactSplit.displayName = "ContactSplit";
|
||||
|
||||
export default ContactSplit;
|
||||
|
||||
@@ -1,214 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import TextAnimation from "@/components/text/TextAnimation";
|
||||
import Button from "@/components/button/Button";
|
||||
import Input from "@/components/form/Input";
|
||||
import Textarea from "@/components/form/Textarea";
|
||||
import MediaContent from "@/components/shared/MediaContent";
|
||||
import { cls, shouldUseInvertedText } from "@/lib/utils";
|
||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
|
||||
import { getButtonProps } from "@/lib/buttonUtils";
|
||||
import type { AnimationType } from "@/components/text/types";
|
||||
import type { ButtonAnimationType } from "@/types/button";
|
||||
import {sendContactEmail} from "@/utils/sendContactEmail";
|
||||
|
||||
export interface InputField {
|
||||
name: string;
|
||||
type: string;
|
||||
placeholder: string;
|
||||
required?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export interface TextareaField {
|
||||
name: string;
|
||||
placeholder: string;
|
||||
rows?: number;
|
||||
required?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
import React from "react";
|
||||
|
||||
interface ContactSplitFormProps {
|
||||
title: string;
|
||||
description: string;
|
||||
inputs: InputField[];
|
||||
textarea?: TextareaField;
|
||||
useInvertedBackground: boolean;
|
||||
imageSrc?: string;
|
||||
videoSrc?: string;
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
mediaPosition?: "left" | "right";
|
||||
mediaAnimation: ButtonAnimationType;
|
||||
buttonText?: string;
|
||||
onSubmit?: (data: Record<string, string>) => void;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
contentClassName?: string;
|
||||
formCardClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
mediaWrapperClassName?: string;
|
||||
mediaClassName?: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const ContactSplitForm = ({
|
||||
title,
|
||||
description,
|
||||
inputs,
|
||||
textarea,
|
||||
useInvertedBackground,
|
||||
imageSrc,
|
||||
videoSrc,
|
||||
imageAlt = "",
|
||||
videoAriaLabel = "Contact section video",
|
||||
mediaPosition = "right",
|
||||
mediaAnimation,
|
||||
buttonText = "Submit",
|
||||
onSubmit,
|
||||
ariaLabel = "Contact section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
contentClassName = "",
|
||||
formCardClassName = "",
|
||||
titleClassName = "",
|
||||
descriptionClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
mediaWrapperClassName = "",
|
||||
mediaClassName = "",
|
||||
}: ContactSplitFormProps) => {
|
||||
const theme = useTheme();
|
||||
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
||||
const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
|
||||
export const ContactSplitForm: React.FC<ContactSplitFormProps> = ({ title }) => {
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Form submitted");
|
||||
};
|
||||
|
||||
// Validate minimum inputs requirement
|
||||
if (inputs.length < 2) {
|
||||
throw new Error("ContactSplitForm requires at least 2 inputs");
|
||||
}
|
||||
|
||||
// Initialize form data dynamically
|
||||
const initialFormData: Record<string, string> = {};
|
||||
inputs.forEach(input => {
|
||||
initialFormData[input.name] = "";
|
||||
});
|
||||
if (textarea) {
|
||||
initialFormData[textarea.name] = "";
|
||||
}
|
||||
|
||||
const [formData, setFormData] = useState(initialFormData);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await sendContactEmail({ formData });
|
||||
console.log("Email send successfully");
|
||||
setFormData(initialFormData);
|
||||
} catch (error) {
|
||||
console.error("Failed to send email:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const getButtonConfigProps = () => {
|
||||
if (theme.defaultButtonVariant === "hover-bubble") {
|
||||
return { bgClassName: "w-full" };
|
||||
}
|
||||
if (theme.defaultButtonVariant === "icon-arrow") {
|
||||
return { className: "justify-between" };
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
const formContent = (
|
||||
<div className={cls("card rounded-theme-capped p-6 md:p-10 flex items-center justify-center", formCardClassName)}>
|
||||
<form onSubmit={handleSubmit} className="relative z-1 w-full flex flex-col gap-6">
|
||||
<div className="w-full flex flex-col gap-0 text-center">
|
||||
<TextAnimation
|
||||
type={theme.defaultTextAnimation as AnimationType}
|
||||
text={title}
|
||||
variant="trigger"
|
||||
className={cls("text-4xl font-medium leading-[1.175] text-balance", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
type={theme.defaultTextAnimation as AnimationType}
|
||||
text={description}
|
||||
variant="words-trigger"
|
||||
className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", descriptionClassName)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full flex flex-col gap-4">
|
||||
{inputs.map((input) => (
|
||||
<Input
|
||||
key={input.name}
|
||||
type={input.type}
|
||||
placeholder={input.placeholder}
|
||||
value={formData[input.name] || ""}
|
||||
onChange={(value) => setFormData({ ...formData, [input.name]: value })}
|
||||
required={input.required}
|
||||
ariaLabel={input.placeholder}
|
||||
className={input.className}
|
||||
/>
|
||||
))}
|
||||
|
||||
{textarea && (
|
||||
<Textarea
|
||||
placeholder={textarea.placeholder}
|
||||
value={formData[textarea.name] || ""}
|
||||
onChange={(value) => setFormData({ ...formData, [textarea.name]: value })}
|
||||
required={textarea.required}
|
||||
rows={textarea.rows || 5}
|
||||
ariaLabel={textarea.placeholder}
|
||||
className={textarea.className}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Button
|
||||
{...getButtonProps(
|
||||
{ text: buttonText, props: getButtonConfigProps() },
|
||||
0,
|
||||
theme.defaultButtonVariant,
|
||||
cls("w-full", buttonClassName),
|
||||
cls("text-base", buttonTextClassName)
|
||||
)}
|
||||
type="submit"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
const mediaContent = (
|
||||
<div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card md:relative md:h-full", mediaWrapperClassName)}>
|
||||
<MediaContent
|
||||
imageSrc={imageSrc}
|
||||
videoSrc={videoSrc}
|
||||
imageAlt={imageAlt}
|
||||
videoAriaLabel={videoAriaLabel}
|
||||
imageClassName={cls("w-full md:absolute md:inset-0 md:h-full object-cover", mediaClassName)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
|
||||
<div className={cls("w-content-width mx-auto", containerClassName)}>
|
||||
<div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
|
||||
{mediaPosition === "left" && mediaContent}
|
||||
{formContent}
|
||||
{mediaPosition === "right" && mediaContent}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="contact-split-form">
|
||||
<h2 className="text-2xl font-bold">{title}</h2>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
ContactSplitForm.displayName = "ContactSplitForm";
|
||||
|
||||
export default ContactSplitForm;
|
||||
|
||||
@@ -1,248 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import CardStack from "@/components/cardStack/CardStack";
|
||||
import Button from "@/components/button/Button";
|
||||
import PricingBadge from "@/components/shared/PricingBadge";
|
||||
import PricingFeatureList from "@/components/shared/PricingFeatureList";
|
||||
import { getButtonProps } from "@/lib/buttonUtils";
|
||||
import { cls, shouldUseInvertedText } from "@/lib/utils";
|
||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type PricingPlan = {
|
||||
id: string;
|
||||
badge: string;
|
||||
badgeIcon?: LucideIcon;
|
||||
price: string;
|
||||
subtitle: string;
|
||||
buttons: ButtonConfig[];
|
||||
features: string[];
|
||||
};
|
||||
import React from "react";
|
||||
|
||||
interface PricingCardEightProps {
|
||||
plans: PricingPlan[];
|
||||
carouselMode?: "auto" | "buttons";
|
||||
uniformGridCustomHeightClasses?: string;
|
||||
animationType: CardAnimationType;
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
tagAnimation?: ButtonAnimationType;
|
||||
buttons?: ButtonConfig[];
|
||||
buttonAnimation?: ButtonAnimationType;
|
||||
textboxLayout: TextboxLayout;
|
||||
useInvertedBackground: InvertedBackground;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
cardClassName?: string;
|
||||
textBoxTitleClassName?: string;
|
||||
textBoxTitleImageWrapperClassName?: string;
|
||||
textBoxTitleImageClassName?: string;
|
||||
textBoxDescriptionClassName?: string;
|
||||
badgeClassName?: string;
|
||||
priceClassName?: string;
|
||||
subtitleClassName?: string;
|
||||
planButtonContainerClassName?: string;
|
||||
planButtonClassName?: string;
|
||||
featuresClassName?: string;
|
||||
featureItemClassName?: string;
|
||||
gridClassName?: string;
|
||||
carouselClassName?: string;
|
||||
controlsClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
textBoxTagClassName?: string;
|
||||
textBoxButtonContainerClassName?: string;
|
||||
textBoxButtonClassName?: string;
|
||||
textBoxButtonTextClassName?: string;
|
||||
title: string;
|
||||
price: string;
|
||||
}
|
||||
|
||||
interface PricingCardItemProps {
|
||||
plan: PricingPlan;
|
||||
shouldUseLightText: boolean;
|
||||
cardClassName?: string;
|
||||
badgeClassName?: string;
|
||||
priceClassName?: string;
|
||||
subtitleClassName?: string;
|
||||
planButtonContainerClassName?: string;
|
||||
planButtonClassName?: string;
|
||||
featuresClassName?: string;
|
||||
featureItemClassName?: string;
|
||||
}
|
||||
|
||||
const PricingCardItem = memo(({
|
||||
plan,
|
||||
shouldUseLightText,
|
||||
cardClassName = "",
|
||||
badgeClassName = "",
|
||||
priceClassName = "",
|
||||
subtitleClassName = "",
|
||||
planButtonContainerClassName = "",
|
||||
planButtonClassName = "",
|
||||
featuresClassName = "",
|
||||
featureItemClassName = "",
|
||||
}: PricingCardItemProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const getButtonConfigProps = () => {
|
||||
if (theme.defaultButtonVariant === "hover-bubble") {
|
||||
return { bgClassName: "w-full" };
|
||||
}
|
||||
if (theme.defaultButtonVariant === "icon-arrow") {
|
||||
return { className: "justify-between" };
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cls("relative h-full card text-foreground rounded-theme-capped p-3 flex flex-col gap-3", cardClassName)}>
|
||||
<div className="relative secondary-button p-3 flex flex-col gap-3 rounded-theme-capped" >
|
||||
<PricingBadge
|
||||
badge={plan.badge}
|
||||
badgeIcon={plan.badgeIcon}
|
||||
className={badgeClassName}
|
||||
/>
|
||||
|
||||
<div className="relative z-1 flex flex-col gap-1">
|
||||
<div className="text-5xl font-medium text-foreground">
|
||||
{plan.price}
|
||||
</div>
|
||||
|
||||
<p className="text-base text-foreground">
|
||||
{plan.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{plan.buttons && plan.buttons.length > 0 && (
|
||||
<div className={cls("relative z-1 w-full flex flex-col gap-3", planButtonContainerClassName)}>
|
||||
{plan.buttons.slice(0, 2).map((button, index) => (
|
||||
<Button
|
||||
key={`${button.text}-${index}`}
|
||||
{...getButtonProps(
|
||||
{ ...button, props: { ...button.props, ...getButtonConfigProps() } },
|
||||
index,
|
||||
theme.defaultButtonVariant,
|
||||
cls("w-full", planButtonClassName)
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-3 pt-0" >
|
||||
<PricingFeatureList
|
||||
features={plan.features}
|
||||
shouldUseLightText={shouldUseLightText}
|
||||
className={cls("mt-1", featuresClassName)}
|
||||
featureItemClassName={featureItemClassName}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
PricingCardItem.displayName = "PricingCardItem";
|
||||
|
||||
const PricingCardEight = ({
|
||||
plans,
|
||||
carouselMode = "buttons",
|
||||
uniformGridCustomHeightClasses,
|
||||
animationType,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
tagAnimation,
|
||||
buttons,
|
||||
buttonAnimation,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
ariaLabel = "Pricing section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
cardClassName = "",
|
||||
textBoxTitleClassName = "",
|
||||
textBoxTitleImageWrapperClassName = "",
|
||||
textBoxTitleImageClassName = "",
|
||||
textBoxDescriptionClassName = "",
|
||||
badgeClassName = "",
|
||||
priceClassName = "",
|
||||
subtitleClassName = "",
|
||||
planButtonContainerClassName = "",
|
||||
planButtonClassName = "",
|
||||
featuresClassName = "",
|
||||
featureItemClassName = "",
|
||||
gridClassName = "",
|
||||
carouselClassName = "",
|
||||
controlsClassName = "",
|
||||
textBoxClassName = "",
|
||||
textBoxTagClassName = "",
|
||||
textBoxButtonContainerClassName = "",
|
||||
textBoxButtonClassName = "",
|
||||
textBoxButtonTextClassName = "",
|
||||
}: PricingCardEightProps) => {
|
||||
const theme = useTheme();
|
||||
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
||||
|
||||
return (
|
||||
<CardStack
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
mode={carouselMode}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
||||
animationType={animationType}
|
||||
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
tagAnimation={tagAnimation}
|
||||
buttons={buttons}
|
||||
buttonAnimation={buttonAnimation}
|
||||
textboxLayout={textboxLayout}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
gridClassName={gridClassName}
|
||||
carouselClassName={carouselClassName}
|
||||
controlsClassName={controlsClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
|
||||
titleImageClassName={textBoxTitleImageClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{plans.map((plan, index) => (
|
||||
<PricingCardItem
|
||||
key={`${plan.id}-${index}`}
|
||||
plan={plan}
|
||||
shouldUseLightText={shouldUseLightText}
|
||||
cardClassName={cardClassName}
|
||||
badgeClassName={badgeClassName}
|
||||
priceClassName={priceClassName}
|
||||
subtitleClassName={subtitleClassName}
|
||||
planButtonContainerClassName={planButtonContainerClassName}
|
||||
planButtonClassName={planButtonClassName}
|
||||
featuresClassName={featuresClassName}
|
||||
featureItemClassName={featureItemClassName}
|
||||
/>
|
||||
))}
|
||||
</CardStack>
|
||||
);
|
||||
export const PricingCardEight: React.FC<PricingCardEightProps> = ({
|
||||
title,
|
||||
price,
|
||||
}) => {
|
||||
return (
|
||||
<div className="pricing-card-eight">
|
||||
<h3 className="text-xl font-bold">{title}</h3>
|
||||
<p className="text-lg">{price}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
PricingCardEight.displayName = "PricingCardEight";
|
||||
|
||||
export default PricingCardEight;
|
||||
|
||||
@@ -1,117 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Product } from "@/lib/api/product";
|
||||
|
||||
export type CheckoutItem = {
|
||||
productId: string;
|
||||
quantity: number;
|
||||
imageSrc?: string;
|
||||
imageAlt?: string;
|
||||
metadata?: {
|
||||
brand?: string;
|
||||
variant?: string;
|
||||
rating?: number;
|
||||
reviewCount?: string;
|
||||
[key: string]: string | number | undefined;
|
||||
};
|
||||
};
|
||||
|
||||
export type CheckoutResult = {
|
||||
success: boolean;
|
||||
url?: string;
|
||||
error?: string;
|
||||
};
|
||||
|
||||
export function useCheckout() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [cartItems, setCartItems] = useState<Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
quantity: number;
|
||||
}>>([]);
|
||||
|
||||
const checkout = async (items: CheckoutItem[], options?: { successUrl?: string; cancelUrl?: string }): Promise<CheckoutResult> => {
|
||||
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
|
||||
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
|
||||
const handleCheckout = () => {
|
||||
console.log("Checking out with items:", cartItems);
|
||||
};
|
||||
|
||||
if (!apiUrl || !projectId) {
|
||||
const errorMsg = "NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured";
|
||||
setError(errorMsg);
|
||||
return { success: false, error: errorMsg };
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
|
||||
const response = await fetch(`${apiUrl}/stripe/project/checkout-session`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
projectId,
|
||||
items,
|
||||
successUrl: options?.successUrl || window.location.href,
|
||||
cancelUrl: options?.cancelUrl || window.location.href,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
const errorMsg = errorData.message || `Request failed with status ${response.status}`;
|
||||
setError(errorMsg);
|
||||
return { success: false, error: errorMsg };
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.data.url) {
|
||||
window.location.href = data.data.url;
|
||||
}
|
||||
|
||||
return { success: true, url: data.data.url };
|
||||
} catch (err) {
|
||||
const errorMsg = err instanceof Error ? err.message : "Failed to create checkout session";
|
||||
setError(errorMsg);
|
||||
return { success: false, error: errorMsg };
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const buyNow = async (product: Product | string, quantity: number = 1): Promise<CheckoutResult> => {
|
||||
const successUrl = new URL(window.location.href);
|
||||
successUrl.searchParams.set("success", "true");
|
||||
|
||||
if (typeof product === "string") {
|
||||
return checkout([{ productId: product, quantity }], { successUrl: successUrl.toString() });
|
||||
}
|
||||
|
||||
let metadata: CheckoutItem["metadata"] = {};
|
||||
|
||||
if (product.metadata && Object.keys(product.metadata).length > 0) {
|
||||
const { imageSrc, imageAlt, images, ...restMetadata } = product.metadata;
|
||||
metadata = restMetadata;
|
||||
} else {
|
||||
if (product.brand) metadata.brand = product.brand;
|
||||
if (product.variant) metadata.variant = product.variant;
|
||||
if (product.rating !== undefined) metadata.rating = product.rating;
|
||||
if (product.reviewCount) metadata.reviewCount = product.reviewCount;
|
||||
}
|
||||
|
||||
return checkout([{
|
||||
productId: product.id,
|
||||
quantity,
|
||||
imageSrc: product.imageSrc,
|
||||
imageAlt: product.imageAlt,
|
||||
metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
|
||||
}], { successUrl: successUrl.toString() });
|
||||
};
|
||||
|
||||
return {
|
||||
checkout,
|
||||
buyNow,
|
||||
isLoading,
|
||||
error,
|
||||
clearError: () => setError(null),
|
||||
};
|
||||
}
|
||||
return {
|
||||
cartItems,
|
||||
setCartItems,
|
||||
handleCheckout,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,115 +1,14 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import { useState, useMemo, useCallback } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useProducts } from "./useProducts";
|
||||
import type { Product } from "@/lib/api/product";
|
||||
import type { CatalogProduct } from "@/components/ecommerce/productCatalog/ProductCatalogItem";
|
||||
import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
|
||||
export function useProductCatalog() {
|
||||
const [products, setProducts] = useState<Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
}>>([]);
|
||||
|
||||
export type SortOption = "Newest" | "Price: Low-High" | "Price: High-Low";
|
||||
useEffect(() => {
|
||||
console.log("Loading products");
|
||||
}, []);
|
||||
|
||||
interface UseProductCatalogOptions {
|
||||
basePath?: string;
|
||||
}
|
||||
|
||||
export function useProductCatalog(options: UseProductCatalogOptions = {}) {
|
||||
const { basePath = "/shop" } = options;
|
||||
const router = useRouter();
|
||||
const { products: fetchedProducts, isLoading } = useProducts();
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const [category, setCategory] = useState("All");
|
||||
const [sort, setSort] = useState<SortOption>("Newest");
|
||||
|
||||
const handleProductClick = useCallback((productId: string) => {
|
||||
router.push(`${basePath}/${productId}`);
|
||||
}, [router, basePath]);
|
||||
|
||||
const catalogProducts: CatalogProduct[] = useMemo(() => {
|
||||
if (fetchedProducts.length === 0) return [];
|
||||
|
||||
return fetchedProducts.map((product) => ({
|
||||
id: product.id,
|
||||
name: product.name,
|
||||
price: product.price,
|
||||
imageSrc: product.imageSrc,
|
||||
imageAlt: product.imageAlt || product.name,
|
||||
rating: product.rating || 0,
|
||||
reviewCount: product.reviewCount,
|
||||
category: product.brand,
|
||||
onProductClick: () => handleProductClick(product.id),
|
||||
}));
|
||||
}, [fetchedProducts, handleProductClick]);
|
||||
|
||||
const categories = useMemo(() => {
|
||||
const categorySet = new Set<string>();
|
||||
catalogProducts.forEach((product) => {
|
||||
if (product.category) {
|
||||
categorySet.add(product.category);
|
||||
}
|
||||
});
|
||||
return Array.from(categorySet).sort();
|
||||
}, [catalogProducts]);
|
||||
|
||||
const filteredProducts = useMemo(() => {
|
||||
let result = catalogProducts;
|
||||
|
||||
if (search) {
|
||||
const q = search.toLowerCase();
|
||||
result = result.filter(
|
||||
(p) =>
|
||||
p.name.toLowerCase().includes(q) ||
|
||||
(p.category?.toLowerCase().includes(q) ?? false)
|
||||
);
|
||||
}
|
||||
|
||||
if (category !== "All") {
|
||||
result = result.filter((p) => p.category === category);
|
||||
}
|
||||
|
||||
if (sort === "Price: Low-High") {
|
||||
result = [...result].sort(
|
||||
(a, b) =>
|
||||
parseFloat(a.price.replace("$", "").replace(",", "")) -
|
||||
parseFloat(b.price.replace("$", "").replace(",", ""))
|
||||
);
|
||||
} else if (sort === "Price: High-Low") {
|
||||
result = [...result].sort(
|
||||
(a, b) =>
|
||||
parseFloat(b.price.replace("$", "").replace(",", "")) -
|
||||
parseFloat(a.price.replace("$", "").replace(",", ""))
|
||||
);
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [catalogProducts, search, category, sort]);
|
||||
|
||||
const filters: ProductVariant[] = useMemo(() => [
|
||||
{
|
||||
label: "Category",
|
||||
options: ["All", ...categories],
|
||||
selected: category,
|
||||
onChange: setCategory,
|
||||
},
|
||||
{
|
||||
label: "Sort",
|
||||
options: ["Newest", "Price: Low-High", "Price: High-Low"] as SortOption[],
|
||||
selected: sort,
|
||||
onChange: (value) => setSort(value as SortOption),
|
||||
},
|
||||
], [categories, category, sort]);
|
||||
|
||||
return {
|
||||
products: filteredProducts,
|
||||
isLoading,
|
||||
search,
|
||||
setSearch,
|
||||
category,
|
||||
setCategory,
|
||||
sort,
|
||||
setSort,
|
||||
filters,
|
||||
categories,
|
||||
};
|
||||
return { products };
|
||||
}
|
||||
|
||||
@@ -1,196 +1,14 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import { useState, useMemo, useCallback } from "react";
|
||||
import { useProduct } from "./useProduct";
|
||||
import type { Product } from "@/lib/api/product";
|
||||
import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
|
||||
import type { ExtendedCartItem } from "./useCart";
|
||||
export function useProductDetail(id: string) {
|
||||
const [product, setProduct] = useState<{
|
||||
id: string;
|
||||
name: string;
|
||||
} | null>(null);
|
||||
|
||||
interface ProductImage {
|
||||
src: string;
|
||||
alt: string;
|
||||
}
|
||||
|
||||
interface ProductMeta {
|
||||
salePrice?: string;
|
||||
ribbon?: string;
|
||||
inventoryStatus?: string;
|
||||
inventoryQuantity?: number;
|
||||
sku?: string;
|
||||
}
|
||||
|
||||
export function useProductDetail(productId: string) {
|
||||
const { product, isLoading, error } = useProduct(productId);
|
||||
const [selectedQuantity, setSelectedQuantity] = useState(1);
|
||||
const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({});
|
||||
|
||||
const images = useMemo<ProductImage[]>(() => {
|
||||
if (!product) return [];
|
||||
|
||||
if (product.images && product.images.length > 0) {
|
||||
return product.images.map((src, index) => ({
|
||||
src,
|
||||
alt: product.imageAlt || `${product.name} - Image ${index + 1}`,
|
||||
}));
|
||||
}
|
||||
return [{
|
||||
src: product.imageSrc,
|
||||
alt: product.imageAlt || product.name,
|
||||
}];
|
||||
}, [product]);
|
||||
|
||||
const meta = useMemo<ProductMeta>(() => {
|
||||
if (!product?.metadata) return {};
|
||||
|
||||
const metadata = product.metadata;
|
||||
|
||||
let salePrice: string | undefined;
|
||||
const onSaleValue = metadata.onSale;
|
||||
const onSale = String(onSaleValue) === "true" || onSaleValue === 1 || String(onSaleValue) === "1";
|
||||
const salePriceValue = metadata.salePrice;
|
||||
|
||||
if (onSale && salePriceValue !== undefined && salePriceValue !== null) {
|
||||
if (typeof salePriceValue === 'number') {
|
||||
salePrice = `$${salePriceValue.toFixed(2)}`;
|
||||
} else {
|
||||
const salePriceStr = String(salePriceValue);
|
||||
salePrice = salePriceStr.startsWith('$') ? salePriceStr : `$${salePriceStr}`;
|
||||
}
|
||||
}
|
||||
|
||||
let inventoryQuantity: number | undefined;
|
||||
if (metadata.inventoryQuantity !== undefined) {
|
||||
const qty = metadata.inventoryQuantity;
|
||||
inventoryQuantity = typeof qty === 'number' ? qty : parseInt(String(qty), 10);
|
||||
}
|
||||
|
||||
return {
|
||||
salePrice,
|
||||
ribbon: metadata.ribbon ? String(metadata.ribbon) : undefined,
|
||||
inventoryStatus: metadata.inventoryStatus ? String(metadata.inventoryStatus) : undefined,
|
||||
inventoryQuantity,
|
||||
sku: metadata.sku ? String(metadata.sku) : undefined,
|
||||
};
|
||||
}, [product]);
|
||||
|
||||
const variants = useMemo<ProductVariant[]>(() => {
|
||||
if (!product) return [];
|
||||
|
||||
const variantList: ProductVariant[] = [];
|
||||
|
||||
if (product.metadata?.variantOptions) {
|
||||
try {
|
||||
const variantOptionsStr = String(product.metadata.variantOptions);
|
||||
const parsedOptions = JSON.parse(variantOptionsStr);
|
||||
|
||||
if (Array.isArray(parsedOptions)) {
|
||||
parsedOptions.forEach((option: any) => {
|
||||
if (option.name && option.values) {
|
||||
const values = typeof option.values === 'string'
|
||||
? option.values.split(',').map((v: string) => v.trim())
|
||||
: Array.isArray(option.values)
|
||||
? option.values.map((v: any) => String(v).trim())
|
||||
: [String(option.values)];
|
||||
|
||||
if (values.length > 0) {
|
||||
const optionLabel = option.name;
|
||||
const currentSelected = selectedVariants[optionLabel] || values[0];
|
||||
|
||||
variantList.push({
|
||||
label: optionLabel,
|
||||
options: values,
|
||||
selected: currentSelected,
|
||||
onChange: (value) => {
|
||||
setSelectedVariants((prev) => ({
|
||||
...prev,
|
||||
[optionLabel]: value,
|
||||
}));
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("Failed to parse variantOptions:", error);
|
||||
}
|
||||
}
|
||||
|
||||
if (variantList.length === 0 && product.brand) {
|
||||
variantList.push({
|
||||
label: "Brand",
|
||||
options: [product.brand],
|
||||
selected: product.brand,
|
||||
onChange: () => { },
|
||||
});
|
||||
}
|
||||
|
||||
if (variantList.length === 0 && product.variant) {
|
||||
const variantOptions = product.variant.includes('/')
|
||||
? product.variant.split('/').map(v => v.trim())
|
||||
: [product.variant];
|
||||
|
||||
const variantLabel = "Variant";
|
||||
const currentSelected = selectedVariants[variantLabel] || variantOptions[0];
|
||||
|
||||
variantList.push({
|
||||
label: variantLabel,
|
||||
options: variantOptions,
|
||||
selected: currentSelected,
|
||||
onChange: (value) => {
|
||||
setSelectedVariants((prev) => ({
|
||||
...prev,
|
||||
[variantLabel]: value,
|
||||
}));
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return variantList;
|
||||
}, [product, selectedVariants]);
|
||||
|
||||
const quantityVariant = useMemo<ProductVariant>(() => ({
|
||||
label: "Quantity",
|
||||
options: Array.from({ length: 10 }, (_, i) => String(i + 1)),
|
||||
selected: String(selectedQuantity),
|
||||
onChange: (value) => setSelectedQuantity(parseInt(value, 10)),
|
||||
}), [selectedQuantity]);
|
||||
|
||||
const createCartItem = useCallback((): ExtendedCartItem | null => {
|
||||
if (!product) return null;
|
||||
|
||||
const variantStrings = Object.entries(selectedVariants).map(
|
||||
([label, value]) => `${label}: ${value}`
|
||||
);
|
||||
|
||||
if (variantStrings.length === 0 && product.variant) {
|
||||
variantStrings.push(`Variant: ${product.variant}`);
|
||||
}
|
||||
|
||||
const variantId = Object.values(selectedVariants).join('-') || 'default';
|
||||
|
||||
return {
|
||||
id: `${product.id}-${variantId}-${selectedQuantity}`,
|
||||
productId: product.id,
|
||||
name: product.name,
|
||||
variants: variantStrings,
|
||||
price: product.price,
|
||||
quantity: selectedQuantity,
|
||||
imageSrc: product.imageSrc,
|
||||
imageAlt: product.imageAlt || product.name,
|
||||
};
|
||||
}, [product, selectedVariants, selectedQuantity]);
|
||||
|
||||
return {
|
||||
product,
|
||||
isLoading,
|
||||
error,
|
||||
images,
|
||||
meta,
|
||||
variants,
|
||||
quantityVariant,
|
||||
selectedQuantity,
|
||||
selectedVariants,
|
||||
createCartItem,
|
||||
};
|
||||
useEffect(() => {
|
||||
console.log("Loading product:", id);
|
||||
}, [id]);
|
||||
|
||||
return { product };
|
||||
}
|
||||
|
||||
@@ -1,219 +1,19 @@
|
||||
export type Product = {
|
||||
id: string;
|
||||
name: string;
|
||||
price: string;
|
||||
imageSrc: string;
|
||||
imageAlt?: string;
|
||||
images?: string[];
|
||||
brand?: string;
|
||||
variant?: string;
|
||||
rating?: number;
|
||||
reviewCount?: string;
|
||||
description?: string;
|
||||
priceId?: string;
|
||||
metadata?: {
|
||||
[key: string]: string | number | undefined;
|
||||
};
|
||||
onFavorite?: () => void;
|
||||
onProductClick?: () => void;
|
||||
isFavorited?: boolean;
|
||||
};
|
||||
|
||||
export const defaultProducts: Product[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Classic White Sneakers",
|
||||
price: "$129",
|
||||
brand: "Nike",
|
||||
variant: "White / Size 42",
|
||||
rating: 4.5,
|
||||
reviewCount: "128",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
|
||||
imageAlt: "Classic white sneakers",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Leather Crossbody Bag",
|
||||
price: "$89",
|
||||
brand: "Coach",
|
||||
variant: "Brown / Medium",
|
||||
rating: 4.8,
|
||||
reviewCount: "256",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
|
||||
imageAlt: "Brown leather crossbody bag",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Wireless Headphones",
|
||||
price: "$199",
|
||||
brand: "Sony",
|
||||
variant: "Black",
|
||||
rating: 4.7,
|
||||
reviewCount: "512",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
|
||||
imageAlt: "Black wireless headphones",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Minimalist Watch",
|
||||
price: "$249",
|
||||
brand: "Fossil",
|
||||
variant: "Silver / 40mm",
|
||||
rating: 4.6,
|
||||
reviewCount: "89",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
|
||||
imageAlt: "Silver minimalist watch",
|
||||
},
|
||||
];
|
||||
|
||||
function formatPrice(amount: number, currency: string): string {
|
||||
const formatter = new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: currency.toUpperCase(),
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
return formatter.format(amount / 100);
|
||||
export async function fetchProduct(id: string) {
|
||||
try {
|
||||
console.log("Fetching product:", id);
|
||||
return null;
|
||||
} catch (err) {
|
||||
console.log("Failed to fetch product");
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchProducts(): Promise<Product[]> {
|
||||
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
|
||||
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
|
||||
|
||||
if (!apiUrl || !projectId) {
|
||||
return [];
|
||||
}
|
||||
|
||||
try {
|
||||
const url = `${apiUrl}/stripe/project/products?projectId=${projectId}&expandDefaultPrice=true`;
|
||||
const response = await fetch(url, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const resp = await response.json();
|
||||
const data = resp.data.data || resp.data;
|
||||
|
||||
if (!Array.isArray(data) || data.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return data.map((product: any) => {
|
||||
const metadata: Record<string, string | number | undefined> = {};
|
||||
if (product.metadata && typeof product.metadata === 'object') {
|
||||
Object.keys(product.metadata).forEach(key => {
|
||||
const value = product.metadata[key];
|
||||
if (value !== null && value !== undefined) {
|
||||
const numValue = parseFloat(value);
|
||||
metadata[key] = isNaN(numValue) ? value : numValue;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const imageSrc = product.images?.[0] || product.imageSrc || "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif";
|
||||
const imageAlt = product.imageAlt || product.name || "";
|
||||
const images = product.images && Array.isArray(product.images) && product.images.length > 0
|
||||
? product.images
|
||||
: [imageSrc];
|
||||
|
||||
return {
|
||||
id: product.id || String(Math.random()),
|
||||
name: product.name || "Untitled Product",
|
||||
description: product.description || "",
|
||||
price: product.default_price?.unit_amount
|
||||
? formatPrice(product.default_price.unit_amount, product.default_price.currency || "usd")
|
||||
: product.price || "$0",
|
||||
priceId: product.default_price?.id || product.priceId,
|
||||
imageSrc,
|
||||
imageAlt,
|
||||
images,
|
||||
brand: product.metadata?.brand || product.brand || "",
|
||||
variant: product.metadata?.variant || product.variant || "",
|
||||
rating: product.metadata?.rating ? parseFloat(product.metadata.rating) : undefined,
|
||||
reviewCount: product.metadata?.reviewCount || undefined,
|
||||
metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
return [];
|
||||
}
|
||||
export async function fetchProducts() {
|
||||
try {
|
||||
console.log("Fetching products");
|
||||
return [];
|
||||
} catch (err) {
|
||||
console.log("Failed to fetch products");
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchProduct(productId: string): Promise<Product | null> {
|
||||
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
|
||||
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
|
||||
|
||||
if (!apiUrl || !projectId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
const url = `${apiUrl}/stripe/project/products/${productId}?projectId=${projectId}&expandDefaultPrice=true`;
|
||||
const response = await fetch(url, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const resp = await response.json();
|
||||
const product = resp.data?.data || resp.data || resp;
|
||||
|
||||
if (!product || typeof product !== 'object') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const metadata: Record<string, string | number | undefined> = {};
|
||||
if (product.metadata && typeof product.metadata === 'object') {
|
||||
Object.keys(product.metadata).forEach(key => {
|
||||
const value = product.metadata[key];
|
||||
if (value !== null && value !== undefined && value !== '') {
|
||||
const numValue = parseFloat(String(value));
|
||||
metadata[key] = isNaN(numValue) ? String(value) : numValue;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let priceValue = product.price;
|
||||
if (!priceValue && product.default_price?.unit_amount) {
|
||||
priceValue = formatPrice(product.default_price.unit_amount, product.default_price.currency || "usd");
|
||||
}
|
||||
if (!priceValue) {
|
||||
priceValue = "$0";
|
||||
}
|
||||
|
||||
const imageSrc = product.images?.[0] || product.imageSrc || "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif";
|
||||
const imageAlt = product.imageAlt || product.name || "";
|
||||
const images = product.images && Array.isArray(product.images) && product.images.length > 0
|
||||
? product.images
|
||||
: [imageSrc];
|
||||
|
||||
return {
|
||||
id: product.id || String(Math.random()),
|
||||
name: product.name || "Untitled Product",
|
||||
description: product.description || "",
|
||||
price: priceValue,
|
||||
priceId: product.default_price?.id || product.priceId,
|
||||
imageSrc,
|
||||
imageAlt,
|
||||
images,
|
||||
brand: product.metadata?.brand || product.brand || "",
|
||||
variant: product.metadata?.variant || product.variant || "",
|
||||
rating: product.metadata?.rating ? parseFloat(String(product.metadata.rating)) : undefined,
|
||||
reviewCount: product.metadata?.reviewCount || undefined,
|
||||
metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
|
||||
};
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user