Add src/app/register/page.tsx
This commit is contained in:
234
src/app/register/page.tsx
Normal file
234
src/app/register/page.tsx
Normal file
@@ -0,0 +1,234 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import { useState } from "react";
|
||||
import { Input } from "@/components/form/Input";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: "", lastName: "", email: "", phone: "", subject: "", message: ""});
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Ana Sayfa", id: "/" },
|
||||
{ name: "Öğretmenler", id: "/teachers" },
|
||||
{ name: "Kayıt", id: "/register" },
|
||||
{ name: "Çalışma Programı", id: "schedule" },
|
||||
];
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.firstName.trim()) {
|
||||
newErrors.firstName = "Ad gereklidir";
|
||||
}
|
||||
if (!formData.lastName.trim()) {
|
||||
newErrors.lastName = "Soyadı gereklidir";
|
||||
}
|
||||
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 giriniz";
|
||||
}
|
||||
if (!formData.phone.trim()) {
|
||||
newErrors.phone = "Telefon numarası gereklidir";
|
||||
} else if (!/^[0-9+\-\s()]+$/.test(formData.phone)) {
|
||||
newErrors.phone = "Geçerli bir telefon numarası giriniz";
|
||||
}
|
||||
if (!formData.subject.trim()) {
|
||||
newErrors.subject = "Konu gereklidir";
|
||||
}
|
||||
if (!formData.message.trim()) {
|
||||
newErrors.message = "Mesaj gereklidir";
|
||||
} else if (formData.message.trim().length < 10) {
|
||||
newErrors.message = "Mesaj en az 10 karakter olmalıdır";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
if (errors[field]) {
|
||||
setErrors((prev) => ({
|
||||
...prev,
|
||||
[field]: ""}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (validateForm()) {
|
||||
console.log("Form gönderildi:", formData);
|
||||
setSubmitted(true);
|
||||
setFormData({
|
||||
firstName: "", lastName: "", email: "", phone: "", subject: "", message: ""});
|
||||
setTimeout(() => setSubmitted(false), 5000);
|
||||
}
|
||||
};
|
||||
|
||||
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="register" data-section="register" className="min-h-screen py-20 px-4">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl md:text-5xl font-light mb-4">Öğrenci Kaydı</h1>
|
||||
<p className="text-lg text-foreground/70">
|
||||
Platformumuza katılın ve eğitim yolculuğunuza başlayın
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{submitted && (
|
||||
<div className="mb-6 p-4 bg-green-500/20 border border-green-500 rounded-lg">
|
||||
<p className="text-green-700">Başarıyla gönderildi! Yakında sizinle iletişime geçeceğiz.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="space-y-6 bg-card rounded-lg p-8 border border-foreground/10"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Ad *</label>
|
||||
<Input
|
||||
value={formData.firstName}
|
||||
onChange={(value) => handleChange("firstName", value)}
|
||||
type="text"
|
||||
placeholder="Adınız"
|
||||
required
|
||||
className={errors.firstName ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.firstName && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.firstName}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Soyadı *</label>
|
||||
<Input
|
||||
value={formData.lastName}
|
||||
onChange={(value) => handleChange("lastName", value)}
|
||||
type="text"
|
||||
placeholder="Soyadınız"
|
||||
required
|
||||
className={errors.lastName ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.lastName && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.lastName}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">E-posta *</label>
|
||||
<Input
|
||||
value={formData.email}
|
||||
onChange={(value) => handleChange("email", value)}
|
||||
type="email"
|
||||
placeholder="örnek@email.com"
|
||||
required
|
||||
className={errors.email ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Telefon *</label>
|
||||
<Input
|
||||
value={formData.phone}
|
||||
onChange={(value) => handleChange("phone", value)}
|
||||
type="tel"
|
||||
placeholder="+90 555 123 4567"
|
||||
required
|
||||
className={errors.phone ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.phone && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.phone}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Konu *</label>
|
||||
<Input
|
||||
value={formData.subject}
|
||||
onChange={(value) => handleChange("subject", value)}
|
||||
type="text"
|
||||
placeholder="Kayıt nedeni"
|
||||
required
|
||||
className={errors.subject ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.subject && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.subject}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Mesaj *</label>
|
||||
<textarea
|
||||
value={formData.message}
|
||||
onChange={(e) => handleChange("message", e.target.value)}
|
||||
placeholder="Bize hakkınızda biraz bilgi verin"
|
||||
rows={6}
|
||||
required
|
||||
className={`w-full px-4 py-3 rounded-md bg-secondary-button border border-foreground/10 text-foreground placeholder:text-foreground/75 focus:outline-none focus:ring-2 focus:ring-primary-cta transition-all ${
|
||||
errors.message ? "border-red-500" : ""
|
||||
}`}
|
||||
/>
|
||||
{errors.message && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-3 bg-primary-cta text-white rounded-md font-medium hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Kaydı Tamamla
|
||||
</button>
|
||||
</form>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user