catering packages updated

src/app/catering-services-ontario/CateringContent.tsx

@@ -8,6 +8,8 @@ import Link from 'next/link'
 import Image from 'next/image'
 import styles from './catering.module.css'
 
+import CateringPackages from './CateringPackages';
+
 export default function CateringContent() {
     // Slider state for Visual Journey section
     const [currentSlide, setCurrentSlide] = useState(0);
@@ -134,7 +136,7 @@ export default function CateringContent() {
                     variants={staggerContainer}
                 >
                     <section className={styles.sectionHeading1}>
-                        <div className={styles.smallHeading1} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
+                        <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} />
@@ -315,8 +317,8 @@ export default function CateringContent() {
 
                     {/* Right Side: Images */}
                     <motion.div className={styles.servingImagesWrapper} variants={slideInRight}>
-                        <div className={styles.servingImagesGrid}>
-                            <div className={styles.servingImageLarge}>
+                        <div className={styles.servingImagesContainer}>
+                            <div className={styles.servingImageBack}>
                                 <Image
                                     src="/images/catering/grid-1/culinary-experience-left.webp"
                                     alt="Restaurant interior"
@@ -324,15 +326,7 @@ export default function CateringContent() {
                                     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}>
+                            <div className={styles.servingImageFront}>
                                 <Image
                                     src="/images/catering/grid-1/culinary-experience-right.webp"
                                     alt="Delicious dish"
@@ -340,11 +334,17 @@ export default function CateringContent() {
                                     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
@@ -380,7 +380,7 @@ export default function CateringContent() {
                 </motion.div>
             </section>
 
-            {/* Section 4: About Us - Restika One Of The Best Food Service */}
+            {/* Section 4: About Us */}
             <section className={styles.aboutSection}>
                 <motion.div
                     className={styles.aboutContainer}
@@ -459,6 +459,6 @@ export default function CateringContent() {
             </section>
 
             <Footer />
-        </main>
+        </main >
     )
 }

src/app/catering-services-ontario/CateringPackages.module.css

@@ -0,0 +1,311 @@
+.packagesSection {
+    padding: 80px 20px;
+    background-image: url("/images/about-us/guest-bg.webp");
+    background-size: cover;
+    background-position: center;
+    overflow: hidden;
+    color: #fff;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 60px;
+}
+
+.mainTitle {
+    font-family: var(--font-playfair);
+    font-size: 48px;
+    color: #fff;
+    margin-bottom: 15px;
+}
+
+.subTitle {
+    font-family: var(--font-lato);
+    font-size: 18px;
+    color: #c49c5c;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+}
+
+/* Package Row */
+.packageRow {
+    display: flex;
+    align-items: center;
+    gap: 60px;
+    margin-bottom: 80px;
+    /* Reduced from 80px */
+}
+
+.packageRow.reverse {
+    flex-direction: row-reverse;
+}
+
+/* Content Side */
+.contentSide {
+    flex: 1;
+    padding: 20px;
+}
+
+.ribbonWrapper {
+    margin-bottom: 25px;
+    display: flex;
+    justify-content: flex-start;
+}
+
+
+
+.ribbon {
+    background-color: #c49c5c;
+    /* Gold/Orange theme */
+    color: #fff;
+    padding: 10px 30px;
+    position: relative;
+    display: inline-block;
+    /* Clip path for ribbon flag effect if desired */
+    clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%);
+    padding-right: 40px;
+    /* Space for the notch */
+}
+
+.ribbonText {
+    font-family: var(--font-playfair);
+    font-size: 20px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+}
+
+.priceTag {
+    margin-bottom: 30px;
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    border-bottom: 2px solid #f5e6d3;
+    padding-bottom: 15px;
+}
+
+.priceAmount {
+    font-size: 32px;
+    font-weight: bold;
+    color: #fff;
+    font-family: var(--font-playfair);
+}
+
+.priceDetail {
+    font-size: 14px;
+    color: #c49c5c;
+    font-weight: 600;
+    text-transform: uppercase;
+    font-family: var(--font-lato);
+}
+
+.itemsList {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.listItem {
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+    margin-bottom: 15px;
+}
+
+.checkIcon {
+    color: #c49c5c;
+    font-weight: bold;
+}
+
+.itemText {
+    font-family: var(--font-lato);
+    font-size: 16px;
+    color: #f0f0f0;
+    line-height: 1.6;
+}
+
+/* Image Side */
+.imageSide {
+    flex: 1;
+    position: relative;
+    display: flex;
+    justify-content: center;
+}
+
+.archImageWrapper {
+    position: relative;
+    width: 100%;
+    height: 500px;
+    border-radius: 200px 200px 20px 20px;
+    /* Arch shape */
+    overflow: hidden;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+
+
+.archImage {
+    object-fit: cover;
+    transition: transform 0.6s ease;
+}
+
+.archImageWrapper:hover .archImage {
+    transform: scale(1.05);
+}
+
+/* Add Ons Section */
+.addOnsSection {
+    background-color: #000;
+    /* background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url('/images/catering/bring-authentic.webp'); */
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    padding: 80px 20px;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    margin-top: 0;
+}
+
+.addOnsHeader {
+    margin-bottom: 50px;
+}
+
+.addOnsSubtitle {
+    display: block;
+    font-size: 14px;
+    color: #c49c5c;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    margin-bottom: 10px;
+    font-weight: 600;
+    font-family: var(--font-lato);
+}
+
+.addOnsTitle {
+    font-family: var(--font-playfair);
+    font-size: 48px;
+    color: #fff;
+    margin-bottom: 20px;
+    font-weight: 400;
+}
+
+.addOnsDescription {
+    color: #a0a0a0;
+    font-family: var(--font-lato);
+    font-size: 16px;
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.6;
+}
+
+.addOnsGrid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    /* 4 items */
+    gap: 30px;
+}
+
+.addOnCard {
+    background: #111;
+    padding: 30px 20px;
+    /* Reduced padding */
+    /* border-radius: 5px; */
+    border: 1px solid #222;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    transition: all 0.3s ease;
+    min-height: 250px;
+}
+
+.addOnCard:hover {
+    transform: translateY(-5px);
+    border-color: #c49c5c;
+    background: #151515;
+}
+
+.addOnImageWrapper {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    margin-bottom: 20px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 3px solid #c49c5c;
+}
+
+.addOnImage {
+    object-fit: cover;
+}
+
+/* 
+.addOnIcon {
+    width: 50px;
+    height: 50px;
+    color: #c49c5c;
+    margin-bottom: 10px;
+} 
+*/
+
+.addOnName {
+    font-family: var(--font-playfair);
+    font-size: 20px;
+    font-weight: 400;
+    color: #fff;
+    margin: 0;
+}
+
+.addOnPrice {
+    font-family: var(--font-lato);
+    font-size: 16px;
+    color: #a0a0a0;
+    line-height: 1.6;
+    margin: 0;
+}
+
+/* Responsive */
+@media (max-width: 1200px) {
+    .addOnsGrid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 900px) {
+    .packageRow {
+        flex-direction: column;
+        gap: 40px;
+    }
+
+    .packageRow.reverse {
+        flex-direction: column;
+    }
+
+    .imageSide {
+        width: 100%;
+    }
+
+    .archImageWrapper {
+        width: 100%;
+        max-width: 500px;
+        height: 350px;
+        border-radius: 150px 150px 20px 20px;
+    }
+}
+
+@media (max-width: 600px) {
+    .addOnsGrid {
+        grid-template-columns: 1fr;
+    }
+
+    .addOnsTitle {
+        font-size: 36px;
+    }
+}

src/app/catering-services-ontario/CateringPackages.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import Image from 'next/image';
+import styles from './CateringPackages.module.css';
+import { motion } from 'framer-motion';
+
+const packages = [
+    {
+        id: 'silver',
+        name: 'SILVER PACKAGE',
+        price: '$19',
+        perPerson: 'PER PERSON',
+        minPeople: '(MIN 20PPL)',
+        image: '/images/catering/packages/silver.webp', // Placeholder
+        items: [
+            'Choice of two kebabs (Adana, Kofta, Chicken Shish, Meat Doner, Chicken Doner)',
+            'Rice or Bulgur',
+            'Choice of one salad (Garden, Greek, Caesar Salad)',
+            'Choice of 1 appetizer (Babaghanoush, Hummus, Haydari)',
+            'Freshly baked bread',
+            'Grilled tomato and peppers'
+        ]
+    },
+    {
+        id: 'gold',
+        name: 'GOLD PACKAGE',
+        price: '$23',
+        perPerson: 'PER PERSON',
+        minPeople: '(MIN 25PPL)',
+        image: '/images/catering/packages/gold.webp', // Placeholder
+        items: [
+            'Choice of two kebabs (Adana, Kofta, Chicken Shish, Meat Doner, Chicken Doner)',
+            'Rice or Bulgur',
+            'Choice of one salad (Garden, Greek, Caesar Salad)',
+            'Choice of 2 appetizers (Babaghanoush, Hummus, Haydari)',
+            'Garlic potatoes or Fried and spiced eggplants',
+            'Freshly baked bread',
+            'Grilled tomato and peppers',
+            'Dessert (Sutlac-Rice Pudding)'
+        ]
+    },
+    {
+        id: 'platinum',
+        name: 'PLATINUM PACKAGE',
+        price: '$25',
+        perPerson: 'PER PERSON',
+        minPeople: '(MIN 30PPL)',
+        image: '/images/catering/packages/platinum.webp', // Placeholder
+        items: [
+            'Choice of 2 kebabs (Adana, Kofta, Chicken Shish, Meat Doner, Chicken Doner)',
+            'Rice or Bulgur',
+            'Choice of one salad (Garden, Greek, Caesar Salad)',
+            'Choice of 2 appetizers (Babaghanoush, Hummus, Haydari)',
+            'Garlic potatoes or Fried and Spiced eggplants',
+            'Grilled tomato and peppers',
+            'Freshly baked bread',
+            'Dessert (Sutlac-Rice Pudding)',
+            'Qabuli Plau (Basmati rice with carrots and raisins topped with veal chunks)'
+        ]
+    }
+];
+
+const addOns = [
+    { name: 'Tray of Falafel', price: '$60', image: '/images/catering/packages/tray.webp' },
+    { name: 'Shola Gorbandi', price: '$80', image: '/images/catering/packages/shola.webp' },
+    { name: 'Kavurma (Saluted Veal)', price: '$80', image: '/images/catering/packages/kavurma.webp' },
+    { name: 'Mantu (Afghan style dumplings)', price: '$80', image: '/images/catering/packages/mantu.webp' }
+];
+
+const CateringPackages = () => {
+    return (
+        <>
+            <section className={styles.packagesSection}>
+                <div className={styles.container}>
+                    <div className={styles.header}>
+                        <h2 className={styles.mainTitle}>Catering Packages</h2>
+                        <p className={styles.subTitle}>Choose the perfect menu for your event</p>
+                    </div>
+
+                    {packages.map((pkg, index) => (
+                        <div key={pkg.id} className={`${styles.packageRow} ${index % 2 !== 0 ? styles.reverse : ''}`} style={index === packages.length - 1 ? { marginBottom: 0 } : {}}>
+                            {/* Content Side */}
+                            <div className={styles.contentSide}>
+                                <div className={styles.ribbonWrapper}>
+                                    <div className={styles.ribbon}>
+                                        <span className={styles.ribbonText}>{pkg.name}</span>
+                                    </div>
+                                </div>
+
+                                <div className={styles.priceTag}>
+                                    <span className={styles.priceAmount}>{pkg.price}</span>
+                                    <span className={styles.priceDetail}>{pkg.perPerson} {pkg.minPeople}</span>
+                                </div>
+
+                                <ul className={styles.itemsList}>
+                                    {pkg.items.map((item, i) => (
+                                        <li key={i} className={styles.listItem}>
+                                            <span className={styles.checkIcon}>✓</span>
+                                            <span className={styles.itemText}>{item}</span>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+
+                            {/* Image Side */}
+                            <div className={styles.imageSide}>
+                                <div className={styles.archImageWrapper}>
+                                    <Image
+                                        src={pkg.image}
+                                        alt={pkg.name}
+                                        fill
+                                        className={styles.archImage}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </section>
+
+            {/* Add Ons Section */}
+            <section className={styles.addOnsSection}>
+                <div className={styles.container}>
+                    <div className={styles.addOnsHeader}>
+                        <span className={styles.addOnsSubtitle}>EXTRAS</span>
+                        <h3 className={styles.addOnsTitle}>Delicious Add-Ons</h3>
+                        <p className={styles.addOnsDescription}>
+                            Enhance your catering package with our signature sides and specialty dishes.
+                        </p>
+                    </div>
+
+                    <div className={styles.addOnsGrid}>
+                        {addOns.map((addon, i) => (
+                            <div key={i} className={styles.addOnCard}>
+                                <div className={styles.addOnImageWrapper}>
+                                    <Image
+                                        src={addon.image}
+                                        alt={addon.name}
+                                        fill
+                                        className={styles.addOnImage}
+                                    />
+                                </div>
+                                <h4 className={styles.addOnName}>{addon.name}</h4>
+                                <p className={styles.addOnPrice}>{addon.price}</p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default CateringPackages;

src/app/catering-services-ontario/catering.module.css

@@ -59,13 +59,17 @@
    ============================================ */
 
 .topSection {
-    padding: 0px 20px 80px;
+    padding: 80px 20px 80px;
     background-color: #f5e6d3;
 }
 
 .topContainer {
     max-width: 1400px;
     margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 80px;
+    align-items: start;
 }
 
 .topHeading {
@@ -85,10 +89,10 @@
 }
 
 .sectionHeading1 {
-    padding: 80px 20px 40px;
-    max-width: 900px;
-    margin: 0 auto;
-    text-align: center;
+    padding: 0;
+    max-width: 100%;
+    margin: 0;
+    text-align: left;
 }
 
 .smallHeading1 {
@@ -111,7 +115,7 @@
 
 .description1 {
     font-size: var(--body-size);
-   color: var(--color-alterparagraph) !important;
+    color: var(--color-alterparagraph) !important;
     line-height: 1.8;
     font-family: var(--font-lato);
     /* max-width: 800px; */
@@ -153,16 +157,22 @@
 
 .topCardsGrid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: 1fr;
     gap: 30px;
 }
 
 .topCard {
     position: relative;
-    height: 450px;
+    height: 140px;
+    /* Adjusted container height */
     overflow: hidden;
     cursor: pointer;
     transition: transform 0.4s ease, box-shadow 0.4s ease;
+    border-radius: 30 30 30 30px;
+    /* Rounded only at Bottom-Left to emphasize L shape */
+    border: none;
+    border-right: 8px solid #b07c4b;
+    border-top: 8px solid #b07c4b;
 }
 
 .topCard:hover {
@@ -174,6 +184,7 @@
     position: relative;
     width: 100%;
     height: 100%;
+    /* Image takes full height of the card, effectively 100% of 350px which is reduced from original */
     transition: transform 0.6s ease;
 }
 
@@ -202,6 +213,11 @@
     flex-direction: column;
     align-items: center;
     text-align: center;
+    transition: transform 0.3s ease;
+}
+
+.topCard:hover .topCardContent {
+    transform: translateX(-10px);
 }
 
 .topCardTitle {
@@ -209,7 +225,7 @@
     font-size: 36px;
     color: #d3cab3;
     font-weight: 700;
-    margin-bottom: 30px;
+    /* margin-bottom: 30px; */
     text-transform: capitalize;
     font-style: italic;
     line-height: 1.2;
@@ -237,7 +253,22 @@
 
 @media (max-width: 991px) {
     .topCardsGrid {
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: 1fr;
+    }
+
+    .topContainer {
+        grid-template-columns: 1fr;
+        gap: 60px;
+    }
+
+    .sectionHeading1 {
+        text-align: center;
+        margin-bottom: 40px;
+    }
+
+    .smallHeading1 {
+        justify-content: center !important;
+        /* Force center on mobile */
     }
 
     .topTitle {
@@ -252,7 +283,7 @@
     }
 
     .topCard {
-        height: 400px;
+        height: 180px;
     }
 
     .topTitle {
@@ -682,47 +713,86 @@
     position: relative;
 }
 
-.servingImagesGrid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    gap: 20px;
+.servingImagesContainer {
+    position: relative;
     height: 600px;
+    width: 100%;
 }
 
-.servingImageLarge {
-    grid-column: 2;
-    grid-row: 1;
-    position: relative;
+.servingImageBack {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 70%;
+    height: 85%;
+    border-radius: 30px;
     overflow: hidden;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+    z-index: 1;
 }
 
-.servingImageSmallTop {
-    grid-column: 1;
-    grid-row: 1 / 3;
-    position: relative;
+.servingImageFront {
+    position: absolute;
+    bottom: 50px;
+    left: 0;
+    width: 50%;
+    height: 50%;
+    border-radius: 30px;
     overflow: hidden;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
+    z-index: 2;
+    border: 8px solid #f5e6d3;
+    /* Match background color for cutout effect */
 }
 
-.servingImageSmallBottom {
-    grid-column: 2;
-    grid-row: 2;
-    position: relative;
-    overflow: hidden;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+.servingBadge {
+    position: absolute;
+    bottom: 0;
+    /* Align with bottom of front image roughly */
+    left: 40%;
+    /* Position to bridge the images or at center */
+    transform: translateX(-50%);
+    width: 150px;
+    height: 150px;
+    background-color: #c49c5c;
+    /* Gold theme color */
+    border-radius: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    z-index: 3;
+    border: 8px solid #f5e6d3;
+    /* Match background */
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    text-align: center;
 }
 
-.servingImageLarge img,
-.servingImageSmallTop img,
-.servingImageSmallBottom img {
+.badgeNumber {
+    font-family: var(--font-playfair);
+    font-size: 32px;
+    font-weight: 700;
+    line-height: 1;
+    margin-bottom: 5px;
+}
+
+.badgeText {
+    font-family: var(--font-lato);
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    line-height: 1.2;
+    max-width: 80%;
+}
+
+.servingImageBack img,
+.servingImageFront img {
     transition: transform 0.6s ease;
 }
 
-.servingImagesGrid:hover .servingImageLarge img,
-.servingImagesGrid:hover .servingImageSmallTop img,
-.servingImagesGrid:hover .servingImageSmallBottom img {
+.servingImagesContainer:hover .servingImageBack img,
+.servingImagesContainer:hover .servingImageFront img {
     transform: scale(1.05);
 }
 
@@ -732,7 +802,7 @@
         gap: 60px;
     }
 
-    .servingImagesGrid {
+    .servingImagesContainer {
         height: 500px;
     }
 
@@ -758,9 +828,21 @@
         gap: 40px;
     }
 
-    .servingImagesGrid {
+    .servingImagesContainer {
         height: 400px;
-        gap: 15px;
+    }
+
+    .servingBadge {
+        width: 120px;
+        height: 120px;
+    }
+
+    .badgeNumber {
+        font-size: 24px;
+    }
+
+    .badgeText {
+        font-size: 11px;
     }
 
     .servingTitle {
@@ -781,9 +863,14 @@
 }
 
 @media (max-width: 480px) {
-    .servingImagesGrid {
+    .servingImagesContainer {
         height: 350px;
-        gap: 10px;
+    }
+
+    .servingBadge {
+        width: 100px;
+        height: 100px;
+        bottom: -20px;
     }
 
     .servingTitle {
@@ -809,7 +896,7 @@
    ============================================ */
 
 .storySection {
-    padding: 200px 20px;
+    padding: 100px 20px;
     background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/catering/bring-authentic.webp');
     background-size: cover;
     background-position: center;