feat: v2 tasarımını ana sayfa yap, brutalist sürümü yedekle
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.
This commit is contained in:
mstfyldz
@@ -0,0 +1,612 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useRef } from 'react'
|
||||||
|
import { motion, useInView } from 'framer-motion'
|
||||||
|
import ContactForm from '@/components/contact-form'
|
||||||
|
|
||||||
|
/* ─── Design system tokens (Industrial / Swiss Print) ─────────────────── */
|
||||||
|
const T = {
|
||||||
|
bg: '#F4F4F0',
|
||||||
|
ink: '#0A0A0A',
|
||||||
|
inkSoft: 'rgba(10,10,10,0.6)',
|
||||||
|
inkFaint: 'rgba(10,10,10,0.38)',
|
||||||
|
red: '#E61919',
|
||||||
|
divider: 'rgba(10,10,10,0.16)',
|
||||||
|
dividerHv: 'rgba(10,10,10,0.9)',
|
||||||
|
fontHead: '"Archivo", sans-serif',
|
||||||
|
fontMono: '"JetBrains Mono", monospace',
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Reveal animation ─────────────────────────────────────────────────── */
|
||||||
|
function Reveal({ children, className = '', delay = 0 }: {
|
||||||
|
children: React.ReactNode; className?: string; delay?: number
|
||||||
|
}) {
|
||||||
|
const ref = useRef<HTMLDivElement>(null)
|
||||||
|
const inView = useInView(ref, { once: true, margin: '-80px' })
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
ref={ref}
|
||||||
|
initial={{ opacity: 0, y: 16 }}
|
||||||
|
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}
|
||||||
|
transition={{ duration: 0.45, ease: 'easeOut', delay }}
|
||||||
|
className={className}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Rail nav ──────────────────────────────────────────────────────────── */
|
||||||
|
const RAIL_ITEMS = [
|
||||||
|
{ id: '02', href: '#is-akisi' },
|
||||||
|
{ id: '03', href: '#farklilasim' },
|
||||||
|
{ id: '04', href: '#ozellikler' },
|
||||||
|
{ id: '05', href: '#fiyatlandirma' },
|
||||||
|
{ id: '06', href: '#guven' },
|
||||||
|
{ id: '07', href: '#iletisim' },
|
||||||
|
]
|
||||||
|
|
||||||
|
/* ─── Component ─────────────────────────────────────────────────────────── */
|
||||||
|
export default function HomePage() {
|
||||||
|
return (
|
||||||
|
<div style={{ background: T.bg, color: T.ink, fontFamily: T.fontMono, minHeight: '100vh', position: 'relative' }}>
|
||||||
|
|
||||||
|
{/* ── Inline fonts + global rules ── */}
|
||||||
|
<style>{`
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
|
||||||
|
* { box-sizing: border-box; border-radius: 0 !important; }
|
||||||
|
body { margin: 0; }
|
||||||
|
a { color: ${T.red}; }
|
||||||
|
:focus-visible { outline: 2px solid ${T.red}; outline-offset: 2px; }
|
||||||
|
::selection { background: ${T.red}; color: #fff; }
|
||||||
|
.rail-link { text-decoration: none; writing-mode: vertical-rl; font-size: 10px; letter-spacing: 0.14em; font-family: ${T.fontMono}; font-weight: 600; }
|
||||||
|
.hr-line { height: 1px; border: 0; background: ${T.divider}; margin: 0; }
|
||||||
|
.hr-line-hv { height: 2px; border: 0; background: ${T.ink}; margin: 0; }
|
||||||
|
.doc-label { display: inline-flex; align-items: center; gap: 8px; font-family: ${T.fontMono}; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: ${T.ink}; }
|
||||||
|
.doc-label .bullet { width: 7px; height: 7px; background: ${T.red}; flex-shrink: 0; }
|
||||||
|
.btn-solid { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-family: ${T.fontMono}; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: ${T.ink}; border: 2px solid ${T.ink}; padding: 14px 22px; transition: background .12s, color .12s; }
|
||||||
|
.btn-solid:hover { background: ${T.red}; border-color: ${T.red}; }
|
||||||
|
.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-family: ${T.fontMono}; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: ${T.ink}; background: transparent; border: 2px solid ${T.ink}; padding: 14px 22px; transition: background .12s, color .12s; }
|
||||||
|
.btn-outline:hover { background: ${T.ink}; color: #fff; }
|
||||||
|
.btn-solid-lg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-family: ${T.fontMono}; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: ${T.ink}; border: 2px solid ${T.ink}; padding: 16px; width: 100%; transition: background .12s; }
|
||||||
|
.btn-solid-lg:hover { background: ${T.red}; border-color: ${T.red}; }
|
||||||
|
.nav-link { color: ${T.ink}; text-decoration: none; font-size: 12px; font-family: ${T.fontMono}; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
|
||||||
|
.nav-link:hover { color: ${T.red}; }
|
||||||
|
.grid-1px { display: grid; background: ${T.divider}; gap: 1px; }
|
||||||
|
.grid-cell { background: ${T.bg}; }
|
||||||
|
.card-kicker { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: ${T.red}; font-family: ${T.fontMono}; font-weight: 700; }
|
||||||
|
.card-title { font-family: ${T.fontHead}; font-weight: 900; font-size: 19px; line-height: 1.08; margin: 0; text-transform: uppercase; letter-spacing: -0.01em; }
|
||||||
|
.card-body { margin: 0; font-size: 13px; opacity: 0.72; line-height: 1.55; font-family: ${T.fontMono}; }
|
||||||
|
.field > label { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; color: ${T.inkSoft}; font-family: ${T.fontMono}; font-weight: 600; }
|
||||||
|
.tag-outline { display: inline-flex; align-items: center; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border: 1px solid ${T.red}; color: ${T.red}; font-family: ${T.fontMono}; font-weight: 700; }
|
||||||
|
.noise::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.025; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
|
||||||
|
@media (max-width: 900px) { .rail-fixed { display: none !important; } .hero-badges { display: none !important; } .card-grid { grid-template-columns: 1fr !important; } }
|
||||||
|
@media (max-width: 700px) { .hero-two-col { grid-template-columns: 1fr !important; } .contact-two-col { grid-template-columns: 1fr !important; } .stats-grid { grid-template-columns: repeat(2,1fr) !important; } }
|
||||||
|
`}</style>
|
||||||
|
|
||||||
|
<div className="noise" />
|
||||||
|
|
||||||
|
{/* ── Left rail ── */}
|
||||||
|
<div
|
||||||
|
className="rail-fixed"
|
||||||
|
style={{ position: 'fixed', left: '22px', top: 0, bottom: 0, width: '22px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '24px', zIndex: 20 }}
|
||||||
|
>
|
||||||
|
{RAIL_ITEMS.map(item => (
|
||||||
|
<a key={item.id} href={item.href} className="rail-link" style={{ color: T.inkFaint }}
|
||||||
|
onMouseEnter={e => { e.currentTarget.style.color = T.red }}
|
||||||
|
onMouseLeave={e => { e.currentTarget.style.color = T.inkFaint }}
|
||||||
|
>
|
||||||
|
{item.id}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ NAV ═════════════════════════════ */}
|
||||||
|
<nav style={{
|
||||||
|
position: 'sticky', top: 0, zIndex: 30,
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||||
|
flexWrap: 'wrap', gap: '16px',
|
||||||
|
padding: '18px clamp(20px,6vw,64px)',
|
||||||
|
borderBottom: `2px solid ${T.ink}`,
|
||||||
|
background: T.bg,
|
||||||
|
}}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||||
|
<img src="/logo.png" alt="AyrisLegal" style={{ height: '22px', width: 'auto', objectFit: 'contain' }} />
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '28px', flexWrap: 'wrap' }}>
|
||||||
|
<a href="#farklilasim" className="nav-link">Farklılaşım</a>
|
||||||
|
<a href="#ozellikler" className="nav-link">Özellikler</a>
|
||||||
|
<a href="#fiyatlandirma" className="nav-link">Fiyatlandırma</a>
|
||||||
|
<a href="#iletisim" className="btn-solid">Demo Talep Et</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ HERO ════════════════════════════ */}
|
||||||
|
<section style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px) clamp(48px,7vw,72px)', position: 'relative' }}>
|
||||||
|
<Reveal>
|
||||||
|
<span className="doc-label" style={{ marginBottom: '28px' }}>
|
||||||
|
<span className="bullet" />
|
||||||
|
DOC-01 // DEĞER ÖNERMESİ
|
||||||
|
</span>
|
||||||
|
</Reveal>
|
||||||
|
<div className="hero-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,7fr) minmax(0,5fr)', gap: '48px', alignItems: 'start' }}>
|
||||||
|
<div>
|
||||||
|
<Reveal delay={0.04}>
|
||||||
|
<h1 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(42px,7vw,88px)', lineHeight: 0.92, letterSpacing: '-0.03em', textTransform: 'uppercase', margin: 0 }}>
|
||||||
|
<span style={{ display: 'block' }}>DOSYANIZI OKUR,</span>
|
||||||
|
<span style={{ display: 'block' }}>SİZİNLE <span style={{ color: T.red }}>TARTIŞIR.</span></span>
|
||||||
|
</h1>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.08}>
|
||||||
|
<p style={{ fontSize: 'clamp(15px,1.4vw,17px)', lineHeight: 1.7, maxWidth: '54ch', margin: '28px 0 0', color: T.inkSoft }}>
|
||||||
|
AyrisLegal, yüklediğiniz dava dosyasını analiz eden, içtihat bulan ve dilekçe taslağı çıkaran bir yapay zeka çalışma ortağı — pasif bir arama motoru değil, dosya üzerinde sizinle muhakeme eden bir meslektaş.
|
||||||
|
</p>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.12}>
|
||||||
|
<div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', marginTop: '32px', alignItems: 'center' }}>
|
||||||
|
<a href="#iletisim" className="btn-solid" style={{ fontSize: '13.5px', padding: '15px 26px' }}>Demo Talep Et</a>
|
||||||
|
<a href="#farklilasim" className="btn-outline" style={{ fontSize: '13.5px', padding: '15px 26px' }}>Nasıl Çalışır ↓</a>
|
||||||
|
</div>
|
||||||
|
<p style={{ fontSize: '11.5px', letterSpacing: '0.05em', textTransform: 'uppercase', marginTop: '22px', color: T.inkFaint }}>
|
||||||
|
>>> Şu an erken erişim aşamasındayız — kurucu ekiple doğrudan görüşün.
|
||||||
|
</p>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hero right: process log panel */}
|
||||||
|
<Reveal delay={0.1}>
|
||||||
|
<div style={{ border: `2px solid ${T.ink}`, background: '#fff' }}>
|
||||||
|
<div style={{ borderBottom: `2px solid ${T.ink}`, padding: '10px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<span style={{ fontSize: '10.5px', letterSpacing: '0.12em', fontWeight: 700 }}>PROCESS LOG</span>
|
||||||
|
<span style={{ fontSize: '10.5px', color: T.red, fontWeight: 700 }}>● LIVE</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: '18px', display: 'flex', flexDirection: 'column', gap: '2px' }}>
|
||||||
|
{[
|
||||||
|
{ t: '00:01', s: 'DOSYA YÜKLENDİ', done: true },
|
||||||
|
{ t: '00:04', s: 'AI ANALİZ EDİYOR…', done: true },
|
||||||
|
{ t: '00:09', s: 'ARGÜMAN DEĞERLENDİRMESİ', done: true },
|
||||||
|
{ t: '00:13', s: 'EMSAL: YARGITAY 2024/1234', done: true },
|
||||||
|
{ t: '00:21', s: 'DİLEKÇE TASLAĞI OLUŞTURULDU', done: true, final: true },
|
||||||
|
].map((row, i) => (
|
||||||
|
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '9px 10px', background: row.final ? T.ink : 'transparent', color: row.final ? '#fff' : T.ink }}>
|
||||||
|
<span style={{ fontSize: '10.5px', opacity: row.final ? 0.7 : 0.4, flexShrink: 0 }}>[{row.t}]</span>
|
||||||
|
<span style={{ fontSize: '11.5px', letterSpacing: '0.03em', flex: 1 }}>{row.s}</span>
|
||||||
|
<span style={{ fontSize: '10px', color: row.final ? '#fff' : T.red, fontWeight: 700, flexShrink: 0 }}>{row.final ? 'OK' : '✓'}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ STATS ═══════════════════════════ */}
|
||||||
|
<section className="grid-1px stats-grid" style={{ maxWidth: '1280px', margin: '0 auto', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: `2px solid ${T.ink}`, borderBottom: `2px solid ${T.ink}` }}>
|
||||||
|
{[
|
||||||
|
{ value: '01', label: 'SABİT FİYAT, TÜM AVUKATLARA' },
|
||||||
|
{ value: '40.000 ₺', label: 'YILLIK, GİZLİ ÜCRET YOK' },
|
||||||
|
{ value: '5', label: 'MAHKEME KAYNAĞI TEK EKRANDA' },
|
||||||
|
{ value: '7/24', label: 'DOSYANIZLA ÇALIŞAN ORTAK' },
|
||||||
|
].map((s) => (
|
||||||
|
<div key={s.label} className="grid-cell" style={{ padding: '30px 20px', textAlign: 'center' }}>
|
||||||
|
<div style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(28px,3.6vw,40px)', letterSpacing: '-0.02em' }}>{s.value}</div>
|
||||||
|
<div style={{ fontSize: '10.5px', marginTop: '8px', letterSpacing: '0.08em', color: T.inkSoft }}>{s.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ PROBLEM ═════════════════════════ */}
|
||||||
|
<section id="is-akisi" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,8vw,88px) clamp(20px,6vw,72px)' }}>
|
||||||
|
<Reveal>
|
||||||
|
<span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-02 // BUGÜNÜN İŞ AKIŞI</span>
|
||||||
|
<h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(26px,3.2vw,40px)', margin: '18px 0 40px', letterSpacing: '-0.02em', textTransform: 'uppercase', maxWidth: '22ch' }}>
|
||||||
|
Dosya, arama, şablon, tekrar.
|
||||||
|
</h2>
|
||||||
|
</Reveal>
|
||||||
|
<div className="grid-1px" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', borderTop: `2px solid ${T.ink}` }}>
|
||||||
|
<Reveal delay={0.03}>
|
||||||
|
<div className="grid-cell" style={{ padding: '30px 28px' }}>
|
||||||
|
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, textDecoration: 'line-through', textDecorationThickness: '2px' }}>01 / BUGÜN</span>
|
||||||
|
<p style={{ fontSize: '14px', lineHeight: 1.75, margin: '14px 0 0', color: T.inkSoft }}>
|
||||||
|
Dosya incelemesi bir programda, içtihat araması ayrı bir siteye açılan sekmede, dilekçe taslağı eski bir Word şablonunda. Her adımda bağlam yeniden kurulur, saatler kaybolur.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.06}>
|
||||||
|
<div className="grid-cell" style={{ padding: '30px 28px' }}>
|
||||||
|
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em' }}>02 / AYRISLEGAL İLE</span>
|
||||||
|
<p style={{ fontSize: '14px', lineHeight: 1.75, margin: '14px 0 0', color: T.inkSoft }}>
|
||||||
|
Tek bir çalışma alanı: dosyanızı yükleyin, AyrisLegal ile tartışın, içtihat bulun, dilekçe taslağı üretin — hepsi aynı ekranda, bağlamı hiç kaybetmeden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ DIFFERENTIATOR ══════════════════ */}
|
||||||
|
<section id="farklilasim" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)', borderTop: `2px solid ${T.ink}` }}>
|
||||||
|
<Reveal>
|
||||||
|
<span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-03 // TARTIŞMA ODAKLI YAPAY ZEKA</span>
|
||||||
|
</Reveal>
|
||||||
|
<div className="hero-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,5fr) minmax(0,7fr)', gap: '48px', alignItems: 'start', marginTop: '20px' }}>
|
||||||
|
<Reveal delay={0.04}>
|
||||||
|
<div>
|
||||||
|
<h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(24px,2.8vw,36px)', margin: '0 0 18px', letterSpacing: '-0.02em', textTransform: 'uppercase', maxWidth: '16ch' }}>
|
||||||
|
Bulmakla yetinmez, tartışır.
|
||||||
|
</h2>
|
||||||
|
<p style={{ fontSize: '14px', lineHeight: 1.75, margin: '0 0 16px', maxWidth: '46ch', color: T.inkSoft }}>
|
||||||
|
Çoğu hukuk yazılımı özet çıkarır ya da anahtar kelimeyle arar. AyrisLegal dosyanızdaki argümanı okur, zayıf noktasını sorar, karşı görüş üretir, sizi ikna etmeye çalışır — ya da ikna olur.
|
||||||
|
</p>
|
||||||
|
<p style={{ fontSize: '11px', margin: 0, color: T.inkFaint, letterSpacing: '0.02em' }}>
|
||||||
|
>>> Aşağıdaki panel, bu tartışmanın nasıl göründüğünü gösteren temsili bir tasarımdır.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
{/* Chat simulation as terminal transcript */}
|
||||||
|
<Reveal delay={0.08}>
|
||||||
|
<div style={{ border: `2px solid ${T.ink}`, background: '#fff', padding: '20px', display: 'flex', flexDirection: 'column', gap: '2px', fontSize: '13px', lineHeight: 1.6 }}>
|
||||||
|
<div style={{ padding: '12px 14px', borderBottom: `1px solid ${T.divider}` }}>
|
||||||
|
<span style={{ color: T.inkFaint, fontSize: '10.5px', letterSpacing: '0.08em' }}>[AVUKAT]</span>
|
||||||
|
<p style={{ margin: '6px 0 0' }}>Müvekkilin haklı olduğunu düşünüyorum, mülkiyet devri geçerli.</p>
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: '12px 14px', borderBottom: `1px solid ${T.divider}`, background: 'rgba(230,25,25,0.04)' }}>
|
||||||
|
<span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||||
|
<span style={{ color: T.red, fontSize: '10.5px', letterSpacing: '0.08em', fontWeight: 700 }}>[AYRISLEGAL // İTİRAZ]</span>
|
||||||
|
</span>
|
||||||
|
<p style={{ margin: '6px 0 0' }}>Devir tarihinde tapuda şerh var — bu, iyi niyet iddianızı zayıflatabilir. Şerhin kaldırılış tarihini kontrol ettiniz mi?</p>
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: '12px 14px' }}>
|
||||||
|
<span style={{ color: T.inkFaint, fontSize: '10.5px', letterSpacing: '0.08em' }}>[AVUKAT]</span>
|
||||||
|
<p style={{ margin: '6px 0 0' }}>Haklısınız — 3 emsal kararla bu noktayı destekleyelim.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ FEATURES ════════════════════════ */}
|
||||||
|
<section id="ozellikler" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)', borderTop: `2px solid ${T.ink}` }}>
|
||||||
|
<Reveal>
|
||||||
|
<span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-04 // PLATFORM</span>
|
||||||
|
<h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(26px,3.2vw,40px)', margin: '18px 0 14px', letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
|
||||||
|
Bir avukatın ihtiyaç duyduğu şeyler.
|
||||||
|
</h2>
|
||||||
|
<p style={{ fontSize: '14px', lineHeight: 1.7, maxWidth: '58ch', margin: '0 0 8px', color: T.inkSoft }}>
|
||||||
|
Dosyayı yükleyin — gerisini AyrisLegal üstlenir: okur, çapraz sorgular, strateji kurar, içtihat bulur, dilekçeyi yazar.
|
||||||
|
</p>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
{/* — 04.1 Dosya Analizi — */}
|
||||||
|
<Reveal>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', margin: '44px 0 16px' }}>
|
||||||
|
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, flexShrink: 0 }}>04.1</span>
|
||||||
|
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', flexShrink: 0 }}>Dosya Analizi</span>
|
||||||
|
<span style={{ flex: 1, height: '1px', background: T.divider }} />
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<div className="grid-1px card-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', border: `1px solid ${T.divider}` }}>
|
||||||
|
<Reveal>
|
||||||
|
<div className="grid-cell card" style={{ gridColumn: 'span 2', padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
<span className="card-kicker">ÇELİŞKİ AVCISI 🚨</span>
|
||||||
|
<h3 className="card-title" style={{ fontSize: '22px' }}>İfadeleri çapraz sorgular</h3>
|
||||||
|
<p className="card-body">Özellikle ceza dosyalarında: müşteki, sanık ve tanıkların karakol, savcılık ve mahkeme aşamalarındaki beyanlarını karşılaştırır, çelişen ifadeleri kırmızı alarmla işaretler.</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.03}>
|
||||||
|
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
<span className="card-kicker">DOSYA ÖZETİ</span>
|
||||||
|
<h3 className="card-title">Yüzlerce sayfayı tek raporda toplar</h3>
|
||||||
|
<p className="card-body">Tüm iddia, savunma ve delilleri birleştirip olay örgüsü, yargılama süreci ve son durumu anlatan yapılandırılmış bir rapor çıkarır.</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.06}>
|
||||||
|
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
<span className="card-kicker">DOSYA RÖNTGENİ</span>
|
||||||
|
<h3 className="card-title">Gözden kaçanı bulur</h3>
|
||||||
|
<p className="card-body">Olası usul eksikliklerini, zamanaşımı risklerini ve toplanmamış delilleri tarar.</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.09}>
|
||||||
|
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
<span className="card-kicker">DAVA STRATEJİSİ</span>
|
||||||
|
<h3 className="card-title">Yol haritası çıkarır</h3>
|
||||||
|
<p className="card-body">Zayıf noktalar, karşı tarafın açıkları, usul hataları ve talep edilmesi gereken deliller için müvekkile özel strateji üretir.</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.12}>
|
||||||
|
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
<span className="card-kicker">MÜZAKERE VE ARABULUCULUK</span>
|
||||||
|
<h3 className="card-title">Pazarlık marjını hesaplar</h3>
|
||||||
|
<p className="card-body">Kazanma/kaybetme olasılığını, yargılama masrafı, süre ve riskleri değerlendirip arabuluculuk için en mantıklı marjı sunar.</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* — 04.2 Otomasyon ve Araçlar — */}
|
||||||
|
<Reveal>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', margin: '44px 0 16px' }}>
|
||||||
|
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, flexShrink: 0 }}>04.2</span>
|
||||||
|
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', flexShrink: 0 }}>Otomasyon ve Araçlar</span>
|
||||||
|
<span style={{ flex: 1, height: '1px', background: T.divider }} />
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<div className="grid-1px card-grid" style={{ gridTemplateColumns: 'repeat(2, 1fr)', border: `1px solid ${T.divider}` }}>
|
||||||
|
<Reveal>
|
||||||
|
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
<span className="card-kicker">TAKVİM & SÜRELER</span>
|
||||||
|
<h3 className="card-title">Kesin süreleri kaçırmazsınız</h3>
|
||||||
|
<p className="card-body">Duruşma tarihlerini ve kesin süreleri (cevap dilekçesi, istinaf vb.) dosyadan tespit edip takvime işler ve takibini yapar.</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.03}>
|
||||||
|
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
<span className="card-kicker">DİLEKÇE HAZIRLAMA</span>
|
||||||
|
<h3 className="card-title">Tek tıkla hazır taslak</h3>
|
||||||
|
<p className="card-body">Süre tutum, mazeret ve vekaletname sunma dilekçelerini saniyeler içinde hazırlar; hepsi "Dilekçeler" sekmesinde arşivlenir ve anında düzenlenebilir.</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* — 04.3 İnteraktif Yapay Zeka — */}
|
||||||
|
<Reveal>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', margin: '44px 0 16px' }}>
|
||||||
|
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, flexShrink: 0 }}>04.3</span>
|
||||||
|
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', flexShrink: 0 }}>İnteraktif Yapay Zeka</span>
|
||||||
|
<span style={{ flex: 1, height: '1px', background: T.divider }} />
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<div className="grid-1px card-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', border: `1px solid ${T.divider}` }}>
|
||||||
|
<Reveal>
|
||||||
|
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
<span className="card-kicker">AYRISLEGAL'E SOR</span>
|
||||||
|
<h3 className="card-title">Dosyaya özel sohbet</h3>
|
||||||
|
<p className="card-body">"İddianamede bahsedilen bıçak kime aitmiş?" gibi dosyaya özel sorularınızı, tüm evrakların bağlamını bilen bir chat bot yanıtlar.</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.03}>
|
||||||
|
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
<span className="card-kicker">DİJİTAL STAJYER</span>
|
||||||
|
<h3 className="card-title">Uzun soluklu görevler devreder</h3>
|
||||||
|
<p className="card-body">Sanal bir hukuk stajyerine görev verir gibi, araştırma ve metin yazım görevlerini AyrisLegal'a atayabilirsiniz.</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.06}>
|
||||||
|
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
<span className="card-kicker">SİMÜLATÖR</span>
|
||||||
|
<h3 className="card-title">Duruşma provası yapar</h3>
|
||||||
|
<p className="card-body">Mahkemeye çıkmadan önce yapay zeka "Hakim", "Savcı" veya "Karşı Taraf Avukatı" rolüne girer; savunmanızı olası sorulara karşı önceden dener.</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* — 04.4 İçtihat Araştırma — */}
|
||||||
|
<Reveal>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', margin: '44px 0 16px' }}>
|
||||||
|
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, flexShrink: 0 }}>04.4</span>
|
||||||
|
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', flexShrink: 0 }}>İçtihat Araştırma</span>
|
||||||
|
<span style={{ flex: 1, height: '1px', background: T.divider }} />
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<div className="grid-1px card-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', border: `1px solid ${T.divider}` }}>
|
||||||
|
<Reveal>
|
||||||
|
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
<span className="card-kicker">SEMANTİK EMSAL ARAMA</span>
|
||||||
|
<h3 className="card-title">Anlamla arar, kelimeyle değil</h3>
|
||||||
|
<p className="card-body">Anahtar kelime eşleşmesinin ötesinde, vektörel arama ile konuya en uygun Yargıtay, Danıştay ve BAM kararlarını getirir.</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.03}>
|
||||||
|
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
<span className="card-kicker">MAHKEME FİLTRELERİ</span>
|
||||||
|
<h3 className="card-title">Kaynağa göre daraltır</h3>
|
||||||
|
<p className="card-body">Aramaları Yargıtay, Bölge Adliye Mahkemesi, AYM gibi belirli kurumlara göre filtreler.</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.06}>
|
||||||
|
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
<span className="card-kicker">HIZLI KOPYALAMA</span>
|
||||||
|
<h3 className="card-title">Dilekçeye anında aktarır</h3>
|
||||||
|
<p className="card-body">Okuma ekranındaki kararlar veya bölümler tek tıkla kopyalanıp dilekçelere entegre edilir.</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* — 04.5 UYAP Entegrasyonu — */}
|
||||||
|
<Reveal>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', margin: '44px 0 16px' }}>
|
||||||
|
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, flexShrink: 0 }}>04.5</span>
|
||||||
|
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', flexShrink: 0 }}>UYAP Entegrasyonu</span>
|
||||||
|
<span style={{ flex: 1, height: '1px', background: T.divider }} />
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.03}>
|
||||||
|
<div style={{ border: `1px solid ${T.divider}`, padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
<span className="card-kicker">CHROME EKLENTİSİ</span>
|
||||||
|
<h3 className="card-title" style={{ fontSize: '20px' }}>Manuel indir-yükle derdi yok</h3>
|
||||||
|
<p className="card-body" style={{ maxWidth: '70ch' }}>
|
||||||
|
AyrisLegal, bir web eklentisi aracılığıyla doğrudan UYAP portalıyla haberleşir: taraf bilgilerini, mahkeme bilgilerini, esas numarasını ve safahatı otomatik çeker.
|
||||||
|
Evraklar UYAP üzerinden okunup doğrudan AyrisLegal'a aktarılır; arka planda OCR ile içerikleri metne dönüştürülüp yapay zekanın analiz edebileceği hale getirilir.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ PRICING ═════════════════════════ */}
|
||||||
|
<section id="fiyatlandirma" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)', borderTop: `2px solid ${T.ink}` }}>
|
||||||
|
<Reveal>
|
||||||
|
<span className="doc-label" style={{ justifyContent: 'center', marginBottom: '20px', display: 'flex' }}><span className="bullet" />DOC-05 // FİYATLANDIRMA</span>
|
||||||
|
<h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(26px,3.2vw,40px)', margin: '18px 0 40px', textAlign: 'center', letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
|
||||||
|
İhtiyacınıza uygun modeller.
|
||||||
|
</h2>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '24px', maxWidth: '960px', margin: '0 auto' }}>
|
||||||
|
|
||||||
|
{/* ── Bireysel ── */}
|
||||||
|
<Reveal delay={0.05}>
|
||||||
|
<div style={{ display: 'flex', border: `2px solid ${T.ink}`, height: '100%' }}>
|
||||||
|
<div style={{ width: '32px', background: T.ink, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', padding: '20px 0' }}>
|
||||||
|
{['01','02','03','04','05'].map(t => (
|
||||||
|
<span key={t} style={{ fontSize: '10px', color: '#fff', writingMode: 'vertical-rl', fontFamily: T.fontMono, fontWeight: 700 }}>{t}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div style={{ flex: 1, padding: '36px 32px', textAlign: 'center', display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<p style={{ margin: 0, fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(38px,4.6vw,50px)', lineHeight: 1, letterSpacing: '-0.02em' }}>40.000 ₺</p>
|
||||||
|
<p style={{ margin: '8px 0 0', fontSize: '11px', letterSpacing: '0.1em', textTransform: 'uppercase', color: T.inkSoft }}>Bireysel Avukat / Yıl</p>
|
||||||
|
<p style={{ fontSize: '13.5px', lineHeight: 1.65, margin: '18px auto 0', color: T.inkSoft }}>
|
||||||
|
Serbest çalışan avukatlar için tasarlanmış yapay zeka çalışma ortağı.
|
||||||
|
</p>
|
||||||
|
<hr className="hr-line" style={{ margin: '22px 0' }} />
|
||||||
|
<ul style={{ listStyle: 'none', margin: '0 0 auto 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '11px', textAlign: 'left' }}>
|
||||||
|
{['Sınırsız dosya analizi', 'AI tartışma ortağı', 'İçtihat arama', 'Dilekçe taslağı üretimi'].map(item => (
|
||||||
|
<li key={item} style={{ display: 'flex', gap: '10px', fontSize: '13px' }}>
|
||||||
|
<span style={{ color: T.red, fontWeight: 700, flexShrink: 0 }}>></span>
|
||||||
|
{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<a href="#iletisim" className="btn-solid-lg" style={{ marginTop: '24px' }}>Demo Talep Et</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
{/* ── Büro ── */}
|
||||||
|
<Reveal delay={0.1}>
|
||||||
|
<div style={{ display: 'flex', border: `2px solid ${T.ink}`, height: '100%', position: 'relative' }}>
|
||||||
|
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, background: T.red, color: '#fff', fontSize: '10.5px', letterSpacing: '0.12em', textTransform: 'uppercase', textAlign: 'center', padding: '5px', fontFamily: T.fontMono, fontWeight: 700 }}>Ekip Çalışması</div>
|
||||||
|
<div style={{ width: '32px', background: T.ink, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', padding: '38px 0 20px' }}>
|
||||||
|
{['01','02','03','04','05'].map(t => (
|
||||||
|
<span key={t} style={{ fontSize: '10px', color: '#fff', writingMode: 'vertical-rl', fontFamily: T.fontMono, fontWeight: 700 }}>{t}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div style={{ flex: 1, padding: '52px 32px 36px', textAlign: 'center', display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<p style={{ margin: '4px 0 0', fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(28px,3.6vw,38px)', lineHeight: 1.1, letterSpacing: '-0.02em', textTransform: 'uppercase' }}>Hukuk Bürosu</p>
|
||||||
|
<p style={{ margin: '10px 0 0', fontSize: '11px', letterSpacing: '0.1em', textTransform: 'uppercase', color: T.inkSoft }}>Özel Fiyatlandırma</p>
|
||||||
|
<p style={{ fontSize: '13.5px', lineHeight: 1.65, margin: '18px auto 0', color: T.inkSoft }}>
|
||||||
|
Tüm ekibiniz için paylaşımlı çalışma alanı, dosya yönetimi ve özel entegrasyonlar.
|
||||||
|
</p>
|
||||||
|
<hr className="hr-line" style={{ margin: '22px 0' }} />
|
||||||
|
<ul style={{ listStyle: 'none', margin: '0 0 auto 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '11px', textAlign: 'left' }}>
|
||||||
|
{['Tüm bireysel özellikler', 'Ekip içi dosya paylaşımı', 'Ortak içtihat havuzu', 'Kurucu ekiple özel destek'].map(item => (
|
||||||
|
<li key={item} style={{ display: 'flex', gap: '10px', fontSize: '13px' }}>
|
||||||
|
<span style={{ color: T.red, fontWeight: 700, flexShrink: 0 }}>></span>
|
||||||
|
{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<a href="#iletisim" className="btn-solid-lg" style={{ marginTop: '24px', background: T.red, borderColor: T.red }}
|
||||||
|
onMouseEnter={e => (e.currentTarget.style.background = T.ink)}
|
||||||
|
onMouseLeave={e => (e.currentTarget.style.background = T.red)}
|
||||||
|
>İletişime Geçin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ TRUST ═══════════════════════════ */}
|
||||||
|
<section id="guven" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)', borderTop: `2px solid ${T.ink}` }}>
|
||||||
|
<Reveal>
|
||||||
|
<span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-06 // GÜVEN VE VERİ GÜVENLİĞİ</span>
|
||||||
|
<h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(26px,3.2vw,40px)', margin: '18px 0 14px', letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
|
||||||
|
Dosyalarınız sizin kalır.
|
||||||
|
</h2>
|
||||||
|
<p style={{ fontSize: '13.5px', lineHeight: 1.7, maxWidth: '60ch', margin: '0 0 36px', color: T.inkSoft }}>
|
||||||
|
Bir dava dosyası, bir avukatın elindeki en hassas belgedir. AyrisLegal'ı bu bilinçle kuruyoruz.
|
||||||
|
</p>
|
||||||
|
</Reveal>
|
||||||
|
<div className="grid-1px" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', borderTop: `2px solid ${T.ink}`, borderBottom: `2px solid ${T.ink}` }}>
|
||||||
|
{[
|
||||||
|
{ title: 'YEREL ŞİFRELİ SAKLAMA', desc: 'Lisans ve hassas veriler, işletim sisteminizin kendi güvenli depolama katmanıyla (Keychain / DPAPI) şifrelenir.' },
|
||||||
|
{ title: 'KENDİ GOOGLE DRIVE’INIZA YEDEKLEME', desc: 'Otomatik yedekleme bizim sunucularımıza değil, sizin kendi Drive hesabınıza yapılır — sadece siz erişebilirsiniz.' },
|
||||||
|
{ title: 'SADECE SİZİN ANALİZİNİZ İÇİN', desc: 'Yüklediğiniz belgeler başka kullanıcılarla veya üçüncü taraflarla paylaşılmaz.' },
|
||||||
|
{ title: 'SON KARAR HER ZAMAN SİZDE', desc: 'AyrisLegal bir karar organı değildir — analiz, taslak ve öneri üretir. Mesleki sorumluluk gereği tüm çıktılar imzadan önce sizin incelemenizden geçer.' },
|
||||||
|
].map((item, i) => (
|
||||||
|
<Reveal key={item.title} delay={i * 0.05}>
|
||||||
|
<div className="grid-cell" style={{ padding: '26px 24px' }}>
|
||||||
|
<span style={{ fontSize: '20px', color: T.red, fontWeight: 700, fontFamily: T.fontMono }}>0{i + 1}</span>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: '16px', margin: '10px 0 8px', textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{item.title}</h3>
|
||||||
|
<p style={{ fontSize: '13px', lineHeight: 1.6, margin: 0, color: T.inkSoft }}>{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ FAQ ══════════════════════════════ */}
|
||||||
|
<section id="sss" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)', borderTop: `2px solid ${T.ink}` }}>
|
||||||
|
<Reveal>
|
||||||
|
<span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-06.5 // SIK SORULAN SORULAR</span>
|
||||||
|
<h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(26px,3.2vw,40px)', margin: '18px 0 36px', letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
|
||||||
|
Muhtemelen bunları soracaksınız.
|
||||||
|
</h2>
|
||||||
|
</Reveal>
|
||||||
|
<div className="grid-1px" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', border: `1px solid ${T.divider}` }}>
|
||||||
|
{[
|
||||||
|
{ q: 'Müvekkil dosyalarım nerede saklanıyor, kim görebilir?', a: 'Belgeler yerel şifreli depolamada tutulur, yedekleme bizim değil sizin kendi Google Drive hesabınıza yapılır. Başka kullanıcı veya üçüncü tarafla paylaşılmaz.' },
|
||||||
|
{ q: 'Yapay zeka yanlış bir şey söylerse sorumluluk kimde?', a: 'AyrisLegal karar organı değildir — analiz, taslak ve öneri üretir. Ürettiği emsal kararlar gerçek esas/karar numaralarıyla gelir, kaynağından doğrulanabilir. Nihai değerlendirme ve imza her zaman sizde kalır.' },
|
||||||
|
{ q: 'UYAP şifremi AyrisLegal ile paylaşmam gerekiyor mu?', a: 'Hayır. UYAP eklentisi, tarayıcınızda zaten açık olan oturumu kullanır — kimlik bilgileriniz hiçbir zaman AyrisLegal sunucularına iletilmez ya da saklanmaz.' },
|
||||||
|
{ q: 'Büromdaki diğer avukatlarla paylaşabilir miyim?', a: 'Şu an platform bireysel avukat için tasarlandı. Ekip/büro paylaşımı yol haritamızda — Hukuk Bürosu planı için iletişime geçin, ihtiyacınıza göre konuşalım.' },
|
||||||
|
].map((item) => (
|
||||||
|
<Reveal key={item.q}>
|
||||||
|
<div className="grid-cell" style={{ padding: '26px' }}>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: '15px', margin: '0 0 10px', letterSpacing: '-0.01em', lineHeight: 1.3 }}>{item.q}</h3>
|
||||||
|
<p style={{ fontSize: '13px', lineHeight: 1.65, margin: 0, color: T.inkSoft }}>{item.a}</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ CONTACT ═════════════════════════ */}
|
||||||
|
<section id="iletisim" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)' }}>
|
||||||
|
<Reveal>
|
||||||
|
<span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-07 // ERKEN ERİŞİM</span>
|
||||||
|
</Reveal>
|
||||||
|
<div className="contact-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,5fr) minmax(0,7fr)', gap: '40px', marginTop: '20px' }}>
|
||||||
|
<Reveal delay={0.04}>
|
||||||
|
<div>
|
||||||
|
<h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(22px,2.8vw,32px)', margin: '0 0 14px', letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
|
||||||
|
Şu an müşteri referansı göstermiyoruz — kasıtlı olarak.
|
||||||
|
</h2>
|
||||||
|
<p style={{ fontSize: '13.5px', lineHeight: 1.7, margin: 0, color: T.inkSoft }}>
|
||||||
|
AyrisLegal yeni. Sahte ya da ödünç yorumlar yerine dürüst olmayı seçtik: platformu kurucu ekiple birlikte, doğrudan geri bildiriminizle şekillendiriyoruz. Demo talep edin, ilk kullanan avukatlardan biri olun.
|
||||||
|
</p>
|
||||||
|
<ul style={{ listStyle: 'none', margin: '26px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
{['Formu doldurun', 'Kurucu ekipten biri sizi arar', '15 dakikalık canlı demoda dosyanızla test edersiniz'].map((step, i) => (
|
||||||
|
<li key={step} style={{ display: 'flex', gap: '10px', fontSize: '13px', color: T.inkSoft }}>
|
||||||
|
<span style={{ color: T.red, fontWeight: 700, fontFamily: T.fontMono, flexShrink: 0 }}>0{i + 1}</span>
|
||||||
|
{step}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<div style={{ marginTop: '28px', display: 'flex', alignItems: 'center', gap: '14px' }}>
|
||||||
|
<div style={{ width: '54px', height: '54px', border: `2px solid ${T.red}`, borderRadius: '50% !important', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontFamily: T.fontMono, fontSize: '8px', color: T.red, textAlign: 'center', lineHeight: 1.3, flexShrink: 0, textTransform: 'uppercase', transform: 'rotate(-8deg)', fontWeight: 700 }}>
|
||||||
|
<span style={{ letterSpacing: '0.14em' }}>VERIFIED</span>
|
||||||
|
<span style={{ letterSpacing: '0.14em' }}>FOUNDER</span>
|
||||||
|
</div>
|
||||||
|
<span style={{ fontSize: '11px', letterSpacing: '0.04em', color: T.inkFaint }}>KURUCU EKİP MÜHRÜ</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.08}>
|
||||||
|
<ContactForm />
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ FOOTER ══════════════════════════ */}
|
||||||
|
<footer style={{ maxWidth: '1280px', margin: '0 auto', padding: '24px clamp(20px,6vw,72px) 36px', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px', fontSize: '11px', letterSpacing: '0.04em', color: T.inkFaint, borderTop: `2px solid ${T.ink}` }}>
|
||||||
|
<span>AYRISLEGAL™ — AYRIS TECH'İN BİR ÜRÜNÜDÜR.</span>
|
||||||
|
<span>
|
||||||
|
© {new Date().getFullYear()} AYRISLEGAL ·{' '}
|
||||||
|
<a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" style={{ color: T.inkFaint }}>
|
||||||
|
CREATED BY AYRIS.TECH
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
+528
-545
File diff suppressed because it is too large
Load Diff
@@ -1,595 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import React, { useRef, useState } from 'react'
|
|
||||||
import { motion, useInView, useMotionValue, useTransform, useSpring } from 'framer-motion'
|
|
||||||
import {
|
|
||||||
ArrowRight, FileText, Search, MessageSquare, ShieldCheck, Cloud, Lock,
|
|
||||||
CheckCircle2, Sparkles, Scale, GraduationCap, AlertTriangle,
|
|
||||||
FolderOpen, Landmark, Users2, ChevronRight,
|
|
||||||
} from 'lucide-react'
|
|
||||||
import ContactFormV2 from '@/components/contact-form-v2'
|
|
||||||
|
|
||||||
/* ─────────────────────────────────────────────────────────────────────────
|
|
||||||
Brand tokens — AyrisLegal kırmızısı (#E61919) tek aksan renk, nötr taban
|
|
||||||
zinc skalası. Referans görsellerdeki turuncu/lacivert paletle kasıtlı
|
|
||||||
olarak hiçbir ortak nokta yok (başka bir şirketin kimliği).
|
|
||||||
───────────────────────────────────────────────────────────────────────── */
|
|
||||||
const ACCENT = '#E61919'
|
|
||||||
const ACCENT_DARK = '#B8140F'
|
|
||||||
const ACCENT_SOFT = '#FDEEEC'
|
|
||||||
|
|
||||||
function Reveal({ children, className = '', delay = 0 }: {
|
|
||||||
children: React.ReactNode; className?: string; delay?: number
|
|
||||||
}) {
|
|
||||||
const ref = useRef<HTMLDivElement>(null)
|
|
||||||
const inView = useInView(ref, { once: true, margin: '-60px' })
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
ref={ref}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
|
||||||
transition={{ type: 'spring', stiffness: 100, damping: 20, delay }}
|
|
||||||
className={className}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</motion.div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Magnetic CTA — useMotionValue/useTransform dışında hiçbir React state
|
|
||||||
kullanmıyor (skill kuralı: sürekli hover animasyonu için useState yasak). */
|
|
||||||
function MagneticButton({ href, children, variant = 'solid' }: {
|
|
||||||
href: string; children: React.ReactNode; variant?: 'solid' | 'outline'
|
|
||||||
}) {
|
|
||||||
const x = useMotionValue(0)
|
|
||||||
const y = useMotionValue(0)
|
|
||||||
const springX = useSpring(x, { stiffness: 150, damping: 15, mass: 0.5 })
|
|
||||||
const springY = useSpring(y, { stiffness: 150, damping: 15, mass: 0.5 })
|
|
||||||
const tx = useTransform(springX, v => v)
|
|
||||||
const ty = useTransform(springY, v => v)
|
|
||||||
|
|
||||||
const handleMove = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
|
||||||
const rect = e.currentTarget.getBoundingClientRect()
|
|
||||||
x.set((e.clientX - rect.left - rect.width / 2) * 0.25)
|
|
||||||
y.set((e.clientY - rect.top - rect.height / 2) * 0.25)
|
|
||||||
}
|
|
||||||
const handleLeave = () => { x.set(0); y.set(0) }
|
|
||||||
|
|
||||||
const base = 'inline-flex items-center justify-center gap-2 rounded-full px-7 py-3.5 text-[15px] font-semibold transition-colors active:scale-[0.98]'
|
|
||||||
const style = variant === 'solid'
|
|
||||||
? { background: ACCENT, color: '#fff' }
|
|
||||||
: { background: '#fff', color: '#18181B', border: '1.5px solid rgb(228 228 231)' }
|
|
||||||
|
|
||||||
return (
|
|
||||||
<motion.a
|
|
||||||
href={href}
|
|
||||||
onMouseMove={handleMove}
|
|
||||||
onMouseLeave={handleLeave}
|
|
||||||
style={{ x: tx, y: ty, ...style }}
|
|
||||||
className={base}
|
|
||||||
onMouseEnter={e => { if (variant === 'solid') (e.currentTarget as HTMLElement).style.background = ACCENT_DARK }}
|
|
||||||
onMouseOut={e => { if (variant === 'solid') (e.currentTarget as HTMLElement).style.background = ACCENT }}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</motion.a>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sürekli nabız atan "canlı" gösterge — izole, memoized, parent'ı
|
|
||||||
yeniden render etmez (performance guardrail). */
|
|
||||||
const LivePulse = React.memo(function LivePulse() {
|
|
||||||
return (
|
|
||||||
<span className="relative flex h-2 w-2">
|
|
||||||
<motion.span
|
|
||||||
className="absolute inline-flex h-full w-full rounded-full"
|
|
||||||
style={{ background: ACCENT }}
|
|
||||||
animate={{ scale: [1, 2.4], opacity: [0.6, 0] }}
|
|
||||||
transition={{ duration: 1.6, repeat: Infinity, ease: 'easeOut' }}
|
|
||||||
/>
|
|
||||||
<span className="relative inline-flex h-2 w-2 rounded-full" style={{ background: ACCENT }} />
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
function BrowserFrame({ children }: { children: React.ReactNode }) {
|
|
||||||
return (
|
|
||||||
<div className="w-full overflow-hidden rounded-[1.75rem] border border-zinc-200/70 bg-white shadow-[0_30px_70px_-25px_rgba(24,24,27,0.25)]">
|
|
||||||
<div className="flex items-center gap-2 border-b border-zinc-200/70 bg-zinc-50 px-4 py-3">
|
|
||||||
<span className="h-2.5 w-2.5 rounded-full bg-zinc-300" />
|
|
||||||
<span className="h-2.5 w-2.5 rounded-full bg-zinc-300" />
|
|
||||||
<span className="h-2.5 w-2.5 rounded-full bg-zinc-300" />
|
|
||||||
<span className="flex-1 text-center text-xs font-medium text-zinc-400">ayrislegal.com</span>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white">{children}</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const NAV_LINKS = [
|
|
||||||
{ label: 'Özellikler', href: '#tanisin' },
|
|
||||||
{ label: 'Fiyatlar', href: '#fiyatlandirma' },
|
|
||||||
{ label: 'SSS', href: '#sss' },
|
|
||||||
{ label: 'İletişim', href: '#iletisim' },
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function HomePageV2() {
|
|
||||||
const [pricingYearly, setPricingYearly] = useState(true)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-[100dvh] bg-white text-zinc-900" style={{ fontFamily: '"Archivo", ui-sans-serif, system-ui, sans-serif' }}>
|
|
||||||
<style>{`
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600;700&display=swap');
|
|
||||||
::selection { background: ${ACCENT_SOFT}; color: ${ACCENT_DARK}; }
|
|
||||||
`}</style>
|
|
||||||
|
|
||||||
{/* ══════════════════════════════ NAV ═════════════════════════════ */}
|
|
||||||
<nav className="sticky top-0 z-30 flex items-center justify-between gap-4 border-b border-zinc-100 bg-white/85 px-5 py-4 backdrop-blur-md md:px-16">
|
|
||||||
<img src="/logo.png" alt="AyrisLegal" className="h-6 w-auto object-contain" />
|
|
||||||
<div className="hidden items-center gap-8 md:flex">
|
|
||||||
{NAV_LINKS.map(l => (
|
|
||||||
<a key={l.href} href={l.href} className="text-[14.5px] font-semibold text-zinc-500 transition-colors hover:text-zinc-900">
|
|
||||||
{l.label}
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<a href="#iletisim" className="hidden rounded-full border border-zinc-200 px-5 py-2.5 text-sm font-semibold text-zinc-900 transition-colors hover:bg-zinc-50 sm:inline-block">
|
|
||||||
Giriş Yap
|
|
||||||
</a>
|
|
||||||
<a href="#iletisim" className="inline-flex items-center gap-1.5 rounded-full px-5 py-2.5 text-sm font-semibold text-white transition-colors" style={{ background: ACCENT }}>
|
|
||||||
Ücretsiz Deneyin <ArrowRight size={15} strokeWidth={2} />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
{/* ══════════════════════════════ HERO — asimetrik, sola hizalı ═══ */}
|
|
||||||
<section className="relative overflow-hidden">
|
|
||||||
<div className="pointer-events-none absolute -right-40 -top-40 h-[520px] w-[520px] rounded-full opacity-[0.07] blur-3xl" style={{ background: ACCENT }} />
|
|
||||||
<div className="mx-auto grid max-w-[1400px] grid-cols-1 gap-14 px-5 pb-16 pt-16 md:grid-cols-[1fr_0.9fr] md:gap-10 md:px-16 md:pb-24 md:pt-24">
|
|
||||||
<div>
|
|
||||||
<Reveal>
|
|
||||||
<span className="inline-flex items-center gap-2 rounded-full px-4 py-2 text-[13px] font-semibold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
|
|
||||||
<Sparkles size={14} strokeWidth={2.5} /> Avukatlar için yapay zeka destekli hukuki asistan
|
|
||||||
</span>
|
|
||||||
</Reveal>
|
|
||||||
<Reveal delay={0.06}>
|
|
||||||
<h1 className="mt-6 text-[clamp(38px,5.5vw,60px)] font-extrabold leading-[1.03] tracking-tighter text-zinc-950">
|
|
||||||
Pasif araştırma değil,<br />
|
|
||||||
<span style={{ color: ACCENT }}>aktif düşünce ortağı.</span>
|
|
||||||
</h1>
|
|
||||||
</Reveal>
|
|
||||||
<Reveal delay={0.12}>
|
|
||||||
<p className="mt-6 max-w-[52ch] text-[17px] leading-relaxed text-zinc-500">
|
|
||||||
AyrisLegal, dava dosyalarınızı analiz eder, hukuki sorularınızı yanıtlar, içtihat taraması yapar ve saniyeler içinde dilekçe taslağı oluşturur.
|
|
||||||
</p>
|
|
||||||
</Reveal>
|
|
||||||
<Reveal delay={0.18}>
|
|
||||||
<div className="mt-9 flex flex-wrap items-center gap-4">
|
|
||||||
<MagneticButton href="#iletisim">Ücretsiz Deneyin <ArrowRight size={16} strokeWidth={2.5} /></MagneticButton>
|
|
||||||
<MagneticButton href="#tanisin" variant="outline">Nasıl Çalışır?</MagneticButton>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
<Reveal delay={0.24}>
|
|
||||||
<p className="mt-5 text-[13px] text-zinc-400">Kredi kartı gerekmez · Kurucu ekiple birebir demo</p>
|
|
||||||
</Reveal>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Asimetrik görsel kompozisyon: ana panel + üstüne binen yüzen kart */}
|
|
||||||
<Reveal delay={0.15} className="relative">
|
|
||||||
<div className="relative mt-6 md:mt-14">
|
|
||||||
<BrowserFrame>
|
|
||||||
<div className="p-5">
|
|
||||||
<div className="mb-4 flex items-center justify-between">
|
|
||||||
<span className="text-[11px] font-bold uppercase tracking-wide text-zinc-400">Kira Tespit Davası · Dosya Detayı</span>
|
|
||||||
<span className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-zinc-400">
|
|
||||||
<LivePulse /> Canlı
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{[
|
|
||||||
{ name: 'Bilirkişi Raporu - Kira Tespiti', date: '15.01.2026' },
|
|
||||||
{ name: '2024/100 Esas Tensip Tutanağı', date: '10.01.2026' },
|
|
||||||
{ name: 'Kira Sözleşmesi', date: '10.01.2026' },
|
|
||||||
].map(row => (
|
|
||||||
<div key={row.name} className="mb-2 flex items-center justify-between rounded-2xl border border-zinc-100 px-4 py-3">
|
|
||||||
<div className="flex items-center gap-2.5">
|
|
||||||
<CheckCircle2 size={15} strokeWidth={2} className="text-zinc-300" />
|
|
||||||
<span className="text-[13.5px] font-semibold text-zinc-700">{row.name}</span>
|
|
||||||
</div>
|
|
||||||
<span className="text-[11.5px] text-zinc-400">{row.date}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</BrowserFrame>
|
|
||||||
|
|
||||||
{/* Yüzen, üste binen ikinci panel — variance 8 asimetrisi */}
|
|
||||||
<div className="absolute -bottom-8 -left-8 hidden w-[220px] rounded-2xl border border-zinc-200/70 bg-white p-4 shadow-[0_20px_45px_-15px_rgba(24,24,27,0.2)] sm:block">
|
|
||||||
<div className="mb-2 flex items-center gap-2" style={{ color: ACCENT }}>
|
|
||||||
<AlertTriangle size={15} strokeWidth={2.5} />
|
|
||||||
<span className="text-[11px] font-bold uppercase tracking-wide">Çelişki Avcısı</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-[12px] leading-snug text-zinc-500">2 ifade arasında çelişki tespit edildi.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* İstatistik şeridi — asimetrik genişlikler */}
|
|
||||||
<div className="mx-auto max-w-[1400px] px-5 pb-16 md:px-16">
|
|
||||||
<Reveal>
|
|
||||||
<div className="grid grid-cols-2 gap-3 border-t border-zinc-100 pt-10 md:grid-cols-[1fr_1.3fr_1fr_1fr] md:gap-4">
|
|
||||||
{[
|
|
||||||
{ value: '1', label: 'Sabit fiyat, tüm avukatlara' },
|
|
||||||
{ value: '40.000 ₺', label: 'Yıllık, gizli ücret yok' },
|
|
||||||
{ value: '5', label: 'Mahkeme kaynağı tek ekranda' },
|
|
||||||
{ value: '7/24', label: 'Dosyanızla çalışan ortak' },
|
|
||||||
].map(s => (
|
|
||||||
<div key={s.label}>
|
|
||||||
<div className="font-mono text-2xl font-bold text-zinc-950">{s.value}</div>
|
|
||||||
<div className="mt-1 text-[12.5px] leading-snug text-zinc-500">{s.label}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* ══════════════════════════════ TANIŞIN — zig-zag showcase ══════════════ */}
|
|
||||||
<section id="tanisin" className="mx-auto max-w-[1400px] px-5 py-20 md:px-16 md:py-28">
|
|
||||||
<Reveal>
|
|
||||||
<div className="mb-16 max-w-[46ch] md:mb-24">
|
|
||||||
<span className="font-mono text-[12px] font-semibold uppercase tracking-wider text-zinc-400">Platform</span>
|
|
||||||
<h2 className="mt-3 text-[clamp(28px,3.6vw,42px)] font-extrabold tracking-tighter text-zinc-950">AyrisLegal ile tanışın</h2>
|
|
||||||
<p className="mt-3 text-[16px] text-zinc-500">Modern hukukçunun ihtiyaç duyduğu tüm araçlar, tek bir platformda.</p>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
|
|
||||||
{/* 01 */}
|
|
||||||
<div className="grid grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-16">
|
|
||||||
<Reveal>
|
|
||||||
<span className="font-mono text-sm font-bold" style={{ color: ACCENT }}>01</span>
|
|
||||||
<h3 className="mt-3 text-[clamp(22px,2.4vw,28px)] font-bold tracking-tight text-zinc-950">Dava dosyası yönetimi</h3>
|
|
||||||
<p className="mt-4 max-w-[42ch] text-[15px] leading-relaxed text-zinc-500">
|
|
||||||
Belgelerinizi yükleyin, yapay zeka saniyeler içinde okuyup analiz etsin. Dosyanın tarafları, UYAP bilgileri ve genel durumu tek ekranda.
|
|
||||||
</p>
|
|
||||||
</Reveal>
|
|
||||||
<Reveal delay={0.08}>
|
|
||||||
<BrowserFrame>
|
|
||||||
<div className="p-5">
|
|
||||||
<div className="mb-3 flex flex-wrap gap-1.5">
|
|
||||||
{['Genel Bakış', 'Belgeler', 'İçtihat Arama', 'Dilekçeler'].map((t, i) => (
|
|
||||||
<span key={t} className={`rounded-full px-3 py-1.5 text-[11.5px] font-semibold ${i === 0 ? 'text-white' : 'text-zinc-500'}`} style={i === 0 ? { background: ACCENT } : { background: '#F4F4F5' }}>
|
|
||||||
{t}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="rounded-2xl border border-zinc-100 bg-zinc-50/60 p-4">
|
|
||||||
<div className="mb-2 text-[12.5px] font-bold text-zinc-800">Taraflar</div>
|
|
||||||
<div className="space-y-1 text-[12.5px] text-zinc-500">
|
|
||||||
<div>Davacı: Elif Yılmaz</div>
|
|
||||||
<div>Davalı: Mehmet Kaya</div>
|
|
||||||
<div>Mahkeme: Ankara 33. Sulh Hukuk Mahkemesi</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</BrowserFrame>
|
|
||||||
</Reveal>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 02 — image left, text right */}
|
|
||||||
<div className="mt-24 grid grid-cols-1 items-center gap-10 md:mt-32 md:grid-cols-2 md:gap-16">
|
|
||||||
<Reveal delay={0.08} className="order-2 md:order-1">
|
|
||||||
<BrowserFrame>
|
|
||||||
<div className="p-5">
|
|
||||||
<div className="mb-3 flex items-center gap-2 text-[13px] font-bold text-zinc-800">
|
|
||||||
<Scale size={16} strokeWidth={2} style={{ color: ACCENT }} /> Dava Stratejisi
|
|
||||||
</div>
|
|
||||||
<ul className="mb-4 space-y-2 pl-4 text-[12.5px] leading-relaxed text-zinc-500" style={{ listStyleType: 'disc' }}>
|
|
||||||
<li>Kira sözleşmesinin emsal olarak kullanılması</li>
|
|
||||||
<li>Bilirkişi raporundaki hatalı değerlendirmelerin çürütülmesi</li>
|
|
||||||
<li>Kira bedelinin 01.08.2023'ten itibaren geçerli sayılması</li>
|
|
||||||
</ul>
|
|
||||||
<div className="grid grid-cols-2 gap-2.5">
|
|
||||||
<div className="rounded-xl border border-zinc-100 bg-emerald-50/60 p-3">
|
|
||||||
<div className="mb-1 text-[10.5px] font-bold text-emerald-700">MEVCUT DELİLLER</div>
|
|
||||||
<div className="text-[11.5px] text-zinc-500">Temmuz 2026 emsal ilanları</div>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-xl border border-zinc-100 p-3" style={{ background: ACCENT_SOFT }}>
|
|
||||||
<div className="mb-1 text-[10.5px] font-bold" style={{ color: ACCENT_DARK }}>EKSİK DELİLLER</div>
|
|
||||||
<div className="text-[11.5px] text-zinc-500">Güncel emsal kira ilanı</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</BrowserFrame>
|
|
||||||
</Reveal>
|
|
||||||
<Reveal className="order-1 md:order-2">
|
|
||||||
<span className="font-mono text-sm font-bold" style={{ color: ACCENT }}>02</span>
|
|
||||||
<h3 className="mt-3 text-[clamp(22px,2.4vw,28px)] font-bold tracking-tight text-zinc-950">Dosya içerisinde akıllı analizler</h3>
|
|
||||||
<p className="mt-4 max-w-[42ch] text-[15px] leading-relaxed text-zinc-500">
|
|
||||||
Dosya Özeti, Dosya Röntgeni, Çelişki Avcısı, Dava Stratejisi ve Müzakere/Arabuluculuk analizleri — dosyanızdaki tüm belgeleri okuyarak tek tıkla kapsamlı analizler sunar.
|
|
||||||
</p>
|
|
||||||
<div className="mt-5 flex flex-wrap gap-2">
|
|
||||||
{['Çelişki Avcısı', 'Dosya Özeti', 'Dosya Röntgeni', 'Müzakere'].map(t => (
|
|
||||||
<span key={t} className="rounded-full bg-zinc-100 px-3.5 py-1.5 text-[12px] font-semibold text-zinc-600">{t}</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 03 */}
|
|
||||||
<div className="mt-24 grid grid-cols-1 items-center gap-10 md:mt-32 md:grid-cols-2 md:gap-16">
|
|
||||||
<Reveal>
|
|
||||||
<span className="font-mono text-sm font-bold" style={{ color: ACCENT }}>03</span>
|
|
||||||
<h3 className="mt-3 text-[clamp(22px,2.4vw,28px)] font-bold tracking-tight text-zinc-950">İçtihat arama ve raporlama</h3>
|
|
||||||
<p className="mt-4 max-w-[42ch] text-[15px] leading-relaxed text-zinc-500">
|
|
||||||
Doğal dille arayın, AyrisLegal sizin için en alakalı Yargıtay, Danıştay ve AYM kararlarını bulsun, okusun ve kapsamlı bir içtihat raporu hazırlasın.
|
|
||||||
</p>
|
|
||||||
</Reveal>
|
|
||||||
<Reveal delay={0.08}>
|
|
||||||
<BrowserFrame>
|
|
||||||
<div className="grid grid-cols-2 divide-x divide-zinc-100">
|
|
||||||
<div className="p-4">
|
|
||||||
<div className="mb-2.5 text-[10.5px] font-bold uppercase tracking-wide text-zinc-400">Sonuçlar (50)</div>
|
|
||||||
{[
|
|
||||||
{ chamber: 'Ceza Genel Kurulu', esas: '2020/165', karar: '2021/273' },
|
|
||||||
{ chamber: '1. Ceza Dairesi', esas: '2023/5798', karar: '2023/5821' },
|
|
||||||
].map(r => (
|
|
||||||
<div key={r.esas} className="mb-2 rounded-xl border border-zinc-100 p-2.5">
|
|
||||||
<div className="mb-1 flex items-center gap-1.5">
|
|
||||||
<span className="rounded-full px-1.5 py-0.5 text-[8.5px] font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>YARGITAY</span>
|
|
||||||
<span className="text-[10px] text-zinc-400">{r.chamber}</span>
|
|
||||||
</div>
|
|
||||||
<div className="text-[12px] font-bold text-zinc-800">E. {r.esas} - K. {r.karar}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="p-4">
|
|
||||||
<div className="mb-2 flex items-center gap-1.5 text-[12px] font-bold text-zinc-800">
|
|
||||||
<Sparkles size={13} strokeWidth={2.5} style={{ color: ACCENT }} /> İçtihat Raporu
|
|
||||||
</div>
|
|
||||||
<p className="text-[11px] leading-relaxed text-zinc-500">
|
|
||||||
<b className="text-zinc-800">1. Alaka Puanı ve Durum</b><br />
|
|
||||||
Sunulan 48 karardan yaklaşık 15 tanesi doğrudan uyuşmazlığın esasına ilişkindir…
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</BrowserFrame>
|
|
||||||
</Reveal>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* ══════════════════════════════ BENTO — özellik ızgarası (3-eşit-kart YOK) ═══════ */}
|
|
||||||
<section className="bg-zinc-50/70 py-20 md:py-28">
|
|
||||||
<div className="mx-auto max-w-[1400px] px-5 md:px-16">
|
|
||||||
<Reveal>
|
|
||||||
<div className="mb-14 max-w-[50ch]">
|
|
||||||
<span className="font-mono text-[12px] font-semibold uppercase tracking-wider text-zinc-400">Tek Platform</span>
|
|
||||||
<h2 className="mt-3 text-[clamp(26px,3.2vw,38px)] font-extrabold tracking-tighter text-zinc-950">Bizzat mahkemeye gitmek dışında her şey burada</h2>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-[1.4fr_1fr] md:grid-rows-2">
|
|
||||||
{/* Büyük kart — sohbet, 2 satır boyu */}
|
|
||||||
<Reveal className="md:row-span-2">
|
|
||||||
<div className="flex h-full flex-col justify-between rounded-[1.75rem] p-9 text-white" style={{ background: `linear-gradient(150deg, ${ACCENT}, ${ACCENT_DARK})` }}>
|
|
||||||
<div>
|
|
||||||
<MessageSquare size={26} strokeWidth={2} />
|
|
||||||
<h3 className="mt-5 text-2xl font-extrabold tracking-tight">Dosyalarınızla sohbet edin</h3>
|
|
||||||
<p className="mt-3 max-w-[42ch] text-[14.5px] leading-relaxed text-white/85">
|
|
||||||
Dava dosyalarınızı yükleyin, AyrisLegal sizin için hepsini saniyeler içinde okuyup analiz etsin — Türk hukuk sistemine özel eğitilmiş yapay zekasıyla dilekçe taslakları hazırlasın.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<span className="mt-8 inline-flex w-fit items-center gap-2 rounded-full bg-white/15 px-4 py-2 text-[12.5px] font-semibold">
|
|
||||||
<Landmark size={14} strokeWidth={2.5} /> Türk hukukuna özel yapay zeka
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
|
|
||||||
<Reveal delay={0.06}>
|
|
||||||
<div className="h-full rounded-[1.75rem] border border-zinc-200/70 bg-white p-7">
|
|
||||||
<FileText size={22} strokeWidth={2} className="text-zinc-400" />
|
|
||||||
<h3 className="mt-4 text-lg font-bold text-zinc-950">Dilekçe asistanı</h3>
|
|
||||||
<p className="mt-2 text-[13.5px] leading-relaxed text-zinc-500">
|
|
||||||
Belgeleri, analizleri ve içtihat araştırmalarını bağlam olarak ekleyin, profesyonel dilekçeler hazırlayın.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
|
|
||||||
<Reveal delay={0.12}>
|
|
||||||
<div className="h-full rounded-[1.75rem] border border-zinc-200/70 bg-white p-7">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Search size={22} strokeWidth={2} className="text-zinc-400" />
|
|
||||||
<span className="rounded-full bg-zinc-100 px-2.5 py-1 text-[10.5px] font-bold text-zinc-500">UYAP Chrome Eklentisi</span>
|
|
||||||
</div>
|
|
||||||
<h3 className="mt-4 text-lg font-bold text-zinc-950">Akıllı içtihat arama & UDF desteği</h3>
|
|
||||||
<p className="mt-2 text-[13.5px] leading-relaxed text-zinc-500">
|
|
||||||
En alakalı kararları bulur, okur. UYAP formatındaki (UDF) dosyalarınızı otomatik OCR ile doğrudan yükleyin.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* İkinci sıra — asimetrik 3'lü, eşit değil (2fr/1fr/1fr) */}
|
|
||||||
<div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-[1.3fr_1fr_1fr]">
|
|
||||||
<Reveal>
|
|
||||||
<div className="h-full rounded-[1.75rem] border border-zinc-200/70 bg-white p-7">
|
|
||||||
<div className="grid grid-cols-3 gap-2">
|
|
||||||
{[
|
|
||||||
{ icon: FolderOpen, label: 'Evrak Yönetimi' },
|
|
||||||
{ icon: FileText, label: 'Dilekçe Sistemi' },
|
|
||||||
{ icon: Search, label: 'İçtihat Arama' },
|
|
||||||
].map(c => (
|
|
||||||
<div key={c.label} className="rounded-xl bg-zinc-50 p-3 text-center">
|
|
||||||
<c.icon size={18} strokeWidth={2} className="mx-auto text-zinc-500" />
|
|
||||||
<div className="mt-1.5 text-[10.5px] font-semibold text-zinc-600">{c.label}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<h3 className="mt-5 text-base font-bold text-zinc-950">Tüm büro ihtiyaçlarınız tek yerde</h3>
|
|
||||||
<p className="mt-1.5 text-[13px] leading-relaxed text-zinc-500">Dava yönetiminden UYAP entegrasyonuna kadar.</p>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
<Reveal delay={0.06}>
|
|
||||||
<div className="flex h-full flex-col rounded-[1.75rem] border border-zinc-200/70 bg-white p-7">
|
|
||||||
<GraduationCap size={22} strokeWidth={2} className="text-zinc-400" />
|
|
||||||
<h3 className="mt-4 text-base font-bold text-zinc-950">Dijital stajyer</h3>
|
|
||||||
<p className="mt-2 text-[13px] leading-relaxed text-zinc-500">Uzun soluklu araştırma görevlerini AyrisLegal'a devredin.</p>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
<Reveal delay={0.12}>
|
|
||||||
<div className="flex h-full flex-col rounded-[1.75rem] border border-zinc-200/70 bg-white p-7">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Users2 size={22} strokeWidth={2} className="text-zinc-400" />
|
|
||||||
<span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[9.5px] font-bold text-zinc-500">YAKINDA</span>
|
|
||||||
</div>
|
|
||||||
<h3 className="mt-4 text-base font-bold text-zinc-950">Ekip paylaşımı</h3>
|
|
||||||
<p className="mt-2 text-[13px] leading-relaxed text-zinc-500">Büronuzla ortak çalışma alanı.</p>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* ══════════════════════════════ GÜVEN — koyu zemin, saf siyah değil ═══════ */}
|
|
||||||
<section className="bg-zinc-950 py-20 text-white md:py-28">
|
|
||||||
<div className="mx-auto max-w-[1200px] px-5 md:px-16">
|
|
||||||
<Reveal>
|
|
||||||
<div className="mb-14 max-w-[56ch]">
|
|
||||||
<span className="font-mono text-[12px] font-semibold uppercase tracking-wider text-zinc-500">Güven</span>
|
|
||||||
<h2 className="mt-3 text-[clamp(26px,3.2vw,38px)] font-extrabold tracking-tighter">Dosyalarınız sizin kalır</h2>
|
|
||||||
<p className="mt-3 text-[15px] text-zinc-400">Bir dava dosyası, bir avukatın elindeki en hassas belgedir. AyrisLegal'ı bu bilinçle kuruyoruz.</p>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
<div className="grid grid-cols-1 gap-px overflow-hidden rounded-3xl bg-white/10 sm:grid-cols-2 lg:grid-cols-4">
|
|
||||||
{[
|
|
||||||
{ icon: Lock, title: 'Yerel şifreli saklama', desc: 'Hassas veriler işletim sisteminizin kendi güvenli katmanıyla şifrelenir.' },
|
|
||||||
{ icon: Cloud, title: 'Kendi Drive’ınıza yedekleme', desc: 'Yedekleme bizim sunucularımıza değil, sizin Drive hesabınıza yapılır.' },
|
|
||||||
{ icon: ShieldCheck, title: 'Sadece sizin analiziniz', desc: 'Belgeleriniz başka kullanıcılarla paylaşılmaz.' },
|
|
||||||
{ icon: CheckCircle2, title: 'Son karar her zaman sizde', desc: 'AyrisLegal analiz ve taslak üretir, nihai kontrol sizde kalır.' },
|
|
||||||
].map((item, i) => (
|
|
||||||
<Reveal key={item.title} delay={i * 0.05}>
|
|
||||||
<div className="h-full bg-zinc-950 p-7">
|
|
||||||
<item.icon size={20} strokeWidth={2} style={{ color: ACCENT }} />
|
|
||||||
<h3 className="mt-4 text-[14px] font-bold">{item.title}</h3>
|
|
||||||
<p className="mt-2 text-[12.5px] leading-relaxed text-zinc-500">{item.desc}</p>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* ══════════════════════════════ FİYATLANDIRMA ═══════════════════ */}
|
|
||||||
<section id="fiyatlandirma" className="mx-auto max-w-[1100px] px-5 py-20 md:px-16 md:py-28">
|
|
||||||
<Reveal>
|
|
||||||
<div className="mb-3 text-center">
|
|
||||||
<span className="font-mono text-[12px] font-semibold uppercase tracking-wider text-zinc-400">Fiyatlandırma</span>
|
|
||||||
<h2 className="mt-3 text-[clamp(26px,3.2vw,38px)] font-extrabold tracking-tighter text-zinc-950">İhtiyacınıza uygun modeller</h2>
|
|
||||||
<p className="mt-3 text-[15px] text-zinc-500">Basit, şeffaf fiyatlandırma — gizli ücret yok.</p>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
<Reveal delay={0.05}>
|
|
||||||
<div className="mb-10 flex justify-center">
|
|
||||||
<div className="inline-flex gap-1 rounded-full bg-zinc-100 p-1">
|
|
||||||
<button onClick={() => setPricingYearly(true)} className={`rounded-full px-4.5 px-[18px] py-2 text-[13.5px] font-bold transition-colors ${pricingYearly ? 'bg-white text-zinc-900 shadow-sm' : 'text-zinc-500'}`}>Yıllık</button>
|
|
||||||
<button onClick={() => setPricingYearly(false)} className={`rounded-full px-[18px] py-2 text-[13.5px] font-bold transition-colors ${!pricingYearly ? 'bg-white text-zinc-900 shadow-sm' : 'text-zinc-500'}`}>Aylık bilgi al</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
|
||||||
<Reveal delay={0.08}>
|
|
||||||
<div className="flex h-full flex-col rounded-[1.75rem] border border-zinc-200 p-9">
|
|
||||||
<p className="text-[12.5px] font-bold uppercase tracking-wide" style={{ color: ACCENT }}>Bireysel Avukat</p>
|
|
||||||
<p className="mt-2.5 text-[42px] font-extrabold tracking-tighter text-zinc-950">
|
|
||||||
{pricingYearly ? '40.000 ₺' : 'Bilgi Al'}
|
|
||||||
{pricingYearly && <span className="text-[15px] font-medium text-zinc-400"> / yıl</span>}
|
|
||||||
</p>
|
|
||||||
<p className="mt-4 text-[14px] text-zinc-500">Serbest çalışan avukatlar için tasarlanmış yapay zeka çalışma ortağı.</p>
|
|
||||||
<div className="my-6 border-t border-zinc-100" />
|
|
||||||
<ul className="mb-7 flex flex-col gap-3">
|
|
||||||
{['Sınırsız dosya analizi', 'AI tartışma ortağı', 'İçtihat arama', 'Dilekçe taslağı üretimi'].map(item => (
|
|
||||||
<li key={item} className="flex items-center gap-2.5 text-[14px] text-zinc-700">
|
|
||||||
<CheckCircle2 size={16} strokeWidth={2.5} className="text-emerald-600" />{item}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
<a href="#iletisim" className="mt-auto rounded-full border border-zinc-200 py-3.5 text-center text-[14.5px] font-bold text-zinc-900 transition-colors hover:bg-zinc-50">Ücretsiz Deneyin</a>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
<Reveal delay={0.14}>
|
|
||||||
<div className="relative flex h-full flex-col rounded-[1.75rem] border p-9" style={{ borderColor: ACCENT, background: ACCENT_SOFT }}>
|
|
||||||
<span className="absolute -top-3 left-9 rounded-full px-3.5 py-1 text-[11px] font-bold text-white" style={{ background: ACCENT }}>Ekip Çalışması</span>
|
|
||||||
<p className="text-[12.5px] font-bold uppercase tracking-wide" style={{ color: ACCENT_DARK }}>Hukuk Bürosu</p>
|
|
||||||
<p className="mt-2.5 text-[30px] font-extrabold tracking-tighter text-zinc-950">Özel Fiyatlandırma</p>
|
|
||||||
<p className="mt-4 text-[14px] text-zinc-600">Tüm ekibiniz için paylaşımlı çalışma alanı, dosya yönetimi ve özel entegrasyonlar.</p>
|
|
||||||
<div className="my-6 border-t border-black/10" />
|
|
||||||
<ul className="mb-7 flex flex-col gap-3">
|
|
||||||
{['Tüm bireysel özellikler', 'Ekip içi dosya paylaşımı', 'Ortak içtihat havuzu', 'Kurucu ekiple özel destek'].map(item => (
|
|
||||||
<li key={item} className="flex items-center gap-2.5 text-[14px] text-zinc-800">
|
|
||||||
<CheckCircle2 size={16} strokeWidth={2.5} style={{ color: ACCENT_DARK }} />{item}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
<a href="#iletisim" className="mt-auto rounded-full py-3.5 text-center text-[14.5px] font-bold text-white transition-colors" style={{ background: ACCENT }}>İletişime Geçin</a>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* ══════════════════════════════ SSS ══════════════════════════════ */}
|
|
||||||
<section id="sss" className="mx-auto max-w-[900px] px-5 py-20 md:px-16 md:py-28">
|
|
||||||
<Reveal>
|
|
||||||
<h2 className="mb-12 text-center text-[clamp(26px,3.2vw,38px)] font-extrabold tracking-tighter text-zinc-950">Muhtemelen bunları soracaksınız</h2>
|
|
||||||
</Reveal>
|
|
||||||
<div className="divide-y divide-zinc-100 border-y border-zinc-100">
|
|
||||||
{[
|
|
||||||
{ q: 'Müvekkil dosyalarım nerede saklanıyor, kim görebilir?', a: 'Belgeler yerel şifreli depolamada tutulur, yedekleme sizin kendi Google Drive hesabınıza yapılır. Başka kullanıcı veya üçüncü tarafla paylaşılmaz.' },
|
|
||||||
{ q: 'Yapay zeka yanlış bir şey söylerse sorumluluk kimde?', a: 'AyrisLegal karar organı değildir — analiz, taslak ve öneri üretir. Ürettiği emsal kararlar gerçek esas/karar numaralarıyla gelir, kaynağından doğrulanabilir. Nihai değerlendirme ve imza her zaman sizde kalır.' },
|
|
||||||
{ q: 'UYAP şifremi AyrisLegal ile paylaşmam gerekiyor mu?', a: 'Hayır. UYAP eklentisi tarayıcınızda zaten açık olan oturumu kullanır — kimlik bilgileriniz hiçbir zaman AyrisLegal sunucularına iletilmez ya da saklanmaz.' },
|
|
||||||
{ q: 'Büromdaki diğer avukatlarla paylaşabilir miyim?', a: 'Şu an platform bireysel avukat için tasarlandı. Ekip/büro paylaşımı yol haritamızda — Hukuk Bürosu planı için iletişime geçin.' },
|
|
||||||
].map(item => (
|
|
||||||
<Reveal key={item.q}>
|
|
||||||
<div className="py-6">
|
|
||||||
<h3 className="flex items-start gap-2 text-[15.5px] font-bold text-zinc-900">
|
|
||||||
<ChevronRight size={17} strokeWidth={2.5} className="mt-0.5 shrink-0" style={{ color: ACCENT }} />
|
|
||||||
{item.q}
|
|
||||||
</h3>
|
|
||||||
<p className="mt-2 pl-[25px] text-[14px] leading-relaxed text-zinc-500">{item.a}</p>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* ══════════════════════════════ İLETİŞİM ═════════════════════════ */}
|
|
||||||
<section id="iletisim" className="bg-zinc-50/70 py-20 md:py-28">
|
|
||||||
<div className="mx-auto grid max-w-[1100px] grid-cols-1 gap-12 px-5 md:grid-cols-[1fr_1.2fr] md:px-16">
|
|
||||||
<Reveal>
|
|
||||||
<h2 className="text-[clamp(24px,3vw,30px)] font-extrabold tracking-tighter text-zinc-950">
|
|
||||||
Şu an müşteri referansı göstermiyoruz — kasıtlı olarak.
|
|
||||||
</h2>
|
|
||||||
<p className="mt-4 text-[14.5px] leading-relaxed text-zinc-500">
|
|
||||||
AyrisLegal yeni. Sahte ya da ödünç yorumlar yerine dürüst olmayı seçtik: platformu kurucu ekiple birlikte, doğrudan geri bildiriminizle şekillendiriyoruz.
|
|
||||||
</p>
|
|
||||||
<ul className="mt-7 flex flex-col gap-3">
|
|
||||||
{['Formu doldurun', 'Kurucu ekipten biri sizi arar', '15 dakikalık canlı demoda dosyanızla test edersiniz'].map((step, i) => (
|
|
||||||
<li key={step} className="flex items-center gap-3 text-[14px] text-zinc-600">
|
|
||||||
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white" style={{ background: ACCENT }}>{i + 1}</span>
|
|
||||||
{step}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</Reveal>
|
|
||||||
<Reveal delay={0.08}>
|
|
||||||
<ContactFormV2 />
|
|
||||||
</Reveal>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* ══════════════════════════════ FOOTER ═══════════════════════════ */}
|
|
||||||
<footer className="mx-auto flex max-w-[1400px] flex-wrap items-center justify-between gap-3 border-t border-zinc-100 px-5 py-8 text-[13px] text-zinc-400 md:px-16">
|
|
||||||
<span>© {new Date().getFullYear()} AyrisLegal — Ayris Tech'in bir ürünüdür.</span>
|
|
||||||
<a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="text-zinc-400 hover:text-zinc-600">Created by ayris.tech</a>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,146 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import { useState } from 'react'
|
|
||||||
|
|
||||||
type FormState = 'idle' | 'loading' | 'success' | 'error'
|
|
||||||
|
|
||||||
const T = {
|
|
||||||
ink: '#0B1220',
|
|
||||||
inkSoft: 'rgba(11,18,32,0.6)',
|
|
||||||
border: 'rgba(11,18,32,0.12)',
|
|
||||||
orange: '#F2600C',
|
|
||||||
orangeSoft: '#FFF1E6',
|
|
||||||
fontHead: '"Archivo", sans-serif',
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ContactFormV2() {
|
|
||||||
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 style={{ borderRadius: '24px', padding: '40px', textAlign: 'center', background: T.orangeSoft, border: `1px solid ${T.border}` }}>
|
|
||||||
<div style={{ width: '48px', height: '48px', borderRadius: '50%', background: T.orange, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px', color: '#fff', fontSize: '22px' }}>✓</div>
|
|
||||||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '20px', margin: '0 0 8px', color: T.ink }}>Talebiniz alındı!</h3>
|
|
||||||
<p style={{ fontSize: '14px', margin: 0, color: T.inkSoft }}>
|
|
||||||
Kurucu ekipten kısa süre içinde size dönüş yapılacak.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const inputStyle: React.CSSProperties = {
|
|
||||||
width: '100%', minHeight: '46px', padding: '10px 16px',
|
|
||||||
fontFamily: 'inherit', fontSize: '14px', color: T.ink,
|
|
||||||
background: '#fff',
|
|
||||||
border: `1.5px solid ${T.border}`,
|
|
||||||
borderRadius: '12px',
|
|
||||||
transition: 'border-color .15s, box-shadow .15s',
|
|
||||||
boxSizing: 'border-box',
|
|
||||||
outline: 'none',
|
|
||||||
}
|
|
||||||
|
|
||||||
const labelStyle: React.CSSProperties = {
|
|
||||||
display: 'block', fontSize: '13px', fontWeight: 600,
|
|
||||||
marginBottom: '6px', color: T.ink,
|
|
||||||
}
|
|
||||||
|
|
||||||
const focusOn = (e: React.FocusEvent<HTMLInputElement>) => {
|
|
||||||
e.target.style.borderColor = T.orange
|
|
||||||
e.target.style.boxShadow = `0 0 0 4px ${T.orangeSoft}`
|
|
||||||
}
|
|
||||||
const focusOff = (e: React.FocusEvent<HTMLInputElement>) => {
|
|
||||||
e.target.style.borderColor = T.border
|
|
||||||
e.target.style.boxShadow = 'none'
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
style={{
|
|
||||||
display: 'grid',
|
|
||||||
gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))',
|
|
||||||
gap: '18px',
|
|
||||||
borderRadius: '24px',
|
|
||||||
border: `1px solid ${T.border}`,
|
|
||||||
padding: '32px',
|
|
||||||
background: '#fff',
|
|
||||||
boxShadow: '0 12px 40px rgba(11,18,32,0.06)',
|
|
||||||
}}
|
|
||||||
noValidate
|
|
||||||
>
|
|
||||||
<div aria-hidden="true" style={{ display: 'none' }} tabIndex={-1}>
|
|
||||||
<input type="text" name="_hp" value={form._hp} onChange={set('_hp')} autoComplete="off" tabIndex={-1} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style={{ gridColumn: 'span 1' }}>
|
|
||||||
<label style={labelStyle} htmlFor="af2_name">Ad Soyad <span style={{ color: T.orange }}>*</span></label>
|
|
||||||
<input id="af2_name" type="text" required placeholder="Av. Ayşe Yılmaz" value={form.name} onChange={set('name')} style={inputStyle} onFocus={focusOn} onBlur={focusOff} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label style={labelStyle} htmlFor="af2_org">Büro / Kurum</label>
|
|
||||||
<input id="af2_org" type="text" placeholder="Yılmaz Hukuk Bürosu" value={form.org} onChange={set('org')} style={inputStyle} onFocus={focusOn} onBlur={focusOff} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label style={labelStyle} htmlFor="af2_email">E-posta <span style={{ color: T.orange }}>*</span></label>
|
|
||||||
<input id="af2_email" type="email" required placeholder="ayse@buro.com" value={form.email} onChange={set('email')} style={inputStyle} onFocus={focusOn} onBlur={focusOff} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label style={labelStyle} htmlFor="af2_phone">Telefon</label>
|
|
||||||
<input id="af2_phone" type="tel" placeholder="0532 000 00 00" value={form.phone} onChange={set('phone')} style={inputStyle} onFocus={focusOn} onBlur={focusOff} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{state === 'error' && (
|
|
||||||
<div style={{ gridColumn: '1 / -1', fontSize: '13px', color: '#DC2626' }}>
|
|
||||||
Bir hata oluştu. Lütfen tekrar deneyin veya{' '}
|
|
||||||
<a href="mailto:info@ayris.tech" style={{ color: '#DC2626' }}>info@ayris.tech</a> adresine yazın.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={state === 'loading'}
|
|
||||||
style={{
|
|
||||||
gridColumn: '1 / -1',
|
|
||||||
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
|
|
||||||
cursor: state === 'loading' ? 'not-allowed' : 'pointer',
|
|
||||||
fontFamily: 'inherit', fontWeight: 700, fontSize: '15px',
|
|
||||||
color: '#fff',
|
|
||||||
background: T.orange,
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '15px',
|
|
||||||
transition: 'background .15s, transform .1s',
|
|
||||||
opacity: state === 'loading' ? 0.7 : 1,
|
|
||||||
marginTop: '4px',
|
|
||||||
}}
|
|
||||||
onMouseEnter={e => { if (state !== 'loading') (e.currentTarget as HTMLElement).style.background = '#D94E00' }}
|
|
||||||
onMouseLeave={e => { if (state !== 'loading') (e.currentTarget as HTMLElement).style.background = T.orange }}
|
|
||||||
>
|
|
||||||
{state === 'loading' ? 'Gönderiliyor…' : 'Demo Talep Et →'}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,165 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
type FormState = 'idle' | 'loading' | 'success' | 'error'
|
||||||
|
|
||||||
|
const T = {
|
||||||
|
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() {
|
||||||
|
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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Success */
|
||||||
|
if (state === 'success') {
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const inputStyle: React.CSSProperties = {
|
||||||
|
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: '10.5px', letterSpacing: '0.1em', textTransform: 'uppercase',
|
||||||
|
marginBottom: '6px', color: T.inkSoft, fontFamily: T.fontMono, fontWeight: 600,
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))',
|
||||||
|
gap: '16px',
|
||||||
|
border: `2px solid ${T.ink}`,
|
||||||
|
padding: '28px',
|
||||||
|
background: '#fff',
|
||||||
|
}}
|
||||||
|
noValidate
|
||||||
|
>
|
||||||
|
{/* Honeypot */}
|
||||||
|
<div aria-hidden="true" style={{ display: 'none' }} tabIndex={-1}>
|
||||||
|
<input type="text" name="_hp" value={form._hp} onChange={set('_hp')} autoComplete="off" tabIndex={-1} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ gridColumn: 'span 1' }}>
|
||||||
|
<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.red)}
|
||||||
|
onBlur={e => (e.target.style.borderColor = T.divider)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label style={labelStyle} 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')}
|
||||||
|
style={inputStyle}
|
||||||
|
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.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.red)}
|
||||||
|
onBlur={e => (e.target.style.borderColor = T.divider)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label style={labelStyle} htmlFor="af_phone">Telefon</label>
|
||||||
|
<input
|
||||||
|
id="af_phone" type="tel"
|
||||||
|
placeholder="0532 000 00 00"
|
||||||
|
value={form.phone} onChange={set('phone')}
|
||||||
|
style={inputStyle}
|
||||||
|
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: '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.red }}>info@ayris.tech</a> adresine yazın.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
id="contact_submit"
|
||||||
|
type="submit"
|
||||||
|
disabled={state === 'loading'}
|
||||||
|
style={{
|
||||||
|
gridColumn: '1 / -1',
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px',
|
||||||
|
cursor: state === 'loading' ? 'not-allowed' : 'pointer',
|
||||||
|
textDecoration: 'none',
|
||||||
|
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 = 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ÖNDERİLİYOR…' : 'DEMO TALEP ET'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
+34
-96
@@ -1,18 +1,13 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
import { CheckCircle2 } from 'lucide-react'
|
||||||
|
|
||||||
type FormState = 'idle' | 'loading' | 'success' | 'error'
|
type FormState = 'idle' | 'loading' | 'success' | 'error'
|
||||||
|
|
||||||
const T = {
|
const ACCENT = '#E61919'
|
||||||
bg: '#F4F4F0',
|
const ACCENT_DARK = '#B8140F'
|
||||||
ink: '#0A0A0A',
|
const ACCENT_SOFT = '#FDEEEC'
|
||||||
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() {
|
export default function ContactForm() {
|
||||||
const [state, setState] = useState<FormState>('idle')
|
const [state, setState] = useState<FormState>('idle')
|
||||||
@@ -37,128 +32,71 @@ export default function ContactForm() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Success */
|
|
||||||
if (state === 'success') {
|
if (state === 'success') {
|
||||||
return (
|
return (
|
||||||
<div style={{ border: `2px solid ${T.ink}`, padding: '36px', textAlign: 'center', background: '#fff' }}>
|
<div className="rounded-3xl border border-zinc-200/70 p-10 text-center" style={{ background: ACCENT_SOFT }}>
|
||||||
<span style={{ display: 'inline-block', fontSize: '10.5px', letterSpacing: '0.12em', color: T.red, fontFamily: T.fontMono, fontWeight: 700, marginBottom: '10px' }}>STATUS: RECEIVED</span>
|
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full text-white" style={{ background: ACCENT }}>
|
||||||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: '20px', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '-0.01em' }}>Talebiniz alındı.</h3>
|
<CheckCircle2 size={22} strokeWidth={2.5} />
|
||||||
<p style={{ fontSize: '13px', margin: 0, color: T.inkSoft, fontFamily: T.fontMono }}>
|
</div>
|
||||||
Kurucu ekipten kısa süre içinde size dönüş yapılacak.
|
<h3 className="text-xl font-extrabold tracking-tight text-zinc-950">Talebiniz alındı!</h3>
|
||||||
</p>
|
<p className="mt-2 text-sm text-zinc-500">Kurucu ekipten kısa süre içinde size dönüş yapılacak.</p>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const inputStyle: React.CSSProperties = {
|
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)]'
|
||||||
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: '10.5px', letterSpacing: '0.1em', textTransform: 'uppercase',
|
|
||||||
marginBottom: '6px', color: T.inkSoft, fontFamily: T.fontMono, fontWeight: 600,
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form
|
<form
|
||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
style={{
|
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"
|
||||||
display: 'grid',
|
style={{ ['--accent' as string]: ACCENT }}
|
||||||
gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))',
|
|
||||||
gap: '16px',
|
|
||||||
border: `2px solid ${T.ink}`,
|
|
||||||
padding: '28px',
|
|
||||||
background: '#fff',
|
|
||||||
}}
|
|
||||||
noValidate
|
noValidate
|
||||||
>
|
>
|
||||||
{/* Honeypot */}
|
<div aria-hidden="true" className="hidden">
|
||||||
<div aria-hidden="true" style={{ display: 'none' }} tabIndex={-1}>
|
|
||||||
<input type="text" name="_hp" value={form._hp} onChange={set('_hp')} autoComplete="off" tabIndex={-1} />
|
<input type="text" name="_hp" value={form._hp} onChange={set('_hp')} autoComplete="off" tabIndex={-1} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ gridColumn: 'span 1' }}>
|
<div className="sm:col-span-1">
|
||||||
<label style={labelStyle} htmlFor="af_name">Ad Soyad <span style={{ color: T.red }}>*</span></label>
|
<label className="mb-1.5 block text-[13px] font-semibold text-zinc-900" htmlFor="af_name">
|
||||||
<input
|
Ad Soyad <span style={{ color: ACCENT }}>*</span>
|
||||||
id="af_name" type="text" required
|
</label>
|
||||||
placeholder="Av. Ayşe Yılmaz"
|
<input id="af_name" type="text" required placeholder="Av. Ayşe Yılmaz" value={form.name} onChange={set('name')} className={inputClass} />
|
||||||
value={form.name} onChange={set('name')}
|
|
||||||
style={inputStyle}
|
|
||||||
onFocus={e => (e.target.style.borderColor = T.red)}
|
|
||||||
onBlur={e => (e.target.style.borderColor = T.divider)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label style={labelStyle} htmlFor="af_org">Büro / Kurum</label>
|
<label className="mb-1.5 block text-[13px] font-semibold text-zinc-900" htmlFor="af_org">Büro / Kurum</label>
|
||||||
<input
|
<input id="af_org" type="text" placeholder="Yılmaz Hukuk Bürosu" value={form.org} onChange={set('org')} className={inputClass} />
|
||||||
id="af_org" type="text"
|
|
||||||
placeholder="Yılmaz Hukuk Bürosu"
|
|
||||||
value={form.org} onChange={set('org')}
|
|
||||||
style={inputStyle}
|
|
||||||
onFocus={e => (e.target.style.borderColor = T.red)}
|
|
||||||
onBlur={e => (e.target.style.borderColor = T.divider)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label style={labelStyle} htmlFor="af_email">E-posta <span style={{ color: T.red }}>*</span></label>
|
<label className="mb-1.5 block text-[13px] font-semibold text-zinc-900" htmlFor="af_email">
|
||||||
<input
|
E-posta <span style={{ color: ACCENT }}>*</span>
|
||||||
id="af_email" type="email" required
|
</label>
|
||||||
placeholder="ayse@buro.com"
|
<input id="af_email" type="email" required placeholder="ayse@buro.com" value={form.email} onChange={set('email')} className={inputClass} />
|
||||||
value={form.email} onChange={set('email')}
|
|
||||||
style={inputStyle}
|
|
||||||
onFocus={e => (e.target.style.borderColor = T.red)}
|
|
||||||
onBlur={e => (e.target.style.borderColor = T.divider)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label style={labelStyle} htmlFor="af_phone">Telefon</label>
|
<label className="mb-1.5 block text-[13px] font-semibold text-zinc-900" htmlFor="af_phone">Telefon</label>
|
||||||
<input
|
<input id="af_phone" type="tel" placeholder="0532 000 00 00" value={form.phone} onChange={set('phone')} className={inputClass} />
|
||||||
id="af_phone" type="tel"
|
|
||||||
placeholder="0532 000 00 00"
|
|
||||||
value={form.phone} onChange={set('phone')}
|
|
||||||
style={inputStyle}
|
|
||||||
onFocus={e => (e.target.style.borderColor = T.red)}
|
|
||||||
onBlur={e => (e.target.style.borderColor = T.divider)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{state === 'error' && (
|
{state === 'error' && (
|
||||||
<div style={{ gridColumn: '1 / -1', fontSize: '12.5px', color: T.red, fontFamily: T.fontMono }}>
|
<div className="text-[13px] text-red-600 sm:col-span-2">
|
||||||
Bir hata oluştu. Lütfen tekrar deneyin veya{' '}
|
Bir hata oluştu. Lütfen tekrar deneyin veya{' '}
|
||||||
<a href="mailto:info@ayris.tech" style={{ color: T.red }}>info@ayris.tech</a> adresine yazın.
|
<a href="mailto:info@ayris.tech" className="underline">info@ayris.tech</a> adresine yazın.
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<button
|
<button
|
||||||
id="contact_submit"
|
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={state === 'loading'}
|
disabled={state === 'loading'}
|
||||||
style={{
|
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"
|
||||||
gridColumn: '1 / -1',
|
style={{ background: ACCENT }}
|
||||||
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px',
|
onMouseEnter={e => { if (state !== 'loading') (e.currentTarget as HTMLElement).style.background = ACCENT_DARK }}
|
||||||
cursor: state === 'loading' ? 'not-allowed' : 'pointer',
|
onMouseLeave={e => { if (state !== 'loading') (e.currentTarget as HTMLElement).style.background = ACCENT }}
|
||||||
textDecoration: 'none',
|
|
||||||
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 = 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ÖNDERİLİYOR…' : 'DEMO TALEP ET'}
|
{state === 'loading' ? 'Gönderiliyor…' : 'Demo Talep Et →'}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user