# Eltérések a Figma-tervhez képest

Figma-fájl: `LegyenNyugta-weboldal` (`36SLf0CFPKyc20c86JdKRv`)
Keretek:
- Főoldal: desktop `19:312`, mobil `241:579`, mobilmenü `273:598`
- Bankkártyás fizetés (`/bankkartyas-fizetes/`): desktop `364:164`, mobil `273:1109`, a fizetési módok blokk állapotai `364:639`, `89:380`, `89:510`
- Kapcsolat (`/kapcsolat/`): desktop `427:1006` (mobil nincs)
- Adatkezelési tájékoztató (`/adatkezelesi-tajekoztato/`): desktop `436:2210` (mobil nincs)
Cél: a fejlesztés során egységesített vagy javított értékek visszavezetése a Figmába.

Jelölés: **Figma → weboldal**

---

## 1. Globális változások

### Színek

| Mit | Figma | Weboldal |
|---|---|---|
| Fekete szövegek | `#000000`, `#090909`, `#010A0F` vegyesen | `#090909` (a GYIK-válaszok és a store gombok maradtak `#010A0F`) |
| Szegélyek | `#000 20%`, `#000 12%`, `#767680 12%`, `#808080 29%`, `#808080 55%` vegyesen | mindenhol fekete 20% (a másodlagos gomb 25%) |
| Oldalháttér | desktop `#F9F9F9`, mobil `#FFFFFF` | mindenhol `#F9F9F9` (a mobilmenü fehér) |

### Lekerekítések (4 szint)

| Szint | Érték | Hol |
|---|---|---|
| Gomb | **10 px** | gombok, ikongombok |
| Címke | **15 px** | árcímkék, mobil összehasonlító sorok |
| Kártya | **20 px** | kártyák, képek, QR-doboz (Figma: 17 px), mobil lépéskártyák (Figma: 15 px) |
| Pill | **30 px** | App Store / Play Store gombok (Figma: 28 px) |

### Tipográfia

- Csak **Outfit**. A store gombokon a Figmában **Rubik** volt → Outfit.
- **Szekciócímek (H2):** mobil 36 / 40 px vegyesen → **40 px**, desktop 36 / 44 px vegyesen → **44 px** (a „GYIK” desktopon 36 px volt, a „Nyugtázz és fogadj el bankkártyás fizetést a telefonoddal” cím mindkét nézetben 36 px).
- **Halvány leírószövegek:** 200 (ExtraLight) és 300 (Light) vegyesen → mindenhol **300**. A 200-as vastagság szürke színnel kis méreten nehezen olvasható.
- A gyors lépések sáv leírása mobilon 12 px → **14 px** (olvashatóság).
- Az „Ingyenes” csomag leírása mobilon 500 → **300**, egyezően a desktoppal.

### Gombok

- Egy közös gombkomponens két méretben: **40 px** (fejléc ikongomb) és **50 px** (minden más).
- A mobil hamburger gomb 38 × 40 px → **40 × 40 px**.

### Térközök

- Szekciók közötti távolság: desktopon **60 px**, mobilon **35 px** (a Figma értékei).
- Tartalomszélesség max. 1140 px, oldalmargó mobilon 20 px, tableten 40 px.

## 2. Tartalom

- Szekciócím: desktop „Kinek ajánljuk?”, mobil „Kinek való?” → mindkettőn **„Kinek ajánljuk?”**.
- Összehasonlító táblázat, mobil: „NYUGTA NYOMTATAVA” → **„Nyugta nyomtatás”** (a desktop szövege); a „Díj” sor nyugtatömb értéke „Nyugtatömb” → **„A nyugtatömb ára”**.
- **GYIK:** a tervben minden válasz nyitva van → alapból mind csukva, és egyszerre csak egy nyitható ki (a ✕ csukott állapotban +).
- **„Ingyen kezdés” gomb, mobil:** a tervben a hero, az árazás, a letöltési sáv, a mobilmenü és a lábléc „Ingyen kezdés” gombot kap → mindenhol a desktop szerint App Store / Play Store gombok és QR-kód (a mobilmenüben csak a store gombok). Mobilon a store gombok egymás alatt vannak, a QR-blokk alattuk; ahol a QR-kód mellett nem fér el a szöveg (árazás, letöltési sáv), ott a kód alá kerül.
- **Lábléc, mobil:** a szlogen mobilon is 20 px.
- Összehasonlító táblázat, desktop: az „Ingyenes” sorból hiányzott a pipa → a többi sorral egyezően **pipával**.
- **Bemutató szekció („Pár érintés, és kész a nyugta!”), videó:** a tervben szürke helyőrző doboz van (mobil 7:8, tablet 16:9, desktop 735:319) → a helyén a teaser videó, a videó saját arányával: mobilon **9:16** (álló változat), 640 px fölött **16:9** (fekvő változat). Desktopon így a doboz magasabb a tervezettnél (kb. 414 px a 319 px helyett).
- **Bemutató szekció, telefon:** egy árcímke helyett **három** (Őstermelő, Kávézó, Fodrász), a badge-es animáció szerinti elrendezésben.
- A QR-kód melletti szövegek magázók („Olvassa be, és kezdhet is Nyugtázni!”), az oldal többi része tegező. Változatlanul hagytuk, de érdemes egységesíteni.

## 3. Bankkártyás fizetés oldal

- **Fizetési módok blokk:** desktopon a kártyára kattintva cserélődik a jobb oldali illusztráció (a három Figma-állapot); mobilon mindhárom kártya a saját illusztrációjával jelenik meg.
- A három állapot keretei eltérő méretűek (1140 / 1240 px széles, 451 / 550 px-es kártyák) → mindhárom az oldalkeret méreteivel (451 + 629 px).
- A kártyák belső margója állapotonként 20 / 25 px → egységesen 25 px.
- Mobilon az illusztrációk mérete kártyánként eltér (318 × 356, 308 × 319, 289 × 303 px) → egységesen a kártya teljes szélessége, azonos képaránnyal.
- Az „Egyéb fizetési módokkal” illusztráció fénye mobilon zöld, desktopon lila → mindkettőn **lila**.
- A „Többek között: Átutalás, QVIK, SZÉP kártya” szöveg színe `#5D5D63` → a többi leíráshoz hasonlóan Text/Secondary.
- A mobil tervben a „GYIK” cím a letöltési sáv fölött van, nem a kérdések fölött → a desktop sorrendje szerint (letöltési sáv, utána GYIK).
- A világoskék sáv (`#F1F7FB`) desktopon 2 px-lel keskenyebb az oldalnál → teljes szélességű.

## 4. Tervben nem szereplő oldalak

- **Kapcsolat (`/kapcsolat/`)** és **404:** a Figmában nincsenek, a `landing-astro` megfelelő oldalai alapján készültek. A Kapcsolat oldalon űrlap nincs, csak az e-mail-cím (hello@legyennyugta.hu, mint az élő oldalon).
- A 404 oldalon nincs GYIK, ezért ott a menü „GYIK” pontja a főoldal GYIK-jéhez visz.

## 5. Nyitott kérdések

- **Hiányzó linkek:** App Store, Play Store, „Itt megvásárolható” (nyomtatók), „Adatkezelési tájékoztató”. Helyük: `src/config/site.ts`.
- **Mobilmenü:** a „Hogyan működik?” és a „Bankkártyás fizetés” mellett lefelé mutató nyíl van, de nincs hozzá almenü a tervben. A nyilak kimaradtak: a „Hogyan működik?” a főoldal lépéseihez, a „Bankkártyás fizetés” a saját oldalára, a „GYIK” az aktuális oldal GYIK-jéhez visz.
- **Videó:** a „Pár érintés…” blokkban a Figmában szürke helykitöltő van; a végleges videóig az marad.
- **QR-kód:** a Figmából exportált kód. Ellenőrizni kell, hogy a végleges letöltési linkre mutat-e.
- **Kontraszt:** a zöld sáv (`#04B593`) fehér címe 2,6:1 kontrasztú, ami a WCAG AA nagy szövegre vonatkozó 3:1-es küszöbét sem éri el.

## 3. Kapcsolat oldal (`427:1006`)

- **Üzenet mező:** a tervben nincs, de a management `new-message` API kötelezőként kéri. A weboldal a vállalkozás nevéből állítja össze („Érdeklődés a kapcsolat oldalról. Vállalkozás neve: …”); a `company_name` és a `source` (`APP_NAME`) külön mezőként is megy.
- **Minden mező kötelező**, a hibaüzenet a mező alatt jelenik meg (a tervben nincs hibaállapot).
- Az űrlapkártya lekerekítése 10 px → **20 px** (kártya szint), a mezőké **15 px** (címke szint, egyezik a tervvel).
- A kártya és a mezők szegélye `#767680 12%` → **fekete 20%**; fókuszban a mező szegélye menta (a tervben 3 px, menta 50%) → **2 px, menta**.
- „Email cím” → **„E-mail-cím”** (helyesírás, a landinggel egyezően).
- Mobil nézet nincs a tervben: a cím 40 px marad, az űrlap teljes szélességű.

## 4. Adatkezelési tájékoztató (`436:2210`)

- „Adószám: 14650079-2-07E-mailinfo@e-team.hu” (hiányzó sortörés) → két sor: **„Adószám: 14650079-2-07”** és **„E-mail: info@e-team.hu”**. Az e-mail-címek kattinthatók (`mailto:`).
- Mobil nézet nincs a tervben: a cím 40 px, a szekciócímek **28 px**, a szekciók között 35 px (desktopon 40 px és 60 px, a terv szerint).
- A szöveg egyébként szó szerint a tervből van, a tartalmi kérdéseket a jogi szöveg gazdájának kell eldöntenie: magázó (az oldal többi része tegező); a jogok listája vegyes nyelvtanú („Hozzáférés kérése…”, „kérheti…”, „Vonja vissza…”); „Az ön jogai” kis „ön”-nel.