511 lines
37 KiB
TypeScript
511 lines
37 KiB
TypeScript
'use client'
|
||
|
||
import { useRef, useState } from 'react'
|
||
import Link from 'next/link'
|
||
import { motion, useInView } from 'framer-motion'
|
||
import ContactForm from '@/components/contact-form'
|
||
|
||
/* ─── Design system tokens (Classical) ────────────────────────────────── */
|
||
const T = {
|
||
bg: '#f3f2f2',
|
||
surface: '#eae9e9',
|
||
text: '#201f1d',
|
||
divider: 'rgba(32,31,29,0.16)',
|
||
accent: '#b68235',
|
||
accentDark: '#7d5411',
|
||
neutral100: '#f8f4f4',
|
||
fontHead: '"Sora", sans-serif',
|
||
fontBody: '"Inter", sans-serif',
|
||
radiusMd: '4px',
|
||
radiusLg: '7px',
|
||
shadowSm: '0 1px 2px rgba(45,43,43,0.14)',
|
||
shadowMd: '0 3px 10px rgba(45,43,43,0.16)',
|
||
}
|
||
|
||
/* ─── 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: 28 }}
|
||
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 28 }}
|
||
transition={{ duration: 0.7, ease: [0.25, 0.46, 0.45, 0.94], delay }}
|
||
className={className}
|
||
>
|
||
{children}
|
||
</motion.div>
|
||
)
|
||
}
|
||
|
||
/* ─── Rail nav ──────────────────────────────────────────────────────────── */
|
||
const RAIL_ITEMS = [
|
||
{ id: '02', href: '#is-akisi', label: '02' },
|
||
{ id: '03', href: '#farklilasim', label: '03' },
|
||
{ id: '04', href: '#ozellikler', label: '04' },
|
||
{ id: '05', href: '#fiyatlandirma', label: '05' },
|
||
{ id: '06', href: '#guven', label: '06' },
|
||
{ id: '07', href: '#iletisim', label: '07' },
|
||
]
|
||
|
||
/* ─── Component ─────────────────────────────────────────────────────────── */
|
||
export default function HomePage() {
|
||
return (
|
||
<div style={{ background: T.bg, color: T.text, fontFamily: T.fontBody, minHeight: '100vh', position: 'relative' }}>
|
||
|
||
{/* ── Inline fonts ── */}
|
||
<style>{`
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@300;400;500;600&display=swap');
|
||
* { box-sizing: border-box; }
|
||
body { margin: 0; }
|
||
a { color: ${T.accent}; text-underline-offset: 3px; }
|
||
:focus-visible { outline: 2px solid ${T.accent}; outline-offset: 2px; }
|
||
::selection { background: rgba(182,130,53,0.25); }
|
||
.rail-link { text-decoration: none; writing-mode: vertical-rl; font-size: 11px; letter-spacing: 0.08em; transition: color .2s; font-family: ${T.fontHead}; }
|
||
.hr-line { height: 1px; border: 0; background: ${T.divider}; margin: 0; }
|
||
.plate { filter: sepia(0.22) saturate(0.82) contrast(1.05); box-sizing: border-box; border: 6px solid ${T.surface}; outline: 1px solid ${T.divider}; }
|
||
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: ${T.fontHead}; font-weight: 600; font-size: 14px; color: ${T.accent}; background: transparent; border: 1px solid ${T.accent}; padding: 9px 16px; border-radius: ${T.radiusMd}; transition: background .15s; }
|
||
.btn-primary:hover { background: rgba(182,130,53,0.1); }
|
||
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: ${T.fontHead}; font-weight: 600; font-size: 14px; color: ${T.accent}; background: transparent; border: none; padding: 9px 4px; border-radius: ${T.radiusMd}; transition: background .15s; }
|
||
.btn-ghost:hover { background: rgba(182,130,53,0.08); }
|
||
.btn-primary-lg { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: ${T.fontHead}; font-weight: 600; font-size: 15px; color: ${T.accent}; background: transparent; border: 1px solid ${T.accent}; padding: 13px 24px; border-radius: ${T.radiusMd}; transition: background .15s; width: 100%; }
|
||
.btn-primary-lg:hover { background: rgba(182,130,53,0.1); }
|
||
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
||
.card { display: flex; flex-direction: column; gap: 9px; padding: 13.8px; border-radius: ${T.radiusMd}; background: transparent; border: 1px solid ${T.divider}; box-shadow: ${T.shadowSm}; }
|
||
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: ${T.accent}; }
|
||
.card-title { font-family: ${T.fontHead}; font-weight: 600; font-size: 17px; line-height: 1.2; margin: 0; }
|
||
.card-body { margin: 0; font-size: 13px; opacity: 0.8; }
|
||
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: rgba(32,31,29,0.7); }
|
||
.legal-input { width: 100%; min-height: 36px; padding: 6px 10px; font-family: ${T.fontBody}; font-size: 14px; color: ${T.text}; background: transparent; border: 1px solid ${T.divider}; border-radius: ${T.radiusMd}; transition: border-color .15s; }
|
||
.legal-input:hover { border-color: rgba(32,31,29,0.45); }
|
||
.legal-input:focus { outline: none; border-color: ${T.accent}; }
|
||
.tag-outline { display: inline-flex; align-items: center; font-size: 10.5px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 3px; border: 1px solid ${T.accent}; color: ${T.accent}; }
|
||
@media (max-width: 900px) { .rail-fixed { display: none !important; } .hero-badges { display: none !important; } .card-grid { grid-template-columns: 1fr; } }
|
||
@media (max-width: 700px) { .hero-two-col { grid-template-columns: 1fr !important; } .contact-two-col { grid-template-columns: 1fr !important; } }
|
||
`}</style>
|
||
|
||
{/* ── Left rail ── */}
|
||
<div
|
||
className="rail-fixed"
|
||
style={{ position: 'fixed', left: '22px', top: 0, bottom: 0, width: '26px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '26px', zIndex: 20 }}
|
||
>
|
||
{RAIL_ITEMS.map(item => (
|
||
<a key={item.id} href={item.href} className="rail-link" style={{ color: 'rgba(32,31,29,0.4)', fontWeight: 400 }}
|
||
onMouseEnter={e => { e.currentTarget.style.color = T.accentDark; e.currentTarget.style.fontWeight = '600' }}
|
||
onMouseLeave={e => { e.currentTarget.style.color = 'rgba(32,31,29,0.4)'; e.currentTarget.style.fontWeight = '400' }}
|
||
>
|
||
{item.label}
|
||
</a>
|
||
))}
|
||
</div>
|
||
|
||
{/* ══════════════════════════════ NAV ═════════════════════════════ */}
|
||
<nav style={{
|
||
position: 'sticky', top: 0, zIndex: 30,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||
flexWrap: 'wrap', gap: '16px',
|
||
padding: '14px clamp(20px,6vw,64px)',
|
||
borderBottom: `1px solid ${T.divider}`,
|
||
background: T.bg,
|
||
backdropFilter: 'blur(10px)',
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||
<img src="/logo.png" alt="AyrisLegal" style={{ height: '24px', width: 'auto', objectFit: 'contain' }} />
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '24px', flexWrap: 'wrap' }}>
|
||
<a href="#farklilasim" style={{ color: 'inherit', textDecoration: 'none', fontSize: '14px', fontFamily: T.fontBody }}
|
||
onMouseEnter={e => (e.currentTarget.style.color = T.accent)}
|
||
onMouseLeave={e => (e.currentTarget.style.color = 'inherit')}
|
||
>Farklılaşım</a>
|
||
<a href="#ozellikler" style={{ color: 'inherit', textDecoration: 'none', fontSize: '14px', fontFamily: T.fontBody }}
|
||
onMouseEnter={e => (e.currentTarget.style.color = T.accent)}
|
||
onMouseLeave={e => (e.currentTarget.style.color = 'inherit')}
|
||
>Özellikler</a>
|
||
<a href="#fiyatlandirma" style={{ color: 'inherit', textDecoration: 'none', fontSize: '14px', fontFamily: T.fontBody }}
|
||
onMouseEnter={e => (e.currentTarget.style.color = T.accent)}
|
||
onMouseLeave={e => (e.currentTarget.style.color = 'inherit')}
|
||
>Fiyatlandırma</a>
|
||
<a href="#iletisim" className="btn-primary">Demo Talep Et</a>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* ══════════════════════════════ HERO ════════════════════════════ */}
|
||
<section style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(64px,11vw,132px) clamp(20px,6vw,72px) clamp(48px,7vw,80px)', position: 'relative', overflow: 'hidden' }}>
|
||
<Reveal>
|
||
<span style={{ display: 'inline-block', fontSize: '13px', letterSpacing: '0.1em', textTransform: 'uppercase', color: T.accentDark, borderBottom: `1px solid ${T.accent}`, paddingBottom: '4px', marginBottom: '26px' }}>
|
||
Madde 01 — Değer Önermesi
|
||
</span>
|
||
</Reveal>
|
||
<div className="hero-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,7fr) minmax(0,5fr)', gap: '56px', alignItems: 'center' }}>
|
||
<div>
|
||
<Reveal delay={0.05}>
|
||
<h1 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(46px,7.4vw,96px)', lineHeight: 0.98, letterSpacing: '-0.015em', margin: 0, marginLeft: '-0.03em', marginBottom: '0' }}>
|
||
<span style={{ display: 'block' }}>Dosyanızı okur,</span>
|
||
<span style={{ display: 'block' }}>sizinle <em style={{ fontStyle: 'italic', color: T.accentDark }}>tartışır.</em></span>
|
||
</h1>
|
||
</Reveal>
|
||
<Reveal delay={0.12}>
|
||
<p style={{ fontSize: 'clamp(17px,1.7vw,20px)', lineHeight: 1.65, maxWidth: '52ch', margin: '30px 0 0', color: 'rgba(32,31,29,0.82)', fontFamily: T.fontBody }}>
|
||
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.18}>
|
||
<div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap', marginTop: '36px', alignItems: 'center' }}>
|
||
<a href="#iletisim" className="btn-primary" style={{ fontSize: '15px', padding: '13px 24px' }}>Demo Talep Et</a>
|
||
<a href="#farklilasim" className="btn-ghost" style={{ fontSize: '15px' }}>Nasıl çalışır ↓</a>
|
||
</div>
|
||
<p style={{ fontSize: '13px', marginTop: '24px', color: 'rgba(32,31,29,0.6)', fontFamily: T.fontBody }}>
|
||
Şu an erken erişim aşamasındayız — kurucu ekiple doğrudan görüşün.
|
||
</p>
|
||
</Reveal>
|
||
</div>
|
||
|
||
{/* Hero right: mock UI badges + plate */}
|
||
<div style={{ position: 'relative' }}>
|
||
<div className="hero-badges" style={{ position: 'absolute', top: '-18px', right: '6px', zIndex: 2, background: T.bg, border: `1px solid ${T.divider}`, borderRadius: T.radiusMd, padding: '8px 14px', fontSize: '12.5px', boxShadow: T.shadowSm, transform: 'rotate(-2deg)', fontFamily: T.fontBody }}>
|
||
İçtihat bulundu · 3 emsal
|
||
</div>
|
||
<div className="hero-badges" style={{ position: 'absolute', bottom: '-16px', left: '-14px', zIndex: 2, background: T.bg, border: `1px solid ${T.divider}`, borderRadius: T.radiusMd, padding: '8px 14px', fontSize: '12.5px', boxShadow: T.shadowSm, transform: 'rotate(2deg)', fontFamily: T.fontBody }}>
|
||
Dilekçe taslağı hazır
|
||
</div>
|
||
{/* Placeholder plate */}
|
||
<div className="plate" style={{ width: '100%', aspectRatio: '4/5', background: T.surface, display: 'flex', flexDirection: 'column', gap: '12px', padding: '24px', justifyContent: 'center' }}>
|
||
{['Dava dosyası yüklendi', 'AI analiz ediyor…', 'Argüman değerlendirmesi', 'Emsal: Yargıtay 2024/1234', 'Dilekçe taslağı oluşturuldu'].map((step, i) => (
|
||
<div key={i} style={{ padding: '10px 14px', borderRadius: T.radiusMd, background: T.bg, border: `1px solid ${T.divider}`, fontSize: '13px', color: i === 4 ? T.accentDark : 'rgba(32,31,29,0.75)', fontFamily: T.fontBody, display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||
<span style={{ width: '18px', height: '18px', borderRadius: '50%', background: i === 4 ? T.accent : T.divider, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: '10px', color: i === 4 ? '#fff' : 'rgba(32,31,29,0.5)', flexShrink: 0, fontFamily: T.fontHead }}>
|
||
{i + 1}
|
||
</span>
|
||
{step}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════ STATS ═══════════════════════════ */}
|
||
<section style={{ maxWidth: '1240px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px) clamp(56px,8vw,88px)', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px,1fr))', borderTop: `1px solid ${T.divider}`, borderBottom: `1px solid ${T.divider}` }}>
|
||
{[
|
||
{ value: '01', label: 'Sabit fiyat, tüm avukatlara' },
|
||
{ value: '40.000 TL', label: 'Yıllık, gizli ücret yok' },
|
||
{ value: '%100', label: "Veri Türkiye'de kalır" },
|
||
{ value: '7/24', label: 'Dosyanızla çalışan ortak' },
|
||
].map((s, i, arr) => (
|
||
<Reveal key={s.label} delay={i * 0.05}>
|
||
<div style={{ padding: '28px 20px', borderRight: i < arr.length - 1 ? `1px solid ${T.divider}` : undefined, textAlign: 'center' }}>
|
||
<div style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(30px,4vw,44px)', color: T.accentDark }}>{s.value}</div>
|
||
<div style={{ fontSize: '13px', marginTop: '6px', color: 'rgba(32,31,29,0.65)', letterSpacing: '0.02em' }}>{s.label}</div>
|
||
</div>
|
||
</Reveal>
|
||
))}
|
||
</section>
|
||
|
||
{/* ══════════════════════════════ PROBLEM ═════════════════════════ */}
|
||
<section id="is-akisi" style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
|
||
<Reveal>
|
||
<span style={{ display: 'block', fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: T.accentDark, marginBottom: '14px' }}>
|
||
Madde 02 — Bugünün iş akışı
|
||
</span>
|
||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(30px,3.6vw,44px)', margin: '0 0 44px', letterSpacing: '-0.008em', maxWidth: '24ch' }}>
|
||
Dosya, arama, şablon, tekrar.
|
||
</h2>
|
||
</Reveal>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 0, borderTop: `1px solid ${T.divider}` }}>
|
||
<Reveal delay={0.05}>
|
||
<div style={{ padding: '32px 28px 32px 0', borderRight: `1px solid ${T.divider}` }}>
|
||
<span style={{ fontFamily: T.fontHead, fontSize: '15px', color: 'rgba(32,31,29,0.45)' }}>01 / Bugün</span>
|
||
<p style={{ fontSize: '15.5px', lineHeight: 1.7, margin: '14px 0 0', textAlign: 'justify', hyphens: 'auto', color: 'rgba(32,31,29,0.78)' } as React.CSSProperties}>
|
||
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.1}>
|
||
<div style={{ padding: '32px 0 32px 28px' }}>
|
||
<span style={{ fontFamily: T.fontHead, fontSize: '15px', color: T.accentDark }}>02 / AyrisLegal ile</span>
|
||
<p style={{ fontSize: '15.5px', lineHeight: 1.7, margin: '14px 0 0', textAlign: 'justify', hyphens: 'auto', color: 'rgba(32,31,29,0.78)' } as React.CSSProperties}>
|
||
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>
|
||
|
||
<hr className="hr-line" style={{ maxWidth: '1240px', margin: '0 auto' }} />
|
||
|
||
{/* ══════════════════════════════ DIFFERENTIATOR ══════════════════ */}
|
||
<section id="farklilasim" style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(56px,9vw,108px) clamp(20px,6vw,72px)' }}>
|
||
<Reveal>
|
||
<span style={{ display: 'block', fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: T.accentDark, marginBottom: '14px' }}>
|
||
Madde 03 — Tartışma odaklı yapay zeka
|
||
</span>
|
||
</Reveal>
|
||
<div className="hero-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,5fr) minmax(0,7fr)', gap: '56px', alignItems: 'center' }}>
|
||
<Reveal delay={0.05}>
|
||
<div>
|
||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(28px,3.2vw,40px)', margin: '0 0 20px', letterSpacing: '-0.008em', maxWidth: '16ch' }}>
|
||
Bulmakla yetinmez, sizinle tartışır.
|
||
</h2>
|
||
<p style={{ fontSize: '15.5px', lineHeight: 1.7, margin: '0 0 16px', maxWidth: '46ch', textAlign: 'justify', hyphens: 'auto', color: 'rgba(32,31,29,0.78)' } as React.CSSProperties}>
|
||
Ç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: '13px', margin: 0, color: 'rgba(32,31,29,0.58)' }}>
|
||
Aşağıdaki görsel, bu tartışmanın nasıl göründüğünü gösteren temsili bir tasarımdır.
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
|
||
{/* Chat simulation */}
|
||
<Reveal delay={0.1}>
|
||
<div className="plate" style={{ margin: 0, padding: '28px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
|
||
{/* Lawyer message */}
|
||
<div style={{ alignSelf: 'flex-end', maxWidth: '78%', background: T.bg, border: `1px solid ${T.divider}`, borderRadius: `${T.radiusMd} ${T.radiusMd} 4px ${T.radiusMd}`, padding: '14px 16px' }}>
|
||
<div style={{ fontSize: '11px', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(32,31,29,0.55)', marginBottom: '6px' }}>Avukat</div>
|
||
<p style={{ margin: 0, fontSize: '14.5px', lineHeight: 1.6, fontFamily: T.fontBody }}>Müvekkilin haklı olduğunu düşünüyorum, mülkiyet devri geçerli.</p>
|
||
</div>
|
||
{/* AyrisLegal response */}
|
||
<div style={{ alignSelf: 'flex-start', maxWidth: '82%', background: T.surface, border: `1px solid ${T.accent}`, borderRadius: `${T.radiusMd} ${T.radiusMd} ${T.radiusMd} 4px`, padding: '14px 16px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px' }}>
|
||
<span style={{ fontSize: '11px', letterSpacing: '0.06em', textTransform: 'uppercase', color: T.accentDark }}>AyrisLegal</span>
|
||
<span className="tag-outline" style={{ fontSize: '10.5px' }}>İtiraz</span>
|
||
</div>
|
||
<p style={{ margin: 0, fontSize: '14.5px', lineHeight: 1.6, fontFamily: T.fontBody }}>Devir tarihinde tapuda şerh var — bu, iyi niyet iddianızı zayıflatabilir. Şerhin kaldırılış tarihini kontrol ettiniz mi?</p>
|
||
</div>
|
||
{/* Lawyer reply */}
|
||
<div style={{ alignSelf: 'flex-end', maxWidth: '78%', background: T.bg, border: `1px solid ${T.divider}`, borderRadius: `${T.radiusMd} ${T.radiusMd} 4px ${T.radiusMd}`, padding: '14px 16px' }}>
|
||
<p style={{ margin: 0, fontSize: '14.5px', lineHeight: 1.6, fontFamily: T.fontBody }}>Haklısınız — 3 emsal kararla bu noktayı destekleyelim.</p>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</section>
|
||
|
||
<hr className="hr-line" style={{ maxWidth: '1240px', margin: '0 auto' }} />
|
||
|
||
{/* ══════════════════════════════ FEATURES ════════════════════════ */}
|
||
<section id="ozellikler" style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(56px,9vw,108px) clamp(20px,6vw,72px)' }}>
|
||
<Reveal>
|
||
<span style={{ display: 'block', fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: T.accentDark, marginBottom: '14px' }}>
|
||
Madde 04 — Platform
|
||
</span>
|
||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(30px,3.6vw,44px)', margin: '0 0 40px', letterSpacing: '-0.008em' }}>
|
||
Bir avukatın ihtiyaç duyduğu şeyler.
|
||
</h2>
|
||
</Reveal>
|
||
<div className="card-grid">
|
||
{/* Main feature — spans 2 cols */}
|
||
<Reveal>
|
||
<div className="card" style={{ gridColumn: 'span 2' }}>
|
||
<span className="card-kicker">AI tartışma ortağı</span>
|
||
<h3 className="card-title" style={{ fontSize: '26px' }}>Argümanınızı sınar, meslektaş gibi</h3>
|
||
<p className="card-body">Zayıf noktaları sorar, karşı görüş üretir, sizi zorlar — pasif özet değil, aktif muhakeme. AyrisLegal'ın temel farkı budur.</p>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.05}>
|
||
<div className="card">
|
||
<span className="card-kicker">Dosya analizi</span>
|
||
<h3 className="card-title">Dava dosyasını okur</h3>
|
||
<p className="card-body">Olay örgüsünü, tarafları ve hukuki dayanakları çıkarır.</p>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.1}>
|
||
<div className="card">
|
||
<span className="card-kicker">İçtihat arama</span>
|
||
<h3 className="card-title">Bağlama uygun emsal bulur</h3>
|
||
<p className="card-body">Anahtar kelime eşleşmesiyle değil, hukuki benzerlikle emsal kararları bulur.</p>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.12}>
|
||
<div className="card">
|
||
<span className="card-kicker">Dilekçe taslağı</span>
|
||
<h3 className="card-title">Tartışmayı taslağa döker</h3>
|
||
<p className="card-body">Vardığınız sonucu, düzenlenebilir bir dilekçe taslağına dönüştürür.</p>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.15}>
|
||
<div className="card">
|
||
<span className="card-kicker" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||
Büro paylaşımı <span className="tag-outline">Yakında</span>
|
||
</span>
|
||
<h3 className="card-title">Ekip çalışması</h3>
|
||
<p className="card-body">Dosya ve tartışma geçmişini büro içindeki meslektaşlarınızla paylaşın.</p>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</section>
|
||
|
||
<hr className="hr-line" style={{ maxWidth: '1240px', margin: '0 auto' }} />
|
||
|
||
{/* ══════════════════════════════ PRICING ═════════════════════════ */}
|
||
<section id="fiyatlandirma" style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(56px,9vw,108px) clamp(20px,6vw,72px)' }}>
|
||
<Reveal>
|
||
<span style={{ display: 'block', fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: T.accentDark, marginBottom: '14px', textAlign: 'center' }}>
|
||
Madde 05 — Fiyatlandırma
|
||
</span>
|
||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(30px,3.6vw,44px)', margin: '0 0 44px', textAlign: 'center', letterSpacing: '-0.008em' }}>
|
||
İhtiyacınıza uygun modeller.
|
||
</h2>
|
||
</Reveal>
|
||
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '32px', maxWidth: '960px', margin: '0 auto' }}>
|
||
|
||
{/* ── Bireysel ── */}
|
||
<Reveal delay={0.08}>
|
||
<div style={{ display: 'flex', border: `1px solid ${T.divider}`, borderRadius: T.radiusLg, boxShadow: T.shadowMd, overflow: 'hidden', height: '100%' }}>
|
||
<div style={{ width: '34px', background: T.neutral100, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', borderRight: `1px solid ${T.divider}`, padding: '20px 0' }}>
|
||
{['01','02','03','04','05'].map(t => (
|
||
<span key={t} style={{ fontSize: '11px', color: T.accentDark, writingMode: 'vertical-rl', fontFamily: T.fontHead }}>{t}</span>
|
||
))}
|
||
</div>
|
||
<div style={{ flex: 1, padding: '40px 36px', textAlign: 'center', display: 'flex', flexDirection: 'column' }}>
|
||
<p style={{ margin: 0, fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(42px,5vw,56px)', lineHeight: 1 }}>40.000 TL</p>
|
||
<p style={{ margin: '6px 0 0', fontSize: '14px', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(32,31,29,0.6)' }}>Bireysel Avukat / Yıl</p>
|
||
<p style={{ fontSize: '15px', lineHeight: 1.6, margin: '20px auto 0', color: 'rgba(32,31,29,0.78)', fontFamily: T.fontBody }}>
|
||
Serbest çalışan avukatlar için tasarlanmış yapay zeka çalışma ortağı.
|
||
</p>
|
||
<hr className="hr-line" style={{ margin: '24px 0' }} />
|
||
<ul style={{ listStyle: 'none', margin: '0 0 auto 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '12px', 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: '14.5px', fontFamily: T.fontBody }}>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={T.accent} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: '2px' }}>
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
{item}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<a href="#iletisim" className="btn-primary-lg" style={{ marginTop: '26px' }}>Demo Talep Et</a>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
|
||
{/* ── Büro ── */}
|
||
<Reveal delay={0.15}>
|
||
<div style={{ display: 'flex', border: `1px solid ${T.accent}`, borderRadius: T.radiusLg, boxShadow: T.shadowMd, overflow: 'hidden', height: '100%', position: 'relative' }}>
|
||
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, background: T.accent, color: '#fff', fontSize: '11px', letterSpacing: '0.1em', textTransform: 'uppercase', textAlign: 'center', padding: '4px', fontFamily: T.fontHead, fontWeight: 600 }}>Ekip Çalışması</div>
|
||
<div style={{ width: '34px', background: 'rgba(182,130,53,0.05)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', borderRight: `1px solid ${T.divider}`, padding: '40px 0 20px' }}>
|
||
{['01','02','03','04','05'].map(t => (
|
||
<span key={t} style={{ fontSize: '11px', color: T.accentDark, writingMode: 'vertical-rl', fontFamily: T.fontHead }}>{t}</span>
|
||
))}
|
||
</div>
|
||
<div style={{ flex: 1, padding: '56px 36px 40px', textAlign: 'center', display: 'flex', flexDirection: 'column' }}>
|
||
<p style={{ margin: 0, fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(32px,4vw,42px)', lineHeight: 1.1, color: T.accentDark, marginTop: '6px' }}>Hukuk Bürosu</p>
|
||
<p style={{ margin: '10px 0 0', fontSize: '14px', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(32,31,29,0.6)' }}>Özel Fiyatlandırma</p>
|
||
<p style={{ fontSize: '15px', lineHeight: 1.6, margin: '20px auto 0', color: 'rgba(32,31,29,0.78)', fontFamily: T.fontBody }}>
|
||
Tüm ekibiniz için paylaşımlı çalışma alanı, dosya yönetimi ve özel entegrasyonlar.
|
||
</p>
|
||
<hr className="hr-line" style={{ margin: '24px 0' }} />
|
||
<ul style={{ listStyle: 'none', margin: '0 0 auto 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '12px', 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: '14.5px', fontFamily: T.fontBody }}>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={T.accentDark} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: '2px' }}>
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
{item}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<a href="#iletisim" className="btn-primary-lg" style={{ marginTop: '26px', background: T.accent, color: '#fff', border: 'none' }}
|
||
onMouseEnter={e => (e.currentTarget.style.background = T.accentDark)}
|
||
onMouseLeave={e => (e.currentTarget.style.background = T.accent)}
|
||
>İletişime Geçin</a>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<hr className="hr-line" style={{ maxWidth: '1240px', margin: '0 auto' }} />
|
||
|
||
{/* ══════════════════════════════ TRUST ═══════════════════════════ */}
|
||
<section id="guven" style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(56px,9vw,108px) clamp(20px,6vw,72px)' }}>
|
||
<Reveal>
|
||
<span style={{ display: 'block', fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: T.accentDark, marginBottom: '14px' }}>
|
||
Madde 06 — Güven ve veri güvenliği
|
||
</span>
|
||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(30px,3.6vw,44px)', margin: '0 0 16px', letterSpacing: '-0.008em' }}>
|
||
Dosyalarınız sizin kalır.
|
||
</h2>
|
||
<p style={{ fontSize: '15.5px', lineHeight: 1.7, maxWidth: '60ch', margin: '0 0 40px', color: 'rgba(32,31,29,0.78)', fontFamily: T.fontBody }}>
|
||
Bir dava dosyası, bir avukatın elindeki en hassas belgedir. AyrisLegal'ı bu bilinçle kuruyoruz.
|
||
</p>
|
||
</Reveal>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 0, borderTop: `1px solid ${T.divider}` }}>
|
||
{[
|
||
{
|
||
icon: <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={T.accent} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 L20 5 V11 C20 16 16.5 19.5 12 21 C7.5 19.5 4 16 4 11 V5 Z"/><path d="M9 12 l2.2 2.2 L15.5 9.5"/></svg>,
|
||
title: "KVKK'ya uyumlu",
|
||
desc: 'Kişisel verilerin korunması mevzuatına uygun işleme ve saklama.',
|
||
},
|
||
{
|
||
icon: <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={T.accent} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/><line x1="7" y1="7" x2="7" y2="7"/><line x1="7" y1="17" x2="7" y2="17"/></svg>,
|
||
title: "Sunucular Türkiye'de",
|
||
desc: "Verileriniz yurt dışına çıkmaz — Ayris Tech'in self-hosted altyapı felsefesiyle.",
|
||
},
|
||
{
|
||
icon: <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={T.accent} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="10" width="14" height="10" rx="1.5"/><path d="M8 10 V7 a4 4 0 0 1 8 0 v3"/></svg>,
|
||
title: 'Dosyanız modelleri eğitmez',
|
||
desc: 'Yüklediğiniz belgeler yalnızca sizin analizinizde kullanılır.',
|
||
},
|
||
].map((item, i, arr) => (
|
||
<Reveal key={item.title} delay={i * 0.08}>
|
||
<div style={{ padding: '28px 24px 0', borderRight: i < arr.length - 1 ? `1px solid ${T.divider}` : undefined }}>
|
||
{item.icon}
|
||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: '19px', margin: '12px 0 6px' }}>{item.title}</h3>
|
||
<p style={{ fontSize: '14.5px', lineHeight: 1.6, margin: 0, color: 'rgba(32,31,29,0.78)', fontFamily: T.fontBody }}>{item.desc}</p>
|
||
</div>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<hr className="hr-line" style={{ maxWidth: '1240px', margin: '0 auto' }} />
|
||
|
||
{/* ══════════════════════════════ CONTACT ═════════════════════════ */}
|
||
<section id="iletisim" style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(56px,9vw,108px) clamp(20px,6vw,72px)' }}>
|
||
<Reveal>
|
||
<span style={{ display: 'block', fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: T.accentDark, marginBottom: '14px' }}>
|
||
Madde 07 — Erken erişim
|
||
</span>
|
||
</Reveal>
|
||
<div className="contact-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,5fr) minmax(0,7fr)', gap: '48px' }}>
|
||
<Reveal delay={0.05}>
|
||
<div>
|
||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(28px,3.2vw,38px)', margin: '0 0 16px', letterSpacing: '-0.008em' }}>
|
||
Şu an müşteri referansı göstermiyoruz — kasıtlı olarak.
|
||
</h2>
|
||
<p style={{ fontSize: '15.5px', lineHeight: 1.7, margin: 0, textAlign: 'justify', hyphens: 'auto', color: 'rgba(32,31,29,0.78)', fontFamily: T.fontBody } as React.CSSProperties}>
|
||
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>
|
||
<div style={{ marginTop: '32px', display: 'flex', alignItems: 'center', gap: '14px' }}>
|
||
<div style={{ width: '48px', height: '48px', border: `1px solid ${T.accent}`, borderRadius: '50%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontFamily: T.fontHead, fontSize: '8px', color: T.accentDark, textAlign: 'center', lineHeight: 1.2, flexShrink: 0, textTransform: 'uppercase' }}>
|
||
<span style={{ fontWeight: 400, letterSpacing: '0.22em' }}>AYRIS</span>
|
||
<span style={{ fontWeight: 500, letterSpacing: '0.35em' }}>LEGAL</span>
|
||
</div>
|
||
<span style={{ fontSize: '12.5px', color: 'rgba(32,31,29,0.6)', fontFamily: T.fontBody }}>Kurucu ekip mührü</span>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.1}>
|
||
<ContactForm />
|
||
</Reveal>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════ FOOTER ══════════════════════════ */}
|
||
<footer style={{ maxWidth: '1240px', margin: '0 auto', padding: '28px clamp(20px,6vw,72px) 40px', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px', fontSize: '13px', color: 'rgba(32,31,29,0.6)', borderTop: `1px solid ${T.divider}`, fontFamily: T.fontBody }}>
|
||
<span>AyrisLegal, Ayris Tech'in bir ürünüdür.</span>
|
||
<span>
|
||
© {new Date().getFullYear()} AyrisLegal ·{' '}
|
||
<a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" style={{ color: 'rgba(32,31,29,0.6)' }}>
|
||
Created by ayris.tech
|
||
</a>
|
||
</span>
|
||
</footer>
|
||
</div>
|
||
)
|
||
}
|