feat: özellikleri gerçek ürün kapsamına göre genişlet, güven ve SSS ekle
Özellikler bölümü rapordaki gerçek modüllere göre yeniden yapılandırıldı (dosya analizi, otomasyon, interaktif AI, içtihat arama, UYAP entegrasyonu). Güven bölümüne mesleki sorumluluk maddesi, itiraz giderme için yeni bir SSS bölümü ve iletişim formuna sonraki adım açıklaması eklendi. Contact form ve favicon, sitenin brutalist tema sistemiyle tutarlı hale getirildi.
This commit is contained in:
mstfyldz
+398
-296
@@ -1,25 +1,20 @@
|
||||
'use client'
|
||||
|
||||
import { useRef, useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useRef } from 'react'
|
||||
import { motion, useInView } from 'framer-motion'
|
||||
import ContactForm from '@/components/contact-form'
|
||||
|
||||
/* ─── Design system tokens (Classical) ────────────────────────────────── */
|
||||
/* ─── Design system tokens (Industrial / Swiss Print) ─────────────────── */
|
||||
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)',
|
||||
bg: '#F4F4F0',
|
||||
ink: '#0A0A0A',
|
||||
inkSoft: 'rgba(10,10,10,0.6)',
|
||||
inkFaint: 'rgba(10,10,10,0.38)',
|
||||
red: '#E61919',
|
||||
divider: 'rgba(10,10,10,0.16)',
|
||||
dividerHv: 'rgba(10,10,10,0.9)',
|
||||
fontHead: '"Archivo", sans-serif',
|
||||
fontMono: '"JetBrains Mono", monospace',
|
||||
}
|
||||
|
||||
/* ─── Reveal animation ─────────────────────────────────────────────────── */
|
||||
@@ -31,9 +26,9 @@ function Reveal({ children, className = '', delay = 0 }: {
|
||||
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 }}
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}
|
||||
transition={{ duration: 0.45, ease: 'easeOut', delay }}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
@@ -43,61 +38,65 @@ function Reveal({ children, className = '', delay = 0 }: {
|
||||
|
||||
/* ─── 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' },
|
||||
{ id: '02', href: '#is-akisi' },
|
||||
{ id: '03', href: '#farklilasim' },
|
||||
{ id: '04', href: '#ozellikler' },
|
||||
{ id: '05', href: '#fiyatlandirma' },
|
||||
{ id: '06', href: '#guven' },
|
||||
{ id: '07', href: '#iletisim' },
|
||||
]
|
||||
|
||||
/* ─── Component ─────────────────────────────────────────────────────────── */
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div style={{ background: T.bg, color: T.text, fontFamily: T.fontBody, minHeight: '100vh', position: 'relative' }}>
|
||||
<div style={{ background: T.bg, color: T.ink, fontFamily: T.fontMono, minHeight: '100vh', position: 'relative' }}>
|
||||
|
||||
{/* ── Inline fonts ── */}
|
||||
{/* ── Inline fonts + global rules ── */}
|
||||
<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; }
|
||||
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
|
||||
* { box-sizing: border-box; border-radius: 0 !important; }
|
||||
body { margin: 0; }
|
||||
a { color: ${T.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}; }
|
||||
a { color: ${T.red}; }
|
||||
:focus-visible { outline: 2px solid ${T.red}; outline-offset: 2px; }
|
||||
::selection { background: ${T.red}; color: #fff; }
|
||||
.rail-link { text-decoration: none; writing-mode: vertical-rl; font-size: 10px; letter-spacing: 0.14em; font-family: ${T.fontMono}; font-weight: 600; }
|
||||
.hr-line { height: 1px; border: 0; background: ${T.divider}; margin: 0; }
|
||||
.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; } }
|
||||
.hr-line-hv { height: 2px; border: 0; background: ${T.ink}; margin: 0; }
|
||||
.doc-label { display: inline-flex; align-items: center; gap: 8px; font-family: ${T.fontMono}; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: ${T.ink}; }
|
||||
.doc-label .bullet { width: 7px; height: 7px; background: ${T.red}; flex-shrink: 0; }
|
||||
.btn-solid { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-family: ${T.fontMono}; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: ${T.ink}; border: 2px solid ${T.ink}; padding: 14px 22px; transition: background .12s, color .12s; }
|
||||
.btn-solid:hover { background: ${T.red}; border-color: ${T.red}; }
|
||||
.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-family: ${T.fontMono}; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: ${T.ink}; background: transparent; border: 2px solid ${T.ink}; padding: 14px 22px; transition: background .12s, color .12s; }
|
||||
.btn-outline:hover { background: ${T.ink}; color: #fff; }
|
||||
.btn-solid-lg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-family: ${T.fontMono}; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: ${T.ink}; border: 2px solid ${T.ink}; padding: 16px; width: 100%; transition: background .12s; }
|
||||
.btn-solid-lg:hover { background: ${T.red}; border-color: ${T.red}; }
|
||||
.nav-link { color: ${T.ink}; text-decoration: none; font-size: 12px; font-family: ${T.fontMono}; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
|
||||
.nav-link:hover { color: ${T.red}; }
|
||||
.grid-1px { display: grid; background: ${T.divider}; gap: 1px; }
|
||||
.grid-cell { background: ${T.bg}; }
|
||||
.card-kicker { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: ${T.red}; font-family: ${T.fontMono}; font-weight: 700; }
|
||||
.card-title { font-family: ${T.fontHead}; font-weight: 900; font-size: 19px; line-height: 1.08; margin: 0; text-transform: uppercase; letter-spacing: -0.01em; }
|
||||
.card-body { margin: 0; font-size: 13px; opacity: 0.72; line-height: 1.55; font-family: ${T.fontMono}; }
|
||||
.field > label { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; color: ${T.inkSoft}; font-family: ${T.fontMono}; font-weight: 600; }
|
||||
.tag-outline { display: inline-flex; align-items: center; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border: 1px solid ${T.red}; color: ${T.red}; font-family: ${T.fontMono}; font-weight: 700; }
|
||||
.noise::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.025; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
|
||||
@media (max-width: 900px) { .rail-fixed { display: none !important; } .hero-badges { display: none !important; } .card-grid { grid-template-columns: 1fr !important; } }
|
||||
@media (max-width: 700px) { .hero-two-col { grid-template-columns: 1fr !important; } .contact-two-col { grid-template-columns: 1fr !important; } .stats-grid { grid-template-columns: repeat(2,1fr) !important; } }
|
||||
`}</style>
|
||||
|
||||
<div className="noise" />
|
||||
|
||||
{/* ── Left rail ── */}
|
||||
<div
|
||||
className="rail-fixed"
|
||||
style={{ position: 'fixed', left: '22px', top: 0, bottom: 0, width: '26px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '26px', zIndex: 20 }}
|
||||
style={{ position: 'fixed', left: '22px', top: 0, bottom: 0, width: '22px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '24px', zIndex: 20 }}
|
||||
>
|
||||
{RAIL_ITEMS.map(item => (
|
||||
<a key={item.id} href={item.href} className="rail-link" style={{ color: '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' }}
|
||||
<a key={item.id} href={item.href} className="rail-link" style={{ color: T.inkFaint }}
|
||||
onMouseEnter={e => { e.currentTarget.style.color = T.red }}
|
||||
onMouseLeave={e => { e.currentTarget.style.color = T.inkFaint }}
|
||||
>
|
||||
{item.label}
|
||||
{item.id}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
@@ -107,125 +106,116 @@ export default function HomePage() {
|
||||
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}`,
|
||||
padding: '18px clamp(20px,6vw,64px)',
|
||||
borderBottom: `2px solid ${T.ink}`,
|
||||
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' }} />
|
||||
<img src="/logo.png" alt="AyrisLegal" style={{ height: '22px', 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 style={{ display: 'flex', alignItems: 'center', gap: '28px', flexWrap: 'wrap' }}>
|
||||
<a href="#farklilasim" className="nav-link">Farklılaşım</a>
|
||||
<a href="#ozellikler" className="nav-link">Özellikler</a>
|
||||
<a href="#fiyatlandirma" className="nav-link">Fiyatlandırma</a>
|
||||
<a href="#iletisim" className="btn-solid">Demo Talep Et</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* ══════════════════════════════ HERO ════════════════════════════ */}
|
||||
<section style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(64px,11vw,132px) clamp(20px,6vw,72px) clamp(48px,7vw,80px)', position: 'relative', overflow: 'hidden' }}>
|
||||
<section style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px) clamp(48px,7vw,72px)', position: 'relative' }}>
|
||||
<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 className="doc-label" style={{ marginBottom: '28px' }}>
|
||||
<span className="bullet" />
|
||||
DOC-01 // DEĞER ÖNERMESİ
|
||||
</span>
|
||||
</Reveal>
|
||||
<div className="hero-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,7fr) minmax(0,5fr)', gap: '56px', alignItems: 'center' }}>
|
||||
<div className="hero-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,7fr) minmax(0,5fr)', gap: '48px', alignItems: 'start' }}>
|
||||
<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>
|
||||
<Reveal delay={0.04}>
|
||||
<h1 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(42px,7vw,88px)', lineHeight: 0.92, letterSpacing: '-0.03em', textTransform: 'uppercase', margin: 0 }}>
|
||||
<span style={{ display: 'block' }}>DOSYANIZI OKUR,</span>
|
||||
<span style={{ display: 'block' }}>SİZİNLE <span style={{ color: T.red }}>TARTIŞIR.</span></span>
|
||||
</h1>
|
||||
</Reveal>
|
||||
<Reveal delay={0.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 }}>
|
||||
<Reveal delay={0.08}>
|
||||
<p style={{ fontSize: 'clamp(15px,1.4vw,17px)', lineHeight: 1.7, maxWidth: '54ch', margin: '28px 0 0', color: T.inkSoft }}>
|
||||
AyrisLegal, yüklediğiniz dava dosyasını analiz eden, içtihat bulan ve dilekçe taslağı çıkaran bir yapay zeka çalışma ortağı — pasif bir arama motoru değil, dosya üzerinde sizinle muhakeme eden bir meslektaş.
|
||||
</p>
|
||||
</Reveal>
|
||||
<Reveal delay={0.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>
|
||||
<Reveal delay={0.12}>
|
||||
<div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', marginTop: '32px', alignItems: 'center' }}>
|
||||
<a href="#iletisim" className="btn-solid" style={{ fontSize: '13.5px', padding: '15px 26px' }}>Demo Talep Et</a>
|
||||
<a href="#farklilasim" className="btn-outline" style={{ fontSize: '13.5px', padding: '15px 26px' }}>Nasıl Çalışır ↓</a>
|
||||
</div>
|
||||
<p style={{ fontSize: '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 style={{ fontSize: '11.5px', letterSpacing: '0.05em', textTransform: 'uppercase', marginTop: '22px', color: T.inkFaint }}>
|
||||
>>> Şu an erken erişim aşamasındayız — kurucu ekiple doğrudan görüşün.
|
||||
</p>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
{/* Hero right: 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
|
||||
{/* Hero right: process log panel */}
|
||||
<Reveal delay={0.1}>
|
||||
<div style={{ border: `2px solid ${T.ink}`, background: '#fff' }}>
|
||||
<div style={{ borderBottom: `2px solid ${T.ink}`, padding: '10px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span style={{ fontSize: '10.5px', letterSpacing: '0.12em', fontWeight: 700 }}>PROCESS LOG</span>
|
||||
<span style={{ fontSize: '10.5px', color: T.red, fontWeight: 700 }}>● LIVE</span>
|
||||
</div>
|
||||
<div style={{ padding: '18px', display: 'flex', flexDirection: 'column', gap: '2px' }}>
|
||||
{[
|
||||
{ t: '00:01', s: 'DOSYA YÜKLENDİ', done: true },
|
||||
{ t: '00:04', s: 'AI ANALİZ EDİYOR…', done: true },
|
||||
{ t: '00:09', s: 'ARGÜMAN DEĞERLENDİRMESİ', done: true },
|
||||
{ t: '00:13', s: 'EMSAL: YARGITAY 2024/1234', done: true },
|
||||
{ t: '00:21', s: 'DİLEKÇE TASLAĞI OLUŞTURULDU', done: true, final: true },
|
||||
].map((row, i) => (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '9px 10px', background: row.final ? T.ink : 'transparent', color: row.final ? '#fff' : T.ink }}>
|
||||
<span style={{ fontSize: '10.5px', opacity: row.final ? 0.7 : 0.4, flexShrink: 0 }}>[{row.t}]</span>
|
||||
<span style={{ fontSize: '11.5px', letterSpacing: '0.03em', flex: 1 }}>{row.s}</span>
|
||||
<span style={{ fontSize: '10px', color: row.final ? '#fff' : T.red, fontWeight: 700, flexShrink: 0 }}>{row.final ? 'OK' : '✓'}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</Reveal>
|
||||
</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}` }}>
|
||||
<section className="grid-1px stats-grid" style={{ maxWidth: '1280px', margin: '0 auto', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: `2px solid ${T.ink}`, borderBottom: `2px solid ${T.ink}` }}>
|
||||
{[
|
||||
{ value: '01', label: '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>
|
||||
{ value: '01', label: 'SABİT FİYAT, TÜM AVUKATLARA' },
|
||||
{ value: '40.000 ₺', label: 'YILLIK, GİZLİ ÜCRET YOK' },
|
||||
{ value: '5', label: 'MAHKEME KAYNAĞI TEK EKRANDA' },
|
||||
{ value: '7/24', label: 'DOSYANIZLA ÇALIŞAN ORTAK' },
|
||||
].map((s) => (
|
||||
<div key={s.label} className="grid-cell" style={{ padding: '30px 20px', textAlign: 'center' }}>
|
||||
<div style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(28px,3.6vw,40px)', letterSpacing: '-0.02em' }}>{s.value}</div>
|
||||
<div style={{ fontSize: '10.5px', marginTop: '8px', letterSpacing: '0.08em', color: T.inkSoft }}>{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════ PROBLEM ═════════════════════════ */}
|
||||
<section id="is-akisi" style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
|
||||
<section id="is-akisi" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,8vw,88px) 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' }}>
|
||||
<span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-02 // BUGÜNÜN İŞ AKIŞI</span>
|
||||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(26px,3.2vw,40px)', margin: '18px 0 40px', letterSpacing: '-0.02em', textTransform: 'uppercase', maxWidth: '22ch' }}>
|
||||
Dosya, arama, şablon, tekrar.
|
||||
</h2>
|
||||
</Reveal>
|
||||
<div 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}>
|
||||
<div className="grid-1px" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', borderTop: `2px solid ${T.ink}` }}>
|
||||
<Reveal delay={0.03}>
|
||||
<div className="grid-cell" style={{ padding: '30px 28px' }}>
|
||||
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, textDecoration: 'line-through', textDecorationThickness: '2px' }}>01 / BUGÜN</span>
|
||||
<p style={{ fontSize: '14px', lineHeight: 1.75, margin: '14px 0 0', color: T.inkSoft }}>
|
||||
Dosya incelemesi bir programda, içtihat araması ayrı bir siteye açılan sekmede, dilekçe taslağı eski bir Word şablonunda. Her adımda bağlam yeniden kurulur, saatler kaybolur.
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.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}>
|
||||
<Reveal delay={0.06}>
|
||||
<div className="grid-cell" style={{ padding: '30px 28px' }}>
|
||||
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em' }}>02 / AYRISLEGAL İLE</span>
|
||||
<p style={{ fontSize: '14px', lineHeight: 1.75, margin: '14px 0 0', color: T.inkSoft }}>
|
||||
Tek bir çalışma alanı: dosyanızı yükleyin, AyrisLegal ile tartışın, içtihat bulun, dilekçe taslağı üretin — hepsi aynı ekranda, bağlamı hiç kaybetmeden.
|
||||
</p>
|
||||
</div>
|
||||
@@ -233,183 +223,281 @@ export default function HomePage() {
|
||||
</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)' }}>
|
||||
<section id="farklilasim" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)', borderTop: `2px solid ${T.ink}` }}>
|
||||
<Reveal>
|
||||
<span style={{ display: 'block', fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: T.accentDark, marginBottom: '14px' }}>
|
||||
Madde 03 — Tartışma odaklı yapay zeka
|
||||
</span>
|
||||
<span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-03 // TARTIŞMA ODAKLI YAPAY ZEKA</span>
|
||||
</Reveal>
|
||||
<div className="hero-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,5fr) minmax(0,7fr)', gap: '56px', alignItems: 'center' }}>
|
||||
<Reveal delay={0.05}>
|
||||
<div className="hero-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,5fr) minmax(0,7fr)', gap: '48px', alignItems: 'start', marginTop: '20px' }}>
|
||||
<Reveal delay={0.04}>
|
||||
<div>
|
||||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(28px,3.2vw,40px)', margin: '0 0 20px', letterSpacing: '-0.008em', maxWidth: '16ch' }}>
|
||||
Bulmakla yetinmez, sizinle tartışır.
|
||||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(24px,2.8vw,36px)', margin: '0 0 18px', letterSpacing: '-0.02em', textTransform: 'uppercase', maxWidth: '16ch' }}>
|
||||
Bulmakla yetinmez, tartışır.
|
||||
</h2>
|
||||
<p style={{ fontSize: '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}>
|
||||
<p style={{ fontSize: '14px', lineHeight: 1.75, margin: '0 0 16px', maxWidth: '46ch', color: T.inkSoft }}>
|
||||
Çoğu hukuk yazılımı özet çıkarır ya da anahtar kelimeyle arar. AyrisLegal dosyanızdaki argümanı okur, zayıf noktasını sorar, karşı görüş üretir, sizi ikna etmeye çalışır — ya da ikna olur.
|
||||
</p>
|
||||
<p style={{ fontSize: '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 style={{ fontSize: '11px', margin: 0, color: T.inkFaint, letterSpacing: '0.02em' }}>
|
||||
>>> Aşağıdaki panel, bu tartışmanın nasıl göründüğünü gösteren temsili bir tasarımdır.
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
{/* Chat simulation */}
|
||||
<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>
|
||||
{/* Chat simulation as terminal transcript */}
|
||||
<Reveal delay={0.08}>
|
||||
<div style={{ border: `2px solid ${T.ink}`, background: '#fff', padding: '20px', display: 'flex', flexDirection: 'column', gap: '2px', fontSize: '13px', lineHeight: 1.6 }}>
|
||||
<div style={{ padding: '12px 14px', borderBottom: `1px solid ${T.divider}` }}>
|
||||
<span style={{ color: T.inkFaint, fontSize: '10.5px', letterSpacing: '0.08em' }}>[AVUKAT]</span>
|
||||
<p style={{ margin: '6px 0 0' }}>Müvekkilin haklı olduğunu düşünüyorum, mülkiyet devri geçerli.</p>
|
||||
</div>
|
||||
{/* 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 style={{ padding: '12px 14px', borderBottom: `1px solid ${T.divider}`, background: 'rgba(230,25,25,0.04)' }}>
|
||||
<span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span style={{ color: T.red, fontSize: '10.5px', letterSpacing: '0.08em', fontWeight: 700 }}>[AYRISLEGAL // İTİRAZ]</span>
|
||||
</span>
|
||||
<p style={{ margin: '6px 0 0' }}>Devir tarihinde tapuda şerh var — bu, iyi niyet iddianızı zayıflatabilir. Şerhin kaldırılış tarihini kontrol ettiniz mi?</p>
|
||||
</div>
|
||||
{/* 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 style={{ padding: '12px 14px' }}>
|
||||
<span style={{ color: T.inkFaint, fontSize: '10.5px', letterSpacing: '0.08em' }}>[AVUKAT]</span>
|
||||
<p style={{ margin: '6px 0 0' }}>Haklısınız — 3 emsal kararla bu noktayı destekleyelim.</p>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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)' }}>
|
||||
<section id="ozellikler" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)', borderTop: `2px solid ${T.ink}` }}>
|
||||
<Reveal>
|
||||
<span 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' }}>
|
||||
<span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-04 // PLATFORM</span>
|
||||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(26px,3.2vw,40px)', margin: '18px 0 14px', letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
|
||||
Bir avukatın ihtiyaç duyduğu şeyler.
|
||||
</h2>
|
||||
<p style={{ fontSize: '14px', lineHeight: 1.7, maxWidth: '58ch', margin: '0 0 8px', color: T.inkSoft }}>
|
||||
Dosyayı yükleyin — gerisini AyrisLegal üstlenir: okur, çapraz sorgular, strateji kurar, içtihat bulur, dilekçeyi yazar.
|
||||
</p>
|
||||
</Reveal>
|
||||
<div className="card-grid">
|
||||
{/* Main feature — spans 2 cols */}
|
||||
|
||||
{/* — 04.1 Dosya Analizi — */}
|
||||
<Reveal>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', margin: '44px 0 16px' }}>
|
||||
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, flexShrink: 0 }}>04.1</span>
|
||||
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', flexShrink: 0 }}>Dosya Analizi</span>
|
||||
<span style={{ flex: 1, height: '1px', background: T.divider }} />
|
||||
</div>
|
||||
</Reveal>
|
||||
<div className="grid-1px card-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', border: `1px solid ${T.divider}` }}>
|
||||
<Reveal>
|
||||
<div className="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 className="grid-cell card" style={{ gridColumn: 'span 2', padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<span className="card-kicker">ÇELİŞKİ AVCISI 🚨</span>
|
||||
<h3 className="card-title" style={{ fontSize: '22px' }}>İfadeleri çapraz sorgular</h3>
|
||||
<p className="card-body">Özellikle ceza dosyalarında: müşteki, sanık ve tanıkların karakol, savcılık ve mahkeme aşamalarındaki beyanlarını karşılaştırır, çelişen ifadeleri kırmızı alarmla işaretler.</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.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>
|
||||
<Reveal delay={0.03}>
|
||||
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<span className="card-kicker">DOSYA ÖZETİ</span>
|
||||
<h3 className="card-title">Yüzlerce sayfayı tek raporda toplar</h3>
|
||||
<p className="card-body">Tüm iddia, savunma ve delilleri birleştirip olay örgüsü, yargılama süreci ve son durumu anlatan yapılandırılmış bir rapor çıkarır.</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.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>
|
||||
<Reveal delay={0.06}>
|
||||
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<span className="card-kicker">DOSYA RÖNTGENİ</span>
|
||||
<h3 className="card-title">Gözden kaçanı bulur</h3>
|
||||
<p className="card-body">Olası usul eksikliklerini, zamanaşımı risklerini ve toplanmamış delilleri tarar.</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.09}>
|
||||
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<span className="card-kicker">DAVA STRATEJİSİ</span>
|
||||
<h3 className="card-title">Yol haritası çıkarır</h3>
|
||||
<p className="card-body">Zayıf noktalar, karşı tarafın açıkları, usul hataları ve talep edilmesi gereken deliller için müvekkile özel strateji üretir.</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.12}>
|
||||
<div className="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 className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<span className="card-kicker">MÜZAKERE VE ARABULUCULUK</span>
|
||||
<h3 className="card-title">Pazarlık marjını hesaplar</h3>
|
||||
<p className="card-body">Kazanma/kaybetme olasılığını, yargılama masrafı, süre ve riskleri değerlendirip arabuluculuk için en mantıklı marjı sunar.</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
{/* — 04.2 Otomasyon ve Araçlar — */}
|
||||
<Reveal>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', margin: '44px 0 16px' }}>
|
||||
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, flexShrink: 0 }}>04.2</span>
|
||||
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', flexShrink: 0 }}>Otomasyon ve Araçlar</span>
|
||||
<span style={{ flex: 1, height: '1px', background: T.divider }} />
|
||||
</div>
|
||||
</Reveal>
|
||||
<div className="grid-1px card-grid" style={{ gridTemplateColumns: 'repeat(2, 1fr)', border: `1px solid ${T.divider}` }}>
|
||||
<Reveal>
|
||||
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<span className="card-kicker">TAKVİM & SÜRELER</span>
|
||||
<h3 className="card-title">Kesin süreleri kaçırmazsınız</h3>
|
||||
<p className="card-body">Duruşma tarihlerini ve kesin süreleri (cevap dilekçesi, istinaf vb.) dosyadan tespit edip takvime işler ve takibini yapar.</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.03}>
|
||||
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<span className="card-kicker">DİLEKÇE HAZIRLAMA</span>
|
||||
<h3 className="card-title">Tek tıkla hazır taslak</h3>
|
||||
<p className="card-body">Süre tutum, mazeret ve vekaletname sunma dilekçelerini saniyeler içinde hazırlar; hepsi "Dilekçeler" sekmesinde arşivlenir ve anında düzenlenebilir.</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
{/* — 04.3 İnteraktif Yapay Zeka — */}
|
||||
<Reveal>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', margin: '44px 0 16px' }}>
|
||||
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, flexShrink: 0 }}>04.3</span>
|
||||
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', flexShrink: 0 }}>İnteraktif Yapay Zeka</span>
|
||||
<span style={{ flex: 1, height: '1px', background: T.divider }} />
|
||||
</div>
|
||||
</Reveal>
|
||||
<div className="grid-1px card-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', border: `1px solid ${T.divider}` }}>
|
||||
<Reveal>
|
||||
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<span className="card-kicker">AYRISLEGAL'E SOR</span>
|
||||
<h3 className="card-title">Dosyaya özel sohbet</h3>
|
||||
<p className="card-body">"İddianamede bahsedilen bıçak kime aitmiş?" gibi dosyaya özel sorularınızı, tüm evrakların bağlamını bilen bir chat bot yanıtlar.</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.03}>
|
||||
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<span className="card-kicker">DİJİTAL STAJYER</span>
|
||||
<h3 className="card-title">Uzun soluklu görevler devreder</h3>
|
||||
<p className="card-body">Sanal bir hukuk stajyerine görev verir gibi, araştırma ve metin yazım görevlerini AyrisLegal'a atayabilirsiniz.</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.06}>
|
||||
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<span className="card-kicker">SİMÜLATÖR</span>
|
||||
<h3 className="card-title">Duruşma provası yapar</h3>
|
||||
<p className="card-body">Mahkemeye çıkmadan önce yapay zeka "Hakim", "Savcı" veya "Karşı Taraf Avukatı" rolüne girer; savunmanızı olası sorulara karşı önceden dener.</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
{/* — 04.4 İçtihat Araştırma — */}
|
||||
<Reveal>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', margin: '44px 0 16px' }}>
|
||||
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, flexShrink: 0 }}>04.4</span>
|
||||
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', flexShrink: 0 }}>İçtihat Araştırma</span>
|
||||
<span style={{ flex: 1, height: '1px', background: T.divider }} />
|
||||
</div>
|
||||
</Reveal>
|
||||
<div className="grid-1px card-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', border: `1px solid ${T.divider}` }}>
|
||||
<Reveal>
|
||||
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<span className="card-kicker">SEMANTİK EMSAL ARAMA</span>
|
||||
<h3 className="card-title">Anlamla arar, kelimeyle değil</h3>
|
||||
<p className="card-body">Anahtar kelime eşleşmesinin ötesinde, vektörel arama ile konuya en uygun Yargıtay, Danıştay ve BAM kararlarını getirir.</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.03}>
|
||||
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<span className="card-kicker">MAHKEME FİLTRELERİ</span>
|
||||
<h3 className="card-title">Kaynağa göre daraltır</h3>
|
||||
<p className="card-body">Aramaları Yargıtay, Bölge Adliye Mahkemesi, AYM gibi belirli kurumlara göre filtreler.</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.06}>
|
||||
<div className="grid-cell card" style={{ padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<span className="card-kicker">HIZLI KOPYALAMA</span>
|
||||
<h3 className="card-title">Dilekçeye anında aktarır</h3>
|
||||
<p className="card-body">Okuma ekranındaki kararlar veya bölümler tek tıkla kopyalanıp dilekçelere entegre edilir.</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
{/* — 04.5 UYAP Entegrasyonu — */}
|
||||
<Reveal>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', margin: '44px 0 16px' }}>
|
||||
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.red, flexShrink: 0 }}>04.5</span>
|
||||
<span style={{ fontFamily: T.fontMono, fontSize: '11px', fontWeight: 700, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', flexShrink: 0 }}>UYAP Entegrasyonu</span>
|
||||
<span style={{ flex: 1, height: '1px', background: T.divider }} />
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.03}>
|
||||
<div style={{ border: `1px solid ${T.divider}`, padding: '26px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<span className="card-kicker">CHROME EKLENTİSİ</span>
|
||||
<h3 className="card-title" style={{ fontSize: '20px' }}>Manuel indir-yükle derdi yok</h3>
|
||||
<p className="card-body" style={{ maxWidth: '70ch' }}>
|
||||
AyrisLegal, bir web eklentisi aracılığıyla doğrudan UYAP portalıyla haberleşir: taraf bilgilerini, mahkeme bilgilerini, esas numarasını ve safahatı otomatik çeker.
|
||||
Evraklar UYAP üzerinden okunup doğrudan AyrisLegal'a aktarılır; arka planda OCR ile içerikleri metne dönüştürülüp yapay zekanın analiz edebileceği hale getirilir.
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
</section>
|
||||
|
||||
<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)' }}>
|
||||
<section id="fiyatlandirma" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)', borderTop: `2px solid ${T.ink}` }}>
|
||||
<Reveal>
|
||||
<span 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' }}>
|
||||
<span className="doc-label" style={{ justifyContent: 'center', marginBottom: '20px', display: 'flex' }}><span className="bullet" />DOC-05 // FİYATLANDIRMA</span>
|
||||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(26px,3.2vw,40px)', margin: '18px 0 40px', textAlign: 'center', letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
|
||||
İhtiyacınıza uygun modeller.
|
||||
</h2>
|
||||
</Reveal>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '32px', maxWidth: '960px', margin: '0 auto' }}>
|
||||
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '24px', 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' }}>
|
||||
<Reveal delay={0.05}>
|
||||
<div style={{ display: 'flex', border: `2px solid ${T.ink}`, height: '100%' }}>
|
||||
<div style={{ width: '32px', background: T.ink, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', padding: '20px 0' }}>
|
||||
{['01','02','03','04','05'].map(t => (
|
||||
<span key={t} style={{ fontSize: '11px', color: T.accentDark, writingMode: 'vertical-rl', fontFamily: T.fontHead }}>{t}</span>
|
||||
<span key={t} style={{ fontSize: '10px', color: '#fff', writingMode: 'vertical-rl', fontFamily: T.fontMono, fontWeight: 700 }}>{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 }}>
|
||||
<div style={{ flex: 1, padding: '36px 32px', textAlign: 'center', display: 'flex', flexDirection: 'column' }}>
|
||||
<p style={{ margin: 0, fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(38px,4.6vw,50px)', lineHeight: 1, letterSpacing: '-0.02em' }}>40.000 ₺</p>
|
||||
<p style={{ margin: '8px 0 0', fontSize: '11px', letterSpacing: '0.1em', textTransform: 'uppercase', color: T.inkSoft }}>Bireysel Avukat / Yıl</p>
|
||||
<p style={{ fontSize: '13.5px', lineHeight: 1.65, margin: '18px auto 0', color: T.inkSoft }}>
|
||||
Serbest çalışan avukatlar için tasarlanmış yapay zeka çalışma ortağı.
|
||||
</p>
|
||||
<hr className="hr-line" style={{ margin: '24px 0' }} />
|
||||
<ul style={{ listStyle: 'none', margin: '0 0 auto 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '12px', textAlign: 'left' }}>
|
||||
<hr className="hr-line" style={{ margin: '22px 0' }} />
|
||||
<ul style={{ listStyle: 'none', margin: '0 0 auto 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '11px', textAlign: 'left' }}>
|
||||
{['Sınırsız dosya analizi', 'AI tartışma ortağı', 'İçtihat arama', 'Dilekçe taslağı üretimi'].map(item => (
|
||||
<li key={item} style={{ display: 'flex', gap: '10px', fontSize: '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>
|
||||
<li key={item} style={{ display: 'flex', gap: '10px', fontSize: '13px' }}>
|
||||
<span style={{ color: T.red, fontWeight: 700, flexShrink: 0 }}>></span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<a href="#iletisim" className="btn-primary-lg" style={{ marginTop: '26px' }}>Demo Talep Et</a>
|
||||
<a href="#iletisim" className="btn-solid-lg" style={{ marginTop: '24px' }}>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' }}>
|
||||
<Reveal delay={0.1}>
|
||||
<div style={{ display: 'flex', border: `2px solid ${T.ink}`, height: '100%', position: 'relative' }}>
|
||||
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, background: T.red, color: '#fff', fontSize: '10.5px', letterSpacing: '0.12em', textTransform: 'uppercase', textAlign: 'center', padding: '5px', fontFamily: T.fontMono, fontWeight: 700 }}>Ekip Çalışması</div>
|
||||
<div style={{ width: '32px', background: T.ink, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', padding: '38px 0 20px' }}>
|
||||
{['01','02','03','04','05'].map(t => (
|
||||
<span key={t} style={{ fontSize: '11px', color: T.accentDark, writingMode: 'vertical-rl', fontFamily: T.fontHead }}>{t}</span>
|
||||
<span key={t} style={{ fontSize: '10px', color: '#fff', writingMode: 'vertical-rl', fontFamily: T.fontMono, fontWeight: 700 }}>{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 }}>
|
||||
<div style={{ flex: 1, padding: '52px 32px 36px', textAlign: 'center', display: 'flex', flexDirection: 'column' }}>
|
||||
<p style={{ margin: '4px 0 0', fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(28px,3.6vw,38px)', lineHeight: 1.1, letterSpacing: '-0.02em', textTransform: 'uppercase' }}>Hukuk Bürosu</p>
|
||||
<p style={{ margin: '10px 0 0', fontSize: '11px', letterSpacing: '0.1em', textTransform: 'uppercase', color: T.inkSoft }}>Özel Fiyatlandırma</p>
|
||||
<p style={{ fontSize: '13.5px', lineHeight: 1.65, margin: '18px auto 0', color: T.inkSoft }}>
|
||||
Tüm ekibiniz için paylaşımlı çalışma alanı, dosya yönetimi ve özel entegrasyonlar.
|
||||
</p>
|
||||
<hr className="hr-line" style={{ margin: '24px 0' }} />
|
||||
<ul style={{ listStyle: 'none', margin: '0 0 auto 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '12px', textAlign: 'left' }}>
|
||||
<hr className="hr-line" style={{ margin: '22px 0' }} />
|
||||
<ul style={{ listStyle: 'none', margin: '0 0 auto 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '11px', textAlign: 'left' }}>
|
||||
{['Tüm bireysel özellikler', 'Ekip içi dosya paylaşımı', 'Ortak içtihat havuzu', 'Kurucu ekiple özel destek'].map(item => (
|
||||
<li key={item} style={{ display: 'flex', gap: '10px', fontSize: '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>
|
||||
<li key={item} style={{ display: 'flex', gap: '10px', fontSize: '13px' }}>
|
||||
<span style={{ color: T.red, fontWeight: 700, flexShrink: 0 }}>></span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<a href="#iletisim" className="btn-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)}
|
||||
<a href="#iletisim" className="btn-solid-lg" style={{ marginTop: '24px', background: T.red, borderColor: T.red }}
|
||||
onMouseEnter={e => (e.currentTarget.style.background = T.ink)}
|
||||
onMouseLeave={e => (e.currentTarget.style.background = T.red)}
|
||||
>İletişime Geçin</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -418,90 +506,104 @@ export default function HomePage() {
|
||||
</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)' }}>
|
||||
<section id="guven" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)', borderTop: `2px solid ${T.ink}` }}>
|
||||
<Reveal>
|
||||
<span 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' }}>
|
||||
<span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-06 // GÜVEN VE VERİ GÜVENLİĞİ</span>
|
||||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(26px,3.2vw,40px)', margin: '18px 0 14px', letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
|
||||
Dosyalarınız sizin kalır.
|
||||
</h2>
|
||||
<p style={{ fontSize: '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 style={{ fontSize: '13.5px', lineHeight: 1.7, maxWidth: '60ch', margin: '0 0 36px', color: T.inkSoft }}>
|
||||
Bir dava dosyası, bir avukatın elindeki en hassas belgedir. AyrisLegal'ı bu bilinçle kuruyoruz.
|
||||
</p>
|
||||
</Reveal>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 0, borderTop: `1px solid ${T.divider}` }}>
|
||||
<div className="grid-1px" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', borderTop: `2px solid ${T.ink}`, borderBottom: `2px solid ${T.ink}` }}>
|
||||
{[
|
||||
{
|
||||
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>
|
||||
{ title: 'YEREL ŞİFRELİ SAKLAMA', desc: 'Lisans ve hassas veriler, işletim sisteminizin kendi güvenli depolama katmanıyla (Keychain / DPAPI) şifrelenir.' },
|
||||
{ title: 'KENDİ GOOGLE DRIVE’INIZA YEDEKLEME', desc: 'Otomatik yedekleme bizim sunucularımıza değil, sizin kendi Drive hesabınıza yapılır — sadece siz erişebilirsiniz.' },
|
||||
{ title: 'SADECE SİZİN ANALİZİNİZ İÇİN', desc: 'Yüklediğiniz belgeler başka kullanıcılarla veya üçüncü taraflarla paylaşılmaz.' },
|
||||
{ title: 'SON KARAR HER ZAMAN SİZDE', desc: 'AyrisLegal bir karar organı değildir — analiz, taslak ve öneri üretir. Mesleki sorumluluk gereği tüm çıktılar imzadan önce sizin incelemenizden geçer.' },
|
||||
].map((item, i) => (
|
||||
<Reveal key={item.title} delay={i * 0.05}>
|
||||
<div className="grid-cell" style={{ padding: '26px 24px' }}>
|
||||
<span style={{ fontSize: '20px', color: T.red, fontWeight: 700, fontFamily: T.fontMono }}>0{i + 1}</span>
|
||||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: '16px', margin: '10px 0 8px', textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{item.title}</h3>
|
||||
<p style={{ fontSize: '13px', lineHeight: 1.6, margin: 0, color: T.inkSoft }}>{item.desc}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr className="hr-line" style={{ maxWidth: '1240px', margin: '0 auto' }} />
|
||||
{/* ══════════════════════════════ FAQ ══════════════════════════════ */}
|
||||
<section id="sss" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) clamp(20px,6vw,72px)', borderTop: `2px solid ${T.ink}` }}>
|
||||
<Reveal>
|
||||
<span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-06.5 // SIK SORULAN SORULAR</span>
|
||||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(26px,3.2vw,40px)', margin: '18px 0 36px', letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
|
||||
Muhtemelen bunları soracaksınız.
|
||||
</h2>
|
||||
</Reveal>
|
||||
<div className="grid-1px" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', border: `1px solid ${T.divider}` }}>
|
||||
{[
|
||||
{ q: 'Müvekkil dosyalarım nerede saklanıyor, kim görebilir?', a: 'Belgeler yerel şifreli depolamada tutulur, yedekleme bizim değil sizin kendi Google Drive hesabınıza yapılır. Başka kullanıcı veya üçüncü tarafla paylaşılmaz.' },
|
||||
{ q: 'Yapay zeka yanlış bir şey söylerse sorumluluk kimde?', a: 'AyrisLegal karar organı değildir — analiz, taslak ve öneri üretir. Ürettiği emsal kararlar gerçek esas/karar numaralarıyla gelir, kaynağından doğrulanabilir. Nihai değerlendirme ve imza her zaman sizde kalır.' },
|
||||
{ q: 'UYAP şifremi AyrisLegal ile paylaşmam gerekiyor mu?', a: 'Hayır. UYAP eklentisi, tarayıcınızda zaten açık olan oturumu kullanır — kimlik bilgileriniz hiçbir zaman AyrisLegal sunucularına iletilmez ya da saklanmaz.' },
|
||||
{ q: 'Büromdaki diğer avukatlarla paylaşabilir miyim?', a: 'Şu an platform bireysel avukat için tasarlandı. Ekip/büro paylaşımı yol haritamızda — Hukuk Bürosu planı için iletişime geçin, ihtiyacınıza göre konuşalım.' },
|
||||
].map((item) => (
|
||||
<Reveal key={item.q}>
|
||||
<div className="grid-cell" style={{ padding: '26px' }}>
|
||||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: '15px', margin: '0 0 10px', letterSpacing: '-0.01em', lineHeight: 1.3 }}>{item.q}</h3>
|
||||
<p style={{ fontSize: '13px', lineHeight: 1.65, margin: 0, color: T.inkSoft }}>{item.a}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════ CONTACT ═════════════════════════ */}
|
||||
<section id="iletisim" style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(56px,9vw,108px) clamp(20px,6vw,72px)' }}>
|
||||
<section id="iletisim" style={{ maxWidth: '1280px', margin: '0 auto', padding: 'clamp(48px,9vw,96px) 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>
|
||||
<span className="doc-label" style={{ marginBottom: '20px' }}><span className="bullet" />DOC-07 // ERKEN ERİŞİM</span>
|
||||
</Reveal>
|
||||
<div className="contact-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,5fr) minmax(0,7fr)', gap: '48px' }}>
|
||||
<Reveal delay={0.05}>
|
||||
<div className="contact-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,5fr) minmax(0,7fr)', gap: '40px', marginTop: '20px' }}>
|
||||
<Reveal delay={0.04}>
|
||||
<div>
|
||||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(28px,3.2vw,38px)', margin: '0 0 16px', letterSpacing: '-0.008em' }}>
|
||||
<h2 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: 'clamp(22px,2.8vw,32px)', margin: '0 0 14px', letterSpacing: '-0.02em', textTransform: 'uppercase' }}>
|
||||
Şu an müşteri referansı göstermiyoruz — kasıtlı olarak.
|
||||
</h2>
|
||||
<p style={{ fontSize: '15.5px', lineHeight: 1.7, margin: 0, textAlign: 'justify', hyphens: 'auto', color: 'rgba(32,31,29,0.78)', fontFamily: T.fontBody } as React.CSSProperties}>
|
||||
<p style={{ fontSize: '13.5px', lineHeight: 1.7, margin: 0, color: T.inkSoft }}>
|
||||
AyrisLegal yeni. Sahte ya da ödünç yorumlar yerine dürüst olmayı seçtik: platformu kurucu ekiple birlikte, doğrudan geri bildiriminizle şekillendiriyoruz. Demo talep edin, ilk kullanan avukatlardan biri olun.
|
||||
</p>
|
||||
<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>
|
||||
<ul style={{ listStyle: 'none', margin: '26px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
{['Formu doldurun', 'Kurucu ekipten biri sizi arar', '15 dakikalık canlı demoda dosyanızla test edersiniz'].map((step, i) => (
|
||||
<li key={step} style={{ display: 'flex', gap: '10px', fontSize: '13px', color: T.inkSoft }}>
|
||||
<span style={{ color: T.red, fontWeight: 700, fontFamily: T.fontMono, flexShrink: 0 }}>0{i + 1}</span>
|
||||
{step}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div style={{ marginTop: '28px', display: 'flex', alignItems: 'center', gap: '14px' }}>
|
||||
<div style={{ width: '54px', height: '54px', border: `2px solid ${T.red}`, borderRadius: '50% !important', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontFamily: T.fontMono, fontSize: '8px', color: T.red, textAlign: 'center', lineHeight: 1.3, flexShrink: 0, textTransform: 'uppercase', transform: 'rotate(-8deg)', fontWeight: 700 }}>
|
||||
<span style={{ letterSpacing: '0.14em' }}>VERIFIED</span>
|
||||
<span style={{ letterSpacing: '0.14em' }}>FOUNDER</span>
|
||||
</div>
|
||||
<span style={{ fontSize: '12.5px', color: 'rgba(32,31,29,0.6)', fontFamily: T.fontBody }}>Kurucu ekip mührü</span>
|
||||
<span style={{ fontSize: '11px', letterSpacing: '0.04em', color: T.inkFaint }}>KURUCU EKİP MÜHRÜ</span>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={0.1}>
|
||||
<Reveal delay={0.08}>
|
||||
<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>
|
||||
<footer style={{ maxWidth: '1280px', margin: '0 auto', padding: '24px clamp(20px,6vw,72px) 36px', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px', fontSize: '11px', letterSpacing: '0.04em', color: T.inkFaint, borderTop: `2px solid ${T.ink}` }}>
|
||||
<span>AYRISLEGAL™ — AYRIS TECH'İN BİR ÜRÜNÜDÜR.</span>
|
||||
<span>
|
||||
© {new Date().getFullYear()} AyrisLegal ·{' '}
|
||||
<a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" style={{ color: 'rgba(32,31,29,0.6)' }}>
|
||||
Created by ayris.tech
|
||||
© {new Date().getFullYear()} AYRISLEGAL ·{' '}
|
||||
<a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" style={{ color: T.inkFaint }}>
|
||||
CREATED BY AYRIS.TECH
|
||||
</a>
|
||||
</span>
|
||||
</footer>
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
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ı</h1>
|
||||
<p className="mb-6 text-gray-500">Son Güncellenme Tarihi: 11 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.com tanıtım web sitesini ve AyrisLegal masaüstü uygulamasını ("Uygulama") kullandığınızda kişisel bilgilerinizi nasıl işlediğimizi açıklar.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-semibold mb-4">2. Web Sitesi — Demo Talebi Formu</h2>
|
||||
<p className="mb-4">
|
||||
İletişim/demo talebi formunu doldurduğunuzda ad soyad, e-posta, (varsa) büro/kurum adı ve telefon bilgilerinizi topluyoruz. Bu bilgiler yalnızca talebinizi değerlendirmek ve sizinle iletişime geçmek amacıyla kullanılır; üçüncü taraflara satılmaz veya pazarlama amacıyla aktarılmaz.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-semibold mb-4">3. Uygulama — Hesap Bilgileri</h2>
|
||||
<p className="mb-4">
|
||||
AyrisLegal'a kayıt olurken ad soyad, e-posta ve (varsa) baro sicil bilginizi işleriz. Bu bilgiler kimlik doğrulama ve hesabınızı yönetmek amacıyla kullanılır.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-semibold mb-4">4. Uygulama — Dava Dosyası ve Belge İçeriği</h2>
|
||||
<p className="mb-4">
|
||||
AyrisLegal'ın temel işlevi, yüklediğiniz dava dosyalarını ve belgeleri yapay zeka ile analiz etmek, içtihat aramak ve dilekçe taslağı üretmektir. Bu analiz, yapay zeka servis sağlayıcıları aracılığıyla gerçekleştirilir; yani yüklediğiniz belge içeriği, analiz işlemi sırasında bu servislere iletilir.
|
||||
</p>
|
||||
<p className="mb-4">
|
||||
Belgeleriniz yalnızca sizin analizinizi üretmek için kullanılır, başka kullanıcılarla veya üçüncü taraflarla paylaşılmaz. Kullandığımız yapay zeka altyapısı zaman içinde değişebilir; hassas veya gizlilik dereceli belgeleri yüklerken bu konuda dikkatli olmanızı öneririz.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-semibold mb-4">5. Lisans ve Cihaz Bilgileri</h2>
|
||||
<p className="mb-4">
|
||||
Uygulamanın aktivasyonu için bir lisans anahtarı ve cihazınıza özgü, rastgele üretilmiş bir cihaz kimliği kullanılır. Bu bilgiler bilgisayarınızda, işletim sisteminizin kendi güvenli depolama katmanı (macOS Keychain / Windows DPAPI) ile şifrelenerek saklanır.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-semibold mb-4">6. Yedekleme</h2>
|
||||
<p className="mb-4">
|
||||
Uygulama içinde isteğe bağlı olarak açabileceğiniz otomatik yedekleme özelliği, dosyalarınızı bizim sunucularımıza değil, doğrudan sizin kendi Google Drive hesabınıza yükler. Bu özellik varsayılan olarak kapalıdır ve yalnızca siz açtığınızda, sizin izninizle çalışır.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-semibold mb-4">7. Hata Bildirimleri</h2>
|
||||
<p className="mb-4">
|
||||
Uygulama bir teknik hatayla karşılaştığında, sorunu çözebilmemiz için anonim bir hata raporu gönderebilir. Bu raporlar; dava dosyası, müvekkil bilgisi, belge içeriği veya başka bir kişisel veri İÇERMEZ — yalnızca hatanın teknik ayrıntılarını (hangi modülde, hangi tür hata) kapsar. Bu bildirimi Ayarlar > Gizlilik menüsünden tamamen kapatabilirsiniz.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-semibold mb-4">8. Veri Güvenliği</h2>
|
||||
<p className="mb-4">
|
||||
Hassas veriler (lisans bilgisi, kimlik doğrulama bilgileri) cihazınızda şifreli olarak saklanır. Uygulama, geçerli bir lisansı olmayan kişiler tarafından aktive edilemez. Sunucu tarafı altyapımız erişim kontrolleriyle korunmaktadır.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-semibold mb-4">9. Haklarınız</h2>
|
||||
<p className="mb-4">
|
||||
6698 sayılı Kişisel Verilerin Korunması Kanunu ("KVKK") kapsamında; verilerinizin işlenip işlenmediğini öğrenme, işlenmişse buna ilişkin bilgi talep etme, düzeltme veya silinmesini isteme haklarına sahipsiniz. Bu haklarınızı kullanmak için aşağıdaki iletişim adresinden bize ulaşabilirsiniz.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-semibold mb-4">10. 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">11. İ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>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 15 KiB |
+37
-41
@@ -5,16 +5,13 @@ 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',
|
||||
bg: '#F4F4F0',
|
||||
ink: '#0A0A0A',
|
||||
inkSoft: 'rgba(10,10,10,0.6)',
|
||||
divider: 'rgba(10,10,10,0.16)',
|
||||
red: '#E61919',
|
||||
fontHead: '"Archivo", sans-serif',
|
||||
fontMono: '"JetBrains Mono", monospace',
|
||||
}
|
||||
|
||||
export default function ContactForm() {
|
||||
@@ -43,9 +40,10 @@ export default function ContactForm() {
|
||||
/* 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 }}>
|
||||
<div style={{ border: `2px solid ${T.ink}`, padding: '36px', textAlign: 'center', background: '#fff' }}>
|
||||
<span style={{ display: 'inline-block', fontSize: '10.5px', letterSpacing: '0.12em', color: T.red, fontFamily: T.fontMono, fontWeight: 700, marginBottom: '10px' }}>STATUS: RECEIVED</span>
|
||||
<h3 style={{ fontFamily: T.fontHead, fontWeight: 900, fontSize: '20px', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '-0.01em' }}>Talebiniz alındı.</h3>
|
||||
<p style={{ fontSize: '13px', margin: 0, color: T.inkSoft, fontFamily: T.fontMono }}>
|
||||
Kurucu ekipten kısa süre içinde size dönüş yapılacak.
|
||||
</p>
|
||||
</div>
|
||||
@@ -53,17 +51,17 @@ export default function ContactForm() {
|
||||
}
|
||||
|
||||
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',
|
||||
width: '100%', minHeight: '40px', padding: '8px 12px',
|
||||
fontFamily: T.fontMono, fontSize: '13.5px', color: T.ink,
|
||||
background: '#fff',
|
||||
border: `2px solid ${T.divider}`,
|
||||
transition: 'border-color .12s',
|
||||
boxSizing: 'border-box',
|
||||
}
|
||||
|
||||
const labelStyle: React.CSSProperties = {
|
||||
display: 'block', fontSize: '12px', marginBottom: '5px',
|
||||
color: 'rgba(32,31,29,0.7)', fontFamily: T.fontBody,
|
||||
display: 'block', fontSize: '10.5px', letterSpacing: '0.1em', textTransform: 'uppercase',
|
||||
marginBottom: '6px', color: T.inkSoft, fontFamily: T.fontMono, fontWeight: 600,
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -73,10 +71,9 @@ export default function ContactForm() {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))',
|
||||
gap: '16px',
|
||||
border: `1px solid ${T.divider}`,
|
||||
borderRadius: T.radiusLg,
|
||||
border: `2px solid ${T.ink}`,
|
||||
padding: '28px',
|
||||
background: T.bg,
|
||||
background: '#fff',
|
||||
}}
|
||||
noValidate
|
||||
>
|
||||
@@ -86,13 +83,13 @@ export default function ContactForm() {
|
||||
</div>
|
||||
|
||||
<div style={{ gridColumn: 'span 1' }}>
|
||||
<label style={labelStyle} htmlFor="af_name">Ad Soyad <span style={{ color: T.accent }}>*</span></label>
|
||||
<label style={labelStyle} htmlFor="af_name">Ad Soyad <span style={{ color: T.red }}>*</span></label>
|
||||
<input
|
||||
id="af_name" type="text" required
|
||||
placeholder="Av. Ayşe Yılmaz"
|
||||
value={form.name} onChange={set('name')}
|
||||
style={inputStyle}
|
||||
onFocus={e => (e.target.style.borderColor = T.accent)}
|
||||
onFocus={e => (e.target.style.borderColor = T.red)}
|
||||
onBlur={e => (e.target.style.borderColor = T.divider)}
|
||||
/>
|
||||
</div>
|
||||
@@ -104,19 +101,19 @@ export default function ContactForm() {
|
||||
placeholder="Yılmaz Hukuk Bürosu"
|
||||
value={form.org} onChange={set('org')}
|
||||
style={inputStyle}
|
||||
onFocus={e => (e.target.style.borderColor = T.accent)}
|
||||
onFocus={e => (e.target.style.borderColor = T.red)}
|
||||
onBlur={e => (e.target.style.borderColor = T.divider)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={labelStyle} htmlFor="af_email">E-posta <span style={{ color: T.accent }}>*</span></label>
|
||||
<label style={labelStyle} htmlFor="af_email">E-posta <span style={{ color: T.red }}>*</span></label>
|
||||
<input
|
||||
id="af_email" type="email" required
|
||||
placeholder="ayse@buro.com"
|
||||
value={form.email} onChange={set('email')}
|
||||
style={inputStyle}
|
||||
onFocus={e => (e.target.style.borderColor = T.accent)}
|
||||
onFocus={e => (e.target.style.borderColor = T.red)}
|
||||
onBlur={e => (e.target.style.borderColor = T.divider)}
|
||||
/>
|
||||
</div>
|
||||
@@ -128,15 +125,15 @@ export default function ContactForm() {
|
||||
placeholder="0532 000 00 00"
|
||||
value={form.phone} onChange={set('phone')}
|
||||
style={inputStyle}
|
||||
onFocus={e => (e.target.style.borderColor = T.accent)}
|
||||
onFocus={e => (e.target.style.borderColor = T.red)}
|
||||
onBlur={e => (e.target.style.borderColor = T.divider)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{state === 'error' && (
|
||||
<div style={{ gridColumn: '1 / -1', fontSize: '13px', color: '#c0392b', fontFamily: T.fontBody }}>
|
||||
<div style={{ gridColumn: '1 / -1', fontSize: '12.5px', color: T.red, fontFamily: T.fontMono }}>
|
||||
Bir hata oluştu. Lütfen tekrar deneyin veya{' '}
|
||||
<a href="mailto:info@ayris.tech" style={{ color: T.accent }}>info@ayris.tech</a> adresine yazın.
|
||||
<a href="mailto:info@ayris.tech" style={{ color: T.red }}>info@ayris.tech</a> adresine yazın.
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -149,20 +146,19 @@ export default function ContactForm() {
|
||||
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',
|
||||
fontFamily: T.fontMono, fontWeight: 700, fontSize: '13px', letterSpacing: '0.06em', textTransform: 'uppercase',
|
||||
color: '#fff',
|
||||
background: T.ink,
|
||||
border: `2px solid ${T.ink}`,
|
||||
padding: '14px',
|
||||
transition: 'background .12s',
|
||||
opacity: state === 'loading' ? 0.6 : 1,
|
||||
marginTop: '4px',
|
||||
}}
|
||||
onMouseEnter={e => { if (state !== 'loading') (e.currentTarget as HTMLElement).style.background = 'rgba(182,130,53,0.10)' }}
|
||||
onMouseLeave={e => { if (state !== 'loading') (e.currentTarget as HTMLElement).style.background = 'transparent' }}
|
||||
onMouseEnter={e => { if (state !== 'loading') { (e.currentTarget as HTMLElement).style.background = T.red; (e.currentTarget as HTMLElement).style.borderColor = T.red } }}
|
||||
onMouseLeave={e => { if (state !== 'loading') { (e.currentTarget as HTMLElement).style.background = T.ink; (e.currentTarget as HTMLElement).style.borderColor = T.ink } }}
|
||||
>
|
||||
{state === 'loading' ? 'Gönderiliyor…' : 'Demo Talep Et'}
|
||||
{state === 'loading' ? 'GÖNDERİLİYOR…' : 'DEMO TALEP ET'}
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user