83 lines
6.3 KiB
TypeScript
83 lines
6.3 KiB
TypeScript
"use client"
|
|
|
|
import Navbar from "@/components/navbar"
|
|
import Footer from "@/components/footer"
|
|
import PageReveal from "@/components/page-reveal"
|
|
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 (
|
|
<PageReveal 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">
|
|
{t.discounts.tiktok.title} <br />
|
|
<span className="text-primary italic">{t.discounts.pages.tiktok.discountLabel}</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">{t.discounts.pages.tiktok.claimTitle}</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={t.common.tiktokHandle} href="https://www.tiktok.com/@skyflytravel.transfer?refer=embed">{t.common.tiktokHandle}</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>
|
|
{t.discounts.pages.tiktok.openPage}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<Footer />
|
|
</PageReveal>
|
|
)
|
|
} |