142 lines
8.2 KiB
TypeScript
142 lines
8.2 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import { useState } from "react";
|
||
import Header from "@/components/Header";
|
||
import Footer from "@/components/Footer";
|
||
import type { Locale } from "@/i18n-config";
|
||
|
||
const easeOutExpo = [0.16, 1, 0.3, 1] as [number, number, number, number];
|
||
|
||
const fadeUp = {
|
||
hidden: { opacity: 0, y: 30 },
|
||
show: { opacity: 1, y: 0, transition: { duration: 0.8, ease: easeOutExpo } },
|
||
};
|
||
|
||
const stagger = {
|
||
hidden: {},
|
||
show: { transition: { staggerChildren: 0.1 } },
|
||
};
|
||
|
||
export default function ContactClient({ lang, dict }: { lang: Locale; dict: any }) {
|
||
const [formState, setFormState] = useState({
|
||
name: "",
|
||
email: "",
|
||
company: "",
|
||
service: "AI Solutions",
|
||
message: "",
|
||
});
|
||
const [submitted, setSubmitted] = useState(false);
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setSubmitted(true);
|
||
};
|
||
|
||
return (
|
||
<div className="bg-[#F4F0E8] text-[#0A0A0A] font-body min-h-screen">
|
||
<Header lang={lang} dict={dict.nav} />
|
||
|
||
<main className="pt-32 pb-24 px-6 min-h-screen max-w-4xl mx-auto">
|
||
|
||
<div className="border-b border-[#C8C2B8] pb-12 mb-16">
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-3 h-3 bg-[#FFE600]" />
|
||
<span className="font-mono text-[10px] tracking-[0.3em] uppercase text-[#A0998E]">{dict.contact.badge}</span>
|
||
</div>
|
||
<h1 className="font-display font-black text-5xl sm:text-6xl lg:text-8xl uppercase leading-[0.85] tracking-tight">
|
||
{dict.contact.title}
|
||
</h1>
|
||
</div>
|
||
|
||
{/* Contact Grid */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
||
|
||
{/* Info Side */}
|
||
<div className="lg:col-span-5 space-y-0">
|
||
<div className="border-b border-[#C8C2B8] pb-8 mb-8">
|
||
<div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-3">{dict.contact.infoBase}</div>
|
||
<div className="font-display font-black text-base text-[#0A0A0A]">{dict.contact.infoBaseText}</div>
|
||
<div className="font-mono text-[11px] text-[#A0998E] mt-1">{dict.contact.infoBaseSub}</div>
|
||
</div>
|
||
<div className="border-b border-[#C8C2B8] pb-8 mb-8">
|
||
<div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-3">{dict.contact.infoDirect}</div>
|
||
<a href="mailto:hello@ayristech.com" className="font-display font-black text-base text-[#0A0A0A] hover:text-[#FF4500] transition-colors block">hello@ayristech.com</a>
|
||
<a href="tel:+905320000000" className="font-mono text-[12px] text-[#A0998E] hover:text-[#0A0A0A] transition-colors mt-1 block">+90 (532) 000 00 00</a>
|
||
</div>
|
||
<div className="pb-8">
|
||
<div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-3">{dict.contact.infoBlueprint}</div>
|
||
<p className="text-[#7A7470] text-[13px] leading-relaxed">{dict.contact.infoBlueprintText}</p>
|
||
</div>
|
||
<div className="bg-[#FFE600] border-2 border-[#0A0A0A] p-6">
|
||
<p className="font-display font-black text-sm uppercase text-[#0A0A0A]">
|
||
{lang === "tr" ? "12 saat içinde yanıt alırsınız." : "Response within 12 operational hours."}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Form Side */}
|
||
<div className="lg:col-span-7">
|
||
{submitted ? (
|
||
<motion.div
|
||
className="border-2 border-[#0A0A0A] bg-[#FFE600] p-8 sm:p-12 text-center h-full flex flex-col justify-center items-center"
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.6 }}
|
||
>
|
||
<div className="w-12 h-12 border-2 border-[#0A0A0A] bg-[#0A0A0A] flex items-center justify-center mb-6">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFE600" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
|
||
</div>
|
||
<h3 className="font-display font-black text-2xl uppercase tracking-tight mb-2">{dict.contact.submittedTitle}</h3>
|
||
<p className="text-[#3A3A3A] text-[13px] max-w-sm">{dict.contact.submittedText}</p>
|
||
</motion.div>
|
||
) : (
|
||
<form onSubmit={handleSubmit} className="space-y-6">
|
||
<div>
|
||
<label className="block font-mono text-[9px] font-bold uppercase tracking-[0.3em] text-[#A0998E] mb-2">{dict.contact.formName}</label>
|
||
<input type="text" required value={formState.name} onChange={e => setFormState({ ...formState, name: e.target.value })} placeholder={dict.contact.formNamePlaceholder}
|
||
className="w-full bg-transparent border-b border-[#C8C2B8] focus:border-[#0A0A0A] outline-none py-3 text-sm text-[#0A0A0A] placeholder-[#C8C2B8] transition-colors" />
|
||
</div>
|
||
<div>
|
||
<label className="block font-mono text-[9px] font-bold uppercase tracking-[0.3em] text-[#A0998E] mb-2">{dict.contact.formEmail}</label>
|
||
<input type="email" required value={formState.email} onChange={e => setFormState({ ...formState, email: e.target.value })} placeholder={dict.contact.formEmailPlaceholder}
|
||
className="w-full bg-transparent border-b border-[#C8C2B8] focus:border-[#0A0A0A] outline-none py-3 text-sm text-[#0A0A0A] placeholder-[#C8C2B8] transition-colors" />
|
||
</div>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||
<div>
|
||
<label className="block font-mono text-[9px] font-bold uppercase tracking-[0.3em] text-[#A0998E] mb-2">{dict.contact.formCompany}</label>
|
||
<input type="text" value={formState.company} onChange={e => setFormState({ ...formState, company: e.target.value })} placeholder={dict.contact.formCompanyPlaceholder}
|
||
className="w-full bg-transparent border-b border-[#C8C2B8] focus:border-[#0A0A0A] outline-none py-3 text-sm text-[#0A0A0A] placeholder-[#C8C2B8] transition-colors" />
|
||
</div>
|
||
<div>
|
||
<label className="block font-mono text-[9px] font-bold uppercase tracking-[0.3em] text-[#A0998E] mb-2">{dict.contact.formTrack}</label>
|
||
<select value={formState.service} onChange={e => setFormState({ ...formState, service: e.target.value })}
|
||
className="w-full bg-transparent border-b border-[#C8C2B8] focus:border-[#0A0A0A] outline-none py-3 text-sm text-[#0A0A0A] transition-colors cursor-pointer">
|
||
<option value="AI Solutions" className="bg-[#F4F0E8]">{dict.services.items.ai.title}</option>
|
||
<option value="Blockchain Dev" className="bg-[#F4F0E8]">{dict.services.items.blockchain.title}</option>
|
||
<option value="Mobile Apps" className="bg-[#F4F0E8]">{dict.services.items.mobile.title}</option>
|
||
<option value="Web Platforms" className="bg-[#F4F0E8]">{dict.services.items.web.title}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="block font-mono text-[9px] font-bold uppercase tracking-[0.3em] text-[#A0998E] mb-2">{dict.contact.formScope}</label>
|
||
<textarea rows={4} required value={formState.message} onChange={e => setFormState({ ...formState, message: e.target.value })} placeholder={dict.contact.formScopePlaceholder}
|
||
className="w-full bg-transparent border-b border-[#C8C2B8] focus:border-[#0A0A0A] outline-none py-3 text-sm text-[#0A0A0A] placeholder-[#C8C2B8] transition-colors resize-none" />
|
||
</div>
|
||
<motion.button type="submit" className="btn-brutal btn-brutal-yellow w-full py-5 font-display font-black text-[13px] tracking-widest uppercase cursor-pointer" whileTap={{ scale: 0.98 }}>
|
||
{dict.contact.formSubmit}
|
||
</motion.button>
|
||
</form>
|
||
)}
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<Footer lang={lang} dict={dict} />
|
||
</div>
|
||
);
|
||
}
|