images, responsive updated

next.config.ts

@@ -1,13 +1,27 @@
-import type { NextConfig } from "next";
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "export",
+  reactStrictMode: false,
+  trailingSlash: true,
 
-const nextConfig: NextConfig = {
-  // use a static export to generate an `out` folder when running `next build && next export`
-  // this aligns with the request to "generate out folder" during build time
-  output: 'export',
-  // note: customize other options as needed
   images: {
-    unoptimized: true,
+    unoptimized: true, // ⬅ required for static export to work with next/image
+    domains: ['your-cdn.com', 'images.unsplash.com'], // allow external domains
+  },
+
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'no-store, no-cache, must-revalidate, proxy-revalidate',
+          },
+        ],
+      },
+    ];
   },
 };
 
-export default nextConfig;
+module.exports = nextConfig;

public/assets/css/main.css

@@ -657,6 +657,7 @@ only screen and (min-width: 768px) and (max-width: 991px) {
 
 .offcanvas__info.info-open {
   opacity: 1;
+  top: 50px;
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
@@ -777,7 +778,7 @@ only screen and (min-width: 768px) and (max-width: 991px) {
 }
 
 .offcanvas__contact-text a {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 500;
   color: #fff;
 }
@@ -918,9 +919,9 @@ only screen and (min-width: 768px) and (max-width: 991px) {
   }
 }
 
-.offcanvas__contact-icon {
+/* .offcanvas__contact-icon {
   margin-inline-end: 15px;
-}
+} */
 
 
 
@@ -2257,10 +2258,10 @@ only screen and (min-width: 576px) and (max-width: 767px) {
   width: 100%;
   -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
   animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
-  background: #fff;
-  -webkit-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
-  -moz-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
-  box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
+  /* background: #fff; */
+  /* -webkit-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
+  -moz-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08); */
+  /* box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08); */
 }
 
 .header-area.sticky .main-menu-2 ul li a {
@@ -2816,8 +2817,8 @@ ul.footer-contact-info-widget .icon {
 }
 
 .banner-area {
-  max-width: 720px;
-  padding-left: 70px;
+  max-width: 1075px;
+  /* padding-left: 70px; */
 }
 
 .banner-sub-title {
@@ -2828,7 +2829,7 @@ ul.footer-contact-info-widget .icon {
   line-height: 32px;
   letter-spacing: 9px;
   text-transform: uppercase;
-  margin-left: 56px;
+  margin-left: 5px;
 }
 
 .banner-sub-title:before {
@@ -2868,7 +2869,7 @@ p.banner-text {
   font-weight: 500;
   line-height: 32px;
   padding-bottom: 40px;
-  padding-right: 29px;
+  padding-right: 10px;
 }
 
 .banner-btn-area {

src/components/about/WhyChooseUs.tsx

@@ -20,14 +20,14 @@ const WhyChooseUs = () => {
                         </div>
                     </div>
                     <div className="col-lg-6">
-                        <div className="content-area pr-50">
+                        <div className="content-area">
                             <div className="sec-title-wrapper mb-20">
-                                <div className="sec-title mb-15">
+                                <div className="sec-title mb-15 mt-25">
                                     <div className="sec-title__shape"></div>
                                     <h6 className="sec-title__tagline text-white">Guided by Purpose, Driven by Passion</h6>
                                     <h3 className="sec-title__title text-white">Our Vision</h3>
                                 </div>
-                                <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
+                                {/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
                                 <p className="section-desc text-white">
                                     <b>Join us in shaping the future of technology and delivering meaningful solutions.</b>
                                 </p>

src/components/careers/ContactSection.tsx

@@ -130,7 +130,7 @@ const ContactSection = () => {
             <div className="container">
                 <div className="row align-items-center">
                     <div className="col-lg-8">
-                        <div className="contact-one__info wow fadeInLeft" data-wow-delay="100ms" style={{ visibility: "hidden" }}>
+                        {/* <div className="contact-one__info wow fadeInLeft" data-wow-delay="100ms" style={{ visibility: "hidden" }}>
                             <div className="contact-one__info__icon">
                                 <span className="fa-solid fa-headset"></span>
                             </div>
@@ -141,7 +141,7 @@ const ContactSection = () => {
                                 <a href="tel:+16476797651">+1-647-679-7651</a>
                             </p>
 
-                        </div>
+                        </div> */}
                     </div>
                     <div className="col-lg-4">
                         <div className="contact-one__image wow fadeInRight" data-wow-delay="200ms" style={{ visibility: "hidden" }}>

src/components/common/Offcanvas.tsx

@@ -1,16 +1,31 @@
 "use client";
-import React, { useEffect } from "react";
+import React, { useState } from "react";
+import Link from "next/link";
+
+const mobileNavItems = [
+    { title: "Home", link: "/" },
+    {
+        title: "Service",
+        link: "/services-digital-solutions",
+        children: [
+            { 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" },
+];
 
 const Offcanvas = () => {
-    useEffect(() => {
-        if (typeof window !== "undefined" && (window as any).jQuery && (window as any).jQuery.fn.meanmenu) {
-            (window as any).jQuery('#mobile-menu').meanmenu({
-                meanMenuContainer: '.mobile-menu',
-                meanScreenWidth: "1199",
-                meanExpand: ['<i class="fa-solid fa-plus"></i>'],
-            });
-        }
-    }, []);
+    const [openIndex, setOpenIndex] = useState<number | null>(null);
 
     const closeOffcanvas = () => {
         document.querySelector(".offcanvas__info")?.classList.remove("info-open");
@@ -23,27 +38,58 @@ const Offcanvas = () => {
                 <div className="offcanvas__info">
                     <div className="offcanvas__wrapper">
                         <div className="offcanvas__content">
-                            <div className="offcanvas__top mb-40 d-flex justify-content-between align-items-center">
-                                <div className="offcanvas__logo">
-                                    <a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="Header Logo" /></a>
-                                </div>
-                                <div className="offcanvas__close">
-                                    <button onClick={closeOffcanvas}><i className="fa-solid fa-xmark"></i></button>
-                                </div>
-                            </div>
+                            <div className="offcanvas__top-spacer pt-40"></div>
+
                             <div className="offcanvas__search mb-25">
-                                <p className="text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum maxime accusamus corrupti natus obcaecati vitae dignissimos, id officiis similique eos.</p>
+                                <p className="text-white">
+                                    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>
-                            <div className="mobile-menu fix mb-40"></div>
+
+                            {/* ── Static React Mobile Nav (replaces jQuery meanmenu) ── */}
+                            <nav className="offcanvas-nav mb-40">
+                                <ul>
+                                    {mobileNavItems.map((item, idx) => (
+                                        <li key={idx}>
+                                            <div className="offcanvas-nav__row">
+                                                <Link href={item.link} onClick={closeOffcanvas}>
+                                                    {item.title}
+                                                </Link>
+                                                {item.children && (
+                                                    <button
+                                                        className="offcanvas-nav__toggle"
+                                                        onClick={() => setOpenIndex(openIndex === idx ? null : idx)}
+                                                        aria-label="toggle submenu"
+                                                    >
+                                                        <i className={`fa-solid fa-${openIndex === idx ? "minus" : "plus"}`}></i>
+                                                    </button>
+                                                )}
+                                            </div>
+                                            {item.children && openIndex === idx && (
+                                                <ul className="offcanvas-submenu">
+                                                    {item.children.map((child, cidx) => (
+                                                        <li key={cidx}>
+                                                            <Link href={child.link} onClick={closeOffcanvas}>
+                                                                {child.title}
+                                                            </Link>
+                                                        </li>
+                                                    ))}
+                                                </ul>
+                                            )}
+                                        </li>
+                                    ))}
+                                </ul>
+                            </nav>
+
                             <div className="offcanvas__contact mt-30 mb-20">
                                 <h4>Contact Info</h4>
                                 <ul>
                                     <li className="d-flex align-items-center">
-                                        <div className="offcanvas__contact-icon mr-15">
+                                        <div className="offcanvas__contact-icon">
                                             <i className="fa-solid fa-location-dot"></i>
                                         </div>
                                         <div className="offcanvas__contact-text">
-                                            <a target="_blank" href="#">31 Park End St, Brockhampton, UK</a>
+                                            <a target="_blank" href="#">Waterloo, Ontario Canada</a>
                                         </div>
                                     </li>
                                     <li className="d-flex align-items-center">
@@ -51,7 +97,7 @@ const Offcanvas = () => {
                                             <i className="fa-solid fa-phone"></i>
                                         </div>
                                         <div className="offcanvas__contact-text">
-                                            <a href="tel:+00112233665">+00112233665</a>
+                                            <a href="tel:+1-647-679-7651">+1-647-679-7651</a>
                                         </div>
                                     </li>
                                     <li className="d-flex align-items-center">
@@ -59,17 +105,39 @@ const Offcanvas = () => {
                                             <i className="fa-solid fa-envelope"></i>
                                         </div>
                                         <div className="offcanvas__contact-text">
-                                            <a href="mailto:support@example.com">support@example.com</a>
+                                            <a href="mailto:info@metatroncubesolutions.com">info@metatroncubesolutions.com</a>
                                         </div>
                                     </li>
                                 </ul>
                             </div>
+
                             <div className="offcanvas__social">
                                 <ul>
-                                    <li><a href="#"><i className="fab fa-facebook-f"></i></a></li>
-                                    <li><a href="#"><i className="fab fa-twitter"></i></a></li>
-                                    <li><a href="#"><i className="fab fa-youtube"></i></a></li>
-                                    <li><a href="#"><i className="fab fa-linkedin"></i></a></li>
+                                    <li>
+                                        <a href="https://www.facebook.com/metatroncubecanada" target="_blank" rel="noopener noreferrer">
+                                            <i className="fab fa-facebook-f"></i>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer">
+                                            <i className="fab fa-twitter"></i>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="https://www.youtube.com/@metatron_digitalagency" target="_blank" rel="noopener noreferrer">
+                                            <i className="fab fa-youtube"></i>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <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>
+                                    </li>
+                                    <li>
+                                        <a href="https://www.instagram.com/metatron_digitalagency" target="_blank" rel="noopener noreferrer">
+                                            <i className="fab fa-instagram"></i>
+                                        </a>
+                                    </li>
                                 </ul>
                             </div>
                         </div>

src/components/common/Preloader.tsx

@@ -35,8 +35,8 @@ const Preloader = () => {
                         src="/logo-1.webp"
                         alt="Metatron Logo"
                         style={{
-                            width: '150px',
-                            height: 'auto',
+                            width: '80px',
+                            height: '80px',
                             animation: 'rotate-smooth 3s linear infinite'
                         }}
                     />

src/components/home/AboutThree.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 
 const AboutThree = () => {
     const [count, setCount] = useState(0);
-    const countTarget = 26;
+    const countTarget = 10;
     const [hasCounted, setHasCounted] = useState(false);
     const counterRef = useRef<HTMLDivElement>(null);
 

src/components/home/CallAreaThree.tsx

@@ -6,7 +6,7 @@ const CallAreaThree: React.FC = () => {
         <section className="call-area-three parallax-section section-space-top">
             <div
                 className="call-area-three__bg parallax-bg"
-                style={{ backgroundImage: 'url(https://bracketweb.com/pelocishtml/assets/images/backgrounds/counter-area-two-bg.png)' }}
+                style={{ backgroundImage: 'url(/assets/images/home/5/bg.webp)' }}
             ></div>
             <div className="container">
                 <div className="call-area-three__content">

src/components/home/CounsellingSolutions.tsx

@@ -10,21 +10,21 @@ const CounsellingSolutions: React.FC = () => {
                     <div className="col-lg-6">
                         <div className="counselling-solutions__image">
                             <img
-                                src="https://bracketweb.com/pelocishtml/assets/images/resources/counselling-solutions-1-1.png"
+                                src="/assets/images/home/4/back.webp"
                                 alt="pelocis"
                                 className="counselling-solutions__image__one"
                             />
                             <img
-                                src="https://bracketweb.com/pelocishtml/assets/images/resources/counselling-solutions-1-2.png"
+                                src="/assets/images/home/4/front.webp"
                                 alt="pelocis"
                                 className="counselling-solutions__image__two"
                             />
-                            <div className="counselling-solutions__image__watch-btn">
-                                {/* <Link href="https://www.youtube.com/watch?v=h9MbznbxlLc" className="video-popup"> */}
+                            {/* <div className="counselling-solutions__image__watch-btn">
+                                <Link href="https://www.youtube.com/watch?v=h9MbznbxlLc" className="video-popup">
                                 <i className="fa-solid fa-award"></i>
-                                {/* </Link> */}
+                                </Link>
                                 <span>Metatroncube Solutions</span>
-                            </div>
+                            </div> */}
                         </div>
                     </div>
                     <div className="col-lg-6">

src/components/home/CounterAreaTwo.tsx

@@ -49,25 +49,25 @@ const Counter: React.FC<CounterProps> = ({ end, duration = 2000 }) => {
 
 const counterItems = [
     {
-        icon: "/assets/imgs/icon/icon-2.png",
+        icon: "/assets/images/home/5/projects.webp",
         count: 100,
         suffix: "+",
         text: "Projects Completed"
     },
     {
-        icon: "/assets/imgs/icon/icon-2.png",
+        icon: "/assets/images/home/5/active.webp",
         count: 50,
         suffix: "+",
         text: "Active Clients"
     },
     {
-        icon: "/assets/imgs/icon/icon-3.png",
+        icon: "/assets/images/home/5/expert.webp",
         count: 20,
         suffix: "+",
         text: "Expert People"
     },
     {
-        icon: "/assets/imgs/icon/icon-4.png",
+        icon: "/assets/images/home/5/happy.webp",
         count: 100,
         suffix: "+",
         text: "Happy Clients"

src/components/home/FaqFive.tsx

@@ -44,7 +44,7 @@ const FaqFive = () => {
                                     alt="pelocis"
                                 />
                                 <div className="faq-four__image2__icon">
-                                    <i className="icon-faq"></i>
+                                    <i className="icon-faq">faq</i>
                                 </div>
                             </div>
                         </div>

src/components/home/FaqFour.tsx

@@ -84,7 +84,7 @@ const FaqFour = () => {
                                     alt="pelocis"
                                 />
                                 <div className="faq-four__image__icon">
-                                    <i className="icon-faq"></i>
+                                    <i className="icon-faq">faq</i>
                                 </div>
                             </div>
                         </div>

src/components/home/HistoryTwo.tsx

@@ -15,7 +15,7 @@ const HistoryTwo = () => {
                     </div>
                 </div>
                 <div className="row history-two__wrapper">
-                    <div className="col-lg-6">
+                    <div className="col-md-6">
                         <div className="history-two__border">
                             <div className="history-two__content">
                                 <div className="history-two__content__count"></div>
@@ -27,19 +27,19 @@ const HistoryTwo = () => {
                             </div>
                         </div>
                     </div>
-                    <div className="col-lg-6">
+                    <div className="col-md-6 d-none d-md-block">
                         <div className="history-two__images">
                             <span className="history-two__images__date"></span>
                             <img src="/assets/images/about/4/1.webp" alt="pelocis" />
                         </div>
                     </div>
-                    <div className="col-lg-6">
+                    <div className="col-md-6 d-none d-md-block">
                         <div className="history-two__images history-two__images--right">
                             <img src="/assets/images/about/4/2.webp" alt="pelocis" />
                             {/* <span className="history-two__images__date">2021</span> */}
                         </div>
                     </div>
-                    <div className="col-lg-6">
+                    <div className="col-md-6">
                         <div className="history-two__border history-two__border--left ">
                             <div className="history-two__content history-two__content--left">
                                 <div className="history-two__content__count"></div>
@@ -52,7 +52,7 @@ const HistoryTwo = () => {
                             </div>
                         </div>
                     </div>
-                    <div className="col-lg-6">
+                    <div className="col-md-6">
                         <div className="history-two__border">
                             <div className="history-two__content">
                                 <div className="history-two__content__count"></div>
@@ -64,7 +64,7 @@ const HistoryTwo = () => {
                             </div>
                         </div>
                     </div>
-                    <div className="col-lg-6">
+                    <div className="col-md-6 d-none d-md-block">
                         <div className="history-two__images">
                             <span className="history-two__images__date"></span>
                             <img src="/assets/images/about/4/3.webp" alt="pelocis" />

src/components/home/HomeContactOne.tsx

@@ -130,14 +130,14 @@ const HomeContactOne = () => {
                                 </ul>
                             </div>
                             <div className="home-contact__card__shape-one">
-                                <img
+                                {/* <img
                                     src="https://bracketweb.com/pelocishtml/assets/images/resources/home-contact-logo.png"
                                     alt="pelocis"
                                     className="home-contact__card__shape-three"
-                                />
+                                /> */}
                             </div>
                             <img
-                                src="https://bracketweb.com/pelocishtml/assets/images/resources/home-contact-img-1.png"
+                                src="/assets/images/home/7/contact.webp"
                                 alt="pelocis"
                                 className="home-contact__card__shape-two"
                             />
@@ -157,11 +157,11 @@ const HomeContactOne = () => {
                                             <h6 className="sec-title__tagline">OUR CONTACT US</h6>
                                             <h3 className="sec-title__title">If Your Problem Contact Us For <br /> Immediately Center</h3>
                                         </div>
-                                        <img
+                                        {/* <img
                                             src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-1.png"
                                             alt="pelocis"
                                             className="appointment__form__title__shape"
-                                        />
+                                        /> */}
                                     </div>
                                 </div>
 

src/components/home/ProjectsSection.tsx

@@ -69,7 +69,7 @@ const ProjectsSection = () => {
 
                 <div className="post-filter projects-one__filter__list mb-60 text-center">
                     {/* Row 1: All Items */}
-                    <div className="d-flex justify-content-center mb-4">
+                    <div className="d-flex justify-content-center mb-4 pr-10">
                         <button
                             className={`list-unstyled-item ${activeFilter === "all" ? "active" : ""}`}
                             onClick={() => setActiveFilter("all")}

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

@@ -12,20 +12,20 @@ const AboutSection = () => {
                 <div className="row g-4">
                     <div className="col-xxl-6 col-xl-6 col-lg-6">
                         <div className="about-us-image-area p-relative wow fadeInRight" data-wow-delay=".5s">
-                            <div className="border-shape" style={{ backgroundImage: "url(/assets/images/home/2/bottom-left-element.webp)" }}></div>
+                            <div className="border-shape" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-6.png)" }}></div>
                             <figure className="image-1">
                                 <img src="/assets/images/home/2/left-img.webp" alt="" />
                             </figure>
-                            <div className="image-2-area">
+                            {/* <div className="image-2-area">
                                 <div className="image-2 p-relative">
-                                    <img src="/assets/images/home/2/small-element.webp" alt="" />
-                                    {/* <div className="play-btn">
+                                    <img src="/assets/img/about/about-img7.png" alt="" />
+                                    <div className="play-btn">
                                         <div className="video_player_btn">
                                             <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
                                         </div>
-                                    </div> */}
+                                    </div>
                                 </div>
-                            </div>
+                            </div> */}
                             <div className="working-area float-bob-y">
                                 <div className="inner p-relative">
                                     <div className="icon-box">
@@ -45,7 +45,7 @@ const AboutSection = () => {
                                     <h6 className="sec-title__tagline">Digital Excellence</h6>
                                     <h3 className="sec-title__title">Let's Work Together.<br /></h3>
                                 </div>
-                                <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
+                                {/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
                             </div>
                             <p className="mb-35 wow fadeInLeft" data-wow-delay=".5s">Partner with Metatroncube Software Solutions and unlock a world of digital possibilities in web & app development, SEO, digital marketing, and graphic design services. Our commitment extends beyond mere product delivery; we focus on enhancing your market presence and driving business success with comprehensive digital strategies. Experience the unique Metatroncube advantage in every aspect of digital transformation.</p>
                             <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".8s">

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

@@ -56,9 +56,30 @@ const BannerSection = () => {
                                 </div>
                             </div>
                             <div className="banner-shape-area">
-                                {[1, 2, 3, 4, 5].map((s) => (
-                                    <div key={s} className={`shape-${s}`} style={{ backgroundImage: `url(/assets/imgs/shapes/shape-${s}.png)` }}></div>
-                                ))}
+                                <div
+                                    className="shape-1"
+                                    style={{ backgroundImage: "url(/assets/images/home/1/white-blue/white.webp)" }}
+                                ></div>
+
+                                <div
+                                    className="shape-2"
+                                    style={{ backgroundImage: "url(/assets/images/home/1/white-blue/blue.webp)" }}
+                                ></div>
+
+                                <div
+                                    className="shape-3"
+                                    style={{ backgroundImage: "url(/assets/images/home/1/dark-light/light.webp)" }}
+                                ></div>
+
+                                <div
+                                    className="shape-4"
+                                    style={{ backgroundImage: "url(/assets/images/home/1/dark-light/dark.webp)" }}
+                                ></div>
+
+                                <div
+                                    className="shape-5"
+                                    style={{ backgroundImage: "url(/assets/images/home/1/right/right.webp)" }}
+                                ></div>
                             </div>
                         </div>
                     ))}

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

@@ -46,9 +46,9 @@ const BrandSection = () => {
 
     return (
         <section className="brand-section section-space-top section-space-bottom p-relative">
-            <div className="brand-section__shape-one">
+            {/* <div className="brand-section__shape-one">
                 <img src="/assets/images/about/5/element.webp" alt="shape" />
-            </div>
+            </div> */}
             <div className="container">
                 <SectionTitle
                     tagline="OUR PARTNERS"

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

@@ -2,7 +2,7 @@ import React from "react";
 
 const ChooseSection = () => (
     <section className="choose-section bg-color-1 section-space-top p-relative section-space-bottom">
-        <div className="bg-image" style={{ backgroundImage: "url(/assets/imgs/bg/choose-bg.png)" }}></div>
+        <div className="bg-image" style={{ backgroundImage: "url(/assets/images/home/3/right-bg.webp)" }}></div>
         <div className="shape-image" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-15.png)" }}></div>
         <div className="small-container">
             <div className="row g-4">
@@ -13,7 +13,7 @@ const ChooseSection = () => (
                             <h6 className="sec-title__tagline">WELCOME TO METATRONCUBE</h6>
                             <h3 className="sec-title__title text-white">Driving Client Success with Cutting-Edge Digital Solutions in Web & App Development, SEO, and Digital Marketing</h3>
                         </div>
-                        <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
+                        {/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
                     </div>
                     <div className="choose-content text-white wow fadeInRight" data-wow-delay=".7s">
                         <p className="text-white">
@@ -25,7 +25,7 @@ const ChooseSection = () => (
                     </div>
                 </div>
                 <div className="col-xxl-6 col-xl-6 col-lg-6 wow fadeInLeft" data-wow-delay="1.2s">
-                    <figure className="image m-img"><img src="/assets/imgs/resources/choose-1.png" alt="" /></figure>
+                    <figure className="image m-img"><img src="/assets/images/home/3/right-img.webp" alt="" /></figure>
                 </div>
             </div>
         </div>

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

@@ -5,13 +5,13 @@ const CtaSection = () => (
         <div className="small-container">
             <div className="row g-0 box-shadow-1 fix">
                 <div className="col-xxl-6 col-lg-6 bg-white">
-                    <figure className="image w-img"><img src="/assets/imgs/resources/cta-1.jpg" alt="" /></figure>
+                    <figure className="image w-img"><img src="/assets/images/home/4/lets-discuss.webp" alt="" /></figure>
                 </div>
                 <div className="col-xxl-6 col-lg-6">
                     <div className="content p-relative">
                         <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-12.png)" }}></div>
                         <div className="icon-box"><i className="fa-solid fa-phone-volume"></i></div>
-                        <h3>Let’s Discuss How to Make your Business Better.</h3>
+                        <h3 style={{ fontSize: "32px" }}>Let’s Discuss How to Make your Business Better.</h3>
                         {/* <h5><a href="tel:2085550112">+208-555-0112</a></h5> */}
                     </div>
                 </div>

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

@@ -158,14 +158,24 @@ const FeaturesSection = () => {
                                 <div className="fo-card">
                                     {/* Top dark section */}
                                     <div className="fo-card-top">
+                                        {/* Mobile only icon */}
+                                        <div className="fo-mobile-icon d-md-none mb-3">
+                                            <Image
+                                                src={feature.icon}
+                                                alt={feature.title}
+                                                width={40}
+                                                height={40}
+                                                style={{ objectFit: "contain" }}
+                                            />
+                                        </div>
                                         <h3 className="fo-card-title">{feature.title}</h3>
-                                        <Link href="#" className="fo-card-btn">
+                                        <Link href="#" className="fo-card-btn d-none d-md-flex">
                                             <ArrowIcon />
                                         </Link>
                                         <p className="fo-card-desc">{feature.desc}</p>
                                     </div>
                                     {/* Bottom white section with image + floating icon */}
-                                    <div className="fo-card-bottom">
+                                    <div className="fo-card-bottom d-none d-md-block">
                                         <div className="fo-card-image">
                                             <Image
                                                 src={feature.image}

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

@@ -9,10 +9,10 @@ const ServiceThreeSlider = () => {
     const services: ServiceType[] = ourServices;
 
     return (
-        <section className="service-slider-section service-three section-space dark-bg p-relative" style={{ background: "#07172b" }}>
-            <div className="shape-1 float-bob-y" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-10.png)" }}></div>
-            <div className="shape-2 float-bob-y" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-9.png)" }}></div>
-            <div className="shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-11.png)" }}></div>
+        <section className="service-slider-section service-three section-space dark-bg p-relative" style={{ background: "#1a1f2b" }}>
+            <div className="shape-1 float-bob-y" style={{ backgroundImage: "url(/assets/images/home/6/element-1.webp)" }}></div>
+            <div className="shape-2 float-bob-y" style={{ backgroundImage: "url(/assets/images/home/6/element-2.webp)" }}></div>
+            {/* <div className="shape-3" style={{ backgroundImage: "url(/assets/images/home/6/bottom-element.webp)" }}></div> */}
 
             <div className="small-container">
                 <div className="row align-items-end">
@@ -24,7 +24,7 @@ const ServiceThreeSlider = () => {
                                 <h3 className="sec-title__title text-white">We Shape the Perfect Solution.</h3>
                                 <p className="text-white mt-4">At Metatroncube, we sculpt digital excellence, meticulously blending innovation with user-centric design to manifest your business vision. Partner with us to experience a seamless fusion of web & app development, SEO, digital marketing, and graphic design services. Our strategic solutions and unparalleled execution pave the way for your digital voyage. We are your navigators in the digital realm, steering your project from conception to completion with precision and creativity.</p>
                             </div>
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
+                            {/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
                         </div>
                     </div>
                     {/* <div className="col-xxl-2 col-xl-6">
@@ -44,7 +44,7 @@ const ServiceThreeSlider = () => {
                                 <div className="service-three__item text-center">
                                     <div className="service-three__item__content">
                                         <div className="service-three__item__icon">
-                                            <span className={service.icon}></span>
+                                            <img src={service.icon} alt="icon" width="55" height="40" />
                                         </div>
                                         <h3 className="service-three__item__title">
                                             <Link href={`/services-digital-solutions/${service.slug}`}>{service.title}</Link>

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

@@ -73,21 +73,21 @@ const TestimonialsSection = () => {
                     <div className="col-xxl-4 col-xl-4 col-lg-12">
                         <div className="testimonials-video-area p-relative">
                             <figure className="image w-img"><img src="/assets/images/about/6/left.webp" alt="" /></figure>
-                            <div className="play-btn">
+                            {/* <div className="play-btn">
                                 <div className="video_player_btn">
                                     <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
                                 </div>
-                            </div>
+                            </div> */}
                         </div>
                     </div>
                     <div className="col-xxl-8 col-xl-8 col-lg-12">
                         <div className="testimonials-two-area section-space-medium p-relative parallax-bg" style={{
-                            backgroundImage: 'url(/assets/images/about/6/right.webp)',
+                            backgroundImage: 'url(/assets/images/home/7/right.webp)',
                             backgroundSize: 'cover',
                             backgroundPosition: 'center'
                         }}>
-                            <div className="section-overlay" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'rgba(26, 31, 43, 0.82)', zIndex: 0 }}></div>
-                            <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-36.png)", zIndex: 1 }}></div>
+                            <div className="section-overlay" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 0 }}></div>
+                            {/* <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-36.png)", zIndex: 1 }}></div> */}
 
                             <div className="sec-title-wrapper" style={{ position: 'relative', zIndex: 2 }}>
                                 <div className="sec-title">

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

@@ -37,8 +37,8 @@ const About2Section = () => (
                             {/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
                         </div>
                         <p className="mb-35">Metatroncube Software Solutions was born from a passion for technology and a vision to revolutionize digital interactions. Based in the heart of Waterloo's tech hub, we have been pioneering custom software solutions since 2019.</p>
-                        <div className="about-features-list mb-45">
-                            <div className="about-feature-item-3 mb-25 wow fadeInRight" data-wow-delay=".6s">
+                        <div className="about-features-list">
+                            <div className="about-feature-item-3 wow fadeInRight" data-wow-delay=".6s">
                                 <div className="icon">
                                     <i className="fa-solid fa-microchip"></i>
                                 </div>

src/components/layout/Footer1.tsx

@@ -14,11 +14,35 @@ const Footer1 = () => (
                                 </figure>
                                 <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>
+                                    <span>
+                                        <a href="https://www.facebook.com/metatroncubecanada" target="_blank" rel="noopener noreferrer">
+                                            <i className="fa-brands fa-facebook-f"></i>
+                                        </a>
+                                    </span>
+
+                                    <span>
+                                        <a href="https://www.instagram.com/metatron_digitalagency" target="_blank" rel="noopener noreferrer">
+                                            <i className="fa-brands fa-instagram"></i>
+                                        </a>
+                                    </span>
+
+                                    <span>
+                                        <a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer">
+                                            <i className="fa-brands fa-twitter"></i>
+                                        </a>
+                                    </span>
+
+                                    <span>
+                                        <a href="https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all" target="_blank" rel="noopener noreferrer">
+                                            <i className="fa-brands fa-linkedin-in"></i>
+                                        </a>
+                                    </span>
+
+                                    <span>
+                                        <a href="https://www.youtube.com/@metatron_digitalagency" target="_blank" rel="noopener noreferrer">
+                                            <i className="fa-brands fa-youtube"></i>
+                                        </a>
+                                    </span>
                                 </div>
                             </div>
                         </div>

src/components/layout/Header1.tsx

@@ -1,96 +1,64 @@
 "use client";
-
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Link from "next/link";
-import NavMenu from "./NavMenu";
 import useSticky from "@/hooks/useSticky";
+import NavItemsMetatron from "./NavItemsMetatron";
 
 const Header1 = () => {
     const sticky = useSticky();
+    const [isOpen, setIsOpen] = useState(false);
 
-    const openOffcanvas = () => {
-        document.querySelector(".offcanvas__info")?.classList.add("info-open");
-        document.querySelector(".offcanvas__overlay")?.classList.add("overlay-open");
+    const toggleOffcanvas = () => {
+        const nextState = !isOpen;
+        setIsOpen(nextState);
+        if (nextState) {
+            document.querySelector(".offcanvas__info")?.classList.add("info-open");
+            document.querySelector(".offcanvas__overlay")?.classList.add("overlay-open");
+        } else {
+            document.querySelector(".offcanvas__info")?.classList.remove("info-open");
+            document.querySelector(".offcanvas__overlay")?.classList.remove("overlay-open");
+        }
     };
 
-    const openSearch = () => {
-        document.querySelector(".df-search-area")?.classList.add("opened");
-        document.querySelector(".body-overlay")?.classList.add("opened");
-    };
+    // Listen for outside clicks (e.g. clicking the overlay)
+    useEffect(() => {
+        const handleOutsideClose = () => {
+            setIsOpen(false);
+        };
+        const overlay = document.querySelector(".offcanvas__overlay");
+        overlay?.addEventListener("click", handleOutsideClose);
+        return () => overlay?.removeEventListener("click", handleOutsideClose);
+    }, []);
 
     return (
-        <header>
-            <div className="container-fluid bg-color-1">
-                <div className="header-top">
-                    <div className="header-top-contact-info">
-                        <span className="p-relative d-inline-flex align-items-center me-4" style={{ gap: '10px', paddingLeft: 0 }}>
-                            <i className="fa-solid fa-envelope" style={{ position: 'static', transform: 'none' }}></i>
-                            <a href="mailto:info@Metatron.com">info@Metatron.com</a>
-                        </span>
-                        <span className="p-relative d-inline-flex align-items-center" style={{ gap: '10px', paddingLeft: 0 }}>
-                            <i className="fa-solid fa-clock" style={{ position: 'static', transform: 'none' }}></i>
-                            Hours: Mon - Sat: 10.00 AM - 4.00 PM
-                        </span>
-                    </div>
-                    <div className="header-top-socials">
-                        <span><a href="#"><i className="fa-brands fa-facebook-f"></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>
-                    </div>
-                </div>
-            </div>
-            <div id="header-sticky" className={`header-area ${sticky ? 'sticky' : ''}`}>
-                <div className="large-container">
-                    <div className="mega-menu-wrapper">
-                        <div className="header-main">
-                            <div className="header-left">
-                                <div className="header-logo">
-                                    <Link href="/"><img src="/assets/img/home/footer/footer-logo-black.webp" alt="header logo" /></Link>
-                                </div>
+        <header className="header-metatron-style">
+            <div id="header-sticky" className={`header-area-metatron ${sticky ? "sticky" : ""}`}>
+                <div className="container">
+                    <div className="header-row-wrapper align-items-center">
+                        <div className="header-logo-metatron">
+                            <Link href="/">
+                                <img src="/assets/img-app/logo.webp" alt="header logo" />
+                            </Link>
+                        </div>
+                        <div className="header-menu-metatron d-none d-lg-block">
+                            <nav id="mobile-menu" className="main-menu-metatron">
+                                <NavItemsMetatron />
+                            </nav>
+                        </div>
+                        <div className="header-action-metatron d-flex align-items-center">
+                            <div className="header-btn-metatron d-none d-lg-block">
+                                <Link className="metatron-primary-btn" href="/contact">
+                                    Get Started Now <i className="fa-solid fa-angle-right ms-2"></i>
+                                </Link>
                             </div>
-                            <div className="header-right d-flex justify-content-end">
-                                <div className="mean__menu-wrapper d-none d-lg-block">
-                                    <div className="main-menu">
-                                        <nav id="mobile-menu"><NavMenu /></nav>
-                                    </div>
-                                </div>
-                                {/* <div
-                                    className="search-toggle-open header-search my-auto"
-                                    onClick={openSearch}
-                                >
-                                    <div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
-                                </div>
-                                <div className="header-shopping-cart my-auto">
-                                    <div className="cart-icon"><a href="#"><i className="fa-solid fa-cart-shopping"></i></a></div>
-                                </div> */}
-                                {/* <div className="header-action d-none d-xl-inline-flex gap-5">
-                                    <div className="header-link">
-                                        <Link className="primary-btn-1 btn-hover" href="/contact">
-                                            GET A QUOTE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
-                                            <span className="btn-hover-span"></span>
-                                        </Link>
-                                    </div>
-                                </div> */}
-                                <div className="header-action">
-                                    <div className="header-link-1">
-                                        <div className="icon"><i className="fa-solid fa-phone-volume"></i></div>
-                                        <div className="content">
-                                            <span>Call Us Now</span>
-                                            <h6><a href="tel:2085550112">+208-555-0112</a></h6>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div
-                                    className="header__hamburger d-lg-none my-auto"
-                                    onClick={openOffcanvas}
-                                >
-                                    <div className="sidebar__toggle">
-                                        <a className="bar-icon" href="javascript:void(0)">
-                                            <i className="fa-solid fa-bars"></i>
-                                        </a>
-                                    </div>
-                                </div>
+                            <div className="header-hamburger-metatron d-lg-none" onClick={toggleOffcanvas} style={{ zIndex: 1100 }}>
+                                <button className="hamburger-btn">
+                                    {isOpen ? (
+                                        <i className="fa-solid fa-xmark"></i>
+                                    ) : (
+                                        <i className="fa-solid fa-bars-staggered"></i>
+                                    )}
+                                </button>
                             </div>
                         </div>
                     </div>

src/components/layout/HeaderMetatron.tsx

@@ -0,0 +1,58 @@
+"use client";
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import useSticky from '@/hooks/useSticky';
+import NavItemsMetatron from './NavItemsMetatron';
+
+const HeaderMetatron = () => {
+    const sticky = useSticky();
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+    const toggleMobileMenu = () => {
+        setIsMobileMenuOpen(!isMobileMenuOpen);
+    };
+
+    return (
+        <header className="metatron-header-wrap">
+            <div id="metatron-header-sticky" className={`metatron-header-area ${sticky ? "header-sticky" : ""}`}>
+                <div className="container">
+                    <div className="row align-items-center">
+                        <div className="col-lg-3 col-md-6 col-6">
+                            <div className="metatron-logo">
+                                <Link href="/">
+                                    <img src="/assets/img/home/footer/footer-logo-black.webp" alt="MetatronCube" style={{ width: '100%', maxWidth: '220px', height: 'auto' }} />
+                                </Link>
+                            </div>
+                        </div>
+                        <div className="col-lg-6 d-none d-lg-block">
+                            <div className="metatron-main-menu text-center">
+                                <nav className="metatron-nav">
+                                    <NavItemsMetatron />
+                                </nav>
+                            </div>
+                        </div>
+                        <div className="col-lg-3 col-md-6 col-6">
+                            <div className="metatron-header-right d-flex align-items-center justify-content-end">
+                                <div className="metatron-hero-btn d-none d-lg-block text-end">
+                                    <Link href="/contact" className="metatron-btn-main">
+                                        Get Started Now <i className="fa-solid fa-angle-right"></i>
+                                    </Link>
+                                </div>
+                                <div className="metatron-header-action-item d-block d-lg-none">
+                                    <button type="button" className="metatron-offcanvas-toggle" onClick={() => {
+                                        document.querySelector(".offcanvas__info")?.classList.add("info-open");
+                                        document.querySelector(".offcanvas__overlay")?.classList.add("overlay-open");
+                                    }}>
+                                        <i className="fa-solid fa-bars-staggered"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </header>
+    );
+};
+
+export default HeaderMetatron;

src/components/layout/NavItemsMetatron.tsx

@@ -0,0 +1,49 @@
+import Link from 'next/link';
+import React from 'react';
+
+const navItems = [
+    { title: 'HOME', link: '/' },
+    {
+        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: 'PORTFOLIO', link: '/portfolio' },
+    { title: 'ABOUT', link: '/about-us' },
+    { title: 'CAREERS', link: '/careers' },
+    { title: 'BLOG', link: '/blog' },
+    { title: 'CONTACT', link: '/contact' },
+    { title: 'FAQ', link: '/faq' },
+];
+
+const NavItemsMetatron = () => {
+    return (
+        <ul>
+            {navItems.map((item, index) => (
+                <li key={index} className={item.submenu ? "has-dropdown" : ""}>
+                    <Link href={item.link}>
+                        {item.title} {item.submenu && <i className="fa-solid fa-angle-down ms-1"></i>}
+                    </Link>
+                    {item.submenu && (
+                        <ul className="submenu">
+                            {item.submenu.map((sub, i) => (
+                                <li key={i}>
+                                    <Link href={sub.link}>{sub.title}</Link>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </li>
+            ))}
+        </ul>
+    );
+};
+
+export default NavItemsMetatron;

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

@@ -5573,7 +5573,7 @@ Location:
 /*============= MOBILE MENU CSS AREA ===============*/
 .vl-header-action-item {
   float: right;
-  border: 1px solid var(--ztc-text-text-1);
+  /* border: 1px solid var(--ztc-text-text-1); */
   padding: 6px;
   border-radius: 4px;
   color: var(--ztc-text-text-1);

src/components/services-digital-solutions/AboutService.tsx

@@ -38,7 +38,7 @@ const AboutService = () => {
                                     <h6 className="sec-title__tagline">Welcome to Your Next Big Opportunity</h6>
                                     <h3 className="sec-title__title">Why Join Metatroncube Software Solutions?</h3>
                                 </div>
-                                <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
+                                {/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
                                 <p className="section-desc mb-2">
                                     <b>Be part of a dynamic team where innovation, growth, and impact come together.</b>
                                 </p>

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

@@ -214,7 +214,7 @@ h2,
   font-size: 24px;
   font-weight: 700;
   color: #1e293b;
-  margin-top: 25px;
+  /* margin-top: 25px; */
   margin-bottom: 12px;
 }
 
@@ -5842,7 +5842,7 @@ Location:
 /*============= MOBILE MENU CSS AREA ===============*/
 .vl-header-action-item {
   float: right;
-  border: 1px solid var(--ztc-text-text-1);
+  /* border: 1px solid var(--ztc-text-text-1); */
   padding: 6px;
   border-radius: 4px;
   color: var(--ztc-text-text-1);

src/utils/data.ts

@@ -744,7 +744,7 @@ export const ourServices = [
             <div class="service-details__portfolio-cards service-one">
                 <div class="service-card">
                     <div class="service-card__inner">
-                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__hover" style="background-image: url(/assets/images/services/details/left-web.webp);"></div>
                         <div class="service-card__shape"></div>
                         <div class="service-card__icon">
                             <i class="fa-solid fa-lightbulb"></i>
@@ -758,7 +758,7 @@ export const ourServices = [
                 </div>
                 <div class="service-card">
                     <div class="service-card__inner">
-                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__hover" style="background-image: url(/assets/images/services/details/right-web.webp);"></div>
                         <div class="service-card__shape"></div>
                         <div class="service-card__icon">
                             <i class="fa-solid fa-gears"></i>
@@ -778,7 +778,7 @@ export const ourServices = [
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
+                            <img src="/assets/images/services/details/bottom-web.webp" alt="benefit">
                         </div>
                     </div>
                     <div class="col-md-6">
@@ -853,7 +853,7 @@ Robust Security</li>
             <div class="service-details__portfolio-cards service-one">
                 <div class="service-card">
                     <div class="service-card__inner">
-                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__hover" style="background-image: url(/assets/images/services/details/left.webp);"></div>
                         <div class="service-card__shape"></div>
                         <div class="service-card__icon">
                             <i class="fa-brands fa-android"></i>
@@ -867,7 +867,7 @@ Robust Security</li>
                 </div>
                 <div class="service-card">
                     <div class="service-card__inner">
-                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__hover" style="background-image: url(/assets/images/services/details/right.webp);"></div>
                         <div class="service-card__shape"></div>
                         <div class="service-card__icon">
                             <i class="fa-brands fa-apple"></i>
@@ -888,7 +888,7 @@ Robust Security</li>
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="Cross-Platform Development">
+                            <img src="/assets/images/services/details/bottom.webp" alt="Cross-Platform Development">
                         </div>
                     </div>
                     <div class="col-md-6">
@@ -961,7 +961,7 @@ Robust Security</li>
             <div class="service-details__portfolio-cards service-one">
                 <div class="service-card">
                     <div class="service-card__inner">
-                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__hover" style="background-image: url(/assets/images/services/details/left-gra.webp);"></div>
                         <div class="service-card__shape"></div>
                         <div class="service-card__icon">
                             <i class="fa-solid fa-brush"></i>
@@ -975,7 +975,7 @@ Robust Security</li>
                 </div>
                 <div class="service-card">
                     <div class="service-card__inner">
-                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__hover" style="background-image: url(/assets/images/services/details/right-gra.webp);"></div>
                         <div class="service-card__shape"></div>
                         <div class="service-card__icon">
                             <i class="fa-solid fa-newspaper"></i>
@@ -995,7 +995,7 @@ Robust Security</li>
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="Graphic Design Services">
+                            <img src="/assets/images/services/details/bottom-gra.webp" alt="Graphic Design Services">
                         </div>
                     </div>
                     <div class="col-md-6">
@@ -1071,7 +1071,7 @@ Robust Security</li>
             <div class="service-details__portfolio-cards service-one">
                 <div class="service-card">
                     <div class="service-card__inner">
-                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__hover" style="background-image: url(/assets/images/services/details/left-ui.webp);"></div>
                         <div class="service-card__shape"></div>
                         <div class="service-card__icon">
                             <i class="fa-solid fa-chart-simple"></i>
@@ -1085,7 +1085,7 @@ Robust Security</li>
                 </div>
                 <div class="service-card">
                     <div class="service-card__inner">
-                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__hover" style="background-image: url(/assets/images/services/details/right-ui.webp);"></div>
                         <div class="service-card__shape"></div>
                         <div class="service-card__icon">
                             <i class="fa-solid fa-paintbrush"></i>
@@ -1105,7 +1105,7 @@ Robust Security</li>
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="UI/UX Design Services">
+                            <img src="/assets/images/services/details/bottom-ui.webp" alt="UI/UX Design Services">
                         </div>
                     </div>
                     <div class="col-md-6">
@@ -1180,7 +1180,7 @@ Robust Security</li>
             <div class="service-details__portfolio-cards service-one">
                 <div class="service-card">
                     <div class="service-card__inner">
-                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__hover" style="background-image: url(/assets/images/services/details/left-seo.webp);"></div>
                         <div class="service-card__shape"></div>
                         <div class="service-card__icon">
                             <i class="fa-solid fa-chart-line"></i>
@@ -1194,7 +1194,7 @@ Robust Security</li>
                 </div>
                 <div class="service-card">
                     <div class="service-card__inner">
-                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__hover" style="background-image: url(/assets/images/services/details/right-seo.webp);"></div>
                         <div class="service-card__shape"></div>
                         <div class="service-card__icon">
                             <i class="fa-solid fa-feather"></i>
@@ -1212,7 +1212,7 @@ Robust Security</li>
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="SEO & Content Writing Services">
+                            <img src="/assets/images/services/details/bottom-seo.webp" alt="SEO & Content Writing Services">
                         </div>
                     </div>
                     <div class="col-md-6">
@@ -1299,7 +1299,7 @@ Robust Security</li>
             <div class="service-details__portfolio-cards service-one">
                 <div class="service-card">
                     <div class="service-card__inner">
-                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__hover" style="background-image: url(/assets/images/services/details/left-digi.webp);"></div>
                         <div class="service-card__shape"></div>
                         <div class="service-card__icon">
                             <i class="fa-solid fa-chart-line"></i>
@@ -1313,7 +1313,7 @@ Robust Security</li>
                 </div>
                 <div class="service-card">
                     <div class="service-card__inner">
-                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__hover" style="background-image: url(/assets/images/services/details/right-digi.webp);"></div>
                         <div class="service-card__shape"></div>
                         <div class="service-card__icon">
                             <i class="fa-solid fa-users"></i>
@@ -1333,7 +1333,7 @@ Robust Security</li>
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="Digital Marketing Services">
+                            <img src="/assets/images/services/details/bottom-digi.webp" alt="Digital Marketing Services">
                         </div>
                     </div>
                     <div class="col-md-6">
@@ -1356,7 +1356,7 @@ Robust Security</li>
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="Social Media Marketing">
+                            <img src="/assets/images/services/details/bottom-digi2.webp" alt="Social Media Marketing">
                         </div>
                     </div>
                     <div class="col-md-6">