services images updated

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

@@ -63,8 +63,8 @@ export default function BlogDetailsClient({ blog }: BlogDetailsClientProps) {
             <main>
                 <PageHeader
                     title="Blog Details"
-                    bannerLeftImage={blog.bannerLeftImage}
+                    bannerLeftImage="/assets/images/innerbanner/left/left-blog-details.webp"
-                    bannerRightImage={blog.bannerRightImage}
+                    bannerRightImage="/assets/images/innerbanner/right/right-blog-details.webp"
                 />
 
                 <section className="blog-details-area section-space">
@@ -93,7 +93,7 @@ export default function BlogDetailsClient({ blog }: BlogDetailsClientProps) {
                                                 <div className="blog-style-one relative overflow-hidden">
                                                     <Link className="blog-image w-img block relative" href={`/blog/${relatedBlog.slug}`}>
                                                         <img src={relatedBlog.image} alt={relatedBlog.title} />
-                                                        <span className="blog-category-tag">{relatedBlog.category}</span>
+                                                        
                                                     </Link>
                                                     <div className="blog-content">
                                                         <div className="post-meta">

src/components/about/WhyChooseUs.tsx

@@ -3,18 +3,18 @@ import React from "react";
 const WhyChooseUs = () => {
     return (
         <section className="why-choose-us section-space">
-            <div className="why-choose-us__bg" style={{ backgroundImage: "url('/assets/img/all-images/blog/blog-img1.png')" }}></div>
+            <div className="why-choose-us__bg" style={{ backgroundImage: "url('/assets/images/careers/3/bg.webp')" }}></div>
             <div className="why-choose-us__overlay"></div>
             <div className="container">
                 <div className="row align-items-center">
                     <div className="col-lg-6">
                         <div className="image-area-wrapper p-relative">
                             <div className="main-image">
-                                <img src="/assets/img-app/about/about-img5.png" alt="Business Meeting" />
+                                <img src="/assets/images/careers/3/big-img.webp" alt="Business Meeting" />
                             </div>
                             <div className="circular-image">
                                 <div className="inner-circle">
-                                    <img src="/assets/img-app/about/about-img5.png" alt="Profile" />
+                                    <img src="/assets/images/careers/3/small-ing.webp" alt="Profile" />
                                 </div>
                             </div>
                         </div>

src/components/careers/ContactSection.tsx

@@ -154,12 +154,12 @@ const ContactSection = () => {
             <div className="container contact-one__container wow fadeInUp" data-wow-delay="100ms" style={{ visibility: "hidden", marginTop: "-113px" }}>
                 <div
                     className="contact-one__wrapper"
-                    style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/shapes/contact-1-shape-1.png)" }}
+                    style={{ backgroundImage: "url(/assets/images/about/7/element-bottom-right.webp)" }}
                 >
                     <div className="row">
                         <div className="col-lg-6">
                             <div className="contact-one__image-two">
-                                <img src="https://tolaklaravel.bracketweb.com/assets/images/resources/contact-1-2.jpg" alt="Business Growth" />
+                                <img src="/assets/images/about/7/left.webp" alt="Business Growth" />
                             </div>
                         </div>
                         <div className="col-lg-6">

src/components/careers/FaqVideoSection.tsx

@@ -86,7 +86,7 @@ const FaqVideoSection = () => {
             <section className="faq-two">
                 <div
                     className="faq-two__bg jarallax"
-                    style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/faq-bg-2.jpg)" }}
+                    style={{ backgroundImage: "url(/assets/images/faq/4.webp)" }}
                 ></div>
                 <div className="container">
                     <div className="row justify-content-center">
@@ -194,7 +194,7 @@ const FaqVideoSection = () => {
                     <div
                         className="video-three__inner"
                         style={{
-                            backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/video-bg-3.jpg)",
+                            backgroundImage: "url(/assets/images/faq/5.webp)",
                             backgroundPosition: 'center',
                             backgroundSize: 'cover'
                         }}

src/components/faq/FaqPageSection.tsx

@@ -95,7 +95,7 @@ const FaqPageSection = () => {
                     {/* Center Image */}
                     <div className="col-lg-4 col-md-12 text-center">
                         <div className="faq-center-image-wrap">
-                            <img src="/assets/img-app/home/section9/faq.webp" alt="FAQ Center" className="main-faq-img" />
+                            <img src="/assets/images/faq/1.webp" alt="FAQ Center" className="main-faq-img" />
                         </div>
                     </div>
 

src/components/home/AboutThree.tsx

@@ -36,10 +36,10 @@ const AboutThree = () => {
         <section className="about-three">
             <div className="about-three__bg">
                 <div className="about-three__shape-one">
-                    <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/about-3-shape-1.png" alt="pelocis" />
+                    <img src="/assets/images/careers/2/element-1.webp" alt="pelocis" />
                 </div>
                 <div className="about-three__shape-two">
-                    <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/about-3-shape-2.png" alt="pelocis" />
+                    <img src="/assets/images/careers/2/element-2.webp" alt="pelocis" />
                 </div>
             </div>
             <div className="container">
@@ -58,7 +58,7 @@ const AboutThree = () => {
                                 <ul className="about-three__card__list">
                                     <li className="about-three__card__item">
                                         <div className="about-three__card__icon">
-                                            <i className="fa-solid fa-hand-holding-heart"></i>
+                                            <img src="/assets/images/careers/2/icon.webp" alt="icon" />
                                         </div>
                                         <h3 className='text-white'>Innovate Fearlessly</h3>
                                     </li>
@@ -106,7 +106,7 @@ const AboutThree = () => {
                     <div className="col-xl-6 wow fadeInRight animated" data-wow-delay="200ms">
                         <div className="pelocis-stretch-element-inside-column" style={{ marginLeft: '0px', marginRight: '-375.012px' }}>
                             <div className="about-three__img">
-                                <img src="https://bracketweb.com/pelocishtml/assets/images/resources/about-3-1.png" alt="pelocis" />
+                                <img src="/assets/images/careers/2/right-img.webp" alt="pelocis" />
                             </div>
                         </div>
                     </div>

src/components/home/CounterAreaThree.tsx

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

src/components/home/FaqFive.tsx

@@ -40,7 +40,7 @@ const FaqFive = () => {
                         <div className="pelocis-stretch-element-inside-column">
                             <div className="faq-four__image2">
                                 <img
-                                    src="https://bracketweb.com/pelocishtml/assets/images/resources/faq-4-1.jpg"
+                                    src="/assets/images/faq/3.webp"
                                     alt="pelocis"
                                 />
                                 <div className="faq-four__image2__icon">

src/components/home/FaqFour.tsx

@@ -80,7 +80,7 @@ const FaqFour = () => {
                         <div className="pelocis-stretch-element-inside-column">
                             <div className="faq-four__image">
                                 <img
-                                    src="https://bracketweb.com/pelocishtml/assets/images/resources/faq-4-1.jpg"
+                                    src="/assets/images/faq/2.webp"
                                     alt="pelocis"
                                 />
                                 <div className="faq-four__image__icon">

src/components/home/HistoryTwo.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 const HistoryTwo = () => {
     return (
         <section className="history-two">
-            <div className="history-two__bg" style={{ backgroundImage: "url('https://bracketweb.com/pelocishtml/assets/images/resources/history-2-4.png')" }}></div>
+            <div className="history-two__bg" style={{ backgroundImage: "url('/assets/images/about/4/bg.webp')" }}></div>
             <div className="container wow fadeInUp animated" style={{ visibility: 'visible', animationName: 'fadeInUp' }}>
                 <div className="history-two__title text-center">
                     <div className="sec-title">
@@ -30,12 +30,12 @@ const HistoryTwo = () => {
                     <div className="col-lg-6">
                         <div className="history-two__images">
                             <span className="history-two__images__date"></span>
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" />
+                            <img src="/assets/images/about/4/1.webp" alt="pelocis" />
                         </div>
                     </div>
                     <div className="col-lg-6">
                         <div className="history-two__images history-two__images--right">
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" />
+                            <img src="/assets/images/about/4/2.webp" alt="pelocis" />
                             {/* <span className="history-two__images__date">2021</span> */}
                         </div>
                     </div>
@@ -67,7 +67,7 @@ const HistoryTwo = () => {
                     <div className="col-lg-6">
                         <div className="history-two__images">
                             <span className="history-two__images__date"></span>
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" />
+                            <img src="/assets/images/about/4/3.webp" alt="pelocis" />
                         </div>
                     </div>
                 </div>

src/components/home/MedicalServices.tsx

@@ -60,7 +60,7 @@ const MedicalServices = () => {
         <section
             className="medical-services-circle p-relative overflow-hidden"
             style={{
-                backgroundImage: `url('/assets/img/all-images/blog/blog-img1.png')`,
+                backgroundImage: `url('/assets/images/home/4/grid.webp')`,
                 backgroundAttachment: 'fixed',
                 backgroundPosition: 'center',
                 backgroundRepeat: 'no-repeat',

src/components/home/ProjectsSection.tsx

@@ -8,7 +8,7 @@ const projectsData = [
         id: 1,
         title: "Website Development Intern",
         description: "5 Feb, 2025 | Full Time",
-        image: "/assets/images/careers/web-dev.webp",
+        image: "/assets/images/careers/4/web.webp",
         category: "web",
         link: "/services-digital-solutions/web-development"
     },
@@ -16,7 +16,7 @@ const projectsData = [
         id: 2,
         title: "Search Engine Optimization (SEO) Intern",
         description: "5 Feb, 2025 | Full Time",
-        image: "/assets/images/careers/seo.webp",
+        image: "/assets/images/careers/4/seo.webp",
         category: "seo",
         link: "/services-digital-solutions/search-engine-optimization-seo-content-writing"
     },
@@ -24,7 +24,7 @@ const projectsData = [
         id: 3,
         title: "Social Media Marketing (SMM) Intern",
         description: "5 Feb, 2025 | Full Time",
-        image: "/assets/images/careers/digi-marketing.webp",
+        image: "/assets/images/careers/4/smm.webp",
         category: "dm",
         link: "/services-digital-solutions/digital-marketing-agency-in-canada"
     }

src/components/home/WhyChooseTwo.tsx

@@ -7,7 +7,7 @@ interface WhyChooseTwoProps {
 const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
     return (
         <section className="why-choose-two">
-            <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/why-chosse-2-shape.png" alt="pelocis" className="why-choose-two__shape-three" />
+            <img src="/assets/images/about/3/element-bottom-left.webp" alt="pelocis" className="why-choose-two__shape-three" />
             <div className="container">
                 <div className={`row ${reverse ? 'flex-row-reverse' : ''}`}>
                     <div className="col-xl-6">
@@ -68,7 +68,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
                     <div className="col-xl-6">
                         <div className="pelocis-stretch-element-inside-column" style={reverse ? { marginLeft: '-227.812px', marginRight: '0px' } : { marginLeft: '0px', marginRight: '-267.812px' }}>
                             <div className="why-choose-two__shape-one">
-                                <img src="https://bracketweb.com/pelocishtml/assets/images/resources/why-choose-two-img-1.png" alt="pelocis" />
+                                <img src="/assets/images/about/3/right-img.webp" alt="pelocis" />
                             </div>
                             <div className="why-choose-two__shape-two"></div>
                         </div>

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

@@ -12,13 +12,13 @@ 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/imgs/shapes/shape-6.png)" }}></div>
+                            <div className="border-shape" style={{ backgroundImage: "url(/assets/images/home/2/bottom-left-element.webp)" }}></div>
                             <figure className="image-1">
-                                <img src="/assets/img/about/about-img1.png" alt="" />
+                                <img src="/assets/images/home/2/left-img.webp" alt="" />
                             </figure>
                             <div className="image-2-area">
                                 <div className="image-2 p-relative">
-                                    <img src="/assets/img/about/about-img7.png" alt="" />
+                                    <img src="/assets/images/home/2/small-element.webp" 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>
@@ -50,7 +50,7 @@ const AboutSection = () => {
                             <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">
                                 <div className="icon">
-                                    <img src="/assets/imgs/about/about-three-icon1.png" alt="img" />
+                                    <img src="/assets/images/home/2/icon-1.webp" alt="img" />
                                 </div>
                                 <div className="content">
                                     <h5><a href="#">Exceptional Digital Quality</a></h5>
@@ -59,7 +59,7 @@ const AboutSection = () => {
                             </div>
                             <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
                                 <div className="icon">
-                                    <img src="/assets/imgs/about/about-three-icon2.png" alt="img" />
+                                    <img src="/assets/images/home/2/icon-2.webp" alt="img" />
                                 </div>
                                 <div className="content">
                                     <h5><a href="#">Expertise in innovation</a></h5>
@@ -68,7 +68,7 @@ const AboutSection = () => {
                             </div>
                             <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
                                 <div className="icon">
-                                    <img src="/assets/imgs/about/about-three-icon2.png" alt="img" />
+                                    <img src="/assets/images/home/2/icon-3.webp" alt="img" />
                                 </div>
                                 <div className="content">
                                     <h5><a href="#">Comprehensive web solutions</a></h5>

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

@@ -1,6 +1,6 @@
 const banners = [
     {
-        image: "/assets/imgs/banner/banner-1.jpg",
+        image: "/assets/images/home/1/banner-image/web.webp",
         subTitle: "METATRONCUBE SOLUTIONS",
         title: "WEB AND APP DEVELOPMENT PIONEERING INNOVATION",
         text: "Elevate your digital landscape with Metatroncube's cutting-edge web and mobile app solutions.",
@@ -8,7 +8,7 @@ const banners = [
         btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
     },
     {
-        image: "/assets/imgs/banner/banner-2.jpg",
+        image: "/assets/images/home/1/banner-image/digital.webp",
         subTitle: "METATRONCUBE SOLUTIONS",
         title: "DIGITAL MARKETING AMPLIFYING YOUR ONLINE VOICE",
         text: "Explore Metatroncube's innovative strategies to connect, engage, and grow your audience in the digital realm.",
@@ -16,7 +16,7 @@ const banners = [
         btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
     },
     {
-        image: "/assets/imgs/banner/banner-3.jpg",
+        image: "/assets/images/home/1/banner-image/seo-strategies.webp",
         subTitle: "METATRONCUBE SOLUTIONS",
         title: "SEO STRATEGIES PAVING YOUR PATH TO SUCCESS",
         text: "Maximize visibility and drive traffic with Metatroncube's expert SEO strategies.",
@@ -24,7 +24,7 @@ const banners = [
         btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
     },
     {
-        image: "/assets/imgs/banner/banner-4.jpg",
+        image: "/assets/images/home/1/banner-image/graphic.webp",
         subTitle: "METATRONCUBE SOLUTIONS",
         title: "GRAPHIC DESIGN CREATING VISUAL IMPACT",
         text: "Craft compelling visuals that enhance your brand identity with Metatroncube's graphic design services",

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

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

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

@@ -72,7 +72,7 @@ const TestimonialsSection = () => {
                 <div className="row g-0">
                     <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/imgs/resources/video-1.jpg" alt="" /></figure>
+                            <figure className="image w-img"><img src="/assets/images/about/6/left.webp" alt="" /></figure>
                             <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>
@@ -82,7 +82,7 @@ const TestimonialsSection = () => {
                     </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/img/home/bg/bg-4.webp)',
+                            backgroundImage: 'url(/assets/images/about/6/right.webp)',
                             backgroundSize: 'cover',
                             backgroundPosition: 'center'
                         }}>

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

@@ -2,19 +2,19 @@ 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/imgs/shapes/shape-30.png)" }}></div>
+        <div className="bg-shape-1" style={{ backgroundImage: "url(/assets/images/about/1/element-1.webp)" }}></div>
-        <div className="bg-shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-31.png)" }}></div>
+        <div className="bg-shape-2" style={{ backgroundImage: "url(/assets/images/about/1/element-2.webp)" }}></div>
         <div className="small-container">
             <div className="row">
                 <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-12">
                     <div className="about-2-image-area p-relative wow fadeInLeft" data-wow-delay="500ms">
                         <figure className="main-image m-img">
-                            <img src="/assets/imgs/about/about-3.jpg" alt="" />
+                            <img src="/assets/images/about/1/grid.webp" alt="" />
                         </figure>
-                        <div className="small-image">
+                        {/* <div className="small-image">
                             <img src="/assets/imgs/about/about-4.jpg" alt="" />
-                        </div>
+                        </div> */}
-                        <div className="icon-box">
+                        {/* <div className="icon-box">
                             <div className="icon">
                                 <i className="fa-solid fa-award"></i>
                             </div>
@@ -22,7 +22,7 @@ const About2Section = () => (
                                 <h3 className="mb-10"><span className="counter">10</span>+</h3>
                                 <p>Experience</p>
                             </div>
-                        </div>
+                        </div> */}
                         <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-29.png)" }}></div>
                     </div>
                 </div>

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

@@ -15,12 +15,12 @@ const AboutService = () => {
 
                             {/* Background Image */}
                             <div className="main-img-wrap">
-                                <img src="/assets/img/about/about-img1.png" alt="Office Meeting" />
+                                <img src="/assets/images/careers/1/large-img.webp" alt="Office Meeting" />
                             </div>
 
                             {/* Foreground Curved Image */}
                             <div className="curved-img-wrap">
-                                <img src="/assets/img/about/about-img13.png" alt="Collaborative Work" />
+                                <img src="/assets/images/careers/1/small-img.webp" alt="Collaborative Work" />
                             </div>
 
                             {/* Decorative Dots */}
@@ -40,7 +40,7 @@ const AboutService = () => {
                                 </div>
                                 <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>
+                                    <b>Be part of a dynamic team where innovation, growth, and impact come together.</b>
                                 </p>
                             </div>
 
@@ -51,11 +51,11 @@ const AboutService = () => {
                                     </div> */}
                                     <div className="feature-bullets">
                                         <div className="bullet-item d-flex align-items-center">
-                                            
+
                                             <p>At Metatroncube Software Solutions, we don’t just build digital solutions—we build dreams. Founded by a passionate team, our mission is to simplify complex problems and deliver results that exceed expectations.</p>
                                         </div>
                                         <div className="bullet-item d-flex align-items-center">
-                                            
+
                                             <p>Here We believe in fostering a culture where every voice matters. Whether you’re a problem-solver, visionary, or tech wizard, there’s a place for you here to grow and make a real impact.</p>
                                         </div>
                                     </div>