skyflytravel.hu/DESIGN_GUIDE.md

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