303 lines
18 KiB
TypeScript
303 lines
18 KiB
TypeScript
"use client"
|
|
|
|
import Navbar from "@/components/navbar"
|
|
import Hero from "@/components/hero"
|
|
import FeatureSection from "@/components/feature-section"
|
|
import CookieConsent from "@/components/cookie-consent"
|
|
import { Button } from "@/components/ui/button"
|
|
import { useLanguage } from "@/lib/language-context"
|
|
import { Card } from "@/components/ui/card"
|
|
import Link from "next/link"
|
|
import Image from "next/image"
|
|
import { Star, ArrowLeft, Facebook } from "lucide-react"
|
|
|
|
export default function Home() {
|
|
const { t } = useLanguage()
|
|
|
|
return (
|
|
<main className="relative min-h-screen">
|
|
<Navbar darkMode={true} />
|
|
|
|
{/* Background Decorations */}
|
|
<div className="fixed inset-0 pointer-events-none -z-10 overflow-hidden">
|
|
<div className="absolute top-1/4 -left-20 w-96 h-96 bg-purple-200 rounded-full blur-3xl opacity-30 animate-blob" />
|
|
<div className="absolute top-1/2 -right-20 w-80 h-80 bg-blue-200 rounded-full blur-3xl opacity-30 animate-blob animation-delay-2000" />
|
|
<div className="absolute bottom-1/4 left-1/2 -translate-x-1/2 w-[500px] h-[500px] bg-pink-100 rounded-full blur-3xl opacity-20 animate-blob animation-delay-4000" />
|
|
</div>
|
|
|
|
<Hero />
|
|
|
|
{/* Build Section */}
|
|
<FeatureSection
|
|
oversizedTitle={t.features.transfer.oversized}
|
|
title={t.features.transfer.title}
|
|
description={t.features.transfer.description}
|
|
ctaText={t.features.transfer.cta}
|
|
accentColor="text-blue-500"
|
|
href="https://app.skyflytravel.hu/public/offers/new"
|
|
>
|
|
<div className="relative group p-4">
|
|
<div className="absolute inset-0 bg-blue-500/10 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
|
|
<Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl">
|
|
<Image src="/images/airport.jpg" alt="Airport Transfer" fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
|
|
<div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/90 via-black/50 to-transparent pt-32">
|
|
<div className="space-y-2">
|
|
<p className="text-white text-xl font-black uppercase tracking-widest">{t.features.transfer.cardCaption}</p>
|
|
<p className="text-white/80 text-sm font-medium leading-relaxed">{t.features.transfer.cardDescription}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</FeatureSection>
|
|
|
|
{/* Customize Section */}
|
|
<FeatureSection
|
|
oversizedTitle={t.features.packages.oversized}
|
|
title={t.features.packages.title}
|
|
description={t.features.packages.description}
|
|
ctaText={t.features.packages.cta}
|
|
reversed
|
|
accentColor="text-purple-500"
|
|
href="/szolgaltatasok"
|
|
>
|
|
<div className="relative group p-4">
|
|
<div className="absolute inset-0 bg-purple-500/10 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
|
|
<Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl">
|
|
<Image src="/images/family.jpg" alt="Family Packages" fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
|
|
<div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/90 via-black/50 to-transparent pt-32">
|
|
<div className="space-y-2">
|
|
<p className="text-white text-xl font-black uppercase tracking-widest">{t.features.packages.cardCaption}</p>
|
|
<p className="text-white/80 text-sm font-medium leading-relaxed">{t.features.packages.cardDescription}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</FeatureSection>
|
|
|
|
{/* Promote Section */}
|
|
<FeatureSection
|
|
oversizedTitle={t.features.security.oversized}
|
|
title={t.features.security.title}
|
|
description={t.features.security.description}
|
|
accentColor="text-green-500"
|
|
>
|
|
<div className="relative group p-4">
|
|
<div className="absolute inset-0 bg-green-500/10 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
|
|
<Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl">
|
|
<Image src="/images/interior.jpg" alt="Security and Comfort" fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
|
|
<div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/90 via-black/50 to-transparent pt-32">
|
|
<div className="space-y-2">
|
|
<p className="text-white text-xl font-black uppercase tracking-widest">{t.features.security.cardCaption}</p>
|
|
<p className="text-white/80 text-sm font-medium leading-relaxed">{t.features.security.cardDescription}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</FeatureSection>
|
|
|
|
{/* Sell Section */}
|
|
<FeatureSection
|
|
oversizedTitle={t.features.booking.oversized}
|
|
title={t.features.booking.title}
|
|
description={t.features.booking.description}
|
|
ctaText={t.features.booking.cta}
|
|
reversed
|
|
accentColor="text-orange-500"
|
|
href="https://app.skyflytravel.hu/public/offers/new"
|
|
externalLink
|
|
>
|
|
<div className="relative group p-4">
|
|
<div className="absolute inset-0 bg-orange-500/10 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
|
|
<Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl bg-white flex items-center justify-center p-8">
|
|
<div className="text-center space-y-6">
|
|
<div className="w-20 h-20 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto">
|
|
<Star className="w-10 h-10 text-orange-500" />
|
|
</div>
|
|
<h4 className="text-2xl font-black uppercase tracking-tighter">{t.features.booking.cardCaption}</h4>
|
|
<p className="text-slate-500 text-sm font-medium leading-relaxed max-w-xs mx-auto">
|
|
{t.features.booking.cardDescription}
|
|
</p>
|
|
<div className="space-y-2 pt-4">
|
|
<div className="h-2 w-48 bg-slate-100 rounded-full mx-auto" />
|
|
<div className="h-2 w-32 bg-slate-50 rounded-full mx-auto" />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</FeatureSection>
|
|
|
|
{/* Showcase Section */}
|
|
<FeatureSection
|
|
oversizedTitle={t.features.fleet.oversized}
|
|
title={t.features.fleet.title}
|
|
description={t.features.fleet.description}
|
|
ctaText={t.features.fleet.cta}
|
|
accentColor="text-pink-500"
|
|
href="/flotta"
|
|
>
|
|
<div className="relative group p-4">
|
|
<div className="absolute inset-0 bg-pink-500/10 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
|
|
<Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl">
|
|
<Image src="/images/fleet-modern.jpg" alt="Our Fleet" fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
|
|
<div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/90 via-black/50 to-transparent pt-32">
|
|
<div className="space-y-2">
|
|
<p className="text-white text-xl font-black uppercase tracking-widest">{t.features.fleet.cardCaption}</p>
|
|
<p className="text-white/80 text-sm font-medium leading-relaxed">{t.features.fleet.cardDescription}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</FeatureSection>
|
|
|
|
{/* Engage Section */}
|
|
<FeatureSection
|
|
oversizedTitle={t.features.nonstop.oversized}
|
|
title={t.features.nonstop.title}
|
|
description={t.features.nonstop.description}
|
|
reversed
|
|
accentColor="text-cyan-500"
|
|
customCTA={
|
|
<div className="flex flex-wrap gap-6 pt-2">
|
|
<div className="space-y-1">
|
|
<p className="text-[10px] font-black uppercase tracking-widest text-slate-400">{t.contactPage.info.phone}</p>
|
|
<a href="tel:+36305543838" className="text-xl font-black text-white bg-cyan-500 px-4 py-2 rounded-xl inline-block hover:scale-105 transition-transform">+36 30 554 3838</a>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="text-[10px] font-black uppercase tracking-widest text-slate-400">{t.contactPage.info.email}</p>
|
|
<a href="mailto:info@skyflytravel.hu" className="text-lg font-bold text-slate-900 hover:text-cyan-500 transition-colors block italic">info@skyflytravel.hu</a>
|
|
</div>
|
|
</div>
|
|
}
|
|
>
|
|
<div className="relative group p-4">
|
|
<div className="absolute inset-0 bg-cyan-500/10 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
|
|
<Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl">
|
|
<Image src="/images/mercedes.jpg" alt="Non-stop help" fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
|
|
<div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent">
|
|
<p className="text-white text-lg font-bold uppercase tracking-widest">{t.features.nonstop.cardCaption}</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</FeatureSection>
|
|
|
|
{/* Discounts Section */}
|
|
<FeatureSection
|
|
oversizedTitle={t.discounts.oversized}
|
|
title={t.discounts.title}
|
|
description={t.discounts.description}
|
|
accentColor="text-primary"
|
|
customCTA={
|
|
<div className="flex flex-wrap gap-4">
|
|
<Button asChild size="lg" className="rounded-full px-8 h-12 text-xs font-bold uppercase tracking-widest bg-blue-600 text-white hover:bg-blue-700 transition-all shadow-xl">
|
|
<Link href="/akciok/facebook-google">{t.discounts.fbGoogle.title}</Link>
|
|
</Button>
|
|
<Button asChild size="lg" className="rounded-full px-8 h-12 text-xs font-bold uppercase tracking-widest bg-black text-white hover:bg-slate-900 transition-all shadow-xl">
|
|
<Link href="/akciok/tiktok">{t.discounts.tiktok.title}</Link>
|
|
</Button>
|
|
</div>
|
|
}
|
|
>
|
|
<div className="relative group p-4">
|
|
<div className="absolute inset-0 bg-primary/20 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
|
|
<Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl bg-slate-900">
|
|
<Image src="/images/discounts_bg.png" alt="Special Discounts" fill className="object-cover opacity-50 group-hover:opacity-70 transition-all duration-700 blur-[2px] group-hover:blur-0" />
|
|
|
|
<div className="absolute inset-0 p-8 flex flex-col justify-center space-y-4">
|
|
<div className="bg-white/95 backdrop-blur-xl p-6 rounded-3xl shadow-2xl transform transition-all duration-500 hover:-translate-y-2">
|
|
<div className="flex items-center gap-4 mb-3">
|
|
<div className="bg-blue-600 p-2 rounded-lg"><Facebook className="w-4 h-4 text-white" /></div>
|
|
<h4 className="font-black text-slate-900 text-sm uppercase">{t.discounts.fbGoogle.title}</h4>
|
|
</div>
|
|
<p className="text-slate-500 text-xs font-medium mb-4">{t.discounts.fbGoogle.desc}</p>
|
|
<Link href="/akciok/facebook-google" className="text-[10px] font-black text-primary uppercase tracking-widest hover:gap-3 flex items-center gap-2 group/link transition-all">
|
|
{t.discounts.fbGoogle.cta} <ArrowLeft className="w-3 h-3 rotate-180" />
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="bg-white/95 backdrop-blur-xl p-6 rounded-3xl shadow-2xl transform transition-all duration-500 hover:-translate-y-2">
|
|
<div className="flex items-center gap-4 mb-3">
|
|
<div className="bg-black p-2 rounded-lg">
|
|
<svg viewBox="0 0 24 24" className="w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg"><path d="M12.525.02c1.31-.036 2.612-.01 3.91-.01.1.993.414 1.956.96 2.784.73 1.096 1.764 1.93 2.97 2.45v3.91c-.815-.09-1.62-.315-2.38-.64-.816-.35-1.545-.88-2.15-1.53-.102.043-.102.164-.102.26v9.06c0 1.54-.34 3.05-1 4.41-.65 1.35-1.63 2.5-2.83 3.33-1.4.95-3.08 1.45-4.79 1.45-1.68 0-3.32-.48-4.73-1.39-1.21-.79-2.2-1.9-2.86-3.21-.71-1.37-1.07-2.9-1.07-4.47s.36-3.1 1.07-4.47c.66-1.31 1.65-2.42 2.86-3.21 1.25-.8 2.69-1.23 4.18-1.25.102 0 .204-.006.307-.006v3.94c-.037-.006-.074-.012-.112-.012-1.25.038-2.44.57-3.31 1.49-.89.92-1.38 2.16-1.38 3.45 0 1.29.49 2.53 1.38 3.45.87.92 2.06 1.45 3.31 1.49 1.25-.038 2.44-.57 3.31-1.49.89-.92 1.38-2.16 1.38-3.45V0l.024.02z" /></svg>
|
|
</div>
|
|
<h4 className="font-black text-slate-900 text-sm uppercase">{t.discounts.tiktok.title}</h4>
|
|
</div>
|
|
<p className="text-slate-500 text-xs font-medium mb-4">{t.discounts.tiktok.desc}</p>
|
|
<Link href="/akciok/tiktok" className="text-[10px] font-black text-primary uppercase tracking-widest hover:gap-3 flex items-center gap-2 group/link transition-all">
|
|
{t.discounts.tiktok.cta} <ArrowLeft className="w-3 h-3 rotate-180" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</FeatureSection>
|
|
|
|
{/* SEO Optimized Content Section - Full Width */}
|
|
<section className="py-12 md:py-16 bg-white">
|
|
<div className="max-w-4xl mx-auto px-6">
|
|
<div className="space-y-12">
|
|
<div className="text-center">
|
|
<h2 className="text-[10px] font-black uppercase tracking-[0.5em] text-primary mb-6">SkyFly Travel</h2>
|
|
<h3 className="text-4xl md:text-7xl font-black uppercase tracking-tighter leading-tight text-slate-900">
|
|
{t.contactPage.seo.title}
|
|
</h3>
|
|
<p className="text-xl md:text-2xl font-bold text-primary italic mt-4">
|
|
{t.contactPage.seo.subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-8">
|
|
{t.contactPage.seo.content.map((paragraph: string, idx: number) => (
|
|
<p key={idx} className="text-slate-500 leading-relaxed font-medium text-lg md:text-xl text-center md:text-left">
|
|
{paragraph}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer / Final CTA */}
|
|
<section className="py-16 md:py-20 bg-slate-950 text-white text-center">
|
|
<div className="max-w-4xl mx-auto px-6 space-y-12">
|
|
<h2 className="text-4xl md:text-6xl font-black tracking-tighter uppercase">{t.footer.ready}</h2>
|
|
<p className="text-xl text-slate-400 max-w-xl mx-auto">
|
|
{t.footer.description}
|
|
</p>
|
|
<div className="flex justify-center gap-6">
|
|
<Button size="lg" asChild className="rounded-full px-12 h-14 text-sm font-bold uppercase tracking-widest bg-primary hover:bg-primary/90 transition-all shadow-2xl">
|
|
<a href="https://app.skyflytravel.hu/public/offers/new" target="_blank" rel="noopener noreferrer">
|
|
{t.footer.cta}
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
<div className="pt-12 border-t border-white/5 space-y-6">
|
|
<div className="flex flex-wrap justify-center gap-x-8 gap-y-2 text-slate-400 text-xs font-bold uppercase tracking-widest">
|
|
<a href="/docs/impresszum.pdf" target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
|
|
{t.footer.impressum}
|
|
</a>
|
|
<a href="/docs/ADATVEDELEMI_SZABALYZAT_ZT.pdf" target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
|
|
{t.footer.privacy}
|
|
</a>
|
|
</div>
|
|
<div className="text-slate-600 text-[10px] font-bold uppercase tracking-widest">
|
|
© 2026 SkyFly Travel. {t.footer.rights}
|
|
</div>
|
|
<div className="text-slate-900/10 text-[8px] leading-tight select-none">
|
|
reptéri transzfer, transzfer Győr, Budapest, Bécs Schwechat, Pozsony - airport Shuttle - Airport taxi - Reptéri járatok - Repülőtéri transzfer - Budapest reptér - Pozsony repter - Bécs reptér (Vienna Airport) - Transfer Budapest airport - Transfer Vienna Airport Budapest Liszt Ferenc Ferihegy
|
|
</div>
|
|
<div className="flex justify-center gap-4 text-slate-800 text-[9px] font-bold uppercase tracking-widest pt-2">
|
|
<a href="https://transzfer.lap.hu" target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">transzfer.lap.hu</a>
|
|
<span className="opacity-20">|</span>
|
|
<a href="https://utasszallitas.lap.hu" target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">utasszallitas.lap.hu</a>
|
|
<span className="opacity-20">|</span>
|
|
<a href="https://repuloter.lap.hu" target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">repuloter.lap.hu</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<CookieConsent />
|
|
</main>
|
|
)
|
|
}
|