108 lines
5.4 KiB
TypeScript
108 lines
5.4 KiB
TypeScript
"use client";
|
||
|
||
import * as React from "react";
|
||
import { motion } from "framer-motion";
|
||
import { mockData } from "@/lib/mock-data";
|
||
import { useTranslations } from "next-intl";
|
||
import { toast } from "sonner";
|
||
import { Loader2 } from "lucide-react";
|
||
|
||
export function ContactContent() {
|
||
const t = useTranslations("contact");
|
||
const [isLoading, setIsLoading] = React.useState(false);
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setIsLoading(true);
|
||
|
||
// Simulate network request
|
||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||
|
||
setIsLoading(false);
|
||
toast.success("Talebiniz başarıyla alındı!", {
|
||
description: "En kısa sürede size dönüş yapacağız.",
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div className="container mx-auto px-4 py-24 relative overflow-hidden">
|
||
{/* Decorative background blob */}
|
||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-slate-200/50 dark:bg-slate-800/30 rounded-full blur-[100px] -z-10 opacity-50" />
|
||
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: -20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
className="text-5xl font-black text-slate-900 dark:text-white mb-16 text-center tracking-tight"
|
||
>
|
||
{t("title")}
|
||
</motion.h1>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
|
||
{/* Contact Info */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -30 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-3xl p-10 rounded-[2rem] border border-white dark:border-slate-800 shadow-[0_8px_30px_rgb(0,0,0,0.04)]"
|
||
>
|
||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-10">{t("title")}</h2>
|
||
|
||
<div className="space-y-8">
|
||
<div className="group">
|
||
<p className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{t("email")}</p>
|
||
<p className="text-xl font-medium text-slate-800 dark:text-slate-200">{mockData.contact.email}</p>
|
||
</div>
|
||
<div className="group">
|
||
<p className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{t("phone")}</p>
|
||
<p className="text-xl font-medium text-slate-800 dark:text-slate-200">{mockData.contact.phone}</p>
|
||
</div>
|
||
<div className="group">
|
||
<p className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{t("address")}</p>
|
||
<p className="text-xl font-medium text-slate-800 dark:text-slate-200 leading-relaxed max-w-xs">{mockData.contact.address}</p>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Contact Form */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 30 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.4 }}
|
||
className="bg-white dark:bg-slate-900 p-10 rounded-[2rem] shadow-[0_20px_50px_rgb(0,0,0,0.08)] border border-slate-100 dark:border-slate-800"
|
||
>
|
||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-10">{t("reservationReq")}</h2>
|
||
|
||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||
<div>
|
||
<label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">{t("email")}</label>
|
||
<input
|
||
type="email"
|
||
required
|
||
className="w-full border-none bg-slate-50 dark:bg-slate-950 rounded-xl px-5 py-4 focus:ring-2 focus:ring-slate-900 dark:focus:ring-slate-100 outline-none transition-all hover:bg-slate-100 dark:hover:bg-slate-800 placeholder:text-slate-400 dark:placeholder:text-slate-600 text-slate-900 dark:text-white"
|
||
placeholder="ornek@email.com"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">{t("reservationNo")} <span className="text-slate-400 dark:text-slate-500 font-normal">(Opsiyonel)</span></label>
|
||
<input
|
||
type="text"
|
||
className="w-full border-none bg-slate-50 dark:bg-slate-950 rounded-xl px-5 py-4 focus:ring-2 focus:ring-slate-900 dark:focus:ring-slate-100 outline-none transition-all hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-900 dark:text-white"
|
||
/>
|
||
</div>
|
||
<div className="pt-4">
|
||
<button
|
||
type="submit"
|
||
disabled={isLoading}
|
||
className="w-full flex justify-center items-center gap-2 bg-slate-900 dark:bg-white text-white dark:text-slate-900 hover:bg-slate-800 dark:hover:bg-slate-100 px-8 py-5 rounded-xl font-bold text-lg tracking-wide transition-all hover:shadow-xl hover:-translate-y-1 active:translate-y-0 disabled:opacity-70 disabled:hover:translate-y-0 disabled:hover:shadow-none"
|
||
>
|
||
{isLoading ? <Loader2 className="w-6 h-6 animate-spin" /> : t("send")}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|