573 lines
41 KiB
TypeScript
573 lines
41 KiB
TypeScript
'use client'
|
||
|
||
import { useRef, useState } from 'react'
|
||
import { motion, useInView } from 'framer-motion'
|
||
import ContactFormV2 from '@/components/contact-form-v2'
|
||
|
||
/* ─── Design tokens (Modern SaaS / warm & rounded) ─────────────────────── */
|
||
const T = {
|
||
bg: '#FFFFFF',
|
||
bgSoft: '#FFF8F1',
|
||
ink: '#0B1220',
|
||
inkSoft: 'rgba(11,18,32,0.62)',
|
||
inkFaint: 'rgba(11,18,32,0.42)',
|
||
orange: '#F2600C',
|
||
orangeDark:'#D94E00',
|
||
orangeSoft:'#FFEDD9',
|
||
navy: '#16223D',
|
||
navySoft: '#EEF2FB',
|
||
green: '#0F9D6E',
|
||
greenSoft: '#E4F7EF',
|
||
border: 'rgba(11,18,32,0.08)',
|
||
fontHead: '"Archivo", sans-serif',
|
||
}
|
||
|
||
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: 18 }}
|
||
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 18 }}
|
||
transition={{ duration: 0.5, ease: 'easeOut', delay }}
|
||
className={className}
|
||
>
|
||
{children}
|
||
</motion.div>
|
||
)
|
||
}
|
||
|
||
/* ─── Mock "browser window" chrome wrapper ─────────────────────────────── */
|
||
function BrowserFrame({ children, width = '100%' }: { children: React.ReactNode; width?: string }) {
|
||
return (
|
||
<div style={{ width, borderRadius: '18px', overflow: 'hidden', background: '#fff', border: `1px solid ${T.border}`, boxShadow: '0 30px 70px -20px rgba(11,18,32,0.25)' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '12px 16px', background: '#F4F5F7', borderBottom: `1px solid ${T.border}` }}>
|
||
<span style={{ width: 10, height: 10, borderRadius: '50%', background: '#FF5F57' }} />
|
||
<span style={{ width: 10, height: 10, borderRadius: '50%', background: '#FEBC2E' }} />
|
||
<span style={{ width: 10, height: 10, borderRadius: '50%', background: '#28C840' }} />
|
||
<span style={{ flex: 1, textAlign: 'center', fontSize: '12px', color: T.inkFaint, fontWeight: 500 }}>ayrislegal.com</span>
|
||
</div>
|
||
<div style={{ background: '#fff' }}>{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 style={{ background: T.bg, color: T.ink, fontFamily: '"Archivo", ui-sans-serif, system-ui, sans-serif', minHeight: '100vh' }}>
|
||
<style>{`
|
||
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');
|
||
* { box-sizing: border-box; }
|
||
body { margin: 0; }
|
||
a { color: inherit; }
|
||
:focus-visible { outline: 2px solid ${T.orange}; outline-offset: 2px; }
|
||
::selection { background: ${T.orangeSoft}; color: ${T.ink}; }
|
||
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-weight: 700; font-size: 15px; color: #fff; background: ${T.orange}; border: none; border-radius: 999px; padding: 15px 28px; transition: background .15s, transform .1s; }
|
||
.btn-primary:hover { background: ${T.orangeDark}; transform: translateY(-1px); }
|
||
.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-weight: 700; font-size: 15px; color: ${T.ink}; background: #fff; border: 1.5px solid ${T.border}; border-radius: 999px; padding: 15px 28px; transition: border-color .15s, background .15s; }
|
||
.btn-outline:hover { border-color: ${T.ink}; background: ${T.navySoft}; }
|
||
.nav-link { color: ${T.inkSoft}; text-decoration: none; font-size: 14.5px; font-weight: 600; transition: color .15s; }
|
||
.nav-link:hover { color: ${T.ink}; }
|
||
.pill-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; background: ${T.orangeSoft}; color: ${T.orangeDark}; }
|
||
.feature-card { border-radius: 20px; border: 1px solid ${T.border}; background: #fff; padding: 28px; transition: box-shadow .2s, transform .2s; }
|
||
.feature-card:hover { box-shadow: 0 20px 50px -20px rgba(11,18,32,0.18); transform: translateY(-3px); }
|
||
.soon-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: ${T.navySoft}; color: ${T.navy}; }
|
||
@media (max-width: 900px) { .nav-links { display: none !important; } .split-2col { grid-template-columns: 1fr !important; } }
|
||
@media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr !important; } .grid-2 { grid-template-columns: 1fr !important; } .grid-4 { grid-template-columns: repeat(2,1fr) !important; } }
|
||
`}</style>
|
||
|
||
{/* ══════════════════════════════ NAV ═════════════════════════════ */}
|
||
<nav style={{ position: 'sticky', top: 0, zIndex: 30, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px', padding: '16px clamp(20px,6vw,64px)', background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(10px)', borderBottom: `1px solid ${T.border}` }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||
<img src="/logo.png" alt="AyrisLegal" style={{ height: '26px', width: 'auto', objectFit: 'contain' }} />
|
||
</div>
|
||
<div className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: '32px' }}>
|
||
{NAV_LINKS.map(l => <a key={l.href} href={l.href} className="nav-link">{l.label}</a>)}
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||
<a href="#iletisim" className="btn-outline" style={{ padding: '10px 20px', fontSize: '14px' }}>Giriş Yap</a>
|
||
<a href="#iletisim" className="btn-primary" style={{ padding: '10px 22px', fontSize: '14px' }}>Ücretsiz Deneyin →</a>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* ══════════════════════════════ HERO ════════════════════════════ */}
|
||
<section style={{
|
||
position: 'relative', overflow: 'hidden',
|
||
background: `radial-gradient(circle at 30% 0%, ${T.orangeSoft} 0%, ${T.bg} 55%)`,
|
||
}}>
|
||
<div style={{ maxWidth: '900px', margin: '0 auto', padding: 'clamp(64px,10vw,120px) clamp(20px,6vw,72px) clamp(48px,7vw,72px)', textAlign: 'center', position: 'relative' }}>
|
||
<Reveal>
|
||
<span className="pill-badge">✨ Avukatlar için yapay zeka destekli hukuki asistan</span>
|
||
</Reveal>
|
||
<Reveal delay={0.06}>
|
||
<h1 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(36px,6.5vw,64px)', lineHeight: 1.08, letterSpacing: '-0.02em', margin: '24px 0 0' }}>
|
||
Hukuk Pratiğinde<br />
|
||
<span style={{ color: T.orange }}>Yapay Zeka Devrimi</span>
|
||
</h1>
|
||
</Reveal>
|
||
<Reveal delay={0.12}>
|
||
<p style={{ fontSize: 'clamp(16px,2vw,19px)', lineHeight: 1.6, color: T.inkSoft, maxWidth: '58ch', margin: '24px auto 0' }}>
|
||
Dava dosyalarınızla sohbet edin, saniyeler içinde dilekçe taslağı oluşturun ve içtihat taraması yapın. AyrisLegal, modern hukukçunun güç kaynağı.
|
||
</p>
|
||
</Reveal>
|
||
<Reveal delay={0.18}>
|
||
<div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap', justifyContent: 'center', marginTop: '36px' }}>
|
||
<a href="#iletisim" className="btn-primary">Ücretsiz Deneyin →</a>
|
||
<a href="#tanisin" className="btn-outline">Nasıl Çalışır?</a>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.22}>
|
||
<p style={{ fontSize: '13px', color: T.inkFaint, marginTop: '20px' }}>
|
||
Kredi kartı gerekmez · Kurucu ekiple birebir demo
|
||
</p>
|
||
</Reveal>
|
||
</div>
|
||
|
||
{/* Hero mockup */}
|
||
<Reveal delay={0.2}>
|
||
<div style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px) clamp(48px,8vw,96px)' }}>
|
||
<BrowserFrame>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', minHeight: '360px' }}>
|
||
<div style={{ background: T.navySoft, padding: '20px 16px', borderRight: `1px solid ${T.border}`, display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
||
{['📊 Kontrol Merkezi', '📁 Davalar', '📄 Dilekçe', '🔍 İçtihat', '💬 Chat'].map((item, i) => (
|
||
<div key={item} style={{ padding: '10px 12px', borderRadius: '10px', fontSize: '13px', fontWeight: 600, background: i === 1 ? '#fff' : 'transparent', color: i === 1 ? T.orange : T.inkSoft, boxShadow: i === 1 ? '0 2px 8px rgba(11,18,32,0.08)' : 'none' }}>
|
||
{item}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div style={{ padding: '24px' }}>
|
||
<div style={{ fontSize: '12px', color: T.inkFaint, fontWeight: 600, marginBottom: '14px' }}>KİRA TESPİT DAVASI · DOSYA DETAYI</div>
|
||
{[
|
||
{ name: 'Bilirkişi Raporu - Kira Tespiti', date: '15.01.2026', tag: 'diğer' },
|
||
{ name: '2024/100 Esas Tensip Tutanağı', date: '10.01.2026', tag: 'tutanak' },
|
||
{ name: 'Kira Sözleşmesi', date: '10.01.2026', tag: 'diğer' },
|
||
].map(row => (
|
||
<div key={row.name} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 14px', borderRadius: '12px', border: `1px solid ${T.border}`, marginBottom: '8px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||
<span style={{ width: 8, height: 8, borderRadius: '50%', background: T.green }} />
|
||
<span style={{ fontSize: '13.5px', fontWeight: 600 }}>{row.name}</span>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||
<span style={{ fontSize: '12px', color: T.inkFaint }}>{row.date}</span>
|
||
<span style={{ fontSize: '11px', fontWeight: 700, padding: '3px 10px', borderRadius: '999px', background: T.orangeSoft, color: T.orangeDark }}>{row.tag}</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</BrowserFrame>
|
||
</div>
|
||
</Reveal>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════ STATS ═══════════════════════════ */}
|
||
<section style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px) clamp(48px,7vw,72px)' }}>
|
||
<div className="grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: '16px' }}>
|
||
{[
|
||
{ 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} style={{ borderRadius: '18px', border: `1px solid ${T.border}`, padding: '22px 16px', textAlign: 'center' }}>
|
||
<div style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '28px', color: T.orange }}>{s.value}</div>
|
||
<div style={{ fontSize: '12.5px', color: T.inkSoft, marginTop: '6px', lineHeight: 1.4 }}>{s.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════ TANIŞIN — alternating feature showcase ══════════════ */}
|
||
<section id="tanisin" style={{ maxWidth: '1200px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
|
||
<Reveal>
|
||
<div style={{ textAlign: 'center', marginBottom: 'clamp(48px,8vw,80px)' }}>
|
||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(28px,4vw,42px)', margin: '0 0 12px', letterSpacing: '-0.02em' }}>AyrisLegal ile Tanışın</h2>
|
||
<p style={{ fontSize: '16px', color: T.inkSoft }}>Modern hukukçunun ihtiyaç duyduğu tüm araçlar, tek bir platformda</p>
|
||
</div>
|
||
</Reveal>
|
||
|
||
{/* 01 — Dava Dosyası Yönetimi */}
|
||
<div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center', marginBottom: 'clamp(64px,10vw,120px)' }}>
|
||
<Reveal>
|
||
<div>
|
||
<span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>01</span>
|
||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Dava Dosyası Yönetimi</h3>
|
||
<p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
|
||
Belgelerinizi yükleyin, yapay zeka saniyeler içinde okuyup analiz etsin. Dosyanın tarafları, UYAP bilgileri ve genel durumu tek ekranda.
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.08}>
|
||
<BrowserFrame>
|
||
<div style={{ padding: '20px' }}>
|
||
<div style={{ fontSize: '12px', fontWeight: 700, color: T.inkFaint, marginBottom: '12px' }}>GENEL BAKIŞ</div>
|
||
{['Genel Bakış', 'Belgeler', 'İçtihat Arama', 'Dilekçeler', 'Chat'].map((t, i) => (
|
||
<div key={t} style={{ display: 'inline-block', fontSize: '12px', fontWeight: 600, padding: '6px 12px', borderRadius: '999px', marginRight: '6px', marginBottom: '14px', background: i === 0 ? T.orange : T.navySoft, color: i === 0 ? '#fff' : T.inkSoft }}>{t}</div>
|
||
))}
|
||
<div style={{ borderRadius: '14px', border: `1px solid ${T.border}`, padding: '16px', background: T.bgSoft }}>
|
||
<div style={{ fontSize: '13px', fontWeight: 700, marginBottom: '8px' }}>Taraflar</div>
|
||
<div style={{ fontSize: '12.5px', color: T.inkSoft, lineHeight: 1.8 }}>
|
||
Davacı: Elif Yılmaz<br />Davalı: Mehmet Kaya<br />Mahkeme: Ankara 33. Sulh Hukuk Mahkemesi
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</BrowserFrame>
|
||
</Reveal>
|
||
</div>
|
||
|
||
{/* 02 — Akıllı Analizler */}
|
||
<div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center', marginBottom: 'clamp(64px,10vw,120px)' }}>
|
||
<Reveal className="order-2" delay={0.08}>
|
||
<BrowserFrame>
|
||
<div style={{ padding: '20px' }}>
|
||
<div style={{ fontSize: '13px', fontWeight: 700, marginBottom: '12px' }}>⚡ Dava Stratejisi</div>
|
||
<ul style={{ margin: 0, padding: '0 0 0 18px', fontSize: '12.5px', color: T.inkSoft, lineHeight: 1.9 }}>
|
||
<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 style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', marginTop: '16px' }}>
|
||
<div style={{ borderRadius: '12px', border: `1px solid ${T.border}`, padding: '12px', background: T.greenSoft }}>
|
||
<div style={{ fontSize: '11px', fontWeight: 700, color: T.green, marginBottom: '4px' }}>✓ MEVCUT DELİLLER</div>
|
||
<div style={{ fontSize: '11.5px', color: T.inkSoft }}>Temmuz 2026 emsal ilanları</div>
|
||
</div>
|
||
<div style={{ borderRadius: '12px', border: `1px solid ${T.border}`, padding: '12px', background: '#FEF2F2' }}>
|
||
<div style={{ fontSize: '11px', fontWeight: 700, color: '#DC2626', marginBottom: '4px' }}>✕ EKSİK DELİLLER</div>
|
||
<div style={{ fontSize: '11.5px', color: T.inkSoft }}>Güncel emsal kira ilanı</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</BrowserFrame>
|
||
</Reveal>
|
||
<Reveal>
|
||
<div>
|
||
<span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>02</span>
|
||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Dosya İçerisinde Akıllı Analizler</h3>
|
||
<p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: '0 0 16px' }}>
|
||
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 style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
|
||
{['🚨 Çelişki Avcısı', '📋 Dosya Özeti', '🔎 Dosya Röntgeni', '⚖️ Müzakere'].map(t => (
|
||
<span key={t} className="pill-badge" style={{ background: T.navySoft, color: T.navy }}>{t}</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
|
||
{/* 03 — İçtihat Arama ve Raporlama */}
|
||
<div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center', marginBottom: 'clamp(64px,10vw,120px)' }}>
|
||
<Reveal>
|
||
<div>
|
||
<span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>03</span>
|
||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>İçtihat Arama ve Raporlama</h3>
|
||
<p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
|
||
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>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.08}>
|
||
<BrowserFrame>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: '300px' }}>
|
||
<div style={{ padding: '16px', borderRight: `1px solid ${T.border}` }}>
|
||
<div style={{ fontSize: '11px', fontWeight: 700, color: T.inkFaint, marginBottom: '10px' }}>SONUÇLAR (50)</div>
|
||
{[
|
||
{ court: 'YARGITAY', chamber: 'Ceza Genel Kurulu', esas: '2020/165', karar: '2021/273', date: '10.06.2021' },
|
||
{ court: 'YARGITAY', chamber: '1. Ceza Dairesi', esas: '2023/5798', karar: '2023/5821', date: '02.10.2023' },
|
||
].map((r) => (
|
||
<div key={r.esas} style={{ borderRadius: '12px', border: `1px solid ${T.border}`, padding: '10px 12px', marginBottom: '8px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '6px' }}>
|
||
<span style={{ fontSize: '9px', fontWeight: 700, padding: '2px 7px', borderRadius: '999px', background: T.orangeSoft, color: T.orangeDark }}>{r.court}</span>
|
||
<span style={{ fontSize: '10.5px', color: T.inkFaint }}>{r.chamber}</span>
|
||
</div>
|
||
<div style={{ fontSize: '12.5px', fontWeight: 700 }}>E. {r.esas} - K. {r.karar}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div style={{ padding: '16px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12.5px', fontWeight: 700, marginBottom: '10px' }}>✨ AyrisLegal İçtihat Raporu</div>
|
||
<div style={{ fontSize: '11.5px', color: T.inkSoft, lineHeight: 1.7 }}>
|
||
<b style={{ color: T.ink }}>1. Alaka Puanı ve Durum</b><br />
|
||
Sunulan 48 karardan yaklaşık 15 tanesi doğrudan uyuşmazlığın esasına ilişkindir…
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</BrowserFrame>
|
||
</Reveal>
|
||
</div>
|
||
|
||
{/* 04 — Dilekçe */}
|
||
<div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center' }}>
|
||
<Reveal className="order-2" delay={0.08}>
|
||
<BrowserFrame>
|
||
<div style={{ padding: '20px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '14px' }}>
|
||
<span style={{ fontSize: '11px', fontWeight: 700, padding: '4px 10px', borderRadius: '999px', background: T.greenSoft, color: T.green }}>✓ Dilekçe Oluşturma Tamamlandı</span>
|
||
</div>
|
||
<div style={{ fontSize: '12px', color: T.inkSoft, lineHeight: 1.8, borderRadius: '12px', border: `1px solid ${T.border}`, padding: '14px', background: T.bgSoft }}>
|
||
<b style={{ color: T.ink }}>SONUÇ VE İSTEM:</b> Yukarıda arz ve izah edilen ve Sayın Dairenizce re'sen gözetilecek nedenlerle davalı tarafın usul ve yasaya aykırı istinaf başvurusunun reddine karar verilmesini saygılarımızla arz ve talep ederiz.
|
||
</div>
|
||
</div>
|
||
</BrowserFrame>
|
||
</Reveal>
|
||
<Reveal>
|
||
<div>
|
||
<span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>04</span>
|
||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Yapay Zeka Destekli Dilekçe Oluşturma</h3>
|
||
<p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
|
||
Süre tutum, mazeret ve vekaletname sunma dilekçelerini tek tıkla saniyeler içinde hazırlar. Dava dosyanızdaki belgeler ve içtihat araştırmaları ışığında, olaya uygun profesyonel dilekçeler oluşturun.
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════ BÜRO / OFİS DASHBOARD ═══════════════ */}
|
||
<section style={{ background: T.bgSoft, padding: 'clamp(48px,8vw,96px) 0' }}>
|
||
<div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px)' }}>
|
||
<div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: '56px', alignItems: 'center' }}>
|
||
<Reveal>
|
||
<div>
|
||
<span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>05</span>
|
||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Tüm Büro İhtiyaçlarınız Tek Platformda</h3>
|
||
<p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
|
||
Dava yönetiminden dilekçe hazırlamaya, içtihat aramasından UYAP entegrasyonuna kadar — bizzat mahkemeye gidip duruşmaya girmek dışında her şey burada.
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.08}>
|
||
<BrowserFrame>
|
||
<div style={{ padding: '20px' }}>
|
||
<div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '10px' }}>
|
||
{[
|
||
{ icon: '📁', label: 'Evrak Yönetimi', color: T.orangeSoft, fg: T.orangeDark },
|
||
{ icon: '📄', label: 'Dilekçe Sistemi', color: T.navySoft, fg: T.navy },
|
||
{ icon: '🔍', label: 'İçtihat Arama', color: T.greenSoft, fg: T.green },
|
||
{ icon: '👥', label: 'Ekip Paylaşımı', color: '#F3E8FF', fg: '#7E22CE', soon: true },
|
||
{ icon: '🎓', label: 'Dijital Stajyer', color: '#FEF9C3', fg: '#A16207' },
|
||
{ icon: '💬', label: 'AyrisLegal Chat', color: '#FFE4E6', fg: '#BE123C' },
|
||
].map(c => (
|
||
<div key={c.label} style={{ borderRadius: '14px', padding: '14px 10px', background: c.color, textAlign: 'center' }}>
|
||
<div style={{ fontSize: '20px', marginBottom: '6px' }}>{c.icon}</div>
|
||
<div style={{ fontSize: '11.5px', fontWeight: 700, color: c.fg }}>{c.label}</div>
|
||
{c.soon && <div style={{ fontSize: '9px', fontWeight: 700, marginTop: '4px', color: c.fg, opacity: 0.7 }}>YAKINDA</div>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</BrowserFrame>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════ ÜÇ KART — Sohbet / Dilekçe / UYAP ═══════ */}
|
||
<section style={{ maxWidth: '1200px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
|
||
<div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: '20px', marginBottom: '20px' }}>
|
||
<Reveal>
|
||
<div style={{ borderRadius: '24px', padding: '36px', background: `linear-gradient(135deg, ${T.orange}, ${T.orangeDark})`, color: '#fff', height: '100%' }}>
|
||
<div style={{ fontSize: '26px', marginBottom: '14px' }}>💬</div>
|
||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '24px', margin: '0 0 12px' }}>Dosyalarınızla Sohbet Edin</h3>
|
||
<p style={{ fontSize: '14.5px', lineHeight: 1.7, opacity: 0.92, margin: '0 0 18px', maxWidth: '48ch' }}>
|
||
Dava dosyalarınızı AyrisLegal'a yükleyin, sizin için hepsini saniyeler içinde okuyup analiz etsin, hazırlamasını isteyeceğiniz dilekçelerinizi Türk hukuk sistemine özel eğitilmiş yapay zekasıyla hazırlasın.
|
||
</p>
|
||
<span style={{ display: 'inline-flex', fontSize: '12.5px', fontWeight: 700, padding: '8px 16px', borderRadius: '999px', background: 'rgba(255,255,255,0.2)' }}>🌐 Türk Hukukuna Özel Yapay Zeka</span>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.06}>
|
||
<div className="feature-card" style={{ height: '100%' }}>
|
||
<div style={{ fontSize: '24px', marginBottom: '14px' }}>📝</div>
|
||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '20px', margin: '0 0 10px' }}>Dilekçe Asistanı</h3>
|
||
<p style={{ fontSize: '14px', lineHeight: 1.65, color: T.inkSoft, margin: 0 }}>
|
||
Dava dosyanızdaki belgeleri, analizleri ve içtihat araştırmalarını bağlam olarak ekleyin, eşi benzeri olmayan profesyonellikte dilekçeler hazırlayın.
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
<div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '20px' }}>
|
||
<Reveal>
|
||
<div className="feature-card">
|
||
<div style={{ fontSize: '24px', marginBottom: '14px' }}>⚖️</div>
|
||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '17px', margin: '0 0 10px' }}>Akıllı İçtihat Arama</h3>
|
||
<p style={{ fontSize: '13.5px', lineHeight: 1.6, color: T.inkSoft, margin: 0 }}>
|
||
Sizin için en alakalı sonuçları bulur, okur, aramanızla alakalı kararları belirler ve bunlarla kapsamlı bir içtihat raporu oluşturur.
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.06}>
|
||
<div className="feature-card">
|
||
<div style={{ fontSize: '24px', marginBottom: '14px' }}>📂</div>
|
||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '17px', margin: '0 0 10px' }}>UDF & PDF Desteği</h3>
|
||
<p style={{ fontSize: '13.5px', lineHeight: 1.6, color: T.inkSoft, margin: '0 0 12px' }}>
|
||
UYAP formatındaki (UDF) dosyalarınızı doğrudan yükleyin. Otomatik OCR ve sınıflandırma.
|
||
</p>
|
||
<span className="pill-badge" style={{ background: T.navySoft, color: T.navy, fontSize: '11.5px' }}>🧩 UYAP Chrome Eklentisi</span>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.12}>
|
||
<div className="feature-card">
|
||
<div style={{ fontSize: '24px', marginBottom: '14px' }}>🎯</div>
|
||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '17px', margin: '0 0 10px' }}>Dava Stratejisi ve Simülatör</h3>
|
||
<p style={{ fontSize: '13.5px', lineHeight: 1.6, color: T.inkSoft, margin: 0 }}>
|
||
Mahkemeye çıkmadan önce yapay zekanın "Hakim", "Savcı" ya da "Karşı Taraf Avukatı" rolüne girdiği bir simülasyonla savunmanızı önceden deneyimleyin.
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════ GÜVEN ═══════════════════════════ */}
|
||
<section style={{ background: T.navy, color: '#fff', padding: 'clamp(48px,8vw,96px) 0' }}>
|
||
<div style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px)' }}>
|
||
<Reveal>
|
||
<div style={{ textAlign: 'center', marginBottom: '48px' }}>
|
||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(26px,3.4vw,38px)', margin: '0 0 12px' }}>Dosyalarınız Sizin Kalır</h2>
|
||
<p style={{ fontSize: '15px', color: 'rgba(255,255,255,0.65)', maxWidth: '60ch', margin: '0 auto' }}>
|
||
Bir dava dosyası, bir avukatın elindeki en hassas belgedir. AyrisLegal'ı bu bilinçle kuruyoruz.
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
<div className="grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: '16px' }}>
|
||
{[
|
||
{ icon: '🔒', title: 'Yerel Şifreli Saklama', desc: 'Hassas veriler işletim sisteminizin kendi güvenli katmanıyla şifrelenir.' },
|
||
{ icon: '☁️', title: 'Kendi Drive’ınıza Yedekleme', desc: 'Yedekleme bizim sunucularımıza değil, sizin Drive hesabınıza yapılır.' },
|
||
{ icon: '🚫', title: 'Sadece Sizin Analiziniz', desc: 'Belgeleriniz başka kullanıcılarla paylaşılmaz.' },
|
||
{ icon: '✅', 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 style={{ borderRadius: '18px', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', padding: '22px' }}>
|
||
<div style={{ fontSize: '22px', marginBottom: '12px' }}>{item.icon}</div>
|
||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 700, fontSize: '14.5px', margin: '0 0 8px' }}>{item.title}</h3>
|
||
<p style={{ fontSize: '12.5px', lineHeight: 1.6, color: 'rgba(255,255,255,0.6)', margin: 0 }}>{item.desc}</p>
|
||
</div>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════ FİYATLANDIRMA ═══════════════════ */}
|
||
<section id="fiyatlandirma" style={{ maxWidth: '1100px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
|
||
<Reveal>
|
||
<div style={{ textAlign: 'center', marginBottom: '20px' }}>
|
||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(26px,3.4vw,38px)', margin: '0 0 12px' }}>İhtiyacınıza Uygun Modeller</h2>
|
||
<p style={{ fontSize: '15px', color: T.inkSoft }}>Basit, şeffaf fiyatlandırma — gizli ücret yok.</p>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.05}>
|
||
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: '36px' }}>
|
||
<div style={{ display: 'inline-flex', padding: '4px', borderRadius: '999px', background: T.navySoft, gap: '4px' }}>
|
||
<button onClick={() => setPricingYearly(true)} style={{ border: 'none', cursor: 'pointer', padding: '9px 18px', borderRadius: '999px', fontSize: '13.5px', fontWeight: 700, background: pricingYearly ? '#fff' : 'transparent', color: pricingYearly ? T.ink : T.inkSoft, boxShadow: pricingYearly ? '0 2px 8px rgba(11,18,32,0.1)' : 'none' }}>Yıllık</button>
|
||
<button onClick={() => setPricingYearly(false)} style={{ border: 'none', cursor: 'pointer', padding: '9px 18px', borderRadius: '999px', fontSize: '13.5px', fontWeight: 700, background: !pricingYearly ? '#fff' : 'transparent', color: !pricingYearly ? T.ink : T.inkSoft, boxShadow: !pricingYearly ? '0 2px 8px rgba(11,18,32,0.1)' : 'none' }}>Aylık bilgi al</button>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
<div className="grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '24px' }}>
|
||
<Reveal delay={0.08}>
|
||
<div style={{ borderRadius: '24px', border: `1.5px solid ${T.border}`, padding: '36px 32px', height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||
<p style={{ margin: 0, fontSize: '13px', fontWeight: 700, color: T.orange }}>BİREYSEL AVUKAT</p>
|
||
<p style={{ margin: '10px 0 0', fontFamily: T.fontHead, fontWeight: 800, fontSize: '44px' }}>{pricingYearly ? '40.000 ₺' : 'Bilgi Al'}<span style={{ fontSize: '15px', fontWeight: 500, color: T.inkFaint }}>{pricingYearly ? ' / yıl' : ''}</span></p>
|
||
<p style={{ fontSize: '14px', color: T.inkSoft, margin: '16px 0 0' }}>Serbest çalışan avukatlar için tasarlanmış yapay zeka çalışma ortağı.</p>
|
||
<div style={{ borderTop: `1px solid ${T.border}`, margin: '24px 0' }} />
|
||
<ul style={{ listStyle: 'none', margin: '0 0 28px', padding: 0, display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||
{['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: '14px', alignItems: 'center' }}>
|
||
<span style={{ color: T.green, fontWeight: 800 }}>✓</span>{item}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<a href="#iletisim" className="btn-outline" style={{ marginTop: 'auto', width: '100%' }}>Ücretsiz Deneyin</a>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.14}>
|
||
<div style={{ borderRadius: '24px', border: `1.5px solid ${T.orange}`, padding: '36px 32px', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative', background: T.orangeSoft }}>
|
||
<span style={{ position: 'absolute', top: '-12px', left: '32px', fontSize: '11px', fontWeight: 700, padding: '5px 14px', borderRadius: '999px', background: T.orange, color: '#fff' }}>Ekip Çalışması</span>
|
||
<p style={{ margin: 0, fontSize: '13px', fontWeight: 700, color: T.orangeDark }}>HUKUK BÜROSU</p>
|
||
<p style={{ margin: '10px 0 0', fontFamily: T.fontHead, fontWeight: 800, fontSize: '32px' }}>Özel Fiyatlandırma</p>
|
||
<p style={{ fontSize: '14px', color: T.inkSoft, margin: '16px 0 0' }}>Tüm ekibiniz için paylaşımlı çalışma alanı, dosya yönetimi ve özel entegrasyonlar.</p>
|
||
<div style={{ borderTop: `1px solid rgba(11,18,32,0.15)`, margin: '24px 0' }} />
|
||
<ul style={{ listStyle: 'none', margin: '0 0 28px', padding: 0, display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||
{['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: '14px', alignItems: 'center' }}>
|
||
<span style={{ color: T.orangeDark, fontWeight: 800 }}>✓</span>{item}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<a href="#iletisim" className="btn-primary" style={{ marginTop: 'auto', width: '100%' }}>İletişime Geçin</a>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════ SSS ══════════════════════════════ */}
|
||
<section id="sss" style={{ maxWidth: '1000px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
|
||
<Reveal>
|
||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(26px,3.4vw,38px)', textAlign: 'center', margin: '0 0 40px' }}>Muhtemelen Bunları Soracaksınız</h2>
|
||
</Reveal>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
|
||
{[
|
||
{ 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 style={{ borderRadius: '18px', border: `1px solid ${T.border}`, padding: '22px 24px' }}>
|
||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 700, fontSize: '16px', margin: '0 0 8px' }}>{item.q}</h3>
|
||
<p style={{ fontSize: '14px', lineHeight: 1.65, color: T.inkSoft, margin: 0 }}>{item.a}</p>
|
||
</div>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════ İLETİŞİM ═════════════════════════ */}
|
||
<section id="iletisim" style={{ background: T.bgSoft, padding: 'clamp(48px,8vw,96px) 0' }}>
|
||
<div style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px)' }}>
|
||
<div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: '48px', alignItems: 'start' }}>
|
||
<Reveal>
|
||
<div>
|
||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(24px,3vw,32px)', margin: '0 0 14px' }}>
|
||
Şu an müşteri referansı göstermiyoruz — kasıtlı olarak.
|
||
</h2>
|
||
<p style={{ fontSize: '14.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
|
||
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 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: '14px', color: T.inkSoft, alignItems: 'center' }}>
|
||
<span style={{ width: 22, height: 22, borderRadius: '50%', background: T.orange, color: '#fff', fontSize: '11px', fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{i + 1}</span>
|
||
{step}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.08}>
|
||
<ContactFormV2 />
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════ FOOTER ═══════════════════════════ */}
|
||
<footer style={{ maxWidth: '1200px', margin: '0 auto', padding: '32px clamp(20px,6vw,72px)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px', fontSize: '13px', color: T.inkFaint, borderTop: `1px solid ${T.border}` }}>
|
||
<span>© {new Date().getFullYear()} AyrisLegal — Ayris Tech'in bir ürünüdür.</span>
|
||
<a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" style={{ color: T.inkFaint }}>Created by ayris.tech</a>
|
||
</footer>
|
||
</div>
|
||
)
|
||
}
|