reels section updated

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">

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

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>

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

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">

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">

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}

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;

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">

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">

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">

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">

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">

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">