content updated

src/components/Catering/Catering.tsx

@@ -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}>
+                <motion.div
-                    <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
+                    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>
+                    </motion.div>
-                    <h2 className={styles.title}>Turkish Catering Excellence
-                    </h2>
 
-                    <p className={styles.description}>
+                    <motion.h2 variants={itemVariants} className={styles.title}>
-                        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.
+                        Moments Made Delicious
-                    </p>
+                    </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>
+                            </motion.div>
-                            <div className={styles.featureItem}>
+                            <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>
+                            </motion.div>
-                            <div className={styles.featureItem}>
+                            <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>
+                    </motion.div>
-                </div>
+                </motion.div>
             </div>
         </section>
     )