ayrisdev/ayris-legal-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance landing page, Telegram webhook, SEO suite, and cookie consent banner

Browse Source
This commit is contained in:
ayrisdev
2026-08-22 22:57:03 +03:00
parent 5ac5988a3a
commit 61dd85133c
26 changed files with 3264 additions and 896 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.impeccable/config.json
+3
View File
@@ -0,0 +1,3 @@
{
"buildPath": "code"
}
.impeccable/critique/2026-08-16T01-13-38Z__app.md
+76
View File
@@ -0,0 +1,76 @@
---
target: app
total_score: 18
max_score: 24
na_heuristics: 7,10
p0_count: 0
p1_count: 2
timestamp: 2026-08-16T01-13-38Z
slug: app
---
# Design Critique: app (AyrisLegal Web Application & Landing Surface)
**Method:** dual-agent (A: `e6f7d208-1fbc-4daa-b3a3-962cc0a92ccc` · B: `a945c7f8-9c10-46ce-aeef-f16ddea465de`)
**Target:** `app` (`app/[locale]/page.tsx`, `components/contact-form.tsx`, `app/globals.css`)
**Design Reference:** `DESIGN.md` ("The Modern Jurist Studio") & `PRODUCT.md`
---
### Design Health Score
Mode: **Persuade** (Marketing & Conversion Landing Surface). *Heuristics 7 & 10 scored n/a per mode-applicability rules.*
| # | Heuristic | Score | Key Finding / Rationale |
|---|---|:---:|---|
| **1** | Visibility of System Status | **3/4** | Clear "Gönderiliyor…" and confirmation states on form; live pulse in hero. Minor gap: no inline field-level entry feedback. |
| **2** | Match System / Real World | **4/4** | **Exceptional.** Speaks authentic Turkish legal terminology (*Tensip zaptı, Esas/Karar, Bilirkişi raporu, Çelişki tespiti, UDF/UYAP*). Zero generic fluff. |
| **3** | User Control and Freedom | **3/4** | Annual/monthly pricing toggle is smooth and reversible; clear section navigation. Success state lacks in-place reset. |
| **4** | Consistency and Standards | **2/4** | Severe token drift between `globals.css` (Dark Navy/Teal), `page.tsx` (White/Red), and `login` (Blue). Form placement rule violated on home page. |
| **5** | Error Prevention | **2/4** | Contact form has `noValidate` with no client-side regex or length validation. Unrestricted phone input formatting. |
| **6** | Recognition Rather Than Recall | **3/4** | Clear side-by-side pricing tier inclusions and visible document artifact previews. |
| **7** | Flexibility and Efficiency | **n/a** | *Mode: Persuade.* Accelerators and power-user shortcuts are not applicable to a landing page. |
| **8** | Aesthetic & Minimalist Design | **3/4** | Strong typographic hierarchy with Archivo and JetBrains Mono. Undersized text (<11px) and repetitive eyebrow kickers add minor noise. |
| **9** | Error Recovery | **1/4** | Critical gap in `ContactForm`: API 400 errors collapse into a generic message without field-level error highlights or recovery guidance. |
| **10** | Help and Documentation | **n/a** | *Mode: Persuade.* In-depth app docs not applicable; key questions handled in SSS accordion. |
| **Total** | | **18/24** | **Good (75%)** *(Renormalized over 8 applicable heuristics)* |
---
### Design Specificity Verdict
- **Domain Specificity:** High. Real Turkish judicial procedural artifacts (*Kira Tespiti Bilirkişi Raporu, 2024/100 Esas Tensip Zaptı, Yargıtay Ceza Genel Kurulu*) anchor the product deeply in authentic attorney workflows.
- **Architectural Clichés Identified:** Repetitive uppercase eyebrow chips above 5 headings, numbered `01 / 02 / 03` section tags, and an abrupt full-dark section inversion (`bg-zinc-950`) in the security module.
- **Deterministic Scan Summary:** 14 findings detected. True issues confirmed for `gradient-text`, legacy `codex-grid-background` in `globals.css`, undersized UI text (<11px in document badges), `low-contrast` text (`text-zinc-400` @ 2.59:1), and generic `blue-600` styling in `login/page.tsx`.
- **False Positives Dismissed:** Deep ambient card shadows (`0 30px 70px -25px rgba(...)`) and the `LivePulse` red status dot were verified as intentional tokens documented in `DESIGN.md`.
---
### Priority Issues
1. **[P1] Architecture & Scope Violation: Contact Form embedded on Homepage instead of dedicated `/iletisim`**
- *Why it matters:* Violates explicit project rules in `AGENTS.md` and `PRODUCT.md` (*"İletişim formu sadece /iletisim sayfasında — ana sayfada olmaz"*), cluttering homepage conversion and eliminating dedicated landing routes.
- *Fix:* Create `app/[locale]/iletisim/page.tsx` with the complete lead form; replace the homepage bottom section with an editorial CTA card linking to `/iletisim`.
- *Suggested Command:* `/impeccable layout app/[locale]/page.tsx`
2. **[P1] Contact Form Payload Mismatch & Error Recovery Breakdown**
- *Why it matters:* In `contact-form.tsx`, `org` is sent as `barNo` and `phone` as `message`. Furthermore, `noValidate` bypasses browser validation and API 400 responses swallow field-specific feedback.
- *Fix:* Align payload keys with backend schema, implement accessible inline validation, visible focus rings, and `aria-live` alert regions.
- *Suggested Command:* `/impeccable harden components/contact-form.tsx`
3. **[P2] Design System Token & Palette Schism (`globals.css` vs `DESIGN.md` vs `login`)**
- *Why it matters:* `globals.css` configures Dark Navy + Teal, while `DESIGN.md` and `page.tsx` use Paper White + Zinc + Ayris Red, and `login` uses generic `blue-600`.
- *Fix:* Align `globals.css` `:root` tokens directly with `DESIGN.md` (`--primary: #E61919`, `--background: #FFFFFF`, `--border: #E4E4E7`, `--muted-foreground: #71717A`), purge unused teal/orb styles, and update `login/page.tsx`.
- *Suggested Command:* `/impeccable typeset app/globals.css`
4. **[P2] Mobile Loss of Core Feature Demonstration (*Çelişki Avcısı*) & Legibility Deficits**
- *Why it matters:* The signature *Çelişki Avcısı* card is hidden on mobile screens (`hidden sm:block`), depriving mobile lawyers of the primary differentiator. Additionally, multiple metadata tags use undersized text (<10px) and low-contrast `zinc-400`.
- *Fix:* Inline the contradiction detection callout into the mobile document stream, enforce a minimum 11px font size floor, and update `text-zinc-400` to WCAG-compliant `text-zinc-500`.
- *Suggested Command:* `/impeccable adapt app/[locale]/page.tsx`
---
### Persona Red Flags
- **"Jordan" (Confused First-Timer Attorney):** Hero CTA promises *"Ücretsiz Deneyin"* (implies self-serve trial), but links to a form stating *"Kurucu ekipten biri sizi arar — 15 dakikalık canlı demo"*. This creates expectation mismatch and friction.
- **"Casey" (Distracted Mobile Attorney on the go):** Loses the entire *Çelişki Avcısı* demonstration on screens under 640px. Pricing toggle buttons have tight touch targets.
- **"Av. Mehmet" (Litigation Lawyer):** Sees only tenancy disputes (*Kira Tespit Davası*) in previews; wants proof that AyrisLegal handles complex criminal or heavy commercial court dockets.
.impeccable/design.json
+289
View File
@@ -0,0 +1,289 @@
{
"schemaVersion": 2,
"generatedAt": "2026-08-16T04:11:00.000Z",
"title": "Design System: AyrisLegal",
"extensions": {
"colorMeta": {
"primary": {
"role": "primary",
"displayName": "Ayris Legal Red",
"canonical": "#E61919",
"tonalRamp": [
"#4A0404",
"#700707",
"#9E0B0B",
"#B8140F",
"#E61919",
"#F87171",
"#FCA5A5",
"#FDEEEC"
]
},
"primary-dark": {
"role": "primary",
"displayName": "Deep Crimson",
"canonical": "#B8140F",
"tonalRamp": [
"#3D0303",
"#5C0606",
"#8A0909",
"#B8140F",
"#E61919",
"#EF4444",
"#F87171",
"#FDEEEC"
]
},
"primary-soft": {
"role": "neutral",
"displayName": "Soft Rose Tint",
"canonical": "#FDEEEC",
"tonalRamp": [
"#B8140F",
"#E61919",
"#F87171",
"#FCA5A5",
"#FECACA",
"#FEE2E2",
"#FDEEEC",
"#FFF5F5"
]
},
"neutral-bg": {
"role": "neutral",
"displayName": "Paper White",
"canonical": "#FFFFFF",
"tonalRamp": [
"#09090B",
"#18181B",
"#27272A",
"#71717A",
"#A1A1AA",
"#E4E4E7",
"#FAFAFA",
"#FFFFFF"
]
},
"neutral-surface": {
"role": "neutral",
"displayName": "Subtle Surface Tint",
"canonical": "#FAFAFA",
"tonalRamp": [
"#09090B",
"#18181B",
"#3F3F46",
"#71717A",
"#D4D4D8",
"#E4E4E7",
"#F4F4F5",
"#FAFAFA"
]
},
"neutral-border": {
"role": "neutral",
"displayName": "Hairline Border Zinc",
"canonical": "#E4E4E7",
"tonalRamp": [
"#18181B",
"#27272A",
"#52525B",
"#71717A",
"#A1A1AA",
"#D4D4D8",
"#E4E4E7",
"#F4F4F5"
]
},
"neutral-muted": {
"role": "neutral",
"displayName": "Muted Caption Slate",
"canonical": "#71717A",
"tonalRamp": [
"#18181B",
"#27272A",
"#3F3F46",
"#52525B",
"#71717A",
"#A1A1AA",
"#D4D4D8",
"#E4E4E7"
]
},
"neutral-text": {
"role": "neutral",
"displayName": "Deep Ink Black",
"canonical": "#09090B",
"tonalRamp": [
"#09090B",
"#18181B",
"#27272A",
"#3F3F46",
"#52525B",
"#71717A",
"#A1A1AA",
"#E4E4E7"
]
}
},
"typographyMeta": {
"display": {
"displayName": "Display",
"purpose": "Hero headlines and commanding value propositions."
},
"headline": {
"displayName": "Headline",
"purpose": "Section headings and core feature titles."
},
"title": {
"displayName": "Title",
"purpose": "Card titles, module headers, and modal names."
},
"body": {
"displayName": "Body",
"purpose": "Long-form explanations, case summaries, and narrative text."
},
"label": {
"displayName": "Label / Mono",
"purpose": "Case numbers, dates, badge pills, and legal metadata."
}
},
"shadows": [
{
"name": "card-float",
"value": "0 30px 70px -25px rgba(24, 24, 27, 0.25)",
"purpose": "Applied to hero browser preview frames and featured product mockups for dramatic physical lift."
},
{
"name": "overlay-pop",
"value": "0 20px 45px -15px rgba(24, 24, 27, 0.20)",
"purpose": "Applied to offset badges (e.g. Çelişki Avcısı pill) and floating status widgets."
},
{
"name": "form-card",
"value": "0 20px 60px -30px rgba(24, 24, 27, 0.20)",
"purpose": "Applied to interactive inquiry and lead generation forms on /iletisim."
}
],
"motion": [
{
"name": "ease-out-smooth",
"value": "cubic-bezier(0.16, 1, 0.3, 1)",
"purpose": "Spring transitions for scroll reveals and card entry animations."
},
{
"name": "magnetic-spring",
"value": "spring(stiffness: 150, damping: 15, mass: 0.5)",
"purpose": "Subtle cursor attraction physics on primary CTA buttons."
}
],
"breakpoints": [
{ "name": "sm", "value": "640px" },
{ "name": "md", "value": "768px" },
{ "name": "lg", "value": "1024px" },
{ "name": "xl", "value": "1280px" },
{ "name": "2xl", "value": "1400px" }
]
},
"components": [
{
"name": "Primary Action Button",
"kind": "button",
"refersTo": "button-primary",
"description": "High-intent primary conversion button with pill geometry and crimson hover state.",
"html": "<a href=\"#iletisim\" class=\"ds-btn-primary\">Ücretsiz Deneyin <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"/><path d=\"m12 5 7 7-7 7\"/></svg></a>",
"css": ".ds-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9999px; background: #E61919; color: #FFFFFF; font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 600; padding: 14px 28px; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .ds-btn-primary:hover { background: #B8140F; } .ds-btn-primary:active { transform: scale(0.98); }"
},
{
"name": "Outline Secondary Button",
"kind": "button",
"refersTo": "button-outline",
"description": "Secondary exploratory button with hairline border and subtle zinc hover tone.",
"html": "<a href=\"#tanisin\" class=\"ds-btn-outline\">Nasıl Çalışır?</a>",
"css": ".ds-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9999px; background: #FFFFFF; color: #18181B; border: 1.5px solid #E4E4E7; font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 600; padding: 14px 28px; text-decoration: none; cursor: pointer; transition: background 0.15s ease; } .ds-btn-outline:hover { background: #FAFAFA; border-color: #D4D4D8; }"
},
{
"name": "Elevated Browser Mock Card",
"kind": "card",
"refersTo": "card-elevated",
"description": "Floating browser frame mockup with window chrome dots and deep ambient drop shadow.",
"html": "<div class=\"ds-browser-card\"><div class=\"ds-browser-header\"><span class=\"ds-dot\"></span><span class=\"ds-dot\"></span><span class=\"ds-dot\"></span><span class=\"ds-browser-url\">ayrislegal.com</span></div><div class=\"ds-browser-body\"><div class=\"ds-file-item\"><span class=\"ds-file-name\">Bilirkişi Raporu - Kira Tespiti</span><span class=\"ds-file-date\">15.01.2026</span></div></div></div>",
"css": ".ds-browser-card { width: 100%; border-radius: 28px; border: 1px solid rgba(228, 228, 231, 0.7); background: #FFFFFF; box-shadow: 0 30px 70px -25px rgba(24, 24, 27, 0.25); overflow: hidden; font-family: 'Archivo', sans-serif; } .ds-browser-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #FAFAFA; border-bottom: 1px solid #E4E4E7; } .ds-dot { width: 10px; height: 10px; border-radius: 50%; background: #D4D4D8; } .ds-browser-url { flex: 1; text-align: center; font-size: 12px; color: #A1A1AA; font-family: 'JetBrains Mono', monospace; } .ds-browser-body { padding: 20px; } .ds-file-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border: 1px solid #F4F4F5; border-radius: 16px; } .ds-file-name { font-size: 13.5px; font-weight: 600; color: #3F3F46; } .ds-file-date { font-size: 11.5px; color: #A1A1AA; font-family: 'JetBrains Mono', monospace; }"
},
{
"name": "Lead Input Field",
"kind": "input",
"refersTo": "input-field",
"description": "Comfortable 46px text field with 12px corners and Ayris Red focus stroke transition.",
"html": "<div class=\"ds-field-wrap\"><label class=\"ds-field-label\">Ad Soyad <span style=\"color:#E61919;\">*</span></label><input type=\"text\" class=\"ds-field-input\" placeholder=\"Av. Ayşe Yılmaz\" /></div>",
"css": ".ds-field-wrap { display: flex; flex-direction: column; gap: 6px; font-family: 'Archivo', sans-serif; } .ds-field-label { font-size: 13px; font-weight: 600; color: #09090B; } .ds-field-input { width: 100%; min-height: 46px; border-radius: 12px; border: 1.5px solid #E4E4E7; background: #FFFFFF; padding: 10px 16px; font-size: 14px; color: #09090B; outline: none; transition: border-color 0.15s ease; box-sizing: border-box; } .ds-field-input:focus { border-color: #E61919; }"
},
{
"name": "Accent Chip Badge",
"kind": "chip",
"refersTo": "badge-accent",
"description": "Soft rose pill badge with deep crimson text for feature category callouts.",
"html": "<span class=\"ds-chip-badge\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\"/></svg> Avukatlar için yapay zeka destekli hukuki asistan</span>",
"css": ".ds-chip-badge { display: inline-flex; align-items: center; gap: 8px; border-radius: 9999px; background: #FDEEEC; color: #B8140F; font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 600; padding: 6px 14px; }"
},
{
"name": "Live Indicator Pulse",
"kind": "custom",
"refersTo": "live-pulse",
"description": "Concentric pulsing status indicator for live document analysis and courtroom feeds.",
"html": "<span class=\"ds-pulse-wrap\"><span class=\"ds-pulse-ring\"></span><span class=\"ds-pulse-dot\"></span></span>",
"css": ".ds-pulse-wrap { position: relative; display: inline-flex; width: 8px; height: 8px; } .ds-pulse-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: #E61919; opacity: 0.6; animation: ds-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; } .ds-pulse-dot { position: relative; display: inline-flex; width: 8px; height: 8px; border-radius: 50%; background: #E61919; } @keyframes ds-ping { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.4); opacity: 0; } }"
}
],
"narrative": {
"northStar": "The Modern Jurist Studio",
"overview": "The AyrisLegal design system embodies rigorous editorial precision, surgical focus, and high-trust clarity. Built for Turkish lawyers navigating dense case dockets, precedent archives, and evidentiary records, the interface rejects noisy SaaS clichés in favor of stark white-and-zinc architectural surfaces punctuated by deliberate, high-contrast Ayris Red accents.\n\nThe aesthetic philosophy bridges judicial gravitas with cutting-edge analytical intelligence. Typographic hierarchy is tight, bold, and authoritative. Cards, preview frames, and case documents float cleanly above the canvas with deep ambient drop shadows, giving digital artifacts physical substance and scanability.",
"keyCharacteristics": [
"Stark editorial canvas: pure white (#FFFFFF) and architectural zinc neutrals (#FAFAFA, #F4F4F5, #E4E4E7, #09090B).",
"Singular, surgical accent: high-contrast Ayris Legal Red (#E61919) used strictly for high-intent actions, critical alerts, and focal insights.",
"Authoritative typography: Archivo with tight tracking (-0.03em) and heavy weights for display, paired with JetBrains Mono for dates, case numbers, and system badges.",
"Confident tactile geometry: pill-shaped primary action buttons (rounded-full), generous 24px container corners, and layered floating cards with deep ambient shadows.",
"Zero fluff: no decorative gradient text, no floating particle meshes, and no icon-stuffed bento boxes."
],
"rules": [
{
"name": "The Rarity Rule",
"body": "The Ayris Red accent is applied to ≤5% of any viewport. Its scarcity is what commands immediate cognitive attention when flagging legal conflicts or driving conversion.",
"section": "colors"
},
{
"name": "The Hairline Rule",
"body": "All borders use crisp, unblurred 1px to 1.5px solid strokes (#E4E4E7). Borders define geometry; they never glow or carry colored stroke gradients.",
"section": "colors"
},
{
"name": "The Editorial Lead Rule",
"body": "Hero and section headlines lead with stark monochrome ink (#09090B) and isolate key thesis statements with solid accent color—never split across multi-stop gradients.",
"section": "typography"
},
{
"name": "The Monospace Docket Rule",
"body": "Every date, file reference, and courtroom docket timestamp is typeset in JetBrains Mono to reinforce authentic document reality.",
"section": "typography"
},
{
"name": "The Tonal Lift Rule",
"body": "Shadows are always neutral carbon/zinc tinted (rgba(24, 24, 27, ...)). Never use colored or saturated drop shadows under buttons or cards.",
"section": "elevation"
}
],
"dos": [
"Do maintain extreme typographic hierarchy with tight tracking (-0.03em) on Archivo display headings.",
"Do reserve Ayris Red (#E61919) strictly for primary conversion actions, conflict detection badges, and focus indicators.",
"Do typeset dates, docket IDs, and file timestamps in JetBrains Mono (label token).",
"Do pair crisp hairline borders (#E4E4E7) with deep ambient zinc drop shadows on floating card mockups.",
"Do keep lead capture and demo inquiries strictly on /iletisim."
],
"donts": [
"Don't use multi-color gradient text, rainbow highlights, or glowing neon outlines.",
"Don't use generic blue corporate SaaS styling or unbranded generic templates.",
"Don't clutter views with icon-stuffed bento boxes; let real case file structures and legal workflows lead.",
"Don't use colored or saturated drop shadows under buttons or cards.",
"Don't place the full contact form on the home page."
]
}
}