From 041638addebc10e5d1a14b21aa10febfd2cacc05 Mon Sep 17 00:00:00 2001
From: akash <akash@metatroncube.com>
Date: Sat, 27 Sep 2025 15:01:38 +0530
Subject: [PATCH] Menu page arrow responsive and contact page form and image
 equal height updated

---
 app/blog/[slug]/page.js      |  30 +++++++--
 app/contact/page.js          | 124 ++++++++++++++++++++++-------------
 components/RestaurantMenu.js |   2 +-
 layout/Footer.js             |   2 +-
 public/assets/css/style.css  |  97 +++++++++++++++++++++++----
 utility/constant.utils.js    |  12 +++-
 6 files changed, 197 insertions(+), 70 deletions(-)

diff --git a/app/blog/[slug]/page.js b/app/blog/[slug]/page.js
index 32c7803..568cdf0 100644
--- a/app/blog/[slug]/page.js
+++ b/app/blog/[slug]/page.js
@@ -1,8 +1,24 @@
-// app/blog/[slug]/page.tsx
+// app/blog/[slug]/page.js
 import PageBanner from "@/components/PageBanner";
 import WellFoodLayout from "@/layout/WellFoodLayout";
 import { Blog } from "@/utility/constant.utils";
 
+export async function generateMetadata({ params }) {
+  const blog = Blog.find((item) => item.slug === params.slug);
+
+  if (!blog) {
+    return {
+      title: "Blog not found",
+      description: "The blog you are looking for does not exist.",
+    };
+  }
+
+  return {
+    title: blog.metatitle,
+    description: blog.metadescription,
+  };
+}
+
 export async function generateStaticParams() {
   return Blog.map((item) => ({
     slug: item.slug,
@@ -11,7 +27,6 @@ export async function generateStaticParams() {
 
 export default function BlogPage({ params }) {
   const { slug } = params;
-
   const blog = Blog.find((item) => item.slug === slug);
 
   if (!blog) {
@@ -20,7 +35,10 @@ export default function BlogPage({ params }) {
 
   return (
     <WellFoodLayout>
-      <PageBanner pageTitle={"Blog details"} background="/assets/images/inner-banner/2.webp"  />
+      <PageBanner
+        pageTitle={"Blog Details"}
+        background="/assets/images/inner-banner/2.webp"
+      />
       <section className="blog-details-area py-80 rpy-60">
         <div className="container container-1290">
           <div className="row">
@@ -33,7 +51,11 @@ export default function BlogPage({ params }) {
                     data-aos-duration={1500}
                     data-aos-offset={50}
                   >
-                    <img src={blog.bigImage} alt="Blog Standard" loading="lazy" />
+                    <img
+                      src={blog.bigImage}
+                      alt={blog.title}
+                      loading="lazy"
+                    />
                   </div>
                   <div
                     className="content"
diff --git a/app/contact/page.js b/app/contact/page.js
index 0a62d49..434518d 100644
--- a/app/contact/page.js
+++ b/app/contact/page.js
@@ -1,22 +1,25 @@
-
 import PageBanner from "@/components/PageBanner";
 import WellFoodLayout from "@/layout/WellFoodLayout";
 import ContactForm from "@/components/ContactForm";
 
 export const metadata = {
   title: "Shiva Sakthi | Best South Indian Restaurant in Mississauga",
-  description: "Get in touch with Shiva Sakthi, Mississauga’s top Indian restaurant. Call or visit us for dine-in, takeout, or catering. Located Airport Road Malton, Mississauga",
+  description:
+    "Get in touch with Shiva Sakthi, Mississauga’s top Indian restaurant. Call or visit us for dine-in, takeout, or catering. Located Airport Road Malton, Mississauga",
 };
 
 const page = () => {
-
   return (
     <WellFoodLayout>
-      <PageBanner pageTitle={"Contact us"} background="/assets/images/inner-banner/3.webp" />
-      <section className="contact-page-area pt-130 rpt-100 pb-60 rpb-85 rel z-1" >
+      <PageBanner
+        pageTitle={"Contact"}
+        background="/assets/images/inner-banner/3.webp"
+      />
+
+      {/* === Contact Info Cards === */}
+      <section className="contact-page-area pt-100 rpt-100 pb-60 rpb-30 rel z-1">
         <div className="container">
           <div className="row align-items-center">
-
             <div
               className="contact-page-content rmb-55"
               data-aos="fade-up"
@@ -27,83 +30,109 @@ const page = () => {
                 <span className="sub-title mb-10">contact us</span>
                 <h2>Get In Touch With Us</h2>
               </div>
-              <div className="row">
-                <div className="col-md-4">
-                  <div className="contact-info-item bgc-black" style={{
-                    backgroundImage: "url(/assets/images/background/hero.jpg)"
-                  }}>
-                    <div className="icon"><i className="fal fa-map-marker-alt" /></div>
-                    <div className="content">
-                      <span className="title" style={{ fontWeight: "bold" }}>Location</span>
-                      <p>7166 Airport Road, Mississauga, Ontario L4T 2H2, Canada.</p>
+
+              {/* Cards Row with Spacing */}
+              <div className="row gx-4 gy-4">
+                <div className="col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center">
+                  <div
+                    className="contact-info-item bgc-black flex-fill p-4"
+                    style={{
+                      backgroundImage: "url(/assets/images/background/hero.jpg)",
+                    }}
+                  >
+                    <div className="icon">
+                      <i className="fal fa-phone" />
                     </div>
-                  </div>
-                </div>
-                <div className="col-md-4">
-                  <div className="contact-info-item bgc-black" style={{
-                    backgroundImage: "url(/assets/images/background/hero.jpg)"
-                  }}>
-                    <div className="icon"><i className="fal fa-envelope-open" /></div>
                     <div className="content">
-                      <span className="title" style={{ fontWeight: "bold" }}>Email Address</span>
+                      <span className="title" style={{ fontWeight: "bold" }}>
+                        Call Us
+                      </span>
                       <p>
-                        <a href="mailto:info@shivasakthi.ca">info@shivasakthi.ca</a>
-                        <br />
-                        <br />
+                        <a href="tel:9056773555">905 677 3555</a>
                       </p>
                     </div>
                   </div>
                 </div>
-                <div className="col-md-4">
-                  <div className="contact-info-item bgc-black" style={{
-                    backgroundImage: "url(/assets/images/background/hero.jpg)"
-                  }}>
-                    <div className="icon"><i className="fal fa-phone" /></div>
+
+                <div className="col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center">
+                  <div
+                    className="contact-info-item bgc-black flex-fill p-4"
+                    style={{
+                      backgroundImage: "url(/assets/images/background/hero.jpg)",
+                    }}
+                  >
+                    <div className="icon">
+                      <i className="fal fa-envelope-open" />
+                    </div>
                     <div className="content">
-                      <span className="title" style={{ fontWeight: "bold" }}>Call Us</span>
+                      <span className="title" style={{ fontWeight: "bold" }}>
+                        Email Address
+                      </span>
                       <p>
-                        <a href="tel: 9056773555">905 677 3555</a>
-                        <br />
-                        <br />
+                        <a href="mailto:info@shivasakthi.ca">info@shivasakthi.ca</a>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center">
+                  <div
+                    className="contact-info-item bgc-black flex-fill p-4"
+                    style={{
+                      backgroundImage: "url(/assets/images/background/hero.jpg)",
+                    }}
+                  >
+                    <div className="icon">
+                      <i className="fal fa-map-marker-alt" />
+                    </div>
+                    <div className="content">
+                      <span className="title" style={{ fontWeight: "bold" }}>
+                        Location
+                      </span>
+                      <p>
+                        7166 Airport Road, Mississauga, Ontario L4T 2H2, Canada.
                       </p>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-
           </div>
         </div>
       </section>
 
+      {/* === Contact Form & Image (Equal Height) === */}
       <section className="contact-page-area rpt-40 pt-60 pb-60 rel z-1 bgc-black">
         <div className="container">
-          <div className="row align-items-center no-gap">
-            <div className="col-lg-6">
+          <div className="row align-items-stretch no-gap">
+            <div className="col-lg-6 d-flex">
               <div
-                className="contact-page-content rmb-55"
+                className="contact-page-content rmb-55 d-flex w-100"
                 data-aos="fade-left"
                 data-aos-duration={1500}
                 data-aos-offset={50}
               >
-
-                <div className="contact-info-wrap">
-
-                  <img src="/assets/images/contact.webp" alt="Contact ShivaSakthi" loading="lazy" />
-
+                <div className="contact-info-wrap flex-fill">
+                  <img
+                    src="/assets/images/contact.webp"
+                    alt="Contact ShivaSakthi"
+                    loading="lazy"
+                    style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                  />
                 </div>
               </div>
             </div>
             <div
-              className="col-lg-6"
+              className="col-lg-6 d-flex"
               data-aos="fade-right"
               data-aos-duration={1500}
               data-aos-offset={50}
             >
-              <ContactForm />
+              <div className="flex-fill d-flex">
+                <ContactForm />
+              </div>
             </div>
           </div>
-
         </div>
         <div className="bg-lines">
           <span />
@@ -113,6 +142,7 @@ const page = () => {
         </div>
       </section>
 
+      {/* === Google Map === */}
       <section className="contact-page-area pt-60">
         <div className="container-fluid">
           <div className="row align-items-center">
diff --git a/components/RestaurantMenu.js b/components/RestaurantMenu.js
index 0f37588..8be1eed 100644
--- a/components/RestaurantMenu.js
+++ b/components/RestaurantMenu.js
@@ -1784,7 +1784,7 @@ const RestaurantMenu = ({ menus }) => {
                       <div className="d-flex justify-content-center">
                       <img src={menu.icon} style={{width:"50%"}} loading="lazy" /> {/* margin-end to add space */}
                       </div>
-                      <span>{menu.title}</span>
+                      <span className="new-class">{menu.title}</span>
                     </div>
                   </Nav.Link>
                 </Nav.Item>
diff --git a/layout/Footer.js b/layout/Footer.js
index 374c5dc..3f9ccb0 100644
--- a/layout/Footer.js
+++ b/layout/Footer.js
@@ -125,7 +125,7 @@ const DefaultFooter = () => {
             <div className="col-lg-12">
               <div className="copyright-text text-center">
                 <p>
-                  Copyright {new Date().getFullYear()} © Shivas Dosa Restaurant. Powered by <Link href="https://metatroncubesolutions.com/">MetatronCube</Link>. All Right Reserved.{" "}
+                  Copyright {new Date().getFullYear()} © Shivas Dosa Restaurant. Powered by <Link href="https://metatroncubesolutions.com/"  target="_blank">MetatronCube</Link>. All Right Reserved.{" "}
                 </p>
               </div>
             </div>
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 92a37ee..687eb04 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -9,8 +9,8 @@
 
     Note: This is Main Style CSS File. */
 /*----------------------------------------------------------------------
-	CSS INDEX
-	----------------------
+CSS INDEX
+----------------------
 
     ## Default Style
     ## Common Classes
@@ -783,6 +783,8 @@ a.theme-btn.style-three:hover {
   .food-menu-tab .nav-link {
     padding-top: 12px;
     padding-bottom: 8px;
+    padding-left: 12px;
+    padding-right: 12px;
   }
 }
 
@@ -805,20 +807,20 @@ a.theme-btn.style-three:hover {
 }
 
 .food-menu-tab .nav-link span {
-  font-size: 18px;
+  font-size: 16px;
   margin-top: 10px;
 }
 
 @media only screen and (max-width: 991px) {
   .food-menu-tab .nav-link span {
-    font-size: 16px;
+    font-size: 15px;
   }
 }
 
 @media only screen and (max-width: 575px) {
   .food-menu-tab .nav-link span {
     margin-top: 0;
-    font-size: 16px;
+    font-size: 15px;
   }
 }
 
@@ -946,20 +948,54 @@ a.theme-btn.style-three:hover {
 
 /* Slick Arrows */
 .slick-arrow {
+  position: absolute;
+  top: 40%;    
+  right: 100%;                    
+  transform: translateY(-50%);    
   font-size: 20px;
   -webkit-transition: 0.5s;
   -o-transition: 0.5s;
   transition: 0.5s;
   padding-top: 2px;
-  width: 65px;
-  height: 65px;
-  background: white;
-  line-height: 65px;
+  width: 40px;
+  height: 40px;
+  background: black;
+  line-height: 40px;
   border-radius: 50%;
   text-align: center;
-  color: var(--heading-color);
+  color: #ffff;
   -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.15);
   box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.15);
+  z-index: 10;      
+  cursor: pointer;
+}
+
+@media (max-width: 1024px) {
+
+  .slick-arrow {
+    right: 98%;  
+  }
+}
+
+@media (max-width: 992px) {
+
+  .slick-arrow {
+    right: 97%;  
+  }
+}
+
+@media (max-width: 500px) {
+
+  .slick-arrow {
+    right: 92%;  
+  }
+}
+
+@media (max-width: 992px) {
+
+  .slick-prev {
+    left: -1% !important;  
+  }
 }
 
 .slick-arrow:focus,
@@ -4549,6 +4585,12 @@ h6,
   }
 }
 
+.new-class{
+
+  font-size: 16px;
+
+}
+
 .main-header .logo {
   z-index: 9;
   padding: 2px 0;
@@ -8206,6 +8248,12 @@ h6,
   margin-left: 20px;
 }
 
+@media(max-width:425px) {
+  .food-menu-item.style-two .content h5 .price {
+  margin-left: 5px;
+}
+}
+
 .food-menu-item.style-two .content p {
   margin-bottom: 0;
 }
@@ -8225,7 +8273,11 @@ h6,
   }
 }
 
-
+@media(max-width:425px) {
+  .food-menu-item.style-two .content h5 {
+    font-size: 17px;
+  }
+}
 
 
 .popular-menu-wrap {
@@ -12281,6 +12333,8 @@ blockquote .blockquote-footer:before {
 .slick-prev,
 .slick-next {
   position: absolute;
+  top: 50%;          
+  transform: translateY(-50%);
   width: 40px;
   height: 40px;
   background: #222222;
@@ -12289,16 +12343,18 @@ blockquote .blockquote-footer:before {
   align-items: center;
   justify-content: center;
   border-radius: 50%;
+  z-index: 10;          
 }
 
+
 .slick-prev {
-  left: 0%;
-  top: 25%;
+  left: -3%;
+  top: 40%;
 }
 
 .slick-next {
   right: -3% !important;
-  top: 25%
+  top: 40%
 }
 
 .about-biryani-category-1 {
@@ -12315,6 +12371,13 @@ blockquote .blockquote-footer:before {
   right: -40px !important;
 }
 
+@media (max-width: 1200px) {
+
+  .custom-next-arrow {
+    right: 0px !important;
+  }
+}
+
 /* For screen widths 1024px and below */
 @media (max-width: 1024px) {
   .custom-prev-arrow {
@@ -12352,4 +12415,10 @@ blockquote .blockquote-footer:before {
   .about-biryani-category-1 {
     margin-bottom: 20px;
   }
+}
+
+@media (max-width: 320px) {
+    .slick-arrow {
+        right: 87%;
+    }
 }
\ No newline at end of file
diff --git a/utility/constant.utils.js b/utility/constant.utils.js
index b8b2e2d..87d0c22 100644
--- a/utility/constant.utils.js
+++ b/utility/constant.utils.js
@@ -3,8 +3,10 @@ export const Blog = [
     id: 1,
     slug: "the-flavors-of-north-india-more-than-just-curries",
     image: "/assets/images/blog/blog-1.webp",
-    bigImage:"/assets/images/blog/blog-large-1.webp",
+    bigImage: "/assets/images/blog/blog-large-1.webp",
     title: "The Flavors of North India: More Than Just Curries",
+    metatitle: "Flavors of North India: Beyond Just Curries | Shiva Shakthi",
+    metadescription: "Explore the aromatic breads, tandoori delights, rice dishes & hearty vegetarian staples that make North Indian cuisine so much more than just curries.",
     user: "Admin",
     date: "05 Dec 2024",
     short_des: "Exploring the Bread, Tandoor, and Delights of North Indian Cuisine 'North Indian cuisine is not only about rich curries but also a vibrant array of breads, tandoor-cooked",
@@ -123,8 +125,10 @@ export const Blog = [
     id: 2,
     slug: "the-secret-to-perfect-north-indian-curries",
     image: "/assets/images/blog/blog-2.webp",
-    bigImage:"/assets/images/blog/blog-large-2.webp",
+    bigImage: "/assets/images/blog/blog-large-2.webp",
     title: "The Secret to Perfect North Indian Curries",
+    metatitle: "The Secret to Perfect North Indian Curries | Shiva Shakthi",
+    metadescription: "Discover how Shiva Shakthi crafts irresistible North Indian curries — from slow-cooked bases and toasted spices to creamy textures and balanced flavors.",
     user: "Admin",
     date: "05 Dec 2024",
     short_des: "Unlocking the Flavors of Authentic North Indian CuisineNorth Indian curries are the heart and soul of Indian cuisine, known for their rich textures, deep flavors, and",
@@ -229,8 +233,10 @@ export const Blog = [
     id: 3,
     slug: "the-rich-history-of-south-indian-cuisine",
     image: "/assets/images/blog/blog-3.webp",
-    bigImage:"/assets/images/blog/blog-large-3.webp",
+    bigImage: "/assets/images/blog/blog-large-3.webp",
     title: "The Rich History of South Indian Cuisine",
+    metatitle: "The Rich History of South Indian Cuisine | Shiva Sakthi",
+    metadescription: "Explore the rich history of South Indian cuisine  from dosa and sambar origins to regional diversity & authentic flavors  at Shiva Sakthi’s culinary journey.",
     user: "Admin",
     date: "05 Dec 2024",
     short_des: "A Journey Through Time: The Story of South Indian Cuisine",