header updated

2026-03-06 20:54:20 +05:30 · 2026-03-06 20:54:20 +05:30 · 09a347b9c2
commit 09a347b9c2
parent a491ec6923
23 changed files with 141 additions and 80 deletions
--- a/public/assets/css/main.css
+++ b/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;
--- a/public/assets/images/about/1/element.webp
+++ b/public/assets/images/about/1/element.webp
--- a/public/assets/images/about/3/icon-1.webp
+++ b/public/assets/images/about/3/icon-1.webp
--- a/public/assets/images/about/3/icon-2.webp
+++ b/public/assets/images/about/3/icon-2.webp
--- a/public/assets/images/about/3/icon-3.webp
+++ b/public/assets/images/about/3/icon-3.webp
--- a/public/assets/images/home/1/banner-image/seo.webp
+++ b/public/assets/images/home/1/banner-image/seo.webp
--- a/src/app/accessibility-statement-for-metatroncube-software-solutions/page.tsx
+++ b/src/app/accessibility-statement-for-metatroncube-software-solutions/page.tsx
@ -1,25 +1,23 @@
-"use client";
-
-import React, { useEffect } from "react";
+import React from "react";
+import type { Metadata } from "next";
 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
--- a/src/app/blog/[slug]/BlogDetailsClient.tsx
+++ b/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>
--- a/src/app/careers/page.tsx
+++ b/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 ContactSection from "@/components/careers/ContactSection";
-import FaqVideoSection from "@/components/careers/FaqVideoSection";
+import AboutService from "@/components/services-digital-solutions/AboutService";
+import AboutThree from "@/components/home/AboutThree";
+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 />
-                <FaqVideoSection />
-                <ContactSection />
+                <AboutService />
+                <AboutThree />
+                <WhyChooseUs />
+                <ProjectsSection />
            </main>
            <Footer1 />
        </>
    );
-}
+}
--- a/src/app/globals.css
+++ b/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-transform: uppercase;
+  text-align: left;
+  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;
+  }
+
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -41,9 +41,9 @@ export default function MainPage() {
                <BrandSection />
                <CallAreaThree />
                <CounterAreaTwo />
+                <CtaSection />
                {/* <ServiceThreeSlider /> */}
                <HomeServiceOne/>
-                <CtaSection />
                <TestimonialsSection />
                <HomeContactOne />
                <BlogSection />
--- a/src/app/privacy-policy/page.tsx
+++ b/src/app/privacy-policy/page.tsx
@ -1,25 +1,23 @@
-"use client";
-
-import React, { useEffect } from "react";
+import React from "react";
+import type { Metadata } from "next";
 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
--- a/src/components/common/Offcanvas.tsx
+++ b/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">
--- a/src/components/home/AboutThree.tsx
+++ b/src/components/home/AboutThree.tsx
@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useEffect, useRef } from 'react';

 const AboutThree = () => {
--- a/src/components/home/WhyChooseTwo.tsx
+++ b/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>
-                                <h3 className="sec-title__title">An Agency That Gets Excited <br /> About Your Mission</h3>
+                                <h6 className="sec-title__tagline text-white">Watch Us Live</h6>
+                                <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>
--- a/src/components/home/home-1/BannerSection.tsx
+++ b/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.",
--- a/src/components/home/home-1/TestimonialsSection.tsx
+++ b/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">
--- a/src/components/home/home-2/About2Section.tsx
+++ b/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">
--- a/src/components/layout/Footer1.tsx
+++ b/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>
-                            © {new Date().getFullYear()} by{" "}
+                        <span>Copyright {new Date().getFullYear()} © by{" "}
                            Metatroncube Software Solutions.
                            All Rights Reserved.
                        </span>
--- a/src/components/layout/Header1.tsx
+++ b/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' }}>
--- a/src/components/layout/NavItemsMetatron.tsx
+++ b/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: 'MOBILE APPLICATION DEVELOPMENT', link: '/services-digital-solutions/mobile-application-development' },
-            { title: 'GRAPHIC DESIGNING', link: '/services-digital-solutions/graphic-designing-company' },
-            { 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: 'DIGITAL MARKETING', link: '/services-digital-solutions/digital-marketing-agency-in-canada' },
+             { title: 'Website Development', link: '/services-digital-solutions/web-development' },
+            { title: 'Mobile Application Development', link: '/services-digital-solutions/mobile-application-development' },
+            { title: 'Graphic Designing', link: '/services-digital-solutions/graphic-designing-company' },
+            { 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: 'Digital Marketing', link: '/services-digital-solutions/digital-marketing-agency-in-canada' }
        ],
    },
-    { title: 'PORTFOLIO', link: '/portfolio' },
-    { title: 'ABOUT', link: '/about-us' },
-    { title: 'CAREERS', link: '/careers' },
-    { title: 'BLOG', link: '/blog' },
-    { title: 'CONTACT', link: '/contact' },
-    { title: 'FAQ', link: '/faq' },
+    { title: 'Portfolio', link: '/portfolio' },
+    { title: 'About', link: '/about-us' },
+    { title: 'Career', link: '/careers' },
+    { title: 'Blog', link: '/blog' },
+    { title: 'Contact', link: '/contact' },
+    { title: 'Faq', link: '/faq' },
 ];

 const NavItemsMetatron = () => {
--- a/src/components/mobile-app-development-service/support/layout/Footer/Footer.tsx
+++ b/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>
--- a/src/components/web-development-service/support/layout/Footer/Footer.tsx
+++ b/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>