464 lines
23 KiB
TypeScript
464 lines
23 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useEffect } from 'react'
|
||
import { motion } from 'framer-motion'
|
||
import Navbar from '@/components/Navbar/Navbar'
|
||
import Footer from '@/components/Footer/Footer'
|
||
import Link from 'next/link'
|
||
import Image from 'next/image'
|
||
import styles from './catering.module.css'
|
||
|
||
export default function CateringContent() {
|
||
// Slider state for Visual Journey section
|
||
const [currentSlide, setCurrentSlide] = useState(0);
|
||
const [mounted, setMounted] = useState(false);
|
||
|
||
const sliderImages = [
|
||
'/images/catering/visual-slider/visual-journey-1.webp',
|
||
'/images/catering/visual-slider/visual-journey-2.webp',
|
||
'/images/catering/visual-slider/visual-journey-3.webp',
|
||
'/images/catering/visual-slider/visual-journey-4.webp',
|
||
'/images/catering/visual-slider/visual-journey-5.webp'
|
||
];
|
||
|
||
// Set mounted state after component mounts (client-side only)
|
||
useEffect(() => {
|
||
setMounted(true);
|
||
}, []);
|
||
|
||
// Auto-slide effect (only runs after mount)
|
||
useEffect(() => {
|
||
if (!mounted) return;
|
||
|
||
const interval = setInterval(() => {
|
||
setCurrentSlide((prev) => (prev + 1) % sliderImages.length);
|
||
}, 3000); // Change slide every 3 seconds
|
||
|
||
return () => clearInterval(interval);
|
||
}, [mounted, sliderImages.length]);
|
||
|
||
// Manual navigation
|
||
const nextSlide = () => {
|
||
setCurrentSlide((prev) => (prev + 1) % sliderImages.length);
|
||
};
|
||
|
||
const prevSlide = () => {
|
||
setCurrentSlide((prev) => (prev - 1 + sliderImages.length) % sliderImages.length);
|
||
};
|
||
|
||
// Animation variants
|
||
const fadeInUp = {
|
||
hidden: { opacity: 0, y: 30 },
|
||
visible: {
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: {
|
||
duration: 0.6
|
||
}
|
||
}
|
||
};
|
||
|
||
const fadeIn = {
|
||
hidden: { opacity: 0 },
|
||
visible: {
|
||
opacity: 1,
|
||
transition: { duration: 0.8 }
|
||
}
|
||
};
|
||
|
||
const slideInLeft = {
|
||
hidden: { opacity: 0, x: -50 },
|
||
visible: {
|
||
opacity: 1,
|
||
x: 0,
|
||
transition: {
|
||
duration: 0.7
|
||
}
|
||
}
|
||
};
|
||
|
||
const slideInRight = {
|
||
hidden: { opacity: 0, x: 50 },
|
||
visible: {
|
||
opacity: 1,
|
||
x: 0,
|
||
transition: {
|
||
duration: 0.7
|
||
}
|
||
}
|
||
};
|
||
|
||
const staggerContainer = {
|
||
hidden: { opacity: 0 },
|
||
visible: {
|
||
opacity: 1,
|
||
transition: {
|
||
staggerChildren: 0.2,
|
||
delayChildren: 0.1
|
||
}
|
||
}
|
||
};
|
||
|
||
const scaleIn = {
|
||
hidden: { opacity: 0, scale: 0.8 },
|
||
visible: {
|
||
opacity: 1,
|
||
scale: 1,
|
||
transition: {
|
||
duration: 0.6
|
||
}
|
||
}
|
||
};
|
||
|
||
return (
|
||
<main className={styles.main}>
|
||
<Navbar />
|
||
|
||
{/* Page Hero */}
|
||
<section className={styles.hero}>
|
||
<div className={styles.heroContent}>
|
||
<h1 className={styles.heroTitle}>Catering</h1>
|
||
<p className={styles.breadcrumb}>
|
||
<Link href="/">Home</Link> / Catering
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Section 1: Top 3 Cards - Events, Food & Drinks, Venues */}
|
||
<section className={styles.topSection}>
|
||
<motion.div
|
||
className={styles.topContainer}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true, margin: "-100px" }}
|
||
variants={staggerContainer}
|
||
>
|
||
<section className={styles.sectionHeading1}>
|
||
<div className={styles.smallHeading1} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
||
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
|
||
</div>
|
||
<h2 className={styles.mainHeading1}>Exceptional Turkish Catering for Every Occasion</h2>
|
||
<p className={styles.description1}>
|
||
Planning an event and looking for authentic Turkish flavours? At Antalya, our catering service brings a wide selection of traditional dishes - from mezze platters to charcoal-grilled kebabs - prepared fresh for your guests. Whether it’s a corporate gathering, celebration, or private dinner, our catering menu offers something memorable for everyone.
|
||
</p>
|
||
</section>
|
||
|
||
<div className={styles.topCardsGrid}>
|
||
{/* Card 1: Events */}
|
||
<motion.div className={styles.topCard} variants={scaleIn}>
|
||
<div className={styles.topCardImage}>
|
||
<Image
|
||
src="/images/catering/card/card-1.webp"
|
||
alt="Events"
|
||
fill
|
||
style={{ objectFit: 'cover' }}
|
||
/>
|
||
<div className={styles.topCardOverlay}></div>
|
||
</div>
|
||
<div className={styles.topCardContent}>
|
||
<h3 className={styles.topCardTitle}>Events & Celebrations</h3>
|
||
{/* <button className={styles.topCardButton}>
|
||
<span>→</span>
|
||
</button> */}
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Card 2: Food & Drinks */}
|
||
<motion.div className={styles.topCard} variants={scaleIn}>
|
||
<div className={styles.topCardImage}>
|
||
<Image
|
||
src="/images/catering/card/card-2.webp"
|
||
alt="Food & Drinks"
|
||
fill
|
||
style={{ objectFit: 'cover' }}
|
||
/>
|
||
<div className={styles.topCardOverlay}></div>
|
||
</div>
|
||
<div className={styles.topCardContent}>
|
||
<h3 className={styles.topCardTitle}>Food & Beverage Catering</h3>
|
||
{/* <button className={styles.topCardButton}>
|
||
<span>→</span>
|
||
</button> */}
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Card 3: Venues */}
|
||
<motion.div className={styles.topCard} variants={scaleIn}>
|
||
<div className={styles.topCardImage}>
|
||
<Image
|
||
src="/images/catering/card/card-3.webp"
|
||
alt="Venues"
|
||
fill
|
||
style={{ objectFit: 'cover' }}
|
||
/>
|
||
<div className={styles.topCardOverlay}></div>
|
||
</div>
|
||
<div className={styles.topCardContent}>
|
||
<h3 className={styles.topCardTitle}>Venue & Service Options</h3>
|
||
{/* <button className={styles.topCardButton}>
|
||
<span>→</span>
|
||
</button> */}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
{/* Section 2: Welcome To SeaBreeze */}
|
||
<section className={styles.welcomeSection}>
|
||
<motion.div
|
||
className={styles.welcomeContainer}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true, margin: "-100px" }}
|
||
variants={staggerContainer}
|
||
>
|
||
{/* Left Side: Image Slider */}
|
||
<motion.div className={styles.welcomeImagesWrapper} variants={slideInLeft}>
|
||
<div className={styles.sliderContainer}>
|
||
<div className={styles.sliderWrapper}>
|
||
{sliderImages.map((image, index) => (
|
||
<div
|
||
key={index}
|
||
className={`${styles.sliderSlide} ${index === currentSlide ? styles.sliderSlideActive : ''}`}
|
||
>
|
||
<Image
|
||
src={image}
|
||
alt={`Slide ${index + 1}`}
|
||
fill
|
||
style={{ objectFit: 'cover' }}
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Navigation Arrows */}
|
||
<button
|
||
className={`${styles.sliderArrow} ${styles.sliderArrowLeft}`}
|
||
onClick={prevSlide}
|
||
aria-label="Previous slide"
|
||
>
|
||
←
|
||
</button>
|
||
<button
|
||
className={`${styles.sliderArrow} ${styles.sliderArrowRight}`}
|
||
onClick={nextSlide}
|
||
aria-label="Next slide"
|
||
>
|
||
→
|
||
</button>
|
||
|
||
{/* Slide Indicators */}
|
||
<div className={styles.sliderIndicators}>
|
||
{sliderImages.map((_, index) => (
|
||
<button
|
||
key={index}
|
||
className={`${styles.sliderIndicator} ${index === currentSlide ? styles.sliderIndicatorActive : ''}`}
|
||
onClick={() => setCurrentSlide(index)}
|
||
aria-label={`Go to slide ${index + 1}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Right Side: Content */}
|
||
<motion.div className={styles.welcomeContent} variants={slideInRight}>
|
||
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
|
||
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
|
||
</div>
|
||
<h2 className={styles.mainHeadingSection}>A Visual Journey Through Antalya Catering</h2>
|
||
{/* <div className={styles.welcomeDivider}>
|
||
<svg width="120" height="20" viewBox="0 0 120 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<line x1="0" y1="10" x2="45" y2="10" stroke="#d3cab3" strokeWidth="2" />
|
||
<path d="M52 5 Q60 10 52 15 M55 5 Q63 10 55 15 M58 5 Q66 10 58 15" stroke="#d3cab3" strokeWidth="1.5" fill="none" />
|
||
<line x1="75" y1="10" x2="120" y2="10" stroke="#d3cab3" strokeWidth="2" />
|
||
</svg>
|
||
</div> */}
|
||
<p className={styles.welcomeDescription}>
|
||
Experience the essence of Antalya brought to your event - from beautifully presented dishes to elegant setups that elevate every occasion. Our catering blends authentic Turkish flavours with refined presentation, creating a feast that delights both the eyes and the palate.
|
||
</p>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
{/* Section 3: Serving Great-Tasting Food Since 1991 */}
|
||
<section className={styles.servingSection}>
|
||
<motion.div
|
||
className={styles.servingContainer}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true, margin: "-100px" }}
|
||
variants={staggerContainer}
|
||
>
|
||
{/* Left Side: Content */}
|
||
<motion.div className={styles.servingContent} variants={slideInLeft}>
|
||
<section className={styles.sectionHeading3}>
|
||
<div className={styles.smallHeading3} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
||
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
|
||
</div>
|
||
</section>
|
||
<h2 className={styles.mainHeading}>A Culinary Experience Crafted for Your Event</h2>
|
||
<p className={styles.servingDescription}>
|
||
From intimate dinners to grand celebrations, our catering is designed to complement your occasion with flavour, finesse, and thoughtful presentation. Every menu is curated to suit your theme, guest preferences, and event style - ensuring a seamless dining experience from start to finish.
|
||
</p>
|
||
<p className={styles.servingDescription}>
|
||
Our team handles preparation, setup, and service with attention to detail, so you can focus on hosting while we take care of the rest. With Antalya, catering becomes more than food delivery - it becomes an elevated expression of hospitality, culture, and celebration.
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* Right Side: Images */}
|
||
<motion.div className={styles.servingImagesWrapper} variants={slideInRight}>
|
||
<div className={styles.servingImagesGrid}>
|
||
<div className={styles.servingImageLarge}>
|
||
<Image
|
||
src="/images/catering/grid-1/culinary-experience-left.webp"
|
||
alt="Restaurant interior"
|
||
fill
|
||
style={{ objectFit: 'cover' }}
|
||
/>
|
||
</div>
|
||
<div className={styles.servingImageSmallTop}>
|
||
<Image
|
||
src="/images/catering/grid-1/culinary-experience-bottom.webp"
|
||
alt="Grilled steak"
|
||
fill
|
||
style={{ objectFit: 'cover' }}
|
||
/>
|
||
</div>
|
||
<div className={styles.servingImageSmallBottom}>
|
||
<Image
|
||
src="/images/catering/grid-1/culinary-experience-right.webp"
|
||
alt="Delicious dish"
|
||
fill
|
||
style={{ objectFit: 'cover' }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
{/* Section 4: Our Story of Success */}
|
||
<section className={styles.storySection}>
|
||
<motion.div
|
||
className={styles.storyContent}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true, margin: "-100px" }}
|
||
variants={fadeIn}
|
||
>
|
||
<motion.span className={styles.storyLabel} variants={fadeInUp}>
|
||
<div className={styles.smallHeading3} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
||
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
|
||
</div>
|
||
</motion.span>
|
||
<motion.h2 className={styles.storyTitle} variants={fadeInUp}>
|
||
Bring Authentic Turkish Flavour to Your Event - Contact Us Today.
|
||
</motion.h2>
|
||
<motion.a
|
||
href="tel:+15195882037"
|
||
className={styles.storydesc}
|
||
variants={fadeInUp}
|
||
style={{ display: "inline-block" }}
|
||
>
|
||
+1 519 588 2037
|
||
</motion.a>
|
||
|
||
{/* <motion.button className={styles.storyButton} variants={fadeInUp}>
|
||
<span className={styles.storyButtonIcon}>↗</span>
|
||
<span>Visit site</span>
|
||
</motion.button> */}
|
||
</motion.div>
|
||
</section>
|
||
|
||
{/* Section 4: About Us - Restika One Of The Best Food Service */}
|
||
<section className={styles.aboutSection}>
|
||
<motion.div
|
||
className={styles.aboutContainer}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true, margin: "-100px" }}
|
||
variants={staggerContainer}
|
||
>
|
||
{/* Left Side: Images */}
|
||
<motion.div className={styles.aboutImagesWrapper} variants={slideInLeft}>
|
||
<div className={styles.aboutImagesGrid}>
|
||
<div className={styles.aboutImageLarge}>
|
||
<Image
|
||
src="/images/catering/grid-2/ontario-centre.webp"
|
||
alt="Food service"
|
||
fill
|
||
style={{ objectFit: 'cover' }}
|
||
/>
|
||
</div>
|
||
<div className={styles.aboutImageSmallTop}>
|
||
<Image
|
||
src="/images/catering/grid-2/ontario-top-right.webp"
|
||
alt="Dining experience"
|
||
fill
|
||
style={{ objectFit: 'cover' }}
|
||
/>
|
||
</div>
|
||
<div className={styles.aboutImageSmallBottom}>
|
||
<Image
|
||
src="/images/catering/grid-2/ontario--bottom-left.webp"
|
||
alt="Special dishes"
|
||
fill
|
||
style={{ objectFit: 'cover' }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Right Side: Content */}
|
||
<motion.div className={styles.aboutContent} variants={slideInRight}>
|
||
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
|
||
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
|
||
</div>
|
||
<h2 className={styles.mainHeading}>
|
||
Antalya - One of Ontario’s Finest Catering Experiences
|
||
</h2>
|
||
<p className={styles.servingDescription}>
|
||
From intimate gatherings to grand celebrations, Antalya delivers authentic Turkish flavours with unmatched hospitality. Our curated catering selections bring the taste of Istanbul to your events - beautifully presented, freshly prepared, and crafted with tradition.
|
||
</p>
|
||
<div className={styles.aboutSpecials}>
|
||
<ul className={styles.aboutSpecialsList}>
|
||
<li className={styles.aboutSpecialsItem}>
|
||
<span className={styles.aboutSpecialsIcon}>✓</span>
|
||
<span>Signature charcoal-grilled kebabs with house dips</span>
|
||
</li>
|
||
<li className={styles.aboutSpecialsItem}>
|
||
<span className={styles.aboutSpecialsIcon}>✓</span>
|
||
<span>Mezze platters featuring fresh salads, spreads & baked breads</span>
|
||
</li>
|
||
<li className={styles.aboutSpecialsItem}>
|
||
<span className={styles.aboutSpecialsIcon}>✓</span>
|
||
<span>Handcrafted rice dishes, wraps & specialty mains for every palate</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<p className={styles.servingDescription}>
|
||
Whether hosting a corporate lunch, wedding, or private dinner, Antalya ensures your guests enjoy a memorable culinary experience.
|
||
</p>
|
||
<Link href="/antalya-restaurant-menu" className={styles.lastButton}>
|
||
View Our Menu
|
||
</Link>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
<Footer />
|
||
</main>
|
||
)
|
||
} |