footer updated

public/assets/css/main.css

@@ -2643,12 +2643,15 @@ only screen and (min-width: 576px) and (max-width: 767px) {
 }
 
 .footer-widget-2 ul.service-list li::before {
-  content: "\e902";
+  content: "";
-  font-family: 'icomoon';
+  background-image: url("/assets/img/arrow-white.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 14px; 
+  height: 14px;   
   position: absolute;
-  top: 0;
+  top: 6px;   
-  left: -30px;
+  left: -25px;     
-  transition: all 500ms ease;
 }
 
 .footer-widget-2 ul.service-list li:hover {

src/app/globals.css

@@ -2014,7 +2014,7 @@ body {
 .contact-one {
   position: relative;
   overflow: hidden;
-  padding: 80px 0 0;
+  padding: 0 0 80px;
   background-color: #fff;
 }
 
@@ -6872,6 +6872,7 @@ body {
   font-weight: 700;
   box-shadow: 0 10px 30px rgba(55, 121, 185, 0.3);
   transition: all 400ms ease;
+  color: #fff !important;
 }
 
 .pelocis-btn--premium:hover {
@@ -7157,7 +7158,7 @@ body {
   position: relative;
   background-size: cover;
   background-position: center;
-  padding: 130px 0;
+  padding: 80px 0;
   background-color: #fff;
   overflow: hidden;
 }
@@ -7776,8 +7777,8 @@ body {
    Projects Section Styles
    ══════════════════════════════════════════════════════════ */
 :root {
-  --pelocis-base: #e2a475;
+  --pelocis-base: #3779b9;
-  --pelocis-black: #222222;
+  --pelocis-black: #1a1f2b;
   --pelocis-white: #fff;
   --pelocis-gray: #F5F2EF;
   --pelocis-border-color: #DDDDDD;
@@ -7809,7 +7810,7 @@ body {
   content: "";
   width: 13px;
   height: 13px;
-  background-color: var(--pelocis-base, #e2a475);
+  background-color: var(--pelocis-base, #3779b9);
   display: block;
 }
 
@@ -7817,7 +7818,7 @@ body {
   content: "";
   width: 12px;
   height: 12px;
-  background-color: var(--pelocis-black, #222222);
+  background-color: var(--pelocis-black, #1a1f2b);
   border: 1px solid var(--pelocis-white, #fff);
   display: block;
   position: absolute;
@@ -7827,7 +7828,7 @@ body {
 
 .sec-title__tagline {
   margin: 0;
-  color: var(--pelocis-base, #e2a475);
+  color: var(--pelocis-base, #3779b9);
   font-size: 18px;
   line-height: 16px;
   text-transform: uppercase;
@@ -7861,7 +7862,7 @@ body {
   position: relative;
   display: block;
   background-color: transparent;
-  color: var(--pelocis-black, #222222);
+  color: var(--pelocis-black, #1a1f2b);
   transition: all 500ms ease;
   text-transform: capitalize;
   padding: 12.5px 25px;
@@ -7872,8 +7873,8 @@ body {
 
 .projects-one__filter__list li.active,
 .projects-one__filter__list li:hover {
-  background-color: var(--pelocis-base, #e2a475);
+  background-color: var(--pelocis-base, #3779b9);
-  border-color: var(--pelocis-base, #e2a475);
+  border-color: var(--pelocis-base, #3779b9);
   color: var(--pelocis-white, #fff);
 }
 
@@ -7951,7 +7952,7 @@ body {
   left: 2.5%;
   bottom: 20px;
   clip-path: polygon(87% 0, 100% 50%, 87% 100%, 0 100%, 0 0);
-  background-color: var(--pelocis-base, #e2a475);
+  background-color: var(--pelocis-base, #3779b9);
   z-index: -1;
   border-radius: 15px;
 }
@@ -8002,10 +8003,10 @@ body {
   justify-content: center;
   border-radius: 15px 15px 0px 0px;
   background-color: var(--pelocis-white, #fff);
-  color: var(--pelocis-black, #222222);
+  color: var(--pelocis-black, #1a1f2b);
   font-size: 18px;
   font-weight: 800;
-  border: 1px solid var(--pelocis-base, #e2a475);
+  border: 1px solid var(--pelocis-base, #3779b9);
   border-bottom: none;
 }
 
@@ -8024,7 +8025,7 @@ body {
   justify-content: center;
   align-items: center;
   background-color: var(--pelocis-white, #fff);
-  color: var(--pelocis-base, #e2a475);
+  color: var(--pelocis-base, #3779b9);
   font-size: 16px;
   border-radius: 12px;
   cursor: pointer;
@@ -8326,7 +8327,7 @@ body {
   content: "";
   width: 13px;
   height: 13px;
-  background-color: var(--pelocis-base, #e2a475);
+  background-color: var(--pelocis-base, #3779b9);
   display: block;
 }
 
@@ -8345,7 +8346,7 @@ body {
 .sec-title__tagline {
   margin: 0;
   font-family: var(--pelocis-font, inherit);
-  color: var(--pelocis-base, #e2a475);
+  color: var(--pelocis-base, #3779b9);
   font-size: 16px;
   line-height: 16px;
   text-transform: uppercase;
@@ -8370,7 +8371,7 @@ body {
 }
 
 .sec-title--light .sec-title__tagline {
-  color: var(--pelocis-base, #e2a475);
+  color: var(--pelocis-base, #3779b9);
 }
 
 .sec-title--light .sec-title__shape::after {

src/app/website-development-service/page.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import MainLayout from "@/components/layout/MainLayout";
+import MainLayout from "@/components/web-development-service/support/layout/MainLayout";
 import Hero from "@/components/web-development-service/Hero";
 import BannerBottom from "@/components/web-development-service/BannerBottom";
 import BrandSlider from "@/components/web-development-service/BrandSlider";

src/components/faq/FaqPageSection.tsx

@@ -124,15 +124,19 @@ const FaqPageSection = () => {
     return (
         <section className="faq-page-section">
             <div className="container">
-                <div className="row justify-content-center">
+                <div className="row align-items-end mb-60">
-                    <div className="col-lg-8">
+                    <div className="col-lg-6">
-                        <div className="section-title-wrapper text-center mb-60">
+                        <div className="section-title-wrapper">
                             <span className="section-subtitle">
-                                <img src="/assets/img-app/fav-icon.webp" alt="" className="subtitle-icon" /> FAQ
+                                Digital Mastery Unlocked
                             </span>
-                            <h2 className="section-title">Frequently Asked Questions</h2>
+                            <h2 className="section-title" style={{ margin: 0 }}>Metatroncube FAQs: Web-Apps, SEO, & Digital Marketing</h2>
-                            <p className="section-desc">
+                        </div>
-                                Transparent answers to the most common questions about our agency, development process, and partnership models.
+                    </div>
+                    <div className="col-lg-6">
+                        <div className="section-desc-wrapper">
+                            <p className="section-desc" style={{ margin: 0, paddingLeft: '20px'}}>
+                                Welcome to Metatroncube’s FAQ page, where we delve into the intricacies of Web-App Development, the nuances of SEO, and the dynamics of Digital Marketing. Our goal is to address your queries and provide insightful answers that empower your digital journey, whether you’re navigating website design, mobile app development, or looking for effective digital marketing strategies.
                             </p>
                         </div>
                     </div>
@@ -254,10 +258,14 @@ const FaqPageSection = () => {
                 }
                 .section-desc {
                     color: #64748b;
-                    max-width: 600px;
-                    margin: 0 auto;
                     font-size: 16px;
-                    margin-bottom: 40px;
+                }
+                @media (max-width: 991px) {
+                    .section-desc {
+                        margin-top: 20px !important;
+                        padding-left: 0 !important;
+                        border-left: none !important;
+                    }
                 }
                 .faq-item {
                     background: #fff;

src/components/home/AboutTwo.tsx

@@ -29,7 +29,7 @@ const AboutTwo = () => {
                     <div className="col-xl-6">
                         <div className="about-two__content">
                             <div className="sec-title">
-                                <span className="about-two__dot-circle"></span>
+                                {/* <span className="about-two__dot-circle"></span> */}
                                 <div className="sec-title__shape"></div>
                                 <h6 className="sec-title__tagline">OUR ABOUT COMPANY</h6>
                                 <h3 className="sec-title__title">Psychology Seeks To Explore The About Workings of Human</h3>

src/components/home/MedicalServices.tsx

@@ -60,7 +60,7 @@ const MedicalServices = () => {
         <section
             className="medical-services-circle p-relative overflow-hidden"
             style={{
-                backgroundImage: `url('https://bracketweb.com/pelocishtml/assets/images/backgrounds/contact-bg-1.jpg')`,
+                backgroundImage: `url('/assets/img/all-images/blog/blog-img1.png')`,
                 backgroundAttachment: 'fixed',
                 backgroundPosition: 'center',
                 backgroundRepeat: 'no-repeat',
@@ -96,8 +96,8 @@ const MedicalServices = () => {
                 >
                     <div className="sec-title">
                         <div className="sec-title__shape"></div>
-                        <h6 className="sec-title__tagline text-white">MEDICAL SERVICES</h6>
+                        <h6 className="sec-title__tagline text-white">WELCOME</h6>
-                        <h3 className="sec-title__title text-white">Medical <span className="inner-text">Services</span></h3>
+                        <h3 className="sec-title__title text-white">Driving Client <span className="inner-text">Success </span></h3>
                     </div>
 
                     <p className="sec-text mt-15 text-white">It is a long established fact that a reader will be distracted the readable content of <br /> a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>

src/components/home/PortfolioSection.tsx

@@ -155,10 +155,10 @@ function MobileCard({ item, onOpen }: { item: (typeof MobileAppServicesData)[0],
             <div className="pf-card-info">
                 <h3 className="pf-card-name">{item.name}</h3>
                 {item.category === "live" && (
-                    <span className="pf-live-badge">🟢 Live</span>
+                    <span className="pf-live-badge">Live</span>
                 )}
                 {item.category === "coming-soon" && (
-                    <span className="pf-soon-badge">🔜 Coming Soon</span>
+                    <span className="pf-soon-badge">Coming Soon</span>
                 )}
             </div>
         </div>

src/components/home/home-1/ChooseSection.tsx

@@ -11,7 +11,7 @@ const ChooseSection = () => (
                         <div className="sec-title">
                             <div className="sec-title__shape"></div>
                             <h6 className="sec-title__tagline">WHY CHOOSE US</h6>
-                            <h3 className="sec-title__title">What&apos;s Make Us Different</h3>
+                            <h3 className="sec-title__title text-white">What&apos;s Make Us Different</h3>
                         </div>
                         <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                     </div>

src/components/home/home-1/CtaSection.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 const CtaSection = () => (
-    <section className="cta-1-section bg-color-1 p-relative wow fadeInDown" data-wow-delay=".5s">
+    <section className="cta-1-section bg-color-1 p-relative wow fadeInDown mb-80" data-wow-delay=".5s">
         <div className="small-container">
             <div className="row g-0 box-shadow-1 fix">
                 <div className="col-xxl-6 col-lg-6 bg-white">

src/components/home/home-1/FeaturesSection.tsx

@@ -142,7 +142,7 @@ const FeaturesSection = () => {
                                     <div className="fo-hover-icon">
                                         {feature.icon}
                                     </div>
-                                    <h2 className="fo-hover-title">{feature.title}</h2>
+                                    <h3 className="fo-hover-title">{feature.title}</h3>
                                     <Link href="#" className="fo-hover-btn">
                                         <ArrowIcon />
                                     </Link>
@@ -152,7 +152,7 @@ const FeaturesSection = () => {
                                 <div className="fo-card">
                                     {/* Top dark section */}
                                     <div className="fo-card-top">
-                                        <h2 className="fo-card-title">{feature.title}</h2>
+                                        <h3 className="fo-card-title">{feature.title}</h3>
                                         <Link href="#" className="fo-card-btn">
                                             <ArrowIcon />
                                         </Link>

src/components/home/home-1/TestimonialsSection.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { testimonialSlides } from "@/utils/data";
 
 const TestimonialsSection = () => (
-    <section className="testimonials-two-section fix section-space">
+    <section className="testimonials-two-section fix section-space-bottom">
         <div className="container-fluid g-0">
             <div className="row g-0">
                 <div className="col-xxl-4 col-xl-4 col-lg-12">
@@ -22,7 +22,7 @@ const TestimonialsSection = () => (
                             <div className="sec-title">
                                 <div className="sec-title__shape"></div>
                                 <h6 className="sec-title__tagline">TESTIMONIALS</h6>
-                                <h3 className="sec-title__title">Our Client Feedback</h3>
+                                <h3 className="sec-title__title text-white">Our Client Feedback</h3>
                             </div>
                             <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                         </div>

src/components/layout/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import React from 'react';
 
-const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', containerClass = 'vl-footer1-section-area', topSpace = false }) => {
+const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-section-area', topSpace = false }) => {
     const currentYear = new Date().getFullYear();
 
     const companyLinks = [
@@ -19,7 +19,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
     const socialLinks = [
         { icon: 'fa-facebook-f', link: 'https://www.facebook.com/metatroncubecanada', bg: '#0866ff' },
         { icon: 'fa-instagram', link: 'https://www.instagram.com/metatron_digitalagency', bg: '#d62976' },
-        { icon: 'fa-x-twitter', link: 'https://x.com/MetatroncubeDA', bg: '#000' },
+        { icon: 'fa-brands fa-twitter', link: 'https://x.com/MetatroncubeDA', bg: '#000' },
         { icon: 'fa-linkedin-in', link: 'https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all', bg: '#0077b5' },
         { icon: 'fa-youtube', link: 'https://www.youtube.com/@metatron_digitalagency', bg: '#ff0000' },
     ];
@@ -28,7 +28,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
         <div
             className={`${containerClass} sp8 position-relative`}
             style={{
-                backgroundImage: 'url(/assets/img/home/footer/footer.webp)',
+                backgroundImage: 'url(/assets/img/home/section10/footer-img.webp)',
                 backgroundPosition: 'center',
                 backgroundRepeat: 'no-repeat',
                 backgroundSize: 'cover',
@@ -36,7 +36,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
             }}
         >
             {/* Light overlay to ensure text readability */}
-            <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.7)', zIndex: 0 }} />
+            <div style={{ position: 'absolute', inset: 0, zIndex: 0 }} />
 
             {topSpace && (
                 <>
@@ -51,7 +51,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
                         <div className="footer-logo1">
                             <img src={logo} alt="MetatronCube Logo" style={{ maxWidth: '200px' }} />
                             <div className="space24"></div>
-                            <p style={{ color: '#1a1f2b', lineHeight: '1.7' }}>
+                            <p style={{ color: '#fff', lineHeight: '1.7' }}>
                                 We build high-converting, fast, and SEO-optimized websites that generate leads, increase sales, and accelerate your business growth.
                             </p>
                             <div className="space24"></div>
@@ -89,7 +89,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
                     <div className="col-lg-2 col-md-6">
                         <div className="space30 d-md-none d-block"></div>
                         <div className="vl-footer-widget list-style-none">
-                            <h3 style={{ color: '#1a1f2b', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
+                            <h3 style={{ color: '#fff', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
                                 Company
                                 <span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
                             </h3>
@@ -98,9 +98,9 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
                                     <li key={idx} style={{ marginBottom: '15px' }}>
                                         <Link
                                             href={item.link}
-                                            style={{ color: '#1a1f2b', textDecoration: 'none', transition: 'color 0.3s' }}
+                                            style={{ color: '#fff', textDecoration: 'none', transition: 'color 0.3s' }}
                                             onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
-                                            onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#1a1f2b'; }}
+                                            onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#fff'; }}
                                         >
                                             {item.label}
                                         </Link>
@@ -114,7 +114,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
                     <div className="col-lg-3 col-md-6">
                         <div className="space30 d-lg-none d-block"></div>
                         <div className="vl-footer-widget list-style-none">
-                            <h3 style={{ color: '#1a1f2b', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
+                            <h3 style={{ color: '#fff', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
                                 Services
                                 <span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
                             </h3>
@@ -123,9 +123,9 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
                                     <li key={idx} style={{ marginBottom: '15px' }}>
                                         <Link
                                             href={item.link}
-                                            style={{ color: '#1a1f2b', textDecoration: 'none', transition: 'color 0.3s' }}
+                                            style={{ color: '#fff', textDecoration: 'none', transition: 'color 0.3s' }}
                                             onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
-                                            onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#1a1f2b'; }}
+                                            onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#fff'; }}
                                         >
                                             {item.label}
                                         </Link>
@@ -140,7 +140,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
                     <div className="col-lg-3 col-md-6">
                         <div className="space30 d-lg-none d-block"></div>
                         <div className="vl-footer-widget location-widget">
-                            <h3 style={{ color: '#1a1f2b', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
+                            <h3 style={{ color: '#fff', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
                                 Get In Touch
                                 <span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
                             </h3>
@@ -151,7 +151,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
                                         <i className="fa-solid fa-envelope"></i>
                                     </div>
                                     <div className="contact-text" style={{ overflowWrap: 'anywhere', wordBreak: 'break-word', maxWidth: '100%' }}>
-                                        <a href="mailto:info@metatroncubesolutions.com" style={{ color: '#1a1f2b', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#1a1f2b'}>
+                                        <a href="mailto:info@metatroncubesolutions.com" style={{ color: '#fff', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#fff'}>
                                             info@metatroncubesolutions.com
                                         </a>
                                     </div>
@@ -163,7 +163,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
                                         <i className="fa-solid fa-location-dot"></i>
                                     </div>
                                     <div className="contact-text">
-                                        <p style={{ color: '#1a1f2b', fontSize: '16px', fontWeight: 500, margin: 0 }}>
+                                        <p style={{ color: '#fff', fontSize: '16px', fontWeight: 500, margin: 0 }}>
                                             Waterloo, Ontario Canada
                                         </p>
                                     </div>
@@ -175,7 +175,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
                                         <i className="fa-solid fa-phone"></i>
                                     </div>
                                     <div className="contact-text">
-                                        <a href="tel:+1-647-679-7651" style={{ color: '#1a1f2b', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#1a1f2b'}>
+                                        <a href="tel:+1-647-679-7651" style={{ color: '#fff', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#fff'}>
                                             +1-647-679-7651
                                         </a>
                                     </div>
@@ -189,7 +189,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
                 <div className="row align-items-center">
                     <div className="col-lg-12 col-md-12">
                         <div className="vl-copyright-area">
-                            <p style={{ color: '#1a1f2b', margin: 0 }}>© Copyright {currentYear} - <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer" style={{ color: '#3779b9', fontWeight: 700, textDecoration: 'none' }}>MetatronCube</a>. All Right Reserved</p>
+                            <p style={{ color: '#fff', margin: 0 }}>© Copyright {currentYear} - <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer" style={{ color: '#3779b9', fontWeight: 700, textDecoration: 'none' }}>MetatronCube</a>. All Right Reserved</p>
                         </div>
                     </div>
                 </div>

src/components/layout/Footer1.tsx

@@ -12,9 +12,10 @@ const Footer1 = () => (
                                 <figure className="image">
                                     <img src="/assets/img/logo.webp" alt="" />
                                 </figure>
-                                <p className="mt-40 mb-40">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p>
+                                <p className="mt-40 mb-40">Metatroncube Software Solutions: Where innovation meets execution to elevate your digital presence. Partner with us for bespoke web and app development that powers your business growth.</p>
                                 <div className="footer-socials">
                                     <span><a href="#"><i className="fa-brands fa-facebook-f"></i></a></span>
+                                    <span><a href="#"><i className="fa-brands fa-instagram"></i></a></span>
                                     <span><a href="#"><i className="fa-brands fa-twitter"></i></a></span>
                                     <span><a href="#"><i className="fa-brands fa-linkedin-in"></i></a></span>
                                     <span><a href="#"><i className="fa-brands fa-youtube"></i></a></span>
@@ -23,38 +24,35 @@ const Footer1 = () => (
                         </div>
                         <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
                             <div className="footer-widget-2 pl-50">
-                                <h4 className="mb-20 footer-title">Our Services</h4>
+                                <h4 className="mb-20 footer-title">Quick Links</h4>
                                 <ul className="service-list">
-                                    <li><Link href="/service-details">IT Management</Link></li>
+                                    <li><Link href="/">Home</Link></li>
-                                    <li><Link href="/service-details">SEO Optimization</Link></li>
+                                    <li><Link href="/about-us">About</Link></li>
-                                    <li><Link href="/service-details">Web Development</Link></li>
+                                    <li><Link href="/careers">Careers</Link></li>
-                                    <li><Link href="/service-details">Cyber Security</Link></li>
+                                    <li><Link href="/portfolio">Portfolio</Link></li>
-                                    <li><Link href="/service-details">Data Security</Link></li>
+                                    <li><Link href="/faq">Faq</Link></li>
+                                    <li><Link href="/blog">Blog</Link></li>
+                                    <li><Link href="/contact">Contact</Link></li>
                                 </ul>
                             </div>
                         </div>
                         <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
-                            <div className="footer-widget-3">
+                            <div className="footer-widget-2">
-                                <h4 className="mb-20 footer-title">Latest Post</h4>
+                                <h4 className="mb-20 footer-title">Our Services</h4>
-                                <ul className="blog-list">
+                                <ul className="service-list">
-                                    {[1, 2].map((num) => (
+                                    <li><Link href="/">Website Development</Link></li>
-                                        <li key={num}>
+                                    <li><Link href="/">Mobile Application Development</Link></li>
-                                            <div className="footer-blog-post-box mb-15">
+                                    <li><Link href="/">Graphic Designing</Link></li>
-                                                <figure className="thumb"><img src={`/assets/imgs/blog/blog-s-${num}.jpg`} alt="" /></figure>
+                                    <li><Link href="/">UI / UX Designing</Link></li>
-                                                <div className="content">
+                                    <li><Link href="/">SEO & Content Writing</Link></li>
-                                                    <span className="date"><a href="#">05 Dec, 2024</a></span>
+                                    <li><Link href="/">Digital Marketing</Link></li>
-                                                    <h6><Link href="#">{num === 1 ? "Tacking the Changes of Retail Industry" : "What’s the Holding Back the It Solution"}</Link></h6>
-                                                </div>
-                                            </div>
-                                        </li>
-                                    ))}
                                 </ul>
                             </div>
                         </div>
                         <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
                             <div className="footer-widget-4 pr-30">
                                 <h4 className="mb-20 footer-title">Newsletter</h4>
-                                <p>Sign Up For News & Get 30% Off in New User.</p>
+                                <p>Subscribe our newsletter to get our latest update & news</p>
                                 <div className="footer-subscribe">
                                     <form action="#">
                                         <input type="email" name="email" placeholder="Your email address" required />
@@ -72,10 +70,14 @@ const Footer1 = () => (
             <div className="small-container">
                 <div className="footer-bottom pt-30 pb-30">
                     <div className="left-area">
-                        <span>© All Copyright 2024 by <a href="#">Metatron</a></span>
+                        <span>
+                            © {new Date().getFullYear()} by{" "}
+                            Metatroncube Software Solutions.
+                            All Rights Reserved.
+                        </span>
                     </div>
                     <div className="right-area">
-                        <span><Link href="#">Terms & Condition</Link></span>
+                        <span><Link href="#">Accessibility Statement</Link></span>
                         <span><Link href="#">Privacy Policy</Link></span>
                     </div>
                 </div>

src/components/layout/NavMenu.tsx

@@ -5,8 +5,19 @@ const NavMenu = () => (
     <ul>
         <li><Link href="/">Home</Link></li>
         <li><Link href="/about-us">About</Link></li>
-        <li><Link href="/services">Services</Link></li>
+        <li className="has-dropdown">
+            <Link href="/services">Services</Link>
+            <ul className="submenu">
+                <li><Link href="/">Website Development</Link></li>
+                <li><Link href="/">Mobile Application Development</Link></li>
+                <li><Link href="/">Graphic Designing</Link></li>
+                <li><Link href="/">UI / UX Designing</Link></li>
+                <li><Link href="/">SEO & Content Writing</Link></li>
+                <li><Link href="/">Digital Marketing</Link></li>
+            </ul>
+        </li>
         <li><Link href="/careers">Careers</Link></li>
+        <li><Link href="/portfolio">Portfolio</Link></li>
         <li><Link href="/faq">FAQ</Link></li>
         <li><Link href="/blog">Blog</Link></li>
         <li><Link href="/contact">Contact</Link></li>

src/components/mobile-app-development-service/style-app.css

@@ -19386,41 +19386,77 @@ img {
   font-size: 16px;
   line-height: 1.6;
 }
+
 /* New Button Styles - Theme Blue-Dark-Blue Gradient + Radius + Icon */
-.vl-btn1, .vl-btn2, .vl-btn3, .vl-btn4, .vl-btn5, .vl-btn6, .kf-demo-btn, .secondary-cta {
+.vl-btn1,
-    background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+.vl-btn2,
-    background-size: 200% auto !important;
+.vl-btn3,
-    border-radius: 10px !important;
+.vl-btn4,
-    color: #fff !important;
+.vl-btn5,
-    padding: 20px 30px !important;
+.vl-btn6,
-    border: none !important;
+.kf-demo-btn,
-    transition: all 0.5s ease !important;
+.secondary-cta {
-    display: inline-flex !important;
+  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
-    align-items: center !important;
+  background-size: 200% auto !important;
-    justify-content: center !important;
+  border-radius: 10px !important;
-    gap: 8px !important;
+  color: #fff !important;
-    text-decoration: none !important;
+  padding: 15px 20px !important;
+  border: none !important;
+  transition: all 0.5s ease !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 8px !important;
+  text-decoration: none !important;
 }
 
-.vl-btn1:hover, .vl-btn2:hover, .vl-btn3:hover, .vl-btn4:hover, .vl-btn5:hover, .vl-btn6:hover, .kf-demo-btn:hover, .secondary-cta:hover {
+.vl-btn1:hover,
-    background-position: right center !important;
+.vl-btn2:hover,
-    color: #fff !important;
+.vl-btn3:hover,
-    transform: translateY(-2px) !important;
+.vl-btn4:hover,
-    box-shadow: 0 5px 15px rgba(55, 121, 185, 0.4) !important;
+.vl-btn5:hover,
+.vl-btn6:hover,
+.kf-demo-btn:hover,
+.secondary-cta:hover {
+  background-position: right center !important;
+  color: #fff !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 5px 15px rgba(55, 121, 185, 0.4) !important;
 }
 
 /* <i> icon styles */
-.vl-btn1 i, .vl-btn2 i, .vl-btn3 i, .vl-btn4 i, .vl-btn5 i, .vl-btn6 i, .kf-demo-btn i, .secondary-cta i {
+.vl-btn1 i,
-    display: inline-block !important;
+.vl-btn2 i,
-    font-size: 14px !important;
+.vl-btn3 i,
-    margin-left: 5px !important;
+.vl-btn4 i,
-    transition: transform 0.3s ease !important;
+.vl-btn5 i,
+.vl-btn6 i,
+.kf-demo-btn i,
+.secondary-cta i {
+  display: inline-block !important;
+  font-size: 14px !important;
+  margin-left: 5px !important;
+  transition: transform 0.3s ease !important;
 }
 
-.vl-btn1:hover i, .vl-btn2:hover i, .vl-btn3:hover i, .vl-btn4:hover i, .vl-btn5:hover i, .vl-btn6:hover i, .kf-demo-btn:hover i, .secondary-cta:hover i {
+.vl-btn1:hover i,
-    transform: translateX(3px) !important;
+.vl-btn2:hover i,
+.vl-btn3:hover i,
+.vl-btn4:hover i,
+.vl-btn5:hover i,
+.vl-btn6:hover i,
+.kf-demo-btn:hover i,
+.secondary-cta:hover i {
+  transform: translateX(3px) !important;
 }
 
-.vl-btn1::after, .vl-btn2::after, .vl-btn3::after, .vl-btn4::after, .vl-btn5::after, .vl-btn6::after, .kf-demo-btn::after, .secondary-cta::after {
+.vl-btn1::after,
-    display: none !important;
+.vl-btn2::after,
-}
+.vl-btn3::after,
+.vl-btn4::after,
+.vl-btn5::after,
+.vl-btn6::after,
+.kf-demo-btn::after,
+.secondary-cta::after {
+  display: none !important;
+}

src/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup.tsx

@@ -126,29 +126,29 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                     <div className="col-lg-5 info-panel" style={{ color: '#fff', position: 'relative' }}>
                         <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'linear-gradient(135deg, #1a1f2b 0%, #3779b9 100%)', zIndex: 0 }}></div>
                         <div className="info-inner" style={{ position: 'relative', zIndex: 1 }}>
-                            <h2 className="title">Let’s Discuss Your App Idea</h2>
+                            <h2 className="title text-white">Let’s Discuss Your App Idea</h2>
-                            <p className="desc">Fill out the form and our team will contact you within 24 hours.</p>
+                            <p className="desc text-white">Fill out the form and our team will contact you within 24 hours.</p>
 
                             <div className="contact-details">
                                 <div className="detail-item">
                                     <div className="icon"><i className="fa-solid fa-envelope"></i></div>
                                     <div className="text">
-                                        <p>Email Us</p>
+                                        <p className='text-white'>Email Us</p>
-                                        <h5>info@metatroncubesolutions.com</h5>
+                                        <h5 className='text-white'>info@metatroncubesolutions.com</h5>
                                     </div>
                                 </div>
                                 <div className="detail-item">
                                     <div className="icon"><i className="fa-solid fa-phone"></i></div>
                                     <div className="text">
-                                        <p>Call Us Free</p>
+                                        <p className='text-white'>Call Us Free</p>
-                                        <h5><a href="tel:+16476797651" style={{ color: 'inherit', textDecoration: 'none' }}>+1-647-679-7651</a></h5>
+                                        <h5 className='text-white'><a href="tel:+16476797651" style={{ color: 'inherit', textDecoration: 'none' }}>+1-647-679-7651</a></h5>
                                     </div>
                                 </div>
                             </div>
 
                             <div className="social-links">
                                 <a href="https://www.facebook.com/metatroncubecanada" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-facebook-f"></i></a>
-                                <a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-x-twitter"></i></a>
+                                <a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-twitter"></i></a>
                                 <a href="https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-linkedin-in"></i></a>
                                 <a href="https://www.instagram.com/metatron_digitalagency" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-instagram"></i></a>
                                 <a href="https://www.youtube.com/@metatron_digitalagency" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-youtube"></i></a>
@@ -272,7 +272,7 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                     flex-direction: column;
                 }
                 .info-panel {
-                    padding: 50px;
+                    padding: 40px;
                     display: flex;
                     flex-direction: column;
                     justify-content: center;

src/components/mobile-app-development-service/support/layout/Footer/Footer.tsx

@@ -9,17 +9,17 @@ const Footer = ({ logo = '/assets/img-app/home/footer/footer-logo-black.webp', c
         { label: 'About Us', link: '#about' },
         { label: 'Portfolio', link: '#portfolio' },
         { label: 'Faq', link: '#faq' },
-        { label: 'Contact', link: '/pages/contact' },
+        { label: 'Contact', link: '#contact-trigger' },
     ];
 
     const serviceLinks = [
-        { label: 'Website Development', link: '#services' },
+        { label: 'Mobile App Development', link: '#services' },
     ];
 
     const socialLinks = [
         { icon: 'fa-facebook-f', link: 'https://www.facebook.com/metatroncubecanada', bg: '#0866ff' },
         { icon: 'fa-instagram', link: 'https://www.instagram.com/metatron_digitalagency', bg: '#d62976' },
-        { icon: 'fa-x-twitter', link: 'https://x.com/MetatroncubeDA', bg: '#000' },
+        { icon: 'fa-twitter', link: 'https://x.com/MetatroncubeDA', bg: '#000' },
         { icon: 'fa-linkedin-in', link: 'https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all', bg: '#0077b5' },
         { icon: 'fa-youtube', link: 'https://www.youtube.com/@metatron_digitalagency', bg: '#ff0000' },
     ];
@@ -101,6 +101,12 @@ const Footer = ({ logo = '/assets/img-app/home/footer/footer-logo-black.webp', c
                                             style={{ color: '#1a1f2b', textDecoration: 'none', transition: 'color 0.3s' }}
                                             onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
                                             onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#1a1f2b'; }}
+                                            onClick={(e) => {
+                                                if (item.link === '#contact-trigger') {
+                                                    e.preventDefault();
+                                                    window.dispatchEvent(new CustomEvent('openContactPopup'));
+                                                }
+                                            }}
                                         >
                                             {item.label}
                                         </Link>
@@ -126,6 +132,12 @@ const Footer = ({ logo = '/assets/img-app/home/footer/footer-logo-black.webp', c
                                             style={{ color: '#1a1f2b', textDecoration: 'none', transition: 'color 0.3s' }}
                                             onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
                                             onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#1a1f2b'; }}
+                                            onClick={(e) => {
+                                                if (item.link === '#contact-trigger') {
+                                                    e.preventDefault();
+                                                    window.dispatchEvent(new CustomEvent('openContactPopup'));
+                                                }
+                                            }}
                                         >
                                             {item.label}
                                         </Link>

src/components/web-development-service/CaseStudies.tsx

@@ -41,7 +41,7 @@ const CaseStudies = () => {
         slidesToShow: 3,
         slidesToScroll: 1,
         autoplay: true,
-        autoplaySpeed: 3000,
+        autoplaySpeed: 2000,
         arrows: false,
         pauseOnHover: true,
         responsive: [

src/components/web-development-service/Pricing.tsx

@@ -37,7 +37,7 @@ const Pricing = () => {
                                 background: plan.isPopular ? '#1a1f2b' : '#fff',
                                 transition: 'all 0.4s',
                                 border: plan.isPopular ? 'none' : '1px solid #e3eaf4',
-                                boxShadow: plan.isPopular ? '0 30px 60px rgba(0,0,0,0.15)' : 'none',
+                                boxShadow: '0 30px 60px rgba(0,0,0,0.5)',
                                 position: 'relative',
                                 height: '100%',
                                 display: 'flex',

src/components/web-development-service/style.css

@@ -3416,7 +3416,7 @@ Location:
 }
 
 .service1-section-area .service1-boxarea:hover h5::after {
-  background: #1a1f2b;
+  background: #fff;
   transition: all 0.4s;
   left: 26px;
 }
@@ -3522,7 +3522,7 @@ Location:
   left: 0;
   top: 6px;
   transition: all 0.4s;
-  background: #1a1f2b;
+  background: #3779b9;
 }
 
 .service2-section-area {
@@ -19393,7 +19393,7 @@ img {
   background-size: 200% auto !important;
   border-radius: 10px !important;
   color: #fff !important;
-  padding: 20px 30px !important;
+  padding: 15px 20px !important;
   border: none !important;
   transition: all 0.5s ease !important;
   display: inline-flex !important;

src/components/web-development-service/support/layout/Footer/Footer.tsx

@@ -0,0 +1,213 @@
+import Link from 'next/link';
+import React from 'react';
+
+const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-section-area', topSpace = false }) => {
+    const currentYear = new Date().getFullYear();
+
+    const companyLinks = [
+        { label: 'Home', link: '#home' },
+        { label: 'About Us', link: '#about' },
+        { label: 'Portfolio', link: '#portfolio' },
+        { label: 'Faq', link: '#faq' },
+        { label: 'Contact', link: '#contact-trigger' },
+    ];
+
+    const serviceLinks = [
+        { label: 'Website Development', link: '#services' },
+    ];
+
+    const socialLinks = [
+        { icon: 'fa-facebook-f', link: 'https://www.facebook.com/metatroncubecanada', bg: '#0866ff' },
+        { icon: 'fa-instagram', link: 'https://www.instagram.com/metatron_digitalagency', bg: '#d62976' },
+        { icon: 'fa-brands fa-twitter', link: 'https://x.com/MetatroncubeDA', bg: '#000' },
+        { icon: 'fa-linkedin-in', link: 'https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all', bg: '#0077b5' },
+        { icon: 'fa-youtube', link: 'https://www.youtube.com/@metatron_digitalagency', bg: '#ff0000' },
+    ];
+
+    return (
+        <div
+            className={`${containerClass} sp8 position-relative`}
+            style={{
+                backgroundImage: 'url(/assets/img/home/section10/footer-img.webp)',
+                backgroundPosition: 'center',
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: 'cover',
+                overflow: 'hidden',
+            }}
+        >
+            {/* Light overlay to ensure text readability */}
+            <div style={{ position: 'absolute', inset: 0, zIndex: 0 }} />
+
+            {topSpace && (
+                <>
+                    <div className="space100"></div>
+                    <div className="space50"></div>
+                </>
+            )}
+            <div className="container position-relative" style={{ zIndex: 1 }}>
+                <div className="row">
+                    {/* Column 1: Logo & Description */}
+                    <div className="col-lg-4 col-md-6">
+                        <div className="footer-logo1">
+                            <img src={logo} alt="MetatronCube Logo" style={{ maxWidth: '200px' }} />
+                            <div className="space24"></div>
+                            <p style={{ color: '#fff', lineHeight: '1.7' }}>
+                                We build high-converting, fast, and SEO-optimized websites that generate leads, increase sales, and accelerate your business growth.
+                            </p>
+                            <div className="space24"></div>
+                            <div className="footer-socials d-flex gap-3">
+                                {socialLinks.map((social, idx) => (
+                                    <a
+                                        key={idx}
+                                        id={`footer-social-${social.icon}`}
+                                        href={social.link}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="social-icon-box"
+                                        style={{
+                                            width: '40px',
+                                            height: '40px',
+                                            borderRadius: '50%',
+                                            background: social.bg || '#3779b9',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            color: '#fff',
+                                            transition: 'transform 0.3s'
+                                        }}
+                                        onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.transform = 'translateY(-5px)'; }}
+                                        onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.transform = 'translateY(0)'; }}
+                                    >
+                                        <i className={`fa-brands ${social.icon}`}></i>
+                                    </a>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Column 2: Company */}
+                    <div className="col-lg-2 col-md-6">
+                        <div className="space30 d-md-none d-block"></div>
+                        <div className="vl-footer-widget list-style-none">
+                            <h3 style={{ color: '#fff', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
+                                Company
+                                <span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
+                            </h3>
+                            <ul className="p-0 m-0" style={{ listStyle: 'none' }}>
+                                {companyLinks.map((item, idx) => (
+                                    <li key={idx} style={{ marginBottom: '15px' }}>
+                                        <Link
+                                            href={item.link}
+                                            style={{ color: '#fff', textDecoration: 'none', transition: 'color 0.3s' }}
+                                            onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
+                                            onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#fff'; }}
+                                            onClick={(e) => {
+                                                if (item.link === '#contact-trigger') {
+                                                    e.preventDefault();
+                                                    window.dispatchEvent(new CustomEvent('openContactPopup'));
+                                                }
+                                            }}
+                                        >
+                                            {item.label}
+                                        </Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    </div>
+
+                    {/* Column 3: Services */}
+                    <div className="col-lg-3 col-md-6">
+                        <div className="space30 d-lg-none d-block"></div>
+                        <div className="vl-footer-widget list-style-none">
+                            <h3 style={{ color: '#fff', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
+                                Services
+                                <span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
+                            </h3>
+                            <ul className="p-0 m-0" style={{ listStyle: 'none' }}>
+                                {serviceLinks.map((item, idx) => (
+                                    <li key={idx} style={{ marginBottom: '15px' }}>
+                                        <Link
+                                            href={item.link}
+                                            style={{ color: '#fff', textDecoration: 'none', transition: 'color 0.3s' }}
+                                            onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
+                                            onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#fff'; }}
+                                            onClick={(e) => {
+                                                if (item.link === '#contact-trigger') {
+                                                    e.preventDefault();
+                                                    window.dispatchEvent(new CustomEvent('openContactPopup'));
+                                                }
+                                            }}
+                                        >
+                                            {item.label}
+                                        </Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    </div>
+
+                    {/* Column 4: Newsletter */}
+                    {/* Column 4: Location */}
+                    <div className="col-lg-3 col-md-6">
+                        <div className="space30 d-lg-none d-block"></div>
+                        <div className="vl-footer-widget location-widget">
+                            <h3 style={{ color: '#fff', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
+                                Get In Touch
+                                <span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
+                            </h3>
+                            <div className="contact-list d-flex flex-column gap-3">
+                                {/* Email */}
+                                <div className="contact-item d-flex align-items-start gap-3 flex-wrap">
+                                    <div className="contact-icon" style={{ color: '#3779b9', fontSize: '18px', width: '20px' }}>
+                                        <i className="fa-solid fa-envelope"></i>
+                                    </div>
+                                    <div className="contact-text" style={{ overflowWrap: 'anywhere', wordBreak: 'break-word', maxWidth: '100%' }}>
+                                        <a href="mailto:info@metatroncubesolutions.com" style={{ color: '#fff', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#fff'}>
+                                            info@metatroncubesolutions.com
+                                        </a>
+                                    </div>
+                                </div>
+
+                                {/* Location */}
+                                <div className="contact-item d-flex align-items-start gap-3">
+                                    <div className="contact-icon" style={{ color: '#3779b9', fontSize: '18px', width: '20px' }}>
+                                        <i className="fa-solid fa-location-dot"></i>
+                                    </div>
+                                    <div className="contact-text">
+                                        <p style={{ color: '#fff', fontSize: '16px', fontWeight: 500, margin: 0 }}>
+                                            Waterloo, Ontario Canada
+                                        </p>
+                                    </div>
+                                </div>
+
+                                {/* Phone */}
+                                <div className="contact-item d-flex align-items-start gap-3 flex-wrap">
+                                    <div className="contact-icon" style={{ color: '#3779b9', fontSize: '18px', width: '20px' }}>
+                                        <i className="fa-solid fa-phone"></i>
+                                    </div>
+                                    <div className="contact-text">
+                                        <a href="tel:+1-647-679-7651" style={{ color: '#fff', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#fff'}>
+                                            +1-647-679-7651
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="space60"></div>
+                <div className="row align-items-center">
+                    <div className="col-lg-12 col-md-12">
+                        <div className="vl-copyright-area">
+                            <p style={{ color: '#fff', margin: 0 }}>© Copyright {currentYear} - <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer" style={{ color: '#3779b9', fontWeight: 700, textDecoration: 'none' }}>MetatronCube</a>. All Right Reserved</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Footer;

src/components/web-development-service/support/layout/Header/Header.tsx

@@ -0,0 +1,73 @@
+"use client";
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import useSticky from '@/hooks/useSticky';
+import NavItems from './NavItems';
+import MobileMenu from './MobileMenu';
+import ContactPopup from '@/components/common/ContactPopup/ContactPopup';
+
+const Header = () => {
+    const sticky = useSticky();
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+    const [isPopupOpen, setIsPopupOpen] = useState(false);
+
+    useEffect(() => {
+        const handleOpenPopup = () => setIsPopupOpen(true);
+        window.addEventListener('openContactPopup', handleOpenPopup);
+        return () => window.removeEventListener('openContactPopup', handleOpenPopup);
+    }, []);
+
+    const toggleMobileMenu = () => {
+        setIsMobileMenuOpen(!isMobileMenuOpen);
+    };
+
+    return (
+        <>
+            <header className="homepage1-body">
+                <div id="vl-header-sticky" className={`vl-header-area vl-transparent-header ${sticky ? "header-sticky" : ""}`}>
+                    <div className="container headerfix">
+                        <div className="row align-items-center row-bg3">
+                            <div className="col-lg-3 col-md-6 col-6">
+                                <div className="vl-logo">
+                                    <Link href="/">
+                                        <img src="/assets/img/logo.webp" alt="MetatronCube" style={{ width: '100%', maxWidth: '250px', height: 'auto', transition: 'all 0.3s' }} />
+                                    </Link>
+                                </div>
+                            </div>
+                            <div className="col-lg-6 d-none d-lg-block">
+                                <div className="vl-main-menu text-center">
+                                    <nav className="vl-mobile-menu-active">
+                                        <NavItems themeBtn="vl-btn1" />
+                                    </nav>
+                                </div>
+                            </div>
+                            <div className="col-lg-3 col-md-6 col-6">
+                                <div className="vl-hero-btn d-none d-lg-block text-end">
+                                    <span className="vl-btn-wrap text-end">
+                                        <button
+                                            onClick={() => setIsPopupOpen(true)}
+                                            className="vl-btn1"
+                                            style={{ border: 'none' }}
+                                        >
+                                            Get Started Now <i className="fa-solid fa-angle-right"></i>
+                                        </button>
+                                    </span>
+                                </div>
+                                <div className="vl-header-action-item d-block d-lg-none">
+                                    <button type="button" className="vl-offcanvas-toggle" onClick={toggleMobileMenu}>
+                                        <i className="fa-solid fa-bars-staggered"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+
+            <MobileMenu isMobileMenuOpen={isMobileMenuOpen} toggleMobileMenu={toggleMobileMenu} themeBtn="vl-btn1" />
+            <ContactPopup isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)} />
+        </>
+    );
+};
+
+export default Header;

src/components/web-development-service/support/layout/Header/MobileMenu.tsx

@@ -0,0 +1,86 @@
+"use client";
+import React from 'react';
+import Link from 'next/link';
+
+interface MobileMenuProps {
+    isMobileMenuOpen: boolean;
+    toggleMobileMenu: () => void;
+    themeBtn?: string;
+    arrow?: boolean;
+    arrow2?: boolean;
+}
+
+const navItems = [
+    { title: 'Home', link: '#home' },
+    { title: 'About', link: '#about' },
+    { title: 'Services', link: '#services' },
+    { title: 'Portfolio', link: '#portfolio' },
+    { title: 'FAQ', link: '#faq' },
+    { title: 'Contact', link: '#contact-trigger' },
+];
+
+const MobileMenu: React.FC<MobileMenuProps> = ({ isMobileMenuOpen, toggleMobileMenu }) => {
+    return (
+        <div className="homepage1-body">
+            <div className={`vl-offcanvas ${isMobileMenuOpen ? 'vl-offcanvas-open' : ''}`}>
+                <div className="vl-offcanvas-wrapper">
+                    <div className="vl-offcanvas-header d-flex justify-content-between align-items-center mb-90">
+                        <div className="vl-offcanvas-logo">
+                            <Link href="#home" onClick={toggleMobileMenu}>
+                                <img src="/assets/img/logo.webp" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} />
+                            </Link>
+                        </div>
+                        <div className="vl-offcanvas-close">
+                            <button className="vl-offcanvas-close-toggle" onClick={toggleMobileMenu}>
+                                <i className="fa-solid fa-xmark"></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="vl-offcanvas-menu d-lg-none mb-40">
+                        <nav>
+                            <ul>
+                                {navItems.map((item, index) => (
+                                    <li key={index}>
+                                        <Link
+                                            href={item.link}
+                                            onClick={(e) => {
+                                                if (item.link === '#contact-trigger') {
+                                                    e.preventDefault();
+                                                    window.dispatchEvent(new CustomEvent('openContactPopup'));
+                                                }
+                                                toggleMobileMenu();
+                                            }}
+                                        >
+                                            {item.title}
+                                        </Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </nav>
+                    </div>
+
+                    <div className="space20"></div>
+                    <div className="vl-offcanvas-info">
+                        <h3 className="vl-offcanvas-sm-title">Contact Us</h3>
+                        <span><a href="tel:+16476797651"><i className="fa-solid fa-phone"></i> +1-647-679-7651</a></span>
+                        <span><a href="mailto:info@metatroncubesolutions.com"><i className="fa-regular fa-envelope"></i> info@metatroncubesolutions.com</a></span>
+                    </div>
+
+                    <div className="space20"></div>
+                    <div className="vl-offcanvas-social">
+                        <h3 className="vl-offcanvas-sm-title">Follow Us</h3>
+                        <a href="https://www.facebook.com/metatroncubecanada" target="_blank" rel="noopener noreferrer"><i className="fab fa-facebook-f"></i></a>
+                        <a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer"><i className="fa-brands fa-x-twitter"></i></a>
+                        <a href="https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all" target="_blank" rel="noopener noreferrer"><i className="fab fa-linkedin-in"></i></a>
+                        <a href="https://www.instagram.com/metatron_digitalagency" target="_blank" rel="noopener noreferrer"><i className="fab fa-instagram"></i></a>
+                        <a href="https://www.youtube.com/@metatron_digitalagency" target="_blank" rel="noopener noreferrer"><i className="fab fa-youtube"></i></a>
+                    </div>
+                </div>
+            </div>
+            <div className={`vl-offcanvas-overlay ${isMobileMenuOpen ? 'vl-offcanvas-overlay-open' : ''}`} onClick={toggleMobileMenu}></div>
+        </div>
+    );
+};
+
+export default MobileMenu;

src/components/web-development-service/support/layout/Header/NavItems.tsx

@@ -0,0 +1,42 @@
+import Link from 'next/link';
+import React from 'react';
+
+interface NavItemsProps {
+    themeBtn?: string;
+    arrow?: boolean;
+    arrow2?: boolean;
+    btnSpace?: boolean;
+}
+
+const navItems = [
+    { title: 'Home', link: '#home' },
+    { title: 'About', link: '#about' },
+    { title: 'Services', link: '#services' },
+    { title: 'Portfolio', link: '#portfolio' },
+    { title: 'FAQ', link: '#faq' },
+    { title: 'Contact', link: '#contact-trigger' },
+];
+
+const NavItems: React.FC<NavItemsProps> = () => {
+    return (
+        <ul>
+            {navItems.map((item, index) => (
+                <li key={index}>
+                    <Link
+                        href={item.link}
+                        onClick={(e) => {
+                            if (item.link === '#contact-trigger') {
+                                e.preventDefault();
+                                window.dispatchEvent(new CustomEvent('openContactPopup'));
+                            }
+                        }}
+                    >
+                        {item.title}
+                    </Link>
+                </li>
+            ))}
+        </ul>
+    );
+};
+
+export default NavItems;

src/components/web-development-service/support/layout/MainLayout.tsx

@@ -0,0 +1,26 @@
+"use client";
+import React, { useEffect } from 'react';
+import AOS from 'aos';
+import Header from './Header/Header';
+import Footer from './Footer/Footer';
+import CTA from '@/components/layout/CTA/CTA';
+
+const MainLayout = ({ children }: { children: React.ReactNode }) => {
+    useEffect(() => {
+        AOS.init({
+            duration: 1000,
+            once: true,
+        });
+    }, []);
+
+    return (
+        <>
+            <Header />
+            <main>{children}</main>
+            <CTA />
+            <Footer />
+        </>
+    );
+};
+
+export default MainLayout;

src/utils/constant.utils.ts

@@ -221,7 +221,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/3.png",
@@ -233,7 +233,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/4.png",
@@ -245,7 +245,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/5.png",
@@ -257,7 +257,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/6.png",
@@ -269,7 +269,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/7.png",
@@ -281,7 +281,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/8.png",
@@ -293,7 +293,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/FALCON AD 1.png",
@@ -305,7 +305,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/Falcon Tees.png",
@@ -318,7 +318,7 @@ export const PortfolioData = [
     contentInnerClass: "case-study-content-inner",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/FB COVER.png",
@@ -330,7 +330,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/metatroncube.png",
@@ -342,7 +342,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/metatronNest.png",
@@ -354,7 +354,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/mockup.png",
@@ -366,7 +366,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/mockup-2.png",
@@ -378,7 +378,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/polo tshirt.png",
@@ -390,7 +390,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/POSTER.png",
@@ -402,7 +402,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/vehicle.jpg",
@@ -414,7 +414,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/1.jpg",
@@ -426,7 +426,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/2.jpg",
@@ -438,7 +438,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/3.jpg",
@@ -450,7 +450,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/6.jpg",
@@ -463,7 +463,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/new chennora banner.jpg",
@@ -475,7 +475,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/Digital Advertisement Agency.jpg",
@@ -487,7 +487,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/Copy of Metatroncube CA - June Posters.jpg",
@@ -499,7 +499,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/graphic.jpg",
@@ -511,7 +511,7 @@ export const PortfolioData = [
     colClass: "col-lg-4 col-md-6",
     alt: "Consulting for Business Organizations",
     title: "Graphic Design",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/graphic-design/graphic-4.jpg",
@@ -560,7 +560,7 @@ export const PortfolioData = [
     contentInnerClass: "case-study-content-inner2",
     alt: "Consulting for Business Organizations",
     title: "Google Meta Ads",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/meta-ads/Google Ads.jpeg",
@@ -573,7 +573,7 @@ export const PortfolioData = [
     contentInnerClass: "case-study-content-inner2",
     alt: "Consulting for Business Organizations",
     title: "Google Meta Ads",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/meta-ads/Meta Ads 1.png",
@@ -586,7 +586,7 @@ export const PortfolioData = [
     contentInnerClass: "case-study-content-inner2",
     alt: "Consulting for Business Organizations",
     title: "Google Meta Ads",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/meta-ads/Meta Ads 2.png",
@@ -599,7 +599,7 @@ export const PortfolioData = [
     contentInnerClass: "case-study-content-inner2",
     alt: "Consulting for Business Organizations",
     title: "Google Meta Ads",
-    name: "Consulting for Business Organizations",
+    // name: "Consulting for Business Organizations",
     link: "#",
     videoLink: "https://youtu.be/BS4TUd7FJSg",
     imagePopup: "/assets/images/portfolio/meta-ads/Meta Ads 3.png",