mstfyldz
5ac5988a3a
Ekip kararıyla kırmızı/zinc "v2" tasarımı artık ana sayfa (/[locale]). Eski brutalist page.tsx ve contact-form.tsx, önceki "classical" geçişte kurulan aynı yedekleme deseniyle *.brutalist-backup.tsx.txt olarak saklandı — kod olarak derlenmiyor, sadece referans. Ayrı /v2 route'u kaldırıldı (içerik ana sayfaya taşındığı için artık yinelenen kopya). İletişim formu (contact-form.tsx) v2 geçişinde unutulmuş turuncu renklerden kırmızıya (#E61919) güncellendi — sayfanın geri kalanıyla tutarlı hale geldi.
104 lines
4.4 KiB
TypeScript
104 lines
4.4 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import { CheckCircle2 } from 'lucide-react'
|
||
|
||
type FormState = 'idle' | 'loading' | 'success' | 'error'
|
||
|
||
const ACCENT = '#E61919'
|
||
const ACCENT_DARK = '#B8140F'
|
||
const ACCENT_SOFT = '#FDEEEC'
|
||
|
||
export default function ContactForm() {
|
||
const [state, setState] = useState<FormState>('idle')
|
||
const [form, setForm] = useState({ name: '', org: '', email: '', phone: '', _hp: '' })
|
||
|
||
const set = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) =>
|
||
setForm(p => ({ ...p, [k]: e.target.value }))
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
if (form._hp) return
|
||
setState('loading')
|
||
try {
|
||
const res = await fetch('/api/contact', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ name: form.name, email: form.email, barNo: form.org, message: form.phone }),
|
||
})
|
||
setState(res.ok ? 'success' : 'error')
|
||
} catch {
|
||
setState('error')
|
||
}
|
||
}
|
||
|
||
if (state === 'success') {
|
||
return (
|
||
<div className="rounded-3xl border border-zinc-200/70 p-10 text-center" style={{ background: ACCENT_SOFT }}>
|
||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full text-white" style={{ background: ACCENT }}>
|
||
<CheckCircle2 size={22} strokeWidth={2.5} />
|
||
</div>
|
||
<h3 className="text-xl font-extrabold tracking-tight text-zinc-950">Talebiniz alındı!</h3>
|
||
<p className="mt-2 text-sm text-zinc-500">Kurucu ekipten kısa süre içinde size dönüş yapılacak.</p>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const inputClass = 'w-full min-h-[46px] rounded-xl border-[1.5px] border-zinc-200 bg-white px-4 py-2.5 text-sm text-zinc-900 outline-none transition-colors focus:border-[var(--accent)]'
|
||
|
||
return (
|
||
<form
|
||
onSubmit={handleSubmit}
|
||
className="grid grid-cols-1 gap-4 rounded-3xl border border-zinc-200/70 bg-white p-8 shadow-[0_20px_60px_-30px_rgba(24,24,27,0.2)] sm:grid-cols-2"
|
||
style={{ ['--accent' as string]: ACCENT }}
|
||
noValidate
|
||
>
|
||
<div aria-hidden="true" className="hidden">
|
||
<input type="text" name="_hp" value={form._hp} onChange={set('_hp')} autoComplete="off" tabIndex={-1} />
|
||
</div>
|
||
|
||
<div className="sm:col-span-1">
|
||
<label className="mb-1.5 block text-[13px] font-semibold text-zinc-900" htmlFor="af_name">
|
||
Ad Soyad <span style={{ color: ACCENT }}>*</span>
|
||
</label>
|
||
<input id="af_name" type="text" required placeholder="Av. Ayşe Yılmaz" value={form.name} onChange={set('name')} className={inputClass} />
|
||
</div>
|
||
|
||
<div>
|
||
<label className="mb-1.5 block text-[13px] font-semibold text-zinc-900" htmlFor="af_org">Büro / Kurum</label>
|
||
<input id="af_org" type="text" placeholder="Yılmaz Hukuk Bürosu" value={form.org} onChange={set('org')} className={inputClass} />
|
||
</div>
|
||
|
||
<div>
|
||
<label className="mb-1.5 block text-[13px] font-semibold text-zinc-900" htmlFor="af_email">
|
||
E-posta <span style={{ color: ACCENT }}>*</span>
|
||
</label>
|
||
<input id="af_email" type="email" required placeholder="ayse@buro.com" value={form.email} onChange={set('email')} className={inputClass} />
|
||
</div>
|
||
|
||
<div>
|
||
<label className="mb-1.5 block text-[13px] font-semibold text-zinc-900" htmlFor="af_phone">Telefon</label>
|
||
<input id="af_phone" type="tel" placeholder="0532 000 00 00" value={form.phone} onChange={set('phone')} className={inputClass} />
|
||
</div>
|
||
|
||
{state === 'error' && (
|
||
<div className="text-[13px] text-red-600 sm:col-span-2">
|
||
Bir hata oluştu. Lütfen tekrar deneyin veya{' '}
|
||
<a href="mailto:info@ayris.tech" className="underline">info@ayris.tech</a> adresine yazın.
|
||
</div>
|
||
)}
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={state === 'loading'}
|
||
className="mt-1 flex items-center justify-center gap-2 rounded-full py-3.5 text-[15px] font-bold text-white transition-colors disabled:cursor-not-allowed disabled:opacity-70 sm:col-span-2"
|
||
style={{ background: ACCENT }}
|
||
onMouseEnter={e => { if (state !== 'loading') (e.currentTarget as HTMLElement).style.background = ACCENT_DARK }}
|
||
onMouseLeave={e => { if (state !== 'loading') (e.currentTarget as HTMLElement).style.background = ACCENT }}
|
||
>
|
||
{state === 'loading' ? 'Gönderiliyor…' : 'Demo Talep Et →'}
|
||
</button>
|
||
</form>
|
||
)
|
||
}
|