MetatroncubeSoftwareSolutions/Antalya-Restaurant
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

content updated

Browse Source
This commit is contained in:
akash 2025-12-13 22:50:03 +05:30
parent a64893aebd
commit 9cfe45942e
1 changed files with 62 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/Catering/Catering.tsx
View File

@ -49,15 +49,15 @@ const PhoneIcon = () => (
const testimonials = [
{
id: 1,
text: "It is a long established fact that our catering will distract you with delicious content of a page when looking at its layout."
text: "Refined presentation, authentic flavours, and smooth execution made our event memorable."
},
{
id: 2,
text: "The authentic flavors transported us straight to Turkey. An unforgettable culinary experience for our wedding guests."
text: "Exceptional taste and thoughtful service impressed every guest and elevated the entire dining experience."
},
{
id: 3,
text: "Professional service and exquisite presentation. Antalya Catering made our corporate event truly spectacular."
text: "Beautifully prepared dishes paired with attentive service created an elegant and enjoyable celebration."
}
]
@ -71,11 +71,37 @@ export default function Catering() {
return () => clearInterval(timer)
}, [])
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.2,
delayChildren: 0.1,
}
}
};
const itemVariants = {
hidden: { opacity: 0, y: 30 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.6 }
}
};
return (
<section className={styles.cateringSection}>
<div className={styles.container}>
{/* Left Side: Collage */}
<div className={styles.leftSide}>
<motion.div
className={styles.leftSide}
initial={{ opacity: 0, x: -30 }} // Slide slightly from left for images
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.8 }}
>
{/* Decorative Frame */}
<div className={styles.decorativeFrame}></div>
@ -109,57 +135,65 @@ export default function Catering() {
<span className={styles.callNumberLeft}>+1 519 588 2037</span>
</div>
</a>
</div>
</motion.div>
{/* Right Side: Content */}
<div className={styles.rightSide}>
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
<motion.div
className={styles.rightSide}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
variants={containerVariants}
>
<motion.div variants={itemVariants} className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
<Image src="/images/dinner.png" alt="Home Gallery Decorative Dinner Icon" width={24} height={24} />
<span>CATERING & EVENTS</span>
<Image src="/images/eat.png" alt="Home Gallery Decorative Cutlery Icon" width={24} height={24} />
</div>
<h2 className={styles.title}>Turkish Catering Excellence
</h2>
</motion.div>
<p className={styles.description}>
Experience authentic Turkish cuisine at your next event. From intimate gatherings to grand celebrations, we provide exceptional service and unforgettable flavors that will delight your guests.
</p>
<motion.h2 variants={itemVariants} className={styles.title}>
Moments Made Delicious
</motion.h2>
<motion.p variants={itemVariants} className={styles.description}>
Bring the soul of Turkish cuisine to your special occasions. Whether you’re hosting an intimate gathering or a large-scale celebration, Antalya creates memorable dining experiences with thoughtful service, elegant presentation, and fire-grilled flavours crafted to impress every guest.
</motion.p>
{/* Middle Row: Features + Quote Box */}
<div className={styles.middleContentRow}>
{/* Features Column */}
<div className={styles.featuresColumn}>
<div className={styles.featureItem}>
<motion.div variants={itemVariants} className={styles.featureItem}>
<div className={styles.featureIconCircle}>
<div className={styles.featureIcon}><EventsIcon /></div>
</div>
<div className={styles.featureContent}>
<h4>Events & Celebrations</h4>
<h4>Corporate & Social Events</h4>
{/* <p>Tailored menus for every occasion.</p> */}
</div>
</div>
<div className={styles.featureItem}>
</motion.div>
<motion.div variants={itemVariants} className={styles.featureItem}>
<div className={styles.featureIconCircle}>
<div className={styles.featureIcon}><CateringIcon /></div>
</div>
<div className={styles.featureContent}>
<h4>Food & Beverage Catering</h4>
<h4>Signature Cuisine & Drinks</h4>
{/* <p>Traditional charcoal-grilled dishes.</p> */}
</div>
</div>
<div className={styles.featureItem}>
</motion.div>
<motion.div variants={itemVariants} className={styles.featureItem}>
<div className={styles.featureIconCircle}>
<div className={styles.featureIcon}><VenueIcon /></div>
</div>
<div className={styles.featureContent}>
<h4>Venue & Service Options</h4>
<h4>End-to-End Event Support</h4>
{/* <p>Traditional charcoal-grilled dishes.</p> */}
</div>
</div>
</motion.div>
</div>
{/* Quote Box Slider */}
<div className={styles.quoteBoxWrapper}>
<motion.div variants={itemVariants} className={styles.quoteBoxWrapper}>
<AnimatePresence mode='wait'>
<motion.div
key={activeQuote}
@ -185,16 +219,16 @@ export default function Catering() {
/>
))}
</div>
</div>
</motion.div>
</div>
{/* Bottom Action Row */}
<div className={styles.actionRow}>
<motion.div variants={itemVariants} className={styles.actionRow}>
<Link href="/catering-services-ontario" className={styles.discoverBtn}>
Discover More →
Learn more →
</Link>
</div>
</div>
</motion.div>
</motion.div>
</div>
</section>
)