header updated

public/assets/css/main.css

@@ -2612,6 +2612,7 @@ only screen and (min-width: 576px) and (max-width: 767px) {
   height: 36px;
   width: 36px;
   border: 1px solid #fff;
+  border-radius: 20px;
   font-size: 13px;
   display: inline-flex;
   justify-content: center;

src/app/accessibility-statement-for-metatroncube-software-solutions/page.tsx

@@ -1,25 +1,23 @@
-"use client";
+import React from "react";
-
+import type { Metadata } from "next";
-import React, { useEffect } from "react";
 import Header1 from "@/components/layout/Header1";
 import Footer1 from "@/components/layout/Footer1";
 import PageHeader from "@/components/common/PageHeader";
 import AccessibilityContent from "@/components/accessibility/AccessibilityContent";
+import MetatronInitializer from "@/components/MetatronInitializer";
+
+export const metadata: Metadata = {
+    title: "Accessibility Statement for Metatroncube Software Solutions - Metatroncube Software Solutions | Innovative & User-Centric Tech Services in Waterloo",
+    description: "MetatronCube is committed to accessibility in its software solutions — ensuring web & mobile apps are usable, inclusive, compliant for all users.",
+    alternates: {
+        canonical: "/accessibility-statement-for-metatroncube-software-solutions",
+    },
+};
 
 export default function AccessibilityStatement() {
-    useEffect(() => {
-        const init = () => {
-            if (typeof window !== "undefined" && (window as any).initMetatron && (window as any).jQuery) {
-                (window as any).initMetatron();
-            } else {
-                setTimeout(init, 100);
-            }
-        };
-        init();
-    }, []);
-
     return (
         <>
+            <MetatronInitializer />
             <Header1 />
             <main>
                 <PageHeader

src/app/blog/[slug]/BlogDetailsClient.tsx

@@ -174,7 +174,7 @@ export default function BlogDetailsClient({ blog }: BlogDetailsClientProps) {
                                     )}
 
                                     <div className="back-btn-wrapper pt-40 border-top">
-                                        <button onClick={() => router.back()} className="primary-btn-5 btn-hover">
+                                        <button onClick={() => router.back()} className="vl-btn1">
                                             <i className="fa-solid fa-arrow-left"></i> &nbsp; Back to Previous Page
                                             <span className="btn-hover-span"></span>
                                         </button>

src/app/careers/page.tsx

@@ -2,10 +2,11 @@ import React from "react";
 import type { Metadata } from "next";
 import Header1 from "@/components/layout/Header1";
 import Footer1 from "@/components/layout/Footer1";
+import WhyChooseUs from "@/components/about/WhyChooseUs";
 import PageHeader from "@/components/common/PageHeader";
-import WhyChooseSection from "@/components/careers/WhyChooseSection";
+import AboutService from "@/components/services-digital-solutions/AboutService";
-import ContactSection from "@/components/careers/ContactSection";
+import AboutThree from "@/components/home/AboutThree";
-import FaqVideoSection from "@/components/careers/FaqVideoSection";
+import ProjectsSection from "@/components/home/ProjectsSection";
 import MetatronInitializer from "@/components/MetatronInitializer";
 
 export const metadata: Metadata = {
@@ -25,13 +26,14 @@ export default function CareersPage() {
                 <PageHeader
                     title="Careers"
                     bannerLeftImage="/assets/images/innerbanner/left/left-career.webp"
-                    bannerRightImage="/assets/images/innerbanner/right/right-career.webp"
+                    bannerRightImage="/assets/images/innerbanner/right/right-careers.webp"
                 />
-                <WhyChooseSection />
+                <AboutService />
-                <FaqVideoSection />
+                <AboutThree />
-                <ContactSection />
+                <WhyChooseUs />
+                <ProjectsSection />
             </main>
             <Footer1 />
         </>
     );
-}
+}

src/app/globals.css

@@ -4948,7 +4948,7 @@ body {
      ----------------------------------------------------------- */
 .why-choose-two {
   position: relative;
-  background-color: var(--pelocis-gray, #F5F2EF);
+  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
   counter-reset: count;
 }
 
@@ -4971,7 +4971,7 @@ body {
   font-size: 16px;
   font-weight: 400;
   line-height: 26px;
-  color: var(--pelocis-text-dark, #636363);
+  color: #fff;
   margin-bottom: 25px;
 }
 
@@ -5110,6 +5110,7 @@ body {
 .why-choose-two .pelocis-stretch-element-inside-column {
   position: relative;
   height: 100%;
+  left: 50px;
 }
 
 .why-choose-two__shape-one {
@@ -10207,7 +10208,7 @@ body {
 .about-service .icon-circle {
   width: 40px;
   height: 40px;
-  background: #fff;
+  /* background: #fff; */
   color: #3779b9;
   border-radius: 4px;
   display: flex;
@@ -12024,6 +12025,12 @@ body {
   .contact-area .contact-info-item .content h6 {
     font-size: 16px;
   }
+  .faq-one__card{
+    flex-direction: column !important;
+  }
+  .choose-section .bg-image{
+    display: none;
+  }
 }
 
 @media (max-width: 390px) {
@@ -12097,7 +12104,31 @@ body {
   right: 0;
   z-index: 1001;
   /* High enough to be over offcanvas overlay (900) and info (999) */
-  padding: 16px 0;
+  padding: 0;
+  /* Remove default padding, we use row-bg3 for padding */
+}
+
+/* Glassmorphism row for header */
+.row-bg3 {
+  background: rgba(26, 31, 43, 0.8) !important;
+  backdrop-filter: blur(12px) !important;
+  -webkit-backdrop-filter: blur(12px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-radius: 16px !important;
+  /* padding: 10px 20px !important; */
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
+  margin-top: 20px !important;
+  transition: all 0.3s ease !important;
+}
+
+@media (max-width: 991px) {
+  .row-bg3 {
+    margin-top: 0 !important;
+    border-radius: 0 !important;
+    border: none !important;
+    background: #1a1f2b !important;
+    padding: 15px 20px !important;
+  }
 }
 
 @media (max-width: 991px) {
@@ -12170,7 +12201,8 @@ body {
 
 .main-menu-metatron ul {
   display: flex;
-  gap: 10px;
+  justify-content: center;
+  gap: 7px;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -12182,12 +12214,13 @@ body {
 }
 
 .main-menu-metatron ul li a {
-  font-size: 12px;
+  font-size: 16px;
+  font-family: 'Figtree', sans-serif;
   padding: 0 5px;
   font-weight: 700;
   color: #ffffff;
   /* White text for dark theme */
-  text-transform: uppercase;
+  /* text-transform: uppercase; */
   transition: all 0.3s;
   letter-spacing: 0.5px;
 }
@@ -12230,8 +12263,9 @@ body {
 .main-menu-metatron ul li .submenu li a {
   padding: 12px 25px;
   display: block;
-  font-size: 13px;
+  text-align: left;
-  text-transform: uppercase;
+  font-size: 16px;
+  /* text-transform: uppercase; */
   font-weight: 600;
   color: #ffffff;
   /* White text for dark theme */
@@ -13083,4 +13117,27 @@ body {
 
 .justify-content-between {
   justify-content: space-between !important;
+}
+
+@media (max-width: 1199px) and (min-width: 600px) {
+  .why-choose-two .pelocis-stretch-element-inside-column {
+    left: 152px;
+  }
+}
+
+@media (max-width: 1110px) and (min-width: 992px) {
+
+  .main-menu-metatron ul {
+    justify-content: flex-start;
+  }
+
+  .main-menu-metatron ul li a {
+    padding: 0px 3px;
+    font-size: 13px;
+  }
+
+  .main-menu-metatron ul li .submenu li a {
+    font-size: 13px;
+  }
+
 }

src/app/page.tsx

@@ -41,9 +41,9 @@ export default function MainPage() {
                 <BrandSection />
                 <CallAreaThree />
                 <CounterAreaTwo />
+                <CtaSection />
                 {/* <ServiceThreeSlider /> */}
                 <HomeServiceOne/>
-                <CtaSection />
                 <TestimonialsSection />
                 <HomeContactOne />
                 <BlogSection />

src/app/privacy-policy/page.tsx

@@ -1,25 +1,23 @@
-"use client";
+import React from "react";
-
+import type { Metadata } from "next";
-import React, { useEffect } from "react";
 import Header1 from "@/components/layout/Header1";
 import Footer1 from "@/components/layout/Footer1";
 import PageHeader from "@/components/common/PageHeader";
 import PrivacyPolicyContent from "@/components/privacy/PrivacyPolicyContent";
+import MetatronInitializer from "@/components/MetatronInitializer";
+
+export const metadata: Metadata = {
+    title: "Privacy Policy of Metatroncube Software Solutions - Metatroncube Software Solutions | Innovative & User-Centric Tech Services in Waterloo",
+    description: "Metatroncube Software Solutions values your privacy. We collect, use & protect your personal data responsibly, ensuring transparency, security, and legal compliance. Contact us anytime.",
+    alternates: {
+        canonical: "/privacy-policy",
+    },
+};
 
 export default function PrivacyPolicy() {
-    useEffect(() => {
-        const init = () => {
-            if (typeof window !== "undefined" && (window as any).initMetatron && (window as any).jQuery) {
-                (window as any).initMetatron();
-            } else {
-                setTimeout(init, 100);
-            }
-        };
-        init();
-    }, []);
-
     return (
         <>
+            <MetatronInitializer />
             <Header1 />
             <main>
                 <PageHeader

src/components/common/Offcanvas.tsx

@@ -93,7 +93,7 @@ const Offcanvas = () => {
                                         </div>
                                     </li>
                                     <li className="d-flex align-items-center">
-                                        <div className="offcanvas__contact-icon mr-15">
+                                        <div className="offcanvas__contact-icon">
                                             <i className="fa-solid fa-phone"></i>
                                         </div>
                                         <div className="offcanvas__contact-text">
@@ -101,7 +101,7 @@ const Offcanvas = () => {
                                         </div>
                                     </li>
                                     <li className="d-flex align-items-center">
-                                        <div className="offcanvas__contact-icon mr-15">
+                                        <div className="offcanvas__contact-icon">
                                             <i className="fa-solid fa-envelope"></i>
                                         </div>
                                         <div className="offcanvas__contact-text">

src/components/home/AboutThree.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useEffect, useRef } from 'react';
 
 const AboutThree = () => {

src/components/home/WhyChooseTwo.tsx

@@ -14,10 +14,10 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
                         <div className="why-choose-two__content">
                             <div className="sec-title">
                                 <div className="sec-title__shape"></div>
-                                <h6 className="sec-title__tagline">Watch Us Live</h6>
+                                <h6 className="sec-title__tagline text-white">Watch Us Live</h6>
-                                <h3 className="sec-title__title">An Agency That Gets Excited <br /> About Your Mission</h3>
+                                <h3 className="sec-title__title text-white">An Agency That Gets Excited <br /> About Your Mission</h3>
                             </div>
-                            <p>
+                            <p className='text-white'>
                                 Every project we take on is personal. We get excited about your goals, your grit, and the journey you’re on.
                             </p>
                             <p className="why-choose-two__text">
@@ -28,7 +28,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
                                     <li className="why-choose-two__item">
                                         <div className="why-choose-two__count"></div>
                                         <div className="why-choose-two__icon">
-                                            <span className="fa-solid fa-lightbulb"></span>
+                                            <img src="/assets/images/about/3/icon-1.webp" alt="" />
                                         </div>
                                         <div className="why-choose-two__item__content">
                                             <h3 className="why-choose-two__item__title">Urgent development solutions</h3>
@@ -40,7 +40,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
                                     <li className="why-choose-two__item">
                                         <div className="why-choose-two__count"></div>
                                         <div className="why-choose-two__icon">
-                                            <span className="fa-solid fa-brain"></span>
+                                             <img src="/assets/images/about/3/icon-2.webp" alt="" />
                                         </div>
                                         <div className="why-choose-two__item__content">
                                             <h3 className="why-choose-two__item__title">Top quality services with reasonable price</h3>
@@ -52,7 +52,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
                                     <li className="why-choose-two__item">
                                         <div className="why-choose-two__count"></div>
                                         <div className="why-choose-two__icon">
-                                            <span className="fa-solid fa-people-roof"></span>
+                                             <img src="/assets/images/about/3/icon-3.webp" alt="" />
                                         </div>
                                         <div className="why-choose-two__item__content">
                                             <h3 className="why-choose-two__item__title">Professional & experienced team</h3>

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

@@ -16,7 +16,7 @@ const banners = [
         btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
     },
     {
-        image: "/assets/images/home/1/banner-image/seo-strategies.webp",
+        image: "/assets/images/home/1/banner-image/seo.webp",
         subTitle: "METATRONCUBE SOLUTIONS",
         title: "SEO STRATEGIES PAVING YOUR PATH TO SUCCESS",
         text: "Maximize visibility and drive traffic with Metatroncube's expert SEO strategies.",

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

@@ -67,7 +67,7 @@ const TestimonialsSection = () => {
     }
 
     return (
-        <section className="testimonials-two-section fix section-space-bottom">
+        <section className="testimonials-two-section fix section-space">
             <div className="container-fluid g-0">
                 <div className="row g-0">
                     <div className="col-xxl-4 col-xl-4 col-lg-12">

src/components/home/home-2/About2Section.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 const About2Section = () => (
     <section className="about-2-section p-relative fix section-space">
-        <div className="bg-shape-1" style={{ backgroundImage: "url(/assets/images/about/1/element-1.webp)" }}></div>
+        <div className="bg-shape-1" style={{ backgroundImage: "url(/assets/images/about/1/element.webp)" }}></div>
         <div className="bg-shape-2" style={{ backgroundImage: "url(/assets/images/about/1/element-2.webp)" }}></div>
         <div className="small-container">
             <div className="row">

src/components/layout/Footer1.tsx

@@ -94,8 +94,7 @@ const Footer1 = () => (
             <div className="small-container">
                 <div className="footer-bottom pt-30 pb-30">
                     <div className="left-area">
-                        <span>
+                        <span>Copyright {new Date().getFullYear()} © by{" "}
-                            © {new Date().getFullYear()} by{" "}
                             Metatroncube Software Solutions.
                             All Rights Reserved.
                         </span>

src/components/layout/Header1.tsx

@@ -35,21 +35,21 @@ const Header1 = () => {
             <div id="header-sticky" className={`vl-header-area vl-transparent-header ${sticky ? "header-sticky" : ""}`}>
                 <div className="container-fluid headerfix px-lg-5">
                     <div className="row align-items-center row-bg3 px-lg-4">
-                        <div className="col-lg-2 col-md-6 col-6">
+                        <div className="col-lg-3 col-md-6 col-9">
                             <div className="vl-logo">
                                 <Link href="/">
-                                    <img src="/assets/img-app/logo.webp" alt="header logo" style={{ width: '100%', maxWidth: '320px', height: 'auto', transition: 'all 0.3s' }} />
+                                    <img src="/assets/img-app/logo.webp" alt="header logo" style={{ width: '100%', maxWidth: '260px', height: 'auto', transition: 'all 0.3s' }} />
                                 </Link>
                             </div>
                         </div>
-                        <div className="col-lg-8 d-none d-lg-block">
+                        <div className="col-lg-7 d-none d-lg-block">
                             <div className="vl-main-menu text-center">
                                 <nav id="mobile-menu" className="vl-mobile-menu-active main-menu-metatron">
                                     <NavItemsMetatron />
                                 </nav>
                             </div>
                         </div>
-                        <div className="col-lg-2 col-md-6 col-6">
+                        <div className="col-lg-2 col-md-6 col-3">
                             <div className="header-action-metatron d-flex align-items-center justify-content-end">
                                 <div className="header-btn-metatron d-none d-lg-block">
                                     <Link className="vl-btn1" href="/contact" style={{ textDecoration: 'none', whiteSpace: 'nowrap' }}>

src/components/layout/NavItemsMetatron.tsx

@@ -2,25 +2,25 @@ import Link from 'next/link';
 import React from 'react';
 
 const navItems = [
-    { title: 'HOME', link: '/' },
+    { title: 'Home', link: '/' },
     {
-        title: 'SERVICE',
+        title: 'Service',
         link: '/services-digital-solutions',
         submenu: [
-            { title: 'WEBSITE DEVELOPMENT', link: '/services-digital-solutions/web-development' },
+             { title: 'Website Development', link: '/services-digital-solutions/web-development' },
-            { title: 'MOBILE APPLICATION DEVELOPMENT', link: '/services-digital-solutions/mobile-application-development' },
+            { title: 'Mobile Application Development', link: '/services-digital-solutions/mobile-application-development' },
-            { title: 'GRAPHIC DESIGNING', link: '/services-digital-solutions/graphic-designing-company' },
+            { title: 'Graphic Designing', link: '/services-digital-solutions/graphic-designing-company' },
-            { title: 'UI / UX DESIGNING', link: '/services-digital-solutions/ui-ux-designing' },
+            { title: 'UI / UX Designing', link: '/services-digital-solutions/ui-ux-designing' },
-            { title: 'SEO & CONTENT WRITING', link: '/services-digital-solutions/search-engine-optimization-seo-content-writing' },
+            { title: 'SEO & Content Writing', link: '/services-digital-solutions/search-engine-optimization-seo-content-writing' },
-            { title: 'DIGITAL MARKETING', link: '/services-digital-solutions/digital-marketing-agency-in-canada' },
+            { title: 'Digital Marketing', link: '/services-digital-solutions/digital-marketing-agency-in-canada' }
         ],
     },
-    { title: 'PORTFOLIO', link: '/portfolio' },
+    { title: 'Portfolio', link: '/portfolio' },
-    { title: 'ABOUT', link: '/about-us' },
+    { title: 'About', link: '/about-us' },
-    { title: 'CAREERS', link: '/careers' },
+    { title: 'Career', link: '/careers' },
-    { title: 'BLOG', link: '/blog' },
+    { title: 'Blog', link: '/blog' },
-    { title: 'CONTACT', link: '/contact' },
+    { title: 'Contact', link: '/contact' },
-    { title: 'FAQ', link: '/faq' },
+    { title: 'Faq', link: '/faq' },
 ];
 
 const NavItemsMetatron = () => {

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

@@ -201,7 +201,7 @@ const Footer = ({ logo = '/assets/img-app/home/footer/footer-logo-black.webp', c
                 <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={{ margin: 0 }}>Copyright {new Date().getFullYear()} © by{" "} Metatroncube Software Solutions. All Rights Reserved.</p>
                         </div>
                     </div>
                 </div>

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

@@ -201,7 +201,7 @@ const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-s
                 <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>
+                            <p style={{ color: '#fff', margin: 0 }}>Copyright {new Date().getFullYear()} © by{" "} Metatroncube Software Solutions. All Rights Reserved.</p>
                         </div>
                     </div>
                 </div>
@@ -211,3 +211,7 @@ const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-s
 };
 
 export default Footer;
+<span>Copyright {new Date().getFullYear()} © by{" "}
+    Metatroncube Software Solutions.
+    All Rights Reserved.
+</span>