diff --git a/DESIGN_GUIDE.md b/DESIGN_GUIDE.md new file mode 100644 index 0000000..cf5ffc6 --- /dev/null +++ b/DESIGN_GUIDE.md @@ -0,0 +1,92 @@ +# 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` + diff --git a/app/akciok/facebook-google/page.tsx b/app/akciok/facebook-google/page.tsx index bac2c2b..fdea5b8 100644 --- a/app/akciok/facebook-google/page.tsx +++ b/app/akciok/facebook-google/page.tsx @@ -6,7 +6,6 @@ import { ArrowLeft, Facebook, Star, CheckCircle2 } from "lucide-react" import Link from "next/link" import Image from "next/image" import { useLanguage } from "@/lib/language-context" -import { motion } from "framer-motion" export default function FacebookGoogleDiscountPage() { const { t } = useLanguage() @@ -25,7 +24,7 @@ export default function FacebookGoogleDiscountPage() {
+@@ -70,7 +70,7 @@ export default function TikTokDiscountPage() { className="inline-flex items-center gap-2 bg-black text-white px-10 py-5 rounded-full font-bold hover:bg-slate-900 transition-colors shadow-2xl" > - TikTok Oldal Megnyitása + {t.discounts.pages.tiktok.openPage}- @skyflytravel.transfer + {t.common.tiktokHandle}
0-3
-Éves átlagéletkor
+{t.fleetPage.stats.ageValue}
+{t.fleetPage.stats.ageLabel}
100%
-Tisztasági garancia
+{t.fleetPage.stats.cleanlinessValue}
+{t.fleetPage.stats.cleanlinessLabel}
24/7
-Műszaki felügyelet
+{t.fleetPage.stats.maintenanceValue}
+{t.fleetPage.stats.maintenanceLabel}
{t.features.transfer.cardCaption}
@@ -64,7 +70,13 @@ export default function Home() {{t.features.packages.cardCaption}
@@ -85,7 +97,13 @@ export default function Home() {{t.features.security.cardCaption}
@@ -139,7 +157,13 @@ export default function Home() {{t.features.fleet.cardCaption}
@@ -161,11 +185,11 @@ export default function Home() {{t.features.nonstop.cardCaption}
Hotline 0-24
-+36 30 554 3838
+{t.contactPage.info.hotlineShort}
+{t.common.phone}
{t.contactPage.form.success}
@@ -157,7 +166,7 @@ export default function ContactForm() { variant="outline" className="mt-8 rounded-full px-8" > - Új üzenet küldése + {t.contactPage.form.successAction} ) @@ -177,7 +186,7 @@ export default function ContactForm() { name="name" value={formData.name} onChange={handleChange} - placeholder="Pl. Kovács János" + placeholder={t.contactPage.form.placeholders.name} className="rounded-2xl h-14 bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all" />- Weboldalunk sütiket használ a jobb felhasználói élmény érdekében. - Az "Elfogadom" gombra kattintva hozzájárul ezek használatához. + {t.cookie.description}