Merge branch 'main' of https://git.metatroncube.in/MetatroncubeSoftwareSolutions/Antalya-Restaurant

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

@@ -106,7 +106,7 @@
 .text {
   font-size: 1.1rem;
   line-height: 1.8;
-  /* color: #5d4037; */
+  color: var(--color-alterparagraph) !important;
   margin-bottom: 1.5rem;
   opacity: 0.9;
   font-family: var(--font-lato);
@@ -124,7 +124,7 @@
   display: inline-block;
   padding: 15px 40px;
   border: 2px solid #b07c4b;
-  color: var(--color-paragraph);
+ color: var(--color-alterparagraph) !important;
   font-family: var(--font-lato);
   font-size: 1.1rem;
   text-transform: uppercase;
@@ -137,7 +137,7 @@
 
 .menuButton:hover {
   background-color: #c49c5c;
-  color: #F5E6D3;
+  color: #fff;
 }
 
 .smallHeading {
@@ -195,7 +195,7 @@
 .featureDesc {
   font-family: var(--font-lato);
   font-size: 1rem;
-  /* color: #5d4037; */
+  color: var(--color-alterparagraph) !important;
   line-height: 1.6;
 }
 
@@ -213,7 +213,7 @@
 .sliderBtn {
   background: transparent;
   border: 2px solid #b07c4b;
-  color: var(--color-paragraph);
+  color: var(--color-alterparagraph) !important;
   font-size: 2.5rem;
   width: 50px;
   height: 50px;
@@ -549,7 +549,7 @@
 .faqSubtitle {
   font-family: var(--font-lato);
   font-size: 1.1rem;
-  color: var(--color-paragraph);
+  color: var(--color-alterparagraph) !important;
   line-height: 1.6;
   margin-bottom: 1rem;
 }

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

@@ -70,7 +70,7 @@
 
 .description {
     font-size: var(--body-size);
-    color: var(--color-paragraph);
+    color: var(--color-alterparagraph) !important;
     line-height: 1.8;
     font-family: var(--font-lato);
     max-width: 800px;

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

@@ -95,7 +95,7 @@ export default function MenuPage() {
                     <Image src="/images/eat.png" alt="Menu Section Decorative Cutlery Icon" width={24} height={24} />
                 </div>
                 <h2 className={styles.mainHeading}>Delicious Turkish Flavours, Mezze, and More</h2>
-                <p className={styles.description}>
+                <p className={styles.descriptionMenu}>
                     Craving authentic Turkish cuisine? At Antalya, our menu features a wide selection of traditional dishes - from crispy mezze appetizers to charcoal-grilled kebabs and hearty mains. Whether you’re seeking small bites or a full feast, we have something to satisfy every palate.
                 </p>
             </section>
@@ -117,7 +117,8 @@ export default function MenuPage() {
                         whileHover={{ scale: 1.05 }}
                         whileTap={{ scale: 0.95 }}
                     >
-                        All
+                        <Image src="/images/home/Categories/All.jpg" alt="All" width={35} height={35} className={styles.tabImage} />
+                        All Menu
                     </motion.button>
 
                     {/* Category Tabs */}
@@ -130,6 +131,13 @@ export default function MenuPage() {
                             whileHover={{ scale: 1.05 }}
                             whileTap={{ scale: 0.95 }}
                         >
+                            <Image
+                                src={section.image}
+                                alt={section.category}
+                                width={35}
+                                height={35}
+                                className={styles.tabImage}
+                            />
                             {section.category}
                         </motion.button>
                     ))}

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

@@ -98,7 +98,7 @@
     background: transparent;
     border: 2px solid #b07c4b;
     color: var(--color-paragraph);
-    padding: 12px 25px;
+    padding: 8px 20px 8px 8px;
     font-size: 1rem;
     cursor: pointer;
     transition: all 0.3s ease;
@@ -106,7 +106,16 @@
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: 600;
-    border-radius: 10px;
+    border-radius: 50px;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.tabImage {
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid #fff;
 }
 
 .tab:hover,
@@ -246,9 +255,18 @@
     line-height: 1.2;
 }
 
+.descriptionMenu {
+        font-size: var(--body-size);
+    color: var(--color-alterparagraph) !important;
+    line-height: 1.5;
+    font-family: var(--font-lato);
+    margin: 0;
+ 
+}
+
 .description {
     font-size: 0.95rem;
-    color: var(--color-paragraph);
+    color: var(--color-alterparagraph) !important;
     line-height: 1.5;
     font-family: var(--font-lato);
     margin: 0;

src/app/antalya-turkish-food-blog/[id]/blogDetail.module.css

@@ -1,6 +1,6 @@
 .main {
     background-color: var(--color-dark);
-    color: var(--color-paragraph);
+    color: var(--color-alterparagraph) !important;
     min-height: 100vh;
 }
 
@@ -130,6 +130,7 @@
 
 .content p {
     margin-bottom: 1.2rem;
+    color: var(--color-alterparagraph) !important;
 }
 
 .content ul {
@@ -139,7 +140,7 @@
 
 .content li {
     margin-bottom: 0.8rem;
-    color: var(--color-paragraph);
+    color: var(--color-alterparagraph) !important;
 }
 
 .content strong {
@@ -148,7 +149,7 @@
 }
 
 .content a {
-    color: var(--color-paragraph);
+    color: var(--color-alterparagraph) !important;
     text-decoration: underline;
     transition: color 0.3s;
 }
@@ -179,7 +180,7 @@
     content: "✓";
     position: absolute;
     left: 0;
-    color: var(--color-paragraph);
+    color: var(--color-alterparagraph) !important;
     font-weight: bold;
     font-size: 1.2rem;
 }
@@ -201,7 +202,7 @@
     font-family: var(--font-playfair);
     font-size: 1.4rem;
     font-style: italic;
-    /* color: #5d4037; */
+    color: var(--color-alterparagraph) !important;
     line-height: 1.8;
     margin: 0;
     position: relative;
@@ -214,7 +215,7 @@
     font-family: var(--font-lato);
     font-size: 1rem;
     font-style: normal;
-    color: var(--color-paragraph);
+    color: var(--color-alterparagraph) !important;
     font-weight: 600;
 }
 
@@ -265,7 +266,7 @@
 }
 
 .backLink {
-    color: var(--color-paragraph);
+    color: var(--color-alterparagraph) !important;
     font-size: 1.2rem;
     text-decoration: underline;
 }

src/app/antalya-turkish-food-blog/blog.module.css

@@ -70,7 +70,7 @@
 
 .description {
     font-size: var(--body-size);
-    color: var(--color-paragraph);
+    color: var(--color-alterparagraph) !important;
     line-height: 1.8;
     font-family: var(--font-lato);
     max-width: 800px;
@@ -144,13 +144,14 @@
     margin-bottom: 1.5rem;
     flex-grow: 1;
     font-family: var(--font-lato);
+    color: var(--color-alterparagraph) !important;
 }
 
 .button {
     display: inline-block;
     padding: 10px 25px;
     border: 2px solid #b07c4b;
-    color: #5d4037;
+    color: var(--color-alterparagraph) !important;
     text-align: center;
     transition: all 0.3s ease;
     align-self: flex-start;
@@ -162,7 +163,7 @@
 
 .button:hover {
     background-color: #c49c5c;
-    color: #d3cab3;
+    color: #fff !important;
 }
 
 @media (max-width: 768px) {

src/app/book-a-table/contact.module.css

@@ -85,6 +85,7 @@
 
 .subtitle {
     font-size: var(--body-size);
+    color: var(--color-alterparagraph) !important;
     line-height: 1.6;
     margin-bottom: 2rem;
     font-family: var(--font-lato);
@@ -145,7 +146,7 @@
 
 .charCount {
     font-size: var(--small-text-size);
-    color: var(--color-paragraph);
+    color: var(--color-alterparagraph) !important;
     text-align: right;
     font-family: var(--font-lato);
 }
@@ -153,7 +154,7 @@
 .submitButton {
     background: #c49c5c;
     border: none;
-    color: #d3cab3;
+    color: #fff;
     padding: 15px 40px;
     font-size: var(--body-size);
     font-weight: 600;
@@ -257,7 +258,7 @@
 
 .locationSubtitle {
     font-size: var(--small-text-size);
-    color: var(--color-paragraph);
+    color: var(--color-alterparagraph) !important;
     margin-bottom: 0.5rem;
     font-family: var(--font-lato);
 }

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

@@ -111,7 +111,7 @@
 
 .description1 {
     font-size: var(--body-size);
-    color: var(--color-paragraph);
+   color: var(--color-alterparagraph) !important;
     line-height: 1.8;
     font-family: var(--font-lato);
     /* max-width: 800px; */
@@ -653,7 +653,7 @@
 
 .servingDescription {
     font-size: var(--body-size);
-    color: var(--color-paragraph);
+    color: var(--color-alterparagraph) !important;
     line-height: 1.8;
     font-family: var(--font-lato);
     /* max-width: 800px; */
@@ -1026,7 +1026,7 @@
     gap: 15px;
     margin-bottom: 20px;
     font-size: var(--body-size);
-    color: var(--color-paragraph);
+    color: var(--color-alterparagraph) !important;
     font-family: var(--font-lato);
     line-height: 1.6;
 }
@@ -1039,7 +1039,7 @@
 }
 
 .lastButton {
-    color: var(--color-paragraph);
+    color: var(--color-alterparagraph) !important;
     font-family: var(--font-lato);
     text-transform: uppercase;
     letter-spacing: 1px;
@@ -1055,7 +1055,7 @@
 
 .lastButton:hover {
     background-color: #c49c5c;
-    color: #F5E6D3;
+    color: #fff !important;
     transform: translateY(-2px);
     /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); */
 }

src/app/globals.css

@@ -3,6 +3,7 @@
   --color-heading: #d3cab3;
   --color-button: #d28839;
   --color-paragraph: #c49c5c;
+  --color-alterparagraph: #b07c4b;
   --color-border: #b07c4b;
   --color-dark: #0a0a0a;
   --color-input-bg: #e8e0d5;

src/app/page.tsx

@@ -1,6 +1,7 @@
 import Hero from "@/components/Hero/Hero";
 import PopularDishes from "@/components/PopularDishes/PopularDishes";
 import About from "@/components/About/About";
+import Categories from "@/components/Categories/Categories";
 import Menu from "@/components/Menu/Menu";
 import Gallery from "@/components/Gallery/Gallery";
 import Testimonials from "@/components/Testimonials/Testimonials";
@@ -21,6 +22,7 @@ export default function Home() {
       <Hero />
       <PopularDishes />
       <About />
+      <Categories/>
       <Menu />
       <Gallery />
       <Testimonials />

src/components/About/About.module.css

@@ -92,7 +92,7 @@
     line-height: 1.8;
     margin-bottom: 50px;
     max-width: 60%;
-    font-size: 1rem;
+    font-size: 18px;
     opacity: 0.8;
 }
 

src/components/Blogs/Blogs.module.css

@@ -79,7 +79,7 @@
 .excerpt {
     font-family: var(--font-playfair);
     font-size: 0.95rem;
-    /* color: #5d4037; */
+    color: var(--color-alterparagraph) !important;
     margin-bottom: 25px;
     line-height: 1.6;
     max-width: 90%;
@@ -103,7 +103,7 @@
 
 .button:hover {
     background-color: #c49c5c;
-    color: #d3cab3;
+    color: #fff;
 }
 
 .arrow {

src/components/Categories/Categories.module.css

@@ -0,0 +1,195 @@
+.categoriesSection {
+    text-align: center;
+    background-color: #000000;
+    background-image: url(/images/about-us/guest-bg.webp);
+    background-position: center;
+    background-size: cover;
+    padding: 80px 10px;
+    position: relative;
+}
+
+.sectionHeading {
+    padding: 0px 20px 40px;
+    max-width: 900px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.smallHeading {
+    font-size: var(--small-text-size);
+    color: var(--color-paragraph);
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
+.mainHeading {
+    font-family: var(--font-playfair);
+    font-size: var(--main-heading-size);
+    color: #f5e6d3;
+    line-height: 1.3;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.description {
+    font-size: var(--body-size);
+    color: var(--color-paragraph);
+    line-height: 1.8;
+    font-family: var(--font-lato);
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.categoriesGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 3rem;
+    padding: 0 2rem;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.categoryCard {
+    position: relative;
+    cursor: pointer;
+    transition: all 0.4s ease;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.categoryCard:hover {
+    transform: translateY(-10px);
+}
+
+.imageContainer {
+    position: relative;
+    width: 180px;
+    height: 180px;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    transition: all 0.4s ease;
+}
+
+.categoryCard:hover .imageContainer {
+    box-shadow: 0 15px 50px rgba(196, 156, 92, 0.6);
+}
+
+.imageWrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.categoryImage {
+    object-fit: cover;
+    transition: transform 0.6s ease;
+}
+
+.categoryCard:hover .categoryImage {
+    transform: scale(1.15);
+}
+
+.overlay {
+    display: none;
+}
+
+.categoryContent {
+    width: 100%;
+    transition: transform 0.4s ease;
+}
+
+.categoryCard:hover .categoryContent {
+    transform: translateY(-5px);
+}
+
+.categoryName {
+    font-family: var(--font-playfair);
+    font-size: 1.4rem;
+    color: #f5e6d3;
+    font-weight: 700;
+    text-transform: uppercase;
+    margin: 0 0 1rem 0;
+    letter-spacing: 1px;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.decorativeLine {
+    width: 60px;
+    height: 3px;
+    background: linear-gradient(90deg, #c49c5c 0%, transparent 100%);
+    margin: 0 auto;
+    transition: width 0.4s ease;
+}
+
+.categoryCard:hover .decorativeLine {
+    width: 100px;
+    background: linear-gradient(90deg, #c49c5c 0%, #b07c4b 100%);
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+    .categoriesGrid {
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: 2.5rem;
+    }
+
+    .imageContainer {
+        width: 160px;
+        height: 160px;
+    }
+
+    .categoryName {
+        font-size: 1.3rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .categoriesSection {
+        padding: 60px 10px;
+    }
+
+    .categoriesGrid {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 20px;
+        padding: 0 1rem;
+    }
+
+    .imageContainer {
+        width: 140px;
+        height: 140px;
+    }
+
+    .categoryName {
+        font-size: 1.2rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .categoriesSection {
+        padding: 50px 10px;
+    }
+
+    .categoriesGrid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1.5rem;
+    }
+
+    .imageContainer {
+        width: 120px;
+        height: 120px;
+    }
+
+    .categoryName {
+        font-size: 1.1rem;
+    }
+
+    .sectionHeading {
+        padding: 0px 15px 30px;
+    }
+}

src/components/Categories/Categories.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+import styles from "@/components/Categories/Categories.module.css";
+import { menuData } from "@/utils/constant";
+
+export default function Categories() {
+    // Extract unique categories from menuData with custom images
+    const categories = menuData.map(section => ({
+        name: section.category,
+        image: section.image
+    }));
+
+    // Animation variants
+    const containerVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.15,
+                delayChildren: 0.2
+            }
+        }
+    };
+
+    const cardVariants = {
+        hidden: { opacity: 0, y: 50, scale: 0.9 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            scale: 1,
+            transition: {
+                duration: 0.6,
+                ease: "easeOut" as const
+            }
+        }
+    };
+
+    return (
+        <section className={styles.categoriesSection}>
+            {/* Heading Section */}
+            <section className={styles.sectionHeading}>
+                <div
+                    className={styles.smallHeading}
+                    style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}
+                >
+                    <Image src="/images/dinner.png" alt="Categories Decorative Dinner Icon" width={24} height={24} />
+                    <span>DISCOVER</span>
+                    <Image src="/images/eat.png" alt="Categories Decorative Cutlery Icon" width={24} height={24} />
+                </div>
+                <h2 className={styles.mainHeading}>Our Menu Categories</h2>
+                <p className={styles.description}>
+                    Explore our authentic Turkish culinary offerings, featuring everything from charcoal-grilled kebabs and flavorful mezzes to hearty mains and handcrafted desserts. Each category celebrates the rich traditions and vibrant tastes of Anatolia.
+                </p>
+            </section>
+
+            {/* Categories Grid */}
+            <motion.div
+                className={styles.categoriesGrid}
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: true, amount: 0.2 }}
+                variants={containerVariants}
+            >
+                {categories.map((category, index) => (
+                    <motion.div
+                        key={index}
+                        className={styles.categoryCard}
+                        variants={cardVariants}
+                        whileHover={{
+                            y: -10,
+                            transition: { duration: 0.3 }
+                        }}
+                    >
+                        <div className={styles.imageContainer}>
+                            <div className={styles.imageWrapper}>
+                                <Image
+                                    src={category.image}
+                                    alt={`${category.name} Category`}
+                                    fill
+                                    className={styles.categoryImage}
+                                />
+                            </div>
+                            <div className={styles.overlay}></div>
+                        </div>
+                        <div className={styles.categoryContent}>
+                            <h3 className={styles.categoryName}>{category.name}</h3>
+                            <div className={styles.decorativeLine}></div>
+                        </div>
+                    </motion.div>
+                ))}
+            </motion.div>
+        </section>
+    );
+}

src/components/Hero/Hero.module.css

@@ -28,7 +28,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.5);
+    /* background: rgba(0, 0, 0, 0.5); */
     z-index: 2;
     display: flex;
     flex-direction: column;

src/components/Menu/Menu.module.css

@@ -206,7 +206,7 @@
 }
 
 .description {
-    font-size: 0.95rem;
+    font-size: var(--body-size);
     color: var(--color-paragraph);
     line-height: 1.5;
     font-family: var(--font-lato);

src/components/PopularDishes/PopularDishes.module.css

@@ -74,7 +74,7 @@
     font-family: var(--font-cinzel), serif;
     /* Using serif as per image look */
     font-size: 1rem;
-    color: var(--color-paragraph);
+    color: var(--color-alterparagraph) !important;
     margin-bottom: 30px;
     line-height: 1.6;
     max-width: 90%;
@@ -97,7 +97,7 @@
 
 .button:hover {
     background-color: #c49c5c;
-    color: #d3cab3;
+    color: #fff;
 }
 
 .viewMoreContainer {

src/utils/constant.ts

@@ -480,7 +480,7 @@ export const galleryData = [
 export const menuData = [
     {
         category: 'Kebabs',
-        image: '/images/hero-3.png',
+        image: '/images/home/Categories/kebabs.webp',
         items: [
             { name: 'Adana (Mild)', price: '$23.99', description: 'Two skewers of ground veal & lamb grilled on charcoal', image: '/images/menu/adana(mild).webp', alt: 'Adana Kebab - Grilled ground veal and lamb skewers' },
             { name: 'Veal Shish', price: '$29.99', description: 'Two skewers of veal tenderloin marinated in Turkish spices', image: '/images/menu/veal-shish.webp', alt: 'Veal Shish Kebab - Marinated veal tenderloin skewers' },
@@ -494,7 +494,7 @@ export const menuData = [
     },
     {
         category: 'Doner',
-        image: '/images/dish-1.png',
+        image: '/images/home/Categories/doner.webp',
         items: [
             { name: 'Mixed Doner', price: '$23.99', description: 'Meat doner and chicken doner, served with salad, grilled tomato & pepper, white rice or bulgur and served with freshly baked bread', image: '/images/menu/mixed-doner.webp', alt: 'Mixed Doner Platter - Combination of meat and chicken doner' },
             { name: 'Meat Doner', price: '$23.99', description: 'Veal and Lamb cooked on rotating spit, served with salad, bbq tomato & peppers, white rice or bulgur and served with freshly baked bread', image: '/images/menu/meat-doner.webp', alt: 'Meat Doner Platter - Veal and lamb doner' },
@@ -505,7 +505,7 @@ export const menuData = [
     },
     {
         category: 'Pides',
-        image: '/images/dish-2.png',
+        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' },
@@ -520,7 +520,7 @@ export const menuData = [
     },
     {
         category: 'Sandwiches & Wraps',
-        image: '/images/hero-1.png',
+        image: '/images/home/Categories/wraps.webp',
         items: [
             { name: 'Meat Doner Sandwich', price: '$13.99', description: 'Freshly baked bread stuffed with veal & lamb doner, lettuce, tomato, onion and doner sauce', image: '/images/menu/meat-doner-sandwich.webp', alt: 'Meat Doner Sandwich - Veal and lamb doner in fresh bread' },
             { name: 'Meat Doner Wrap', price: '$12.99', description: 'Veal and lamb doner wrap with tomato, lettuce, onion and doner sauce', image: '/images/menu/meat-doner.webp', alt: 'Meat Doner Wrap - Wrapped veal and lamb doner' },
@@ -532,7 +532,7 @@ export const menuData = [
     },
     {
         category: 'Special Mix Platters',
-        image: '/images/hero-2.png',
+        image: '/images/home/Categories/platter.webp',
         items: [
             { name: 'Kebab Mix', price: '$84.99', description: 'All inclusive charcoal grilled mix platter, includes: Adana Kebab (1 skw), Kofta Kebab (1 skw), Chicken Shish (1 skw), Veal Shish (1 skw), Lamb Chops (2 pcs), Chicken Wings(4 pcs), Veal and Chicken Doner served with grilled tomato & pepper, house salad, white rice & bulgur topped with freshly baked bread ( Serves 2-3 People )', image: '/images/menu/kebab-mix.webp', alt: 'Kebab Mix Platter - Assorted grilled meats for 2-3 people' },
             { name: 'Chicken Lovers Mix', price: '$64.99', description: 'All inclusive charcoal grilled mix platter, includes: Chicken Adana Kebab (2 skw), Chicken Shish (1 skw), Chicken Wings(4 pcs) and Chicken Doner (2 portions) served with grilled tomato & pepper, house salad, white rice & bulgur topped with freshly baked bread ( Serves 2-3 People )', image: '/images/menu/chicken-lovers-mix.webp', alt: 'Chicken Lovers Mix - Assorted chicken dishes for 2-3 people' },
@@ -541,7 +541,7 @@ export const menuData = [
     },
     {
         category: 'Specialty Dishes',
-        image: '/images/hero-3.png',
+        image: '/images/home/Categories/speciality.webp',
         items: [
             { name: 'Manti', price: '$23.99', description: 'Hand crafted dumplings, filled with beef, spices topped with garlic yogurt and red manti sauce', image: '/images/menu/manti.webp', alt: 'Manti - Turkish beef dumplings with yogurt' },
             { name: 'Ali Nazik', price: '$29.99', description: 'Charcoal grilled Veal tenderloin over a bed of creamy roasted eggplant. Topped with melted butter, BBQ tomato and pepper.', image: '/images/menu/ali-nazik.webp', alt: 'Ali Nazik - Veal on roasted eggplant' },
@@ -551,7 +551,7 @@ export const menuData = [
     },
     {
         category: 'Appetizers',
-        image: '/images/dish-1.png',
+        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' },
@@ -564,7 +564,7 @@ export const menuData = [
     },
     {
         category: 'Sides',
-        image: '/images/hero-2.png',
+        image: '/images/home/Categories/sides.webp',
         items: [
             { name: 'Rice', price: '$6.99', description: 'Turkish style white rice', image: '/images/menu/rice.webp', alt: 'Turkish Rice - White rice side dish' },
             { name: 'Yogurt', price: '$4.99', description: 'Fresh Turkish yogurt', image: '/images/menu/yogurt.webp', alt: 'Turkish Yogurt - Fresh yogurt' },
@@ -579,7 +579,7 @@ export const menuData = [
     },
     {
         category: 'Salads',
-        image: '/images/dish-2.png',
+        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' },
@@ -589,7 +589,7 @@ export const menuData = [
     },
     {
         category: 'Drinks',
-        image: '/images/hero-1.png',
+        image: '/images/home/Categories/drinks.webp',
         items: [
             { name: 'Soda', price: '$2.99', description: '(Iced tea, Coke, Diet Coke, Coke Zero, Gingerale, Sprite, Sparkling Water)', image: '/images/menu/soda.webp', alt: 'Soft Drinks - Assorted sodas' },
             { name: 'Bottle of Water', price: '$1.49', description: 'Bottled water', image: '/images/menu/water.webp', alt: 'Bottled Water' },
@@ -605,7 +605,7 @@ export const menuData = [
     },
     {
         category: 'Desserts',
-        image: '/images/dish-2.png',
+        image: '/images/home/Categories/dessert.webp',
         items: [
             { name: 'Baklava ( 3 pieces )', price: '$8.99', description: 'Traditional Turkish baklava with pistachios', image: '/images/menu/baklava.webp', alt: 'Baklava - Traditional pistachio baklava' },
             { name: 'Trilice (Milk Cake)', price: '$9.99', description: 'Turkish three milk cake', image: '/images/menu/trilice.webp', alt: 'Trilice - Turkish milk cake' },