revision
This commit is contained in:
mstfyldz
@@ -0,0 +1,510 @@
|
|||||||
|
'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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export default function PrivacyPolicy() {
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-16 max-w-4xl">
|
||||||
|
<h1 className="text-4xl font-bold mb-8">Gizlilik Politikası (Privacy Policy)</h1>
|
||||||
|
<p className="mb-6 text-gray-500">Son Güncellenme Tarihi: 10 Ağustos 2026</p>
|
||||||
|
|
||||||
|
<div className="prose max-w-none">
|
||||||
|
<section className="mb-8">
|
||||||
|
<h2 className="text-2xl font-semibold mb-4">1. Giriş</h2>
|
||||||
|
<p className="mb-4">
|
||||||
|
AyrisLegal ("biz", "bizim" veya "bize"), gizliliğinize saygı duymakta ve kişisel verilerinizi korumayı taahhüt etmektedir. Bu Gizlilik Politikası, AyrisLegal UYAP Evrak İndirici Chrome eklentisini ve ilgili hizmetlerimizi ("Eklenti") kullandığınızda kişisel bilgilerinizi nasıl işlediğimizi ve koruduğumuzu açıklar.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-8">
|
||||||
|
<h2 className="text-2xl font-semibold mb-4">2. Toplanan Veriler ve Kullanımı</h2>
|
||||||
|
<p className="mb-4">Eklentimiz, Google hesabınızla giriş yapmanızı (OAuth) gerektirir. Bu bağlamda yalnızca aşağıdaki temel bilgiler işlenir:</p>
|
||||||
|
<ul className="list-disc pl-6 mb-4 space-y-2">
|
||||||
|
<li><strong>Google Kullanıcı Verileri:</strong> E-posta adresi ve temel profil bilgileriniz yalnızca kimlik doğrulama amacıyla kullanılır. Bu bilgiler dış sunucularımıza kaydedilmez, yalnızca oturum yönetimi için istemci (tarayıcı) tarafında tutulur.</li>
|
||||||
|
<li><strong>UYAP Evrak Verileri:</strong> Eklenti, UYAP portalından indirdiğiniz belgeleri <strong>sadece kendi bilgisayarınıza (yerel ağınıza)</strong> kaydeder veya aktarır. Hiçbir yasal belge, dosya detayı veya kişisel veri AyrisLegal sunucularına gönderilmez, saklanmaz veya üçüncü taraflarla paylaşılmaz.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-8">
|
||||||
|
<h2 className="text-2xl font-semibold mb-4">3. Veri Paylaşımı ve İfşası (Chrome Web Store Beyanları)</h2>
|
||||||
|
<p className="mb-4">Google Chrome Web Mağazası politikaları gereği şunları taahhüt ederiz:</p>
|
||||||
|
<ul className="list-disc pl-6 mb-4 space-y-2">
|
||||||
|
<li>Kullanıcı verilerini üçüncü şahıslara satmıyoruz veya aktarmıyoruz.</li>
|
||||||
|
<li>Kullanıcı verilerini onaylanmış (single purpose) kullanım amacı dışında kullanmıyor veya aktarmıyoruz.</li>
|
||||||
|
<li>Kullanıcı verilerini kredi notu belirlemek veya borç verme amaçlarıyla kullanmıyor veya aktarmıyoruz.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-8">
|
||||||
|
<h2 className="text-2xl font-semibold mb-4">4. Veri Güvenliği</h2>
|
||||||
|
<p className="mb-4">
|
||||||
|
Eklentinin tüm veri alışverişi doğrudan sizin bilgisayarınız (tarayıcınız) ile resmi hedefler (UYAP vb.) arasında gerçekleşir. Kişisel bilgilerinizin güvenliğini korumak için endüstri standartlarında önlemler uyguluyoruz.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-8">
|
||||||
|
<h2 className="text-2xl font-semibold mb-4">5. Değişiklikler</h2>
|
||||||
|
<p className="mb-4">
|
||||||
|
Bu Gizlilik Politikasını zaman zaman güncelleyebiliriz. Herhangi bir değişiklik durumunda bu sayfada yeni tarihi belirterek sizi bilgilendireceğiz.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-8">
|
||||||
|
<h2 className="text-2xl font-semibold mb-4">6. İletişim</h2>
|
||||||
|
<p className="mb-4">
|
||||||
|
Bu Gizlilik Politikası hakkında veya veri güvenliği ile ilgili sorularınız varsa, lütfen <strong>info@ayris.tech</strong> adresi üzerinden bizimle iletişime geçin.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,572 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useRef, useState } from 'react'
|
||||||
|
import { motion, useInView } from 'framer-motion'
|
||||||
|
import ContactFormV2 from '@/components/contact-form-v2'
|
||||||
|
|
||||||
|
/* ─── Design tokens (Modern SaaS / warm & rounded) ─────────────────────── */
|
||||||
|
const T = {
|
||||||
|
bg: '#FFFFFF',
|
||||||
|
bgSoft: '#FFF8F1',
|
||||||
|
ink: '#0B1220',
|
||||||
|
inkSoft: 'rgba(11,18,32,0.62)',
|
||||||
|
inkFaint: 'rgba(11,18,32,0.42)',
|
||||||
|
orange: '#F2600C',
|
||||||
|
orangeDark:'#D94E00',
|
||||||
|
orangeSoft:'#FFEDD9',
|
||||||
|
navy: '#16223D',
|
||||||
|
navySoft: '#EEF2FB',
|
||||||
|
green: '#0F9D6E',
|
||||||
|
greenSoft: '#E4F7EF',
|
||||||
|
border: 'rgba(11,18,32,0.08)',
|
||||||
|
fontHead: '"Archivo", sans-serif',
|
||||||
|
}
|
||||||
|
|
||||||
|
function Reveal({ children, className = '', delay = 0 }: {
|
||||||
|
children: React.ReactNode; className?: string; delay?: number
|
||||||
|
}) {
|
||||||
|
const ref = useRef<HTMLDivElement>(null)
|
||||||
|
const inView = useInView(ref, { once: true, margin: '-60px' })
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
ref={ref}
|
||||||
|
initial={{ opacity: 0, y: 18 }}
|
||||||
|
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 18 }}
|
||||||
|
transition={{ duration: 0.5, ease: 'easeOut', delay }}
|
||||||
|
className={className}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Mock "browser window" chrome wrapper ─────────────────────────────── */
|
||||||
|
function BrowserFrame({ children, width = '100%' }: { children: React.ReactNode; width?: string }) {
|
||||||
|
return (
|
||||||
|
<div style={{ width, borderRadius: '18px', overflow: 'hidden', background: '#fff', border: `1px solid ${T.border}`, boxShadow: '0 30px 70px -20px rgba(11,18,32,0.25)' }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '12px 16px', background: '#F4F5F7', borderBottom: `1px solid ${T.border}` }}>
|
||||||
|
<span style={{ width: 10, height: 10, borderRadius: '50%', background: '#FF5F57' }} />
|
||||||
|
<span style={{ width: 10, height: 10, borderRadius: '50%', background: '#FEBC2E' }} />
|
||||||
|
<span style={{ width: 10, height: 10, borderRadius: '50%', background: '#28C840' }} />
|
||||||
|
<span style={{ flex: 1, textAlign: 'center', fontSize: '12px', color: T.inkFaint, fontWeight: 500 }}>ayrislegal.com</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ background: '#fff' }}>{children}</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const NAV_LINKS = [
|
||||||
|
{ label: 'Özellikler', href: '#tanisin' },
|
||||||
|
{ label: 'Fiyatlar', href: '#fiyatlandirma' },
|
||||||
|
{ label: 'SSS', href: '#sss' },
|
||||||
|
{ label: 'İletişim', href: '#iletisim' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function HomePageV2() {
|
||||||
|
const [pricingYearly, setPricingYearly] = useState(true)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ background: T.bg, color: T.ink, fontFamily: '"Archivo", ui-sans-serif, system-ui, sans-serif', minHeight: '100vh' }}>
|
||||||
|
<style>{`
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body { margin: 0; }
|
||||||
|
a { color: inherit; }
|
||||||
|
:focus-visible { outline: 2px solid ${T.orange}; outline-offset: 2px; }
|
||||||
|
::selection { background: ${T.orangeSoft}; color: ${T.ink}; }
|
||||||
|
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-weight: 700; font-size: 15px; color: #fff; background: ${T.orange}; border: none; border-radius: 999px; padding: 15px 28px; transition: background .15s, transform .1s; }
|
||||||
|
.btn-primary:hover { background: ${T.orangeDark}; transform: translateY(-1px); }
|
||||||
|
.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-weight: 700; font-size: 15px; color: ${T.ink}; background: #fff; border: 1.5px solid ${T.border}; border-radius: 999px; padding: 15px 28px; transition: border-color .15s, background .15s; }
|
||||||
|
.btn-outline:hover { border-color: ${T.ink}; background: ${T.navySoft}; }
|
||||||
|
.nav-link { color: ${T.inkSoft}; text-decoration: none; font-size: 14.5px; font-weight: 600; transition: color .15s; }
|
||||||
|
.nav-link:hover { color: ${T.ink}; }
|
||||||
|
.pill-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; background: ${T.orangeSoft}; color: ${T.orangeDark}; }
|
||||||
|
.feature-card { border-radius: 20px; border: 1px solid ${T.border}; background: #fff; padding: 28px; transition: box-shadow .2s, transform .2s; }
|
||||||
|
.feature-card:hover { box-shadow: 0 20px 50px -20px rgba(11,18,32,0.18); transform: translateY(-3px); }
|
||||||
|
.soon-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: ${T.navySoft}; color: ${T.navy}; }
|
||||||
|
@media (max-width: 900px) { .nav-links { display: none !important; } .split-2col { grid-template-columns: 1fr !important; } }
|
||||||
|
@media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr !important; } .grid-2 { grid-template-columns: 1fr !important; } .grid-4 { grid-template-columns: repeat(2,1fr) !important; } }
|
||||||
|
`}</style>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ NAV ═════════════════════════════ */}
|
||||||
|
<nav style={{ position: 'sticky', top: 0, zIndex: 30, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px', padding: '16px clamp(20px,6vw,64px)', background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(10px)', borderBottom: `1px solid ${T.border}` }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||||
|
<img src="/logo.png" alt="AyrisLegal" style={{ height: '26px', width: 'auto', objectFit: 'contain' }} />
|
||||||
|
</div>
|
||||||
|
<div className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: '32px' }}>
|
||||||
|
{NAV_LINKS.map(l => <a key={l.href} href={l.href} className="nav-link">{l.label}</a>)}
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||||
|
<a href="#iletisim" className="btn-outline" style={{ padding: '10px 20px', fontSize: '14px' }}>Giriş Yap</a>
|
||||||
|
<a href="#iletisim" className="btn-primary" style={{ padding: '10px 22px', fontSize: '14px' }}>Ücretsiz Deneyin →</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ HERO ════════════════════════════ */}
|
||||||
|
<section style={{
|
||||||
|
position: 'relative', overflow: 'hidden',
|
||||||
|
background: `radial-gradient(circle at 30% 0%, ${T.orangeSoft} 0%, ${T.bg} 55%)`,
|
||||||
|
}}>
|
||||||
|
<div style={{ maxWidth: '900px', margin: '0 auto', padding: 'clamp(64px,10vw,120px) clamp(20px,6vw,72px) clamp(48px,7vw,72px)', textAlign: 'center', position: 'relative' }}>
|
||||||
|
<Reveal>
|
||||||
|
<span className="pill-badge">✨ Avukatlar için yapay zeka destekli hukuki asistan</span>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.06}>
|
||||||
|
<h1 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(36px,6.5vw,64px)', lineHeight: 1.08, letterSpacing: '-0.02em', margin: '24px 0 0' }}>
|
||||||
|
Hukuk Pratiğinde<br />
|
||||||
|
<span style={{ color: T.orange }}>Yapay Zeka Devrimi</span>
|
||||||
|
</h1>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.12}>
|
||||||
|
<p style={{ fontSize: 'clamp(16px,2vw,19px)', lineHeight: 1.6, color: T.inkSoft, maxWidth: '58ch', margin: '24px auto 0' }}>
|
||||||
|
Dava dosyalarınızla sohbet edin, saniyeler içinde dilekçe taslağı oluşturun ve içtihat taraması yapın. AyrisLegal, modern hukukçunun güç kaynağı.
|
||||||
|
</p>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.18}>
|
||||||
|
<div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap', justifyContent: 'center', marginTop: '36px' }}>
|
||||||
|
<a href="#iletisim" className="btn-primary">Ücretsiz Deneyin →</a>
|
||||||
|
<a href="#tanisin" className="btn-outline">Nasıl Çalışır?</a>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.22}>
|
||||||
|
<p style={{ fontSize: '13px', color: T.inkFaint, marginTop: '20px' }}>
|
||||||
|
Kredi kartı gerekmez · Kurucu ekiple birebir demo
|
||||||
|
</p>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hero mockup */}
|
||||||
|
<Reveal delay={0.2}>
|
||||||
|
<div style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px) clamp(48px,8vw,96px)' }}>
|
||||||
|
<BrowserFrame>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', minHeight: '360px' }}>
|
||||||
|
<div style={{ background: T.navySoft, padding: '20px 16px', borderRight: `1px solid ${T.border}`, display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
||||||
|
{['📊 Kontrol Merkezi', '📁 Davalar', '📄 Dilekçe', '🔍 İçtihat', '💬 Chat'].map((item, i) => (
|
||||||
|
<div key={item} style={{ padding: '10px 12px', borderRadius: '10px', fontSize: '13px', fontWeight: 600, background: i === 1 ? '#fff' : 'transparent', color: i === 1 ? T.orange : T.inkSoft, boxShadow: i === 1 ? '0 2px 8px rgba(11,18,32,0.08)' : 'none' }}>
|
||||||
|
{item}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: '24px' }}>
|
||||||
|
<div style={{ fontSize: '12px', color: T.inkFaint, fontWeight: 600, marginBottom: '14px' }}>KİRA TESPİT DAVASI · DOSYA DETAYI</div>
|
||||||
|
{[
|
||||||
|
{ name: 'Bilirkişi Raporu - Kira Tespiti', date: '15.01.2026', tag: 'diğer' },
|
||||||
|
{ name: '2024/100 Esas Tensip Tutanağı', date: '10.01.2026', tag: 'tutanak' },
|
||||||
|
{ name: 'Kira Sözleşmesi', date: '10.01.2026', tag: 'diğer' },
|
||||||
|
].map(row => (
|
||||||
|
<div key={row.name} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 14px', borderRadius: '12px', border: `1px solid ${T.border}`, marginBottom: '8px' }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||||
|
<span style={{ width: 8, height: 8, borderRadius: '50%', background: T.green }} />
|
||||||
|
<span style={{ fontSize: '13.5px', fontWeight: 600 }}>{row.name}</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||||
|
<span style={{ fontSize: '12px', color: T.inkFaint }}>{row.date}</span>
|
||||||
|
<span style={{ fontSize: '11px', fontWeight: 700, padding: '3px 10px', borderRadius: '999px', background: T.orangeSoft, color: T.orangeDark }}>{row.tag}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ STATS ═══════════════════════════ */}
|
||||||
|
<section style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px) clamp(48px,7vw,72px)' }}>
|
||||||
|
<div className="grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: '16px' }}>
|
||||||
|
{[
|
||||||
|
{ value: '1', label: 'Sabit fiyat, tüm avukatlara' },
|
||||||
|
{ value: '40.000 ₺', label: 'Yıllık, gizli ücret yok' },
|
||||||
|
{ value: '5', label: 'Mahkeme kaynağı tek ekranda' },
|
||||||
|
{ value: '7/24', label: 'Dosyanızla çalışan ortak' },
|
||||||
|
].map(s => (
|
||||||
|
<div key={s.label} style={{ borderRadius: '18px', border: `1px solid ${T.border}`, padding: '22px 16px', textAlign: 'center' }}>
|
||||||
|
<div style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '28px', color: T.orange }}>{s.value}</div>
|
||||||
|
<div style={{ fontSize: '12.5px', color: T.inkSoft, marginTop: '6px', lineHeight: 1.4 }}>{s.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ TANIŞIN — alternating feature showcase ══════════════ */}
|
||||||
|
<section id="tanisin" style={{ maxWidth: '1200px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
|
||||||
|
<Reveal>
|
||||||
|
<div style={{ textAlign: 'center', marginBottom: 'clamp(48px,8vw,80px)' }}>
|
||||||
|
<h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(28px,4vw,42px)', margin: '0 0 12px', letterSpacing: '-0.02em' }}>AyrisLegal ile Tanışın</h2>
|
||||||
|
<p style={{ fontSize: '16px', color: T.inkSoft }}>Modern hukukçunun ihtiyaç duyduğu tüm araçlar, tek bir platformda</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
{/* 01 — Dava Dosyası Yönetimi */}
|
||||||
|
<div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center', marginBottom: 'clamp(64px,10vw,120px)' }}>
|
||||||
|
<Reveal>
|
||||||
|
<div>
|
||||||
|
<span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>01</span>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Dava Dosyası Yönetimi</h3>
|
||||||
|
<p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
|
||||||
|
Belgelerinizi yükleyin, yapay zeka saniyeler içinde okuyup analiz etsin. Dosyanın tarafları, UYAP bilgileri ve genel durumu tek ekranda.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.08}>
|
||||||
|
<BrowserFrame>
|
||||||
|
<div style={{ padding: '20px' }}>
|
||||||
|
<div style={{ fontSize: '12px', fontWeight: 700, color: T.inkFaint, marginBottom: '12px' }}>GENEL BAKIŞ</div>
|
||||||
|
{['Genel Bakış', 'Belgeler', 'İçtihat Arama', 'Dilekçeler', 'Chat'].map((t, i) => (
|
||||||
|
<div key={t} style={{ display: 'inline-block', fontSize: '12px', fontWeight: 600, padding: '6px 12px', borderRadius: '999px', marginRight: '6px', marginBottom: '14px', background: i === 0 ? T.orange : T.navySoft, color: i === 0 ? '#fff' : T.inkSoft }}>{t}</div>
|
||||||
|
))}
|
||||||
|
<div style={{ borderRadius: '14px', border: `1px solid ${T.border}`, padding: '16px', background: T.bgSoft }}>
|
||||||
|
<div style={{ fontSize: '13px', fontWeight: 700, marginBottom: '8px' }}>Taraflar</div>
|
||||||
|
<div style={{ fontSize: '12.5px', color: T.inkSoft, lineHeight: 1.8 }}>
|
||||||
|
Davacı: Elif Yılmaz<br />Davalı: Mehmet Kaya<br />Mahkeme: Ankara 33. Sulh Hukuk Mahkemesi
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 02 — Akıllı Analizler */}
|
||||||
|
<div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center', marginBottom: 'clamp(64px,10vw,120px)' }}>
|
||||||
|
<Reveal className="order-2" delay={0.08}>
|
||||||
|
<BrowserFrame>
|
||||||
|
<div style={{ padding: '20px' }}>
|
||||||
|
<div style={{ fontSize: '13px', fontWeight: 700, marginBottom: '12px' }}>⚡ Dava Stratejisi</div>
|
||||||
|
<ul style={{ margin: 0, padding: '0 0 0 18px', fontSize: '12.5px', color: T.inkSoft, lineHeight: 1.9 }}>
|
||||||
|
<li>Kira sözleşmesinin emsal olarak kullanılması</li>
|
||||||
|
<li>Bilirkişi raporundaki hatalı değerlendirmelerin çürütülmesi</li>
|
||||||
|
<li>Kira bedelinin 01.08.2023'ten itibaren geçerli sayılması</li>
|
||||||
|
</ul>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', marginTop: '16px' }}>
|
||||||
|
<div style={{ borderRadius: '12px', border: `1px solid ${T.border}`, padding: '12px', background: T.greenSoft }}>
|
||||||
|
<div style={{ fontSize: '11px', fontWeight: 700, color: T.green, marginBottom: '4px' }}>✓ MEVCUT DELİLLER</div>
|
||||||
|
<div style={{ fontSize: '11.5px', color: T.inkSoft }}>Temmuz 2026 emsal ilanları</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ borderRadius: '12px', border: `1px solid ${T.border}`, padding: '12px', background: '#FEF2F2' }}>
|
||||||
|
<div style={{ fontSize: '11px', fontWeight: 700, color: '#DC2626', marginBottom: '4px' }}>✕ EKSİK DELİLLER</div>
|
||||||
|
<div style={{ fontSize: '11.5px', color: T.inkSoft }}>Güncel emsal kira ilanı</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal>
|
||||||
|
<div>
|
||||||
|
<span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>02</span>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Dosya İçerisinde Akıllı Analizler</h3>
|
||||||
|
<p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: '0 0 16px' }}>
|
||||||
|
Dosya Özeti, Dosya Röntgeni, Çelişki Avcısı, Dava Stratejisi ve Müzakere/Arabuluculuk analizleri — dosyanızdaki tüm belgeleri okuyarak tek tıkla kapsamlı analizler sunar.
|
||||||
|
</p>
|
||||||
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
|
||||||
|
{['🚨 Çelişki Avcısı', '📋 Dosya Özeti', '🔎 Dosya Röntgeni', '⚖️ Müzakere'].map(t => (
|
||||||
|
<span key={t} className="pill-badge" style={{ background: T.navySoft, color: T.navy }}>{t}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 03 — İçtihat Arama ve Raporlama */}
|
||||||
|
<div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center', marginBottom: 'clamp(64px,10vw,120px)' }}>
|
||||||
|
<Reveal>
|
||||||
|
<div>
|
||||||
|
<span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>03</span>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>İçtihat Arama ve Raporlama</h3>
|
||||||
|
<p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
|
||||||
|
Doğal dille arayın, AyrisLegal sizin için en alakalı Yargıtay, Danıştay ve AYM kararlarını bulsun, okusun ve kapsamlı bir içtihat raporu hazırlasın.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.08}>
|
||||||
|
<BrowserFrame>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: '300px' }}>
|
||||||
|
<div style={{ padding: '16px', borderRight: `1px solid ${T.border}` }}>
|
||||||
|
<div style={{ fontSize: '11px', fontWeight: 700, color: T.inkFaint, marginBottom: '10px' }}>SONUÇLAR (50)</div>
|
||||||
|
{[
|
||||||
|
{ court: 'YARGITAY', chamber: 'Ceza Genel Kurulu', esas: '2020/165', karar: '2021/273', date: '10.06.2021' },
|
||||||
|
{ court: 'YARGITAY', chamber: '1. Ceza Dairesi', esas: '2023/5798', karar: '2023/5821', date: '02.10.2023' },
|
||||||
|
].map((r) => (
|
||||||
|
<div key={r.esas} style={{ borderRadius: '12px', border: `1px solid ${T.border}`, padding: '10px 12px', marginBottom: '8px' }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '6px' }}>
|
||||||
|
<span style={{ fontSize: '9px', fontWeight: 700, padding: '2px 7px', borderRadius: '999px', background: T.orangeSoft, color: T.orangeDark }}>{r.court}</span>
|
||||||
|
<span style={{ fontSize: '10.5px', color: T.inkFaint }}>{r.chamber}</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '12.5px', fontWeight: 700 }}>E. {r.esas} - K. {r.karar}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: '16px' }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12.5px', fontWeight: 700, marginBottom: '10px' }}>✨ AyrisLegal İçtihat Raporu</div>
|
||||||
|
<div style={{ fontSize: '11.5px', color: T.inkSoft, lineHeight: 1.7 }}>
|
||||||
|
<b style={{ color: T.ink }}>1. Alaka Puanı ve Durum</b><br />
|
||||||
|
Sunulan 48 karardan yaklaşık 15 tanesi doğrudan uyuşmazlığın esasına ilişkindir…
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 04 — Dilekçe */}
|
||||||
|
<div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center' }}>
|
||||||
|
<Reveal className="order-2" delay={0.08}>
|
||||||
|
<BrowserFrame>
|
||||||
|
<div style={{ padding: '20px' }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '14px' }}>
|
||||||
|
<span style={{ fontSize: '11px', fontWeight: 700, padding: '4px 10px', borderRadius: '999px', background: T.greenSoft, color: T.green }}>✓ Dilekçe Oluşturma Tamamlandı</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '12px', color: T.inkSoft, lineHeight: 1.8, borderRadius: '12px', border: `1px solid ${T.border}`, padding: '14px', background: T.bgSoft }}>
|
||||||
|
<b style={{ color: T.ink }}>SONUÇ VE İSTEM:</b> Yukarıda arz ve izah edilen ve Sayın Dairenizce re'sen gözetilecek nedenlerle davalı tarafın usul ve yasaya aykırı istinaf başvurusunun reddine karar verilmesini saygılarımızla arz ve talep ederiz.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal>
|
||||||
|
<div>
|
||||||
|
<span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>04</span>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Yapay Zeka Destekli Dilekçe Oluşturma</h3>
|
||||||
|
<p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
|
||||||
|
Süre tutum, mazeret ve vekaletname sunma dilekçelerini tek tıkla saniyeler içinde hazırlar. Dava dosyanızdaki belgeler ve içtihat araştırmaları ışığında, olaya uygun profesyonel dilekçeler oluşturun.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ BÜRO / OFİS DASHBOARD ═══════════════ */}
|
||||||
|
<section style={{ background: T.bgSoft, padding: 'clamp(48px,8vw,96px) 0' }}>
|
||||||
|
<div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px)' }}>
|
||||||
|
<div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: '56px', alignItems: 'center' }}>
|
||||||
|
<Reveal>
|
||||||
|
<div>
|
||||||
|
<span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>05</span>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Tüm Büro İhtiyaçlarınız Tek Platformda</h3>
|
||||||
|
<p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
|
||||||
|
Dava yönetiminden dilekçe hazırlamaya, içtihat aramasından UYAP entegrasyonuna kadar — bizzat mahkemeye gidip duruşmaya girmek dışında her şey burada.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.08}>
|
||||||
|
<BrowserFrame>
|
||||||
|
<div style={{ padding: '20px' }}>
|
||||||
|
<div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '10px' }}>
|
||||||
|
{[
|
||||||
|
{ icon: '📁', label: 'Evrak Yönetimi', color: T.orangeSoft, fg: T.orangeDark },
|
||||||
|
{ icon: '📄', label: 'Dilekçe Sistemi', color: T.navySoft, fg: T.navy },
|
||||||
|
{ icon: '🔍', label: 'İçtihat Arama', color: T.greenSoft, fg: T.green },
|
||||||
|
{ icon: '👥', label: 'Ekip Paylaşımı', color: '#F3E8FF', fg: '#7E22CE', soon: true },
|
||||||
|
{ icon: '🎓', label: 'Dijital Stajyer', color: '#FEF9C3', fg: '#A16207' },
|
||||||
|
{ icon: '💬', label: 'AyrisLegal Chat', color: '#FFE4E6', fg: '#BE123C' },
|
||||||
|
].map(c => (
|
||||||
|
<div key={c.label} style={{ borderRadius: '14px', padding: '14px 10px', background: c.color, textAlign: 'center' }}>
|
||||||
|
<div style={{ fontSize: '20px', marginBottom: '6px' }}>{c.icon}</div>
|
||||||
|
<div style={{ fontSize: '11.5px', fontWeight: 700, color: c.fg }}>{c.label}</div>
|
||||||
|
{c.soon && <div style={{ fontSize: '9px', fontWeight: 700, marginTop: '4px', color: c.fg, opacity: 0.7 }}>YAKINDA</div>}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ ÜÇ KART — Sohbet / Dilekçe / UYAP ═══════ */}
|
||||||
|
<section style={{ maxWidth: '1200px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
|
||||||
|
<div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: '20px', marginBottom: '20px' }}>
|
||||||
|
<Reveal>
|
||||||
|
<div style={{ borderRadius: '24px', padding: '36px', background: `linear-gradient(135deg, ${T.orange}, ${T.orangeDark})`, color: '#fff', height: '100%' }}>
|
||||||
|
<div style={{ fontSize: '26px', marginBottom: '14px' }}>💬</div>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '24px', margin: '0 0 12px' }}>Dosyalarınızla Sohbet Edin</h3>
|
||||||
|
<p style={{ fontSize: '14.5px', lineHeight: 1.7, opacity: 0.92, margin: '0 0 18px', maxWidth: '48ch' }}>
|
||||||
|
Dava dosyalarınızı AyrisLegal'a yükleyin, sizin için hepsini saniyeler içinde okuyup analiz etsin, hazırlamasını isteyeceğiniz dilekçelerinizi Türk hukuk sistemine özel eğitilmiş yapay zekasıyla hazırlasın.
|
||||||
|
</p>
|
||||||
|
<span style={{ display: 'inline-flex', fontSize: '12.5px', fontWeight: 700, padding: '8px 16px', borderRadius: '999px', background: 'rgba(255,255,255,0.2)' }}>🌐 Türk Hukukuna Özel Yapay Zeka</span>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.06}>
|
||||||
|
<div className="feature-card" style={{ height: '100%' }}>
|
||||||
|
<div style={{ fontSize: '24px', marginBottom: '14px' }}>📝</div>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '20px', margin: '0 0 10px' }}>Dilekçe Asistanı</h3>
|
||||||
|
<p style={{ fontSize: '14px', lineHeight: 1.65, color: T.inkSoft, margin: 0 }}>
|
||||||
|
Dava dosyanızdaki belgeleri, analizleri ve içtihat araştırmalarını bağlam olarak ekleyin, eşi benzeri olmayan profesyonellikte dilekçeler hazırlayın.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
<div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '20px' }}>
|
||||||
|
<Reveal>
|
||||||
|
<div className="feature-card">
|
||||||
|
<div style={{ fontSize: '24px', marginBottom: '14px' }}>⚖️</div>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '17px', margin: '0 0 10px' }}>Akıllı İçtihat Arama</h3>
|
||||||
|
<p style={{ fontSize: '13.5px', lineHeight: 1.6, color: T.inkSoft, margin: 0 }}>
|
||||||
|
Sizin için en alakalı sonuçları bulur, okur, aramanızla alakalı kararları belirler ve bunlarla kapsamlı bir içtihat raporu oluşturur.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.06}>
|
||||||
|
<div className="feature-card">
|
||||||
|
<div style={{ fontSize: '24px', marginBottom: '14px' }}>📂</div>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '17px', margin: '0 0 10px' }}>UDF & PDF Desteği</h3>
|
||||||
|
<p style={{ fontSize: '13.5px', lineHeight: 1.6, color: T.inkSoft, margin: '0 0 12px' }}>
|
||||||
|
UYAP formatındaki (UDF) dosyalarınızı doğrudan yükleyin. Otomatik OCR ve sınıflandırma.
|
||||||
|
</p>
|
||||||
|
<span className="pill-badge" style={{ background: T.navySoft, color: T.navy, fontSize: '11.5px' }}>🧩 UYAP Chrome Eklentisi</span>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.12}>
|
||||||
|
<div className="feature-card">
|
||||||
|
<div style={{ fontSize: '24px', marginBottom: '14px' }}>🎯</div>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '17px', margin: '0 0 10px' }}>Dava Stratejisi ve Simülatör</h3>
|
||||||
|
<p style={{ fontSize: '13.5px', lineHeight: 1.6, color: T.inkSoft, margin: 0 }}>
|
||||||
|
Mahkemeye çıkmadan önce yapay zekanın "Hakim", "Savcı" ya da "Karşı Taraf Avukatı" rolüne girdiği bir simülasyonla savunmanızı önceden deneyimleyin.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ GÜVEN ═══════════════════════════ */}
|
||||||
|
<section style={{ background: T.navy, color: '#fff', padding: 'clamp(48px,8vw,96px) 0' }}>
|
||||||
|
<div style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px)' }}>
|
||||||
|
<Reveal>
|
||||||
|
<div style={{ textAlign: 'center', marginBottom: '48px' }}>
|
||||||
|
<h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(26px,3.4vw,38px)', margin: '0 0 12px' }}>Dosyalarınız Sizin Kalır</h2>
|
||||||
|
<p style={{ fontSize: '15px', color: 'rgba(255,255,255,0.65)', maxWidth: '60ch', margin: '0 auto' }}>
|
||||||
|
Bir dava dosyası, bir avukatın elindeki en hassas belgedir. AyrisLegal'ı bu bilinçle kuruyoruz.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<div className="grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: '16px' }}>
|
||||||
|
{[
|
||||||
|
{ icon: '🔒', title: 'Yerel Şifreli Saklama', desc: 'Hassas veriler işletim sisteminizin kendi güvenli katmanıyla şifrelenir.' },
|
||||||
|
{ icon: '☁️', title: 'Kendi Drive’ınıza Yedekleme', desc: 'Yedekleme bizim sunucularımıza değil, sizin Drive hesabınıza yapılır.' },
|
||||||
|
{ icon: '🚫', title: 'Sadece Sizin Analiziniz', desc: 'Belgeleriniz başka kullanıcılarla paylaşılmaz.' },
|
||||||
|
{ icon: '✅', title: 'Son Karar Her Zaman Sizde', desc: 'AyrisLegal analiz ve taslak üretir, nihai kontrol sizde kalır.' },
|
||||||
|
].map((item, i) => (
|
||||||
|
<Reveal key={item.title} delay={i * 0.05}>
|
||||||
|
<div style={{ borderRadius: '18px', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', padding: '22px' }}>
|
||||||
|
<div style={{ fontSize: '22px', marginBottom: '12px' }}>{item.icon}</div>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 700, fontSize: '14.5px', margin: '0 0 8px' }}>{item.title}</h3>
|
||||||
|
<p style={{ fontSize: '12.5px', lineHeight: 1.6, color: 'rgba(255,255,255,0.6)', margin: 0 }}>{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ FİYATLANDIRMA ═══════════════════ */}
|
||||||
|
<section id="fiyatlandirma" style={{ maxWidth: '1100px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
|
||||||
|
<Reveal>
|
||||||
|
<div style={{ textAlign: 'center', marginBottom: '20px' }}>
|
||||||
|
<h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(26px,3.4vw,38px)', margin: '0 0 12px' }}>İhtiyacınıza Uygun Modeller</h2>
|
||||||
|
<p style={{ fontSize: '15px', color: T.inkSoft }}>Basit, şeffaf fiyatlandırma — gizli ücret yok.</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.05}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: '36px' }}>
|
||||||
|
<div style={{ display: 'inline-flex', padding: '4px', borderRadius: '999px', background: T.navySoft, gap: '4px' }}>
|
||||||
|
<button onClick={() => setPricingYearly(true)} style={{ border: 'none', cursor: 'pointer', padding: '9px 18px', borderRadius: '999px', fontSize: '13.5px', fontWeight: 700, background: pricingYearly ? '#fff' : 'transparent', color: pricingYearly ? T.ink : T.inkSoft, boxShadow: pricingYearly ? '0 2px 8px rgba(11,18,32,0.1)' : 'none' }}>Yıllık</button>
|
||||||
|
<button onClick={() => setPricingYearly(false)} style={{ border: 'none', cursor: 'pointer', padding: '9px 18px', borderRadius: '999px', fontSize: '13.5px', fontWeight: 700, background: !pricingYearly ? '#fff' : 'transparent', color: !pricingYearly ? T.ink : T.inkSoft, boxShadow: !pricingYearly ? '0 2px 8px rgba(11,18,32,0.1)' : 'none' }}>Aylık bilgi al</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<div className="grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '24px' }}>
|
||||||
|
<Reveal delay={0.08}>
|
||||||
|
<div style={{ borderRadius: '24px', border: `1.5px solid ${T.border}`, padding: '36px 32px', height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<p style={{ margin: 0, fontSize: '13px', fontWeight: 700, color: T.orange }}>BİREYSEL AVUKAT</p>
|
||||||
|
<p style={{ margin: '10px 0 0', fontFamily: T.fontHead, fontWeight: 800, fontSize: '44px' }}>{pricingYearly ? '40.000 ₺' : 'Bilgi Al'}<span style={{ fontSize: '15px', fontWeight: 500, color: T.inkFaint }}>{pricingYearly ? ' / yıl' : ''}</span></p>
|
||||||
|
<p style={{ fontSize: '14px', color: T.inkSoft, margin: '16px 0 0' }}>Serbest çalışan avukatlar için tasarlanmış yapay zeka çalışma ortağı.</p>
|
||||||
|
<div style={{ borderTop: `1px solid ${T.border}`, margin: '24px 0' }} />
|
||||||
|
<ul style={{ listStyle: 'none', margin: '0 0 28px', padding: 0, display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||||
|
{['Sınırsız dosya analizi', 'AI tartışma ortağı', 'İçtihat arama', 'Dilekçe taslağı üretimi'].map(item => (
|
||||||
|
<li key={item} style={{ display: 'flex', gap: '10px', fontSize: '14px', alignItems: 'center' }}>
|
||||||
|
<span style={{ color: T.green, fontWeight: 800 }}>✓</span>{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<a href="#iletisim" className="btn-outline" style={{ marginTop: 'auto', width: '100%' }}>Ücretsiz Deneyin</a>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.14}>
|
||||||
|
<div style={{ borderRadius: '24px', border: `1.5px solid ${T.orange}`, padding: '36px 32px', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative', background: T.orangeSoft }}>
|
||||||
|
<span style={{ position: 'absolute', top: '-12px', left: '32px', fontSize: '11px', fontWeight: 700, padding: '5px 14px', borderRadius: '999px', background: T.orange, color: '#fff' }}>Ekip Çalışması</span>
|
||||||
|
<p style={{ margin: 0, fontSize: '13px', fontWeight: 700, color: T.orangeDark }}>HUKUK BÜROSU</p>
|
||||||
|
<p style={{ margin: '10px 0 0', fontFamily: T.fontHead, fontWeight: 800, fontSize: '32px' }}>Özel Fiyatlandırma</p>
|
||||||
|
<p style={{ fontSize: '14px', color: T.inkSoft, margin: '16px 0 0' }}>Tüm ekibiniz için paylaşımlı çalışma alanı, dosya yönetimi ve özel entegrasyonlar.</p>
|
||||||
|
<div style={{ borderTop: `1px solid rgba(11,18,32,0.15)`, margin: '24px 0' }} />
|
||||||
|
<ul style={{ listStyle: 'none', margin: '0 0 28px', padding: 0, display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||||
|
{['Tüm bireysel özellikler', 'Ekip içi dosya paylaşımı', 'Ortak içtihat havuzu', 'Kurucu ekiple özel destek'].map(item => (
|
||||||
|
<li key={item} style={{ display: 'flex', gap: '10px', fontSize: '14px', alignItems: 'center' }}>
|
||||||
|
<span style={{ color: T.orangeDark, fontWeight: 800 }}>✓</span>{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<a href="#iletisim" className="btn-primary" style={{ marginTop: 'auto', width: '100%' }}>İletişime Geçin</a>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ SSS ══════════════════════════════ */}
|
||||||
|
<section id="sss" style={{ maxWidth: '1000px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
|
||||||
|
<Reveal>
|
||||||
|
<h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(26px,3.4vw,38px)', textAlign: 'center', margin: '0 0 40px' }}>Muhtemelen Bunları Soracaksınız</h2>
|
||||||
|
</Reveal>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
|
||||||
|
{[
|
||||||
|
{ q: 'Müvekkil dosyalarım nerede saklanıyor, kim görebilir?', a: 'Belgeler yerel şifreli depolamada tutulur, yedekleme sizin kendi Google Drive hesabınıza yapılır. Başka kullanıcı veya üçüncü tarafla paylaşılmaz.' },
|
||||||
|
{ q: 'Yapay zeka yanlış bir şey söylerse sorumluluk kimde?', a: 'AyrisLegal karar organı değildir — analiz, taslak ve öneri üretir. Ürettiği emsal kararlar gerçek esas/karar numaralarıyla gelir, kaynağından doğrulanabilir. Nihai değerlendirme ve imza her zaman sizde kalır.' },
|
||||||
|
{ q: 'UYAP şifremi AyrisLegal ile paylaşmam gerekiyor mu?', a: 'Hayır. UYAP eklentisi tarayıcınızda zaten açık olan oturumu kullanır — kimlik bilgileriniz hiçbir zaman AyrisLegal sunucularına iletilmez ya da saklanmaz.' },
|
||||||
|
{ q: 'Büromdaki diğer avukatlarla paylaşabilir miyim?', a: 'Şu an platform bireysel avukat için tasarlandı. Ekip/büro paylaşımı yol haritamızda — Hukuk Bürosu planı için iletişime geçin.' },
|
||||||
|
].map(item => (
|
||||||
|
<Reveal key={item.q}>
|
||||||
|
<div style={{ borderRadius: '18px', border: `1px solid ${T.border}`, padding: '22px 24px' }}>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 700, fontSize: '16px', margin: '0 0 8px' }}>{item.q}</h3>
|
||||||
|
<p style={{ fontSize: '14px', lineHeight: 1.65, color: T.inkSoft, margin: 0 }}>{item.a}</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ İLETİŞİM ═════════════════════════ */}
|
||||||
|
<section id="iletisim" style={{ background: T.bgSoft, padding: 'clamp(48px,8vw,96px) 0' }}>
|
||||||
|
<div style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px)' }}>
|
||||||
|
<div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: '48px', alignItems: 'start' }}>
|
||||||
|
<Reveal>
|
||||||
|
<div>
|
||||||
|
<h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(24px,3vw,32px)', margin: '0 0 14px' }}>
|
||||||
|
Şu an müşteri referansı göstermiyoruz — kasıtlı olarak.
|
||||||
|
</h2>
|
||||||
|
<p style={{ fontSize: '14.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
|
||||||
|
AyrisLegal yeni. Sahte ya da ödünç yorumlar yerine dürüst olmayı seçtik: platformu kurucu ekiple birlikte, doğrudan geri bildiriminizle şekillendiriyoruz.
|
||||||
|
</p>
|
||||||
|
<ul style={{ listStyle: 'none', margin: '26px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
{['Formu doldurun', 'Kurucu ekipten biri sizi arar', '15 dakikalık canlı demoda dosyanızla test edersiniz'].map((step, i) => (
|
||||||
|
<li key={step} style={{ display: 'flex', gap: '10px', fontSize: '14px', color: T.inkSoft, alignItems: 'center' }}>
|
||||||
|
<span style={{ width: 22, height: 22, borderRadius: '50%', background: T.orange, color: '#fff', fontSize: '11px', fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{i + 1}</span>
|
||||||
|
{step}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.08}>
|
||||||
|
<ContactFormV2 />
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ══════════════════════════════ FOOTER ═══════════════════════════ */}
|
||||||
|
<footer style={{ maxWidth: '1200px', margin: '0 auto', padding: '32px clamp(20px,6vw,72px)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px', fontSize: '13px', color: T.inkFaint, borderTop: `1px solid ${T.border}` }}>
|
||||||
|
<span>© {new Date().getFullYear()} AyrisLegal — Ayris Tech'in bir ürünüdür.</span>
|
||||||
|
<a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" style={{ color: T.inkFaint }}>Created by ayris.tech</a>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,146 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
type FormState = 'idle' | 'loading' | 'success' | 'error'
|
||||||
|
|
||||||
|
const T = {
|
||||||
|
ink: '#0B1220',
|
||||||
|
inkSoft: 'rgba(11,18,32,0.6)',
|
||||||
|
border: 'rgba(11,18,32,0.12)',
|
||||||
|
orange: '#F2600C',
|
||||||
|
orangeSoft: '#FFF1E6',
|
||||||
|
fontHead: '"Archivo", sans-serif',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ContactFormV2() {
|
||||||
|
const [state, setState] = useState<FormState>('idle')
|
||||||
|
const [form, setForm] = useState({ name: '', org: '', email: '', phone: '', _hp: '' })
|
||||||
|
|
||||||
|
const set = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
setForm(p => ({ ...p, [k]: e.target.value }))
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
if (form._hp) return
|
||||||
|
setState('loading')
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/contact', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ name: form.name, email: form.email, barNo: form.org, message: form.phone }),
|
||||||
|
})
|
||||||
|
setState(res.ok ? 'success' : 'error')
|
||||||
|
} catch {
|
||||||
|
setState('error')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state === 'success') {
|
||||||
|
return (
|
||||||
|
<div style={{ borderRadius: '24px', padding: '40px', textAlign: 'center', background: T.orangeSoft, border: `1px solid ${T.border}` }}>
|
||||||
|
<div style={{ width: '48px', height: '48px', borderRadius: '50%', background: T.orange, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px', color: '#fff', fontSize: '22px' }}>✓</div>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '20px', margin: '0 0 8px', color: T.ink }}>Talebiniz alındı!</h3>
|
||||||
|
<p style={{ fontSize: '14px', margin: 0, color: T.inkSoft }}>
|
||||||
|
Kurucu ekipten kısa süre içinde size dönüş yapılacak.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const inputStyle: React.CSSProperties = {
|
||||||
|
width: '100%', minHeight: '46px', padding: '10px 16px',
|
||||||
|
fontFamily: 'inherit', fontSize: '14px', color: T.ink,
|
||||||
|
background: '#fff',
|
||||||
|
border: `1.5px solid ${T.border}`,
|
||||||
|
borderRadius: '12px',
|
||||||
|
transition: 'border-color .15s, box-shadow .15s',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
outline: 'none',
|
||||||
|
}
|
||||||
|
|
||||||
|
const labelStyle: React.CSSProperties = {
|
||||||
|
display: 'block', fontSize: '13px', fontWeight: 600,
|
||||||
|
marginBottom: '6px', color: T.ink,
|
||||||
|
}
|
||||||
|
|
||||||
|
const focusOn = (e: React.FocusEvent<HTMLInputElement>) => {
|
||||||
|
e.target.style.borderColor = T.orange
|
||||||
|
e.target.style.boxShadow = `0 0 0 4px ${T.orangeSoft}`
|
||||||
|
}
|
||||||
|
const focusOff = (e: React.FocusEvent<HTMLInputElement>) => {
|
||||||
|
e.target.style.borderColor = T.border
|
||||||
|
e.target.style.boxShadow = 'none'
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))',
|
||||||
|
gap: '18px',
|
||||||
|
borderRadius: '24px',
|
||||||
|
border: `1px solid ${T.border}`,
|
||||||
|
padding: '32px',
|
||||||
|
background: '#fff',
|
||||||
|
boxShadow: '0 12px 40px rgba(11,18,32,0.06)',
|
||||||
|
}}
|
||||||
|
noValidate
|
||||||
|
>
|
||||||
|
<div aria-hidden="true" style={{ display: 'none' }} tabIndex={-1}>
|
||||||
|
<input type="text" name="_hp" value={form._hp} onChange={set('_hp')} autoComplete="off" tabIndex={-1} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ gridColumn: 'span 1' }}>
|
||||||
|
<label style={labelStyle} htmlFor="af2_name">Ad Soyad <span style={{ color: T.orange }}>*</span></label>
|
||||||
|
<input id="af2_name" type="text" required placeholder="Av. Ayşe Yılmaz" value={form.name} onChange={set('name')} style={inputStyle} onFocus={focusOn} onBlur={focusOff} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label style={labelStyle} htmlFor="af2_org">Büro / Kurum</label>
|
||||||
|
<input id="af2_org" type="text" placeholder="Yılmaz Hukuk Bürosu" value={form.org} onChange={set('org')} style={inputStyle} onFocus={focusOn} onBlur={focusOff} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label style={labelStyle} htmlFor="af2_email">E-posta <span style={{ color: T.orange }}>*</span></label>
|
||||||
|
<input id="af2_email" type="email" required placeholder="ayse@buro.com" value={form.email} onChange={set('email')} style={inputStyle} onFocus={focusOn} onBlur={focusOff} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label style={labelStyle} htmlFor="af2_phone">Telefon</label>
|
||||||
|
<input id="af2_phone" type="tel" placeholder="0532 000 00 00" value={form.phone} onChange={set('phone')} style={inputStyle} onFocus={focusOn} onBlur={focusOff} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{state === 'error' && (
|
||||||
|
<div style={{ gridColumn: '1 / -1', fontSize: '13px', color: '#DC2626' }}>
|
||||||
|
Bir hata oluştu. Lütfen tekrar deneyin veya{' '}
|
||||||
|
<a href="mailto:info@ayris.tech" style={{ color: '#DC2626' }}>info@ayris.tech</a> adresine yazın.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={state === 'loading'}
|
||||||
|
style={{
|
||||||
|
gridColumn: '1 / -1',
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
|
||||||
|
cursor: state === 'loading' ? 'not-allowed' : 'pointer',
|
||||||
|
fontFamily: 'inherit', fontWeight: 700, fontSize: '15px',
|
||||||
|
color: '#fff',
|
||||||
|
background: T.orange,
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '999px',
|
||||||
|
padding: '15px',
|
||||||
|
transition: 'background .15s, transform .1s',
|
||||||
|
opacity: state === 'loading' ? 0.7 : 1,
|
||||||
|
marginTop: '4px',
|
||||||
|
}}
|
||||||
|
onMouseEnter={e => { if (state !== 'loading') (e.currentTarget as HTMLElement).style.background = '#D94E00' }}
|
||||||
|
onMouseLeave={e => { if (state !== 'loading') (e.currentTarget as HTMLElement).style.background = T.orange }}
|
||||||
|
>
|
||||||
|
{state === 'loading' ? 'Gönderiliyor…' : 'Demo Talep Et →'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,169 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
type FormState = 'idle' | 'loading' | 'success' | 'error'
|
||||||
|
|
||||||
|
const T = {
|
||||||
|
bg: '#f3f2f2',
|
||||||
|
surface: '#eae9e9',
|
||||||
|
text: '#201f1d',
|
||||||
|
divider: 'rgba(32,31,29,0.16)',
|
||||||
|
accent: '#b68235',
|
||||||
|
accentDark: '#7d5411',
|
||||||
|
fontHead: '"Sora", sans-serif',
|
||||||
|
fontBody: '"Inter", sans-serif',
|
||||||
|
radiusMd: '4px',
|
||||||
|
radiusLg: '7px',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ContactForm() {
|
||||||
|
const [state, setState] = useState<FormState>('idle')
|
||||||
|
const [form, setForm] = useState({ name: '', org: '', email: '', phone: '', _hp: '' })
|
||||||
|
|
||||||
|
const set = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
setForm(p => ({ ...p, [k]: e.target.value }))
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
if (form._hp) return
|
||||||
|
setState('loading')
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/contact', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ name: form.name, email: form.email, barNo: form.org, message: form.phone }),
|
||||||
|
})
|
||||||
|
setState(res.ok ? 'success' : 'error')
|
||||||
|
} catch {
|
||||||
|
setState('error')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Success */
|
||||||
|
if (state === 'success') {
|
||||||
|
return (
|
||||||
|
<div style={{ border: `1px solid ${T.divider}`, borderRadius: T.radiusLg, padding: '40px', textAlign: 'center', background: T.surface }}>
|
||||||
|
<h3 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: '22px', margin: '0 0 8px' }}>Talebiniz alındı.</h3>
|
||||||
|
<p style={{ fontSize: '14.5px', margin: 0, color: 'rgba(32,31,29,0.78)', fontFamily: T.fontBody }}>
|
||||||
|
Kurucu ekipten kısa süre içinde size dönüş yapılacak.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const inputStyle: React.CSSProperties = {
|
||||||
|
width: '100%', minHeight: '36px', padding: '6px 10px',
|
||||||
|
fontFamily: T.fontBody, fontSize: '14px', color: T.text,
|
||||||
|
background: 'transparent',
|
||||||
|
border: `1px solid ${T.divider}`, borderRadius: T.radiusMd,
|
||||||
|
transition: 'border-color .15s',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
}
|
||||||
|
|
||||||
|
const labelStyle: React.CSSProperties = {
|
||||||
|
display: 'block', fontSize: '12px', marginBottom: '5px',
|
||||||
|
color: 'rgba(32,31,29,0.7)', fontFamily: T.fontBody,
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))',
|
||||||
|
gap: '16px',
|
||||||
|
border: `1px solid ${T.divider}`,
|
||||||
|
borderRadius: T.radiusLg,
|
||||||
|
padding: '28px',
|
||||||
|
background: T.bg,
|
||||||
|
}}
|
||||||
|
noValidate
|
||||||
|
>
|
||||||
|
{/* Honeypot */}
|
||||||
|
<div aria-hidden="true" style={{ display: 'none' }} tabIndex={-1}>
|
||||||
|
<input type="text" name="_hp" value={form._hp} onChange={set('_hp')} autoComplete="off" tabIndex={-1} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ gridColumn: 'span 1' }}>
|
||||||
|
<label style={labelStyle} htmlFor="af_name">Ad Soyad <span style={{ color: T.accent }}>*</span></label>
|
||||||
|
<input
|
||||||
|
id="af_name" type="text" required
|
||||||
|
placeholder="Av. Ayşe Yılmaz"
|
||||||
|
value={form.name} onChange={set('name')}
|
||||||
|
style={inputStyle}
|
||||||
|
onFocus={e => (e.target.style.borderColor = T.accent)}
|
||||||
|
onBlur={e => (e.target.style.borderColor = T.divider)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label style={labelStyle} htmlFor="af_org">Büro / Kurum</label>
|
||||||
|
<input
|
||||||
|
id="af_org" type="text"
|
||||||
|
placeholder="Yılmaz Hukuk Bürosu"
|
||||||
|
value={form.org} onChange={set('org')}
|
||||||
|
style={inputStyle}
|
||||||
|
onFocus={e => (e.target.style.borderColor = T.accent)}
|
||||||
|
onBlur={e => (e.target.style.borderColor = T.divider)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label style={labelStyle} htmlFor="af_email">E-posta <span style={{ color: T.accent }}>*</span></label>
|
||||||
|
<input
|
||||||
|
id="af_email" type="email" required
|
||||||
|
placeholder="ayse@buro.com"
|
||||||
|
value={form.email} onChange={set('email')}
|
||||||
|
style={inputStyle}
|
||||||
|
onFocus={e => (e.target.style.borderColor = T.accent)}
|
||||||
|
onBlur={e => (e.target.style.borderColor = T.divider)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label style={labelStyle} htmlFor="af_phone">Telefon</label>
|
||||||
|
<input
|
||||||
|
id="af_phone" type="tel"
|
||||||
|
placeholder="0532 000 00 00"
|
||||||
|
value={form.phone} onChange={set('phone')}
|
||||||
|
style={inputStyle}
|
||||||
|
onFocus={e => (e.target.style.borderColor = T.accent)}
|
||||||
|
onBlur={e => (e.target.style.borderColor = T.divider)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{state === 'error' && (
|
||||||
|
<div style={{ gridColumn: '1 / -1', fontSize: '13px', color: '#c0392b', fontFamily: T.fontBody }}>
|
||||||
|
Bir hata oluştu. Lütfen tekrar deneyin veya{' '}
|
||||||
|
<a href="mailto:info@ayris.tech" style={{ color: T.accent }}>info@ayris.tech</a> adresine yazın.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
id="contact_submit"
|
||||||
|
type="submit"
|
||||||
|
disabled={state === 'loading'}
|
||||||
|
style={{
|
||||||
|
gridColumn: '1 / -1',
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px',
|
||||||
|
cursor: state === 'loading' ? 'not-allowed' : 'pointer',
|
||||||
|
textDecoration: 'none',
|
||||||
|
fontFamily: T.fontHead, fontWeight: 600, fontSize: '15px', lineHeight: 1.2,
|
||||||
|
color: T.accent,
|
||||||
|
background: 'transparent',
|
||||||
|
border: `1px solid ${T.accent}`,
|
||||||
|
padding: '12px',
|
||||||
|
borderRadius: T.radiusMd,
|
||||||
|
transition: 'background .15s',
|
||||||
|
opacity: state === 'loading' ? 0.6 : 1,
|
||||||
|
marginTop: '4px',
|
||||||
|
}}
|
||||||
|
onMouseEnter={e => { if (state !== 'loading') (e.currentTarget as HTMLElement).style.background = 'rgba(182,130,53,0.10)' }}
|
||||||
|
onMouseLeave={e => { if (state !== 'loading') (e.currentTarget as HTMLElement).style.background = 'transparent' }}
|
||||||
|
>
|
||||||
|
{state === 'loading' ? 'Gönderiliyor…' : 'Demo Talep Et'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user