first commit
This commit is contained in:
Bognar
commit
363d4b1e9e
|
|
@ -0,0 +1,41 @@
|
||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.*
|
||||||
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# env files (can opt-in for committing if needed)
|
||||||
|
.env*
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
First, run the development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
# or
|
||||||
|
yarn dev
|
||||||
|
# or
|
||||||
|
pnpm dev
|
||||||
|
# or
|
||||||
|
bun dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||||
|
|
||||||
|
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||||
|
|
||||||
|
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||||
|
|
||||||
|
## Learn More
|
||||||
|
|
||||||
|
To learn more about Next.js, take a look at the following resources:
|
||||||
|
|
||||||
|
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||||
|
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||||
|
|
||||||
|
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||||
|
|
||||||
|
## Deploy on Vercel
|
||||||
|
|
||||||
|
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||||
|
|
||||||
|
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||||
|
|
@ -0,0 +1,129 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import Navbar from "@/components/navbar"
|
||||||
|
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()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="relative min-h-screen bg-slate-50">
|
||||||
|
<Navbar darkMode={true} />
|
||||||
|
|
||||||
|
{/* Header Section */}
|
||||||
|
<section className="relative pt-40 pb-20 overflow-hidden bg-slate-900">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-600/20 to-purple-600/20 -z-10" />
|
||||||
|
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
||||||
|
<Link href="/" className="inline-flex items-center text-white/70 hover:text-white mb-10 transition-colors group">
|
||||||
|
<ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" />
|
||||||
|
<span className="text-xs font-bold uppercase tracking-widest">{t.discounts.pages.fbGoogle.title}</span>
|
||||||
|
</Link>
|
||||||
|
<h1 className="text-5xl md:text-7xl font-black text-white uppercase tracking-tighter leading-none mb-6">
|
||||||
|
{t.discounts.fbGoogle.title} <br />
|
||||||
|
<span className="text-primary italic">Kedvezmény</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="py-24">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
||||||
|
{/* Facebook Section */}
|
||||||
|
<div className="space-y-12">
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-blue-600 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-600/20">
|
||||||
|
<Facebook className="text-white w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl font-black text-slate-900 uppercase tracking-tight">{t.discounts.pages.fbGoogle.fbTitle}</h2>
|
||||||
|
</div>
|
||||||
|
<ul className="space-y-4">
|
||||||
|
{t.discounts.pages.fbGoogle.fbSteps.map((step: string, idx: number) => (
|
||||||
|
<li key={idx} className="flex items-start gap-3 text-slate-600 font-medium">
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-1 shrink-0" />
|
||||||
|
<span>{step}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<div className="pt-4">
|
||||||
|
<a
|
||||||
|
href="https://www.facebook.com/airporttransfer.gyor"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-2 bg-blue-600 text-white px-8 py-4 rounded-full font-bold hover:bg-blue-700 transition-colors shadow-xl shadow-blue-600/20"
|
||||||
|
>
|
||||||
|
<Facebook className="w-5 h-5" />
|
||||||
|
Facebook Oldal Megnyitása
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h3 className="text-xl font-bold text-slate-900">{t.discounts.pages.fbGoogle.helperText}</h3>
|
||||||
|
<div className="relative aspect-video rounded-3xl overflow-hidden shadow-2xl border border-slate-200">
|
||||||
|
<Image
|
||||||
|
src="/images/SkyFlyFBLike.gif"
|
||||||
|
alt="Facebook Like Help"
|
||||||
|
fill
|
||||||
|
className="object-contain bg-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Google Section */}
|
||||||
|
<div className="space-y-12">
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-lg border border-slate-100">
|
||||||
|
<Star className="text-yellow-500 w-6 h-6 fill-yellow-500" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl font-black text-slate-900 uppercase tracking-tight">{t.discounts.pages.fbGoogle.googleTitle}</h2>
|
||||||
|
</div>
|
||||||
|
<ul className="space-y-4">
|
||||||
|
{t.discounts.pages.fbGoogle.googleSteps.map((step: string, idx: number) => (
|
||||||
|
<li key={idx} className="flex items-start gap-3 text-slate-600 font-medium">
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-yellow-500 mt-1 shrink-0" />
|
||||||
|
<span>{step}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<div className="pt-4">
|
||||||
|
<a
|
||||||
|
href="https://g.page/r/CRltVP4lAy7lEBM/review"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-2 bg-white text-slate-900 border border-slate-200 px-8 py-4 rounded-full font-bold hover:bg-slate-50 transition-colors shadow-lg"
|
||||||
|
>
|
||||||
|
<Star className="w-5 h-5 text-yellow-500 fill-yellow-500" />
|
||||||
|
Google Értékelés Írása
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h3 className="text-xl font-bold text-slate-900">Facebook:</h3>
|
||||||
|
<div className="rounded-3xl overflow-hidden shadow-2xl border border-slate-200 bg-white p-4">
|
||||||
|
<iframe
|
||||||
|
src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fairporttransfer.gyor&tabs=timeline&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
|
||||||
|
width="100%"
|
||||||
|
height="500"
|
||||||
|
style={{ border: 'none', overflow: 'hidden' }}
|
||||||
|
scrolling="no"
|
||||||
|
frameBorder="0"
|
||||||
|
allowFullScreen={true}
|
||||||
|
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import Navbar from "@/components/navbar"
|
||||||
|
import { ArrowLeft, CheckCircle2 } from "lucide-react"
|
||||||
|
import Link from "next/link"
|
||||||
|
import Script from "next/script"
|
||||||
|
import { useLanguage } from "@/lib/language-context"
|
||||||
|
import { motion } from "framer-motion"
|
||||||
|
|
||||||
|
export default function TikTokDiscountPage() {
|
||||||
|
const { t } = useLanguage()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="relative min-h-screen bg-slate-50">
|
||||||
|
<Navbar darkMode={true} />
|
||||||
|
|
||||||
|
{/* Header Section */}
|
||||||
|
<section className="relative pt-40 pb-20 overflow-hidden bg-black">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-pink-600/20 to-cyan-400/20 -z-10" />
|
||||||
|
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
||||||
|
<Link href="/" className="inline-flex items-center text-white/70 hover:text-white mb-10 transition-colors group">
|
||||||
|
<ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" />
|
||||||
|
<span className="text-xs font-bold uppercase tracking-widest">{t.discounts.pages.tiktok.title}</span>
|
||||||
|
</Link>
|
||||||
|
<h1 className="text-5xl md:text-7xl font-black text-white uppercase tracking-tighter leading-none mb-6">
|
||||||
|
TikTok <br />
|
||||||
|
<span className="text-primary italic">Kedvezmény</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="py-24">
|
||||||
|
<div className="max-w-4xl mx-auto px-6">
|
||||||
|
<div className="bg-white rounded-[3rem] p-10 md:p-16 shadow-2xl border border-slate-100 space-y-12">
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-black rounded-2xl flex items-center justify-center shadow-lg">
|
||||||
|
<svg viewBox="0 0 24 24" className="w-6 h-6 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>
|
||||||
|
<h2 className="text-3xl font-black text-slate-900 uppercase tracking-tight">Kedvezmény igénylése</h2>
|
||||||
|
</div>
|
||||||
|
<ul className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{t.discounts.pages.tiktok.steps.map((step: string, idx: number) => (
|
||||||
|
<li key={idx} className="flex items-start gap-3 p-6 bg-slate-50 rounded-2xl border border-slate-100 text-slate-700 font-bold group hover:border-primary/30 transition-colors">
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-primary mt-1 shrink-0" />
|
||||||
|
<span>{step}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-8 pt-8 border-t border-slate-100 text-center">
|
||||||
|
<h3 className="text-2xl font-black text-slate-900 uppercase tracking-tight">{t.discounts.pages.tiktok.videoTitle}</h3>
|
||||||
|
<div className="relative mx-auto max-w-[325px] aspect-[9/16] rounded-3xl overflow-hidden shadow-2xl border border-slate-200 bg-black">
|
||||||
|
<blockquote className="tiktok-embed" cite="https://www.tiktok.com/@skyflytravel.transfer/video/7595495377424370966" data-video-id="7595495377424370966" style={{ maxWidth: '605px', minWidth: '325px' }}>
|
||||||
|
<section>
|
||||||
|
<a target="_blank" title="@skyflytravel.transfer" href="https://www.tiktok.com/@skyflytravel.transfer?refer=embed">@skyflytravel.transfer</a>
|
||||||
|
</section>
|
||||||
|
</blockquote>
|
||||||
|
<Script async src="https://www.tiktok.com/embed.js"></Script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-10 flex justify-center">
|
||||||
|
<a
|
||||||
|
href="https://www.tiktok.com/@skyflytravel.transfer"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<svg viewBox="0 0 24 24" className="w-5 h-5 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>
|
||||||
|
TikTok Oldal Megnyitása
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
import { NextResponse } from "next/server"
|
||||||
|
import nodemailer from "nodemailer"
|
||||||
|
|
||||||
|
export async function POST(req: Request) {
|
||||||
|
try {
|
||||||
|
const body = await req.json()
|
||||||
|
const { name, email, phone, service, message, recaptcha } = body
|
||||||
|
|
||||||
|
// 1. Verify reCaptcha
|
||||||
|
const recaptchaResponse = await fetch(
|
||||||
|
`https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RECAPTCHA_SECRET_KEY}&response=${recaptcha}`,
|
||||||
|
{ method: "POST" }
|
||||||
|
)
|
||||||
|
const recaptchaData = await recaptchaResponse.json()
|
||||||
|
|
||||||
|
// For local testing without secret key, we might skip this
|
||||||
|
if (process.env.RECAPTCHA_SECRET_KEY && !recaptchaData.success) {
|
||||||
|
return NextResponse.json({ error: "reCaptcha verification failed" }, { status: 400 })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Configure Nodemailer
|
||||||
|
// NOTE: In a real environment, you'd use your SMTP credentials (Gmail, SendGrid, etc.)
|
||||||
|
const transporter = nodemailer.createTransport({
|
||||||
|
host: process.env.SMTP_HOST || "smtp.gmail.com",
|
||||||
|
port: Number(process.env.SMTP_PORT) || 587,
|
||||||
|
secure: false,
|
||||||
|
auth: {
|
||||||
|
user: process.env.SMTP_USER,
|
||||||
|
pass: process.env.SMTP_PASS,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// 3. Create HTML Email
|
||||||
|
const htmlEmail = `
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Inter', sans-serif; line-height: 1.6; color: #1a1a1a; margin: 0; padding: 0; }
|
||||||
|
.container { max-width: 600px; margin: 40px auto; border: 1px solid #e2e8f0; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
|
||||||
|
.header { background-color: #D9A321; background: linear-gradient(135deg, #D9A321 0%, #1A1A1A 100%); color: white; padding: 40px; text-align: center; }
|
||||||
|
.header h1 { margin: 0; font-size: 24px; text-transform: uppercase; letter-spacing: 2px; }
|
||||||
|
.content { padding: 40px; background-color: #ffffff; }
|
||||||
|
.field { margin-bottom: 24px; }
|
||||||
|
.label { font-weight: 800; font-size: 12px; text-transform: uppercase; color: #D9A321; display: block; margin-bottom: 4px; }
|
||||||
|
.value { font-size: 16px; color: #1e293b; background: #f8fafc; padding: 12px 16px; border-radius: 12px; border: 1px solid #f1f5f9; }
|
||||||
|
.footer { background-color: #f8fafc; padding: 20px; text-align: center; font-size: 12px; color: #64748b; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div className="container">
|
||||||
|
<div className="header">
|
||||||
|
<h1>Új üzenet érkezett</h1>
|
||||||
|
</div>
|
||||||
|
<div className="content">
|
||||||
|
<div className="field">
|
||||||
|
<span className="label">Név</span>
|
||||||
|
<div className="value">${name}</div>
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<span className="label">Email</span>
|
||||||
|
<div className="value">${email}</div>
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<span className="label">Telefonszám</span>
|
||||||
|
<div className="value">${phone || "-"}</div>
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<span className="label">Szolgáltatás típusa</span>
|
||||||
|
<div className="value">${service}</div>
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<span className="label">Üzenet</span>
|
||||||
|
<div className="value" style="white-space: pre-wrap;">${message}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="footer">
|
||||||
|
© 2026 SkyFly Travel Landing Page System
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`
|
||||||
|
|
||||||
|
// 4. Send Email
|
||||||
|
await transporter.sendMail({
|
||||||
|
from: `"SkyFly Web" <${process.env.SMTP_USER}>`,
|
||||||
|
to: "bognar.szialrd83@gmail.com",
|
||||||
|
subject: `Weboldal Üzenet: ${name} (${service})`,
|
||||||
|
html: htmlEmail,
|
||||||
|
})
|
||||||
|
|
||||||
|
return NextResponse.json({ success: true })
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Email error:", error)
|
||||||
|
return NextResponse.json({ error: "Failed to send email" }, { status: 500 })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,196 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import Navbar from "@/components/navbar"
|
||||||
|
import PricingTable from "@/components/pricing-table"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Card } from "@/components/ui/card"
|
||||||
|
import { ArrowLeft, Phone, Mail, Clock, Shield, MapPin } from "lucide-react"
|
||||||
|
import Link from "next/link"
|
||||||
|
import { useLanguage } from "@/lib/language-context"
|
||||||
|
|
||||||
|
const becsRows = [
|
||||||
|
{ persons: "1 pax / 1 way", express: "16.000 HUF", private: "29.000 HUF" },
|
||||||
|
{ persons: "2 pax / 1 way", express: "23.500 HUF", private: "29.000 HUF" },
|
||||||
|
{ persons: "3 pax / 1 way", express: "26.500 HUF", private: "29.000 HUF" },
|
||||||
|
{ persons: "4 pax / 1 way", express: "31.000 HUF", private: "35.000 HUF" },
|
||||||
|
{ persons: "5-6 pax / 1 way", express: "33.000 HUF", private: "37.500 HUF" },
|
||||||
|
{ persons: "7-8 pax / 1 way", express: "35.000 HUF", private: "39.000 HUF" },
|
||||||
|
]
|
||||||
|
|
||||||
|
const budapestRows = [
|
||||||
|
{ persons: "1 pax / 1 way", express: "22.000 HUF", private: "38.000 HUF" },
|
||||||
|
{ persons: "2 pax / 1 way", express: "28.000 HUF", private: "38.000 HUF" },
|
||||||
|
{ persons: "3 pax / 1 way", express: "33.000 HUF", private: "38.000 HUF" },
|
||||||
|
{ persons: "4 pax / 1 way", express: "38.000 HUF", private: "45.000 HUF" },
|
||||||
|
{ persons: "5-6 pax / 1 way", express: "42.000 HUF", private: "50.000 HUF" },
|
||||||
|
{ persons: "7-8 pax / 1 way", express: "45.000 HUF", private: "52.000 HUF" },
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function PricingPage() {
|
||||||
|
const { language, t } = useLanguage()
|
||||||
|
|
||||||
|
// Dynamic passenger text
|
||||||
|
const getFaresHub = (rows: any[]) => {
|
||||||
|
return rows.map(r => ({
|
||||||
|
...r,
|
||||||
|
persons: language === "hu" ? r.persons.replace("pax", "fő").replace("way", "út") : r.persons
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
const specials = [
|
||||||
|
{
|
||||||
|
name: language === "hu" ? "Családi csomag" : "Family package",
|
||||||
|
price: "33.000 HUF",
|
||||||
|
description: language === "hu"
|
||||||
|
? "max. 4 fő, min. 1 gyermek (0-14 éves), private transzfer, max. 3 normál és 3 kézi poggyász (Teljesítés: személygépjárművel)"
|
||||||
|
: "max. 4 pax, min. 1 child (0-14 yrs), private transfer, max. 3 standard and 3 hand luggage (Performed by passenger car)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: language === "hu" ? "„Nagy” családi csomag" : "„Large” family package",
|
||||||
|
price: "36.000 HUF",
|
||||||
|
description: language === "hu"
|
||||||
|
? "max. 6 fő, min. 1 gyermek (0-14 éves), private transzfer, max. 6 normál és 6 kézi poggyász (Teljesítés: kisbusszal)"
|
||||||
|
: "max. 6 pax, min. 1 child (0-14 yrs), private transfer, max. 6 standard and 6 hand luggage (Performed by minibus)"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const vipInfo = language === "hu"
|
||||||
|
? ["1-3 fő (Mercedes E-class): 40.000 Ft", "4-6 fő (Mercedes Vito / Ford Tourneo Custom): 50.000 Ft"]
|
||||||
|
: ["1-3 pax (Mercedes E-class): 40.000 Ft", "4-6 pax (Mercedes Vito / Ford Tourneo Custom): 50.000 Ft"]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="relative min-h-screen bg-slate-50">
|
||||||
|
<Navbar darkMode={true} />
|
||||||
|
|
||||||
|
{/* Background Decorations matching Home page */}
|
||||||
|
<div className="fixed inset-0 pointer-events-none -z-10 overflow-hidden">
|
||||||
|
<div className="absolute top-1/4 -right-20 w-96 h-96 bg-purple-100 rounded-full blur-3xl opacity-30 animate-blob" />
|
||||||
|
<div className="absolute top-1/2 -left-20 w-80 h-80 bg-blue-100 rounded-full blur-3xl opacity-30 animate-blob animation-delay-2000" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Header Section */}
|
||||||
|
<section className="relative pt-40 pb-32 overflow-hidden bg-[#D9A321]">
|
||||||
|
{/* Background gradient covers full section now */}
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-diagonal opacity-100 -z-10"
|
||||||
|
style={{ background: 'linear-gradient(135deg, #D9A321 0%, #1A1A1A 100%)' }}
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-0 left-0 w-full h-[100px] bg-slate-50 transform -skew-y-3 origin-bottom-left -z-10" />
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
||||||
|
<Link href="/" className="inline-flex items-center text-white/70 hover:text-white mb-10 transition-colors group">
|
||||||
|
<div className="bg-white/10 p-2 rounded-full mr-3 group-hover:bg-white/20 transition-colors">
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-bold tracking-[0.2em] uppercase">{t.pricing.back}</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h1 className="text-5xl md:text-8xl font-black text-white tracking-tighter leading-none">
|
||||||
|
{t.pricing.title} <br />
|
||||||
|
<span className="text-secondary/40 italic">{t.pricing.titleAccent}</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-white/70 max-w-2xl leading-relaxed font-medium">
|
||||||
|
{t.pricing.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Pricing Content */}
|
||||||
|
<section className="py-16">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
{/* Info Banner */}
|
||||||
|
<Card className="p-6 mb-16 bg-white border-blue-100 shadow-xl rounded-[2rem] flex flex-col md:flex-row gap-8 items-center">
|
||||||
|
<div className="bg-primary/10 p-4 rounded-2xl">
|
||||||
|
<Clock className="w-8 h-8 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="font-extrabold text-blue-950 uppercase tracking-tight mb-1">{t.pricing.banner.title}</h3>
|
||||||
|
<p className="text-slate-500 text-sm leading-relaxed">
|
||||||
|
{t.pricing.banner.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button asChild className="rounded-full px-8 h-12 bg-primary hover:bg-primary/90 text-sm font-bold tracking-widest uppercase">
|
||||||
|
<a href="https://app.skyflytravel.hu/public/offers/new" target="_blank" rel="noopener noreferrer">
|
||||||
|
{t.nav.cta}
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Tables */}
|
||||||
|
<PricingTable
|
||||||
|
route={language === "hu" ? "GYŐR – BÉCS REPTÉR (SCHWECHAT) vagy BÉCS REPTÉR - GYŐR" : "GYŐR – VIENNA AIRPORT (SCHWECHAT) or VIENNA AIRPORT - GYŐR"}
|
||||||
|
rows={getFaresHub(becsRows)}
|
||||||
|
specials={specials}
|
||||||
|
vipInfo={vipInfo}
|
||||||
|
effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<PricingTable
|
||||||
|
route={language === "hu" ? "GYŐR – BUDAPEST REPTÉR vagy BUDAPEST REPTÉR - GYŐR" : "GYŐR – BUDAPEST AIRPORT or BUDAPEST AIRPORT - GYŐR"}
|
||||||
|
rows={getFaresHub(budapestRows)}
|
||||||
|
specials={specials}
|
||||||
|
vipInfo={vipInfo}
|
||||||
|
effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Additional Info Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-24">
|
||||||
|
<Card className="p-8 rounded-[2rem] border-none shadow-lg bg-white group hover:-translate-y-2 transition-all duration-300">
|
||||||
|
<div className="bg-green-50 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-green-500 transition-colors duration-300">
|
||||||
|
<Shield className="w-8 h-8 text-green-500 group-hover:text-white transition-colors duration-300" />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-extrabold text-slate-900 text-xl mb-3 uppercase tracking-tight">{t.pricing.extra.security.title}</h4>
|
||||||
|
<p className="text-slate-500 text-sm leading-relaxed">
|
||||||
|
{t.pricing.extra.security.desc}
|
||||||
|
</p>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="p-8 rounded-[2rem] border-none shadow-lg bg-white group hover:-translate-y-2 transition-all duration-300">
|
||||||
|
<div className="bg-blue-50 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-blue-500 transition-colors duration-300">
|
||||||
|
<MapPin className="w-8 h-8 text-blue-500 group-hover:text-white transition-colors duration-300" />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-extrabold text-slate-900 text-xl mb-3 uppercase tracking-tight">{t.pricing.extra.addresses.title}</h4>
|
||||||
|
<p className="text-slate-500 text-sm leading-relaxed">
|
||||||
|
{t.pricing.extra.addresses.desc}
|
||||||
|
</p>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="p-8 rounded-[2rem] border-none shadow-lg bg-white group hover:-translate-y-2 transition-all duration-300">
|
||||||
|
<div className="bg-purple-50 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-purple-500 transition-colors duration-300">
|
||||||
|
<Phone className="w-8 h-8 text-purple-500 group-hover:text-white transition-colors duration-300" />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-extrabold text-slate-900 text-xl mb-3 uppercase tracking-tight">{t.pricing.extra.custom.title}</h4>
|
||||||
|
<p className="text-slate-500 text-sm leading-relaxed">
|
||||||
|
{t.pricing.extra.custom.desc}
|
||||||
|
</p>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer CTA */}
|
||||||
|
<div className="mt-24 text-center space-y-8 bg-slate-900 rounded-[3rem] p-16 text-white overflow-hidden relative">
|
||||||
|
<div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 rounded-full blur-3xl -mr-32 -mt-32" />
|
||||||
|
<div className="relative z-10 flex flex-col items-center">
|
||||||
|
<h2 className="text-3xl md:text-5xl font-black uppercase tracking-tighter mb-8">{t.pricing.cta.title}</h2>
|
||||||
|
<div className="flex flex-wrap justify-center gap-12">
|
||||||
|
<a href="tel:+36305543838" className="flex items-center gap-4 text-xl md:text-2xl font-black hover:text-primary transition-colors decoration-primary decoration-4 underline-offset-8 group">
|
||||||
|
<div className="bg-white/5 p-3 rounded-2xl group-hover:bg-primary transition-colors">
|
||||||
|
<Phone className="text-primary group-hover:text-white" />
|
||||||
|
</div>
|
||||||
|
+36 30 5543838
|
||||||
|
</a>
|
||||||
|
<a href="mailto:info@skyflytravel.hu" className="flex items-center gap-4 text-xl md:text-2xl font-black hover:text-primary transition-colors decoration-primary decoration-4 underline-offset-8 group">
|
||||||
|
<div className="bg-white/5 p-3 rounded-2xl group-hover:bg-primary transition-colors">
|
||||||
|
<Mail className="text-primary group-hover:text-white" />
|
||||||
|
</div>
|
||||||
|
info@skyflytravel.hu
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
|
|
@ -0,0 +1,93 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import Navbar from "@/components/navbar"
|
||||||
|
import { Card } from "@/components/ui/card"
|
||||||
|
import { ArrowLeft, Info } from "lucide-react"
|
||||||
|
import Link from "next/link"
|
||||||
|
import { useLanguage } from "@/lib/language-context"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
export default function ConditionsPage() {
|
||||||
|
const { t } = useLanguage()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="relative min-h-screen bg-slate-50">
|
||||||
|
<Navbar darkMode={true} />
|
||||||
|
|
||||||
|
{/* Background Decorations */}
|
||||||
|
<div className="fixed inset-0 pointer-events-none -z-10 overflow-hidden">
|
||||||
|
<div className="absolute top-1/4 -right-20 w-96 h-96 bg-primary/5 rounded-full blur-3xl opacity-30 animate-blob" />
|
||||||
|
<div className="absolute top-1/2 -left-20 w-80 h-80 bg-secondary/5 rounded-full blur-3xl opacity-30 animate-blob animation-delay-2000" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Header Section */}
|
||||||
|
<section className="relative pt-40 pb-32 overflow-hidden bg-[#D9A321]">
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-diagonal opacity-100 -z-10"
|
||||||
|
style={{ background: 'linear-gradient(135deg, #D9A321 0%, #1A1A1A 100%)' }}
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-0 left-0 w-full h-[100px] bg-slate-50 transform -skew-y-3 origin-bottom-left -z-10" />
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
||||||
|
<Link href="/" className="inline-flex items-center text-white/70 hover:text-white mb-10 transition-colors group">
|
||||||
|
<div className="bg-white/10 p-2 rounded-full mr-3 group-hover:bg-white/20 transition-colors">
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-bold tracking-[0.2em] uppercase">{t.conditionsPage.back}</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h1 className="text-5xl md:text-8xl font-black text-white tracking-tighter leading-none uppercase">
|
||||||
|
{t.conditionsPage.title} <br />
|
||||||
|
<span className="text-secondary/40 italic">{t.conditionsPage.titleAccent}</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="py-24">
|
||||||
|
<div className="max-w-5xl mx-auto px-6">
|
||||||
|
<div className="grid grid-cols-1 gap-12">
|
||||||
|
{t.conditionsPage.sections.map((section: any, idx: number) => (
|
||||||
|
<div key={idx} className="relative">
|
||||||
|
{/* Section Header */}
|
||||||
|
<div className="flex items-center gap-4 mb-8">
|
||||||
|
<div className="bg-primary/10 p-2.5 rounded-xl">
|
||||||
|
<Info className="w-5 h-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-2xl md:text-3xl font-black text-slate-900 uppercase tracking-tight">
|
||||||
|
{section.title}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Section Content */}
|
||||||
|
<Card className="p-8 md:p-12 rounded-[2.5rem] border-none shadow-xl bg-white space-y-6">
|
||||||
|
{section.content.map((paragraph: string, pIdx: number) => (
|
||||||
|
<p key={pIdx} className="text-slate-600 leading-relaxed font-medium text-lg">
|
||||||
|
{paragraph}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Info Footer */}
|
||||||
|
<div className="mt-24 bg-slate-900 rounded-[3rem] p-12 text-center text-white relative overflow-hidden shadow-2xl">
|
||||||
|
<div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-3xl -mr-32 -mt-32" />
|
||||||
|
<p className="relative z-10 text-xl font-bold uppercase tracking-widest text-primary mb-4">
|
||||||
|
SkyFly Travel
|
||||||
|
</p>
|
||||||
|
<h2 className="relative z-10 text-3xl md:text-4xl font-black uppercase tracking-tighter mb-8">
|
||||||
|
{t.nav.contact}
|
||||||
|
</h2>
|
||||||
|
<div className="relative z-10 flex flex-wrap justify-center gap-8">
|
||||||
|
<a href="tel:+36305543838" className="font-bold text-lg hover:text-primary transition-colors">+36 30 5543838</a>
|
||||||
|
<a href="mailto:info@skyflytravel.hu" className="font-bold text-lg hover:text-primary transition-colors">info@skyflytravel.hu</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,227 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import Navbar from "@/components/navbar"
|
||||||
|
import { Card } from "@/components/ui/card"
|
||||||
|
import { ArrowLeft, Users, Briefcase, Wind, Wifi, ShieldCheck, ChevronRight } 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 FleetPage() {
|
||||||
|
const { t } = useLanguage()
|
||||||
|
|
||||||
|
const vehicles = [
|
||||||
|
{
|
||||||
|
id: "vclass",
|
||||||
|
data: t.fleetPage.vehicles.vclass,
|
||||||
|
image: "/images/fleet/v-class.jpg",
|
||||||
|
large: true,
|
||||||
|
icon: Users
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "eclass",
|
||||||
|
data: t.fleetPage.vehicles.eclass,
|
||||||
|
image: "/images/fleet/e-class.jpg",
|
||||||
|
large: false,
|
||||||
|
icon: Briefcase
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "superb",
|
||||||
|
data: t.fleetPage.vehicles.superb,
|
||||||
|
image: "/images/fleet/superb.jpg",
|
||||||
|
large: false,
|
||||||
|
icon: Wind
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "transit",
|
||||||
|
data: t.fleetPage.vehicles.transit,
|
||||||
|
image: "/images/fleet/transit.jpg",
|
||||||
|
large: true,
|
||||||
|
icon: Users
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const containerVariants = {
|
||||||
|
hidden: { opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
staggerChildren: 0.2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const itemVariants = {
|
||||||
|
hidden: { opacity: 0, y: 30 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
transition: {
|
||||||
|
duration: 0.8
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="relative min-h-screen bg-[#fafaf9] text-slate-800 overflow-hidden">
|
||||||
|
<Navbar darkMode={false} />
|
||||||
|
|
||||||
|
{/* Background elements - Softer and more premium */}
|
||||||
|
<div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none -z-10">
|
||||||
|
<div className="absolute top-[-5%] left-[-5%] w-[50%] h-[50%] bg-primary/5 rounded-full blur-[140px] opacity-60" />
|
||||||
|
<div className="absolute top-[20%] right-[-10%] w-[40%] h-[40%] bg-blue-500/5 rounded-full blur-[120px] opacity-40" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Header Section */}
|
||||||
|
<section className="relative pt-32 pb-20 px-6">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
>
|
||||||
|
<Link href="/" className="inline-flex items-center text-slate-400 hover:text-primary mb-10 transition-colors group">
|
||||||
|
<ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" />
|
||||||
|
<span className="text-[10px] font-black uppercase tracking-[0.3em]">{t.fleetPage.back}</span>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="max-w-4xl">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
className="space-y-8"
|
||||||
|
>
|
||||||
|
<h1 className="text-7xl md:text-9xl font-black uppercase tracking-tighter leading-[0.85] text-slate-900">
|
||||||
|
{t.fleetPage.title} <br />
|
||||||
|
<span className="text-primary italic">{t.fleetPage.titleAccent}</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl md:text-2xl text-slate-500 max-w-2xl leading-relaxed font-medium">
|
||||||
|
{t.fleetPage.description}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Fleet Grid */}
|
||||||
|
<section className="pb-32 px-6">
|
||||||
|
<motion.div
|
||||||
|
variants={containerVariants}
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-10"
|
||||||
|
>
|
||||||
|
{vehicles.map((vehicle, idx) => (
|
||||||
|
<motion.div
|
||||||
|
key={vehicle.id}
|
||||||
|
variants={itemVariants}
|
||||||
|
className={vehicle.large ? "md:col-span-2" : "md:col-span-1"}
|
||||||
|
>
|
||||||
|
<Card className="group relative overflow-hidden rounded-[3.5rem] border-none bg-white shadow-[0_32px_64px_-16px_rgba(0,0,0,0.08)] transition-all duration-700 hover:shadow-[0_48px_80px_-20px_rgba(0,0,0,0.12)] aspect-[16/9] md:aspect-auto md:h-[700px]">
|
||||||
|
{/* Image with refined hover scaling */}
|
||||||
|
<Image
|
||||||
|
src={vehicle.image}
|
||||||
|
alt={vehicle.data.name}
|
||||||
|
fill
|
||||||
|
className="object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Darker bottom gradient for text readability */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-80 transition-opacity duration-700 group-hover:opacity-90" />
|
||||||
|
|
||||||
|
{/* Content Details - Overlay style without box */}
|
||||||
|
<div className="absolute inset-0 p-10 md:p-16 flex flex-col justify-end">
|
||||||
|
<div className="space-y-6 transform transition-all duration-700 group-hover:-translate-y-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="px-5 py-2 rounded-full bg-primary text-white text-[9px] font-black uppercase tracking-[0.2em] shadow-xl">
|
||||||
|
{vehicle.data.category}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
||||||
|
<span className="text-[9px] font-black text-white/60 uppercase tracking-[0.3em]">Elérhető</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-4xl md:text-7xl font-black uppercase tracking-tighter text-white leading-tight">
|
||||||
|
{vehicle.data.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-white/70 max-w-2xl text-base md:text-lg font-medium leading-relaxed">
|
||||||
|
{vehicle.data.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-x-8 gap-y-4 pt-4">
|
||||||
|
{vehicle.data.features.map((feature: string, fIdx: number) => (
|
||||||
|
<div key={fIdx} className="flex items-center gap-3 text-white/80">
|
||||||
|
<div className="w-1.5 h-1.5 rounded-full bg-primary" />
|
||||||
|
<span className="text-[10px] md:text-xs font-black uppercase tracking-widest">{feature}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-8 border-t border-white/10 flex items-center justify-between">
|
||||||
|
<Link
|
||||||
|
href="https://app.skyflytravel.hu/public/offers/new"
|
||||||
|
target="_blank"
|
||||||
|
className="inline-flex items-center gap-4 text-primary font-black uppercase tracking-[0.2em] text-[10px] hover:gap-6 transition-all"
|
||||||
|
>
|
||||||
|
{t.nav.cta}
|
||||||
|
<ChevronRight className="w-4 h-4" />
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="hidden md:flex gap-4">
|
||||||
|
<div className="w-12 h-12 rounded-2xl bg-white/10 backdrop-blur-md flex items-center justify-center text-white border border-white/10 group-hover:bg-primary/20 group-hover:border-primary/30 transition-all">
|
||||||
|
<vehicle.icon className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Quality Statement */}
|
||||||
|
<section className="py-32 px-6 bg-white relative">
|
||||||
|
<div className="max-w-5xl mx-auto text-center space-y-16">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="bg-primary/10 w-24 h-24 rounded-[2rem] flex items-center justify-center mx-auto mb-8 rotate-6 hover:rotate-0 transition-transform duration-700"
|
||||||
|
>
|
||||||
|
<ShieldCheck className="w-12 h-12 text-primary" />
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<h2 className="text-4xl md:text-6xl font-black uppercase tracking-tighter leading-tight text-slate-900">
|
||||||
|
{t.servicesPage.whyUs.items[1]}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-16 md:gap-8">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-6xl font-black text-primary transition-transform hover:scale-110 duration-300">0-3</p>
|
||||||
|
<p className="text-[11px] font-black uppercase tracking-[0.2em] text-slate-400">Éves átlagéletkor</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-6xl font-black text-primary transition-transform hover:scale-110 duration-300">100%</p>
|
||||||
|
<p className="text-[11px] font-black uppercase tracking-[0.2em] text-slate-400">Tisztasági garancia</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-6xl font-black text-primary transition-transform hover:scale-110 duration-300">24/7</p>
|
||||||
|
<p className="text-[11px] font-black uppercase tracking-[0.2em] text-slate-400">Műszaki felügyelet</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,149 @@
|
||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--font-sans: var(--font-inter);
|
||||||
|
|
||||||
|
--color-background: hsl(var(--background));
|
||||||
|
--color-foreground: hsl(var(--foreground));
|
||||||
|
|
||||||
|
--color-card: hsl(var(--card));
|
||||||
|
--color-card-foreground: hsl(var(--card-foreground));
|
||||||
|
|
||||||
|
--color-popover: hsl(var(--popover));
|
||||||
|
--color-popover-foreground: hsl(var(--popover-foreground));
|
||||||
|
|
||||||
|
--color-primary: hsl(var(--primary));
|
||||||
|
--color-primary-foreground: hsl(var(--primary-foreground));
|
||||||
|
|
||||||
|
--color-secondary: hsl(var(--secondary));
|
||||||
|
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
||||||
|
|
||||||
|
--color-muted: hsl(var(--muted));
|
||||||
|
--color-muted-foreground: hsl(var(--muted-foreground));
|
||||||
|
|
||||||
|
--color-accent: hsl(var(--accent));
|
||||||
|
--color-accent-foreground: hsl(var(--accent-foreground));
|
||||||
|
|
||||||
|
--color-destructive: hsl(var(--destructive));
|
||||||
|
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
||||||
|
|
||||||
|
--color-border: hsl(var(--border));
|
||||||
|
--color-input: hsl(var(--input));
|
||||||
|
--color-ring: hsl(var(--ring));
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--background: 0 0% 100%;
|
||||||
|
--foreground: 224 71.4% 4.1%;
|
||||||
|
--card: 0 0% 100%;
|
||||||
|
--card-foreground: 224 71.4% 4.1%;
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 224 71.4% 4.1%;
|
||||||
|
--primary: 42 74% 49%;
|
||||||
|
/* Mustard Gold/Yellow from screenshot */
|
||||||
|
--primary-foreground: 0 0% 100%;
|
||||||
|
--secondary: 0 0% 10%;
|
||||||
|
/* Dark Grey from screenshot */
|
||||||
|
--secondary-foreground: 0 0% 100%;
|
||||||
|
--muted: 0 0% 96%;
|
||||||
|
--muted-foreground: 0 0% 45%;
|
||||||
|
--accent: 42 74% 95%;
|
||||||
|
--accent-foreground: 42 74% 20%;
|
||||||
|
--destructive: 0 84.2% 60.2%;
|
||||||
|
--destructive-foreground: 210 20% 98%;
|
||||||
|
--border: 0 0% 90%;
|
||||||
|
--input: 0 0% 90%;
|
||||||
|
--ring: 42 74% 49%;
|
||||||
|
--radius: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: 0 0% 10%;
|
||||||
|
--foreground: 0 0% 98%;
|
||||||
|
--card: 0 0% 10%;
|
||||||
|
--card-foreground: 0 0% 98%;
|
||||||
|
--popover: 0 0% 10%;
|
||||||
|
--popover-foreground: 0 0% 98%;
|
||||||
|
--primary: 42 74% 49%;
|
||||||
|
--primary-foreground: 0 0% 10%;
|
||||||
|
--secondary: 0 0% 20%;
|
||||||
|
--secondary-foreground: 0 0% 100%;
|
||||||
|
--muted: 0 0% 15%;
|
||||||
|
--muted-foreground: 0 0% 65%;
|
||||||
|
--accent: 42 74% 15%;
|
||||||
|
--accent-foreground: 42 74% 90%;
|
||||||
|
--destructive: 0 62.8% 30.6%;
|
||||||
|
--destructive-foreground: 210 20% 98%;
|
||||||
|
--border: 0 0% 20%;
|
||||||
|
--input: 0 0% 20%;
|
||||||
|
--ring: 42 74% 49%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground font-sans;
|
||||||
|
font-feature-settings: "rlig" 1, "calt" 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility bg-diagonal {
|
||||||
|
background: linear-gradient(135deg, #D9A321 0%, #B8860B 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility animation-delay-2000 {
|
||||||
|
animation-delay: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility animation-delay-4000 {
|
||||||
|
animation-delay: 4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0px) rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateY(-20px) rotate(2deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0px) rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blob {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px, 0px) scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
33% {
|
||||||
|
transform: translate(30px, -50px) scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
66% {
|
||||||
|
transform: translate(-20px, 20px) scale(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translate(0px, 0px) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-blob {
|
||||||
|
animation: blob 7s infinite;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,153 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import Navbar from "@/components/navbar"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Card } from "@/components/ui/card"
|
||||||
|
import { ArrowLeft, Phone, Mail, MessageSquare, Clock, MapPin, Smartphone } from "lucide-react"
|
||||||
|
import Link from "next/link"
|
||||||
|
import { useLanguage } from "@/lib/language-context"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import ContactForm from "@/components/contact-form"
|
||||||
|
|
||||||
|
export default function ContactPage() {
|
||||||
|
const { t } = useLanguage()
|
||||||
|
|
||||||
|
const contactMethods = [
|
||||||
|
{
|
||||||
|
icon: Smartphone,
|
||||||
|
label: t.contactPage.info.phone,
|
||||||
|
value: "+36 30 5543838",
|
||||||
|
href: "tel:+36305543838",
|
||||||
|
color: "bg-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Phone,
|
||||||
|
label: t.contactPage.info.landline,
|
||||||
|
value: "+36 96 283676",
|
||||||
|
href: "tel:+3696283676",
|
||||||
|
color: "bg-blue-500"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Mail,
|
||||||
|
label: t.contactPage.info.email,
|
||||||
|
value: "info@skyflytravel.hu",
|
||||||
|
href: "mailto:info@skyflytravel.hu",
|
||||||
|
color: "bg-purple-500"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="relative min-h-screen bg-slate-50">
|
||||||
|
<Navbar darkMode={true} />
|
||||||
|
|
||||||
|
{/* Background Decorations */}
|
||||||
|
<div className="fixed inset-0 pointer-events-none -z-10 overflow-hidden">
|
||||||
|
<div className="absolute top-1/4 -right-20 w-96 h-96 bg-primary/5 rounded-full blur-3xl opacity-30 animate-blob" />
|
||||||
|
<div className="absolute top-1/2 -left-20 w-80 h-80 bg-secondary/5 rounded-full blur-3xl opacity-30 animate-blob animation-delay-2000" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Header Section */}
|
||||||
|
<section className="relative pt-40 pb-32 overflow-hidden bg-[#D9A321]">
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-diagonal opacity-100 -z-10"
|
||||||
|
style={{ background: 'linear-gradient(135deg, #D9A321 0%, #1A1A1A 100%)' }}
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-0 left-0 w-full h-[100px] bg-slate-50 transform -skew-y-3 origin-bottom-left -z-10" />
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
||||||
|
<Link href="/" className="inline-flex items-center text-white/70 hover:text-white mb-10 transition-colors group">
|
||||||
|
<div className="bg-white/10 p-2 rounded-full mr-3 group-hover:bg-white/20 transition-colors">
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-bold tracking-[0.2em] uppercase">{t.contactPage.back}</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h1 className="text-5xl md:text-8xl font-black text-white tracking-tighter leading-none uppercase">
|
||||||
|
{t.contactPage.title} <br />
|
||||||
|
<span className="text-secondary/40 italic">{t.contactPage.titleAccent}</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-white/70 max-w-2xl leading-relaxed font-medium">
|
||||||
|
{t.contactPage.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="py-24">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
|
{contactMethods.map((method, idx) => (
|
||||||
|
<Card key={idx} className="p-10 rounded-[2.5rem] border-none shadow-lg bg-white group hover:-translate-y-2 transition-all duration-300">
|
||||||
|
<div className={cn("w-14 h-14 rounded-2xl flex items-center justify-center mb-8 shadow-lg", method.color)}>
|
||||||
|
<method.icon className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">
|
||||||
|
{method.label}
|
||||||
|
</p>
|
||||||
|
<a href={method.href} className="text-2xl font-black text-slate-900 hover:text-primary transition-colors">
|
||||||
|
{method.value}
|
||||||
|
</a>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-24">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<div className="text-center mb-16 space-y-4">
|
||||||
|
<h2 className="text-4xl md:text-6xl font-black text-slate-900 uppercase tracking-tighter">
|
||||||
|
{t.contactPage.cta.title}
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-500 font-medium max-w-xl mx-auto">
|
||||||
|
{t.contactPage.cta.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<ContactForm />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Business & Legal Info Section */}
|
||||||
|
<div className="mt-32 grid grid-cols-1 md:grid-cols-2 gap-12 pt-24 border-t border-slate-200">
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div className="bg-slate-900 text-white px-6 py-2 rounded-full inline-block text-[10px] font-black uppercase tracking-[0.3em]">
|
||||||
|
{t.contactPage.business.title}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-xl font-black text-slate-900">{t.contactPage.business.operator}</p>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-slate-500 font-medium">{t.contactPage.business.address}</p>
|
||||||
|
<p className="text-slate-500 font-medium">{t.contactPage.business.taxNumber}</p>
|
||||||
|
<p className="text-slate-500 font-medium">{t.contactPage.business.bankAccount}</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2 pt-4">
|
||||||
|
<p className="text-primary font-black">{t.contactPage.business.phone}</p>
|
||||||
|
<p className="text-primary font-black">{t.contactPage.business.infoLine}</p>
|
||||||
|
<p className="text-slate-900 font-bold">{t.contactPage.business.email}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div className="bg-primary text-white px-6 py-2 rounded-full inline-block text-[10px] font-black uppercase tracking-[0.3em]">
|
||||||
|
{t.contactPage.legal.title}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-xl font-black text-slate-900">{t.contactPage.legal.name}</p>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-slate-500 font-medium">{t.contactPage.legal.office}</p>
|
||||||
|
<p className="text-slate-500 font-medium">{t.contactPage.legal.address}</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2 pt-4">
|
||||||
|
<Link href="https://www.12gyoriugyvediiroda.hu" target="_blank" className="text-primary font-black block hover:underline">
|
||||||
|
{t.contactPage.legal.web}
|
||||||
|
</Link>
|
||||||
|
<p className="text-slate-900 font-bold">{t.contactPage.legal.phone}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
import { Inter } from "next/font/google";
|
||||||
|
import "./globals.css";
|
||||||
|
|
||||||
|
const inter = Inter({
|
||||||
|
variable: "--font-inter",
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "SkyFly Travel - Reptéri Transzfer Győr, Budapest, Bécs, Pozsony",
|
||||||
|
description: "Gyors, megbízható és kényelmes reptéri transzfer szolgáltatás 0-24 órában.",
|
||||||
|
};
|
||||||
|
|
||||||
|
import { LanguageProvider } from "@/lib/language-context";
|
||||||
|
import ScrollToTop from "@/components/scroll-to-top";
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<html lang="hu" className="scroll-smooth">
|
||||||
|
<body
|
||||||
|
className={`${inter.variable} font-sans antialiased`}
|
||||||
|
>
|
||||||
|
<LanguageProvider>
|
||||||
|
{children}
|
||||||
|
<ScrollToTop />
|
||||||
|
</LanguageProvider>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,302 @@
|
||||||
|
"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:+36302821101" 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 282 1101</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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,207 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import Navbar from "@/components/navbar"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Card } from "@/components/ui/card"
|
||||||
|
import { ArrowLeft, CheckCircle2, Facebook, Phone, Info } from "lucide-react"
|
||||||
|
import Link from "next/link"
|
||||||
|
import { useLanguage } from "@/lib/language-context"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
export default function ServicesPage() {
|
||||||
|
const { t } = useLanguage()
|
||||||
|
|
||||||
|
const packageEntries = [
|
||||||
|
{
|
||||||
|
unique: t.servicesPage.packages.classic.unique,
|
||||||
|
name: t.servicesPage.packages.classic.title,
|
||||||
|
desc: t.servicesPage.packages.classic.desc,
|
||||||
|
toAirport: t.servicesPage.packages.classic.toAirport,
|
||||||
|
toCity: t.servicesPage.packages.classic.toCity
|
||||||
|
},
|
||||||
|
{
|
||||||
|
unique: t.servicesPage.packages.express.unique,
|
||||||
|
name: t.servicesPage.packages.express.title,
|
||||||
|
desc: t.servicesPage.packages.express.desc,
|
||||||
|
toAirport: t.servicesPage.packages.express.toAirport,
|
||||||
|
toCity: t.servicesPage.packages.express.toCity
|
||||||
|
},
|
||||||
|
{
|
||||||
|
unique: t.servicesPage.packages.private.unique,
|
||||||
|
name: t.servicesPage.packages.private.title,
|
||||||
|
desc: t.servicesPage.packages.private.desc,
|
||||||
|
toAirport: t.servicesPage.packages.private.toAirport,
|
||||||
|
toCity: t.servicesPage.packages.private.toCity
|
||||||
|
},
|
||||||
|
{
|
||||||
|
unique: t.servicesPage.packages.family.unique,
|
||||||
|
name: t.servicesPage.packages.family.title,
|
||||||
|
desc: t.servicesPage.packages.family.desc,
|
||||||
|
toAirport: t.servicesPage.packages.family.toAirport,
|
||||||
|
toCity: t.servicesPage.packages.family.toCity
|
||||||
|
},
|
||||||
|
{
|
||||||
|
unique: t.servicesPage.packages.bigFamily.unique,
|
||||||
|
name: t.servicesPage.packages.bigFamily.title,
|
||||||
|
desc: t.servicesPage.packages.bigFamily.desc,
|
||||||
|
toAirport: t.servicesPage.packages.bigFamily.toAirport,
|
||||||
|
toCity: t.servicesPage.packages.bigFamily.toCity
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="relative min-h-screen bg-[#2D343F]">
|
||||||
|
<Navbar darkMode={false} />
|
||||||
|
|
||||||
|
{/* Header Section */}
|
||||||
|
<section className="relative pt-32 pb-16 bg-[#2D343F]">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<Link href="/" className="inline-flex items-center text-white/70 hover:text-white mb-8 transition-colors group">
|
||||||
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||||
|
<span className="text-xs font-bold uppercase tracking-widest">{t.servicesPage.back}</span>
|
||||||
|
</Link>
|
||||||
|
<h1 className="text-4xl md:text-5xl font-black text-white uppercase tracking-tight">
|
||||||
|
{t.servicesPage.title} {t.servicesPage.titleAccent}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="pb-24">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
|
|
||||||
|
{/* Left Column - Packages (2/3 width) */}
|
||||||
|
<div className="lg:col-span-2 space-y-6">
|
||||||
|
|
||||||
|
{/* Common Shared Features */}
|
||||||
|
<div className="overflow-hidden rounded-lg shadow-lg">
|
||||||
|
<div className="bg-[#EF9F3F] px-4 py-2">
|
||||||
|
<h2 className="text-white text-sm font-bold uppercase">{t.servicesPage.commonFeatures.title}</h2>
|
||||||
|
</div>
|
||||||
|
<div className="bg-[#3D4552] p-4 space-y-3">
|
||||||
|
<div className="grid grid-cols-3 gap-4 border-b border-slate-600/50 pb-2">
|
||||||
|
<div className="text-[#EF9F3F] text-xs font-bold col-span-1">{t.servicesPage.commonFeatures.toAirport}</div>
|
||||||
|
<div className="text-white/90 text-xs col-span-2">{t.servicesPage.commonFeatures.toAirportDesc}</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
<div className="text-[#EF9F3F] text-xs font-bold col-span-1">{t.servicesPage.commonFeatures.toCity}</div>
|
||||||
|
<div className="text-white/90 text-xs col-span-2">{t.servicesPage.commonFeatures.toCityDesc}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Individual Packages */}
|
||||||
|
{packageEntries.map((pkg, idx) => (
|
||||||
|
<div key={idx} className="overflow-hidden rounded-lg shadow-lg">
|
||||||
|
<div className="bg-[#EF9F3F] px-4 py-2">
|
||||||
|
<h2 className="text-white text-sm font-bold uppercase">{pkg.unique}</h2>
|
||||||
|
</div>
|
||||||
|
<div className="bg-[#3D4552] p-4 space-y-3">
|
||||||
|
<div className="grid grid-cols-3 gap-4 border-b border-slate-600/50 pb-2">
|
||||||
|
<div className="text-white text-xs font-bold col-span-1">"{pkg.name}"</div>
|
||||||
|
<div className="text-white/90 text-xs col-span-2">{pkg.desc}</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-3 gap-4 border-b border-slate-600/50 pb-2">
|
||||||
|
<div className="text-white/70 text-xs col-span-1">{t.servicesPage.commonFeatures.toAirport}</div>
|
||||||
|
<div className="text-white/90 text-xs col-span-2">{pkg.toAirport}</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
<div className="text-white/70 text-xs col-span-1">{t.servicesPage.commonFeatures.toCity}</div>
|
||||||
|
<div className="text-white/90 text-xs col-span-2">{pkg.toCity}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column - Info Panels (1/3 width) */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
|
||||||
|
{/* Why Us */}
|
||||||
|
<div className="overflow-hidden rounded-lg shadow-lg">
|
||||||
|
<div className="bg-[#EF9F3F] px-4 py-2">
|
||||||
|
<h2 className="text-white text-sm font-bold uppercase">{t.servicesPage.whyUs.title}</h2>
|
||||||
|
</div>
|
||||||
|
<div className="bg-[#3D4552] p-6">
|
||||||
|
<ul className="space-y-3">
|
||||||
|
{t.servicesPage.whyUs.items.map((item: string, i: number) => (
|
||||||
|
<li key={i} className="flex items-start gap-3">
|
||||||
|
<div className="mt-1.5 w-1.5 h-1.5 bg-white rounded-full shrink-0" />
|
||||||
|
<span className="text-white/90 text-xs leading-relaxed">{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Free of Charge */}
|
||||||
|
<div className="overflow-hidden rounded-lg shadow-lg">
|
||||||
|
<div className="bg-[#EF9F3F] px-4 py-2">
|
||||||
|
<h2 className="text-white text-sm font-bold uppercase">{t.servicesPage.freeOfCharge.title}</h2>
|
||||||
|
</div>
|
||||||
|
<div className="bg-[#3D4552] p-6">
|
||||||
|
<ul className="space-y-3">
|
||||||
|
{t.servicesPage.freeOfCharge.items.map((item: string, i: number) => (
|
||||||
|
<li key={i} className="flex items-start gap-3">
|
||||||
|
<div className="mt-1.5 w-1.5 h-1.5 bg-white rounded-full shrink-0" />
|
||||||
|
<span className="text-white/90 text-xs leading-relaxed">{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Discounts */}
|
||||||
|
<div className="overflow-hidden rounded-lg shadow-lg">
|
||||||
|
<div className="bg-[#EF9F3F] px-4 py-2">
|
||||||
|
<h2 className="text-white text-sm font-bold uppercase">{t.servicesPage.discounts.title}</h2>
|
||||||
|
</div>
|
||||||
|
<div className="bg-[#3D4552] p-6 space-y-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-white/90 text-xs italic font-bold">
|
||||||
|
{t.servicesPage.discounts.fb} <Link href="https://www.facebook.com/skyflytravel.hu" target="_blank" className="text-[#EF9F3F] hover:underline ml-1">{t.servicesPage.discounts.fbLink}</Link>
|
||||||
|
</p>
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<Link href="https://www.facebook.com/skyflytravel.hu" target="_blank" className="bg-[#4D69A1] p-3 rounded-lg hover:scale-105 transition-transform">
|
||||||
|
<Facebook className="text-white w-8 h-8 fill-white" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-3 pt-4 border-t border-slate-600/50">
|
||||||
|
<div className="mt-1.5 w-1.5 h-1.5 bg-white rounded-full shrink-0" />
|
||||||
|
<p className="text-white/90 text-xs leading-relaxed">
|
||||||
|
<span className="font-bold">{t.servicesPage.discounts.loyalty.split(':')[0]}:</span>
|
||||||
|
{t.servicesPage.discounts.loyalty.split(':')[1]}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hotline quick link */}
|
||||||
|
<Card className="bg-primary/10 border-primary/20 p-6 rounded-2xl flex items-center space-x-4">
|
||||||
|
<div className="bg-primary p-3 rounded-xl shadow-lg">
|
||||||
|
<Phone className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] font-bold text-white/50 uppercase tracking-widest">Hotline 0-24</p>
|
||||||
|
<p className="text-lg font-black text-white">+36 30 554 3838</p>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Final CTA */}
|
||||||
|
<div className="mt-16 text-center">
|
||||||
|
<Button asChild size="lg" className="rounded-full px-12 h-16 bg-[#EF9F3F] hover:bg-[#D98F2F] text-white font-bold uppercase tracking-widest shadow-xl transition-all">
|
||||||
|
<a href="https://app.skyflytravel.hu/public/offers/new" target="_blank" rel="noopener noreferrer">
|
||||||
|
{t.nav.cta}
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,229 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import React, { useState, useRef } from "react"
|
||||||
|
import { useLanguage } from "@/lib/language-context"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Input } from "@/components/ui/input"
|
||||||
|
import { Textarea } from "@/components/ui/textarea"
|
||||||
|
import { Card } from "@/components/ui/card"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import ReCAPTCHA from "react-google-recaptcha"
|
||||||
|
import { Send, CheckCircle2, AlertCircle } from "lucide-react"
|
||||||
|
|
||||||
|
export default function ContactForm() {
|
||||||
|
const { t } = useLanguage()
|
||||||
|
const recaptchaRef = useRef<ReCAPTCHA>(null)
|
||||||
|
|
||||||
|
const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: "",
|
||||||
|
email: "",
|
||||||
|
phone: "",
|
||||||
|
service: "REPTÉRI TRANSZFER",
|
||||||
|
message: "",
|
||||||
|
consent: false
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||||
|
const { name, value, type } = e.target as any
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[name]: type === "checkbox" ? (e.target as HTMLInputElement).checked : value
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
|
||||||
|
const recaptchaValue = recaptchaRef.current?.getValue()
|
||||||
|
if (!recaptchaValue) {
|
||||||
|
alert("Please complete the reCaptcha")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.consent) {
|
||||||
|
alert("Please accept the privacy policy")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setStatus("loading")
|
||||||
|
|
||||||
|
try {
|
||||||
|
// In a static export environment, this would hit a PHP script on the server
|
||||||
|
// or an external API. Here we assume an API route for local testing.
|
||||||
|
const response = await fetch("/api/contact", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ ...formData, recaptcha: recaptchaValue })
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
setStatus("success")
|
||||||
|
setFormData({ name: "", email: "", phone: "", service: "REPTÉRI TRANSZFER", message: "", consent: false })
|
||||||
|
recaptchaRef.current?.reset()
|
||||||
|
} else {
|
||||||
|
setStatus("error")
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setStatus("error")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status === "success") {
|
||||||
|
return (
|
||||||
|
<Card className="p-12 text-center rounded-[3rem] border-none shadow-2xl bg-white">
|
||||||
|
<div className="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-8">
|
||||||
|
<CheckCircle2 className="w-10 h-10 text-green-500" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-3xl font-black text-slate-900 uppercase tracking-tighter mb-4">Köszönjük!</h3>
|
||||||
|
<p className="text-slate-600 font-medium max-w-md mx-auto">
|
||||||
|
{t.contactPage.form.success}
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
onClick={() => setStatus("idle")}
|
||||||
|
variant="outline"
|
||||||
|
className="mt-8 rounded-full px-8"
|
||||||
|
>
|
||||||
|
Új üzenet küldése
|
||||||
|
</Button>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="rounded-[3rem] overflow-hidden border-none shadow-2xl bg-white">
|
||||||
|
<form onSubmit={handleSubmit} className="p-8 md:p-12 space-y-8">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
{/* Name */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
|
||||||
|
{t.contactPage.form.name}
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
required
|
||||||
|
name="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Pl. Kovács János"
|
||||||
|
className="rounded-2xl h-14 bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Email */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
|
||||||
|
{t.contactPage.form.email}
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
required
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="janos@pelda.hu"
|
||||||
|
className="rounded-2xl h-14 bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
{/* Phone */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
|
||||||
|
{t.contactPage.form.phone}
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
name="phone"
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="+36 30 123 4567"
|
||||||
|
className="rounded-2xl h-14 bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Service Type */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
|
||||||
|
{t.contactPage.form.service}
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
name="service"
|
||||||
|
value={formData.service}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full rounded-2xl h-14 bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all px-4 text-sm font-medium"
|
||||||
|
>
|
||||||
|
<option value="REPTÉRI TRANSZFER">{t.contactPage.form.serviceOptions.airport}</option>
|
||||||
|
<option value="PRIVÁT TRANSZFER">{t.contactPage.form.serviceOptions.private}</option>
|
||||||
|
<option value="EGYÉB SZEMÉLYSZÁLLÍTÁS">{t.contactPage.form.serviceOptions.other}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Message */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
|
||||||
|
{t.contactPage.form.message}
|
||||||
|
</label>
|
||||||
|
<Textarea
|
||||||
|
required
|
||||||
|
name="message"
|
||||||
|
value={formData.message}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Miben segíthetünk Önnek?"
|
||||||
|
rows={5}
|
||||||
|
className="rounded-[2rem] bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all p-6 min-h-[150px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Consent */}
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<input
|
||||||
|
required
|
||||||
|
type="checkbox"
|
||||||
|
name="consent"
|
||||||
|
checked={formData.consent}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="mt-1 w-5 h-5 rounded-lg border-slate-200 text-primary focus:ring-primary cursor-pointer"
|
||||||
|
/>
|
||||||
|
<p className="text-sm text-slate-500 leading-relaxed font-medium">
|
||||||
|
{t.contactPage.form.consent}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* reCaptcha */}
|
||||||
|
<div className="pt-4 flex justify-center md:justify-start">
|
||||||
|
<ReCAPTCHA
|
||||||
|
ref={recaptchaRef}
|
||||||
|
sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" // Place-holder test key
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{status === "error" && (
|
||||||
|
<div className="bg-red-50 text-red-600 p-4 rounded-2xl flex items-center gap-3 text-sm font-bold">
|
||||||
|
<AlertCircle className="w-5 h-5" />
|
||||||
|
{t.contactPage.form.error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
disabled={status === "loading"}
|
||||||
|
type="submit"
|
||||||
|
size="lg"
|
||||||
|
className="w-full md:w-fit rounded-full px-12 h-16 bg-primary hover:bg-primary/90 text-sm font-bold uppercase tracking-widest transition-all shadow-xl disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{status === "loading" ? (
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||||
|
Küldés...
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<Send className="w-4 h-4" />
|
||||||
|
{t.contactPage.form.button}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { motion, AnimatePresence } from "framer-motion"
|
||||||
|
|
||||||
|
const CookieConsent = () => {
|
||||||
|
const [isVisible, setIsVisible] = React.useState(false)
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const consent = localStorage.getItem("cookie-consent")
|
||||||
|
if (!consent) {
|
||||||
|
setTimeout(() => setIsVisible(true), 2000)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleAccept = () => {
|
||||||
|
localStorage.setItem("cookie-consent", "true")
|
||||||
|
setIsVisible(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{isVisible && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ y: 100, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
exit={{ y: 100, opacity: 0 }}
|
||||||
|
className="fixed bottom-6 left-6 right-6 md:left-auto md:right-6 md:w-[400px] bg-white shadow-2xl rounded-3xl p-6 z-[100] border border-slate-100"
|
||||||
|
>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h4 className="font-bold text-lg">Sütik használata 🍪</h4>
|
||||||
|
<p className="text-sm text-slate-600 leading-relaxed">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<Button onClick={handleAccept} className="flex-1 rounded-full">
|
||||||
|
Elfogadom
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" onClick={() => setIsVisible(false)} className="flex-1 rounded-full">
|
||||||
|
Nem
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CookieConsent
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Card } from "@/components/ui/card"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { motion } from "framer-motion"
|
||||||
|
import Link from "next/link"
|
||||||
|
|
||||||
|
interface FeatureSectionProps {
|
||||||
|
title: string
|
||||||
|
oversizedTitle: string
|
||||||
|
description: string
|
||||||
|
ctaText?: string
|
||||||
|
reversed?: boolean
|
||||||
|
accentColor?: string
|
||||||
|
children?: React.ReactNode
|
||||||
|
href?: string
|
||||||
|
customCTA?: React.ReactNode
|
||||||
|
externalLink?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const FeatureSection = ({
|
||||||
|
title,
|
||||||
|
oversizedTitle,
|
||||||
|
description,
|
||||||
|
ctaText,
|
||||||
|
reversed = false,
|
||||||
|
accentColor = "text-primary",
|
||||||
|
children,
|
||||||
|
href,
|
||||||
|
customCTA,
|
||||||
|
externalLink = false
|
||||||
|
}: FeatureSectionProps) => {
|
||||||
|
return (
|
||||||
|
<section className="py-12 md:py-16 overflow-hidden">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className={cn(
|
||||||
|
"flex flex-col lg:flex-row items-center gap-16",
|
||||||
|
reversed && "lg:flex-row-reverse"
|
||||||
|
)}>
|
||||||
|
{/* Content */}
|
||||||
|
<div className="flex-1 space-y-8">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h3 className={cn("text-6xl md:text-8xl font-black uppercase tracking-tighter opacity-20", accentColor)}>
|
||||||
|
{oversizedTitle}
|
||||||
|
</h3>
|
||||||
|
<h2 className="text-4xl font-bold tracking-tight -mt-8 md:-mt-12 ml-2">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-xl text-slate-600 leading-relaxed max-w-xl">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{customCTA ? (
|
||||||
|
customCTA
|
||||||
|
) : (ctaText && (
|
||||||
|
href ? (
|
||||||
|
<Button asChild variant="pill" className={cn("px-8 bg-white border-none shadow-xl hover:shadow-2xl text-lg font-black uppercase tracking-widest", accentColor)}>
|
||||||
|
{externalLink ? (
|
||||||
|
<a href={href} target="_blank" rel="noopener noreferrer">{ctaText}</a>
|
||||||
|
) : (
|
||||||
|
<Link href={href}>{ctaText}</Link>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button variant="pill" className={cn("px-8 bg-white border-none shadow-xl hover:shadow-2xl text-lg font-black uppercase tracking-widest", accentColor)}>
|
||||||
|
{ctaText}
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Visual */}
|
||||||
|
<div className="flex-1 w-full flex justify-center">
|
||||||
|
{children ? (
|
||||||
|
children
|
||||||
|
) : (
|
||||||
|
<div className="relative group">
|
||||||
|
<div className={cn(
|
||||||
|
"absolute inset-0 blur-3xl opacity-20 rounded-full transition-all duration-500 scale-110 group-hover:scale-125",
|
||||||
|
accentColor.replace("text-", "bg-")
|
||||||
|
)} />
|
||||||
|
<Card className="relative w-full aspect-video md:w-[500px] md:h-[350px] bg-white shadow-2xl rounded-[2.5rem] overflow-hidden border-none transform transition-transform duration-700 group-hover:scale-105">
|
||||||
|
<div className="w-full h-full bg-slate-50 flex items-center justify-center">
|
||||||
|
<div className={cn("w-20 h-20 rounded-full opacity-20", accentColor.replace("text-", "bg-"))} />
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FeatureSection
|
||||||
|
|
@ -0,0 +1,175 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Card } from "@/components/ui/card"
|
||||||
|
import { Star, Clock, Users, ShieldCheck } from "lucide-react"
|
||||||
|
import Link from "next/link"
|
||||||
|
import { useLanguage } from "@/lib/language-context"
|
||||||
|
import Image from "next/image"
|
||||||
|
|
||||||
|
const Hero = () => {
|
||||||
|
const { t } = useLanguage()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="relative min-h-screen flex items-center pt-20 overflow-hidden">
|
||||||
|
{/* Background with diagonal slice */}
|
||||||
|
<div className="absolute inset-0 bg-diagonal -z-10" />
|
||||||
|
<div className="absolute bottom-0 left-0 w-full h-[20vh] bg-background transform -skew-y-3 origin-bottom-left -z-10" />
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div className="text-white space-y-8">
|
||||||
|
<div className="flex items-center space-x-1 py-1 px-3 bg-white/10 rounded-full w-fit backdrop-blur-sm border border-white/20">
|
||||||
|
<div className="flex">
|
||||||
|
{[1, 2, 3, 4, 5].map((i) => (
|
||||||
|
<Star key={i} className="w-4 h-4 fill-white text-white" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-semibold ml-2 text-white/90">4.9/5 {t.hero.rating}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-5xl md:text-7xl font-black leading-[0.9] tracking-tighter">
|
||||||
|
{t.hero.title} <br />
|
||||||
|
<span className="text-primary-foreground underline decoration-primary decoration-8 underline-offset-[12px]">
|
||||||
|
{t.hero.titleAccent}
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-xl text-white/80 max-w-lg leading-relaxed font-medium">
|
||||||
|
{t.hero.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-4 pt-4">
|
||||||
|
<Button asChild size="lg" className="bg-slate-900 text-white hover:bg-slate-800 rounded-full px-10 h-14 text-sm font-bold uppercase tracking-widest shadow-xl">
|
||||||
|
<a href="https://app.skyflytravel.hu/public/offers/new" target="_blank" rel="noopener noreferrer">
|
||||||
|
{t.hero.booking}
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
<Button asChild size="lg" variant="default" className="bg-white text-slate-900 hover:bg-slate-100 rounded-full px-10 h-14 text-sm font-bold uppercase tracking-widest shadow-lg">
|
||||||
|
<Link href="/arak">{t.hero.fares}</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative hidden lg:block">
|
||||||
|
{/* Main Floating Card - Booking Status */}
|
||||||
|
<div className="animate-float">
|
||||||
|
<Card className="w-[500px] bg-white shadow-2xl rounded-[2.5rem] p-6 transform -rotate-2 overflow-hidden border-none backdrop-blur-sm bg-white/95">
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex justify-between items-center border-b border-slate-100 pb-4">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
||||||
|
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{t.hero.cards.activeBooking}</span>
|
||||||
|
</div>
|
||||||
|
<div className="py-1 px-3 bg-primary/10 rounded-full text-primary text-[10px] font-bold">{t.hero.cards.fixedPrice}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-[10px] text-slate-400 font-bold uppercase">{t.hero.cards.departure}</p>
|
||||||
|
<p className="text-xl font-black text-slate-900">{t.hero.cards.fromCity}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 px-6 flex flex-col items-center">
|
||||||
|
<div className="w-full h-px bg-slate-200 relative">
|
||||||
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-2">
|
||||||
|
<Star className="w-4 h-4 text-primary fill-primary" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right space-y-1">
|
||||||
|
<p className="text-[10px] text-slate-400 font-bold uppercase">{t.hero.cards.destination}</p>
|
||||||
|
<p className="text-xl font-black text-slate-900">{t.hero.cards.toAirport}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-4 pt-4">
|
||||||
|
<div className="p-3 bg-slate-50 rounded-2xl flex flex-col items-center text-center space-y-1 border border-slate-100">
|
||||||
|
<Clock className="w-5 h-5 text-primary" />
|
||||||
|
<p className="text-[10px] font-bold">{t.hero.cards.duration}</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-slate-50 rounded-2xl flex flex-col items-center text-center space-y-1 border border-slate-100">
|
||||||
|
<Users className="w-5 h-5 text-primary" />
|
||||||
|
<p className="text-[10px] font-bold">{t.hero.cards.passengers}</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-slate-50 rounded-2xl flex flex-col items-center text-center space-y-1 border border-slate-100">
|
||||||
|
<ShieldCheck className="w-5 h-5 text-primary" />
|
||||||
|
<p className="text-[10px] font-bold">{t.hero.cards.insured}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button className="w-full h-12 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-bold text-xs uppercase tracking-widest">
|
||||||
|
{t.hero.cards.manageBooking}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Overlapping small cards */}
|
||||||
|
<div className="absolute -top-16 -right-10 animate-float animation-delay-2000">
|
||||||
|
<Card className="w-56 bg-white shadow-xl rounded-3xl p-3 transform rotate-6 border-none overflow-hidden group">
|
||||||
|
<div className="relative w-full h-40 rounded-2xl overflow-hidden mb-3">
|
||||||
|
<Image
|
||||||
|
src="/images/family.jpg"
|
||||||
|
alt="Family Travel"
|
||||||
|
fill
|
||||||
|
className="object-cover group-hover:scale-110 transition-transform duration-500"
|
||||||
|
/>
|
||||||
|
<div className="absolute top-2 right-2 bg-primary text-white text-[10px] font-bold px-2 py-1 rounded-lg shadow-lg">{t.hero.cards.familyTag}</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-1">
|
||||||
|
<p className="text-sm font-black text-slate-900">{t.hero.cards.freeChildSeat}</p>
|
||||||
|
<p className="text-[10px] text-slate-500 font-medium">{t.hero.cards.familyDesc}</p>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute -bottom-16 -left-10 animate-float animation-delay-4000">
|
||||||
|
<Card className="w-64 bg-white shadow-xl rounded-3xl p-3 transform -rotate-3 border-none overflow-hidden group">
|
||||||
|
<div className="flex items-center space-x-3 mb-3">
|
||||||
|
<div className="relative w-16 h-16 rounded-2xl overflow-hidden shrink-0">
|
||||||
|
<Image
|
||||||
|
src="/images/premium_van.png"
|
||||||
|
alt="Premium Fleet"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-black text-slate-900">{t.hero.cards.premiumFleet}</p>
|
||||||
|
<p className="text-[10px] text-primary font-bold uppercase">{t.hero.cards.mercedes}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between pt-2 border-t border-slate-50">
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<div className="w-1.5 h-1.5 bg-green-500 rounded-full" />
|
||||||
|
<span className="text-[9px] font-bold text-slate-400 uppercase">{t.hero.cards.nonStop}</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-[10px] font-black text-slate-900">{t.hero.cards.supportTime}</span>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Review Snippet */}
|
||||||
|
<div className="absolute top-1/2 -right-16 translate-y-1/2 animate-float animation-delay-3000">
|
||||||
|
<Card className="w-52 bg-primary/10 backdrop-blur-md shadow-lg rounded-2xl p-4 border border-white/20 transform -rotate-6">
|
||||||
|
<div className="flex mb-2">
|
||||||
|
{[1, 2, 3, 4, 5].map((i) => (
|
||||||
|
<Star key={i} className="w-3 h-3 fill-primary text-primary" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-[10px] font-medium text-slate-800 leading-tight italic">
|
||||||
|
{t.hero.cards.reviewText}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center space-x-2 mt-3">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center text-[8px] font-bold">{t.hero.cards.reviewInitial}</div>
|
||||||
|
<span className="text-[8px] font-bold text-slate-500">{t.hero.cards.reviewAuthor}</span>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Hero
|
||||||
|
|
@ -0,0 +1,176 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import Link from "next/link"
|
||||||
|
import Image from "next/image"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { useLanguage } from "@/lib/language-context"
|
||||||
|
import { Globe, Menu } from "lucide-react"
|
||||||
|
|
||||||
|
interface NavbarProps {
|
||||||
|
darkMode?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const Navbar = ({ darkMode = false }: NavbarProps) => {
|
||||||
|
const [isScrolled, setIsScrolled] = React.useState(false)
|
||||||
|
const [isMenuOpen, setIsMenuOpen] = React.useState(false)
|
||||||
|
const { language, setLanguage, t } = useLanguage()
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
setIsScrolled(window.scrollY > 20)
|
||||||
|
}
|
||||||
|
window.addEventListener("scroll", handleScroll)
|
||||||
|
return () => window.removeEventListener("scroll", handleScroll)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav
|
||||||
|
className={cn(
|
||||||
|
"fixed top-0 left-0 right-0 z-50 transition-all duration-300 px-6 py-4",
|
||||||
|
isScrolled
|
||||||
|
? "bg-white/80 backdrop-blur-md shadow-sm"
|
||||||
|
: "bg-transparent"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
||||||
|
<Link href="/" className="flex items-center space-x-3 group z-50">
|
||||||
|
<div className="relative w-40 h-10 md:w-48 md:h-12">
|
||||||
|
<Image
|
||||||
|
src="/images/logo-white.png"
|
||||||
|
alt="SkyFly Travel"
|
||||||
|
fill
|
||||||
|
className="object-contain"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="hidden md:flex items-center space-x-8">
|
||||||
|
<Link
|
||||||
|
href="/arak"
|
||||||
|
className={cn(
|
||||||
|
"text-sm font-medium transition-colors",
|
||||||
|
isScrolled || !darkMode ? "text-slate-600 hover:text-primary" : "text-white/90 hover:text-slate-900"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{t.nav.prices}
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/szolgaltatasok"
|
||||||
|
className={cn(
|
||||||
|
"text-sm font-medium transition-colors",
|
||||||
|
isScrolled || !darkMode ? "text-slate-600 hover:text-primary" : "text-white/90 hover:text-slate-900"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{t.nav.services}
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/feltetelek"
|
||||||
|
className={cn(
|
||||||
|
"text-sm font-medium transition-colors",
|
||||||
|
isScrolled || !darkMode ? "text-slate-600 hover:text-primary" : "text-white/90 hover:text-slate-900"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{t.nav.conditions}
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/flotta"
|
||||||
|
className={cn(
|
||||||
|
"text-sm font-medium transition-colors",
|
||||||
|
isScrolled || !darkMode ? "text-slate-600 hover:text-primary" : "text-white/90 hover:text-slate-900"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{t.nav.fleet}
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/kapcsolat"
|
||||||
|
className={cn(
|
||||||
|
"text-sm font-medium transition-colors",
|
||||||
|
isScrolled || !darkMode ? "text-slate-600 hover:text-primary" : "text-white/90 hover:text-slate-900"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{t.nav.contact}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden md:flex items-center space-x-4">
|
||||||
|
{/* Language Switcher */}
|
||||||
|
<div className="flex items-center bg-white/10 rounded-full p-1 border border-white/10 backdrop-blur-sm mr-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setLanguage("hu")}
|
||||||
|
className={cn(
|
||||||
|
"text-[10px] font-bold px-3 py-1 rounded-full transition-all",
|
||||||
|
language === "hu"
|
||||||
|
? "bg-white text-slate-900 shadow-sm"
|
||||||
|
: (isScrolled || !darkMode ? "text-slate-600 hover:text-slate-900" : "text-white/60 hover:text-white")
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
HUN
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setLanguage("en")}
|
||||||
|
className={cn(
|
||||||
|
"text-[10px] font-bold px-3 py-1 rounded-full transition-all",
|
||||||
|
language === "en"
|
||||||
|
? "bg-white text-slate-900 shadow-sm"
|
||||||
|
: (isScrolled || !darkMode ? "text-slate-600 hover:text-slate-900" : "text-white/60 hover:text-white")
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
ENG
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
variant={isScrolled ? "default" : (darkMode ? "outline" : "pill")}
|
||||||
|
className={cn(
|
||||||
|
"rounded-full px-6",
|
||||||
|
(!isScrolled && darkMode) && "text-white border-white/20 hover:bg-white/10 bg-transparent",
|
||||||
|
(!isScrolled && !darkMode) && "bg-primary text-white"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<a href="https://app.skyflytravel.hu/public/offers/new" target="_blank" rel="noopener noreferrer" className="text-[10px] md:text-sm">
|
||||||
|
{t.nav.cta}
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Menu Toggle */}
|
||||||
|
<button
|
||||||
|
className="md:hidden p-2 z-50 text-white bg-black/50 rounded-lg backdrop-blur-sm hover:bg-black/70 transition-colors"
|
||||||
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||||
|
>
|
||||||
|
<Menu className="w-6 h-6" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Menu Overlay */}
|
||||||
|
{isMenuOpen && (
|
||||||
|
<div className="fixed inset-0 bg-slate-900 z-40 flex flex-col pt-32 px-8 animate-in slide-in-from-top duration-300">
|
||||||
|
<div className="flex flex-col space-y-6 text-center">
|
||||||
|
<Link onClick={() => setIsMenuOpen(false)} href="/arak" className="text-2xl font-bold text-white hover:text-primary transition-colors">{t.nav.prices}</Link>
|
||||||
|
<Link onClick={() => setIsMenuOpen(false)} href="/szolgaltatasok" className="text-2xl font-bold text-white hover:text-primary transition-colors">{t.nav.services}</Link>
|
||||||
|
<Link onClick={() => setIsMenuOpen(false)} href="/feltetelek" className="text-2xl font-bold text-white hover:text-primary transition-colors">{t.nav.conditions}</Link>
|
||||||
|
<Link onClick={() => setIsMenuOpen(false)} href="/flotta" className="text-2xl font-bold text-white hover:text-primary transition-colors">{t.nav.fleet}</Link>
|
||||||
|
<Link onClick={() => setIsMenuOpen(false)} href="/kapcsolat" className="text-2xl font-bold text-white hover:text-primary transition-colors">{t.nav.contact}</Link>
|
||||||
|
|
||||||
|
<div className="flex justify-center gap-4 pt-8">
|
||||||
|
<button onClick={() => { setLanguage("hu"); setIsMenuOpen(false) }} className={cn("px-6 py-2 rounded-full font-bold", language === "hu" ? "bg-white text-slate-900" : "bg-white/10 text-white")}>HUN</button>
|
||||||
|
<button onClick={() => { setLanguage("en"); setIsMenuOpen(false) }} className={cn("px-6 py-2 rounded-full font-bold", language === "en" ? "bg-white text-slate-900" : "bg-white/10 text-white")}>ENG</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button asChild size="lg" className="mt-8 bg-primary text-white rounded-full">
|
||||||
|
<a href="https://app.skyflytravel.hu/public/offers/new" target="_blank" rel="noopener noreferrer">
|
||||||
|
{t.nav.cta}
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</nav>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Navbar
|
||||||
|
|
@ -0,0 +1,160 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Info, Tag, Check, Shield } from "lucide-react"
|
||||||
|
import { useLanguage } from "@/lib/language-context"
|
||||||
|
|
||||||
|
interface PricingRow {
|
||||||
|
persons: string
|
||||||
|
express: string
|
||||||
|
private: string
|
||||||
|
classic?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SpecialPackage {
|
||||||
|
name: string
|
||||||
|
price: string
|
||||||
|
description: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PricingTableProps {
|
||||||
|
route: string
|
||||||
|
rows: PricingRow[]
|
||||||
|
specials?: SpecialPackage[]
|
||||||
|
vipInfo?: string[]
|
||||||
|
effectiveFrom?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const PricingTable = ({
|
||||||
|
route,
|
||||||
|
rows,
|
||||||
|
specials,
|
||||||
|
vipInfo,
|
||||||
|
effectiveFrom
|
||||||
|
}: PricingTableProps) => {
|
||||||
|
const { t } = useLanguage()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full space-y-8 mb-24">
|
||||||
|
{/* Route Header matching FeatureSection style */}
|
||||||
|
<div className="space-y-2 mb-8">
|
||||||
|
<h3 className="text-5xl md:text-7xl font-black uppercase tracking-tighter opacity-10 text-primary">
|
||||||
|
{route.includes("BÉCS") || route.includes("VIENNA") ? "VIENNA" : "BUDAPEST"}
|
||||||
|
</h3>
|
||||||
|
<h2 className="text-2xl md:text-3xl font-black tracking-tight -mt-8 md:-mt-10 ml-1 text-slate-900 max-w-2xl uppercase">
|
||||||
|
{route}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-[2.5rem] shadow-xl border border-slate-100 overflow-hidden">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-left border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-slate-50/50 text-slate-500 text-[10px] uppercase tracking-[0.2em] border-b border-slate-100">
|
||||||
|
<th className="py-8 px-10 font-bold">{t.pricing.table.passengers}</th>
|
||||||
|
<th className="py-8 px-4 font-bold text-center">
|
||||||
|
<div className="flex flex-col items-center gap-1 opacity-40">
|
||||||
|
<span className="text-slate-400">{t.pricing.table.classic}</span>
|
||||||
|
<span className="text-[10px] lowercase normal-case tracking-normal">{t.pricing.table.classicNote}</span>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th className="py-8 px-4 font-bold text-center">
|
||||||
|
<div className="flex items-center justify-center gap-2">
|
||||||
|
<span className="text-primary font-black">{t.pricing.table.express}</span>
|
||||||
|
<div className="bg-primary/10 p-1 rounded-md">
|
||||||
|
<Tag className="w-3 h-3 text-primary" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th className="py-8 px-10 font-bold text-center">
|
||||||
|
<div className="flex items-center justify-center gap-2">
|
||||||
|
<span className="text-secondary font-black">{t.pricing.table.private}</span>
|
||||||
|
<div className="bg-secondary/10 p-1 rounded-md">
|
||||||
|
<Shield className="w-3 h-3 text-secondary" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="text-slate-700">
|
||||||
|
{rows.map((row, idx) => (
|
||||||
|
<tr
|
||||||
|
key={idx}
|
||||||
|
className={cn(
|
||||||
|
"border-b border-slate-50 transition-colors hover:bg-slate-50/80",
|
||||||
|
idx % 2 === 0 ? "bg-white" : "bg-slate-50/20"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<td className="py-5 px-10 font-bold text-slate-900">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-1.5 h-1.5 rounded-full bg-primary" />
|
||||||
|
{row.persons}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="py-5 px-4 text-center text-slate-300">
|
||||||
|
<span className="text-xs">—</span>
|
||||||
|
</td>
|
||||||
|
<td className="py-5 px-4 text-center">
|
||||||
|
<div className="flex items-center justify-center gap-2">
|
||||||
|
<span className="font-extrabold text-blue-950">{row.express}</span>
|
||||||
|
<Info className="w-3 h-3 text-slate-300 hover:text-primary cursor-help transition-colors" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="py-5 px-10 text-center">
|
||||||
|
<span className="font-extrabold text-white px-5 py-1.5 bg-secondary rounded-full text-xs tracking-wider shadow-sm">
|
||||||
|
{row.private}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{specials && specials.length > 0 && (
|
||||||
|
<div className="bg-gradient-to-r from-slate-950 to-slate-900 text-white p-10 space-y-8">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
|
||||||
|
{specials.map((special, idx) => (
|
||||||
|
<div key={idx} className="space-y-3 group">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="bg-primary p-2 rounded-xl group-hover:scale-110 transition-transform duration-300 shadow-lg shadow-primary/20">
|
||||||
|
<Check className="w-4 h-4 text-white" />
|
||||||
|
</div>
|
||||||
|
<span className="font-black text-xl text-white group-hover:text-primary transition-colors tracking-tight">
|
||||||
|
{special.name} — {special.price}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-400 text-sm leading-relaxed pl-12 font-medium">
|
||||||
|
{special.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{(vipInfo && vipInfo.length > 0) && (
|
||||||
|
<div className="pt-8 border-t border-white/5">
|
||||||
|
<h4 className="text-[10px] uppercase tracking-[0.3em] text-primary font-black mb-6">{t.pricing.table.premium}</h4>
|
||||||
|
<div className="flex flex-wrap gap-x-12 gap-y-4">
|
||||||
|
{vipInfo.map((info, idx) => (
|
||||||
|
<div key={idx} className="flex items-center gap-3 text-sm text-slate-300 font-bold italic">
|
||||||
|
<div className="w-2 h-2 rounded-full bg-primary shadow-[0_0_10px_rgba(217,163,33,0.5)]" />
|
||||||
|
{info}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{effectiveFrom && (
|
||||||
|
<div className="text-right text-slate-400 text-[10px] uppercase tracking-[0.2em] font-black">
|
||||||
|
{effectiveFrom}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PricingTable
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import { ArrowUp } from "lucide-react"
|
||||||
|
import { motion, AnimatePresence } from "framer-motion"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const ScrollToTop = () => {
|
||||||
|
const [isVisible, setIsVisible] = React.useState(false)
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const toggleVisibility = () => {
|
||||||
|
if (window.scrollY > 300) {
|
||||||
|
setIsVisible(true)
|
||||||
|
} else {
|
||||||
|
setIsVisible(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("scroll", toggleVisibility)
|
||||||
|
return () => window.removeEventListener("scroll", toggleVisibility)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const scrollToTop = () => {
|
||||||
|
window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: "smooth",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{isVisible && (
|
||||||
|
<motion.button
|
||||||
|
initial={{ opacity: 0, scale: 0.5, y: 20 }}
|
||||||
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, scale: 0.5, y: 20 }}
|
||||||
|
whileHover={{ scale: 1.1, y: -5 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
onClick={scrollToTop}
|
||||||
|
className={cn(
|
||||||
|
"fixed bottom-8 right-8 z-[60] p-4 rounded-2xl",
|
||||||
|
"bg-primary text-white shadow-[0_20px_40px_-10px_rgba(217,163,33,0.3)]",
|
||||||
|
"backdrop-blur-md border border-white/20",
|
||||||
|
"transition-shadow duration-300 hover:shadow-[0_25px_50px_-12px_rgba(217,163,33,0.5)]",
|
||||||
|
"flex items-center justify-center group"
|
||||||
|
)}
|
||||||
|
aria-label="Scroll to top"
|
||||||
|
>
|
||||||
|
<ArrowUp className="w-6 h-6 group-hover:animate-bounce" />
|
||||||
|
</motion.button>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ScrollToTop
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||||
|
outline:
|
||||||
|
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||||
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
pill: "bg-primary text-primary-foreground shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300 rounded-full",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-11 px-8 py-2",
|
||||||
|
sm: "h-9 rounded-full px-6 text-xs",
|
||||||
|
lg: "h-12 rounded-full px-10 text-base",
|
||||||
|
icon: "h-9 w-9",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export interface ButtonProps
|
||||||
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
|
VariantProps<typeof buttonVariants> {
|
||||||
|
asChild?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Button.displayName = "Button"
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const Card = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"rounded-3xl border bg-card text-card-foreground shadow-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
Card.displayName = "Card"
|
||||||
|
|
||||||
|
const CardHeader = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardHeader.displayName = "CardHeader"
|
||||||
|
|
||||||
|
const CardTitle = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLHeadingElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<h3
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"text-2xl font-semibold leading-none tracking-tight",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardTitle.displayName = "CardTitle"
|
||||||
|
|
||||||
|
const CardDescription = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLParagraphElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<p
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardDescription.displayName = "CardDescription"
|
||||||
|
|
||||||
|
const CardContent = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||||
|
))
|
||||||
|
CardContent.displayName = "CardContent"
|
||||||
|
|
||||||
|
const CardFooter = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("flex items-center p-6 pt-0", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardFooter.displayName = "CardFooter"
|
||||||
|
|
||||||
|
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
|
||||||
|
({ className, type, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
className={cn(
|
||||||
|
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Input.displayName = "Input"
|
||||||
|
|
||||||
|
export { Input }
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
|
||||||
|
({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<textarea
|
||||||
|
className={cn(
|
||||||
|
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Textarea.displayName = "Textarea"
|
||||||
|
|
||||||
|
export { Textarea }
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* SkyFly Travel - Contact Form Backend (PHP Fallback for Static Export)
|
||||||
|
*
|
||||||
|
* Instructions:
|
||||||
|
* 1. Upload this file to your server (e.g., as contact.php).
|
||||||
|
* 2. Update the ContactForm.tsx component's fetch URL to point to this script.
|
||||||
|
* 3. Configure your SMTP settings and reCaptcha Secret Key below.
|
||||||
|
*/
|
||||||
|
|
||||||
|
header("Access-Control-Allow-Origin: *");
|
||||||
|
header("Access-Control-Allow-Headers: Content-Type");
|
||||||
|
header("Content-Type: application/json");
|
||||||
|
|
||||||
|
// --- CONFIGURATION ---
|
||||||
|
$secretKey = "YOUR_RECAPTCHA_SECRET_KEY"; // Replace with your Google reCaptcha Secret Key
|
||||||
|
$toEmail = "bognar.szialrd83@gmail.com";
|
||||||
|
// ---------------------
|
||||||
|
|
||||||
|
if ($_SERVER["REQUEST_METHOD"] === "POST") {
|
||||||
|
$data = json_decode(file_get_contents("php://input"), true);
|
||||||
|
|
||||||
|
$name = strip_tags($data["name"]);
|
||||||
|
$email = filter_var($data["email"], FILTER_SANITIZE_EMAIL);
|
||||||
|
$phone = strip_tags($data["phone"]);
|
||||||
|
$service = strip_tags($data["service"]);
|
||||||
|
$message = strip_tags($data["message"]);
|
||||||
|
$recaptcha = $data["recaptcha"];
|
||||||
|
|
||||||
|
// 1. Verify reCaptcha
|
||||||
|
$verifyResponse = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$recaptcha");
|
||||||
|
$responseData = json_decode($verifyResponse);
|
||||||
|
|
||||||
|
if (!$responseData->success) {
|
||||||
|
http_response_code(400);
|
||||||
|
echo json_encode(["error" => "reCaptcha verification failed"]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Prepare HTML Email
|
||||||
|
$subject = "Weboldal Üzenet: $name ($service)";
|
||||||
|
|
||||||
|
$htmlEmail = "
|
||||||
|
<html>
|
||||||
|
<body style='font-family: sans-serif; color: #333;'>
|
||||||
|
<div style='max-width: 600px; margin: 20px auto; border: 1px solid #ddd; border-radius: 15px; overflow: hidden;'>
|
||||||
|
<div style='background: linear-gradient(135deg, #D9A321 0%, #1A1A1A 100%); color: white; padding: 30px; text-align: center;'>
|
||||||
|
<h1 style='margin: 0;'>Új üzenet érkezett</h1>
|
||||||
|
</div>
|
||||||
|
<div style='padding: 30px;'>
|
||||||
|
<p><strong>Név:</strong> $name</p>
|
||||||
|
<p><strong>Email:</strong> $email</p>
|
||||||
|
<p><strong>Telefonszám:</strong> $phone</p>
|
||||||
|
<p><strong>Szolgáltatás:</strong> $service</p>
|
||||||
|
<hr style='border: 0; border-top: 1px solid #eee; margin: 20px 0;'>
|
||||||
|
<p><strong>Üzenet:</strong></p>
|
||||||
|
<p style='white-space: pre-wrap; background: #f9f9f9; padding: 15px; border-radius: 10px;'>$message</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
";
|
||||||
|
|
||||||
|
$headers = "MIME-Version: 1.0" . "\r\n";
|
||||||
|
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
|
||||||
|
$headers .= "From: <noreply@skyflytravel.hu>" . "\r\n";
|
||||||
|
|
||||||
|
// 3. Send Email
|
||||||
|
if (mail($toEmail, $subject, $htmlEmail, $headers)) {
|
||||||
|
echo json_encode(["success" => true]);
|
||||||
|
} else {
|
||||||
|
http_response_code(500);
|
||||||
|
echo json_encode(["error" => "Failed to send email"]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { defineConfig, globalIgnores } from "eslint/config";
|
||||||
|
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||||
|
import nextTs from "eslint-config-next/typescript";
|
||||||
|
|
||||||
|
const eslintConfig = defineConfig([
|
||||||
|
...nextVitals,
|
||||||
|
...nextTs,
|
||||||
|
// Override default ignores of eslint-config-next.
|
||||||
|
globalIgnores([
|
||||||
|
// Default ignores of eslint-config-next:
|
||||||
|
".next/**",
|
||||||
|
"out/**",
|
||||||
|
"build/**",
|
||||||
|
"next-env.d.ts",
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default eslintConfig;
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 295 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 419 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 337 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 395 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 343 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 343 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 397 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 574 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 732 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 349 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 358 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
|
|
@ -0,0 +1,138 @@
|
||||||
|
}/* GLOBAL STYLES
|
||||||
|
-------------------------------------------------- */
|
||||||
|
/* Padding below the footer and lighter body text */
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* CUSTOMIZE THE NAVBAR
|
||||||
|
-------------------------------------------------- */
|
||||||
|
|
||||||
|
/* Special class on .container surrounding .navbar, used for positioning it into place. */
|
||||||
|
.navbar-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Flip around the padding for proper display in narrow viewports */
|
||||||
|
.navbar-wrapper > .container {
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.navbar-wrapper .navbar {
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
.navbar-wrapper .navbar .container {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* CUSTOMIZE THE CAROUSEL
|
||||||
|
-------------------------------------------------- */
|
||||||
|
|
||||||
|
/* Carousel base class */
|
||||||
|
/* Since positioning the image, we need to help out the caption */
|
||||||
|
|
||||||
|
/* Declare heights because of positioning of img element */
|
||||||
|
|
||||||
|
.row {
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel {
|
||||||
|
box-shadow: 0px 0px 20px 10px #111113;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel .item {
|
||||||
|
margin-top: 123px;
|
||||||
|
background-color: #777;
|
||||||
|
}
|
||||||
|
.carousel-inner > .item > img {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
min-width: 100%;
|
||||||
|
box-shadow: 0px 0px 20px 10px #111113;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* MARKETING CONTENT
|
||||||
|
-------------------------------------------------- */
|
||||||
|
|
||||||
|
/* Center align the text within the three columns below the carousel */
|
||||||
|
.marketing .col-lg-4 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing h2 {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.marketing .col-lg-4 p {
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Featurettes
|
||||||
|
------------------------- */
|
||||||
|
|
||||||
|
.featurette-divider {
|
||||||
|
margin: 80px 0; /* Space out the Bootstrap <hr> more */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Thin out the marketing headings */
|
||||||
|
.featurette-heading {
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* RESPONSIVE CSS
|
||||||
|
-------------------------------------------------- */
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
/* Navbar positioning foo */
|
||||||
|
.navbar-wrapper {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.navbar-wrapper .container {
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
.navbar-wrapper .navbar {
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The navbar becomes detached from the top, so we round the corners */
|
||||||
|
.navbar-wrapper .navbar {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bump up size of carousel content */
|
||||||
|
.carousel-caption p {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 21px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featurette-heading {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.featurette-heading {
|
||||||
|
margin-top: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 535 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 461 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 663 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 709 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue