93 lines
3.8 KiB
Markdown
93 lines
3.8 KiB
Markdown
# 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`
|
||
|