catering packages updated

src/app/antalya-restaurant-menu/MenuContent.tsx

@@ -179,7 +179,10 @@ export default function MenuPage() {
                                 <p className={styles.description}>{item.description}</p>
                             </div>
                             <div className={styles.priceBubble}>
-                                <span className={styles.price}>{item.price}</span>
+                                <span className={styles.price}>
+                                    <span className={styles.currency}>$</span>
+                                    <span className={styles.amount}>{item.price.replace('$', '')}</span>
+                                </span>
                             </div>
                         </motion.div>
                     ))}

src/app/antalya-restaurant-menu/menu.module.css

@@ -256,7 +256,7 @@
 }
 
 .descriptionMenu {
-        font-size: var(--body-size);
+    font-size: var(--body-size);
     color: var(--color-alterparagraph) !important;
     line-height: 1.5;
     font-family: var(--font-lato);
@@ -277,8 +277,8 @@
     right: -30px;
     top: 50%;
     transform: translateY(-50%);
-    width: 70px;
+    width: 80px;
-    height: 70px;
+    height: 80px;
     background: #c49c5c;
     border-radius: 50%;
     display: flex;
@@ -319,10 +319,23 @@
 }
 
 .price {
-    font-size: 18px;
     color: #fff;
     font-weight: bold;
-    font-family: var(--font-playfair);
+    font-family: var(--font-lato);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+}
+
+.currency {
+    font-size: 18px;
+    margin-bottom: 0;
+}
+
+.amount {
+    font-size: 16px;
 }
 
 @media (max-width: 968px) {

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.servingImagesContainer}>
-                            <div className={styles.servingImageLarge}>
+                            <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}>
+                            <div className={styles.servingImageFront}>
-                                <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"
@@ -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;
+    padding: 0;
-    max-width: 900px;
+    max-width: 100%;
-    margin: 0 auto;
+    margin: 0;
-    text-align: center;
+    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 {
+.servingImagesContainer {
-    display: grid;
+    position: relative;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    gap: 20px;
     height: 600px;
+    width: 100%;
 }
 
-.servingImageLarge {
+.servingImageBack {
-    grid-column: 2;
+    position: absolute;
-    grid-row: 1;
+    top: 0;
-    position: relative;
+    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 {
+.servingImageFront {
-    grid-column: 1;
+    position: absolute;
-    grid-row: 1 / 3;
+    bottom: 50px;
-    position: relative;
+    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 {
+.servingBadge {
-    grid-column: 2;
+    position: absolute;
-    grid-row: 2;
+    bottom: 0;
-    position: relative;
+    /* Align with bottom of front image roughly */
-    overflow: hidden;
+    left: 40%;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+    /* 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,
+.badgeNumber {
-.servingImageSmallTop img,
+    font-family: var(--font-playfair);
-.servingImageSmallBottom img {
+    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,
+.servingImagesContainer:hover .servingImageBack img,
-.servingImagesGrid:hover .servingImageSmallTop img,
+.servingImagesContainer:hover .servingImageFront img {
-.servingImagesGrid:hover .servingImageSmallBottom 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;

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Playfair_Display, DM_Sans } from "next/font/google";
 import "./globals.css";
 // import ScrollProviders from "@/components/ScrollProviders";
 // import ScrollToTop from "@/components/ScrollToTop/ScrollToTop";
+import CallButton from "@/components/CallButton/CallButton";
 // import Navbar from '@/components/Navbar/Navbar';
 // import NavbarWrapper from "@/components/NavbarWrapper";
 import Script from "next/script";
@@ -159,6 +160,7 @@ export default function RootLayout({
         {children}
         {/* <ScrollProviders /> */}
         {/* <ScrollToTop /> */}
+        <CallButton />
       </body>
     </html>
   )

src/components/CallButton/CallButton.module.css

@@ -0,0 +1,44 @@
+.callBtn {
+    position: fixed;
+    bottom: 3.5rem; /* 2rem (bottom) + 3.5rem (height) + 1rem (gap) */
+    right: 2rem;
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: 50%;
+    background-color: #c49c5c;
+    /* Gold color matching the theme */
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 50;
+    transition: all 0.3s ease-in-out;
+    text-decoration: none; /* For the anchor tag */
+}
+
+.callBtn:hover {
+    background-color: #b08d45;
+    transform: scale(1.1);
+}
+
+.icon {
+    width: 24px;
+    height: 24px;
+    stroke-width: 2.5;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+@media (max-width: 768px) {
+    .callBtn {
+        bottom: 3rem;
+        right: 1.5rem;
+        width: 3rem;
+        height: 3rem;
+    }
+}

src/components/CallButton/CallButton.tsx

@@ -0,0 +1,19 @@
+import styles from './CallButton.module.css'
+
+export default function CallButton() {
+    return (
+        <a
+            href="tel:+15195816363"
+            className={styles.callBtn}
+            aria-label="Call Antalya Restaurant"
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                className={styles.icon}
+            >
+                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.05 12.05 0 0 0 .57 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.03 12.03 0 0 0 2.81.57A2 2 0 0 1 22 16.92z" />
+            </svg>
+        </a>
+    )
+}

src/components/Footer/Footer.tsx

@@ -73,10 +73,10 @@ export default function Footer() {
                         <h3 className={styles.heading}>Quick Links</h3>
                         <ul className={styles.linkList}>
                             <li className={styles.linkItem}><Link href="/" className={styles.link} prefetch={false}>Home</Link></li>
-                            <li className={styles.linkItem}><Link href="/about-antalya-restaurant" className={styles.link} prefetch={false}>About</Link></li>
-                            <li className={styles.linkItem}><Link href="/antalya-restaurant-gallery" className={styles.link} prefetch={false}>Gallery</Link></li>
                             <li className={styles.linkItem}><Link href="/antalya-restaurant-menu" className={styles.link} prefetch={false}>Menu</Link></li>
                             <li className={styles.linkItem}><Link href="/catering-services-ontario" className={styles.link} prefetch={false}>Catering</Link></li>
+                            <li className={styles.linkItem}><Link href="/antalya-restaurant-gallery" className={styles.link} prefetch={false}>Gallery</Link></li>
+                            <li className={styles.linkItem}><Link href="/about-antalya-restaurant" className={styles.link} prefetch={false}>About</Link></li>
                             <li className={styles.linkItem}><Link href="/antalya-turkish-food-blog" className={styles.link} prefetch={false}>Blog</Link></li>
                             <li className={styles.linkItem}><Link href="/book-a-table" className={styles.link} prefetch={false}>Contact</Link></li>
                         </ul>
@@ -113,8 +113,8 @@ export default function Footer() {
                             <div className={styles.hoursBlock}>
                                 <h3 className={styles.subHeading}>Opening Hours</h3>
                                 <p className={styles.hours}>
-                                    Sunday-Thursday 11am-10pm<br />
+                                    Sunday-Saturday 11am-10pm<br />
-                                    Friday-Saturday 11am-11pm
+                                    {/* Friday-Saturday 11am-11pm */}
                                 </p>
                             </div>
                         </div>

src/components/Menu/Menu.module.css

@@ -218,8 +218,8 @@
     right: -30px;
     top: 50%;
     transform: translateY(-50%);
-    width: 70px;
+    width: 80px;
-    height: 70px;
+    height: 80px;
     background: #c49c5c;
     border-radius: 50%;
     display: flex;
@@ -260,10 +260,23 @@
 }
 
 .price {
-    font-size: 18px;
     color: #fff;
     font-weight: bold;
-    font-family: var(--font-playfair);
+    font-family: var(--font-lato);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+}
+
+.currency {
+    font-size: 18px;
+    margin-bottom: 0;
+}
+
+.amount {
+    font-size: 18px;
 }
 
 @media (max-width: 968px) {

src/components/Menu/Menu.tsx

@@ -88,7 +88,10 @@ export default function HomeMenu() {
                         </div>
 
                         <div className={styles.priceBubble}>
-                            <span className={styles.price}>{item.price}</span>
+                            <span className={styles.price}>
+                                <span className={styles.currency}>$</span>
+                                <span className={styles.amount}>{item.price.replace('$', '')}</span>
+                            </span>
                         </div>
                     </motion.div>
                 ))}

src/components/Navbar/Navbar.tsx

@@ -7,10 +7,10 @@ import styles from './Navbar.module.css'
 
 const navLinks = [
     { name: 'Home', href: '/' },
-    { name: 'About', href: '/about-antalya-restaurant' },
-    { name: 'Gallery', href: '/antalya-restaurant-gallery' },
     { name: 'Menu', href: '/antalya-restaurant-menu' },
     { name: 'Catering', href: '/catering-services-ontario' },
+    { name: 'Gallery', href: '/antalya-restaurant-gallery' },
+    { name: 'About', href: '/about-antalya-restaurant' },
     { name: 'Blog', href: '/antalya-turkish-food-blog' },
     { name: 'Contact', href: '/book-a-table' },
 ]

src/components/ScrollToTop/ScrollToTop.module.css

@@ -37,3 +37,11 @@
     height: 24px;
     stroke-width: 2.5;
 }
+
+@media (max-width: 768px) {
+    .scrollToTopBtn {
+        right: 1.5rem;
+        width: 3rem;
+        height: 3rem;
+    }
+}

src/utils/constant.ts

@@ -478,6 +478,29 @@ export const galleryData = [
 ];
 
 export const menuData = [
+    {
+        category: 'Appetizers',
+        image: '/images/home/Categories/appetizers.webp',
+        items: [
+            { name: 'Babaganoush', price: '$9.99', description: 'Roasted eggplant, yogurt, garlic, olive oil and served with freshly baked bread', image: '/images/menu/babaganoush.webp', alt: 'Babaganoush - Roasted eggplant dip' },
+            { name: 'Spicy Mashed Salad ( Ezme )', price: '$9.99', description: 'Fresh tomato, onion, bell pepper, parsley, seasoning and served with freshly baked bread', image: '/images/menu/spicy-mashed-salad.webp', alt: 'Ezme - Spicy tomato and pepper salad' },
+            { name: 'Mixed Appetizer Plate', price: '$22.99', description: 'Babaganoush, Ezme, Hummus, Haydari and served with freshly baked bread', image: '/images/menu/mixed-appetizer-plate.webp', alt: 'Mixed Appetizer Plate - Assorted Turkish appetizers' },
+            { name: 'Sigara Boregi (5 pcs)', price: '$9.99', description: 'Fried cigar shaped phyllo dough pastries stuffed with feta cheese and parsley', image: '/images/menu/sigara-boregi.webp', alt: 'Sigara Boregi - Fried cheese rolls' },
+            { name: 'Haydari', price: '$9.99', description: 'Yogurt, mint, feta, olive oil, garlic, sea salt and served with freshly baked bread', image: '/images/menu/haydari.webp', alt: 'Haydari - Yogurt dip with herbs' },
+            { name: 'Hummus', price: '$9.99', description: 'Mashed chickpeas, tahini, lemon, olive oil and served with freshly baked bread', image: '/images/menu/hummus.webp', alt: 'Hummus - Chickpea dip' },
+            { name: 'Lentil Soup', price: '$8.99', description: 'Lentil, onion, carrot, mix of spicy and served with freshly baked bread', image: '/images/menu/lentil-soup.webp', alt: 'Lentil Soup - Turkish red lentil soup' }
+        ]
+    },
+    {
+        category: 'Salads',
+        image: '/images/home/Categories/salads.webp',
+        items: [
+            { name: 'Green Salad', price: '$10.99', description: 'Lettuce, onions, cucumber, feta, tomatoes', image: '/images/menu/green-salad.webp', alt: 'Green Salad - Fresh garden salad' },
+            { name: 'Greek Salad', price: '$12.99', description: 'Tomato, onion, cucumber, lettuce, feta, black olives, olive oil', image: '/images/menu/greek-salad.webp', alt: 'Greek Salad - Traditional Greek salad' },
+            { name: 'Shepherd Salad', price: '$10.99', description: 'Tomato, cucumber, onion, olive oil, lemon', image: '/images/menu/shepherd-salad.webp', alt: 'Shepherd Salad - Turkish choban salad' },
+            { name: 'Caesar Salad', price: '$12.99', description: 'Romaine lettuce mixed with creamy Cesar dressing, topped with cherry tomatoes, Parmesan cheese & croutons', image: '/images/menu/caesar-salad.webp', alt: 'Caesar Salad - Classic Caesar salad' }
+        ]
+    },
     {
         category: 'Kebabs',
         image: '/images/home/Categories/kebabs.webp',
@@ -503,21 +526,6 @@ export const menuData = [
             { name: 'Chicken Iskender', price: '$25.99', description: 'Chicken Doner served on a bed of freshly baked bread, topped with special tomato sauce, served with grilled tomato, pepper and yogurt', image: '/images/menu/chicken-iskender.webp', alt: 'Chicken Iskender - Chicken doner with tomato sauce' }
         ]
     },
-    {
-        category: 'Pides',
-        image: '/images/home/Categories/pides.webp',
-        items: [
-            { name: 'Lahmacun', price: '$18.99', description: 'Ground beef blended with pepper, onion, tomato, parsley and herbs on a thin crust dough, serving with parsley, sumac onion, lemon', image: '/images/menu/lahmacun.webp', alt: 'Lahmacun - Turkish flatbread with ground beef' },
-            { name: 'Sujuk Pide', price: '$20.99', description: 'Turkish style sausage with mozzarella cheese, served with parsley, onion, lemon (* add mozzarella cheese 3.00)', image: '/images/menu/sujuk-pide.webp', alt: 'Sujuk Pide - Turkish sausage flatbread' },
-            { name: 'Cheese Pide', price: '$18.99', description: 'High quality mozzarella cheese in a thing crust pide dough, served with parsley, onion, lemon', image: '/images/menu/cheese-pide.webp', alt: 'Cheese Pide - Mozzarella cheese flatbread' },
-            { name: 'Veal Doner Pide with Mozzarella Cheese', price: '$18.99', description: 'Veal doner with mozzarella cheese on pide dough', image: '/images/menu/veal-doner-pide.webp', alt: 'Veal Doner Pide - Doner meat with cheese' },
-            { name: 'Veggie Pide', price: '$18.99', description: 'Red bell pepper, mushroom, onion with mozzarella cheese on a thin crust pide dough, served with parsley, sumac onion and lemon', image: '/images/menu/veggie-pide.webp', alt: 'Veggie Pide - Vegetable flatbread with cheese' },
-            { name: 'Ground Beef Pide', price: '$19.99', description: 'Ground beef, onion, tomato, parsley and red pepper on a thin crust pide dough (* add mozzarella cheese 3.00, * add egg 3.00)', image: '/images/menu/ground-beef-pide.webp', alt: 'Ground Beef Pide - Beef flatbread' },
-            { name: 'Spinach Cheese Pide', price: '$18.99', description: 'Spinach with mozzarella cheese on a thin crust pide dough, served with parsley, sumac onion and lemon', image: '/images/menu/spinach-cheese-pide.webp', alt: 'Spinach Cheese Pide - Spinach and cheese flatbread' },
-            { name: 'Mixed Pide', price: '$20.99', description: 'Sujuk, Ground Beef, Mozzarella Cheese', image: '/images/menu/mixed-pide.webp', alt: 'Mixed Pide - Combination flatbread with sausage and beef' },
-            { name: 'Chicken Doner Pide with Mozzarella Cheese', price: '$18.99', description: 'Chicken doner with mozzarella cheese on pide dough', image: '/images/menu/chicken-doner.webp', alt: 'Chicken Doner Pide - Chicken doner with cheese' }
-        ]
-    },
     {
         category: 'Sandwiches & Wraps',
         image: '/images/home/Categories/wraps.webp',
@@ -550,16 +558,18 @@ export const menuData = [
         ]
     },
     {
-        category: 'Appetizers',
+        category: 'Pides',
-        image: '/images/home/Categories/appetizers.webp',
+        image: '/images/home/Categories/pides.webp',
         items: [
-            { name: 'Babaganoush', price: '$9.99', description: 'Roasted eggplant, yogurt, garlic, olive oil and served with freshly baked bread', image: '/images/menu/babaganoush.webp', alt: 'Babaganoush - Roasted eggplant dip' },
+            { name: 'Lahmacun', price: '$18.99', description: 'Ground beef blended with pepper, onion, tomato, parsley and herbs on a thin crust dough, serving with parsley, sumac onion, lemon', image: '/images/menu/lahmacun.webp', alt: 'Lahmacun - Turkish flatbread with ground beef' },
-            { name: 'Spicy Mashed Salad ( Ezme )', price: '$9.99', description: 'Fresh tomato, onion, bell pepper, parsley, seasoning and served with freshly baked bread', image: '/images/menu/spicy-mashed-salad.webp', alt: 'Ezme - Spicy tomato and pepper salad' },
+            { name: 'Sujuk Pide', price: '$20.99', description: 'Turkish style sausage with mozzarella cheese, served with parsley, onion, lemon (* add mozzarella cheese 3.00)', image: '/images/menu/sujuk-pide.webp', alt: 'Sujuk Pide - Turkish sausage flatbread' },
-            { name: 'Mixed Appetizer Plate', price: '$22.99', description: 'Babaganoush, Ezme, Hummus, Haydari and served with freshly baked bread', image: '/images/menu/mixed-appetizer-plate.webp', alt: 'Mixed Appetizer Plate - Assorted Turkish appetizers' },
+            { name: 'Cheese Pide', price: '$18.99', description: 'High quality mozzarella cheese in a thing crust pide dough, served with parsley, onion, lemon', image: '/images/menu/cheese-pide.webp', alt: 'Cheese Pide - Mozzarella cheese flatbread' },
-            { name: 'Sigara Boregi (5 pcs)', price: '$9.99', description: 'Fried cigar shaped phyllo dough pastries stuffed with feta cheese and parsley', image: '/images/menu/sigara-boregi.webp', alt: 'Sigara Boregi - Fried cheese rolls' },
+            { name: 'Veal Doner Pide with Mozzarella Cheese', price: '$18.99', description: 'Veal doner with mozzarella cheese on pide dough', image: '/images/menu/veal-doner-pide.webp', alt: 'Veal Doner Pide - Doner meat with cheese' },
-            { name: 'Haydari', price: '$9.99', description: 'Yogurt, mint, feta, olive oil, garlic, sea salt and served with freshly baked bread', image: '/images/menu/haydari.webp', alt: 'Haydari - Yogurt dip with herbs' },
+            { name: 'Veggie Pide', price: '$18.99', description: 'Red bell pepper, mushroom, onion with mozzarella cheese on a thin crust pide dough, served with parsley, sumac onion and lemon', image: '/images/menu/veggie-pide.webp', alt: 'Veggie Pide - Vegetable flatbread with cheese' },
-            { name: 'Hummus', price: '$9.99', description: 'Mashed chickpeas, tahini, lemon, olive oil and served with freshly baked bread', image: '/images/menu/hummus.webp', alt: 'Hummus - Chickpea dip' },
+            { name: 'Ground Beef Pide', price: '$19.99', description: 'Ground beef, onion, tomato, parsley and red pepper on a thin crust pide dough (* add mozzarella cheese 3.00, * add egg 3.00)', image: '/images/menu/ground-beef-pide.webp', alt: 'Ground Beef Pide - Beef flatbread' },
-            { name: 'Lentil Soup', price: '$8.99', description: 'Lentil, onion, carrot, mix of spicy and served with freshly baked bread', image: '/images/menu/lentil-soup.webp', alt: 'Lentil Soup - Turkish red lentil soup' }
+            { name: 'Spinach Cheese Pide', price: '$18.99', description: 'Spinach with mozzarella cheese on a thin crust pide dough, served with parsley, sumac onion and lemon', image: '/images/menu/spinach-cheese-pide.webp', alt: 'Spinach Cheese Pide - Spinach and cheese flatbread' },
+            { name: 'Mixed Pide', price: '$20.99', description: 'Sujuk, Ground Beef, Mozzarella Cheese', image: '/images/menu/mixed-pide.webp', alt: 'Mixed Pide - Combination flatbread with sausage and beef' },
+            { name: 'Chicken Doner Pide with Mozzarella Cheese', price: '$18.99', description: 'Chicken doner with mozzarella cheese on pide dough', image: '/images/menu/chicken-doner.webp', alt: 'Chicken Doner Pide - Chicken doner with cheese' }
         ]
     },
     {
@@ -571,22 +581,13 @@ export const menuData = [
             { name: 'Kofta ( 1 skw )', price: '$8.99', description: 'Single skewer of kofta kebab', image: '/images/menu/kofta.webp', alt: 'Kofta Skewer - Single kofta kebab' },
             { name: 'Lamb Chops ( 4 pcs )', price: '$27.99', description: 'Four pieces of grilled lamb chops', image: '/images/menu/lamb-chops.webp', alt: 'Lamb Chops Side - Four grilled lamb chops' },
             { name: 'Veal Shish ( 1 skw )', price: '$9.99', description: 'Single skewer of veal shish', image: '/images/menu/veal-shish.webp', alt: 'Veal Shish Skewer - Single veal kebab' },
-            { name: 'French Fries', price: '$6.99 - $8.99', description: 'Regular & Large crispy french fries', image: '/images/menu/french-fries.webp', alt: 'French Fries - Crispy golden fries' },
+            { name: 'French Fries (Regular)', price: '$6.99', description: 'Regular crispy french fries', image: '/images/menu/french-fries.webp', alt: 'French Fries - Regular crispy golden fries' },
+            { name: 'French Fries (Large)', price: '$8.99', description: 'Large crispy french fries', image: '/images/menu/french-large.webp', alt: 'French Fries - Large crispy golden fries' },
             { name: 'Bulgur', price: '$6.99', description: 'Turkish style bulgur wheat', image: '/images/menu/bulgur.webp', alt: 'Bulgur - Turkish wheat side dish' },
             { name: 'Bread', price: '$1.99', description: 'Freshly baked Turkish bread', image: '/images/menu/bread.webp', alt: 'Turkish Bread - Fresh baked bread' },
             { name: 'Adana ( 1 skw )', price: '$8.99', description: 'Single skewer of Adana kebab', image: '/images/menu/adana(skw).webp', alt: 'Adana Skewer - Single Adana kebab' }
         ]
     },
-    {
-        category: 'Salads',
-        image: '/images/home/Categories/salads.webp',
-        items: [
-            { name: 'Green Salad', price: '$10.99', description: 'Lettuce, onions, cucumber, feta, tomatoes', image: '/images/menu/green-salad.webp', alt: 'Green Salad - Fresh garden salad' },
-            { name: 'Greek Salad', price: '$12.99', description: 'Tomato, onion, cucumber, lettuce, feta, black olives, olive oil', image: '/images/menu/greek-salad.webp', alt: 'Greek Salad - Traditional Greek salad' },
-            { name: 'Shepherd Salad', price: '$10.99', description: 'Tomato, cucumber, onion, olive oil, lemon', image: '/images/menu/shepherd-salad.webp', alt: 'Shepherd Salad - Turkish choban salad' },
-            { name: 'Caesar Salad', price: '$12.99', description: 'Romaine lettuce mixed with creamy Cesar dressing, topped with cherry tomatoes, Parmesan cheese & croutons', image: '/images/menu/caesar-salad.webp', alt: 'Caesar Salad - Classic Caesar salad' }
-        ]
-    },
     {
         category: 'Drinks',
         image: '/images/home/Categories/drinks.webp',