all pages new heading format are updated , testimonial correction updated

2025-11-28 12:03:22 +05:30 · 2025-11-28 12:03:22 +05:30 · 7b1a76134c
commit 7b1a76134c
parent 8f03e9f127
15 changed files with 810 additions and 228 deletions
--- a/src/app/about/about.module.css
+++ b/src/app/about/about.module.css
@ -195,10 +195,11 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  gap: 2rem;
+  /* gap: 2rem; */
  max-width: 900px;
  margin: 0 auto;
  position: relative;
+  padding: 0 70px;
 }

 .sliderBtn {
@ -214,6 +215,18 @@
  cursor: pointer;
  transition: all 0.3s;
  flex-shrink: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+}
+
+.sliderBtn:first-child {
+  left: 10px;
+}
+
+.sliderBtn:last-child {
+  right: 10px;
 }

 .sliderBtn:hover {
@ -360,20 +373,12 @@

@media (max-width: 1024px) {
  .featuresGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  /* .featuresGrid {
    grid-template-columns: 1fr;
-  }
-
-  .testimonialSlider {
-    flex-direction: column;
-  }
-
-  .sliderBtn {
-    order: 2;
-  }
-
-  .testimonialCard {
-    order: 1;
-  }
+  } */

  .faqContainer {
    grid-template-columns: 1fr;
@ -417,6 +422,18 @@
    font-size: 2rem;
  }

+  .testimonialSlider {
+    padding: 0 40px;
+  }
+
+  .sliderBtn:first-child {
+    left: 0;
+  }
+
+  .sliderBtn:last-child {
+    right: 0;
+  }
+
  .faqSection {
    padding: 60px 20px;
  }
@ -602,6 +619,10 @@
    gap: 1.5rem;
  }

+  .featuresGrid {
+    grid-template-columns: 1fr;
+  }
+
  /* Image should come to top */
  .faqImageBlock {
    width: 100% !important;
--- a/src/app/blog/blog.module.css
+++ b/src/app/blog/blog.module.css
@ -42,11 +42,46 @@
    color: var(--color-gold);
 }

+/* Section Heading Styles */
+.sectionHeading {
+    padding: 60px 20px 40px;
+    max-width: 900px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.smallHeading {
+    font-size: 0.9rem;
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
+.mainHeading {
+    font-family: var(--font-playfair);
+    font-size: 2.5rem;
+    color: #5d4037;
+    line-height: 1.3;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.description {
+    font-size: 1rem;
+    color: #c49c5c;
+    line-height: 1.8;
+    font-family: var(--font-lato);
+    max-width: 800px;
+    margin: 0 auto;
+}
+
 .blogSection {
-    padding: 80px 10px;
+    padding: 20px 10px;
    max-width: 1200px;
    margin: 0 auto;
-    /* background-color: #0a0a0a; */
+    padding-bottom: 80px;
 }

 .grid {
@ -98,7 +133,6 @@

 .date {
    font-size: 0.9rem;
-    /* color: #836839; */
    margin-bottom: 1rem;
    font-family: var(--font-lato);
    font-weight: 600;
@ -106,7 +140,6 @@

 .excerpt {
    font-size: 1rem;
-    /* color: #5d4037; */
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
@ -137,6 +170,10 @@
        font-size: 3rem;
    }

+    .mainHeading {
+        font-size: 2rem;
+    }
+
    .blogSection {
        padding: 60px 10px;
    }
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@ -64,6 +64,14 @@ export default function BlogPage() {
                </div>
            </motion.section>

+            <section className={styles.sectionHeading}>
+                <p className={styles.smallHeading}>🍴 ANTALYA 🍴</p>
+                <h2 className={styles.mainHeading}>Stories From Our Kitchen, Turkish Culture, And Culinary Traditions</h2>
+                <p className={styles.description}>
+                    Discover the rich heritage of Turkish cuisine through our blog. From traditional recipes and cooking techniques to the cultural significance of tea and hospitality, we share insights into what makes Turkish food truly special.
+                </p>
+            </section>
+
            <section className={styles.blogSection}>
                <motion.div
                    className={styles.grid}
--- a/src/app/contact/contact.module.css
+++ b/src/app/contact/contact.module.css
@ -282,6 +282,13 @@
    height: 300px;
 }

+.phoneFlex {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+
@media (max-width: 1024px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@ -22,8 +22,8 @@ export default function ContactPage() {
    const [email, setEmail] = useState("");

    useEffect(() => {
-        const user = "info";
-        const domain = "antalya-restaurant.com";
+        const user = "hello";
+        const domain = "antalyarestaurant.ca";
        setEmail(`${user}@${domain}`);
    }, []);

@ -313,41 +313,6 @@ export default function ContactPage() {
                        viewport={{ once: true }}
                        transition={{ duration: 0.8 }}
                    >
-                        {/* Location Cards */}
-                        <div className={styles.locationCard}>
-                            <div className={styles.iconWrapper}>
-                                <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                </svg>
-                            </div>
-                            <div className={styles.locationInfo}>
-                                <h3 className={styles.locationTitle}>Kitchener Location</h3>
-                                <p className={styles.locationSubtitle}>Main Restaurant</p>
-                                <p className={styles.locationAddress}>
-                                    1187 Fischer-Hallman Rd #411<br />
-                                    Kitchener, ON N2T 4H2
-                                </p>
-                            </div>
-                        </div>
-
-                        <div className={styles.locationCard}>
-                            <div className={styles.iconWrapper}>
-                                <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                </svg>
-                            </div>
-                            <div className={styles.locationInfo}>
-                                <h3 className={styles.locationTitle}>Burlington Location</h3>
-                                <p className={styles.locationSubtitle}>Second Location</p>
-                                <p className={styles.locationAddress}>
-                                    1860 Appleby Line<br />
-                                    Burlington, ON L7L 7H7
-                                </p>
-                            </div>
-                        </div>
-
                        <div className={styles.locationCard}>
                            <div className={styles.iconWrapper}>
                                <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -356,24 +321,71 @@ export default function ContactPage() {
                            </div>
                       <div className={styles.locationInfo}>
    <h3 className={styles.locationTitle}>Call Us</h3>
-                                <p className={styles.locationSubtitle}>For reservations & inquiries</p>
-                                <p className={styles.locationPhone}>(519) 570-4848</p>
+
+    <div className={styles.phoneFlex}>
+        <a href="tel:5195816363" className={styles.locationSubtitle}>
+            Kitchener : 519-581-6363
+        </a>
+
+        <a href="tel:2893139838" className={styles.locationSubtitle}>
+            Burlington : 289-313-9838
+        </a>
+    </div>
+</div>
+
+
+                        </div>
+                        {/* Location Cards */}
+
+
+                        <div className={styles.locationCard}>
+                            <div className={styles.iconWrapper}>
+                                <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                                </svg>
+                            </div>
+                            <div className={styles.locationInfo}>
+                                <h3 className={styles.locationTitle}>Contact Us</h3>
+
+                                <a href="mailto:hello@antalyarestaurant.ca" className={styles.locationSubtitle}>
+                                    hello@antalyarestaurant.ca
+                                </a>
+                            </div>
+
+                        </div>
+
+                        <div className={styles.locationCard}>
+                            <div className={styles.iconWrapper}>
+                                <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                                </svg>
+                            </div>
+                            <div className={styles.locationInfo}>
+                                <h3 className={styles.locationTitle}>Location</h3>
+                                <p className={styles.locationSubtitle}>1187 Fischer-Hallman Rd #435, Kitchener, ON N2E 4H9</p>
+                                <p className={styles.locationSubtitle}>
+                                    1860 Appleby Line, Burlington, ON L7L 7H7
+                                </p>
                            </div>
                        </div>

+
+
                        {/* Map */}
                        <div className={styles.mapContainer}>
                            <iframe
-                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2895.8474424447677!2d-80.48089492346795!3d43.44826897111238!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b8b1e1e1e1e1e%3A0x1e1e1e1e1e1e1e1e!2s1187%20Fischer-Hallman%20Rd%2C%20Kitchener%2C%20ON!5e0!3m2!1sen!2sca!4v1234567890123!5m2!1sen!2sca"
+                                src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d11603.157684992676!2d-79.89907629708574!3d43.417739917762866!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e0!4m5!1s0x882bf4df1b8fa34d%3A0x9cb41f8ef1c4e9ac!2s1187%20Fischer-Hallman%20Rd%20%23435%2C%20Kitchener%2C%20ON%20N2E%204H9%2C%20Canada!3m2!1d43.4477606!2d-80.4809184!4m5!1s0x882b5fcd79165b0f%3A0x9d76a7bc4fd95533!2s1860%20Appleby%20Line%2C%20Burlington%2C%20ON%20L7L%207H7%2C%20Canada!3m2!1d43.3870284!2d-79.7771573!5e0!3m2!1sen!2sca!4v1700000123456!5m2!1sen!2sca"
                                width="100%"
-                                height="500"
+                                height="900"
                                style={{ border: 0 }}
                                allowFullScreen
                                loading="lazy"
                                referrerPolicy="no-referrer-when-downgrade"
-                                title="Restaurant Location Map"
                            ></iframe>
                        </div>
+
                    </motion.div>
                </motion.div>
            </section>
--- a/src/app/gallery/gallery.module.css
+++ b/src/app/gallery/gallery.module.css
@ -42,11 +42,46 @@
    color: var(--color-gold);
 }

+/* Section Heading Styles */
+.sectionHeading {
+    padding: 60px 20px 40px;
+    max-width: 900px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.smallHeading {
+    font-size: 0.9rem;
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
+.mainHeading {
+    font-family: var(--font-playfair);
+    font-size: 2.5rem;
+    color: #5d4037;
+    line-height: 1.3;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.description {
+    font-size: 1rem;
+    color: #c49c5c;
+    line-height: 1.8;
+    font-family: var(--font-lato);
+    max-width: 800px;
+    margin: 0 auto;
+}
+
 .section {
-    padding: 80px 10px;
+    padding: 20px 10px;
+    padding-bottom: 80px;
    max-width: 1200px;
    margin: 0 auto;
-    /* background-color: #0a0a0a; */
 }

 .tabs {
@ -87,7 +122,7 @@
    aspect-ratio: 4/3;
    cursor: pointer;
    overflow: hidden;
-    border: 2px solid #b07c4b
+    border: 2px solid #b07c4b;
 }

 .image {
@ -205,6 +240,10 @@
        font-size: 3rem;
    }

+    .mainHeading {
+        font-size: 2rem;
+    }
+
    .prevBtn {
        left: 10px;
    }
--- a/src/app/gallery/page.tsx
+++ b/src/app/gallery/page.tsx
@ -108,6 +108,14 @@ export default function GalleryPage() {
                </div>
            </motion.section>

+            <section className={styles.sectionHeading}>
+                <p className={styles.smallHeading}>🍴 ANTALYA 🍴</p>
+                <h2 className={styles.mainHeading}>A Visual Journey Through Authentic Turkish Cuisine</h2>
+                <p className={styles.description}>
+                    Explore our gallery showcasing the authentic flavors and elegant atmosphere of Antalya. From charcoal-grilled kebabs to handcrafted baklava, each image tells a story of culinary excellence and Turkish hospitality.
+                </p>
+            </section>
+
            <section className={styles.section}>
                <motion.div
                    className={styles.tabs}
--- a/src/app/menu/menu.module.css
+++ b/src/app/menu/menu.module.css
@ -1,8 +1,7 @@
 .main {
-    background-color: var(--color-dark);
+    background-color: #f5e6d3;
    color: var(--color-text-light);
    min-height: 100vh;
-    background-color: #f5e6d3;
 }

 .hero {
@ -43,19 +42,53 @@
    color: var(--color-gold);
 }

+/* Section Heading Styles */
+.sectionHeading {
+    padding: 60px 20px 40px;
+    max-width: 900px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.smallHeading {
+    font-size: 0.9rem;
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
+.mainHeading {
+    font-family: var(--font-playfair);
+    font-size: 2.5rem;
+    color: #5d4037;
+    line-height: 1.3;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.description {
+    font-size: 1rem;
+    color: #c49c5c;
+    line-height: 1.8;
+    font-family: var(--font-lato);
+    max-width: 800px;
+    margin: 0 auto;
+}
+
 .menuSection {
    max-width: 1200px;
    margin: 0 auto;
-    padding: 60px 20px 80px;
-    /* background-color: #0a0a0a; */
+    padding: 20px 20px 80px;
 }

 /* Category Tabs */
 .tabs {
    display: flex;
    justify-content: center;
-    gap: 1.5rem;
-    margin-bottom: 3rem;
+    gap: 1rem;
+    margin-bottom: 4rem;
    flex-wrap: wrap;
 }

@ -67,7 +100,7 @@
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
-    font-family: var(--font-playfair);
+    font-family: var(--font-lato);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
@ -77,84 +110,76 @@
 .activeTab {
    background-color: #c49c5c;
    color: #F5E6D3;
-    transform: translateY(-2px);
 }

+/* Menu Grid */
 .menuGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
+    gap: 2.5rem;
+}
+
+/* Menu Card - Horizontal Layout */
+.menuCard {
+    display: flex;
+    align-items: center;
+    background: white;
+    padding: 2rem;
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    transition: all 0.4s ease;
+    position: relative;
+    overflow: visible;
    gap: 2rem;
 }

-.menuCard {
+.menuCard:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
+}
+
+/* Image Section with Dashed Circle */
+.imageFrame {
+    position: relative;
+    width: 140px;
+    height: 140px;
+    flex-shrink: 0;
    display: flex;
-    gap: 1.2rem;
-    background: #c49c5c;
-    padding: 1.2rem;
-    border: 1px solid rgba(197, 160, 89, 0.2);
-    transition: all 0.4s ease;
-    animation: fadeInUp 0.6s ease forwards;
-    opacity: 0;
+    justify-content: center;
+    align-items: center;
 }

-.menuCard:nth-child(1) {
-    animation-delay: 0.1s;
+/* Rotating Dashed Border */
+.imageFrame::before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    border: 2px dashed #ff6b6b;
+    border-radius: 50%;
+    animation: spin 10s linear infinite;
 }

-.menuCard:nth-child(2) {
-    animation-delay: 0.2s;
-}
-
-.menuCard:nth-child(3) {
-    animation-delay: 0.3s;
-}
-
-.menuCard:nth-child(4) {
-    animation-delay: 0.4s;
-}
-
-.menuCard:nth-child(5) {
-    animation-delay: 0.5s;
-}
-
-.menuCard:nth-child(6) {
-    animation-delay: 0.6s;
-}
-
-@keyframes fadeInUp {
+@keyframes spin {
    from {
-        opacity: 0;
-        transform: translateY(30px);
+        transform: rotate(0deg);
    }

    to {
-        opacity: 1;
-        transform: translateY(0);
+        transform: rotate(360deg);
    }
 }

-.menuCard:hover {
-    background: #c49c5c;
-    border-color: #F5E6D3;
-    transform: translateY(-5px);
-    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.2);
-}
-
-.imageFrame {
-    position: relative;
-    width: 130px;
-    height: 130px;
-    flex-shrink: 0;
-    padding: 6px;
-    background: linear-gradient(135deg, rgba(197, 160, 89, 0.1), rgba(197, 160, 89, 0.05));
-}
-
 .imageWrapper {
-    position: relative;
    width: 100%;
    height: 100%;
-    border: 2px solid #F5E6D3;
+    border-radius: 50%;
    overflow: hidden;
+    position: relative;
+    border: 4px solid white;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 .dishImage {
@ -166,134 +191,81 @@
    transform: scale(1.1);
 }

-/* Corner decorations */
-.cornerTL,
-.cornerTR,
-.cornerBL,
-.cornerBR {
-    position: absolute;
-    width: 15px;
-    height: 15px;
-    border: 2px solid #F5E6D3;
-}
-
-.cornerTL {
-    top: 0;
-    left: 0;
-    border-right: none;
-    border-bottom: none;
-}
-
-.cornerTR {
-    top: 0;
-    right: 0;
-    border-left: none;
-    border-bottom: none;
-}
-
-.cornerBL {
-    bottom: 0;
-    left: 0;
-    border-right: none;
-    border-top: none;
-}
-
-.cornerBR {
-    bottom: 0;
-    right: 0;
-    border-left: none;
-    border-top: none;
-}
-
+/* Content Section */
 .cardContent {
    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    text-align: left;
 }

 .cardHeader {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    margin-bottom: 0.6rem;
+    margin-bottom: 0.5rem;
 }

 .dishName {
    font-family: var(--font-playfair);
-    font-size: 1.3rem;
-    color: #F5E6D3;
-    text-transform: capitalize;
-    transition: color 0.3s;
-}
-
-.menuCard:hover .dishName {
-    color: #F5E6D3;
+    font-size: 1.25rem;
+    color: #333;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
 }

 .price {
-    font-size: 1.2rem;
-    color: #F5E6D3;
-    font-weight: bold;
-    font-family: var(--font-playfair);
+    display: block;
+    font-size: 1.1rem;
+    color: #ffb300;
+    font-weight: 700;
+    font-family: var(--font-lato);
+    margin-bottom: 0.5rem;
 }

 .description {
    font-size: 0.9rem;
-    color: #F5E6D3;
+    color: #c49c5c;
    line-height: 1.6;
    font-family: var(--font-lato);
-    opacity: 0.85;
 }

+/* Responsive */
@media (max-width: 968px) {
    .menuGrid {
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: 1fr;
    }
 }

@media (max-width: 768px) {
-    .heroTitle {
-        font-size: 3rem;
+    .hero {
+        padding: 6rem 1rem 4rem;
    }

-    .menuSection {
-        padding: 40px 20px 60px;
+    .heroTitle {
+        font-size: 2.5rem;
+    }
+
+    .mainHeading {
+        font-size: 2rem;
    }

    .tabs {
-        gap: 1rem;
+        gap: 0.5rem;
    }

    .tab {
-        padding: 10px 20px;
-        font-size: 0.9rem;
+        padding: 10px 15px;
+        font-size: 0.85rem;
    }

    .menuCard {
        flex-direction: column;
-        align-items: center;
+        text-align: center;
+        padding: 1.5rem;
+        gap: 1.5rem;
+    }
+
+    .cardContent {
        text-align: center;
    }

    .imageFrame {
-        width: 150px;
-        height: 150px;
-    }
-
-    .cardHeader {
-        flex-direction: column;
-        gap: 0.5rem;
-        align-items: center;
+        margin: 0 auto;
    }
 }
-
-@media (max-width: 767px) and (min-width: 200px) {
-
-    .menuGrid {
-        grid-template-columns: 1fr;
-    }
-
-
-
-}
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@ -81,6 +81,14 @@ export default function MenuPage() {
                </div>
            </motion.section>

+            <section className={styles.sectionHeading}>
+                <p className={styles.smallHeading}>🍴 ANTALYA 🍴</p>
+                <h2 className={styles.mainHeading}>Delicious Turkish Dishes, Including Kebabs, Mezze, And More</h2>
+                <p className={styles.description}>
+                    Looking for authentic Turkish dining? At Antalya, we offer a wide variety of traditional dishes, from crispy appetizers to charcoal-grilled kebabs. Whether you're craving mezze platters or hearty main courses, our menu has something for everyone.
+                </p>
+            </section>
+
            <section className={styles.menuSection}>
                {/* Category Tabs */}
                <motion.div
@ -118,7 +126,7 @@ export default function MenuPage() {
                            className={styles.menuCard}
                            variants={cardVariants}
                            whileHover={{
-                                y: -8,
+                                y: -5,
                                transition: { duration: 0.3 }
                            }}
                        >
@ -131,10 +139,6 @@ export default function MenuPage() {
                                        className={styles.dishImage}
                                    />
                                </div>
-                                <div className={styles.cornerTL}></div>
-                                <div className={styles.cornerTR}></div>
-                                <div className={styles.cornerBL}></div>
-                                <div className={styles.cornerBR}></div>
                            </div>

                            <div className={styles.cardContent}>
--- a/src/app/page.tsx
+++ b/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 Menu from "@/components/Menu/Menu";
 import Gallery from "@/components/Gallery/Gallery";
 import Testimonials from "@/components/Testimonials/Testimonials";
 import Blogs from "@/components/Blogs/Blogs";
@ -13,6 +14,7 @@ export default function Home() {
      <Hero />
      <PopularDishes />
      <About />
+      <Menu />
      <Gallery />
      <Testimonials />
      <Blogs />
--- a/src/components/BookTable/BookTable.tsx
+++ b/src/components/BookTable/BookTable.tsx
@ -17,8 +17,8 @@ export default function BookTable() {
    const [email, setEmail] = useState("");

    useEffect(() => {
-        const user = "info";
-        const domain = "antalya-restaurant.com";
+        const user = "hello";
+        const domain = "antalyarestaurant.ca";
        setEmail(`${user}@${domain}`);
    }, []);

--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@ -31,9 +31,39 @@ export default function Footer() {
                            Discover the essence of fusion cuisine in the heart of Ontario at Antalya Restaurant. Our carefully curated menu offers a delicious selection from sizzling kebabs and succulent doners to authentic pides, sandwiches, and wraps.
                        </p>
                        <div className={styles.socialIcons}>
-                            <a href="#" className={styles.iconLink}><div className={styles.icon}><FaFacebookF /></div></a>
-                            <a href="#" className={styles.iconLink}><div className={styles.icon}><FaTwitter /></div></a>
-                            <a href="#" className={styles.iconLink}><div className={styles.icon}><FaInstagram /></div></a>
+                            <a
+                                href="https://www.facebook.com/antalyakebabgrill#"
+                                className={styles.iconLink}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <div className={styles.icon}>
+                                    <FaFacebookF />
+                                </div>
+                            </a>
+
+                            <a
+                                href="#"
+                                className={styles.iconLink}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <div className={styles.icon}>
+                                    <FaTwitter />
+                                </div>
+                            </a>
+
+                            <a
+                                href="#"
+                                className={styles.iconLink}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <div className={styles.icon}>
+                                    <FaInstagram />
+                                </div>
+                            </a>
+
                        </div>
                    </div>

@ -76,8 +106,8 @@ export default function Footer() {

                            <h3 className={styles.subHeading}>Opening Hours</h3>
                            <p className={styles.hours}>
-                                Sunday–Thursday 11am–10pm<br />
-                                Friday–Saturday 11am–11pm
+                                Sunday-Thursday 11am-10pm<br />
+                                Friday-Saturday 11am-11pm
                            </p>
                        </div>
                    </div>
--- a/src/components/Menu/Menu.module.css
+++ b/src/components/Menu/Menu.module.css
@ -0,0 +1,294 @@
+.menuSection {
+    padding: 6rem 2rem;
+    background-color: #232323;
+    background-size: cover;
+    background-position: center;
+    text-align: center;
+}
+
+.title {
+    font-family: var(--font-cinzel), serif;
+    font-size: 3.5rem;
+    color: #c49c5c;
+    margin-bottom: 3rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    line-height: 1.2;
+    text-align: center;
+}
+
+/* Category Tabs */
+.tabs {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    margin-bottom: 3rem;
+    flex-wrap: wrap;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.tab {
+    background: transparent;
+    border: 2px solid #b07c4b;
+    color: #c49c5c;
+    padding: 12px 30px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-family: var(--font-playfair);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 600;
+}
+
+.tab:hover,
+.activeTab {
+    background-color: #c49c5c;
+    color: #F5E6D3;
+    transform: translateY(-2px);
+}
+
+.menuGrid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.menuCard {
+    display: flex;
+    gap: 1.2rem;
+    background: #c49c5c;
+    padding: 1.2rem;
+    border: 1px solid rgba(197, 160, 89, 0.2);
+    transition: all 0.4s ease;
+    animation: fadeInUp 0.6s ease forwards;
+    opacity: 0;
+}
+
+.menuCard:nth-child(1) {
+    animation-delay: 0.1s;
+}
+
+.menuCard:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.menuCard:nth-child(3) {
+    animation-delay: 0.3s;
+}
+
+.menuCard:nth-child(4) {
+    animation-delay: 0.4s;
+}
+
+.menuCard:nth-child(5) {
+    animation-delay: 0.5s;
+}
+
+.menuCard:nth-child(6) {
+    animation-delay: 0.6s;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.menuCard:hover {
+    background: #c49c5c;
+    border-color: #F5E6D3;
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.2);
+}
+
+.imageFrame {
+    position: relative;
+    width: 130px;
+    height: 130px;
+    flex-shrink: 0;
+    padding: 6px;
+    background: linear-gradient(135deg, rgba(197, 160, 89, 0.1), rgba(197, 160, 89, 0.05));
+}
+
+.imageWrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border: 2px solid #F5E6D3;
+    overflow: hidden;
+}
+
+.dishImage {
+    object-fit: cover;
+    transition: transform 0.5s ease;
+}
+
+.menuCard:hover .dishImage {
+    transform: scale(1.1);
+}
+
+/* Corner decorations */
+.cornerTL,
+.cornerTR,
+.cornerBL,
+.cornerBR {
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    border: 2px solid #F5E6D3;
+}
+
+.cornerTL {
+    top: 0;
+    left: 0;
+    border-right: none;
+    border-bottom: none;
+}
+
+.cornerTR {
+    top: 0;
+    right: 0;
+    border-left: none;
+    border-bottom: none;
+}
+
+.cornerBL {
+    bottom: 0;
+    left: 0;
+    border-right: none;
+    border-top: none;
+}
+
+.cornerBR {
+    bottom: 0;
+    right: 0;
+    border-left: none;
+    border-top: none;
+}
+
+.cardContent {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.cardHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 0.6rem;
+}
+
+.dishName {
+    font-family: var(--font-playfair);
+    font-size: 1.3rem;
+    color: #F5E6D3;
+    text-transform: capitalize;
+    transition: color 0.3s;
+}
+
+.menuCard:hover .dishName {
+    color: #F5E6D3;
+}
+
+.price {
+    font-size: 1.2rem;
+    color: #F5E6D3;
+    font-weight: bold;
+    font-family: var(--font-playfair);
+}
+
+.description {
+    font-size: 0.9rem;
+    color: #F5E6D3;
+    line-height: 1.6;
+    font-family: var(--font-lato);
+    opacity: 0.85;
+    text-align: start;
+}
+
+/* View More Button */
+.viewMoreContainer {
+    margin-top: 3rem;
+    text-align: center;
+}
+
+.button {
+    display: inline-block;
+    padding: 0.8rem 2rem;
+    border: 1px solid #b07c4b;
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    text-transform: uppercase;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    background: transparent;
+    cursor: pointer;
+    font-weight: 600;
+}
+
+.button:hover {
+    background-color: #c49c5c;
+    color: #fff;
+    border-color: #c49c5c;
+}
+
+@media (max-width: 968px) {
+    .menuGrid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .title {
+        font-size: 2.5rem;
+    }
+
+    .menuSection {
+        padding: 40px 20px 60px;
+    }
+
+    .tabs {
+        gap: 1rem;
+    }
+
+    .tab {
+        padding: 10px 20px;
+        font-size: 0.9rem;
+    }
+
+    .menuCard {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+
+    .imageFrame {
+        width: 150px;
+        height: 150px;
+    }
+
+    .cardHeader {
+        flex-direction: column;
+        gap: 0.5rem;
+        align-items: center;
+    }
+}
+
+@media (max-width: 767px) and (min-width: 200px) {
+    .menuGrid {
+        grid-template-columns: 1fr;
+    }
+}
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@ -0,0 +1,148 @@
+'use client'
+
+import { useState } from 'react';
+import Image from "next/image";
+import Link from "next/link";
+import styles from "./Menu.module.css";
+import { menuData } from "@/utils/constant";
+import { motion } from "framer-motion";
+
+export default function Menu() {
+    const [activeCategory, setActiveCategory] = useState(0);
+
+    // Animation variants
+    const tabsVariants = {
+        hidden: { opacity: 0, y: 20 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: {
+                staggerChildren: 0.1,
+                delayChildren: 0.2
+            }
+        }
+    };
+
+    const tabVariants = {
+        hidden: { opacity: 0, y: 10 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: 0.4 }
+        }
+    };
+
+    const gridVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.1,
+                delayChildren: 0.2
+            }
+        }
+    };
+
+    const cardVariants = {
+        hidden: { opacity: 0, y: 30 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: 0.5 }
+        }
+    };
+
+    return (
+        <section className={styles.menuSection}>
+            {/* Section Title */}
+            <motion.h2
+                className={styles.title}
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6 }}
+            >
+                OUR MENU
+            </motion.h2>
+
+            {/* Category Tabs */}
+            <motion.div
+                className={styles.tabs}
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: true }}
+                variants={tabsVariants}
+            >
+                {menuData.map((section, index) => (
+                    <motion.button
+                        key={index}
+                        className={`${styles.tab} ${activeCategory === index ? styles.activeTab : ''}`}
+                        onClick={() => setActiveCategory(index)}
+                        variants={tabVariants}
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                    >
+                        {section.category}
+                    </motion.button>
+                ))}
+            </motion.div>
+
+            {/* Menu Items Grid */}
+            <motion.div
+                className={styles.menuGrid}
+                key={activeCategory}
+                initial="hidden"
+                animate="visible"
+                variants={gridVariants}
+            >
+                {menuData[activeCategory].items.map((item, itemIndex) => (
+                    <motion.div
+                        key={itemIndex}
+                        className={styles.menuCard}
+                        variants={cardVariants}
+                        whileHover={{
+                            y: -8,
+                            transition: { duration: 0.3 }
+                        }}
+                    >
+                        <div className={styles.imageFrame}>
+                            <div className={styles.imageWrapper}>
+                                <Image
+                                    src={item.image}
+                                    alt={item.name}
+                                    fill
+                                    className={styles.dishImage}
+                                />
+                            </div>
+                            <div className={styles.cornerTL}></div>
+                            <div className={styles.cornerTR}></div>
+                            <div className={styles.cornerBL}></div>
+                            <div className={styles.cornerBR}></div>
+                        </div>
+
+                        <div className={styles.cardContent}>
+                            <div className={styles.cardHeader}>
+                                <h3 className={styles.dishName}>{item.name}</h3>
+                                <span className={styles.price}>{item.price}</span>
+                            </div>
+                            <p className={styles.description}>{item.description}</p>
+                        </div>
+                    </motion.div>
+                ))}
+            </motion.div>
+
+            {/* View More Button */}
+            <motion.div
+                className={styles.viewMoreContainer}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+            >
+                <Link href="/menu" className={styles.button}>
+                    View More
+                </Link>
+            </motion.div>
+        </section>
+    );
+}