refactor(v2): design-taste skiliyle marka renklerine (kırmızı/zinc) geçiş
Referans olarak gösterilen görsellerdeki turuncu/lacivert palet başka bir şirkete ait olduğu için tamamen kaldırıldı, AyrisLegal'ın kendi kırmızı aksanına (#E61919) sadık kalındı. Inline style yerine Tailwind utility'lerine, emoji yerine lucide-react ikonlarına geçildi. Hero ortadan hizalı yerine asimetrik split düzene, alt özellik şeridi ise "3 eşit kart" yerine bento grid'e dönüştürüldü. Spring physics tabanlı Framer Motion reveal + magnetic CTA butonu eklendi.
This commit is contained in:
mstfyldz
+433
-410
@@ -1,26 +1,22 @@
|
||||
'use client'
|
||||
|
||||
import { useRef, useState } from 'react'
|
||||
import { motion, useInView } from 'framer-motion'
|
||||
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'
|
||||
|
||||
/* ─── 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',
|
||||
}
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
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
|
||||
@@ -30,9 +26,9 @@ function Reveal({ children, className = '', delay = 0 }: {
|
||||
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 }}
|
||||
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}
|
||||
@@ -40,17 +36,71 @@ function Reveal({ children, className = '', delay = 0 }: {
|
||||
)
|
||||
}
|
||||
|
||||
/* ─── Mock "browser window" chrome wrapper ─────────────────────────────── */
|
||||
function BrowserFrame({ children, width = '100%' }: { children: React.ReactNode; width?: string }) {
|
||||
/* 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 (
|
||||
<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>
|
||||
<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 style={{ background: '#fff' }}>{children}</div>
|
||||
<div className="bg-white">{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -66,160 +116,158 @@ 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' }}>
|
||||
<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&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; } }
|
||||
@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 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' }} />
|
||||
<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="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 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 ════════════════════════════ */}
|
||||
<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.
|
||||
{/* ══════════════════════════════ 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 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 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>
|
||||
@@ -227,230 +275,202 @@ export default function HomePageV2() {
|
||||
</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}>
|
||||
{/* 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 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 }}>
|
||||
<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 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 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 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 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>
|
||||
<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>
|
||||
<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 — İçtihat Arama ve Raporlama */}
|
||||
<div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center', marginBottom: 'clamp(64px,10vw,120px)' }}>
|
||||
{/* 03 */}
|
||||
<div className="mt-24 grid grid-cols-1 items-center gap-10 md:mt-32 md:grid-cols-2 md:gap-16">
|
||||
<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>
|
||||
<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 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>
|
||||
<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>
|
||||
{[
|
||||
{ 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>
|
||||
{ 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 style={{ fontSize: '12.5px', fontWeight: 700 }}>E. {r.esas} - K. {r.karar}</div>
|
||||
<div className="text-[12px] font-bold text-zinc-800">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 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>
|
||||
|
||||
{/* 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.
|
||||
{/* ══════════════════════════════ 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.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>
|
||||
|
||||
<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>
|
||||
</BrowserFrame>
|
||||
<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>
|
||||
|
||||
{/* ══════════════════════════════ ÜÇ 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' }}>
|
||||
{/* ══════════════════════════════ 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 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 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>
|
||||
<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' }}>
|
||||
<div className="grid grid-cols-1 gap-px overflow-hidden rounded-3xl bg-white/10 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{[
|
||||
{ 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.' },
|
||||
{ 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 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 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>
|
||||
))}
|
||||
@@ -459,64 +479,68 @@ export default function HomePageV2() {
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════ FİYATLANDIRMA ═══════════════════ */}
|
||||
<section id="fiyatlandirma" style={{ maxWidth: '1100px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
|
||||
<section id="fiyatlandirma" className="mx-auto max-w-[1100px] px-5 py-20 md:px-16 md:py-28">
|
||||
<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 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 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 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-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '24px' }}>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<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' }}>
|
||||
<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} style={{ display: 'flex', gap: '10px', fontSize: '14px', alignItems: 'center' }}>
|
||||
<span style={{ color: T.green, fontWeight: 800 }}>✓</span>{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="btn-outline" style={{ marginTop: 'auto', width: '100%' }}>Ücretsiz Deneyin</a>
|
||||
<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 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' }}>
|
||||
<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} style={{ display: 'flex', gap: '10px', fontSize: '14px', alignItems: 'center' }}>
|
||||
<span style={{ color: T.orangeDark, fontWeight: 800 }}>✓</span>{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="btn-primary" style={{ marginTop: 'auto', width: '100%' }}>İletişime Geçin</a>
|
||||
<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" style={{ maxWidth: '1000px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
|
||||
<section id="sss" className="mx-auto max-w-[900px] px-5 py-20 md:px-16 md:py-28">
|
||||
<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>
|
||||
<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 style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
|
||||
<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.' },
|
||||
@@ -524,9 +548,12 @@ export default function HomePageV2() {
|
||||
{ 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 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>
|
||||
))}
|
||||
@@ -534,38 +561,34 @@ export default function HomePageV2() {
|
||||
</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>
|
||||
<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 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}` }}>
|
||||
<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" style={{ color: T.inkFaint }}>Created by ayris.tech</a>
|
||||
<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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user