468 lines
22 KiB
TypeScript
468 lines
22 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useEffect } from 'react'
|
||
import { motion } from 'framer-motion'
|
||
|
||
import Footer from '@/components/Footer/Footer'
|
||
import Link from 'next/link'
|
||
import Image from 'next/image'
|
||
import styles from './catering.module.css'
|
||
|
||
import CateringPackages from './CateringPackages';
|
||
import CateringPopup from './CateringPopup';
|
||
|
||
export default function CateringContent() {
|
||
// Slider state for Visual Journey section
|
||
const [currentSlide, setCurrentSlide] = useState(0);
|
||
const [mounted, setMounted] = useState(false);
|
||
const [isPopupOpen, setIsPopupOpen] = useState(false);
|
||
const [selectedEventType, setSelectedEventType] = useState('');
|
||
|
||
const openPopup = (type: string) => {
|
||
setSelectedEventType(type);
|
||
setIsPopupOpen(true);
|
||
};
|
||
|
||
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, y: 30 },
|
||
visible: {
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: {
|
||
duration: 0.7
|
||
}
|
||
}
|
||
};
|
||
|
||
const slideInRight = {
|
||
hidden: { opacity: 0, y: 30 },
|
||
visible: {
|
||
opacity: 1,
|
||
y: 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}>
|
||
{/* Catering Popup Modal */}
|
||
<CateringPopup
|
||
isOpen={isPopupOpen}
|
||
onClose={() => setIsPopupOpen(false)}
|
||
initialEventType={selectedEventType}
|
||
/>
|
||
|
||
{/* Page Hero */}
|
||
<section className={styles.hero}>
|
||
<div className={styles.heroContent}>
|
||
<h1 className={styles.heroTitle}>Catering</h1>
|
||
<p className={styles.breadcrumb}>
|
||
<Link href="/" prefetch={false}>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: 'flex-start', gap: '10px' }}>
|
||
<Image src="/images/dinner.png" alt="Catering Event Decorative Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="Catering Event Decorative 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} ${styles.clickableCard}`}
|
||
variants={scaleIn}
|
||
onClick={() => openPopup('Corporate & Social Events')}
|
||
>
|
||
<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}>Corporate & Social Events</h3>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Card 2: Food & Drinks */}
|
||
<motion.div
|
||
className={`${styles.topCard} ${styles.clickableCard}`}
|
||
variants={scaleIn}
|
||
onClick={() => openPopup('Family Gatherings & Weddings')}
|
||
>
|
||
<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}>Family Gatherings & Weddings</h3>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Card 3: Venues */}
|
||
<motion.div
|
||
className={`${styles.topCard} ${styles.clickableCard}`}
|
||
variants={scaleIn}
|
||
onClick={() => openPopup('Birthday Party & Baby Shower')}
|
||
>
|
||
<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}>Birthday Party & Baby Shower</h3>
|
||
</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="Catering Visualization Decorative Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="Catering Visualization Decorative Cutlery Icon" width={24} height={24} />
|
||
</div>
|
||
<h2 className={styles.mainHeadingSection}>A Visual Journey Through Antalya Catering</h2>
|
||
<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', gap: '10px' }}>
|
||
<Image src="/images/dinner.png" alt="Culinary Experience Decorative Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="Culinary Experience Decorative 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.servingImagesContainer}>
|
||
<div className={styles.servingImageBack}>
|
||
<Image
|
||
src="/images/catering/grid-1/culinary-experience-left.webp"
|
||
alt="Restaurant interior"
|
||
fill
|
||
style={{ objectFit: 'cover' }}
|
||
/>
|
||
</div>
|
||
<div className={styles.servingImageFront}>
|
||
<Image
|
||
src="/images/catering/grid-1/culinary-experience-right.webp"
|
||
alt="Delicious dish"
|
||
fill
|
||
style={{ objectFit: 'cover' }}
|
||
/>
|
||
</div>
|
||
<div className={styles.servingBadge}>
|
||
<span className={styles.badgeText}>Antalya Restaurant</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
{/* Packages Section */}
|
||
<CateringPackages />
|
||
|
||
{/* 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="Success Story Decorative Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="Success Story Decorative Cutlery Icon" width={24} height={24} />
|
||
</div>
|
||
</motion.span>
|
||
<motion.h2 className={styles.storyTitle} variants={fadeInUp}>
|
||
Bring Authentic Turkish Flavour to Your Event - Email Us Today.
|
||
</motion.h2>
|
||
<motion.a
|
||
href="mailto:hello@antalyarestaurant.ca"
|
||
className={styles.storydesc}
|
||
variants={fadeInUp}
|
||
style={{ display: "inline-block" }}
|
||
>
|
||
hello@antalyarestaurant.ca
|
||
</motion.a>
|
||
</motion.div>
|
||
</section>
|
||
|
||
{/* Section 4: About Us */}
|
||
<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="About Catering Decorative Dinner Icon" width={24} height={24} />
|
||
<span>ANTALYA</span>
|
||
<Image src="/images/eat.png" alt="About Catering Decorative 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} prefetch={false}>
|
||
View Our Menu
|
||
</Link>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
<Footer />
|
||
</main >
|
||
)
|
||
} |