From bd8085f34923346026d03418ee6ab6832fad84e4 Mon Sep 17 00:00:00 2001
From: selvi <selvi@metatroncube.in>
Date: Wed, 16 Sep 2026 12:12:42 +0530
Subject: [PATCH] reels section updated

---
 app/blog/[slug]/page.js                     |  2 +-
 app/contact-south-indian-restaurant/page.js |  6 ++--
 app/page.js                                 |  5 ++-
 components/About/AboutCategory.js           |  2 +-
 components/About/AboutContent.js            |  2 +-
 components/About/AboutContent2.js           |  2 +-
 components/InstagramArea.js                 |  2 +-
 components/InstagramReelsArea.js            | 35 +++++++++++++++++++++
 components/RestaurantMenu.js                |  2 +-
 components/blog/ListOfBlogSection.js        |  2 +-
 components/home/AboutSection.js             |  2 +-
 components/home/BlogSection.js              |  2 +-
 components/home/CategorySection.js          |  2 +-
 components/home/PopularMenu.js              |  2 +-
 14 files changed, 53 insertions(+), 15 deletions(-)
 create mode 100644 components/InstagramReelsArea.js

diff --git a/app/blog/[slug]/page.js b/app/blog/[slug]/page.js
index 568cdf0..1cfaf87 100644
--- a/app/blog/[slug]/page.js
+++ b/app/blog/[slug]/page.js
@@ -39,7 +39,7 @@ export default function BlogPage({ params }) {
         pageTitle={"Blog Details"}
         background="/assets/images/inner-banner/2.webp"
       />
-      <section className="blog-details-area py-80 rpy-60">
+      <section className="blog-details-area pt-80 rpt-60 pb-80 rpb-60">
         <div className="container container-1290">
           <div className="row">
             <div className="col-lg-12">
diff --git a/app/contact-south-indian-restaurant/page.js b/app/contact-south-indian-restaurant/page.js
index 267be15..0206705 100644
--- a/app/contact-south-indian-restaurant/page.js
+++ b/app/contact-south-indian-restaurant/page.js
@@ -17,7 +17,7 @@ const page = () => {
       />
 
       {/* === Contact Info Cards === */}
-      <section className="contact-page-area pt-100 rpt-100 pb-60 rpb-30 rel z-1">
+      <section className="contact-page-area pt-80 rpt-60 pb-80 rpb-60 rel z-1">
         <div className="container">
           <div className="row align-items-center">
             <div
@@ -110,7 +110,7 @@ const page = () => {
       </section>
 
       {/* === Contact Form & Image (Equal Height) === */}
-      <section className="contact-page-area rpt-40 pt-60 pb-60 rel z-1 bgc-black">
+      <section className="contact-page-area pt-80 rpt-60 pb-80 rpb-60 rel z-1 bgc-black">
         <div className="container">
           <div className="row align-items-stretch no-gap">
             <div className="col-lg-6 d-flex">
@@ -151,7 +151,7 @@ const page = () => {
       </section>
 
       {/* === Google Map === */}
-      <section className="contact-page-area pt-60">
+      <section className="contact-page-area pt-80 rpt-60">
         <div className="container-fluid">
           <div className="row align-items-center">
             <div
diff --git a/app/page.js b/app/page.js
index b3fefaa..a8683bc 100644
--- a/app/page.js
+++ b/app/page.js
@@ -10,6 +10,7 @@ import MealsOfferSection from "@/components/home/MealsOfferScetion";
 import HomeOfferCard from "@/components/home/OfferCard";
 import PopularMenu from "@/components/home/PopularMenu";
 import InstagramArea from "@/components/InstagramArea";
+import InstagramReelsArea from "@/components/InstagramReelsArea";
 import OfferCard from "@/components/OfferCard";
 import Testimonial from "@/components/Testimonial";
 import { TestimonialSlider2 } from "@/components/TestimonialSlider";
@@ -32,7 +33,7 @@ const page = () => {
 
       {/* Counter Four Area start */}
       <div
-        className="counter-area-four bgs-cover pt-100"
+        className="counter-area-four bgs-cover pt-80 rpt-60"
         style={{ backgroundImage: "url(/assets/images/home/bg-image.jpg)" }}
       >
         <div className="container">
@@ -143,6 +144,8 @@ const page = () => {
       <BlogSection />
       {/* Blog Area end */}
 
+      <InstagramReelsArea />
+
       <InstagramArea />
 
     </WellFoodLayout>
diff --git a/components/About/AboutCategory.js b/components/About/AboutCategory.js
index f271474..367383a 100644
--- a/components/About/AboutCategory.js
+++ b/components/About/AboutCategory.js
@@ -2,7 +2,7 @@ import Link from "next/link";
 const AboutCategory = () => {
   return (
 
-    <div className="category-banner-area pb-80">
+    <div className="category-banner-area pb-80 rpb-60">
       <div className="container">
         <div className="row row-cols-md-2 row-cols-1 justify-content-center">
           <div
diff --git a/components/About/AboutContent.js b/components/About/AboutContent.js
index 8266669..cd5139d 100644
--- a/components/About/AboutContent.js
+++ b/components/About/AboutContent.js
@@ -2,7 +2,7 @@ import Link from "next/link";
 const AboutContent = () => {
   return (
 
-    <section className="about-us-area pt-100 rpt-80 pb-100 rpb-70 rel z-1">
+    <section className="about-us-area pt-80 rpt-60 pb-80 rpb-60 rel z-1">
       <div className="container">
         <div className="row align-items-end">
           <div className="col-lg-6">
diff --git a/components/About/AboutContent2.js b/components/About/AboutContent2.js
index 967bdfb..665bcbf 100644
--- a/components/About/AboutContent2.js
+++ b/components/About/AboutContent2.js
@@ -1,7 +1,7 @@
 import Link from "next/link";
 const AboutContent2 = () => {
   return (
-    <section className="about-us-area-four pt-130 rpt-100 pb-85 rpb-55 rel z-1">
+    <section className="about-us-area-four pt-80 rpt-60 pb-80 rpb-60 rel z-1">
       <div className="container">
         <div className="row align-items-center">
           <div className="col-lg-6">
diff --git a/components/InstagramArea.js b/components/InstagramArea.js
index 2a1cde9..a2d24ba 100644
--- a/components/InstagramArea.js
+++ b/components/InstagramArea.js
@@ -11,7 +11,7 @@ const instagramData = [
 
 const InstagramArea = () => {
   return (
-    <div className="instagram-area">
+    <div className="instagram-area pt-80 rpt-60 pb-80 rpb-60">
       <Slider
         dots={false}
         arrows={false}
diff --git a/components/InstagramReelsArea.js b/components/InstagramReelsArea.js
new file mode 100644
index 0000000..1e8041c
--- /dev/null
+++ b/components/InstagramReelsArea.js
@@ -0,0 +1,35 @@
+import Script from "next/script";
+
+const InstagramReelsArea = () => {
+  return (
+    <>
+      <section className="s_instagram_reels_premium o_colored_level pt-80 rpt-60 pb-80 rpb-60" style={{ backgroundColor: '#111111' }}>
+        <div className="container">
+          {/* Header */}
+          <div className="row mb-5">
+            <div className="col-12 text-center">
+              <p className="blog-subtitle-top mb-2" style={{ color: '#ffb800', fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase' }}>FOLLOW US ON INSTAGRAM</p>
+              <h2 className="blog-main-heading mb-4" style={{ color: '#ffffff', textTransform: 'uppercase', fontFamily: "'Bebas Neue', sans-serif", fontSize: '52px', letterSpacing: '1px' }}>LATEST REELS</h2>
+              <p className="mt-4 mb-4" style={{ color: '#d1d1d1', fontSize: '18px', fontWeight: 400, maxWidth: '600px', margin: '0 auto', lineHeight: 1.6 }}>
+                Follow <a href="https://www.instagram.com/shivasakthi.ca/?hl=en" target="_blank" rel="noopener noreferrer" style={{ color: '#ffb800', fontWeight: 600, textDecoration: 'none', borderBottom: '2px dashed #ffb800', paddingBottom: '2px', transition: 'all 0.3s ease' }}>@shivasakthi.ca</a> for our latest updates and delicious moments.
+              </p>
+            </div>
+          </div>
+
+          {/* Instagram Widget Container */}
+          <div className="row justify-content-center">
+            <div className="col-12">
+              <div className="instagram-widget-container" style={{ backgroundColor: 'transparent', minHeight: '200px' }}>
+                {/* Zyff Instagram Feed widget */}
+                <div className="zyff-instagram" data-zyff-widget="instagram" data-zyff-id="uKQdhDxThLY0mg"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <Script src="https://www.zyff.app/w/instagram.js" strategy="lazyOnload" />
+    </>
+  );
+};
+
+export default InstagramReelsArea;
diff --git a/components/RestaurantMenu.js b/components/RestaurantMenu.js
index 6fac2a5..1b8bed3 100644
--- a/components/RestaurantMenu.js
+++ b/components/RestaurantMenu.js
@@ -1916,7 +1916,7 @@ const RestaurantMenu = ({ menus }) => {
     ];
 
   return (
-    <section className="restaurant-menu-area pb-100 pt-100 rpb-70 rel z-1">
+    <section className="restaurant-menu-area pt-80 rpt-60 pb-80 rpb-60 rel z-1">
       <div className="container container-1050">
         <div className="row justify-content-center">
           <div className="col-xl-8 col-lg-9">
diff --git a/components/blog/ListOfBlogSection.js b/components/blog/ListOfBlogSection.js
index 576017c..b535861 100644
--- a/components/blog/ListOfBlogSection.js
+++ b/components/blog/ListOfBlogSection.js
@@ -3,7 +3,7 @@ import Link from "next/link";
 
 const ListOfBlogSection = () => {
     return (
-        <section className="blog-area pt-100 rpt-70 pb-90 rpb-60 rel z-1">
+        <section className="blog-area pt-80 rpt-60 pb-80 rpb-60 rel z-1">
             <div className="container">
                 <div className="row justify-content-center">
                     <div className="col-lg-12">
diff --git a/components/home/AboutSection.js b/components/home/AboutSection.js
index 41999da..55d65e0 100644
--- a/components/home/AboutSection.js
+++ b/components/home/AboutSection.js
@@ -7,7 +7,7 @@ const AboutSection = ({
     product = "Dosa",
 }) => {
     return (
-        <section className="about-us-area pt-100 rpt-60 pb-30 rel z-1">
+        <section className="about-us-area pt-80 rpt-60 pb-80 rpb-60 rel z-1">
             <div className="container">
                 <div className="row align-items-center">
                     <div className="col-lg-6">
diff --git a/components/home/BlogSection.js b/components/home/BlogSection.js
index 72c2db6..aeca9e6 100644
--- a/components/home/BlogSection.js
+++ b/components/home/BlogSection.js
@@ -5,7 +5,7 @@ import Slider from "react-slick";
 
 const BlogSection = () => {
     return (
-        <section className="blog-area pt-100 rpt-70 pb-90 rpb-60 rel z-1">
+        <section className="blog-area pt-80 rpt-60 pb-80 rpb-60 rel z-1">
             <div className="container">
                 <div className="row justify-content-center">
                     <div className="col-lg-12">
diff --git a/components/home/CategorySection.js b/components/home/CategorySection.js
index 671505a..101cb09 100644
--- a/components/home/CategorySection.js
+++ b/components/home/CategorySection.js
@@ -87,7 +87,7 @@ const CategorySection = () => {
     ];
 
     return (
-        <section className="related-products-area pt-130 rpt-100 pb-100 rpb-70 rel z-1">
+        <section className="related-products-area pt-80 rpt-60 pb-80 rpb-60 rel z-1">
             <div className="container">
                 <div className="row justify-content-center">
                     <div className="col-lg-12">
diff --git a/components/home/PopularMenu.js b/components/home/PopularMenu.js
index f639413..6bf90bc 100644
--- a/components/home/PopularMenu.js
+++ b/components/home/PopularMenu.js
@@ -65,7 +65,7 @@ const PopularMenu = () => {
     ];
 
     return (
-        <section className="popular-menu-area-three pt-130 rpt-100 pb-115 rpb-90 rel z-1">
+        <section className="popular-menu-area-three pt-80 rpt-60 pb-80 rpb-60 rel z-1">
             <div className="container">
                 <div className="row justify-content-center">
                     <div className="col-lg-7 col-md-8">