# SkyFly Travel – Design Guide (Home + Arak)

Ez a rovid design guide a fooldal (`app/page.tsx`) es az arak oldal (`app/arak/page.tsx`) vizualis es interakcios mintai alapjan keszult. Cél: a jelenlegi, karakteres, premium-energiat uto UI kovetkezetes tovabbvitelee.

## 1) Brand hangulat es irany
- **Tone**: premium, energikus, editorial; eros tipografia, nagy lelegzetu spacing.
- **Vizualis nyelv**: nagy, lekerekitett feluletek; kontrasztos feny-arnyek; elmosott, szines hatterfoltok (blobok).
- **Kiemeles**: uppercase, tracking-heavy szovegek; feltuno akcent szinek.

## 2) Tipografia
- **Cimek**: extra bold / black, uppercase, tracking-tighter, nagy meretek (5xl–9xl).
- **Feliratok / cimkek**: nagyon kicsi meret (9–12px), uppercase, tracking-widest/extra, font-black.
- **Torzs**: medium/bold, 16–20px, nagyobb line-height, diszkrét szin (slate-500).
- **Stilus minta**:
  - H1: `font-black uppercase tracking-tighter leading-none`
  - Kiemelt cimke: `text-[10px] font-black uppercase tracking-[0.3em]`

## 3) Szinek es paletta
**Alap**:
- Feher es nagyon vilagos szurke (bg-white, bg-slate-50).
- Szoveg: slate-900 / slate-500.

**Akcent**:
- `primary` (CTA, highlight), `secondary` (pricing hero szekund). A pontos token ertekek a theme-ben vannak.
- Home blobok: purple-200, blue-200, pink-100 (lattomos, atmoszferikus hatter).
- Pricing hero: #D9A321 → #1A1A1A (eros, markans diagonal gradient).

**Hasznalat**:
- Akcent szint ritka, de eros. CTA es fontos tag-ek kapjak.
- Feher felulet + diszkrét arnyek a legtobb cardnal.

## 4) Elrendezes es spacing
- **Tartalmi szelesseg**: `max-w-7xl` (alap), specialis blokknal `max-w-4xl/5xl`.
- **Section spacing**: nagy vertikalis ritmus (py-16–32, pt-32–40).
- **Grid**: 2-os oszlop (md), nagy gap-ek (8–16).
- **Aszimmetria**: a hero/reszletek feluletei nagy, elmasolt radiusokkal, blur overlayekkel.

## 5) Komponens mintak
**Cardok**
- Radius: 2rem–3.5rem, gyakran 3rem+.
- Shadow: eros, nagy blur (shadow-2xl, custom shadow).
- Tartalom: kep + gradient overlay + felso/belso label strip.
- Hover: scale (image), translate (card), arnyek noveles.

**CTA / Button**
- Alak: `rounded-full`, ero uppercase, tracking-widest.
- Szinek: primary, fekete, vagy kieg akcent.
- Hover: sotetites vagy subtle scale.

**Route chip**
- Kis pill, `uppercase tracking-widest`, border + shadow-sm, hover: primary border/szin.

**Hero (Pricing)**
- Teljes szelesseg, diagonal gradient, alul “skew” elvalaszto.
- Subheadline: `text-white/70` hosszu sorok, medium font.

**Info Banner**
- Feher card, nagy radius, icon bubble, CTA a jobb oldalon.

**Footer CTA**
- Sotet hatter (slate-900), glow blob a sarokban, erosen tipografalt contact CTA-k.

## 6) Motion es interakcio
- **Global**: `animate-blob` hatterfoltok (lassu, dekorativ).
- **Hover**: image scale 1.05–1.1; card -translate-y.
- **Stagger**: a home page szekciok csendes, de kovetkezetes hover efektusai.
- **Idozites**: 300–700ms tartomany, ease-out.

## 7) Kepkezeles
- Kepek: nagy, full-bleed, `object-cover`, helyenkent blur+opacity.
- Alul gradient a szoveg olvashatosagert.
- Keretezes: nincs klasszikus keret, csak shadow es radius.

## 8) Do / Don’t
**Do**
- Hasznalj nagy radiusokat es bator tipografiat.
- Hagyd levegot: nagy paddingek, nagy gap-ek.
- Akcent szint sparingly, de latvanyosan.

**Don’t**
- Ne hasznalj unalmas, alaptipust es kicsi spacinget.
- Ne keverd tul sok akcent szint egy blokkban.
- Ne csokkentsd a hero es card mereteket, mert elveszik a premium hatas.

## 9) Gyors vizualis token lista (kovetendo)
- `rounded-[2rem]`, `rounded-[3rem]`, `rounded-[3.5rem]`
- `shadow-2xl`, `shadow-xl`, custom large shadow
- `text-[10px] font-black uppercase tracking-[0.3em]`
- `bg-white`, `bg-slate-50`, `text-slate-900`, `text-slate-500`
- `bg-primary`, `text-primary`, `text-secondary`
- `animate-blob`, `blur-3xl`, `opacity-20/30`