Claude/nz travel website rebuild jk ml s #3943
11 changed files+724−176
Modifiedsrc/app/about/page.tsx+11−2View fileUnifiedSplit
@@ -1,5 +1,6 @@
11import type { Metadata } from "next";
22import Link from "next/link";
3import Image from "next/image";
34import AnimatedSection from "@/components/AnimatedSection";
45import { STATS, SITE_CONFIG } from "@/lib/constants";
56
@@ -18,8 +19,16 @@ export default function AboutPage() {
1819 return (
1920 <>
2021 {/* Hero */}
21 <section className="relative pt-32 pb-20 bg-gradient-to-br from-slate-900 via-ocean-900 to-teal-900 overflow-hidden">
22 <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(14,165,233,0.15),transparent_50%)]" />
22 <section className="relative pt-32 pb-20 overflow-hidden">
23 <Image
24 src="https://images.unsplash.com/photo-1504893524553-b855bce32c67?w=1920&q=80&fit=crop"
25 alt="New Zealand landscape"
26 fill
27 priority
28 className="object-cover"
29 sizes="100vw"
30 />
31 <div className="absolute inset-0 bg-gradient-to-br from-slate-900/80 via-ocean-900/70 to-teal-900/80" />
2332 <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
2433 <AnimatedSection>
2534 <span className="inline-block px-4 py-1.5 rounded-full bg-white/10 text-teal-300 text-sm font-medium mb-6">
Modifiedsrc/app/high-school-programme/page.tsx+11−2View fileUnifiedSplit
@@ -1,5 +1,6 @@
11import type { Metadata } from "next";
22import Link from "next/link";
3import Image from "next/image";
34import AnimatedSection from "@/components/AnimatedSection";
45import { PARTNER_SCHOOLS } from "@/lib/constants";
56
@@ -18,8 +19,16 @@ export default function HighSchoolPage() {
1819 return (
1920 <>
2021 {/* Hero */}
21 <section className="relative pt-32 pb-20 bg-gradient-to-br from-slate-900 via-teal-900 to-forest-900 overflow-hidden">
22 <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,rgba(34,197,94,0.1),transparent_50%)]" />
22 <section className="relative pt-32 pb-20 overflow-hidden">
23 <Image
24 src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=1920&q=80&fit=crop"
25 alt="Students studying"
26 fill
27 priority
28 className="object-cover"
29 sizes="100vw"
30 />
31 <div className="absolute inset-0 bg-gradient-to-br from-slate-900/80 via-teal-900/70 to-forest-900/80" />
2332 <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
2433 <AnimatedSection>
2534 <span className="inline-block px-4 py-1.5 rounded-full bg-white/10 text-forest-300 text-sm font-medium mb-6">
Modifiedsrc/app/homestay/page.tsx+11−2View fileUnifiedSplit
@@ -1,5 +1,6 @@
11import type { Metadata } from "next";
22import Link from "next/link";
3import Image from "next/image";
34import AnimatedSection from "@/components/AnimatedSection";
45
56export const metadata: Metadata = {
@@ -17,8 +18,16 @@ export default function HomestayPage() {
1718 return (
1819 <>
1920 {/* Hero */}
20 <section className="relative pt-32 pb-20 bg-gradient-to-br from-slate-900 via-gold-900 to-teal-900 overflow-hidden">
21 <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(245,158,11,0.1),transparent_50%)]" />
21 <section className="relative pt-32 pb-20 overflow-hidden">
22 <Image
23 src="https://images.unsplash.com/photo-1500375592092-40eb2168fd21?w=1920&q=80&fit=crop"
24 alt="Beautiful New Zealand coastline"
25 fill
26 priority
27 className="object-cover"
28 sizes="100vw"
29 />
30 <div className="absolute inset-0 bg-gradient-to-br from-slate-900/80 via-gold-900/70 to-teal-900/80" />
2231 <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
2332 <AnimatedSection>
2433 <span className="inline-block px-4 py-1.5 rounded-full bg-white/10 text-gold-300 text-sm font-medium mb-6">
Modifiedsrc/app/language-school-programme/page.tsx+11−2View fileUnifiedSplit
@@ -1,5 +1,6 @@
11import type { Metadata } from "next";
22import Link from "next/link";
3import Image from "next/image";
34import AnimatedSection from "@/components/AnimatedSection";
45
56export const metadata: Metadata = {
@@ -60,8 +61,16 @@ export default function LanguageSchoolPage() {
6061 return (
6162 <>
6263 {/* Hero */}
63 <section className="relative pt-32 pb-20 bg-gradient-to-br from-slate-900 via-ocean-900 to-teal-900 overflow-hidden">
64 <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(14,165,233,0.15),transparent_50%)]" />
64 <section className="relative pt-32 pb-20 overflow-hidden">
65 <Image
66 src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1920&q=80&fit=crop"
67 alt="Students learning in classroom"
68 fill
69 priority
70 className="object-cover"
71 sizes="100vw"
72 />
73 <div className="absolute inset-0 bg-gradient-to-br from-slate-900/80 via-ocean-900/70 to-teal-900/80" />
6574 <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
6675 <AnimatedSection>
6776 <span className="inline-block px-4 py-1.5 rounded-full bg-white/10 text-ocean-300 text-sm font-medium mb-6">
Modifiedsrc/app/page.tsx+176−161View fileUnifiedSplit
@@ -1,99 +1,90 @@
11import Link from "next/link";
2import Image from "next/image";
23import AnimatedSection from "@/components/AnimatedSection";
4import HeroSlider from "@/components/HeroSlider";
5import VideoShowcase from "@/components/VideoShowcase";
6import DestinationShowcase from "@/components/DestinationShowcase";
7import ImageStrip from "@/components/ImageStrip";
38import { SERVICES, TESTIMONIALS, STATS, SITE_CONFIG } from "@/lib/constants";
49
10/* ───────────────────────────────────── HERO ───────────────────────────────── */
11
512function HeroSection() {
613 return (
714 <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
8 {/* Background gradient simulating NZ landscape */}
9 <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-teal-900 to-ocean-900" />
10 <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(14,165,233,0.15),transparent_50%)]" />
11 <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,rgba(34,197,94,0.1),transparent_50%)]" />
12
13 {/* Decorative elements */}
14 <div className="absolute top-20 left-10 w-72 h-72 bg-teal-500/10 rounded-full blur-3xl" />
15 <div className="absolute bottom-20 right-10 w-96 h-96 bg-ocean-500/10 rounded-full blur-3xl" />
16
17 {/* Mountain silhouette */}
18 <div className="absolute bottom-0 left-0 right-0">
19 <svg
20 viewBox="0 0 1440 320"
21 className="w-full text-white"
22 preserveAspectRatio="none"
23 >
24 <path
25 fill="currentColor"
26 d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,218.7C672,235,768,245,864,234.7C960,224,1056,192,1152,181.3C1248,171,1344,181,1392,186.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
27 />
28 </svg>
29 </div>
15 {/* Cinematic background slider */}
16 <HeroSlider />
3017
31 <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-32 pb-48 text-center">
18 {/* Hero content */}
19 <div className="relative z-20 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-32 pb-56 text-center">
3220 <AnimatedSection delay={0.1}>
33 <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-teal-300 text-sm font-medium mb-8">
21 <span className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white text-sm font-medium mb-8">
3422 <span className="w-2 h-2 rounded-full bg-teal-400 animate-pulse" />
3523 Welcoming students since {SITE_CONFIG.founded}
3624 </span>
3725 </AnimatedSection>
3826
3927 <AnimatedSection delay={0.2}>
40 <h1 className="font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-tight mb-6">
41 Your Gateway to{" "}
28 <h1 className="font-heading text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-white leading-[1.05] mb-6 drop-shadow-lg">
29 Study.{" "}
4230 <span className="text-transparent bg-clip-text bg-gradient-to-r from-teal-300 via-ocean-300 to-forest-300">
43 New Zealand
44 </span>
45 <br />
46 Education & Adventure
31 Explore.
32 </span>{" "}
33 Belong.
4734 </h1>
4835 </AnimatedSection>
4936
50 <AnimatedSection delay={0.3}>
51 <p className="mx-auto max-w-2xl text-lg sm:text-xl text-slate-300 leading-relaxed mb-10">
52 Combine world-class education with breathtaking experiences in
53 Aotearoa. High school placements, language courses, homestay living,
37 <AnimatedSection delay={0.35}>
38 <p className="mx-auto max-w-2xl text-lg sm:text-xl text-white/90 leading-relaxed mb-10 drop-shadow">
39 World-class education meets breathtaking adventure in Aotearoa New
40 Zealand. High school placements, language courses, homestay families,
5441 and chaperoned tours across one of Earth's most beautiful countries.
5542 </p>
5643 </AnimatedSection>
5744
58 <AnimatedSection delay={0.4}>
45 <AnimatedSection delay={0.5}>
5946 <div className="flex flex-col sm:flex-row gap-4 justify-center">
6047 <Link
6148 href="/contact"
62 className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-teal-500 text-white rounded-full font-semibold text-lg hover:bg-teal-400 transition-all shadow-lg shadow-teal-500/25 hover:-translate-y-0.5"
49 className="inline-flex items-center justify-center gap-2 px-9 py-4 bg-white text-slate-900 rounded-full font-semibold text-lg hover:bg-teal-50 transition-all shadow-2xl hover:-translate-y-1 hover:shadow-white/20"
6350 >
6451 Start Your Journey
65 <svg
66 className="w-5 h-5"
67 fill="none"
68 viewBox="0 0 24 24"
69 stroke="currentColor"
70 >
71 <path
72 strokeLinecap="round"
73 strokeLinejoin="round"
74 strokeWidth={2}
75 d="M17 8l4 4m0 0l-4 4m4-4H3"
76 />
52 <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
53 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
7754 </svg>
7855 </Link>
7956 <Link
8057 href="/student-tours"
81 className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white/10 backdrop-blur-sm text-white border border-white/20 rounded-full font-semibold text-lg hover:bg-white/20 transition-all"
58 className="inline-flex items-center justify-center gap-2 px-9 py-4 bg-white/10 backdrop-blur-md text-white border border-white/25 rounded-full font-semibold text-lg hover:bg-white/20 transition-all"
8259 >
60 <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
61 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
62 </svg>
8363 Explore Tours
8464 </Link>
8565 </div>
8666 </AnimatedSection>
67 </div>
68 </section>
69 );
70}
71
72/* ──────────────────────────── TRUST / STATS BAR ───────────────────────────── */
8773
88 {/* Stats */}
89 <AnimatedSection delay={0.6}>
90 <div className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8">
74function StatsBar() {
75 return (
76 <section className="relative -mt-20 z-30 pb-12">
77 <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
78 <AnimatedSection>
79 <div className="grid grid-cols-2 md:grid-cols-4 gap-6 p-8 sm:p-10 rounded-2xl bg-white shadow-2xl shadow-slate-900/10 border border-slate-100">
9180 {STATS.map((stat) => (
9281 <div key={stat.label} className="text-center">
93 <div className="text-3xl sm:text-4xl font-bold text-white mb-1">
82 <div className="text-3xl sm:text-4xl font-bold text-teal-700 mb-1">
9483 {stat.value}
9584 </div>
96 <div className="text-sm text-slate-400">{stat.label}</div>
85 <div className="text-sm text-slate-500 font-medium">
86 {stat.label}
87 </div>
9788 </div>
9889 ))}
9990 </div>
@@ -103,6 +94,8 @@ function HeroSection() {
10394 );
10495}
10596
97/* ──────────────────────────── SERVICE ICONS ────────────────────────────────── */
98
10699const SERVICE_ICONS: Record<string, React.ReactNode> = {
107100 school: (
108101 <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -128,6 +121,8 @@ const SERVICE_ICONS: Record<string, React.ReactNode> = {
128121 ),
129122};
130123
124/* ──────────────────────────── SERVICES ─────────────────────────────────────── */
125
131126function ServicesSection() {
132127 return (
133128 <section className="py-24 bg-white">
@@ -168,22 +163,9 @@ function ServicesSection() {
168163 </p>
169164 <ul className="space-y-2">
170165 {service.features.map((feature) => (
171 <li
172 key={feature}
173 className="flex items-center gap-2 text-sm text-slate-500"
174 >
175 <svg
176 className="w-4 h-4 text-teal-500 shrink-0"
177 fill="none"
178 viewBox="0 0 24 24"
179 stroke="currentColor"
180 >
181 <path
182 strokeLinecap="round"
183 strokeLinejoin="round"
184 strokeWidth={2}
185 d="M5 13l4 4L19 7"
186 />
166 <li key={feature} className="flex items-center gap-2 text-sm text-slate-500">
167 <svg className="w-4 h-4 text-teal-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
168 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
187169 </svg>
188170 {feature}
189171 </li>
@@ -191,18 +173,8 @@ function ServicesSection() {
191173 </ul>
192174 <div className="mt-4 inline-flex items-center gap-1 text-teal-600 font-medium text-sm group-hover:gap-2 transition-all">
193175 Learn more
194 <svg
195 className="w-4 h-4"
196 fill="none"
197 viewBox="0 0 24 24"
198 stroke="currentColor"
199 >
200 <path
201 strokeLinecap="round"
202 strokeLinejoin="round"
203 strokeWidth={2}
204 d="M9 5l7 7-7 7"
205 />
176 <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
177 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
206178 </svg>
207179 </div>
208180 </div>
@@ -216,52 +188,63 @@ function ServicesSection() {
216188 );
217189}
218190
191/* ──────────────────── FULL-WIDTH IMAGE BREAK ──────────────────────────────── */
192
193function ParallaxBreak() {
194 return (
195 <section className="relative h-[50vh] sm:h-[60vh] overflow-hidden">
196 <Image
197 src="https://images.unsplash.com/photo-1469521669194-babb45599def?w=1920&q=80&fit=crop"
198 alt="New Zealand mountain panorama"
199 fill
200 className="object-cover"
201 sizes="100vw"
202 />
203 <div className="absolute inset-0 bg-gradient-to-r from-teal-900/80 to-ocean-900/60" />
204 <div className="absolute inset-0 flex items-center justify-center">
205 <AnimatedSection>
206 <div className="text-center px-4">
207 <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4 drop-shadow-lg">
208 “New Zealand changed my life.”
209 </h2>
210 <p className="text-white/80 text-lg sm:text-xl max-w-xl mx-auto">
211 — Every NZEE student, ever
212 </p>
213 </div>
214 </AnimatedSection>
215 </div>
216 </section>
217 );
218}
219
220/* ────────────────────── WHY NEW ZEALAND ───────────────────────────────────── */
221
219222function WhyNZSection() {
220223 const reasons = [
221224 {
222225 title: "World-Class Education",
223 description:
224 "New Zealand's education system is ranked among the best globally, with NZQA-accredited institutions and internationally recognised qualifications.",
225 icon: (
226 <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
227 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
228 </svg>
229 ),
226 description: "NZQA-accredited institutions with internationally recognised qualifications. New Zealand is ranked among the best education systems globally.",
227 image: "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=600&q=80&fit=crop",
230228 },
231229 {
232 title: "Safe & Welcoming",
233 description:
234 "Consistently ranked one of the safest and most peaceful countries in the world, with a warm, multicultural society that embraces international students.",
235 icon: (
236 <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
237 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
238 </svg>
239 ),
230 title: "Safest Country on Earth",
231 description: "Consistently ranked one of the world's safest and most peaceful nations. Your parents can rest easy knowing you're in good hands.",
232 image: "https://images.unsplash.com/photo-1500375592092-40eb2168fd21?w=600&q=80&fit=crop",
240233 },
241234 {
242 title: "Stunning Nature",
243 description:
244 "From snow-capped mountains to pristine beaches, geothermal wonders to ancient rainforests — New Zealand is a living postcard you get to call home.",
245 icon: (
246 <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
247 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
248 </svg>
249 ),
235 title: "Stunning Natural Beauty",
236 description: "From snow-capped mountains to pristine beaches, geothermal wonders to ancient rainforests — this is your living classroom.",
237 image: "https://images.unsplash.com/photo-1507699622108-4be3abd695ad?w=600&q=80&fit=crop",
250238 },
251239 {
252 title: "Adventure Awaits",
253 description:
254 "Bungee jumping, glacier hiking, whale watching, glowworm caves — your weekends will be as exciting as your weekdays are educational.",
255 icon: (
256 <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
257 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
258 </svg>
259 ),
240 title: "Endless Adventure",
241 description: "Bungee jumping, glacier hiking, whale watching, glowworm caves — your weekends will be as thrilling as your education.",
242 image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80&fit=crop",
260243 },
261244 ];
262245
263246 return (
264 <section className="py-24 bg-gradient-to-b from-slate-50 to-white">
247 <section className="py-24 bg-slate-50">
265248 <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
266249 <AnimatedSection>
267250 <div className="text-center mb-16">
@@ -272,26 +255,29 @@ function WhyNZSection() {
272255 Discover Why Students{" "}
273256 <span className="text-ocean-700">Love Aotearoa</span>
274257 </h2>
275 <p className="mx-auto max-w-2xl text-lg text-slate-600">
276 There's a reason New Zealand is one of the world's top
277 destinations for international education.
278 </p>
279258 </div>
280259 </AnimatedSection>
281260
282 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
261 <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
283262 {reasons.map((reason, index) => (
284263 <AnimatedSection key={reason.title} delay={index * 0.1}>
285 <div className="text-center p-6">
286 <div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-br from-ocean-100 to-teal-100 text-ocean-700 mb-5">
287 {reason.icon}
264 <div className="group relative h-80 rounded-2xl overflow-hidden">
265 <Image
266 src={reason.image}
267 alt={reason.title}
268 fill
269 className="object-cover transition-transform duration-700 group-hover:scale-105"
270 sizes="(max-width: 768px) 100vw, 50vw"
271 />
272 <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
273 <div className="absolute inset-0 flex flex-col justify-end p-8">
274 <h3 className="font-heading text-2xl font-bold text-white mb-2">
275 {reason.title}
276 </h3>
277 <p className="text-white/80 leading-relaxed max-w-md">
278 {reason.description}
279 </p>
288280 </div>
289 <h3 className="font-heading text-lg font-semibold text-slate-900 mb-3">
290 {reason.title}
291 </h3>
292 <p className="text-slate-600 text-sm leading-relaxed">
293 {reason.description}
294 </p>
295281 </div>
296282 </AnimatedSection>
297283 ))}
@@ -301,6 +287,8 @@ function WhyNZSection() {
301287 );
302288}
303289
290/* ──────────────────── TESTIMONIALS ─────────────────────────────────────────── */
291
304292function TestimonialsSection() {
305293 return (
306294 <section className="py-24 bg-white">
@@ -323,33 +311,54 @@ function TestimonialsSection() {
323311 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
324312 {TESTIMONIALS.slice(0, 3).map((testimonial, index) => (
325313 <AnimatedSection key={testimonial.name} delay={index * 0.1}>
326 <div className="h-full p-8 rounded-2xl bg-slate-50 border border-slate-100">
327 {/* Stars */}
314 <div className="h-full p-8 rounded-2xl bg-slate-50 border border-slate-100 hover:shadow-lg transition-shadow">
328315 <div className="flex gap-1 mb-4">
329316 {[...Array(5)].map((_, i) => (
330 <svg
331 key={i}
332 className="w-5 h-5 text-gold-400"
333 fill="currentColor"
334 viewBox="0 0 20 20"
335 >
317 <svg key={i} className="w-5 h-5 text-gold-400" fill="currentColor" viewBox="0 0 20 20">
336318 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
337319 </svg>
338320 ))}
339321 </div>
340
341 <blockquote className="text-slate-700 leading-relaxed mb-6">
322 <blockquote className="text-slate-700 leading-relaxed mb-6 italic">
342323 “{testimonial.quote}”
343324 </blockquote>
344
345325 <div className="flex items-center gap-3 pt-4 border-t border-slate-200">
346326 <div className="w-10 h-10 rounded-full bg-gradient-to-br from-teal-400 to-ocean-500 flex items-center justify-center text-white font-semibold text-sm">
347327 {testimonial.name.charAt(0)}
348328 </div>
349329 <div>
350 <div className="font-medium text-slate-900">
351 {testimonial.name}
330 <div className="font-medium text-slate-900">{testimonial.name}</div>
331 <div className="text-sm text-slate-500">
332 {testimonial.origin} · {testimonial.programme}
352333 </div>
334 </div>
335 </div>
336 </div>
337 </AnimatedSection>
338 ))}
339 </div>
340
341 {/* Extra 2 testimonials in a 2-col row */}
342 <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
343 {TESTIMONIALS.slice(3).map((testimonial, index) => (
344 <AnimatedSection key={testimonial.name} delay={0.3 + index * 0.1}>
345 <div className="h-full p-8 rounded-2xl bg-gradient-to-br from-teal-50 to-ocean-50 border border-teal-100">
346 <div className="flex gap-1 mb-4">
347 {[...Array(5)].map((_, i) => (
348 <svg key={i} className="w-5 h-5 text-gold-400" fill="currentColor" viewBox="0 0 20 20">
349 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
350 </svg>
351 ))}
352 </div>
353 <blockquote className="text-slate-700 leading-relaxed mb-6 italic">
354 “{testimonial.quote}”
355 </blockquote>
356 <div className="flex items-center gap-3 pt-4 border-t border-teal-200/50">
357 <div className="w-10 h-10 rounded-full bg-gradient-to-br from-teal-500 to-ocean-600 flex items-center justify-center text-white font-semibold text-sm">
358 {testimonial.name.charAt(0)}
359 </div>
360 <div>
361 <div className="font-medium text-slate-900">{testimonial.name}</div>
353362 <div className="text-sm text-slate-500">
354363 {testimonial.origin} · {testimonial.programme}
355364 </div>
@@ -364,17 +373,26 @@ function TestimonialsSection() {
364373 );
365374}
366375
376/* ──────────────────── FINAL CTA ───────────────────────────────────────────── */
377
367378function CTASection() {
368379 return (
369 <section className="py-24 bg-gradient-to-br from-teal-800 via-teal-700 to-ocean-800 relative overflow-hidden">
370 <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(255,255,255,0.05),transparent_70%)]" />
371 <div className="absolute top-0 left-0 w-96 h-96 bg-teal-600/20 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2" />
372 <div className="absolute bottom-0 right-0 w-96 h-96 bg-ocean-600/20 rounded-full blur-3xl translate-x-1/2 translate-y-1/2" />
380 <section className="relative py-32 overflow-hidden">
381 <Image
382 src="https://images.unsplash.com/photo-1504893524553-b855bce32c67?w=1920&q=80&fit=crop"
383 alt="Lake Tekapo, New Zealand"
384 fill
385 className="object-cover"
386 sizes="100vw"
387 />
388 <div className="absolute inset-0 bg-gradient-to-br from-teal-900/90 via-teal-800/85 to-ocean-900/90" />
373389
374390 <div className="relative z-10 mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center">
375391 <AnimatedSection>
376 <h2 className="font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
377 Your New Zealand Adventure Starts Here
392 <h2 className="font-heading text-3xl sm:text-4xl lg:text-6xl font-bold text-white mb-6 drop-shadow-lg">
393 Your New Zealand Adventure
394 <br />
395 Starts Here
378396 </h2>
379397 <p className="text-teal-100 text-lg sm:text-xl mb-10 max-w-2xl mx-auto">
380398 Whether you're looking to study at a top high school, improve
@@ -384,26 +402,16 @@ function CTASection() {
384402 <div className="flex flex-col sm:flex-row gap-4 justify-center">
385403 <Link
386404 href="/contact"
387 className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white text-teal-800 rounded-full font-semibold text-lg hover:bg-gold-50 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5"
405 className="inline-flex items-center justify-center gap-2 px-9 py-4 bg-white text-teal-800 rounded-full font-semibold text-lg hover:bg-gold-50 transition-all shadow-2xl hover:shadow-white/20 hover:-translate-y-1"
388406 >
389407 Get Started Today
390 <svg
391 className="w-5 h-5"
392 fill="none"
393 viewBox="0 0 24 24"
394 stroke="currentColor"
395 >
396 <path
397 strokeLinecap="round"
398 strokeLinejoin="round"
399 strokeWidth={2}
400 d="M17 8l4 4m0 0l-4 4m4-4H3"
401 />
408 <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
409 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
402410 </svg>
403411 </Link>
404412 <Link
405413 href="/about"
406 className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white/10 backdrop-blur-sm text-white border border-white/20 rounded-full font-semibold text-lg hover:bg-white/20 transition-all"
414 className="inline-flex items-center justify-center gap-2 px-9 py-4 bg-white/10 backdrop-blur-md text-white border border-white/25 rounded-full font-semibold text-lg hover:bg-white/20 transition-all"
407415 >
408416 Learn About NZEE
409417 </Link>
@@ -414,12 +422,19 @@ function CTASection() {
414422 );
415423}
416424
425/* ──────────────────── PAGE ASSEMBLY ───────────────────────────────────────── */
426
417427export default function Home() {
418428 return (
419429 <>
420430 <HeroSection />
431 <StatsBar />
421432 <ServicesSection />
433 <DestinationShowcase />
434 <ParallaxBreak />
422435 <WhyNZSection />
436 <VideoShowcase />
437 <ImageStrip />
423438 <TestimonialsSection />
424439 <CTASection />
425440 </>
Modifiedsrc/app/student-tours/page.tsx+28−7View fileUnifiedSplit
@@ -1,5 +1,6 @@
11import type { Metadata } from "next";
22import Link from "next/link";
3import Image from "next/image";
34import AnimatedSection from "@/components/AnimatedSection";
45import { TOUR_DESTINATIONS } from "@/lib/constants";
56
@@ -24,8 +25,16 @@ export default function StudentToursPage() {
2425 return (
2526 <>
2627 {/* Hero */}
27 <section className="relative pt-32 pb-20 bg-gradient-to-br from-slate-900 via-ocean-900 to-forest-900 overflow-hidden">
28 <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,rgba(14,165,233,0.15),transparent_50%)]" />
28 <section className="relative pt-32 pb-20 overflow-hidden">
29 <Image
30 src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&q=80&fit=crop"
31 alt="New Zealand mountain ranges"
32 fill
33 priority
34 className="object-cover"
35 sizes="100vw"
36 />
37 <div className="absolute inset-0 bg-gradient-to-br from-slate-900/80 via-ocean-900/70 to-forest-900/80" />
2938 <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
3039 <AnimatedSection>
3140 <span className="inline-block px-4 py-1.5 rounded-full bg-white/10 text-ocean-300 text-sm font-medium mb-6">
@@ -126,11 +135,23 @@ export default function StudentToursPage() {
126135 return (
127136 <AnimatedSection key={dest.name} delay={index * 0.1}>
128137 <div className="h-full flex flex-col rounded-2xl bg-white border border-slate-200 overflow-hidden hover:shadow-xl transition-shadow">
129 {/* Image placeholder with gradient */}
130 <div className={`h-48 bg-gradient-to-br ${colors.gradient} flex items-center justify-center relative`}>
131 <div className="text-center text-white">
132 <div className="text-4xl font-bold mb-1">{dest.duration}</div>
133 <div className="text-sm opacity-90">{dest.region}</div>
138 {/* Destination image */}
139 <div className="h-56 relative overflow-hidden group">
140 <Image
141 src={dest.image}
142 alt={dest.name}
143 fill
144 className="object-cover transition-transform duration-700 group-hover:scale-110"
145 sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
146 />
147 <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
148 <div className="absolute bottom-4 left-4 right-4 flex justify-between items-end">
149 <span className={`px-3 py-1 rounded-full text-xs font-medium ${colors.bg} ${colors.text}`}>
150 {dest.region}
151 </span>
152 <span className="text-white font-bold text-lg drop-shadow">
153 {dest.duration}
154 </span>
134155 </div>
135156 </div>
136157 <div className="flex-1 p-6">
Addedsrc/components/DestinationShowcase.tsx+121−0View fileUnifiedSplit
@@ -0,0 +1,121 @@
1import Image from "next/image";
2import AnimatedSection from "./AnimatedSection";
3
4const DESTINATIONS = [
5 {
6 name: "Queenstown",
7 tagline: "Adventure Capital",
8 description: "Bungee, jet boats, skiing, and the stunning Remarkables.",
9 image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80&fit=crop",
10 span: "md:col-span-2 md:row-span-2",
11 tall: true,
12 },
13 {
14 name: "Milford Sound",
15 tagline: "Eighth Wonder",
16 description: "Towering fiords and waterfalls in Fiordland National Park.",
17 image: "https://images.unsplash.com/photo-1507699622108-4be3abd695ad?w=800&q=80&fit=crop",
18 span: "",
19 tall: false,
20 },
21 {
22 name: "Rotorua",
23 tagline: "Geothermal Wonderland",
24 description: "Bubbling mud pools, geysers, and rich Maori culture.",
25 image: "https://images.unsplash.com/photo-1578271887552-5ac3a72752bc?w=800&q=80&fit=crop",
26 span: "",
27 tall: false,
28 },
29 {
30 name: "Bay of Islands",
31 tagline: "Subtropical Paradise",
32 description: "144 islands, dolphin swimming, and pristine beaches.",
33 image: "https://images.unsplash.com/photo-1500375592092-40eb2168fd21?w=800&q=80&fit=crop",
34 span: "",
35 tall: false,
36 },
37 {
38 name: "Franz Josef Glacier",
39 tagline: "Ice Meets Rainforest",
40 description: "Walk on ancient ice surrounded by lush native bush.",
41 image: "https://images.unsplash.com/photo-1504893524553-b855bce32c67?w=800&q=80&fit=crop",
42 span: "",
43 tall: false,
44 },
45 {
46 name: "Abel Tasman",
47 tagline: "Coastal Paradise",
48 description: "Golden beaches, crystal waters, and kayaking adventures.",
49 image: "https://images.unsplash.com/photo-1508193638397-1c4234db14d8?w=800&q=80&fit=crop",
50 span: "md:col-span-2",
51 tall: false,
52 },
53];
54
55export default function DestinationShowcase() {
56 return (
57 <section className="py-24 bg-white">
58 <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
59 <AnimatedSection>
60 <div className="text-center mb-16">
61 <span className="inline-block px-4 py-1.5 rounded-full bg-ocean-50 text-ocean-700 text-sm font-medium mb-4">
62 Explore New Zealand
63 </span>
64 <h2 className="font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 mb-4">
65 Destinations That Take Your{" "}
66 <span className="text-ocean-700">Breath Away</span>
67 </h2>
68 <p className="mx-auto max-w-2xl text-lg text-slate-600">
69 These are just some of the incredible places our students explore
70 on chaperoned tours. Your classroom extends to the whole of
71 Aotearoa.
72 </p>
73 </div>
74 </AnimatedSection>
75
76 <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
77 {DESTINATIONS.map((dest, index) => (
78 <AnimatedSection
79 key={dest.name}
80 delay={index * 0.08}
81 className={dest.span}
82 >
83 <div
84 className={`group relative rounded-2xl overflow-hidden cursor-pointer ${
85 dest.tall ? "h-[500px]" : "h-[240px]"
86 }`}
87 >
88 <Image
89 src={dest.image}
90 alt={dest.name}
91 fill
92 className="object-cover transition-transform duration-700 group-hover:scale-110"
93 sizes={
94 dest.span.includes("col-span-2")
95 ? "(max-width: 768px) 100vw, 50vw"
96 : "(max-width: 768px) 100vw, 25vw"
97 }
98 />
99 {/* Gradient overlay */}
100 <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity" />
101
102 {/* Content */}
103 <div className="absolute inset-0 flex flex-col justify-end p-6">
104 <span className="text-teal-300 text-xs font-medium tracking-wider uppercase mb-1">
105 {dest.tagline}
106 </span>
107 <h3 className="font-heading text-xl sm:text-2xl font-bold text-white mb-1 group-hover:text-teal-200 transition-colors">
108 {dest.name}
109 </h3>
110 <p className="text-white/70 text-sm leading-relaxed max-w-xs">
111 {dest.description}
112 </p>
113 </div>
114 </div>
115 </AnimatedSection>
116 ))}
117 </div>
118 </div>
119 </section>
120 );
121}
Addedsrc/components/HeroSlider.tsx+155−0View fileUnifiedSplit
@@ -0,0 +1,155 @@
1"use client";
2
3import { useState, useEffect, useCallback } from "react";
4import Image from "next/image";
5import { motion, AnimatePresence } from "framer-motion";
6
7const HERO_SLIDES = [
8 {
9 image:
10 "https://images.unsplash.com/photo-1507699622108-4be3abd695ad?w=1920&q=80&fit=crop",
11 alt: "Milford Sound, Fiordland National Park, New Zealand",
12 title: "Milford Sound",
13 location: "Fiordland",
14 },
15 {
16 image:
17 "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&q=80&fit=crop",
18 alt: "Mountain ranges in New Zealand",
19 title: "The Remarkables",
20 location: "Queenstown",
21 },
22 {
23 image:
24 "https://images.unsplash.com/photo-1504893524553-b855bce32c67?w=1920&q=80&fit=crop",
25 alt: "Lake Tekapo, Canterbury, New Zealand",
26 title: "Lake Tekapo",
27 location: "Canterbury",
28 },
29 {
30 image:
31 "https://images.unsplash.com/photo-1469521669194-babb45599def?w=1920&q=80&fit=crop",
32 alt: "Mountain landscape in New Zealand",
33 title: "Aoraki / Mount Cook",
34 location: "South Island",
35 },
36 {
37 image:
38 "https://images.unsplash.com/photo-1508193638397-1c4234db14d8?w=1920&q=80&fit=crop",
39 alt: "Lush green forest landscape in New Zealand",
40 title: "Native Bush",
41 location: "North Island",
42 },
43];
44
45export default function HeroSlider() {
46 const [current, setCurrent] = useState(0);
47
48 const next = useCallback(() => {
49 setCurrent((prev) => (prev + 1) % HERO_SLIDES.length);
50 }, []);
51
52 useEffect(() => {
53 const timer = setInterval(next, 6000);
54 return () => clearInterval(timer);
55 }, [next]);
56
57 return (
58 <div className="absolute inset-0">
59 <AnimatePresence mode="popLayout">
60 <motion.div
61 key={current}
62 initial={{ opacity: 0 }}
63 animate={{ opacity: 1 }}
64 exit={{ opacity: 0 }}
65 transition={{ duration: 1.5, ease: "easeInOut" }}
66 className="absolute inset-0"
67 >
68 <motion.div
69 initial={{ scale: 1.0 }}
70 animate={{ scale: 1.15 }}
71 transition={{ duration: 8, ease: "linear" }}
72 className="absolute inset-0"
73 >
74 <Image
75 src={HERO_SLIDES[current].image}
76 alt={HERO_SLIDES[current].alt}
77 fill
78 priority={current === 0}
79 className="object-cover"
80 sizes="100vw"
81 />
82 </motion.div>
83 </motion.div>
84 </AnimatePresence>
85
86 {/* Dark overlay for text readability */}
87 <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/70 z-10" />
88
89 {/* Bottom gradient for smooth transition to content */}
90 <div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-white to-transparent z-10" />
91
92 {/* Slide indicator dots */}
93 <div className="absolute bottom-44 left-1/2 -translate-x-1/2 z-20 flex gap-2">
94 {HERO_SLIDES.map((_, index) => (
95 <button
96 key={index}
97 onClick={() => setCurrent(index)}
98 className={`h-1.5 rounded-full transition-all duration-500 ${
99 index === current
100 ? "w-8 bg-white"
101 : "w-1.5 bg-white/40 hover:bg-white/60"
102 }`}
103 aria-label={`Go to slide ${index + 1}`}
104 />
105 ))}
106 </div>
107
108 {/* Current location badge */}
109 <motion.div
110 key={`badge-${current}`}
111 initial={{ opacity: 0, y: 10 }}
112 animate={{ opacity: 1, y: 0 }}
113 transition={{ delay: 0.5, duration: 0.6 }}
114 className="absolute bottom-52 right-8 z-20 hidden md:flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white text-sm"
115 >
116 <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
117 <path
118 strokeLinecap="round"
119 strokeLinejoin="round"
120 strokeWidth={2}
121 d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
122 />
123 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
124 </svg>
125 {HERO_SLIDES[current].title}, {HERO_SLIDES[current].location}
126 </motion.div>
127
128 {/* Scroll indicator */}
129 <div className="absolute bottom-36 left-1/2 -translate-x-1/2 z-20">
130 <motion.div
131 animate={{ y: [0, 8, 0] }}
132 transition={{ duration: 2, repeat: Infinity }}
133 className="flex flex-col items-center gap-2"
134 >
135 <span className="text-white/50 text-xs tracking-widest uppercase">
136 Scroll to explore
137 </span>
138 <svg
139 className="w-5 h-5 text-white/50"
140 fill="none"
141 viewBox="0 0 24 24"
142 stroke="currentColor"
143 >
144 <path
145 strokeLinecap="round"
146 strokeLinejoin="round"
147 strokeWidth={2}
148 d="M19 14l-7 7m0 0l-7-7m7 7V3"
149 />
150 </svg>
151 </motion.div>
152 </div>
153 </div>
154 );
155}
Addedsrc/components/ImageStrip.tsx+88−0View fileUnifiedSplit
@@ -0,0 +1,88 @@
1"use client";
2
3import Image from "next/image";
4import { motion } from "framer-motion";
5
6const STRIP_IMAGES = [
7 {
8 src: "https://images.unsplash.com/photo-1507699622108-4be3abd695ad?w=600&q=80&fit=crop",
9 alt: "Milford Sound",
10 label: "Milford Sound",
11 },
12 {
13 src: "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=600&q=80&fit=crop",
14 alt: "Mountain peaks",
15 label: "Southern Alps",
16 },
17 {
18 src: "https://images.unsplash.com/photo-1500375592092-40eb2168fd21?w=600&q=80&fit=crop",
19 alt: "Ocean waves on beach",
20 label: "Coastal NZ",
21 },
22 {
23 src: "https://images.unsplash.com/photo-1504893524553-b855bce32c67?w=600&q=80&fit=crop",
24 alt: "Lake and mountains",
25 label: "Lake Tekapo",
26 },
27 {
28 src: "https://images.unsplash.com/photo-1508193638397-1c4234db14d8?w=600&q=80&fit=crop",
29 alt: "Green forest landscape",
30 label: "Native Forest",
31 },
32 {
33 src: "https://images.unsplash.com/photo-1469521669194-babb45599def?w=600&q=80&fit=crop",
34 alt: "Mountain vista",
35 label: "Aoraki",
36 },
37 {
38 src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80&fit=crop",
39 alt: "Mountain ranges above clouds",
40 label: "The Remarkables",
41 },
42 {
43 src: "https://images.unsplash.com/photo-1578271887552-5ac3a72752bc?w=600&q=80&fit=crop",
44 alt: "Geothermal area",
45 label: "Rotorua",
46 },
47];
48
49// Duplicate for seamless loop
50const ALL_IMAGES = [...STRIP_IMAGES, ...STRIP_IMAGES];
51
52export default function ImageStrip() {
53 return (
54 <section className="py-8 bg-slate-50 overflow-hidden">
55 <motion.div
56 animate={{ x: [0, -STRIP_IMAGES.length * 308] }}
57 transition={{
58 x: {
59 repeat: Infinity,
60 repeatType: "loop",
61 duration: 40,
62 ease: "linear",
63 },
64 }}
65 className="flex gap-4"
66 >
67 {ALL_IMAGES.map((img, index) => (
68 <div
69 key={`${img.label}-${index}`}
70 className="relative shrink-0 w-72 h-48 rounded-xl overflow-hidden group"
71 >
72 <Image
73 src={img.src}
74 alt={img.alt}
75 fill
76 className="object-cover group-hover:scale-110 transition-transform duration-500"
77 sizes="288px"
78 />
79 <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
80 <span className="absolute bottom-3 left-4 text-white text-sm font-medium">
81 {img.label}
82 </span>
83 </div>
84 ))}
85 </motion.div>
86 </section>
87 );
88}
Addedsrc/components/VideoShowcase.tsx+100−0View fileUnifiedSplit
@@ -0,0 +1,100 @@
1"use client";
2
3import { useState } from "react";
4import { motion, AnimatePresence } from "framer-motion";
5import AnimatedSection from "./AnimatedSection";
6
7export default function VideoShowcase() {
8 const [isPlaying, setIsPlaying] = useState(false);
9
10 return (
11 <section className="py-24 bg-slate-900 relative overflow-hidden">
12 <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(14,165,233,0.08),transparent_60%)]" />
13
14 <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
15 <AnimatedSection>
16 <div className="text-center mb-12">
17 <span className="inline-block px-4 py-1.5 rounded-full bg-white/10 text-teal-300 text-sm font-medium mb-4">
18 See It for Yourself
19 </span>
20 <h2 className="font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">
21 Experience the Magic of{" "}
22 <span className="text-transparent bg-clip-text bg-gradient-to-r from-teal-300 to-ocean-300">
23 Aotearoa
24 </span>
25 </h2>
26 <p className="mx-auto max-w-2xl text-lg text-slate-400">
27 From the towering peaks of the Southern Alps to the subtropical
28 beauty of the Bay of Islands — discover why New Zealand captures
29 hearts from around the globe.
30 </p>
31 </div>
32 </AnimatedSection>
33
34 <AnimatedSection delay={0.2}>
35 <div className="relative mx-auto max-w-5xl aspect-video rounded-2xl overflow-hidden shadow-2xl shadow-black/40 border border-white/10">
36 <AnimatePresence mode="wait">
37 {!isPlaying ? (
38 <motion.div
39 key="thumbnail"
40 exit={{ opacity: 0 }}
41 className="absolute inset-0 cursor-pointer group"
42 onClick={() => setIsPlaying(true)}
43 >
44 {/* Video thumbnail */}
45 <div className="absolute inset-0 bg-gradient-to-br from-teal-800 via-ocean-900 to-slate-900">
46 <div className="absolute inset-0 flex items-center justify-center">
47 <div className="text-center">
48 {/* Play button */}
49 <motion.div
50 whileHover={{ scale: 1.1 }}
51 whileTap={{ scale: 0.95 }}
52 className="inline-flex items-center justify-center w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-white/20 backdrop-blur-md border-2 border-white/30 group-hover:bg-white/30 transition-colors mb-6"
53 >
54 <svg
55 className="w-8 h-8 sm:w-10 sm:h-10 text-white ml-1"
56 fill="currentColor"
57 viewBox="0 0 24 24"
58 >
59 <path d="M8 5v14l11-7z" />
60 </svg>
61 </motion.div>
62 <p className="text-white text-lg font-medium">
63 Watch: 100% Pure New Zealand
64 </p>
65 <p className="text-white/60 text-sm mt-1">
66 Official Tourism New Zealand
67 </p>
68 </div>
69 </div>
70 </div>
71
72 {/* Decorative floating elements */}
73 <div className="absolute top-8 left-8 px-3 py-1.5 rounded-full bg-white/10 backdrop-blur-sm text-white/80 text-xs flex items-center gap-1.5">
74 <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
75 Tourism NZ
76 </div>
77 </motion.div>
78 ) : (
79 <motion.div
80 key="video"
81 initial={{ opacity: 0 }}
82 animate={{ opacity: 1 }}
83 className="absolute inset-0"
84 >
85 <iframe
86 src="https://www.youtube.com/embed/a2Gf1hMOjbE?autoplay=1&rel=0&modestbranding=1"
87 title="100% Pure New Zealand"
88 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
89 allowFullScreen
90 className="w-full h-full"
91 />
92 </motion.div>
93 )}
94 </AnimatePresence>
95 </div>
96 </AnimatedSection>
97 </div>
98 </section>
99 );
100}
Modifiedsrc/lib/constants.ts+12−0View fileUnifiedSplit
@@ -167,6 +167,8 @@ export const TOUR_DESTINATIONS = [
167167 duration: "5 days",
168168 description:
169169 "The adventure capital of New Zealand. Jet boating, bungee jumping, and the breathtaking Milford Sound cruise through towering fiords.",
170 image:
171 "https://images.unsplash.com/photo-1507699622108-4be3abd695ad?w=800&q=80&fit=crop",
170172 highlights: [
171173 "Milford Sound cruise",
172174 "Skyline Gondola & Luge",
@@ -180,6 +182,8 @@ export const TOUR_DESTINATIONS = [
180182 duration: "3 days",
181183 description:
182184 "Geothermal wonderland meets Maori culture. Bubbling mud pools, erupting geysers, and the mighty Huka Falls.",
185 image:
186 "https://images.unsplash.com/photo-1578271887552-5ac3a72752bc?w=800&q=80&fit=crop",
183187 highlights: [
184188 "Te Puia geothermal valley",
185189 "Maori cultural experience",
@@ -193,6 +197,8 @@ export const TOUR_DESTINATIONS = [
193197 duration: "3 days",
194198 description:
195199 "Subtropical paradise with 144 islands. Dolphin swimming, historic Waitangi Treaty Grounds, and pristine beaches.",
200 image:
201 "https://images.unsplash.com/photo-1500375592092-40eb2168fd21?w=800&q=80&fit=crop",
196202 highlights: [
197203 "Dolphin swimming",
198204 "Hole in the Rock cruise",
@@ -206,6 +212,8 @@ export const TOUR_DESTINATIONS = [
206212 duration: "2 days",
207213 description:
208214 "Walk on ancient ice in the heart of a rainforest. These glaciers are among the most accessible in the world.",
215 image:
216 "https://images.unsplash.com/photo-1504893524553-b855bce32c67?w=800&q=80&fit=crop",
209217 highlights: [
210218 "Glacier walk",
211219 "Helicopter scenic flight",
@@ -219,6 +227,8 @@ export const TOUR_DESTINATIONS = [
219227 duration: "3 days",
220228 description:
221229 "Golden beaches, crystal-clear waters, and lush native bush. Kayak, hike, or cruise through paradise.",
230 image:
231 "https://images.unsplash.com/photo-1508193638397-1c4234db14d8?w=800&q=80&fit=crop",
222232 highlights: [
223233 "Sea kayaking",
224234 "Great Walk track",
@@ -232,6 +242,8 @@ export const TOUR_DESTINATIONS = [
232242 duration: "5-7 days",
233243 description:
234244 "Extend your adventure beyond New Zealand with chaperoned trips to Sydney, the Great Barrier Reef, or the tropical islands of Fiji.",
245 image:
246 "https://images.unsplash.com/photo-1506929562872-bb421503ef21?w=800&q=80&fit=crop",
235247 highlights: [
236248 "Sydney Harbour",
237249 "Great Barrier Reef",
238250
c comment · e edit title · m merge · a approve · r request changes · ? shortcuts