first commit
This commit is contained in:
mstfyldz
@@ -0,0 +1,332 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="_ds/classical-911697ea-3fa0-408c-bdf6-3bbc9cae7b96/styles.css">
|
||||
<script src="_ds/classical-911697ea-3fa0-408c-bdf6-3bbc9cae7b96/_ds_bundle.js"></script>
|
||||
<script src="./image-slot.js"></script>
|
||||
<style>
|
||||
body{margin:0;text-wrap:pretty}
|
||||
a{color:var(--color-accent);text-underline-offset:3px}
|
||||
a:hover{color:var(--color-accent-700)}
|
||||
@media (max-width: 980px){ .rail{display:none} .hero-badges{display:none} }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);min-height:100vh;position:relative">
|
||||
|
||||
<div class="rail" style="position:fixed;left:22px;top:0;bottom:0;width:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;z-index:20;font-feature-settings:'tnum' 1">
|
||||
<sc-for list="{{ railItems }}" as="it" hint-placeholder-count="6">
|
||||
<a href="{{ it.href }}" style="text-decoration:none;writing-mode:vertical-rl;font-size:11px;letter-spacing:0.08em;color:{{ it.color }};font-weight:{{ it.weight }};transition:color .2s">{{ it.label }}</a>
|
||||
</sc-for>
|
||||
</div>
|
||||
|
||||
<nav style="position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:{{ navPad }};border-bottom:1px solid var(--color-divider);background:{{ navBg }};backdrop-filter:blur(10px);transition:padding .25s,background .25s">
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<image-slot id="logo-mark" shape="rect" style="width:34px;height:34px" placeholder="Logo" radius="4"></image-slot>
|
||||
<span style="font-family:var(--font-heading);font-weight:600;font-size:19px;letter-spacing:-0.01em">AyrisLegal</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:24px;flex-wrap:wrap">
|
||||
<a href="#farklilasim" style="color:inherit;text-decoration:none;font-size:14px">Farklılaşım</a>
|
||||
<a href="#ozellikler" style="color:inherit;text-decoration:none;font-size:14px">Özellikler</a>
|
||||
<a href="#fiyatlandirma" style="color:inherit;text-decoration:none;font-size:14px">Fiyatlandırma</a>
|
||||
<a href="#iletisim" class="btn btn-primary">Demo Talep Et</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section style="max-width:1240px;margin:0 auto;padding:clamp(64px,11vw,132px) clamp(20px,6vw,72px) clamp(48px,7vw,80px);position:relative;overflow:hidden">
|
||||
<span style="display:inline-block;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-accent-700);border-bottom:1px solid var(--color-accent);padding-bottom:4px;font-feature-settings:'tnum' 1;margin-bottom:26px">Madde 01 — Değer Önermesi</span>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center">
|
||||
<div>
|
||||
<h1 style="font-family:var(--font-heading);font-weight:400;font-size:clamp(46px,7.4vw,96px);line-height:0.98;letter-spacing:-0.015em;margin:0;margin-left:-0.03em">
|
||||
<span style="display:block">Dosyanızı okur,</span>
|
||||
<span style="display:block">sizinle <em style="font-style:italic;color:var(--color-accent-700)">tartışır.</em></span>
|
||||
</h1>
|
||||
<p style="font-size:clamp(17px,1.7vw,20px);line-height:1.65;max-width:52ch;margin:30px 0 0;color:color-mix(in srgb, var(--color-text) 82%, transparent)">
|
||||
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>
|
||||
<div style="display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;align-items:center">
|
||||
<a href="#iletisim" class="btn btn-primary" style="font-size:15px;padding:13px 24px">Demo Talep Et</a>
|
||||
<a href="#farklilasim" class="btn btn-ghost" style="font-size:15px">Nasıl çalışır ↓</a>
|
||||
</div>
|
||||
<p style="font-size:13px;margin-top:24px;color:color-mix(in srgb, var(--color-text) 60%, transparent)">Şu an erken erişim aşamasındayız — kurucu ekiple doğrudan görüşün.</p>
|
||||
</div>
|
||||
<div style="position:relative">
|
||||
<div class="hero-badges" style="position:absolute;top:-18px;right:6px;z-index:2;background:var(--color-bg);border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:8px 14px;font-size:12.5px;box-shadow:var(--shadow-sm);transform:rotate(-2deg)">İçtihat bulundu · 3 emsal</div>
|
||||
<div class="hero-badges" style="position:absolute;bottom:-16px;left:-14px;z-index:2;background:var(--color-bg);border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:8px 14px;font-size:12.5px;box-shadow:var(--shadow-sm);transform:rotate(2deg)">Dilekçe taslağı hazır</div>
|
||||
<figure class="plate" style="margin:0">
|
||||
<image-slot id="hero-plate" shape="rect" radius="2" style="width:100%;aspect-ratio:4/5" placeholder="Temsili çalışma ekranı görseli"></image-slot>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="max-width:1240px;margin:0 auto;padding:0 clamp(20px,6vw,72px) clamp(56px,8vw,88px);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider)">
|
||||
<sc-for list="{{ stats }}" as="s" hint-placeholder-count="4">
|
||||
<div style="padding:28px 20px;border-right:1px solid var(--color-divider);text-align:center">
|
||||
<div style="font-family:var(--font-heading);font-weight:400;font-size:clamp(30px,4vw,44px);font-feature-settings:'tnum' 1;color:var(--color-accent-700)">{{ s.value }}</div>
|
||||
<div style="font-size:13px;margin-top:6px;color:color-mix(in srgb, var(--color-text) 65%, transparent);letter-spacing:0.02em">{{ s.label }}</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</section>
|
||||
|
||||
<section data-reveal="problem" style="max-width:1240px;margin:0 auto;padding:clamp(48px,8vw,96px) clamp(20px,6vw,72px);opacity:{{ reveal.problem.opacity }};transform:{{ reveal.problem.transform }};transition:opacity .7s ease,transform .7s ease">
|
||||
<span style="display:block;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent-700);font-feature-settings:'tnum' 1;margin-bottom:14px">Madde 02 — Bugünün iş akışı</span>
|
||||
<h2 style="font-family:var(--font-heading);font-weight:400;font-size:clamp(30px,3.6vw,44px);margin:0 0 44px;letter-spacing:-0.008em;max-width:24ch">Dosya, arama, şablon, tekrar.</h2>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;border-top:1px solid var(--color-divider)">
|
||||
<div style="padding:32px 28px 32px 0;border-right:1px solid var(--color-divider)">
|
||||
<span style="font-family:var(--font-heading);font-size:15px;color:color-mix(in srgb, var(--color-text) 45%, transparent);font-feature-settings:'tnum' 1">01 / Bugün</span>
|
||||
<p style="font-size:15.5px;line-height:1.7;margin:14px 0 0;text-align:justify;hyphens:auto;color:color-mix(in srgb, var(--color-text) 78%, transparent)">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>
|
||||
<div style="padding:32px 0 32px 28px">
|
||||
<span style="font-family:var(--font-heading);font-size:15px;color:var(--color-accent-700);font-feature-settings:'tnum' 1">02 / AyrisLegal ile</span>
|
||||
<p style="font-size:15.5px;line-height:1.7;margin:14px 0 0;text-align:justify;hyphens:auto;color:color-mix(in srgb, var(--color-text) 78%, transparent)">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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="hr" style="margin:0;max-width:1240px;margin-inline:auto">
|
||||
|
||||
<section id="farklilasim" data-reveal="farklilasim" style="max-width:1240px;margin:0 auto;padding:clamp(56px,9vw,108px) clamp(20px,6vw,72px);opacity:{{ reveal.farklilasim.opacity }};transform:{{ reveal.farklilasim.transform }};transition:opacity .7s ease,transform .7s ease">
|
||||
<span style="display:block;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent-700);font-feature-settings:'tnum' 1;margin-bottom:14px">Madde 03 — Tartışma odaklı yapay zeka</span>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center">
|
||||
<div>
|
||||
<h2 style="font-family:var(--font-heading);font-weight:400;font-size:clamp(28px,3.2vw,40px);margin:0 0 20px;letter-spacing:-0.008em;max-width:16ch">Bulmakla yetinmez, sizinle tartışır.</h2>
|
||||
<p style="font-size:15.5px;line-height:1.7;margin:0 0 16px;max-width:46ch;text-align:justify;hyphens:auto;color:color-mix(in srgb, var(--color-text) 78%, transparent)">Ç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="font-size:13px;margin:0;color:color-mix(in srgb, var(--color-text) 58%, transparent)">Aşağıdaki görsel, bu tartışmanın nasıl göründüğünü gösteren temsili bir tasarımdır.</p>
|
||||
</div>
|
||||
<div class="plate" style="margin:0;padding:28px;display:flex;flex-direction:column;gap:14px">
|
||||
<div style="align-self:flex-end;max-width:78%;background:var(--color-bg);border:1px solid var(--color-divider);border-radius:var(--radius-md) var(--radius-md) 4px var(--radius-md);padding:14px 16px">
|
||||
<div style="font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:color-mix(in srgb, var(--color-text) 55%, transparent);margin-bottom:6px">Avukat</div>
|
||||
<p style="margin:0;font-size:14.5px;line-height:1.6">Müvekkilin haklı olduğunu düşünüyorum, mülkiyet devri geçerli.</p>
|
||||
</div>
|
||||
<div style="align-self:flex-start;max-width:82%;background:var(--color-surface);border:1px solid var(--color-accent);border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 4px;padding:14px 16px">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
|
||||
<span style="font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--color-accent-700)">AyrisLegal</span>
|
||||
<span class="tag tag-outline" style="font-size:10.5px">İtiraz</span>
|
||||
</div>
|
||||
<p style="margin:0;font-size:14.5px;line-height:1.6">Devir tarihinde tapuda şerh var — bu, iyi niyet iddianızı zayıflatabilir. Şerhin kaldırılış tarihini kontrol ettiniz mi?</p>
|
||||
</div>
|
||||
<div style="align-self:flex-end;max-width:78%;background:var(--color-bg);border:1px solid var(--color-divider);border-radius:var(--radius-md) var(--radius-md) 4px var(--radius-md);padding:14px 16px">
|
||||
<p style="margin:0;font-size:14.5px;line-height:1.6">Haklısınız — 3 emsal kararla bu noktayı destekleyelim.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="hr" style="margin:0;max-width:1240px;margin-inline:auto">
|
||||
|
||||
<section id="ozellikler" data-reveal="ozellikler" style="max-width:1240px;margin:0 auto;padding:clamp(56px,9vw,108px) clamp(20px,6vw,72px);opacity:{{ reveal.ozellikler.opacity }};transform:{{ reveal.ozellikler.transform }};transition:opacity .7s ease,transform .7s ease">
|
||||
<span style="display:block;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent-700);font-feature-settings:'tnum' 1;margin-bottom:14px">Madde 04 — Platform</span>
|
||||
<h2 style="font-family:var(--font-heading);font-weight:400;font-size:clamp(30px,3.6vw,44px);margin:0 0 40px;letter-spacing:-0.008em">Bir avukatın ihtiyaç duyduğu şeyler.</h2>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px">
|
||||
<div class="card elev-sm" style="grid-column:span 2;display:flex;flex-direction:column;gap:10px;justify-content:center">
|
||||
<span class="card-kicker">AI tartışma ortağı</span>
|
||||
<h3 class="card-title" style="font-size:26px">Argümanınızı sınar, meslektaş gibi</h3>
|
||||
<p class="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>
|
||||
<div class="card elev-sm">
|
||||
<span class="card-kicker">Dosya analizi</span>
|
||||
<h3 class="card-title">Dava dosyasını okur</h3>
|
||||
<p class="card-body">Olay örgüsünü, tarafları ve hukuki dayanakları çıkarır.</p>
|
||||
</div>
|
||||
<div class="card elev-sm">
|
||||
<span class="card-kicker">İçtihat arama</span>
|
||||
<h3 class="card-title">Bağlama uygun emsal bulur</h3>
|
||||
<p class="card-body">Anahtar kelime eşleşmesiyle değil, hukuki benzerlikle emsal kararları bulur.</p>
|
||||
</div>
|
||||
<div class="card elev-sm">
|
||||
<span class="card-kicker">Dilekçe taslağı</span>
|
||||
<h3 class="card-title">Tartışmayı taslağa döker</h3>
|
||||
<p class="card-body">Vardığınız sonucu, düzenlenebilir bir dilekçe taslağına dönüştürür.</p>
|
||||
</div>
|
||||
<div class="card elev-sm">
|
||||
<span class="card-kicker" style="display:flex;align-items:center;gap:8px">Büro paylaşımı <span class="tag tag-outline">Yakında</span></span>
|
||||
<h3 class="card-title">Ekip çalışması</h3>
|
||||
<p class="card-body">Dosya ve tartışma geçmişini büro içindeki meslektaşlarınızla paylaşın.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="hr" style="margin:0;max-width:1240px;margin-inline:auto">
|
||||
|
||||
<section id="fiyatlandirma" data-reveal="fiyatlandirma" style="max-width:1240px;margin:0 auto;padding:clamp(56px,9vw,108px) clamp(20px,6vw,72px);opacity:{{ reveal.fiyatlandirma.opacity }};transform:{{ reveal.fiyatlandirma.transform }};transition:opacity .7s ease,transform .7s ease">
|
||||
<span style="display:block;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent-700);font-feature-settings:'tnum' 1;margin-bottom:14px;text-align:center">Madde 05 — Fiyatlandırma</span>
|
||||
<h2 style="font-family:var(--font-heading);font-weight:400;font-size:clamp(30px,3.6vw,44px);margin:0 0 44px;text-align:center;letter-spacing:-0.008em">Tek fiyat, herkese aynı.</h2>
|
||||
<div style="max-width:520px;margin:0 auto;display:flex;border:1px solid var(--color-divider);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden">
|
||||
<div style="width:34px;background:var(--color-neutral-100);display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;border-right:1px solid var(--color-divider);padding:20px 0">
|
||||
<sc-for list="{{ pricingTicks }}" as="t" hint-placeholder-count="5">
|
||||
<span style="font-size:11px;font-feature-settings:'tnum' 1;color:var(--color-accent-700);writing-mode:vertical-rl">{{ t }}</span>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="flex:1;padding:40px 36px;text-align:center">
|
||||
<p style="margin:0;font-family:var(--font-heading);font-weight:400;font-size:clamp(46px,6vw,64px);line-height:1;font-feature-settings:'tnum' 1">40.000 TL</p>
|
||||
<p style="margin:6px 0 0;font-size:14px;letter-spacing:0.06em;text-transform:uppercase;color:color-mix(in srgb, var(--color-text) 60%, transparent)">/ yıl</p>
|
||||
<p style="font-size:15px;line-height:1.6;max-width:32ch;margin:20px auto 0;color:color-mix(in srgb, var(--color-text) 78%, transparent)">Bireysel çalışan avukat ya da büro ortağı — fark etmez. Tüm bireysel avukatlara tek, sabit fiyat.</p>
|
||||
<hr class="hr" style="margin:24px 0">
|
||||
<ul style="list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;text-align:left">
|
||||
<li style="display:flex;gap:10px;font-size:14.5px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="flex:none;margin-top:2px"><polyline points="20 6 9 17 4 12"></polyline></svg>Sınırsız dosya analizi</li>
|
||||
<li style="display:flex;gap:10px;font-size:14.5px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="flex:none;margin-top:2px"><polyline points="20 6 9 17 4 12"></polyline></svg>AI tartışma ortağı</li>
|
||||
<li style="display:flex;gap:10px;font-size:14.5px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="flex:none;margin-top:2px"><polyline points="20 6 9 17 4 12"></polyline></svg>İçtihat arama</li>
|
||||
<li style="display:flex;gap:10px;font-size:14.5px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="flex:none;margin-top:2px"><polyline points="20 6 9 17 4 12"></polyline></svg>Dilekçe taslağı üretimi</li>
|
||||
<li style="display:flex;gap:10px;font-size:14.5px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="flex:none;margin-top:2px"><polyline points="20 6 9 17 4 12"></polyline></svg>Kurucu ekiple doğrudan destek</li>
|
||||
</ul>
|
||||
<a href="#iletisim" class="btn btn-primary btn-block" style="margin-top:26px;font-size:15px;padding:12px">Demo Talep Et</a>
|
||||
<p style="font-size:12px;margin:14px 0 0;color:color-mix(in srgb, var(--color-text) 55%, transparent)">Yıllık faturalandırma. Gizli ücret yok.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="hr" style="margin:0;max-width:1240px;margin-inline:auto">
|
||||
|
||||
<section id="guven" data-reveal="guven" style="max-width:1240px;margin:0 auto;padding:clamp(56px,9vw,108px) clamp(20px,6vw,72px);opacity:{{ reveal.guven.opacity }};transform:{{ reveal.guven.transform }};transition:opacity .7s ease,transform .7s ease">
|
||||
<span style="display:block;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent-700);font-feature-settings:'tnum' 1;margin-bottom:14px">Madde 06 — Güven ve veri güvenliği</span>
|
||||
<h2 style="font-family:var(--font-heading);font-weight:400;font-size:clamp(30px,3.6vw,44px);margin:0 0 16px;letter-spacing:-0.008em">Dosyalarınız sizin kalır.</h2>
|
||||
<p style="font-size:15.5px;line-height:1.7;max-width:60ch;margin:0 0 40px;color:color-mix(in srgb, var(--color-text) 78%, transparent)">Bir dava dosyası, bir avukatın elindeki en hassas belgedir. AyrisLegal'ı bu bilinçle kuruyoruz.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:1px solid var(--color-divider)">
|
||||
<div style="padding:28px 24px 0 0;border-right:1px solid var(--color-divider)">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="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><path d="M9 12 l2.2 2.2 L15.5 9.5"></path></svg>
|
||||
<h3 style="font-family:var(--font-heading);font-weight:400;font-size:19px;margin:12px 0 6px">KVKK'ya uyumlu</h3>
|
||||
<p style="font-size:14.5px;line-height:1.6;margin:0;color:color-mix(in srgb, var(--color-text) 78%, transparent)">Kişisel verilerin korunması mevzuatına uygun işleme ve saklama.</p>
|
||||
</div>
|
||||
<div style="padding:28px 24px 0;border-right:1px solid var(--color-divider)">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="6" rx="1.5"></rect><rect x="3" y="14" width="18" height="6" rx="1.5"></rect><line x1="7" y1="7" x2="7" y2="7"></line><line x1="7" y1="17" x2="7" y2="17"></line></svg>
|
||||
<h3 style="font-family:var(--font-heading);font-weight:400;font-size:19px;margin:12px 0 6px">Sunucular Türkiye'de</h3>
|
||||
<p style="font-size:14.5px;line-height:1.6;margin:0;color:color-mix(in srgb, var(--color-text) 78%, transparent)">Verileriniz yurt dışına çıkmaz — Ayris Tech'in self-hosted altyapı felsefesiyle.</p>
|
||||
</div>
|
||||
<div style="padding:28px 0 0 24px">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10" width="14" height="10" rx="1.5"></rect><path d="M8 10 V7 a4 4 0 0 1 8 0 v3"></path></svg>
|
||||
<h3 style="font-family:var(--font-heading);font-weight:400;font-size:19px;margin:12px 0 6px">Dosyanız modelleri eğitmez</h3>
|
||||
<p style="font-size:14.5px;line-height:1.6;margin:0;color:color-mix(in srgb, var(--color-text) 78%, transparent)">Yüklediğiniz belgeler yalnızca sizin analizinizde kullanılır.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="hr" style="margin:0;max-width:1240px;margin-inline:auto">
|
||||
|
||||
<section id="iletisim" data-reveal="iletisim" style="max-width:1240px;margin:0 auto;padding:clamp(56px,9vw,108px) clamp(20px,6vw,72px);opacity:{{ reveal.iletisim.opacity }};transform:{{ reveal.iletisim.transform }};transition:opacity .7s ease,transform .7s ease">
|
||||
<span style="display:block;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent-700);font-feature-settings:'tnum' 1;margin-bottom:14px">Madde 07 — Erken erişim</span>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px">
|
||||
<div>
|
||||
<h2 style="font-family:var(--font-heading);font-weight:400;font-size:clamp(28px,3.2vw,38px);margin:0 0 16px;letter-spacing:-0.008em">Şu an müşteri referansı göstermiyoruz — kasıtlı olarak.</h2>
|
||||
<p style="font-size:15.5px;line-height:1.7;margin:0;text-align:justify;hyphens:auto;color:color-mix(in srgb, var(--color-text) 78%, transparent)">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="margin-top:32px;display:flex;align-items:center;gap:14px">
|
||||
<div style="width:44px;height:44px;border:1px solid var(--color-accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:11px;letter-spacing:0.03em;color:var(--color-accent-700);text-align:center;line-height:1.1">AYRIS<br/>LEGAL</div>
|
||||
<span style="font-size:12.5px;color:color-mix(in srgb, var(--color-text) 60%, transparent)">Kurucu ekip mührü</span>
|
||||
</div>
|
||||
</div>
|
||||
<sc-if value="{{ submitted }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:40px;text-align:center;background:var(--color-surface)">
|
||||
<h3 style="font-family:var(--font-heading);font-weight:400;font-size:22px;margin:0 0 8px">Talebiniz alındı.</h3>
|
||||
<p style="font-size:14.5px;margin:0;color:color-mix(in srgb, var(--color-text) 78%, transparent)">Kurucu ekipten kısa süre içinde size dönüş yapılacak.</p>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ notSubmitted }}" hint-placeholder-val="{{ true }}">
|
||||
<form onSubmit="{{ handleSubmit }}" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:28px">
|
||||
<div class="field" style="grid-column:span 1">
|
||||
<label for="af-name">Ad Soyad</label>
|
||||
<input id="af-name" class="input" type="text" placeholder="Av. Ayşe Yılmaz" required="{{ true }}"></input>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="af-org">Büro / Kurum</label>
|
||||
<input id="af-org" class="input" type="text" placeholder="Yılmaz Hukuk Bürosu"></input>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="af-email">E-posta</label>
|
||||
<input id="af-email" class="input" type="email" placeholder="ayse@buro.com" required="{{ true }}"></input>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="af-phone">Telefon</label>
|
||||
<input id="af-phone" class="input" type="tel" placeholder="0532 000 00 00"></input>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-block" style="grid-column:1 / -1;padding:12px">Demo Talep Et</button>
|
||||
</form>
|
||||
</sc-if>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer style="max-width:1240px;margin:0 auto;padding:28px clamp(20px,6vw,72px) 40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:color-mix(in srgb, var(--color-text) 60%, transparent)">
|
||||
<span>AyrisLegal, Ayris Tech'in bir ürünüdür.</span>
|
||||
<span>© {{ year }} AyrisLegal · <a href="#" style="color:inherit">Aydınlatma Metni</a></span>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script>
|
||||
const SECTIONS = ['problem','farklilasim','ozellikler','fiyatlandirma','guven','iletisim'];
|
||||
const RAIL = [
|
||||
{ id: 'problem', label: '02', href: '#is-akisi' },
|
||||
{ id: 'farklilasim', label: '03', href: '#farklilasim' },
|
||||
{ id: 'ozellikler', label: '04', href: '#ozellikler' },
|
||||
{ id: 'fiyatlandirma', label: '05', href: '#fiyatlandirma' },
|
||||
{ id: 'guven', label: '06', href: '#guven' },
|
||||
{ id: 'iletisim', label: '07', href: '#iletisim' },
|
||||
];
|
||||
|
||||
class Component extends DCLogic {
|
||||
state = { submitted: false, visible: {}, scrolled: false, active: null };
|
||||
|
||||
componentDidMount() {
|
||||
this._onScroll = () => this.setState({ scrolled: window.scrollY > 12 });
|
||||
window.addEventListener('scroll', this._onScroll, { passive: true });
|
||||
this._observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((e) => {
|
||||
const id = e.target.getAttribute('data-reveal');
|
||||
if (e.isIntersecting) {
|
||||
this.setState((s) => ({ visible: { ...s.visible, [id]: true }, active: id }));
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.2 });
|
||||
document.querySelectorAll('[data-reveal]').forEach((el) => this._observer.observe(el));
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('scroll', this._onScroll);
|
||||
if (this._observer) this._observer.disconnect();
|
||||
}
|
||||
|
||||
handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
this.setState({ submitted: true });
|
||||
};
|
||||
|
||||
renderVals() {
|
||||
const reveal = {};
|
||||
SECTIONS.forEach((id) => {
|
||||
const on = !!this.state.visible[id];
|
||||
reveal[id] = { opacity: on ? 1 : 0, transform: on ? 'translateY(0)' : 'translateY(28px)' };
|
||||
});
|
||||
const railItems = RAIL.map((r) => ({
|
||||
...r,
|
||||
color: this.state.active === r.id ? 'var(--color-accent-700)' : 'color-mix(in srgb, var(--color-text) 40%, transparent)',
|
||||
weight: this.state.active === r.id ? 600 : 400,
|
||||
}));
|
||||
return {
|
||||
submitted: this.state.submitted,
|
||||
notSubmitted: !this.state.submitted,
|
||||
handleSubmit: this.handleSubmit,
|
||||
year: new Date().getFullYear(),
|
||||
reveal,
|
||||
railItems,
|
||||
navPad: this.state.scrolled ? '10px clamp(20px,6vw,64px)' : '14px clamp(20px,6vw,64px)',
|
||||
navBg: this.state.scrolled ? 'color-mix(in srgb, var(--color-bg) 88%, transparent)' : 'transparent',
|
||||
stats: [
|
||||
{ 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\u2019de kalır' },
|
||||
{ value: '7/24', label: 'Dosyanızla çalışan ortak' },
|
||||
],
|
||||
pricingTicks: ['01', '02', '03', '04', '05'],
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,152 @@
|
||||
{
|
||||
"plugins": [
|
||||
"react",
|
||||
"import"
|
||||
],
|
||||
"rules": {
|
||||
"react/forbid-elements": [
|
||||
"warn",
|
||||
{
|
||||
"forbid": []
|
||||
}
|
||||
],
|
||||
"no-restricted-imports": [
|
||||
"warn",
|
||||
{
|
||||
"patterns": []
|
||||
}
|
||||
],
|
||||
"no-restricted-syntax": [
|
||||
"warn",
|
||||
{
|
||||
"selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
|
||||
"message": "Raw hex color — use a design-system color token via var()."
|
||||
},
|
||||
{
|
||||
"selector": "Literal[value=/\\b\\d+px\\b/]",
|
||||
"message": "Raw px value — use a design-system spacing token via var()."
|
||||
},
|
||||
{
|
||||
"selector": "Literal[value=/font-family\\s*:\\s*(?!['\\\"]?(?:Cormorant Garamond|Lora))/i]",
|
||||
"message": "Font not provided by the design system. Available: Cormorant Garamond, Lora."
|
||||
}
|
||||
]
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"**/index.js"
|
||||
],
|
||||
"rules": {
|
||||
"no-restricted-imports": "off"
|
||||
}
|
||||
}
|
||||
],
|
||||
"x-omelette": {
|
||||
"components": {},
|
||||
"tokens": [
|
||||
"--color-accent",
|
||||
"--color-accent-100",
|
||||
"--color-accent-2",
|
||||
"--color-accent-2-100",
|
||||
"--color-accent-2-200",
|
||||
"--color-accent-2-300",
|
||||
"--color-accent-2-400",
|
||||
"--color-accent-2-500",
|
||||
"--color-accent-2-600",
|
||||
"--color-accent-2-700",
|
||||
"--color-accent-2-800",
|
||||
"--color-accent-2-900",
|
||||
"--color-accent-200",
|
||||
"--color-accent-300",
|
||||
"--color-accent-400",
|
||||
"--color-accent-500",
|
||||
"--color-accent-600",
|
||||
"--color-accent-700",
|
||||
"--color-accent-800",
|
||||
"--color-accent-900",
|
||||
"--color-bg",
|
||||
"--color-divider",
|
||||
"--color-neutral-100",
|
||||
"--color-neutral-200",
|
||||
"--color-neutral-300",
|
||||
"--color-neutral-400",
|
||||
"--color-neutral-500",
|
||||
"--color-neutral-600",
|
||||
"--color-neutral-700",
|
||||
"--color-neutral-800",
|
||||
"--color-neutral-900",
|
||||
"--color-surface",
|
||||
"--color-text",
|
||||
"--font-body",
|
||||
"--font-heading",
|
||||
"--font-heading-weight",
|
||||
"--radius-lg",
|
||||
"--radius-md",
|
||||
"--radius-sm",
|
||||
"--shadow-lg",
|
||||
"--shadow-md",
|
||||
"--shadow-sm",
|
||||
"--space-1",
|
||||
"--space-2",
|
||||
"--space-3",
|
||||
"--space-4",
|
||||
"--space-6",
|
||||
"--space-8"
|
||||
],
|
||||
"tokenKinds": {
|
||||
"--color-bg": "color",
|
||||
"--color-surface": "color",
|
||||
"--color-text": "font",
|
||||
"--color-accent": "color",
|
||||
"--color-accent-2": "color",
|
||||
"--color-divider": "color",
|
||||
"--color-neutral-100": "color",
|
||||
"--color-neutral-200": "color",
|
||||
"--color-neutral-300": "color",
|
||||
"--color-neutral-400": "color",
|
||||
"--color-neutral-500": "color",
|
||||
"--color-neutral-600": "color",
|
||||
"--color-neutral-700": "color",
|
||||
"--color-neutral-800": "color",
|
||||
"--color-neutral-900": "color",
|
||||
"--color-accent-100": "color",
|
||||
"--color-accent-200": "color",
|
||||
"--color-accent-300": "color",
|
||||
"--color-accent-400": "color",
|
||||
"--color-accent-500": "color",
|
||||
"--color-accent-600": "color",
|
||||
"--color-accent-700": "color",
|
||||
"--color-accent-800": "color",
|
||||
"--color-accent-900": "color",
|
||||
"--color-accent-2-100": "color",
|
||||
"--color-accent-2-200": "color",
|
||||
"--color-accent-2-300": "color",
|
||||
"--color-accent-2-400": "color",
|
||||
"--color-accent-2-500": "color",
|
||||
"--color-accent-2-600": "color",
|
||||
"--color-accent-2-700": "color",
|
||||
"--color-accent-2-800": "color",
|
||||
"--color-accent-2-900": "color",
|
||||
"--font-heading": "font",
|
||||
"--font-heading-weight": "font",
|
||||
"--font-body": "font",
|
||||
"--space-1": "spacing",
|
||||
"--space-2": "spacing",
|
||||
"--space-3": "spacing",
|
||||
"--space-4": "spacing",
|
||||
"--space-6": "spacing",
|
||||
"--space-8": "spacing",
|
||||
"--radius-sm": "radius",
|
||||
"--radius-md": "radius",
|
||||
"--radius-lg": "radius",
|
||||
"--shadow-sm": "shadow",
|
||||
"--shadow-md": "shadow",
|
||||
"--shadow-lg": "shadow"
|
||||
},
|
||||
"fontFamilies": [
|
||||
"Cormorant Garamond",
|
||||
"Lora"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/* @ds-bundle: {"format":4,"namespace":"Classical_classi","components":[],"sourceHashes":{},"inlinedExternals":[],"unexposedExports":[]} */
|
||||
|
||||
(() => {
|
||||
|
||||
const __ds_ns = (window.Classical_classi = window.Classical_classi || {});
|
||||
|
||||
const __ds_scope = {};
|
||||
|
||||
(__ds_ns.__errors = __ds_ns.__errors || []);
|
||||
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,81 @@
|
||||
# Classical design system
|
||||
|
||||
Classical is an editorial, book-like system on a soft near-white ground: Cormorant Garamond headings over Lora body, justified columns, hairline rules, and color applied as stroke rather than fill. Surfaces stay quiet — cards are bordered, buttons are outlined — and photographs sit matted on the page like tipped-in plates.
|
||||
|
||||
## How to use this
|
||||
|
||||
- Link the one stylesheet from every page — `<link rel="stylesheet" href="styles.css">` (adjust the relative path) — and take every color, font, spacing, radius and shadow from its variables (`var(--color-*)`, `var(--font-*)`, `var(--space-*)`, `var(--radius-*)`, `var(--shadow-*)`). Never hard-code a hex, a font name or a px value the tokens already carry.
|
||||
- Build with the classes below rather than inventing parallel ones; the component pages are plain HTML, so view source and copy the markup.
|
||||
- `templates/` holds starting points a consuming project can copy whole.
|
||||
- The whole system was derived from `theme.json`. To change the look, edit the tokens at the top of `styles.css` — every page, the thumbnail and this guide read from them — and keep `theme.json` and the written guidance in step so they don't drift from what the CSS actually does.
|
||||
|
||||
## Direction
|
||||
|
||||
Editorial, justified body copy in columns. Tight leading; headlines flush-left over justified text blocks. Use hairline dividers (`var(--color-divider)`) between major sections. Apply color as borders, rules and underlines — not as filled blocks. Buttons are outlined (1px accent border on transparent), not solid-filled. Wrap hero and inline images in the `.plate` class — a warm archival grade inside a thin surface-colored mat, like a tipped-in book plate. In decks, section dividers sit on a deep warm near-black (a shade below `--color-neutral-900`) as a colophon page — paper type with a gold ghost numeral; gold stays stroke and small marks on content slides.
|
||||
|
||||
## Color
|
||||
|
||||
A light ground (`--color-bg` #f3f2f2) with `--color-text` #201f1d and a single accent #b68235 (this is a mono scheme: no second accent was chosen — the `--color-accent-2-*` variables carry a machine-derived stand-in kept only so both sets resolve; treat them as one role). Each role carries a 100–900 tonal ramp (`--color-neutral-100` … `--color-accent-2-900`) generated in OKLCH on a shared perceptual lightness scale, so the same step of any ramp has the same visual weight. Use the light steps (100–300) for tinted fills, hovers and subtle borders, 500 as the role's base, and the dark steps (700–900) for text on tinted fills and for pressed states; prefer ramp steps over ad-hoc `color-mix()`. For elevation use `--shadow-sm/md/lg` (already tuned to the ground) rather than ad-hoc box-shadows.
|
||||
|
||||
## Type
|
||||
|
||||
Cormorant Garamond for headings over Lora for body text, loaded as `--font-heading` / `--font-body`. Bold is avoided: interface headings cap at semibold (the `--font-heading-weight` token), and the bigger the text the lighter it sets — display sizes take the normal cut (the deck shows this). Numbers set tabular wherever they stand as figures or columns — kickers, contents numbers, tables, charts, the display numerals (`"tnum"`; both faces keep their own figure style and gain equal widths) — while running prose keeps its text figures (Lora's tabular feature also widens its word-spaces and punctuation, which would loosen the prose). Density 1.15× and radius 4px are already baked into the `--space-*` / `--radius-*` scales — use the variables, not raw numbers.
|
||||
|
||||
## Icons
|
||||
|
||||
Use Lucide icons (https://lucide.dev) throughout.
|
||||
|
||||
## Interaction states
|
||||
|
||||
Interactive states are themed, never browser defaults: give every interactive element a `:hover` tint and a pressed state from the accent ramp (one step past the base — `--color-accent-600` on a light ground, `--color-accent-400` on a dark one, or a `color-mix()` tint for outlined/ghost variants), and style keyboard focus with `:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }` — never leave the default blue focus ring.
|
||||
|
||||
## Components
|
||||
|
||||
| Class | What it is | Shown in |
|
||||
| --- | --- | --- |
|
||||
| `.btn` with `.btn-primary`, `.btn-secondary`, `.btn-ghost`, `.btn-icon`, `.btn-block` | Actions — the primary is an accent outline, never a fill | components/buttons.html |
|
||||
| `.tag` with `.tag-accent`, `.tag-accent-2`, `.tag-neutral`, `.tag-outline` | Small labels tinted from the ramps (mono palette: accent-2 reads the same as accent) | components/buttons.html |
|
||||
| `.field` + `label`, `.input`, `.radio` + `.dot`, `.seg` + `.seg-opt` | Form fields and choices on native elements — no script | components/forms.html |
|
||||
| `.card` with `.card-kicker`, `.card-title`, `.card-body`, `.card-meta`; `.elev-sm/md/lg` | Bordered, unfilled content surfaces; elevation utilities | components/cards.html |
|
||||
| `.nav` + `.nav-brand` | The header bar | components/navigation.html |
|
||||
| `.table` | Data tables with themed header and row rules | components/table.html |
|
||||
| `.dialog-backdrop` + `.dialog` (+ `.dialog-title/-body/-actions`) | A modal at the top elevation | components/dialog.html |
|
||||
| `.hr` | A hairline horizontal rule | foundations/layout.html |
|
||||
| `.plate` | The image wrapper — every content photograph goes through it | foundations/image.html |
|
||||
|
||||
States are built in: hovers and pressed states come from the accent ramp, keyboard focus is the 2px accent `:focus-visible` ring, `::selection` is an accent tint, and disabled controls drop to 45% opacity. Don't restyle them per page. The accent-to-ground pair is tuned to at least 3:1 — enough for icons, large text and interface chrome, not for body copy — so for paragraph-size text in the accent use a deep ramp step (`--color-accent-700` on this ground) rather than the accent itself.
|
||||
|
||||
## Do
|
||||
|
||||
- Justify body copy at a comfortable measure and let the hairlines carry the structure.
|
||||
- Draw with borders, rules and underlines; keep large fills off the page.
|
||||
- Give text room — the spacing scale is airy (density 1.15×) by design.
|
||||
- Mat photographs with the `.plate` wrapper so they read as plates, not banners.
|
||||
|
||||
## Don't
|
||||
|
||||
- Do not fill cards or buttons with solid accent color.
|
||||
- Do not use heavy drop shadows — elevation here is a whisper.
|
||||
- Do not tighten the leading or crowd the margins.
|
||||
- Do not swap in a sans-serif for emphasis; weight and italics do that job.
|
||||
|
||||
## Files
|
||||
|
||||
- `styles.css` — the only stylesheet: the token sheet (`:root` variables, ramps, base type) plus the component layer. Link it from every page.
|
||||
- `readme.md` — this guide.
|
||||
- `theme.json` — the parameters these files were derived from (a machine-readable record of the theme).
|
||||
- `thumbnail.html` — the project cover (brand mark + swatches).
|
||||
- `foundations/type.html` — the type scale and the heading/body pairing at real sizes.
|
||||
- `foundations/color.html` — color roles and the 100-900 tonal ramps, with usage notes.
|
||||
- `foundations/layout.html` — the spacing scale, the grid and how edges are drawn.
|
||||
- `foundations/icons.html` — the icon set at interface sizes, inline and in buttons.
|
||||
- `foundations/image.html` — how photographs and figures are treated.
|
||||
- `components/buttons.html` — buttons, icon buttons and tags in every variant and state.
|
||||
- `components/forms.html` — text fields, radios and the segmented control on native elements.
|
||||
- `components/cards.html` — content cards and the elevation steps.
|
||||
- `components/navigation.html` — the header bar pattern.
|
||||
- `components/table.html` — a data table with the themed header and row rules.
|
||||
- `components/dialog.html` — a modal over its backdrop at the top elevation.
|
||||
- `theme.html` — the theme's parameters rendered as a reference sheet.
|
||||
- `templates/landing/` — a starter page consuming the system the intended way (`index.html`, its `ds-base.js` loader, and the vendored `image-slot.js` its photograph mounts).
|
||||
- `assets/photo.jpg` — the reference photograph the imagery page treats.
|
||||
@@ -0,0 +1,255 @@
|
||||
/* Classical — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Lora:wght@400;600&display=swap');
|
||||
|
||||
:root {
|
||||
--color-bg: #f3f2f2;
|
||||
--color-surface: #eae9e9;
|
||||
--color-text: #201f1d;
|
||||
--color-accent: #b68235;
|
||||
--color-accent-2: #ac803e;
|
||||
--color-divider: color-mix(in srgb, #201f1d 16%, transparent);
|
||||
|
||||
/* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
|
||||
same step of any role matches the others in visual value. */
|
||||
--color-neutral-100: #f8f4f4;
|
||||
--color-neutral-200: #eae7e7;
|
||||
--color-neutral-300: #d7d3d3;
|
||||
--color-neutral-400: #bab6b6;
|
||||
--color-neutral-500: #9b9797;
|
||||
--color-neutral-600: #7d7979;
|
||||
--color-neutral-700: #605d5d;
|
||||
--color-neutral-800: #444141;
|
||||
--color-neutral-900: #2d2b2b;
|
||||
|
||||
--color-accent-100: #fff3e4;
|
||||
--color-accent-200: #ffe3bf;
|
||||
--color-accent-300: #facb8d;
|
||||
--color-accent-400: #e1ad66;
|
||||
--color-accent-500: #c28d41;
|
||||
--color-accent-600: #a06f24;
|
||||
--color-accent-700: #7d5411;
|
||||
--color-accent-800: #5a3b0a;
|
||||
--color-accent-900: #3a270d;
|
||||
|
||||
--color-accent-2-100: #fff3e4;
|
||||
--color-accent-2-200: #ffe3be;
|
||||
--color-accent-2-300: #f5cd96;
|
||||
--color-accent-2-400: #dbaf70;
|
||||
--color-accent-2-500: #bc8f4e;
|
||||
--color-accent-2-600: #9b7232;
|
||||
--color-accent-2-700: #79561f;
|
||||
--color-accent-2-800: #573d14;
|
||||
--color-accent-2-900: #382810;
|
||||
|
||||
--font-heading: "Cormorant Garamond", system-ui, sans-serif;
|
||||
--font-heading-weight: 600; /* review round 3: bold retired — semibold is the
|
||||
interface headings' ceiling (they need the weight at small sizes); display
|
||||
text goes lighter still, to the normal cut (see the deck) */
|
||||
--font-body: "Lora", system-ui, sans-serif;
|
||||
|
||||
--space-1: 4.6px;
|
||||
--space-2: 9.2px;
|
||||
--space-3: 13.8px;
|
||||
--space-4: 18.4px;
|
||||
--space-6: 27.6px;
|
||||
--space-8: 36.8px;
|
||||
|
||||
--radius-sm: 2px;
|
||||
--radius-md: 4px;
|
||||
--radius-lg: 7px;
|
||||
|
||||
/* Elevation — derived from the ground: soft ink-tinted shadows on a
|
||||
light theme, a hairline edge + ambient darkness on a dark one. */
|
||||
--shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
|
||||
--shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
|
||||
--shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
|
||||
|
||||
.plate{filter:sepia(0.22) saturate(0.82) contrast(1.05);box-sizing:border-box;
|
||||
border:6px solid var(--color-surface);outline:1px solid var(--color-divider)}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════════
|
||||
Components — built with the tokens above. Plain CSS
|
||||
on plain HTML: no JavaScript, no build step. Each class is documented in
|
||||
readme.md and demonstrated in foundations/ and components/.
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
|
||||
line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
|
||||
}
|
||||
h1 { font-size: 42px; }
|
||||
h2 { font-size: 32px; }
|
||||
h3 { font-size: 25px; }
|
||||
h4 { font-size: 20px; }
|
||||
h5 { font-size: 16px; }
|
||||
h6 { font-size: 13px; }
|
||||
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
|
||||
p { margin: 0 0 var(--space-3); }
|
||||
a { color: var(--color-accent); text-underline-offset: 3px; }
|
||||
img { display: block; max-width: 100%; }
|
||||
figure { margin: 0; }
|
||||
figcaption {
|
||||
font-size: 11px; margin-top: var(--space-1);
|
||||
color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||
}
|
||||
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
|
||||
:focus { outline: none; }
|
||||
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
|
||||
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
|
||||
|
||||
/* — rules — */
|
||||
.hr {
|
||||
height: 1px; border: 0; margin: var(--space-4) 0;
|
||||
background: var(--color-divider);
|
||||
}
|
||||
|
||||
/* — buttons — */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
||||
cursor: pointer; text-decoration: none;
|
||||
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
|
||||
font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
|
||||
the pair sits side by side in sign-up rows */
|
||||
background: transparent; border: 1px solid transparent;
|
||||
padding: var(--space-2) calc(var(--space-3) * 1.2);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.btn svg { display: block; }
|
||||
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
|
||||
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
|
||||
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
|
||||
.btn-secondary { border-color: var(--color-divider); }
|
||||
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
|
||||
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
|
||||
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
|
||||
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
|
||||
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
|
||||
.btn-icon { width: 36px; height: 36px; padding: 0; }
|
||||
.btn-block { width: 100%; margin-top: var(--space-2); }
|
||||
|
||||
/* — forms — */
|
||||
.field > label {
|
||||
display: block; font-size: 12px; margin-bottom: 5px;
|
||||
color: color-mix(in srgb, var(--color-text) 70%, transparent);
|
||||
}
|
||||
.input {
|
||||
width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
|
||||
font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-divider); border-radius: var(--radius-md);
|
||||
}
|
||||
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
|
||||
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
|
||||
textarea.input { min-height: 90px; resize: vertical; }
|
||||
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
|
||||
.radio input, .seg-opt input {
|
||||
position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
|
||||
}
|
||||
.radio .dot {
|
||||
width: 16px; height: 16px; flex: none; border-radius: 50%;
|
||||
border: 1.5px solid var(--color-divider);
|
||||
}
|
||||
.radio:hover .dot { border-color: var(--color-accent); }
|
||||
.radio input:checked + .dot {
|
||||
border-color: var(--color-accent); background: var(--color-accent);
|
||||
box-shadow: inset 0 0 0 4px var(--color-bg);
|
||||
}
|
||||
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
|
||||
.seg {
|
||||
display: inline-flex; overflow: hidden;
|
||||
border: 1px solid var(--color-divider); border-radius: var(--radius-md);
|
||||
}
|
||||
.seg-opt {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 7px 12px; font-size: 13px; cursor: pointer;
|
||||
}
|
||||
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
|
||||
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
|
||||
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
|
||||
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
|
||||
|
||||
/* — cards — */
|
||||
.card {
|
||||
display: flex; flex-direction: column; gap: var(--space-2);
|
||||
padding: var(--space-3); border-radius: var(--radius-md); background: transparent; border: 1px solid var(--color-divider);
|
||||
}
|
||||
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
|
||||
.card-title {
|
||||
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
|
||||
font-size: 17px; line-height: 1.2;
|
||||
}
|
||||
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
|
||||
.card-meta {
|
||||
display: flex; align-items: center; gap: 6px; font-size: 11px;
|
||||
color: color-mix(in srgb, var(--color-text) 50%, transparent);
|
||||
}
|
||||
.elev-sm { box-shadow: var(--shadow-sm); }
|
||||
.elev-md { box-shadow: var(--shadow-md); }
|
||||
.elev-lg { box-shadow: var(--shadow-lg); }
|
||||
|
||||
/* — tags — */
|
||||
.tag {
|
||||
display: inline-flex; align-items: center; font-size: 11px;
|
||||
letter-spacing: 0.02em; padding: 3px 10px;
|
||||
border-radius: calc(var(--radius-md) * 0.75);
|
||||
}
|
||||
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
|
||||
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
|
||||
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
|
||||
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
|
||||
|
||||
/* — navigation — */
|
||||
.nav {
|
||||
display: flex; align-items: center; gap: var(--space-4);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--color-divider);
|
||||
}
|
||||
.nav-brand {
|
||||
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
|
||||
font-size: 18px; margin-right: auto;
|
||||
}
|
||||
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
|
||||
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }
|
||||
|
||||
/* — tables — */
|
||||
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
||||
.table th {
|
||||
text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
|
||||
color: color-mix(in srgb, var(--color-text) 60%, transparent);
|
||||
padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
|
||||
}
|
||||
.table td {
|
||||
padding: var(--space-2);
|
||||
border-bottom: 1px solid var(--color-divider);
|
||||
}
|
||||
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
|
||||
|
||||
/* — dialog — */
|
||||
.dialog-backdrop {
|
||||
position: fixed; inset: 0; display: grid; place-items: center;
|
||||
padding: var(--space-4);
|
||||
background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
|
||||
}
|
||||
.dialog {
|
||||
width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
|
||||
padding: var(--space-4); border-radius: var(--radius-lg);
|
||||
background: var(--color-surface); box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider);
|
||||
}
|
||||
.dialog-title {
|
||||
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
|
||||
font-size: 20px;
|
||||
}
|
||||
.dialog-body { font-size: 14px; opacity: 0.85; }
|
||||
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
# AyrisLegal Tanıtım Web Sitesi — Ürün Gereksinimleri Dokümanı (PRD)
|
||||
|
||||
**Versiyon:** v0.1 (MVP)
|
||||
**Tarih:** Ağustos 2026
|
||||
**Durum:** Taslak — geliştirme öncesi son inceleme bekliyor
|
||||
**İlgili doküman:** AyrisLegal MVP PRD (ana uygulama — `docs/prd.md`), AyrisLegal Backend PRD (`docs/backend.md`)
|
||||
|
||||
---
|
||||
|
||||
## 1. Problem Tanımı
|
||||
|
||||
AyrisLegal (Electron masaüstü uygulaması) geliştirilmeye devam ediyor, ancak ürünün şu anda hiçbir kamuya açık tanıtımı, markalı bir varlığı veya potansiyel kullanıcıların (avukatlar) ürünü keşfedip iletişime geçebileceği bir kanalı yok. Pilot kullanıcı toplama süreci ("eş ve meslektaş çevresi") kişisel ağ üzerinden yürüyor; bu ölçeklenebilir değil ve ürünün güvenilirlik/ciddiyet algısını (hukuk sektöründe kritik bir faktör) inşa etmiyor.
|
||||
|
||||
**Kim etkileniyor:** İş sahibi (Mustafa) — pilot kullanıcı ve ilk ödeyen müşterileri bulma sürecinde; potansiyel kullanıcılar (solo/küçük büro avukatları) — ürünü keşfetme, güvenilirliğini değerlendirme ve iletişime geçme kanalı olmadığı için.
|
||||
|
||||
**Çözülmezse maliyeti:** Ana uygulama PRD'sindeki "İlk 2 ay içinde 1.000 ödeyen kullanıcı" hedefi, ürünü keşfedecek bir kanal olmadan gerçekçi değil. Rakipler (Lawyer Team, Hukukçu.pro, SmartHukuk, KolayOfis, Attornaid) zaten kamuya açık web varlığına sahip; markasız kalmak pazar konumlandırmasında dezavantaj yaratır.
|
||||
|
||||
---
|
||||
|
||||
## 2. Hedefler
|
||||
|
||||
1. Ziyaretçinin AyrisLegal'in ne olduğunu, kime hitap ettiğini ve temel değer önerisini (pasif arama aracı değil, aktif "düşünce ortağı") 10 saniye içinde anlayabilmesi
|
||||
2. Nitelikli avukat/büro ziyaretçilerinden demo talebi/iletişim formu doldurmalarını sağlamak — **sitenin birincil dönüşüm hedefi**
|
||||
3. Sitenin, hukuk sektörünün beklediği güven sinyallerini (profesyonel tasarım, netlik, KVKK/gizlilik duyarlılığı) taşıması
|
||||
4. Sitenin MVP uygulamayla paralel, hızlı (hedef: birkaç gün içinde) yayına alınabilmesi
|
||||
5. Marka kimliğinin (AyrisLegal logosu, lacivert/teal renk paleti, Archivo tipografisi) tutarlı şekilde uygulanması
|
||||
|
||||
---
|
||||
|
||||
## 3. Kapsam Dışı (Non-Goals) — MVP v0.1
|
||||
|
||||
| Kapsam Dışı | Neden |
|
||||
|---|---|
|
||||
| Self-serve kayıt/ödeme akışı (kredi kartıyla anında satın alma) | Sitenin birincil CTA'sı demo talebi/iletişim; ödeme entegrasyonu ayrı, daha sonraki bir faz |
|
||||
| Uygulama indirme/dağıtım sayfası (public download) | Uygulama henüz pilot aşamasında; herkese açık indirme linki vermek erken |
|
||||
| Çoklu dil desteği (İngilizce vb.) | Hedef kitle (Türk avukatlar) tek dilli; MVP'de kapsam dışı |
|
||||
| Blog / SEO içerik merkezi | Değerli olabilir ama MVP'nin kapsamı değil; ayrı bir içerik stratejisi gerektirir |
|
||||
| Müşteri girişi / hesap paneli sitede | Bu, uygulamanın kendisinin işi; site sadece tanıtım katmanı |
|
||||
| KVKK/ISO/SOC2 gibi uyumluluk rozetlerinin sitede öne çıkarılması | Ana uygulama PRD'sinde bu konu henüz netleşmedi ("Açık Sorular" bkz. `docs/prd.md` §7) — henüz doğrulanmamış uyumluluk iddiaları sitede öne sürülmemeli |
|
||||
| Canlı chat / chatbot desteği | MVP'de form yeterli; canlı destek ayrı bir araç/süreç gerektirir |
|
||||
|
||||
---
|
||||
|
||||
## 4. Kullanıcı Hikayeleri
|
||||
|
||||
**Birincil persona: Solo/küçük büro avukatı (site ziyaretçisi)**
|
||||
|
||||
- Ziyaretçi olarak, siteye geldiğimde AyrisLegal'in ne yaptığını ve benim işime nasıl yaradığını hemen anlamak istiyorum, böylece devam edip etmeyeceğime hızlıca karar verebileyim.
|
||||
- Ziyaretçi olarak, ürünün somut özelliklerini (dosya analizi, AI ile tartışma, emsal karar arama) görmek istiyorum, böylece günlük işime gerçekten katkı sağlayıp sağlamayacağını değerlendirebileyim.
|
||||
- Ziyaretçi olarak, demo talep etmek veya soru sormak için kolay bulunabilir, az alanlı bir form doldurmak istiyorum, böylece iletişime geçmek zahmetli olmasın.
|
||||
- Ziyaretçi olarak (güven), ürünü kimin geliştirdiğini ve verilerimin nasıl ele alındığını görmek istiyorum, böylece hassas müvekkil verisiyle çalışan bir araca güvenip güvenemeyeceğimi değerlendirebileyim.
|
||||
- Ziyaretçi olarak, mobilde de siteyi düzgün görüntüleyebilmek istiyorum, böylece telefonumdan da göz atabileyim.
|
||||
|
||||
**İkincil persona: İş sahibi (Mustafa, site yöneticisi)**
|
||||
|
||||
- İş sahibi olarak, forma gelen talepleri (e-posta bildirimi veya basit bir liste ile) görebilmek istiyorum, böylece pilot adaylarla hızlıca iletişime geçebileyim.
|
||||
- İş sahibi olarak, sitenin metin/görsellerini kod bilmeden kolayca güncelleyebilmek istiyorum (ya da en azından basit bir düzenleme süreciyle), böylece mesajlaşmayı pilot geri bildirimine göre hızlıca iterasyonlayabileyim.
|
||||
|
||||
---
|
||||
|
||||
## 5. Gereksinimler
|
||||
|
||||
### Must-Have (P0)
|
||||
|
||||
**P0-1: Ana Sayfa (Hero + Değer Önerisi)**
|
||||
- Net bir başlık ve alt başlıkla ürünün ne olduğu ve kime hitap ettiği anlatılır ("pasif arama aracı değil, aktif düşünce ortağı" mesajı öne çıkar)
|
||||
- Kabul kriterleri:
|
||||
- [ ] Sayfa açıldığında scroll yapmadan (above the fold) başlık, alt başlık ve birincil CTA butonu görünür
|
||||
- [ ] CTA butonu ("Demo Talep Et" / "İletişime Geç") iletişim formuna yönlendirir/scroll eder
|
||||
|
||||
**P0-2: Özellikler Bölümü**
|
||||
- Ana uygulamanın P0 özellikleri (dosya yükleme + AI analiz, çok turlu sohbet/tartışma, emsal karar arama) somut, anlaşılır dille anlatılır
|
||||
- Kabul kriterleri:
|
||||
- [ ] Her özellik için kısa başlık + açıklama + görsel/ikon
|
||||
- [ ] "Yakında" (dilekçe üretimi, UYAP entegrasyonu gibi Faz 2/3/6 özellikleri) ayrıca ve net şekilde işaretlenir — henüz var olmayan bir şey "mevcut" gibi sunulmaz
|
||||
|
||||
**P0-3: Demo Talebi / İletişim Formu**
|
||||
- Ziyaretçi ad, e-posta, (opsiyonel) baro sicil no ve kısa mesaj alanlarıyla form doldurur
|
||||
- Kabul kriterleri:
|
||||
- [ ] Form gönderimi başarılı olduğunda ziyaretçiye net bir onay mesajı gösterilir
|
||||
- [ ] Gönderilen talep, iş sahibinin görebileceği bir yere ulaşır (e-posta bildirimi ve/veya basit bir veritabanı kaydı)
|
||||
- [ ] Zorunlu alan doldurulmazsa anlaşılır bir hata mesajı gösterilir
|
||||
- [ ] Form spam/bot doldurmalarına karşı temel bir korumaya sahiptir (örn. honeypot alanı veya rate limiting)
|
||||
|
||||
**P0-4: Marka Kimliği Uygulaması**
|
||||
- Site, AyrisLegal logosu (`public/branding/logo-mark.png` kaynaklı) ve lacivert/teal renk paletiyle tutarlı görünür
|
||||
- Kabul kriterleri:
|
||||
- [ ] Logo header'da ve favicon'da kullanılır
|
||||
- [ ] Renk paleti (lacivert arka plan/teal vurgu) ana uygulamanın markasıyla tutarlıdır
|
||||
- [ ] Archivo font ailesi (veya markaya uygun bir alternatif) kullanılır
|
||||
|
||||
**P0-5: Mobil Uyumluluk**
|
||||
- Site mobil tarayıcılarda düzgün görüntülenir ve kullanılabilir
|
||||
- Kabul kriterleri:
|
||||
- [ ] 375px genişliğinden itibaren layout bozulmaz, yatay scroll oluşmaz
|
||||
- [ ] Form mobilde doldurulabilir ve gönderilebilir
|
||||
|
||||
**P0-6: Temel Sayfa Yapısı**
|
||||
- Ana Sayfa, Özellikler, İletişim/Demo (form) — en az bu üç bölüm tek sayfa (single-page) veya ayrı route olarak mevcut
|
||||
- Kabul kriterleri:
|
||||
- [ ] Navigasyon (header menü veya scroll-link) ile bölümler arası geçiş yapılabilir
|
||||
- [ ] Sayfa 3 saniyenin altında yüklenir (temel performans beklentisi)
|
||||
|
||||
### Nice-to-Have (P1)
|
||||
|
||||
- Hakkımızda/Ekip bölümü (kurucu hikayesi, güven inşası için)
|
||||
- Basit SSS (Sık Sorulan Sorular) bölümü — özellikle veri güvenliği/gizlilik soruları
|
||||
- Fiyatlandırma bölümü (sabit 40.000 TL/yıl fiyat noktasını netleştirmeden önce "Fiyat için iletişime geçin" şeklinde belirsiz bırakılabilir)
|
||||
- Basit analitik entegrasyonu (kaç ziyaretçi, hangi sayfadan form doldurdu gibi temel ölçüm)
|
||||
- Ekran görüntüsü/kısa demo videosu galerisi
|
||||
|
||||
### Future Considerations (P2)
|
||||
|
||||
- Blog / SEO içerik stratejisi
|
||||
- Çoklu dil desteği
|
||||
- Self-serve deneme/kayıt akışı (ana uygulamanın lisans/ödeme altyapısı olgunlaştığında)
|
||||
- Müşteri referansları / vaka analizleri (yeterli pilot kullanıcı biriktikten sonra)
|
||||
- Canlı destek/chatbot
|
||||
|
||||
---
|
||||
|
||||
## 6. Başarı Metrikleri
|
||||
|
||||
**Leading (hızlı değişen göstergeler):**
|
||||
- Form doldurma oranı (ziyaretçi → demo talebi): hedef ilk ayda ölçülebilir bir taban çizgisi oluşturmak (belirli bir yüzde hedefi için trafik verisi birikmesi bekleniyor)
|
||||
- Sayfa yüklenme süresi: hedef <3 saniye
|
||||
- Mobil ziyaretçi oranı ve mobil form tamamlama oranı
|
||||
|
||||
**Lagging (zamanla gelişen göstergeler):**
|
||||
- Form üzerinden gelen taleplerden gerçek pilot kullanıcıya dönüşüm oranı
|
||||
- Ana uygulama PRD'sindeki "ilk 2 ayda 1.000 ödeyen kullanıcı" hedefine sitenin katkısı (form → pilot → ödeyen kullanıcı hunisi)
|
||||
|
||||
**Ölçüm yöntemi:** MVP aşamasında resmi analitik altyapısı yok (P1'de temel analitik eklenmedikçe); form gönderimleri ve basit ziyaretçi sayısı takip edilecek.
|
||||
|
||||
---
|
||||
|
||||
## 7. Açık Sorular
|
||||
|
||||
- **[Ürün]** Demo talebi formu hangi bilgileri toplamalı — sadece ad/e-posta yeterli mi, yoksa büro büyüklüğü/ihtiyaç türü gibi niteleyici sorular eklensin mi (satış önceliklendirmesi için faydalı olabilir ama form uzarsa tamamlanma oranı düşebilir)?
|
||||
- **[Mühendislik]** Form gönderimleri nereye düşecek — basit bir e-posta servisi (örn. Resend/SendGrid) mi, yoksa `laawos-backend`'e yeni bir endpoint mi eklenecek (mevcut Supabase altyapısına bir `leads`/`demo_requests` tablosu eklemek mantıklı olabilir)?
|
||||
- **[Ürün]** Fiyatlandırma sitede hiç gösterilsin mi, yoksa "Fiyat için iletişime geçin" şeklinde mi bırakılsın? Ana PRD'de 40.000 TL/yıl fiyat noktası henüz "satış denemeleriyle doğrulanacak" aşamada.
|
||||
- **[Tasarım]** Site, ana uygulamanın kendi `page.tsx`'indeki inline-style tabanlı tasarım sistemini mi (aynı `DS` token yaklaşımı) paylaşacak, yoksa bağımsız bir stack (örn. Next.js + Tailwind, ayrı bir repo) mi kullanılacak?
|
||||
- **[Hukuki]** Sitede "yakında" olarak işaretlenecek özellikler (dilekçe üretimi, UYAP entegrasyonu) ile ilgili herhangi bir zaman taahhüdü verilmeli mi, yoksa tarihsiz mi bırakılsın?
|
||||
|
||||
---
|
||||
|
||||
## 8. Teknik Notlar
|
||||
|
||||
- **Stack önerisi:** Next.js (statik export veya basit hosting), ana uygulamayla aynı marka varlıklarını (`public/branding/logo-mark.png`, `logo-branding.png`) paylaşabilir. Bağımsız bir repo olarak kurulması (ana Electron uygulamasından ayrı deploy edilebilmesi için) önerilir.
|
||||
- **Deploy:** `coolify-deploy` skill'iyle uyumlu olacak şekilde, Gitea reposundan Coolify'a otomatik build — ana backend ile aynı altyapı deseni.
|
||||
- **Form backend'i:** Basit bir POST endpoint (yeni veya `laawos-backend`'e eklenen bir route) veya üçüncü taraf form servisi (Formspree, Resend) — Açık Sorular §7'de karar bekliyor.
|
||||
- **SEO temelleri:** Meta title/description, Open Graph görselleri (logo/marka görseliyle), temel semantik HTML — P0 kapsamında minimum, P2'de genişletilebilir.
|
||||
|
||||
---
|
||||
|
||||
## 9. Zaman Çizelgesi
|
||||
|
||||
| Faz | Süre | Bu PRD'nin Kapsamı |
|
||||
|---|---|---|
|
||||
| Faz 1 — Tanıtım Sitesi MVP (bu doküman) | Birkaç gün | P0-1 → P0-6 |
|
||||
| Faz 2 — Güven/İçerik Katmanı | Sonrası | P1 maddeleri (SSS, Hakkımızda, fiyatlandırma netleşmesi) |
|
||||
| Faz 3 — Büyüme/SEO | Ayrı PRD gerekir | P2 maddeleri (blog, self-serve, çoklu dil) |
|
||||
|
||||
**Bağımsızlık notu:** Bu site, ana AyrisLegal uygulamasının geliştirme sürecinden bağımsız olarak paralel yürütülebilir; tek bağımlılığı marka varlıklarının (logo, renk paleti) hazır olmasıdır — ki zaten mevcut.
|
||||
Reference in New Issue
Block a user