feat: özellikleri gerçek ürün kapsamına göre genişlet, güven ve SSS ekle
Özellikler bölümü rapordaki gerçek modüllere göre yeniden yapılandırıldı (dosya analizi, otomasyon, interaktif AI, içtihat arama, UYAP entegrasyonu). Güven bölümüne mesleki sorumluluk maddesi, itiraz giderme için yeni bir SSS bölümü ve iletişim formuna sonraki adım açıklaması eklendi. Contact form ve favicon, sitenin brutalist tema sistemiyle tutarlı hale getirildi.
This commit is contained in:
mstfyldz
+37
-41
@@ -5,16 +5,13 @@ import { useState } from 'react'
|
||||
type FormState = 'idle' | 'loading' | 'success' | 'error'
|
||||
|
||||
const T = {
|
||||
bg: '#f3f2f2',
|
||||
surface: '#eae9e9',
|
||||
text: '#201f1d',
|
||||
divider: 'rgba(32,31,29,0.16)',
|
||||
accent: '#b68235',
|
||||
accentDark: '#7d5411',
|
||||
fontHead: '"Sora", sans-serif',
|
||||
fontBody: '"Inter", sans-serif',
|
||||
radiusMd: '4px',
|
||||
radiusLg: '7px',
|
||||
bg: '#F4F4F0',
|
||||
ink: '#0A0A0A',
|
||||
inkSoft: 'rgba(10,10,10,0.6)',
|
||||
divider: 'rgba(10,10,10,0.16)',
|
||||
red: '#E61919',
|
||||
fontHead: '"Archivo", sans-serif',
|
||||
fontMono: '"JetBrains Mono", monospace',
|
||||
}
|
||||
|
||||
export default function ContactForm() {
|
||||
@@ -43,9 +40,10 @@ export default function ContactForm() {
|
||||
/* Success */
|
||||
if (state === 'success') {
|
||||
return (
|
||||
<div style={{ border: `1px solid ${T.divider}`, borderRadius: T.radiusLg, padding: '40px', textAlign: 'center', background: T.surface }}>
|
||||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: '22px', margin: '0 0 8px' }}>Talebiniz alındı.</h3>
|
||||
<p style={{ fontSize: '14.5px', margin: 0, color: 'rgba(32,31,29,0.78)', fontFamily: T.fontBody }}>
|
||||
<div style={{ border: `2px solid ${T.ink}`, padding: '36px', textAlign: 'center', background: '#fff' }}>
|
||||
<span style={{ display: 'inline-block', fontSize: '10.5px', letterSpacing: '0.12em', color: T.red, fontFamily: T.fontMono, fontWeight: 700, marginBottom: '10px' }}>STATUS: RECEIVED</span>
|
||||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: '20px', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '-0.01em' }}>Talebiniz alındı.</h3>
|
||||
<p style={{ fontSize: '13px', margin: 0, color: T.inkSoft, fontFamily: T.fontMono }}>
|
||||
Kurucu ekipten kısa süre içinde size dönüş yapılacak.
|
||||
</p>
|
||||
</div>
|
||||
@@ -53,17 +51,17 @@ export default function ContactForm() {
|
||||
}
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
width: '100%', minHeight: '36px', padding: '6px 10px',
|
||||
fontFamily: T.fontBody, fontSize: '14px', color: T.text,
|
||||
background: 'transparent',
|
||||
border: `1px solid ${T.divider}`, borderRadius: T.radiusMd,
|
||||
transition: 'border-color .15s',
|
||||
width: '100%', minHeight: '40px', padding: '8px 12px',
|
||||
fontFamily: T.fontMono, fontSize: '13.5px', color: T.ink,
|
||||
background: '#fff',
|
||||
border: `2px solid ${T.divider}`,
|
||||
transition: 'border-color .12s',
|
||||
boxSizing: 'border-box',
|
||||
}
|
||||
|
||||
const labelStyle: React.CSSProperties = {
|
||||
display: 'block', fontSize: '12px', marginBottom: '5px',
|
||||
color: 'rgba(32,31,29,0.7)', fontFamily: T.fontBody,
|
||||
display: 'block', fontSize: '10.5px', letterSpacing: '0.1em', textTransform: 'uppercase',
|
||||
marginBottom: '6px', color: T.inkSoft, fontFamily: T.fontMono, fontWeight: 600,
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -73,10 +71,9 @@ export default function ContactForm() {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))',
|
||||
gap: '16px',
|
||||
border: `1px solid ${T.divider}`,
|
||||
borderRadius: T.radiusLg,
|
||||
border: `2px solid ${T.ink}`,
|
||||
padding: '28px',
|
||||
background: T.bg,
|
||||
background: '#fff',
|
||||
}}
|
||||
noValidate
|
||||
>
|
||||
@@ -86,13 +83,13 @@ export default function ContactForm() {
|
||||
</div>
|
||||
|
||||
<div style={{ gridColumn: 'span 1' }}>
|
||||
<label style={labelStyle} htmlFor="af_name">Ad Soyad <span style={{ color: T.accent }}>*</span></label>
|
||||
<label style={labelStyle} htmlFor="af_name">Ad Soyad <span style={{ color: T.red }}>*</span></label>
|
||||
<input
|
||||
id="af_name" type="text" required
|
||||
placeholder="Av. Ayşe Yılmaz"
|
||||
value={form.name} onChange={set('name')}
|
||||
style={inputStyle}
|
||||
onFocus={e => (e.target.style.borderColor = T.accent)}
|
||||
onFocus={e => (e.target.style.borderColor = T.red)}
|
||||
onBlur={e => (e.target.style.borderColor = T.divider)}
|
||||
/>
|
||||
</div>
|
||||
@@ -104,19 +101,19 @@ export default function ContactForm() {
|
||||
placeholder="Yılmaz Hukuk Bürosu"
|
||||
value={form.org} onChange={set('org')}
|
||||
style={inputStyle}
|
||||
onFocus={e => (e.target.style.borderColor = T.accent)}
|
||||
onFocus={e => (e.target.style.borderColor = T.red)}
|
||||
onBlur={e => (e.target.style.borderColor = T.divider)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={labelStyle} htmlFor="af_email">E-posta <span style={{ color: T.accent }}>*</span></label>
|
||||
<label style={labelStyle} htmlFor="af_email">E-posta <span style={{ color: T.red }}>*</span></label>
|
||||
<input
|
||||
id="af_email" type="email" required
|
||||
placeholder="ayse@buro.com"
|
||||
value={form.email} onChange={set('email')}
|
||||
style={inputStyle}
|
||||
onFocus={e => (e.target.style.borderColor = T.accent)}
|
||||
onFocus={e => (e.target.style.borderColor = T.red)}
|
||||
onBlur={e => (e.target.style.borderColor = T.divider)}
|
||||
/>
|
||||
</div>
|
||||
@@ -128,15 +125,15 @@ export default function ContactForm() {
|
||||
placeholder="0532 000 00 00"
|
||||
value={form.phone} onChange={set('phone')}
|
||||
style={inputStyle}
|
||||
onFocus={e => (e.target.style.borderColor = T.accent)}
|
||||
onFocus={e => (e.target.style.borderColor = T.red)}
|
||||
onBlur={e => (e.target.style.borderColor = T.divider)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{state === 'error' && (
|
||||
<div style={{ gridColumn: '1 / -1', fontSize: '13px', color: '#c0392b', fontFamily: T.fontBody }}>
|
||||
<div style={{ gridColumn: '1 / -1', fontSize: '12.5px', color: T.red, fontFamily: T.fontMono }}>
|
||||
Bir hata oluştu. Lütfen tekrar deneyin veya{' '}
|
||||
<a href="mailto:info@ayris.tech" style={{ color: T.accent }}>info@ayris.tech</a> adresine yazın.
|
||||
<a href="mailto:info@ayris.tech" style={{ color: T.red }}>info@ayris.tech</a> adresine yazın.
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -149,20 +146,19 @@ export default function ContactForm() {
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px',
|
||||
cursor: state === 'loading' ? 'not-allowed' : 'pointer',
|
||||
textDecoration: 'none',
|
||||
fontFamily: T.fontHead, fontWeight: 600, fontSize: '15px', lineHeight: 1.2,
|
||||
color: T.accent,
|
||||
background: 'transparent',
|
||||
border: `1px solid ${T.accent}`,
|
||||
padding: '12px',
|
||||
borderRadius: T.radiusMd,
|
||||
transition: 'background .15s',
|
||||
fontFamily: T.fontMono, fontWeight: 700, fontSize: '13px', letterSpacing: '0.06em', textTransform: 'uppercase',
|
||||
color: '#fff',
|
||||
background: T.ink,
|
||||
border: `2px solid ${T.ink}`,
|
||||
padding: '14px',
|
||||
transition: 'background .12s',
|
||||
opacity: state === 'loading' ? 0.6 : 1,
|
||||
marginTop: '4px',
|
||||
}}
|
||||
onMouseEnter={e => { if (state !== 'loading') (e.currentTarget as HTMLElement).style.background = 'rgba(182,130,53,0.10)' }}
|
||||
onMouseLeave={e => { if (state !== 'loading') (e.currentTarget as HTMLElement).style.background = 'transparent' }}
|
||||
onMouseEnter={e => { if (state !== 'loading') { (e.currentTarget as HTMLElement).style.background = T.red; (e.currentTarget as HTMLElement).style.borderColor = T.red } }}
|
||||
onMouseLeave={e => { if (state !== 'loading') { (e.currentTarget as HTMLElement).style.background = T.ink; (e.currentTarget as HTMLElement).style.borderColor = T.ink } }}
|
||||
>
|
||||
{state === 'loading' ? 'Gönderiliyor…' : 'Demo Talep Et'}
|
||||
{state === 'loading' ? 'GÖNDERİLİYOR…' : 'DEMO TALEP ET'}
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user