MetatroncubeSoftwareSolutions/MetatronLatestWebsite
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

js rendering fixed

Browse Source
This commit is contained in:
Selvi 2026-03-18 17:14:41 +05:30
commit 24cd9cf2ba
76 changed files with 257 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/app/globals.css
View File

@ -9463,26 +9463,25 @@ body {
.form-textarea { .form-textarea {
width: 100%; width: 100%;
padding: 15px 20px; padding: 15px 20px;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid #e2e8f0;
background-color: rgba(255, 255, 255, 0.05); background-color: #ffffff;
border-radius: 12px; border-radius: 12px;
outline: none; outline: none;
font-size: 15px; font-size: 15px;
color: #fff; color: #787878;
transition: all 0.3s ease; transition: all 0.3s ease;
height: 60px; height: 60px;
} }
.form-select-custom-styled-global option, .form-select-custom-styled-global option,
.form-select option { .form-select option {
background-color: #111827; background-color: #ffffff;
color: #fff; color: #1e293b;
} }
.form-textarea-custom-global, .form-textarea-custom-global,
.form-textarea { .form-textarea {
min-height: 110px; min-height: 110px;
/* height: auto; */
resize: vertical; resize: vertical;
} }
@ -9493,7 +9492,7 @@ body {
.form-textarea:focus, .form-textarea:focus,
.form-select:focus { .form-select:focus {
border-color: #3779b9; border-color: #3779b9;
background-color: rgba(255, 255, 255, 0.08); background-color: #ffffff;
box-shadow: 0 0 0 4px rgba(55, 121, 185, 0.15); box-shadow: 0 0 0 4px rgba(55, 121, 185, 0.15);
} }
@ -10125,7 +10124,7 @@ body {
border-radius: 12px; border-radius: 12px;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
outline: none; outline: none;
background: #fff; /* background: #fff; */
transition: all 0.3s ease; transition: all 0.3s ease;
font-size: 14px; font-size: 14px;
color: #1e293b; color: #1e293b;
@ -17736,9 +17735,9 @@ h4.service-details__dynamic-content-erp {
.careers-popup-optimized .form-input { .careers-popup-optimized .form-input {
padding: 10px 14px !important; padding: 10px 14px !important;
border: 1.5px solid rgba(255, 255, 255, 0.08) !important; border: 1.5px solid #e2e8f0 !important;
background: rgba(255, 255, 255, 0.03) !important; /* background: #ffffff !important; */
color: #fff !important; color: #787878 !important;
font-weight: 500 !important; font-weight: 500 !important;
border-radius: 10px !important; border-radius: 10px !important;
} }
@ -17746,14 +17745,15 @@ h4.service-details__dynamic-content-erp {
.careers-popup-optimized .form-input:focus { .careers-popup-optimized .form-input:focus {
border-color: #3779b9 !important; border-color: #3779b9 !important;
background: rgba(55, 121, 185, 0.05) !important; background: #ffffff !important;
box-shadow: 0 0 0 4px rgba(55, 121, 185, 0.1) !important; box-shadow: 0 0 0 4px rgba(55, 121, 185, 0.1) !important;
} }
.careers-popup-optimized .form-textarea { .careers-popup-optimized .form-textarea {
min-height: 60px !important; min-height: 60px !important;
background: rgba(255, 255, 255, 0.03) !important; background: #ffffff !important;
border: 1.5px solid rgba(255, 255, 255, 0.08) !important; border: 1.5px solid #e2e8f0 !important;
color: #787878 !important;
} }
/* File Upload Popup Styling */ /* File Upload Popup Styling */
@ -17769,8 +17769,9 @@ h4.service-details__dynamic-content-erp {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: rgba(255, 255, 255, 0.02); background: #ffffff;
border: 1.5px dashed rgba(255, 255, 255, 0.1); color: #000000 !important;
border: 1.5px dashed #c0cad8;
border-radius: 10px; border-radius: 10px;
padding: 8px 12px; padding: 8px 12px;
cursor: pointer; cursor: pointer;
@ -17779,11 +17780,11 @@ h4.service-details__dynamic-content-erp {
.careers-popup-optimized .file-upload-label:hover { .careers-popup-optimized .file-upload-label:hover {
border-color: #3779b9; border-color: #3779b9;
background: rgba(255, 255, 255, 0.05); background: #f0f6ff;
} }
.careers-popup-optimized .file-content { .careers-popup-optimized .file-content {
color: rgba(255, 255, 255, 0.6); color: #000000;
} }
/* ── Careers Popup Optimized (Dark Theme & No-Scroll) ── */ /* ── Careers Popup Optimized (Dark Theme & No-Scroll) ── */
@ -17852,23 +17853,24 @@ h4.service-details__dynamic-content-erp {
.careers-popup-optimized .form-input { .careers-popup-optimized .form-input {
padding: 12px 16px !important; padding: 12px 16px !important;
border: 1.5px solid rgba(255, 255, 255, 0.08) !important; border: 1.5px solid #e2e8f0 !important;
background: rgba(255, 255, 255, 0.03) !important; /* background: #ffffff !important; */
color: #fff !important; color: #787878 !important;
font-weight: 500 !important; font-weight: 500 !important;
border-radius: 12px !important; border-radius: 12px !important;
} }
.careers-popup-optimized .form-input:focus { .careers-popup-optimized .form-input:focus {
border-color: #3779b9 !important; border-color: #3779b9 !important;
background: rgba(55, 121, 185, 0.05) !important; /* background: #ffffff !important; */
box-shadow: 0 0 0 4px rgba(55, 121, 185, 0.1) !important; box-shadow: 0 0 0 4px rgba(55, 121, 185, 0.1) !important;
} }
.careers-popup-optimized .form-textarea { .careers-popup-optimized .form-textarea {
min-height: 80px !important; min-height: 80px !important;
background: rgba(255, 255, 255, 0.03) !important; background: #ffffff !important;
border: 1.5px solid rgba(255, 255, 255, 0.08) !important; border: 1.5px solid #e2e8f0 !important;
color: #787878 !important;
} }
/* File Upload Popup Styling */ /* File Upload Popup Styling */
@ -17884,8 +17886,9 @@ h4.service-details__dynamic-content-erp {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: rgba(255, 255, 255, 0.02); background: #ffffff;
border: 1.5px dashed rgba(255, 255, 255, 0.1); color: #000000 !important;
border: 1.5px dashed #c0cad8;
border-radius: 12px; border-radius: 12px;
padding: 10px 15px; padding: 10px 15px;
cursor: pointer; cursor: pointer;
@ -17894,16 +17897,17 @@ h4.service-details__dynamic-content-erp {
.careers-popup-optimized .file-upload-label:hover { .careers-popup-optimized .file-upload-label:hover {
border-color: #3779b9; border-color: #3779b9;
background: rgba(255, 255, 255, 0.05); background: #f0f6ff;
} }
.careers-popup-optimized .file-content { .careers-popup-optimized .file-content {
color: rgba(255, 255, 255, 0.6); color: #787878;
} }
.careers-popup-optimized .file-name-text { .careers-popup-optimized .file-name-text {
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
color: #787878;
} }
.careers-popup-optimized .file-browse-btn { .careers-popup-optimized .file-browse-btn {

6
src/components/about/Results.tsx
View File

@ -13,7 +13,7 @@ const ResultsSection = () => {
<h6 className="sec-title__tagline">Discover Our Process</h6> <h6 className="sec-title__tagline">Discover Our Process</h6>
<h3 className="sec-title__title">How We Deliver Exceptional Results</h3> <h3 className="sec-title__title">How We Deliver Exceptional Results</h3>
</div> </div>
<img src="/assets/images/services/deliver/element.webp" alt="How We Deliver Exceptional Results" className="sec-title__text-shape" /> <img loading="lazy" src="/assets/images/services/deliver/element.webp" alt="How We Deliver Exceptional Results" className="sec-title__text-shape" />
<p> <p>
Delve into Metatroncube’s unique approach to delivering exceptional results. Our ‘Discover Our Process’ section illuminates the meticulous steps we take in transforming your digital vision into tangible success. Delve into Metatroncube’s unique approach to delivering exceptional results. Our ‘Discover Our Process’ section illuminates the meticulous steps we take in transforming your digital vision into tangible success.
</p> </p>
@ -55,11 +55,11 @@ const ResultsSection = () => {
<div className="col-lg-6"> <div className="col-lg-6">
<div className="image-area-wrapper p-relative"> <div className="image-area-wrapper p-relative">
<div className="main-image"> <div className="main-image">
<img src="/assets/images/services/deliver/big-img.webp" alt="Business Meeting" /> <img loading="lazy" src="/assets/images/services/deliver/big-img.webp" alt="Business Meeting" />
</div> </div>
<div className="circular-image"> <div className="circular-image">
<div className="inner-circle"> <div className="inner-circle">
<img src="/assets/images/services/deliver/small-img.webp" alt="Profile" /> <img loading="lazy" src="/assets/images/services/deliver/small-img.webp" alt="Profile" />
</div> </div>
</div> </div>
</div> </div>

4
src/components/about/WhyChooseUs.tsx
View File

@ -10,11 +10,11 @@ const WhyChooseUs = () => {
<div className="col-lg-6"> <div className="col-lg-6">
<div className="image-area-wrapper p-relative"> <div className="image-area-wrapper p-relative">
<div className="main-image"> <div className="main-image">
<img src="/assets/images/careers/3/big-img.webp" alt="Business Meeting" /> <img loading="lazy" src="/assets/images/careers/3/big-img.webp" alt="Business Meeting" />
</div> </div>
<div className="circular-image"> <div className="circular-image">
<div className="inner-circle"> <div className="inner-circle">
<img src="/assets/images/careers/3/small-ing.webp" alt="Profile" /> <img loading="lazy" src="/assets/images/careers/3/small-ing.webp" alt="Profile" />
</div> </div>
</div> </div>
</div> </div>

2
src/components/blog/BlogDetails.tsx
View File

@ -39,7 +39,7 @@ const BlogDetails = ({ blog }: BlogDetailsProps) => {
<div className="col-lg-8"> <div className="col-lg-8">
<div className="blog-details-content"> <div className="blog-details-content">
<div className="blog-details-img mb-40"> <div className="blog-details-img mb-40">
<img src={blog.big_image || blog.image} alt={blog.title} className="w-100" /> <img loading="lazy" src={blog.big_image || blog.image} alt={blog.title} className="w-100" />
</div> </div>
<div className="blog-meta mb-30"> <div className="blog-meta mb-30">

2
src/components/blog/BlogSidebar.tsx
View File

@ -146,7 +146,7 @@ const BlogSidebar = ({
<div key={post.id} className="single-post-item"> <div key={post.id} className="single-post-item">
<div className="thumb bg-cover"> <div className="thumb bg-cover">
<Link href={`/${post.slug}`}> <Link href={`/${post.slug}`}>
<img src={post.image} alt={post.title} /> <img loading="lazy" src={post.image} alt={post.title} />
</Link> </Link>
</div> </div>
<div className="post-content"> <div className="post-content">

2
src/components/cards/ServiceCard.tsx
View File

@ -10,7 +10,7 @@ const ServiceCard: React.FC<ServiceCardProps> = ({ service }) => {
return ( return (
<div className="service1-boxarea"> <div className="service1-boxarea">
<div className="icons"> <div className="icons">
<img src={service.icon} alt={service.title} /> <img loading="lazy" src={service.icon} alt={service.title} />
</div> </div>
<div className="space24"></div> <div className="space24"></div>
<div className="space16"></div> <div className="space16"></div>

2
src/components/careers/CareersWorkProcess.tsx
View File

@ -104,7 +104,7 @@ const CareersWorkProcess = () => {
<h3>{step.title}</h3> <h3>{step.title}</h3>
<p>{step.desc}</p> <p>{step.desc}</p>
<div className="icon"> <div className="icon">
<img src={step.icon} alt={step.title} style={{ width: "60px", height: "60px", objectFit: "contain" }} /> <img loading="lazy" src={step.icon} alt={step.title} style={{ width: "60px", height: "60px", objectFit: "contain" }} />
</div> </div>
</div> </div>
</div> </div>

4
src/components/careers/ContactSection.tsx
View File

@ -145,7 +145,7 @@ const ContactSection = () => {
</div> </div>
<div className="col-lg-4"> <div className="col-lg-4">
<div className="contact-one__image wow fadeInRight" data-wow-delay="200ms" style={{ visibility: "hidden" }}> <div className="contact-one__image wow fadeInRight" data-wow-delay="200ms" style={{ visibility: "hidden" }}>
<img src="/assets/images/about/7/4-top-right.webp" alt="Contact Support" /> <img loading="lazy" src="/assets/images/about/7/4-top-right.webp" alt="Contact Support" />
</div> </div>
</div> </div>
</div> </div>
@ -159,7 +159,7 @@ const ContactSection = () => {
<div className="row"> <div className="row">
<div className="col-lg-6"> <div className="col-lg-6">
<div className="contact-one__image-two"> <div className="contact-one__image-two">
<img src="/assets/images/about/7/4-left-img.webp" alt="Business Growth" /> <img loading="lazy" src="/assets/images/about/7/4-left-img.webp" alt="Business Growth" />
</div> </div>
</div> </div>
<div className="col-lg-6"> <div className="col-lg-6">

7
src/components/careers/FaqVideoSection.tsx
View File

@ -104,7 +104,7 @@ const FaqVideoSection = () => {
</div> </div>
)} )}
<form className="faq-contact-form" onSubmit={handleSubmit}> <form className="faq-contact-form" onSubmit={handleSubmit} suppressHydrationWarning>
<div className="row"> <div className="row">
<div className="col-md-6 mb-20"> <div className="col-md-6 mb-20">
<label className="faq-form-label">Full Name</label> <label className="faq-form-label">Full Name</label>
@ -114,6 +114,7 @@ const FaqVideoSection = () => {
placeholder="Full Name" placeholder="Full Name"
value={formData.name} value={formData.name}
onChange={handleChange} onChange={handleChange}
suppressHydrationWarning
/> />
{formErrors.name && <small className="faq-error">{formErrors.name}</small>} {formErrors.name && <small className="faq-error">{formErrors.name}</small>}
</div> </div>
@ -125,6 +126,7 @@ const FaqVideoSection = () => {
placeholder="Email Address" placeholder="Email Address"
value={formData.email} value={formData.email}
onChange={handleChange} onChange={handleChange}
suppressHydrationWarning
/> />
{formErrors.email && <small className="faq-error">{formErrors.email}</small>} {formErrors.email && <small className="faq-error">{formErrors.email}</small>}
</div> </div>
@ -136,6 +138,7 @@ const FaqVideoSection = () => {
placeholder="Phone Number" placeholder="Phone Number"
value={formData.phone} value={formData.phone}
onChange={handleChange} onChange={handleChange}
suppressHydrationWarning
/> />
{formErrors.phone && <small className="faq-error">{formErrors.phone}</small>} {formErrors.phone && <small className="faq-error">{formErrors.phone}</small>}
</div> </div>
@ -146,6 +149,7 @@ const FaqVideoSection = () => {
value={formData.service} value={formData.service}
onChange={handleChange} onChange={handleChange}
className="faq-select" className="faq-select"
suppressHydrationWarning
> >
<option value="">Select Service</option> <option value="">Select Service</option>
<option value="Website Development">Website Development</option> <option value="Website Development">Website Development</option>
@ -165,6 +169,7 @@ const FaqVideoSection = () => {
rows={5} rows={5}
value={formData.message} value={formData.message}
onChange={handleChange} onChange={handleChange}
suppressHydrationWarning
></textarea> ></textarea>
{formErrors.message && <small className="faq-error">{formErrors.message}</small>} {formErrors.message && <small className="faq-error">{formErrors.message}</small>}
</div> </div>

6
src/components/careers/ServiceSection.tsx
View File

@ -60,7 +60,7 @@ const ServiceSection2 = () => {
<h6 className="sec-title__tagline">OUR BEST SERVICE</h6> <h6 className="sec-title__tagline">OUR BEST SERVICE</h6>
<h3 className="sec-title__title">We Run All Kinds Of Services <br /> From Technologies</h3> <h3 className="sec-title__title">We Run All Kinds Of Services <br /> From Technologies</h3>
</div> </div>
<img src="/assets/images/services/service/element-small.webp" alt="We Run All Kinds Of Services" className="sec-title__text-shape" /> <img loading="lazy" src="/assets/images/services/service/element-small.webp" alt="We Run All Kinds Of Services" className="sec-title__text-shape" />
</div> </div>
<div className="row mt-50 justify-content-center"> <div className="row mt-50 justify-content-center">
@ -76,7 +76,7 @@ const ServiceSection2 = () => {
<div className="home-services__card__shape--two"></div> <div className="home-services__card__shape--two"></div>
<div className="home-services__card__content"> <div className="home-services__card__content">
<div className="home-services__card__icon"> <div className="home-services__card__icon">
<img src={service.icon} alt="icon" width="42" height="42" /> <img loading="lazy" src={service.icon} alt="icon" width="42" height="42" />
</div> </div>
<h4 className="home-services__card__count">--</h4> <h4 className="home-services__card__count">--</h4>
<h2 className="home-services__card__title"> <h2 className="home-services__card__title">
@ -87,7 +87,7 @@ const ServiceSection2 = () => {
</p> </p>
</div> </div>
<div className="home-services__card__image"> <div className="home-services__card__image">
<img src={service.image} alt={service.title} /> <img loading="lazy" src={service.image} alt={service.title} />
<div className="home-services__card__hover"> <div className="home-services__card__hover">
<Link href={`/service/${service.slug}`} className="home-services__card__hover-link"> <Link href={`/service/${service.slug}`} className="home-services__card__hover-link">
<i className="fa-solid fa-arrow-right"></i> <i className="fa-solid fa-arrow-right"></i>

4
src/components/careers/WorkProcessSection.tsx
View File

@ -85,7 +85,7 @@ const WorkProcessSection2 = () => {
<div className="container"> <div className="container">
<div className="work-process-wrapper style2"> <div className="work-process-wrapper style2">
<div className="shape1 d-none d-xxl-block"> <div className="shape1 d-none d-xxl-block">
<img src="/assets/images/services/journey/element-2.webp" alt="digital transformation journey" /> <img loading="lazy" src="/assets/images/services/journey/element-2.webp" alt="digital transformation journey" />
</div> </div>
<div className="row justify-content-center mb-30"> <div className="row justify-content-center mb-30">
@ -103,7 +103,7 @@ const WorkProcessSection2 = () => {
<div className="row gy-5 gx-70 align-items-center"> <div className="row gy-5 gx-70 align-items-center">
<div className="col-xl-5"> <div className="col-xl-5">
<figure className="main-image text-center m-img wow fadeInUp" data-wow-delay="0.5s"> <figure className="main-image text-center m-img wow fadeInUp" data-wow-delay="0.5s">
<img src="/assets/images/careers/career.webp" alt="Our story" loading="lazy" /> <img loading="lazy" src="/assets/images/careers/career.webp" alt="Our story" />
</figure> </figure>
</div> </div>

3
src/components/common/InnerBanner.tsx
View File

@ -162,6 +162,7 @@ const InnerBanner = ({
data-wow-duration="1500ms" data-wow-duration="1500ms"
> >
<img <img
loading="lazy"
src="/assets/img/elements/elements16.png" src="/assets/img/elements/elements16.png"
alt="shape" alt="shape"
width={169} width={169}
@ -177,6 +178,7 @@ const InnerBanner = ({
data-wow-duration="1500ms" data-wow-duration="1500ms"
> >
<img <img
loading="lazy"
src="/assets/img/elements/elements8.png" src="/assets/img/elements/elements8.png"
alt="shape" alt="shape"
width={188} width={188}
@ -192,6 +194,7 @@ const InnerBanner = ({
data-wow-duration="1500ms" data-wow-duration="1500ms"
> >
<img <img
loading="lazy"
src="/assets/img/elements/elements9.png" src="/assets/img/elements/elements9.png"
alt="shape" alt="shape"
width={535} width={535}

2
src/components/contact/ContactSection.tsx
View File

@ -189,7 +189,7 @@ const ContactSection = () => {
borderRadius: '12px', borderRadius: '12px',
outline: 'none', outline: 'none',
fontSize: '15px', fontSize: '15px',
color: '#1e293b' color: '#787878'
}} }}
> >
<option value="">Select Service</option> <option value="">Select Service</option>

2
src/components/faq/FaqPageSection.tsx
View File

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

8
src/components/home/AboutThree.tsx
View File

@ -41,10 +41,10 @@ const AboutThree = () => {
<section className="about-three"> <section className="about-three">
<div className="about-three__bg"> <div className="about-three__bg">
<div className="about-three__shape-one"> <div className="about-three__shape-one">
<img src="/assets/images/careers/2/element-1.webp" alt="Team defining innovation strategy at Metatron Cube Solutions." /> <img loading="lazy" src="/assets/images/careers/2/element-1.webp" alt="Team defining innovation strategy at Metatron Cube Solutions." />
</div> </div>
<div className="about-three__shape-two"> <div className="about-three__shape-two">
<img src="/assets/images/careers/2/element-2.webp" alt="element-1" /> <img loading="lazy" src="/assets/images/careers/2/element-2.webp" alt="element-1" />
</div> </div>
</div> </div>
<div className="container"> <div className="container">
@ -63,7 +63,7 @@ const AboutThree = () => {
<ul className="about-three__card__list"> <ul className="about-three__card__list">
<li className="about-three__card__item"> <li className="about-three__card__item">
<div className="about-three__card__icon"> <div className="about-three__card__icon">
<img src="/assets/images/careers/2/icon.webp" alt="Innovate Fearlessly" /> <img loading="lazy" src="/assets/images/careers/2/icon.webp" alt="Innovate Fearlessly" />
</div> </div>
<h3 className='text-white'>Innovate Fearlessly</h3> <h3 className='text-white'>Innovate Fearlessly</h3>
</li> </li>
@ -111,7 +111,7 @@ const AboutThree = () => {
<div className="col-xl-6 wow fadeInRight animated" data-wow-delay="200ms"> <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="pelocis-stretch-element-inside-column" style={{ marginLeft: '0px', marginRight: '-375.012px' }}>
<div className="about-three__img"> <div className="about-three__img">
<img src="/assets/images/careers/2/right-img.webp" alt="What we offer" /> <img loading="lazy" src="/assets/images/careers/2/right-img.webp" alt="What we offer" />
</div> </div>
</div> </div>
</div> </div>

15
src/components/home/AboutTwo.tsx
View File

@ -7,11 +7,13 @@ const AboutTwo = () => {
<section className="about-two"> <section className="about-two">
<div className="about-two__shape"></div> <div className="about-two__shape"></div>
<img <img
loading="lazy"
src="/assets/images/services/why/left-element.webp" src="/assets/images/services/why/left-element.webp"
alt="metatroncube canada" alt="metatroncube canada"
className="about-two__shape__two" className="about-two__shape__two"
/> />
<img <img
loading="lazy"
src="/assets/images/services/why/right-element.webp" src="/assets/images/services/why/right-element.webp"
alt="metatroncube digital solutions" alt="metatroncube digital solutions"
className="about-two__shape__three" className="about-two__shape__three"
@ -22,6 +24,7 @@ const AboutTwo = () => {
<div className="col-xl-6"> <div className="col-xl-6">
<div className="about-two__img"> <div className="about-two__img">
<img <img
loading="lazy"
src="/assets/images/services/choose/circle.webp" src="/assets/images/services/choose/circle.webp"
alt="about" alt="about"
/> />
@ -43,8 +46,8 @@ const AboutTwo = () => {
<ul className="about-two__list"> <ul className="about-two__list">
<li> <li>
<div className="about-two__list__icon-box"> <div className="about-two__list__icon-box">
{/* <img src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */} {/* <img loading="lazy" src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */}
<img src="/assets/images/services/why/icon-1.webp" alt="Latest Technology" className="about-two__list__icon" /> <img loading="lazy" src="/assets/images/services/why/icon-1.webp" alt="Latest Technology" className="about-two__list__icon" />
</div> </div>
<div className="about-two__list__content"> <div className="about-two__list__content">
<h3 className="about-two__list__title">Latest Technology</h3> <h3 className="about-two__list__title">Latest Technology</h3>
@ -53,8 +56,8 @@ const AboutTwo = () => {
</li> </li>
<li> <li>
<div className="about-two__list__icon-box"> <div className="about-two__list__icon-box">
{/* <img src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */} {/* <img loading="lazy" src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */}
<img src="/assets/images/services/why/icon-2.webp" alt="Certified Experts" className="about-two__list__icon" /> <img loading="lazy" src="/assets/images/services/why/icon-2.webp" alt="Certified Experts" className="about-two__list__icon" />
</div> </div>
<div className="about-two__list__content"> <div className="about-two__list__content">
<h4 className="about-two__list__title">Certified Experts</h4> <h4 className="about-two__list__title">Certified Experts</h4>
@ -63,8 +66,8 @@ const AboutTwo = () => {
</li> </li>
<li> <li>
<div className="about-two__list__icon-box"> <div className="about-two__list__icon-box">
{/* <img src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */} {/* <img loading="lazy" src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */}
<img src="/assets/images/services/why/icon-3.webp" alt="Get Reasonable Price" className="about-two__list__icon" /> <img loading="lazy" src="/assets/images/services/why/icon-3.webp" alt="Get Reasonable Price" className="about-two__list__icon" />
</div> </div>
<div className="about-two__list__content"> <div className="about-two__list__content">
<h4 className="about-two__list__title">Get Reasonable Price</h4> <h4 className="about-two__list__title">Get Reasonable Price</h4>

2
src/components/home/CounsellingSolutions.tsx
View File

@ -10,11 +10,13 @@ const CounsellingSolutions: React.FC = () => {
<div className="col-lg-6"> <div className="col-lg-6">
<div className="counselling-solutions__image"> <div className="counselling-solutions__image">
<img <img
loading="lazy"
src="/assets/images/home/4/back.webp" src="/assets/images/home/4/back.webp"
alt="Why choose metatroncube Software Solution" alt="Why choose metatroncube Software Solution"
className="counselling-solutions__image__one" className="counselling-solutions__image__one"
/> />
<img <img
loading="lazy"
src="/assets/images/home/4/front.webp" src="/assets/images/home/4/front.webp"
alt="Why choose Metatroncube Software Solution" alt="Why choose Metatroncube Software Solution"
className="counselling-solutions__image__two" className="counselling-solutions__image__two"

2
src/components/home/CounterAreaThree.tsx
View File

@ -87,7 +87,7 @@ const CounterAreaThree: React.FC = () => {
{counterItems.map((item, index) => ( {counterItems.map((item, index) => (
<li key={index} className="counter-area-three__item count-box"> <li key={index} className="counter-area-three__item count-box">
<div className="counter-area-three__icon"> <div className="counter-area-three__icon">
<img src={item.icon} alt={item.text} /> <img loading="lazy" src={item.icon} alt={item.text} />
</div> </div>
<div className="counter-area-three__content"> <div className="counter-area-three__content">
<h3 className="counter-area-three__count"> <h3 className="counter-area-three__count">

2
src/components/home/CounterAreaTwo.tsx
View File

@ -87,7 +87,7 @@ const CounterAreaTwo: React.FC = () => {
{counterItems.map((item, index) => ( {counterItems.map((item, index) => (
<li key={index} className="counter-area-two__item count-box"> <li key={index} className="counter-area-two__item count-box">
<div className="counter-area-two__icon"> <div className="counter-area-two__icon">
<img src={item.icon} alt={item.text} /> <img loading="lazy" src={item.icon} alt={item.text} />
</div> </div>
<div className="counter-area-two__content"> <div className="counter-area-two__content">
<h3 className="counter-area-two__count"> <h3 className="counter-area-two__count">

1
src/components/home/FaqFive.tsx
View File

@ -65,6 +65,7 @@ const FaqFive = () => {
<div className="pelocis-stretch-element-inside-column"> <div className="pelocis-stretch-element-inside-column">
<div className="faq-four__image2 text-center"> <div className="faq-four__image2 text-center">
<img <img
loading="lazy"
src="/assets/images/faq/3.webp" src="/assets/images/faq/3.webp"
alt="Metatroncube FAQs: web-apps, SEO, & digital marketing" alt="Metatroncube FAQs: web-apps, SEO, & digital marketing"
/> />

6
src/components/home/HistoryTwo.tsx
View File

@ -30,12 +30,12 @@ const HistoryTwo = () => {
<div className="col-md-6 d-none d-md-block"> <div className="col-md-6 d-none d-md-block">
<div className="history-two__images"> <div className="history-two__images">
<span className="history-two__images__date"></span> <span className="history-two__images__date"></span>
<img src="/assets/images/about/4/1.webp" alt="our mission" /> <img loading="lazy" src="/assets/images/about/4/1.webp" alt="our mission" />
</div> </div>
</div> </div>
<div className="col-md-6 d-none d-md-block"> <div className="col-md-6 d-none d-md-block">
<div className="history-two__images history-two__images--right"> <div className="history-two__images history-two__images--right">
<img src="/assets/images/about/4/2.webp" alt="our-vision" /> <img loading="lazy" src="/assets/images/about/4/2.webp" alt="our-vision" />
{/* <span className="history-two__images__date">2021</span> */} {/* <span className="history-two__images__date">2021</span> */}
</div> </div>
</div> </div>
@ -66,7 +66,7 @@ const HistoryTwo = () => {
<div className="col-md-6 d-none d-md-block"> <div className="col-md-6 d-none d-md-block">
<div className="history-two__images"> <div className="history-two__images">
<span className="history-two__images__date"></span> <span className="history-two__images__date"></span>
<img src="/assets/images/about/4/3.webp" alt="our values" /> <img loading="lazy" src="/assets/images/about/4/3.webp" alt="our values" />
</div> </div>
</div> </div>
</div> </div>

2
src/components/home/HomeContactOne.tsx
View File

@ -123,7 +123,7 @@ const HomeContactOne = () => {
<span className="fa-solid fa-location-dot"></span> <span className="fa-solid fa-location-dot"></span>
<div className="pl-5"> <div className="pl-5">
<h3 className="home-contact__card__list__title">Location</h3> <h3 className="home-contact__card__list__title">Location</h3>
<p className="home-contact__card__list__text">Canada</p> <p className="home-contact__card__list__text">Waterloo, Ontario Canada</p>
</div> </div>
<div className="home-contact__card__list__shape"></div> <div className="home-contact__card__list__shape"></div>
</li> </li>

4
src/components/home/HomeServiceOne.tsx
View File

@ -43,7 +43,7 @@ const HomeServiceOne: React.FC = () => {
<div className="home-services__card__shape--two"></div> <div className="home-services__card__shape--two"></div>
<div className="home-services__card__content"> <div className="home-services__card__content">
<div className="home-services__card__icon"> <div className="home-services__card__icon">
<img src={service.icon} alt="icon" width="42" height="42" /> <img loading="lazy" src={service.icon} alt="icon" width="42" height="42" />
</div> </div>
<h4 className="home-services__card__count">--</h4> <h4 className="home-services__card__count">--</h4>
<h2 className="home-services__card__title"> <h2 className="home-services__card__title">
@ -54,7 +54,7 @@ const HomeServiceOne: React.FC = () => {
</p> </p>
</div> </div>
<div className="home-services__card__image"> <div className="home-services__card__image">
<img src={service.image} alt={service.title} /> <img loading="lazy" src={service.image} alt={service.title} />
<div className="home-services__card__hover"> <div className="home-services__card__hover">
<Link href={`/service/${service.slug}`} className="home-services__card__hover-link"> <Link href={`/service/${service.slug}`} className="home-services__card__hover-link">
<i className="fa-solid fa-arrow-right"></i> <i className="fa-solid fa-arrow-right"></i>

13
src/components/home/PortfolioSection.tsx
View File

@ -40,7 +40,7 @@ function MonitorCard({ item, onOpen }: { item: (typeof PortfolioData)[0], onOpen
<div className="pf-monitor-wrap"> <div className="pf-monitor-wrap">
<div className="pf-monitor" onClick={onOpen} style={{ cursor: 'zoom-in' }}> <div className="pf-monitor" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
<div className="pf-monitor-screen"> <div className="pf-monitor-screen">
<img src={item.image} alt={item.alt} loading="lazy" /> <img loading="lazy" src={item.image} alt={item.alt} />
</div> </div>
<div className="pf-monitor-stand" /> <div className="pf-monitor-stand" />
<div className="pf-monitor-base" /> <div className="pf-monitor-base" />
@ -77,7 +77,7 @@ function GraphicCard({ item, onOpen }: { item: (typeof PortfolioData)[0], onOpen
<div className={`pf-pinned-item ${orientation}`}> <div className={`pf-pinned-item ${orientation}`}>
<div className="pf-pinned-paper" onClick={onOpen} style={{ cursor: 'zoom-in' }}> <div className="pf-pinned-paper" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
<div className="pf-pin" /> <div className="pf-pin" />
<img src={item.image} alt={item.alt} onLoad={handleLoad} loading="lazy" /> <img loading="lazy" src={item.image} alt={item.alt} onLoad={handleLoad} />
</div> </div>
<div className="pf-card-info"> <div className="pf-card-info">
<h4 className="pf-card-name">{item.name}</h4> <h4 className="pf-card-name">{item.name}</h4>
@ -91,7 +91,7 @@ function MetaCard({ item, onOpen }: { item: (typeof PortfolioData)[0], onOpen: (
return ( return (
<div className="pf-meta-wrap" onClick={onOpen} style={{ cursor: 'zoom-in' }}> <div className="pf-meta-wrap" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
<div className="pf-meta-screen"> <div className="pf-meta-screen">
<img src={item.image} alt={item.alt} loading="lazy" /> <img loading="lazy" src={item.image} alt={item.alt} />
<div className="pf-meta-overlay"> <div className="pf-meta-overlay">
<h4 className="pf-card-name" style={{ color: '#fff', margin: 0 }}>{item.name}</h4> <h4 className="pf-card-name" style={{ color: '#fff', margin: 0 }}>{item.name}</h4>
</div> </div>
@ -105,7 +105,7 @@ function LogoCard({ item, onOpen }: { item: (typeof PortfolioData)[0], onOpen: (
return ( return (
<div className="pf-logo-wrap" onClick={onOpen} style={{ cursor: 'zoom-in' }}> <div className="pf-logo-wrap" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
<div className="pf-logo-frame"> <div className="pf-logo-frame">
<img src={item.image} alt={item.alt} loading="lazy" /> <img loading="lazy" src={item.image} alt={item.alt} />
</div> </div>
<div className="pf-card-info"> <div className="pf-card-info">
<h3 className="pf-card-name">{item.name}</h3> <h3 className="pf-card-name">{item.name}</h3>
@ -149,7 +149,7 @@ function MobileCard({ item, onOpen }: { item: (typeof MobileAppServicesData)[0],
<div className="pf-phone"> <div className="pf-phone">
<div className="pf-phone-notch" /> <div className="pf-phone-notch" />
<div className="pf-phone-screen"> <div className="pf-phone-screen">
<img src={item.image} alt={item.alt} loading="lazy" /> <img loading="lazy" src={item.image} alt={item.alt} />
</div> </div>
<div className="pf-phone-home-btn" /> <div className="pf-phone-home-btn" />
</div> </div>
@ -173,7 +173,7 @@ function PortfolioLightbox({ item, onClose }: { item: any; onClose: () => void }
return ( return (
<div className="pf-lightbox-backdrop" onClick={onClose}> <div className="pf-lightbox-backdrop" onClick={onClose}>
<div className="pf-lightbox-content" onClick={(e) => e.stopPropagation()}> <div className="pf-lightbox-content" onClick={(e) => e.stopPropagation()}>
<img src={item.image} alt={item.alt || item.name} className="pf-lightbox-img" loading="lazy" /> <img loading="lazy" src={item.image} alt={item.alt || item.name} className="pf-lightbox-img" />
{/* <div className="pf-lightbox-details"> {/* <div className="pf-lightbox-details">
<h3>{item.name}</h3> <h3>{item.name}</h3>
</div> */} </div> */}
@ -224,6 +224,7 @@ export default function PortfolioSection() {
{TABS.map((tab) => ( {TABS.map((tab) => (
<button <button
key={tab.value} key={tab.value}
suppressHydrationWarning
className={`pf-tab-btn${activeTab === tab.value ? " active" : ""}`} className={`pf-tab-btn${activeTab === tab.value ? " active" : ""}`}
onClick={() => setActiveTab(tab.value)} onClick={() => setActiveTab(tab.value)}
> >

5
src/components/home/ProjectsSection.tsx
View File

@ -88,6 +88,7 @@ const ProjectsSection = () => {
{/* Row 1: All Items */} {/* Row 1: All Items */}
<div className="d-flex justify-content-center mb-4 pr-10"> <div className="d-flex justify-content-center mb-4 pr-10">
<button <button
suppressHydrationWarning
className={`list-unstyled-item ${activeFilter === "all" ? "active" : ""}`} className={`list-unstyled-item ${activeFilter === "all" ? "active" : ""}`}
onClick={() => setActiveFilter("all")} onClick={() => setActiveFilter("all")}
> >
@ -100,6 +101,7 @@ const ProjectsSection = () => {
{categories.slice(1, 4).map((cat, idx) => ( {categories.slice(1, 4).map((cat, idx) => (
<button <button
key={idx} key={idx}
suppressHydrationWarning
className={`list-unstyled-item ${activeFilter === cat.filter ? "active" : ""}`} className={`list-unstyled-item ${activeFilter === cat.filter ? "active" : ""}`}
onClick={() => setActiveFilter(cat.filter)} onClick={() => setActiveFilter(cat.filter)}
> >
@ -113,6 +115,7 @@ const ProjectsSection = () => {
{categories.slice(4, 7).map((cat, idx) => ( {categories.slice(4, 7).map((cat, idx) => (
<button <button
key={idx} key={idx}
suppressHydrationWarning
className={`list-unstyled-item ${activeFilter === cat.filter ? "active" : ""}`} className={`list-unstyled-item ${activeFilter === cat.filter ? "active" : ""}`}
onClick={() => setActiveFilter(cat.filter)} onClick={() => setActiveFilter(cat.filter)}
> >
@ -127,7 +130,7 @@ const ProjectsSection = () => {
{filteredProjects.map((project) => ( {filteredProjects.map((project) => (
<div key={project.id} className="project-item"> <div key={project.id} className="project-item">
<div className="projects-one__card" style={{ cursor: 'pointer' }} onClick={(e) => openPopup(project.title, e)}> <div className="projects-one__card" style={{ cursor: 'pointer' }} onClick={(e) => openPopup(project.title, e)}>
<img src={project.image} alt={project.title} /> <img loading="lazy" src={project.image} alt={project.title} />
<div className="projects-one__card__hover d-flex"> <div className="projects-one__card__hover d-flex">
<div className="projects-one__card__hover-mask"></div> <div className="projects-one__card__hover-mask"></div>
<div className="projects-one__card__hover-content-inner"> <div className="projects-one__card__hover-content-inner">

10
src/components/home/WhyChooseTwo.tsx
View File

@ -7,7 +7,7 @@ interface WhyChooseTwoProps {
const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => { const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
return ( return (
<section className="why-choose-two"> <section className="why-choose-two">
<img src="/assets/images/about/3/element-bottom-left.webp" alt="Agency that gets excited about element" className="why-choose-two__shape-three" /> <img loading="lazy" src="/assets/images/about/3/element-bottom-left.webp" alt="Agency that gets excited about element" className="why-choose-two__shape-three" />
<div className="container"> <div className="container">
<div className={`row ${reverse ? 'flex-row-reverse' : ''}`}> <div className={`row ${reverse ? 'flex-row-reverse' : ''}`}>
<div className="col-xl-6"> <div className="col-xl-6">
@ -28,7 +28,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
<li className="why-choose-two__item"> <li className="why-choose-two__item">
<div className="why-choose-two__count"></div> <div className="why-choose-two__count"></div>
<div className="why-choose-two__icon"> <div className="why-choose-two__icon">
<img src="/assets/images/about/3/icon-1.webp" alt="Urgent development solutions" /> <img loading="lazy" src="/assets/images/about/3/icon-1.webp" alt="Urgent development solutions" />
</div> </div>
<div className="why-choose-two__item__content"> <div className="why-choose-two__item__content">
<h3 className="why-choose-two__item__title">Urgent development solutions</h3> <h3 className="why-choose-two__item__title">Urgent development solutions</h3>
@ -40,7 +40,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
<li className="why-choose-two__item"> <li className="why-choose-two__item">
<div className="why-choose-two__count"></div> <div className="why-choose-two__count"></div>
<div className="why-choose-two__icon"> <div className="why-choose-two__icon">
<img src="/assets/images/about/3/icon-2.webp" alt="Top quality services with reasonable price" /> <img loading="lazy" src="/assets/images/about/3/icon-2.webp" alt="Top quality services with reasonable price" />
</div> </div>
<div className="why-choose-two__item__content"> <div className="why-choose-two__item__content">
<h3 className="why-choose-two__item__title">Top quality services with reasonable price</h3> <h3 className="why-choose-two__item__title">Top quality services with reasonable price</h3>
@ -52,7 +52,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
<li className="why-choose-two__item"> <li className="why-choose-two__item">
<div className="why-choose-two__count"></div> <div className="why-choose-two__count"></div>
<div className="why-choose-two__icon"> <div className="why-choose-two__icon">
<img src="/assets/images/about/3/icon-3.webp" alt="Professional & experienced team" /> <img loading="lazy" src="/assets/images/about/3/icon-3.webp" alt="Professional & experienced team" />
</div> </div>
<div className="why-choose-two__item__content"> <div className="why-choose-two__item__content">
<h3 className="why-choose-two__item__title">Professional & experienced team</h3> <h3 className="why-choose-two__item__title">Professional & experienced team</h3>
@ -68,7 +68,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
<div className="col-xl-6"> <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="pelocis-stretch-element-inside-column" style={reverse ? { marginLeft: '-227.812px', marginRight: '0px' } : { marginLeft: '0px', marginRight: '-267.812px' }}>
<div className="why-choose-two__shape-one"> <div className="why-choose-two__shape-one">
<img src="/assets/images/about/3/right-img.webp" alt="Agency that gets excited about" /> <img loading="lazy" src="/assets/images/about/3/right-img.webp" alt="Agency that gets excited about" />
</div> </div>
<div className="why-choose-two__shape-two"></div> <div className="why-choose-two__shape-two"></div>
</div> </div>

10
src/components/home/home-1/AboutSection.tsx
View File

@ -14,11 +14,11 @@ const AboutSection = () => {
<div className="about-us-image-area p-relative wow fadeInRight" data-wow-delay=".5s"> <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/imgs/shapes/shape-6.png)" }}></div>
<figure className="image-1"> <figure className="image-1">
<img src="/assets/images/about/about.webp" alt="comprehensive digital strategies" /> <img loading="lazy" src="/assets/images/about/about.webp" alt="comprehensive digital strategies" />
</figure> </figure>
{/* <div className="image-2-area"> {/* <div className="image-2-area">
<div className="image-2 p-relative"> <div className="image-2 p-relative">
<img src="/assets/img/about/about-img7.png" alt="" /> <img loading="lazy" src="/assets/img/about/about-img7.png" alt="" />
<div className="play-btn"> <div className="play-btn">
<div className="video_player_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> <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
@ -49,7 +49,7 @@ const AboutSection = () => {
<p className="mb-35 wow fadeInLeft" data-wow-delay=".5s">Partner with Metatroncube Software Solution 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> <p className="mb-35 wow fadeInLeft" data-wow-delay=".5s">Partner with Metatroncube Software Solution 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-box mb-20 wow fadeInLeft" data-wow-delay=".8s">
<div className="icon"> <div className="icon">
<img src="/assets/images/home/2/icon-1.webp" alt="Exceptional Digital Quality" /> <img loading="lazy" src="/assets/images/home/2/icon-1.webp" alt="Exceptional Digital Quality" />
</div> </div>
<div className="content"> <div className="content">
<h5>Exceptional Digital Quality</h5> <h5>Exceptional Digital Quality</h5>
@ -58,7 +58,7 @@ const AboutSection = () => {
</div> </div>
<div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s"> <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
<div className="icon"> <div className="icon">
<img src="/assets/images/home/2/icon-2.webp" alt="Expertise in innovation" /> <img loading="lazy" src="/assets/images/home/2/icon-2.webp" alt="Expertise in innovation" />
</div> </div>
<div className="content"> <div className="content">
<h5>Expertise in innovation</h5> <h5>Expertise in innovation</h5>
@ -67,7 +67,7 @@ const AboutSection = () => {
</div> </div>
<div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s"> <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
<div className="icon"> <div className="icon">
<img src="/assets/images/home/2/icon-3.webp" alt="Comprehensive web solutions" /> <img loading="lazy" src="/assets/images/home/2/icon-3.webp" alt="Comprehensive web solutions" />
</div> </div>
<div className="content"> <div className="content">
<h5>Comprehensive web solutions</h5> <h5>Comprehensive web solutions</h5>

14
src/components/home/home-1/BannerSection.tsx
View File

@ -120,12 +120,12 @@ const BannerSection = () => {
{/* Right Side: Floating Image Group + Category Slider */} {/* Right Side: Floating Image Group + Category Slider */}
<div className="hero-right-content" suppressHydrationWarning> <div className="hero-right-content" suppressHydrationWarning>
<div className="hero-img-group" suppressHydrationWarning> <div className="hero-img-group" suppressHydrationWarning>
{/* <img src="https://modinatheme.com/html/printnow-html/assets/img/hero/t-shirt-bg.png" alt="shape" className="circle-shape" /> */} {/* <img loading="lazy" src="https://modinatheme.com/html/printnow-html/assets/img/hero/t-shirt-bg.png" alt="shape" className="circle-shape" /> */}
<img src={banner.images.center} alt="t-shirt" className="main-shirt" /> <img loading="lazy" src={banner.images.center} alt="t-shirt" className="main-shirt" />
{/* <img src="https://modinatheme.com/html/printnow-html/assets/img/hero/mockup-shape.png" alt="shape" className="mockup-shape" /> */} {/* <img loading="lazy" src="https://modinatheme.com/html/printnow-html/assets/img/hero/mockup-shape.png" alt="shape" className="mockup-shape" /> */}
<img src={banner.images.leftBottom} alt="shape" className="cup-shape" /> <img loading="lazy" src={banner.images.leftBottom} alt="shape" className="cup-shape" />
<img src={banner.images.topRight} alt="shape" className="t-shirt-shape" /> <img loading="lazy" src={banner.images.topRight} alt="shape" className="t-shirt-shape" />
<img src={banner.images.rightBottom} alt="shape" className="cap-shape" /> <img loading="lazy" src={banner.images.rightBottom} alt="shape" className="cap-shape" />
</div> </div>
{/* Bottom Right "Our Service" Slider */} {/* Bottom Right "Our Service" Slider */}
@ -150,7 +150,7 @@ const BannerSection = () => {
<div key={idx} className="slider-item" suppressHydrationWarning> <div key={idx} className="slider-item" suppressHydrationWarning>
<div className="slider-image-node" suppressHydrationWarning> <div className="slider-image-node" suppressHydrationWarning>
<a href={cat.link}> <a href={cat.link}>
<img src={cat.image} alt={cat.title} /> <img loading="lazy" src={cat.image} alt={cat.title} />
</a> </a>
</div> </div>
<div className="slider-category-title" suppressHydrationWarning> <div className="slider-category-title" suppressHydrationWarning>

4
src/components/home/home-1/BlogSection.tsx
View File

@ -151,7 +151,7 @@ const BlogSection = ({
<div key={blog.id} className="blog-slider-item px-3"> <div key={blog.id} className="blog-slider-item px-3">
<div className="blog-style-one relative overflow-hidden"> <div className="blog-style-one relative overflow-hidden">
<Link className="blog-image w-img block relative" href={`/${blog.slug}`}> <Link className="blog-image w-img block relative" href={`/${blog.slug}`}>
<img src={blog.image} alt={blog.title} /> <img loading="lazy" src={blog.image} alt={blog.title} />
<span className="blog-category-tag">{blog.category}</span> <span className="blog-category-tag">{blog.category}</span>
</Link> </Link>
<div className="blog-content"> <div className="blog-content">
@ -180,7 +180,7 @@ const BlogSection = ({
<div key={blog.id} className={columns}> <div key={blog.id} className={columns}>
<div className="blog-style-one relative overflow-hidden"> <div className="blog-style-one relative overflow-hidden">
<Link className="blog-image w-img block relative" href={`/${blog.slug}`}> <Link className="blog-image w-img block relative" href={`/${blog.slug}`}>
<img src={blog.image} alt={blog.title} /> <img loading="lazy" src={blog.image} alt={blog.title} />
<span className="blog-category-tag">{blog.category}</span> <span className="blog-category-tag">{blog.category}</span>
</Link> </Link>
<div className="blog-content"> <div className="blog-content">

4
src/components/home/home-1/ChooseSection.tsx
View File

@ -20,7 +20,7 @@ const ChooseSection = () => (
</p> </p>
<div className="faq-one__card"> <div className="faq-one__card">
<div className="faq-one__img"> <div className="faq-one__img">
<img src="/assets/images/home/2/small-img.webp" alt="Located in the Kitchener and Waterloo regions" /> <img loading="lazy" src="/assets/images/home/2/small-img.webp" alt="Located in the Kitchener and Waterloo regions" />
</div> </div>
<div className="faq-one__content"> <div className="faq-one__content">
<ul className="faq-one__list list-unstyled"> <ul className="faq-one__list list-unstyled">
@ -34,7 +34,7 @@ const ChooseSection = () => (
</div> </div>
</div> </div>
<div className="col-xxl-6 col-xl-6 col-lg-12 col-md-12 wow fadeInLeft" data-wow-delay="1.2s"> <div className="col-xxl-6 col-xl-6 col-lg-12 col-md-12 wow fadeInLeft" data-wow-delay="1.2s">
<figure className="image m-img"><img src="/assets/images/home/3/right-img.webp" alt="Diverse team collaborating over a laptop in an office setting." /></figure> <figure className="image m-img"><img loading="lazy" src="/assets/images/home/3/right-img.webp" alt="Diverse team collaborating over a laptop in an office setting." /></figure>
</div> </div>
</div> </div>
</div> </div>

2
src/components/home/home-1/CtaSection.tsx
View File

@ -5,7 +5,7 @@ const CtaSection = () => (
<div className="small-container"> <div className="small-container">
<div className="row g-0 box-shadow-1 fix"> <div className="row g-0 box-shadow-1 fix">
<div className="col-xxl-6 col-lg-6 bg-white"> <div className="col-xxl-6 col-lg-6 bg-white">
<figure className="image w-img"><img src="/assets/images/home/4/lets-discuss.webp" alt="Welcoming young woman smiling, embodying customer-focused service." /></figure> <figure className="image w-img"><img loading="lazy" src="/assets/images/home/4/lets-discuss.webp" alt="Welcoming young woman smiling, embodying customer-focused service." /></figure>
</div> </div>
<div className="col-xxl-6 col-lg-6"> <div className="col-xxl-6 col-lg-6">
<div className="content p-relative"> <div className="content p-relative">

4
src/components/home/home-1/TestimonialsSection.tsx
View File

@ -86,7 +86,7 @@ const TestimonialsSection = ({ className = "section-space" }: { className?: stri
<div className="row g-0"> <div className="row g-0">
<div className="col-xxl-4 col-xl-4 col-lg-12"> <div className="col-xxl-4 col-xl-4 col-lg-12">
<div className="testimonials-video-area p-relative"> <div className="testimonials-video-area p-relative">
<figure className="image w-img"><img src="/assets/images/about/6/left.webp" alt="What they're talking about us" /></figure> <figure className="image w-img"><img loading="lazy" src="/assets/images/about/6/left.webp" alt="What they're talking about us" /></figure>
</div> </div>
</div> </div>
<div className="col-xxl-8 col-xl-8 col-lg-12"> <div className="col-xxl-8 col-xl-8 col-lg-12">
@ -125,7 +125,7 @@ const TestimonialsSection = ({ className = "section-space" }: { className?: stri
<div key={index} style={{ outline: 'none', padding: '10px 15px 40px 10px' }}> <div key={index} style={{ outline: 'none', padding: '10px 15px 40px 10px' }}>
<div className="testimonials-two-box-solid"> <div className="testimonials-two-box-solid">
<div className="author-image-solid"> <div className="author-image-solid">
<img src={profileImg} alt={name} /> <img loading="lazy" src={profileImg} alt={name} />
</div> </div>
<div className="icon-quote-testi"> <div className="icon-quote-testi">
<i className="fa-solid fa-quote-right"></i> <i className="fa-solid fa-quote-right"></i>

4
src/components/home/home-2/About2Section.tsx
View File

@ -9,10 +9,10 @@ const About2Section = () => (
<div className="col-xxl-6 col-xl-6 col-lg-6 col-md-12"> <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"> <div className="about-2-image-area p-relative wow fadeInLeft" data-wow-delay="500ms">
<figure className="main-image m-img"> <figure className="main-image m-img">
<img src="/assets/images/about/1/grid.webp" alt="Our story" loading="lazy" /> <img loading="lazy" src="/assets/images/about/1/grid.webp" alt="Our story" />
</figure> </figure>
{/* <div className="small-image"> {/* <div className="small-image">
<img src="/assets/imgs/about/about-4.jpg" alt="" /> <img loading="lazy" src="/assets/imgs/about/about-4.jpg" alt="" />
</div> */} </div> */}
{/* <div className="icon-box"> {/* <div className="icon-box">
<div className="icon"> <div className="icon">

2
src/components/home/home-2/WorkProcessSection.tsx
View File

@ -21,7 +21,7 @@ const WorkProcessSection = () => (
<div key={i} className="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12"> <div key={i} className="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div className="work-process-box text-center"> <div className="work-process-box text-center">
<div className="icon-box p-relative"> <div className="icon-box p-relative">
<img src={`/assets/images/services/process/${proc.icon}`} alt={proc.desc} /> <img loading="lazy" src={`/assets/images/services/process/${proc.icon}`} alt={proc.desc} />
<span>{proc.num}</span> <span>{proc.num}</span>
</div> </div>
<div className="content"> <div className="content">

6
src/components/home/home-3/ChooseSection.tsx
View File

@ -10,11 +10,11 @@ const ChooseSection = () => (
<div className="choose-3-image-area p-relative"> <div className="choose-3-image-area p-relative">
<div className="shape-1" style={{ backgroundImage: "url(/assets/images/services/choose/element-2.webp)" }}></div> <div className="shape-1" style={{ backgroundImage: "url(/assets/images/services/choose/element-2.webp)" }}></div>
<figure className="image w-img"> <figure className="image w-img">
<img src="/assets/images/services/choose/grid.webp" alt="Crafting tailored digital solutions for every need" /> <img loading="lazy" src="/assets/images/services/choose/grid.webp" alt="Crafting tailored digital solutions for every need" />
</figure> </figure>
{/* <div className="image-3-area"> {/* <div className="image-3-area">
<div className="image-3 p-relative"> <div className="image-3 p-relative">
<img src="/assets/imgs/about/about-2.jpg" alt="" /> <img loading="lazy" src="/assets/imgs/about/about-2.jpg" alt="" />
<div className="play-btn"> <div className="play-btn">
<div className="video_player_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> <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
@ -43,7 +43,7 @@ const ChooseSection = () => (
<div key={i} className="col-lg-6"> <div key={i} className="col-lg-6">
<div className="icon-box-area"> <div className="icon-box-area">
<div className="icon-box"> <div className="icon-box">
{item.isIcon ? <i className={item.icon}></i> : <img src={`/assets/imgs/icon/${item.icon}`} alt="img" />} {item.isIcon ? <i className={item.icon}></i> : <img loading="lazy" src={`/assets/imgs/icon/${item.icon}`} alt="img" />}
</div> </div>
<h5><a href="#">{item.label}</a></h5> <h5><a href="#">{item.label}</a></h5>
</div> </div>

10
src/components/layout/CTA/CTA.tsx
View File

@ -23,24 +23,24 @@ const CTA = () => {
<div className="col-lg-3"></div> <div className="col-lg-3"></div>
<div className="col-lg-4"> <div className="col-lg-4">
<div className="cta-images"> <div className="cta-images">
<img src="/assets/img/home/section10/bg-element.webp" alt="" className="elements7 keyframe5" /> <img loading="lazy" src="/assets/img/home/section10/bg-element.webp" alt="" className="elements7 keyframe5" />
<div className="img1"> <div className="img1">
<img src="/assets/img/home/section10/right-image.webp" alt="" /> <img loading="lazy" src="/assets/img/home/section10/right-image.webp" alt="" />
</div> </div>
<ul className="aniamtion-key-1"> <ul className="aniamtion-key-1">
<li> <li>
<a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}> <a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}>
<img src="/assets/img/icons/check5.svg" alt="" />Get Free Consultation <img loading="lazy" src="/assets/img/icons/check5.svg" alt="" />Get Free Consultation
</a> </a>
</li> </li>
<li> <li>
<a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}> <a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}>
<img src="/assets/img/icons/check5.svg" alt="" /> Request Pricing <img loading="lazy" src="/assets/img/icons/check5.svg" alt="" /> Request Pricing
</a> </a>
</li> </li>
<li> <li>
<a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}> <a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}>
<img src="/assets/img/icons/check5.svg" alt="" />Talk to an Expert <img loading="lazy" src="/assets/img/icons/check5.svg" alt="" />Talk to an Expert
</a> </a>
</li> </li>
</ul> </ul>

2
src/components/layout/Footer1.tsx
View File

@ -47,7 +47,7 @@ const Footer1 = () => {
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6"> <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
<div className="footer-widget-1"> <div className="footer-widget-1">
<figure className="image"> <figure className="image">
<img src="/assets/images/logo/white-logo-2.png" alt="footer logo" /> <img loading="lazy" src="/assets/images/logo/white-logo-2.png" alt="footer logo" />
</figure> </figure>
<p className="mt-20 mb-40">Metatroncube Software Solution: Where innovation meets execution to elevate your digital presence. Partner with us for bespoke web and app development that powers your business growth.</p> <p className="mt-20 mb-40">Metatroncube Software Solution: 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 mb-20"> <div className="footer-socials mb-20">

2
src/components/layout/Header/MobileMenu.tsx
View File

@ -28,7 +28,7 @@ const MobileMenu: React.FC<MobileMenuProps> = ({ isMobileMenuOpen, toggleMobileM
<div className="vl-offcanvas-header d-flex justify-content-between align-items-center mb-90"> <div className="vl-offcanvas-header d-flex justify-content-between align-items-center mb-90">
<div className="vl-offcanvas-logo"> <div className="vl-offcanvas-logo">
<Link href="#home" onClick={toggleMobileMenu}> <Link href="#home" onClick={toggleMobileMenu}>
<img src="/assets/img/logo.webp" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} /> <img loading="lazy" src="/assets/img/logo.webp" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} />
</Link> </Link>
</div> </div>
<div className="vl-offcanvas-close"> <div className="vl-offcanvas-close">

2
src/components/layout/Header1.tsx
View File

@ -38,7 +38,7 @@ const Header1 = () => {
<div className="col-lg-3 col-md-6 col-9"> <div className="col-lg-3 col-md-6 col-9">
<div className="vl-logo"> <div className="vl-logo">
<Link href="/"> <Link href="/">
<img src="/assets/images/logo/white-logo-2.png" alt="header logo" style={{ width: '100%', maxWidth: '260px', height: 'auto', transition: 'all 0.3s' }} /> <img loading="lazy" src="/assets/images/logo/white-logo-2.png" alt="header logo" style={{ width: '100%', maxWidth: '260px', height: 'auto', transition: 'all 0.3s' }} />
</Link> </Link>
</div> </div>
</div> </div>

7
src/components/mobile-app-development-service/About.tsx
View File

@ -8,13 +8,14 @@ const About = () => {
const [isContactOpen, setIsContactOpen] = useState(false); const [isContactOpen, setIsContactOpen] = useState(false);
return ( return (
<div className="about1-section-area sp1" id="about"> <div className="about1-section-area sp1" id="about">
<img src="/assets/img-app/elements/elements9.png" alt="" className="elements9" /> <img loading="lazy" src="/assets/img-app/elements/elements9.png" alt="" className="elements9" />
<div className="container"> <div className="container">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-lg-6"> <div className="col-lg-6">
<div className="about-images-area" style={{ position: 'relative' }}> <div className="about-images-area" style={{ position: 'relative' }}>
<img src="/assets/img-app/elements/elements10.png" alt="" className="elements10" /> <img loading="lazy" src="/assets/img-app/elements/elements10.png" alt="" className="elements10" />
<img <img
loading="lazy"
src="/assets/img-app/home/section2/about.webp" src="/assets/img-app/home/section2/about.webp"
alt="About Metatroncube Software Solution" alt="About Metatroncube Software Solution"
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', borderRadius: '12px' }} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', borderRadius: '12px' }}
@ -26,7 +27,7 @@ const About = () => {
<div className="col-lg-5"> <div className="col-lg-5">
<div className="about-glass-container about-header-area heading2"> <div className="about-glass-container about-header-area heading2">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>About Metatroncube Software Solution</h5> <h5><span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>About Metatroncube Software Solution</h5>
</GsapReveal> </GsapReveal>
<div className="space24"></div> <div className="space24"></div>
<GsapReveal y={20} delay={0.2}> <GsapReveal y={20} delay={0.2}>

5
src/components/mobile-app-development-service/BannerBottom.tsx
View File

@ -59,7 +59,7 @@ const BannerBottom = () => {
{floatingItems.map((item, idx) => ( {floatingItems.map((item, idx) => (
<div key={item.className} className={`floating-item ${item.className}`}> <div key={item.className} className={`floating-item ${item.className}`}>
<div className={`floating-circle ${idx % 2 === 0 ? 'floating-slow' : 'floating-fast'}`}> <div className={`floating-circle ${idx % 2 === 0 ? 'floating-slow' : 'floating-fast'}`}>
<img src={item.icon} alt={item.title} /> <img loading="lazy" src={item.icon} alt={item.title} />
</div> </div>
<div className="floating-content"> <div className="floating-content">
<h6>{item.title}</h6> <h6>{item.title}</h6>
@ -71,6 +71,7 @@ const BannerBottom = () => {
{/* Central hero image */} {/* Central hero image */}
<img <img
loading="lazy"
src="/assets/img-app/home/section1/second-section-centre-img.webp" src="/assets/img-app/home/section1/second-section-centre-img.webp"
alt="Digital Solutions Illustration" alt="Digital Solutions Illustration"
className="main-delivery-img img-fluid mt-2" className="main-delivery-img img-fluid mt-2"
@ -118,7 +119,7 @@ const BannerBottom = () => {
}} }}
> >
<div className="call-icon-bg" style={{ width: '40px', height: '40px' }}> <div className="call-icon-bg" style={{ width: '40px', height: '40px' }}>
<img src="/assets/img-app/icons/phn1.svg" alt="Phone Icon" /> <img loading="lazy" src="/assets/img-app/icons/phn1.svg" alt="Phone Icon" />
</div> </div>
<div className="call-details ms-2"> <div className="call-details ms-2">
<span style={{ color: '#fff', fontWeight: 600, fontSize: '16px' }}>Speak With Our App Experts Today </span> <span style={{ color: '#fff', fontWeight: 600, fontSize: '16px' }}>Speak With Our App Experts Today </span>

4
src/components/mobile-app-development-service/BrandSlider.tsx
View File

@ -64,7 +64,7 @@ const BrandSlider = () => {
<div className="col-lg-8 m-auto text-center"> <div className="col-lg-8 m-auto text-center">
<div className="brand-header heading2 text-center"> <div className="brand-header heading2 text-center">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Our Partners</h5> <h5><span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Our Partners</h5>
</GsapReveal> </GsapReveal>
<div className="space24"></div> <div className="space24"></div>
<GsapReveal y={20} delay={0.2}> <GsapReveal y={20} delay={0.2}>
@ -84,7 +84,7 @@ const BrandSlider = () => {
<Slider {...settings}> <Slider {...settings}>
{brands.map((brand) => ( {brands.map((brand) => (
<div key={brand.id} className="brand-item"> <div key={brand.id} className="brand-item">
<img src={brand.src} alt={brand.alt} /> <img loading="lazy" src={brand.src} alt={brand.alt} />
</div> </div>
))} ))}
</Slider> </Slider>

12
src/components/mobile-app-development-service/CaseStudies.tsx
View File

@ -64,12 +64,12 @@ const CaseStudies = () => {
return ( return (
<section className="case-studies-section sp1 position-relative" id="portfolio" style={{ overflow: 'hidden' }}> <section className="case-studies-section sp1 position-relative" id="portfolio" style={{ overflow: 'hidden' }}>
<img src="/assets/img-app/home/section6/1.webp" alt="" className="case-floating-element case-el-left-3" /> <img loading="lazy" src="/assets/img-app/home/section6/1.webp" alt="" className="case-floating-element case-el-left-3" />
<img src="/assets/img-app/home/section6/2.webp" alt="" className="case-floating-element case-el-left-4" /> <img loading="lazy" src="/assets/img-app/home/section6/2.webp" alt="" className="case-floating-element case-el-left-4" />
{/* Floating Elements - Right (4) */} {/* Floating Elements - Right (4) */}
<img src="/assets/img-app/home/section6/3.webp" alt="" className="case-floating-element case-el-right-1" /> <img loading="lazy" src="/assets/img-app/home/section6/3.webp" alt="" className="case-floating-element case-el-right-1" />
<img src="/assets/img-app/home/section6/4.webp" alt="" className="case-floating-element case-el-right-2" /> <img loading="lazy" src="/assets/img-app/home/section6/4.webp" alt="" className="case-floating-element case-el-right-2" />
<div className="container"> <div className="container">
@ -80,7 +80,7 @@ const CaseStudies = () => {
<div className="consen-section-title upper text-center pb-80 heading2"> <div className="consen-section-title upper text-center pb-80 heading2">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}> <h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}>
<span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span> <span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>
Case Studies Case Studies
</h5> </h5>
</GsapReveal> </GsapReveal>
@ -156,7 +156,6 @@ const CaseStudies = () => {
width={200} width={200}
height={200} height={200}
className="loaded" className="loaded"
priority
/> />
</div> </div>
<div className="mobile-home-btn"></div> <div className="mobile-home-btn"></div>
@ -188,6 +187,7 @@ const CaseStudies = () => {
{/* Lightbox Component */} {/* Lightbox Component */}
<ImageLightbox <ImageLightbox
isOpen={isLightboxOpen} isOpen={isLightboxOpen}
onClose={closeLightbox} onClose={closeLightbox}
imageUrl={selectedImage || ""} imageUrl={selectedImage || ""}

10
src/components/mobile-app-development-service/CaseStudy.tsx
View File

@ -58,12 +58,12 @@ const CaseStudy = () => {
</div> </div>
<div className="col-lg-4"> <div className="col-lg-4">
<div className="images" data-aos="zoom-in" data-aos-duration="1000"> <div className="images" data-aos="zoom-in" data-aos-duration="1000">
<img src="/assets/img-app/elements/elements43.png" alt="" className="elements43" /> <img loading="lazy" src="/assets/img-app/elements/elements43.png" alt="" className="elements43" />
<img src="/assets/img-app/elements/elements27.png" alt="" className="elements27" /> <img loading="lazy" src="/assets/img-app/elements/elements27.png" alt="" className="elements27" />
<img src="/assets/img-app/elements/elements30.png" alt="" className="elements30" /> <img loading="lazy" src="/assets/img-app/elements/elements30.png" alt="" className="elements30" />
<img src="/assets/img-app/elements/elements39.png" alt="" className="elements39" /> <img loading="lazy" src="/assets/img-app/elements/elements39.png" alt="" className="elements39" />
<div className="img1"> <div className="img1">
<img src="/assets/img-app/all-images/case/case-img4.png" alt="" /> <img loading="lazy" src="/assets/img-app/all-images/case/case-img4.png" alt="" />
</div> </div>
</div> </div>
</div> </div>

3
src/components/mobile-app-development-service/FAQ.tsx
View File

@ -97,7 +97,7 @@ const FAQ = () => {
<div className="space-margin60"> <div className="space-margin60">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5 className="faqv2-subtitle"> <h5 className="faqv2-subtitle">
<span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span> <span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>
FAQ FAQ
</h5> </h5>
</GsapReveal> </GsapReveal>
@ -139,6 +139,7 @@ const FAQ = () => {
<div className="faqv2-center-wrap"> <div className="faqv2-center-wrap">
<div className="faqv2-main-img"> <div className="faqv2-main-img">
<img <img
loading="lazy"
src="/assets/img-app/home/section9/faq.webp" src="/assets/img-app/home/section9/faq.webp"
alt="FAQ Section" alt="FAQ Section"
/> />

14
src/components/mobile-app-development-service/Hero.tsx
View File

@ -11,8 +11,8 @@ const Hero = () => {
return ( return (
<div className="hero1-section-area" id="home"> <div className="hero1-section-area" id="home">
<img src="/assets/img-app/elements/elements4.png" alt="" className="elements4" /> <img loading="lazy" src="/assets/img-app/elements/elements4.png" alt="" className="elements4" />
<img src="/assets/img-app/elements/elements5.png" alt="" className="elements5" /> <img loading="lazy" src="/assets/img-app/elements/elements5.png" alt="" className="elements5" />
<div className="container"> <div className="container">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-lg-7"> <div className="col-lg-7">
@ -40,19 +40,19 @@ const Hero = () => {
<div className="col-lg-5"> <div className="col-lg-5">
<div className="hero-images-area"> <div className="hero-images-area">
<div className="img1" data-aos="zoom-in" data-aos-duration="1000"> <div className="img1" data-aos="zoom-in" data-aos-duration="1000">
<img src="/assets/img-app/home/banner/centre-img.webp" alt="" /> <img loading="lazy" src="/assets/img-app/home/banner/centre-img.webp" alt="" />
</div> </div>
{/* <div className="image-bg1"> {/* <div className="image-bg1">
<img src="/assets/img-app/all-images/bg/hero-bg2.png" alt="" className="keyframe5" /> <img loading="lazy" src="/assets/img-app/all-images/bg/hero-bg2.png" alt="" className="keyframe5" />
</div> */} </div> */}
<div className="elements1"> <div className="elements1">
<img src="/assets/img-app/home/banner/left-element.webp" alt="" className="animation-1 floating-slow" /> <img loading="lazy" src="/assets/img-app/home/banner/left-element.webp" alt="" className="animation-1 floating-slow" />
</div> </div>
<div className="elements2"> <div className="elements2">
<img src="/assets/img-app/home/banner/bottom-element.webp" alt="" className="animation-2 floating-fast" /> <img loading="lazy" src="/assets/img-app/home/banner/bottom-element.webp" alt="" className="animation-2 floating-fast" />
</div> </div>
<div className="elements3"> <div className="elements3">
<img src="/assets/img-app/home/banner/right-element.webp" alt="" className="animation-3 floating-slow" /> <img loading="lazy" src="/assets/img-app/home/banner/right-element.webp" alt="" className="animation-3 floating-slow" />
</div> </div>
</div> </div>
</div> </div>

3
src/components/mobile-app-development-service/Pricing.tsx
View File

@ -13,7 +13,7 @@ const Pricing = () => {
<div className="consen-section-title upper text-center pb-60 heading2"> <div className="consen-section-title upper text-center pb-60 heading2">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}> <h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}>
<span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span> <span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>
Pricing Plans Pricing Plans
</h5> </h5>
</GsapReveal> </GsapReveal>
@ -71,6 +71,7 @@ const Pricing = () => {
{plan.features.map((feature, i) => ( {plan.features.map((feature, i) => (
<li key={i} className="d-flex align-items-center mb-3" style={{ color: plan.isPopular ? '#fff' : '#4a5568', fontSize: '16px' }}> <li key={i} className="d-flex align-items-center mb-3" style={{ color: plan.isPopular ? '#fff' : '#4a5568', fontSize: '16px' }}>
<img <img
loading="lazy"
src={plan.isPopular ? "/assets/img/arrow-white.png" : "/assets/img/arrow.png"} src={plan.isPopular ? "/assets/img/arrow-white.png" : "/assets/img/arrow.png"}
alt="" alt=""
style={{ width: '20px', height: '20px', objectFit: 'contain', marginRight: '10px' }} style={{ width: '20px', height: '20px', objectFit: 'contain', marginRight: '10px' }}

2
src/components/mobile-app-development-service/Service.tsx
View File

@ -16,7 +16,7 @@ const Service = () => {
<div className="col-lg-7"> <div className="col-lg-7">
<div className="service-header heading2"> <div className="service-header heading2">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5 className="text-white"><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Our Services</h5> <h5 className="text-white"><span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Our Services</h5>
</GsapReveal> </GsapReveal>
<div className="space24"></div> <div className="space24"></div>
<GsapReveal y={20} delay={0.15}> <GsapReveal y={20} delay={0.15}>

8
src/components/mobile-app-development-service/Testimonial.tsx
View File

@ -86,7 +86,7 @@ const Testimonial = () => {
<div className="col-lg-7 m-auto"> <div className="col-lg-7 m-auto">
<div className="testimonial-header text-center heading2 space-margin60"> <div className="testimonial-header text-center heading2 space-margin60">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Testimonials</h5> <h5><span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Testimonials</h5>
</GsapReveal> </GsapReveal>
<div className="space20"></div> <div className="space20"></div>
<GsapReveal y={20} delay={0.2}> <GsapReveal y={20} delay={0.2}>
@ -108,7 +108,7 @@ const Testimonial = () => {
<div className="col-lg-5"> <div className="col-lg-5">
<GsapReveal y={30} duration={1}> <GsapReveal y={30} duration={1}>
<div className="testimonial-img-single" style={{ borderRadius: '24px', overflow: 'hidden' }}> <div className="testimonial-img-single" style={{ borderRadius: '24px', overflow: 'hidden' }}>
<img src="/assets/img-app/home/section8/left.webp" alt="Testimonials" /> <img loading="lazy" src="/assets/img-app/home/section8/left.webp" alt="Testimonials" />
</div> </div>
</GsapReveal> </GsapReveal>
</div> </div>
@ -139,7 +139,7 @@ const Testimonial = () => {
position: 'relative', position: 'relative',
transition: 'transform 0.3s ease' transition: 'transform 0.3s ease'
}}> }}>
<img src="/assets/img-app/icons/quito1.svg" alt="" style={{ position: 'absolute', right: 30, top: 30, opacity: 0.15, width: 50 }} /> <img loading="lazy" src="/assets/img-app/icons/quito1.svg" alt="" style={{ position: 'absolute', right: 30, top: 30, opacity: 0.15, width: 50 }} />
{/* Stars */} {/* Stars */}
<div className="stars" style={{ display: 'flex', gap: '6px', marginBottom: '25px' }}> <div className="stars" style={{ display: 'flex', gap: '6px', marginBottom: '25px' }}>
@ -179,7 +179,7 @@ const Testimonial = () => {
flexShrink: 0 flexShrink: 0
}}> }}>
{profileImg ? ( {profileImg ? (
<img src={profileImg} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> <img loading="lazy" src={profileImg} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
) : ( ) : (
<span style={{ fontWeight: 'bold', color: '#fff' }}>{getInitials(name)}</span> <span style={{ fontWeight: 'bold', color: '#fff' }}>{getInitials(name)}</span>
)} )}

15
src/components/mobile-app-development-service/Work.tsx
View File

@ -17,8 +17,8 @@ const Work = () => {
backgroundSize: 'cover', backgroundSize: 'cover',
}} }}
> >
<img src="/assets/img-app/home/section5/top-element-2.webp" alt="" className="elements16" /> <img loading="lazy" src="/assets/img-app/home/section5/top-element-2.webp" alt="" className="elements16" />
<img src="/assets/img-app/home/section5/top-element-1.webp" alt="" className="elements1 keyframe5" /> <img loading="lazy" src="/assets/img-app/home/section5/top-element-1.webp" alt="" className="elements1 keyframe5" />
<div className="container"> <div className="container">
<div className="row align-items-center g-5"> <div className="row align-items-center g-5">
@ -27,16 +27,9 @@ const Work = () => {
<div className="col-12 col-xl-5"> <div className="col-12 col-xl-5">
<GsapReveal y={30} duration={1}> <GsapReveal y={30} duration={1}>
<img <img
loading="lazy"
src="/assets/img-app/home/section5/left.webp" src="/assets/img-app/home/section5/left.webp"
alt="How It Works" alt="How It Works"
// style={{
// width: '100%',
// height: '100%',
// minHeight: '670px',
// objectFit: 'cover',
// display: 'block',
// borderRadius: '16px',
// }}
/> />
</GsapReveal> </GsapReveal>
</div> </div>
@ -45,7 +38,7 @@ const Work = () => {
<div className="col-12 col-xl-7"> <div className="col-12 col-xl-7">
<div className="work-content-area heading1"> <div className="work-content-area heading1">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>OUR DEVELOPMENT PROCESS</h5> <h5><span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>OUR DEVELOPMENT PROCESS</h5>
</GsapReveal> </GsapReveal>
<div className="space24"></div> <div className="space24"></div>
<GsapReveal y={20} delay={0.15}> <GsapReveal y={20} delay={0.15}>

10
src/components/mobile-app-development-service/WorkProcess.tsx
View File

@ -54,12 +54,12 @@ const WorkProcess = () => {
</div> </div>
<div className="col-xl-4 col-lg-12 d-flex align-items-center justify-content-center"> <div className="col-xl-4 col-lg-12 d-flex align-items-center justify-content-center">
<div className="images" data-aos="zoom-in" data-aos-duration="1000"> <div className="images" data-aos="zoom-in" data-aos-duration="1000">
<img src="/assets/img-app/elements/elements12.png" alt="" className="elements12" /> <img loading="lazy" src="/assets/img-app/elements/elements12.png" alt="" className="elements12" />
<img src="/assets/img-app/elements/elements13.png" alt="" className="elements13" /> <img loading="lazy" src="/assets/img-app/elements/elements13.png" alt="" className="elements13" />
<img src="/assets/img-app/elements/elements14.png" alt="" className="elements14" /> <img loading="lazy" src="/assets/img-app/elements/elements14.png" alt="" className="elements14" />
<img src="/assets/img-app/elements/elements15.png" alt="" className="elements15" /> <img loading="lazy" src="/assets/img-app/elements/elements15.png" alt="" className="elements15" />
<div className="img1 shadow-lg"> <div className="img1 shadow-lg">
<img src="/assets/img-app/home/section5/bottom-circle.webp" alt="" /> <img loading="lazy" src="/assets/img-app/home/section5/bottom-circle.webp" alt="" />
</div> </div>
</div> </div>
</div> </div>

6
src/components/mobile-app-development-service/support/cards/BlogCard.tsx
View File

@ -10,19 +10,19 @@ const BlogCard: React.FC<BlogCardProps> = ({ blog }) => {
return ( return (
<div className="vl-blog-1-item"> <div className="vl-blog-1-item">
<div className="vl-blog-1-thumb image-anime"> <div className="vl-blog-1-thumb image-anime">
<img src={blog.image} alt={blog.title} /> <img loading="lazy" src={blog.image} alt={blog.title} />
</div> </div>
<div className="vl-blog-1-content"> <div className="vl-blog-1-content">
<div className="vl-blog-meta"> <div className="vl-blog-meta">
<ul> <ul>
<li> <li>
<a href="#"> <a href="#">
<img src="/assets/img-app/icons/calender1.svg" alt="" /> {blog.date} <span> | </span> <img loading="lazy" src="/assets/img-app/icons/calender1.svg" alt="" /> {blog.date} <span> | </span>
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<img src="/assets/img-app/icons/user1.svg" alt="" /> {blog.authorName} <img loading="lazy" src="/assets/img-app/icons/user1.svg" alt="" /> {blog.authorName}
</a> </a>
</li> </li>
</ul> </ul>

2
src/components/mobile-app-development-service/support/cards/CaseStudyCard.tsx
View File

@ -10,7 +10,7 @@ const CaseStudyCard: React.FC<CaseStudyCardProps> = ({ caseStudy }) => {
return ( return (
<div className="case-slider-boxarea"> <div className="case-slider-boxarea">
<div className="img1 image-anime"> <div className="img1 image-anime">
<img src={caseStudy.image} alt={caseStudy.title} /> <img loading="lazy" src={caseStudy.image} alt={caseStudy.title} />
</div> </div>
<div className="content-area"> <div className="content-area">
<p>{caseStudy.tag}</p> <p>{caseStudy.tag}</p>

4
src/components/mobile-app-development-service/support/cards/MemberCard.tsx
View File

@ -10,7 +10,7 @@ const MemberCard: React.FC<MemberCardProps> = ({ member }) => {
return ( return (
<div className="team-author-boxarea"> <div className="team-author-boxarea">
<div className="img1 image-anime"> <div className="img1 image-anime">
<img src={member.image} alt={member.name} /> <img loading="lazy" src={member.image} alt={member.name} />
</div> </div>
<div className="content-area"> <div className="content-area">
<div className="text"> <div className="text">
@ -19,7 +19,7 @@ const MemberCard: React.FC<MemberCardProps> = ({ member }) => {
<p>{member.role}</p> <p>{member.role}</p>
</div> </div>
<div className="icons"> <div className="icons">
<a href="#"><img src="/assets/img-app/icons/share1.svg" alt="" /></a> <a href="#"><img loading="lazy" src="/assets/img-app/icons/share1.svg" alt="" /></a>
</div> </div>
</div> </div>
<ul> <ul>

2
src/components/mobile-app-development-service/support/cards/ServiceCard.tsx
View File

@ -10,7 +10,7 @@ const ServiceCard: React.FC<ServiceCardProps> = ({ service }) => {
return ( return (
<div className="service1-boxarea h-100 d-flex flex-column" style={{ marginBottom: 0 }}> <div className="service1-boxarea h-100 d-flex flex-column" style={{ marginBottom: 0 }}>
<div className="icons"> <div className="icons">
<img src={service.icon} alt={service.title} /> <img loading="lazy" src={service.icon} alt={service.title} />
</div> </div>
<div className="space24"></div> <div className="space24"></div>
<div className="space16"></div> <div className="space16"></div>

10
src/components/mobile-app-development-service/support/layout/CTA/CTA.tsx
View File

@ -32,24 +32,24 @@ const CTA = () => {
<div className="col-lg-3"></div> <div className="col-lg-3"></div>
<div className="col-lg-4"> <div className="col-lg-4">
<div className="cta-images"> <div className="cta-images">
<img src="/assets/img-app/home/section10/bg-element.webp" alt="" className="elements7 keyframe5" /> <img loading="lazy" src="/assets/img-app/home/section10/bg-element.webp" alt="" className="elements7 keyframe5" />
<div className="img1"> <div className="img1">
<img src="/assets/img-app/home/section10/right.webp" alt="" /> <img loading="lazy" src="/assets/img-app/home/section10/right.webp" alt="" />
</div> </div>
<ul className="aniamtion-key-1"> <ul className="aniamtion-key-1">
<li> <li>
<a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}> <a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}>
<img src="/assets/img-app/icons/check5.svg" alt="" />Get Free Consultation <img loading="lazy" src="/assets/img-app/icons/check5.svg" alt="" />Get Free Consultation
</a> </a>
</li> </li>
<li> <li>
<a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}> <a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}>
<img src="/assets/img-app/icons/check5.svg" alt="" /> Request Pricing <img loading="lazy" src="/assets/img-app/icons/check5.svg" alt="" /> Request Pricing
</a> </a>
</li> </li>
<li> <li>
<a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}> <a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}>
<img src="/assets/img-app/icons/check5.svg" alt="" />Talk to an Expert <img loading="lazy" src="/assets/img-app/icons/check5.svg" alt="" />Talk to an Expert
</a> </a>
</li> </li>
</ul> </ul>

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

@ -47,7 +47,7 @@ const Footer = () => {
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6"> <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
<div className="footer-widget-1"> <div className="footer-widget-1">
<figure className="image"> <figure className="image">
<img src="/assets/images/logo/white-logo-2.png" alt="footer logo" /> <img loading="lazy" src="/assets/images/logo/white-logo-2.png" alt="footer logo" />
</figure> </figure>
<p className="mt-20 mb-40">Metatroncube Software Solution: Where innovation meets execution to elevate your digital presence. Partner with us for bespoke web and app development that powers your business growth.</p> <p className="mt-20 mb-40">Metatroncube Software Solution: 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 mb-20"> <div className="footer-socials mb-20">

2
src/components/mobile-app-development-service/support/layout/Header/Header.tsx
View File

@ -29,7 +29,7 @@ const Header = () => {
<div className="col-lg-3 col-md-6 col-6"> <div className="col-lg-3 col-md-6 col-6">
<div className="vl-logo"> <div className="vl-logo">
<Link href="#home"> <Link href="#home">
<img src="/assets/images/logo/white-logo-2.png" alt="MetatronCube" style={{ width: '100%', maxWidth: '250px', height: 'auto', transition: 'all 0.3s' }} /> <img loading="lazy" src="/assets/images/logo/white-logo-2.png" alt="MetatronCube" style={{ width: '100%', maxWidth: '250px', height: 'auto', transition: 'all 0.3s' }} />
</Link> </Link>
</div> </div>
</div> </div>

2
src/components/mobile-app-development-service/support/layout/Header/MobileMenu.tsx
View File

@ -27,7 +27,7 @@ const MobileMenu: React.FC<MobileMenuProps> = ({ isMobileMenuOpen, toggleMobileM
<div className="vl-offcanvas-header d-flex justify-content-between align-items-center"> <div className="vl-offcanvas-header d-flex justify-content-between align-items-center">
<div className="vl-offcanvas-logo"> <div className="vl-offcanvas-logo">
<Link href="#home" onClick={toggleMobileMenu}> <Link href="#home" onClick={toggleMobileMenu}>
<img src="/assets/images/logo/white-logo-2.png" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} /> <img loading="lazy" src="/assets/images/logo/white-logo-2.png" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} />
</Link> </Link>
</div> </div>
<div className="vl-offcanvas-close"> <div className="vl-offcanvas-close">

8
src/components/services-digital-solutions/AboutService.tsx
View File

@ -15,17 +15,17 @@ const AboutService = () => {
{/* Background Image */} {/* Background Image */}
<div className="main-img-wrap"> <div className="main-img-wrap">
<img src="/assets/images/careers/1/large-img.webp" alt="Office Meeting" /> <img loading="lazy" src="/assets/images/careers/1/large-img.webp" alt="Office Meeting" />
</div> </div>
{/* Foreground Curved Image */} {/* Foreground Curved Image */}
<div className="curved-img-wrap"> <div className="curved-img-wrap">
<img src="/assets/images/careers/1/small-img.webp" alt="Collaborative Work" /> <img loading="lazy" src="/assets/images/careers/1/small-img.webp" alt="Collaborative Work" />
</div> </div>
{/* Decorative Dots */} {/* Decorative Dots */}
<div className="dots-shape"> <div className="dots-shape">
<img src="/assets/imgs/shapes/shape-6.png" alt="dots" /> <img loading="lazy" src="/assets/imgs/shapes/shape-6.png" alt="dots" />
</div> </div>
</div> </div>
</div> </div>
@ -46,7 +46,7 @@ const AboutService = () => {
<div className="single-format-content mb-20"> <div className="single-format-content mb-20">
<div className="format-row d-flex align-items-start gap-4"> <div className="format-row d-flex align-items-start gap-4">
{/* <div className="small-feature-img"> {/* <div className="small-feature-img">
<img src="/assets/img/about/about-img10.png" alt="Team" className="rounded-3" /> <img loading="lazy" src="/assets/img/about/about-img10.png" alt="Team" className="rounded-3" />
</div> */} </div> */}
<div className="feature-bullets"> <div className="feature-bullets">
<div className="bullet-item d-flex align-items-center"> <div className="bullet-item d-flex align-items-center">

6
src/components/services-digital-solutions/ServiceDetails.tsx
View File

@ -48,7 +48,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
</div> </div>
<div className="sidebar__call sidebar__single wow fadeInUp animated" data-wow-duration="1500ms" style={{ backgroundImage: 'url("/assets/images/services/details/cta.webp")', visibility: 'visible', animationDuration: '1500ms', animationName: 'fadeInUp' }}> <div className="sidebar__call sidebar__single wow fadeInUp animated" data-wow-duration="1500ms" style={{ backgroundImage: 'url("/assets/images/services/details/cta.webp")', visibility: 'visible', animationDuration: '1500ms', animationName: 'fadeInUp' }}>
<img src="/favicon.ico" alt="logo" className="sidebar__call__logo" /> <img loading="lazy" src="/favicon.ico" alt="logo" className="sidebar__call__logo" />
<div className="sidebar__call__inner"> <div className="sidebar__call__inner">
<span className="sidebar__call__icon"> <span className="sidebar__call__icon">
<i className="fa-solid fa-phone"></i> <i className="fa-solid fa-phone"></i>
@ -64,7 +64,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
<div className="col-md-12 col-lg-8"> <div className="col-md-12 col-lg-8">
<div className="service-details__content"> <div className="service-details__content">
{/* <div className="service-details__thumbnail"> {/* <div className="service-details__thumbnail">
<img src={service.bigImage} alt={service.title} /> <img loading="lazy" src={service.bigImage} alt={service.title} />
</div> */} </div> */}
{service.content && ( {service.content && (
@ -80,7 +80,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
<div className="col-md-12 col-lg-12 mt-20"> <div className="col-md-12 col-lg-12 mt-20">
<div className="service-details__content"> <div className="service-details__content">
{/* <div className="service-details__thumbnail"> {/* <div className="service-details__thumbnail">
<img src={service.bigImage} alt={service.title} /> <img loading="lazy" src={service.bigImage} alt={service.title} />
</div> */} </div> */}
{service.fullcontent && ( {service.fullcontent && (

17
src/components/web-development-service/About.tsx
View File

@ -8,13 +8,14 @@ const About = () => {
const [isContactOpen, setIsContactOpen] = useState(false); const [isContactOpen, setIsContactOpen] = useState(false);
return ( return (
<div className="about1-section-area sp1" id="about"> <div className="about1-section-area sp1" id="about">
<img src="/assets/img/elements/elements9.png" alt="" className="elements9" /> <img loading="lazy" src="/assets/img/elements/elements9.png" alt="" className="elements9" />
<div className="container"> <div className="container">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-lg-6"> <div className="col-lg-6">
<div className="about-images-area" style={{ position: 'relative' }}> <div className="about-images-area" style={{ position: 'relative' }}>
<img src="/assets/img/elements/elements10.png" alt="" className="elements10" /> <img loading="lazy" src="/assets/img/elements/elements10.png" alt="" className="elements10" />
<img <img
loading="lazy"
src="/assets/img/home/section2/third-section.webp" src="/assets/img/home/section2/third-section.webp"
alt="About MetatronCube IT Solution" alt="About MetatronCube IT Solution"
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', borderRadius: '12px' }} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', borderRadius: '12px' }}
@ -26,7 +27,7 @@ const About = () => {
<div className="col-lg-5"> <div className="col-lg-5">
<div className="about-glass-container about-header-area heading2"> <div className="about-glass-container about-header-area heading2">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5><span><img src="/favicon.ico" alt="" /></span>About MetatronCube IT Solution</h5> <h5><span><img loading="lazy" src="/favicon.ico" alt="" /></span>About MetatronCube IT Solution</h5>
</GsapReveal> </GsapReveal>
<div className="space24"></div> <div className="space24"></div>
<GsapReveal y={20} delay={0.2}> <GsapReveal y={20} delay={0.2}>
@ -40,13 +41,13 @@ const About = () => {
<h6>We specialize in:</h6> <h6>We specialize in:</h6>
<div className="specialty-row mt-3"> <div className="specialty-row mt-3">
<ul className="specialty-list"> <ul className="specialty-list">
<li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Business Websites</li> <li><span><img loading="lazy" src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Business Websites</li>
<li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Corporate Websites</li> <li><span><img loading="lazy" src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Corporate Websites</li>
<li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Landing Pages</li> <li><span><img loading="lazy" src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Landing Pages</li>
</ul> </ul>
<ul className="specialty-list"> <ul className="specialty-list">
<li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> E-commerce Stores</li> <li><span><img loading="lazy" src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> E-commerce Stores</li>
<li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Custom Web Applications</li> <li><span><img loading="lazy" src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Custom Web Applications</li>
</ul> </ul>
</div> </div>

5
src/components/web-development-service/BannerBottom.tsx
View File

@ -57,7 +57,7 @@ const BannerBottom = () => {
{floatingItems.map((item, idx) => ( {floatingItems.map((item, idx) => (
<div key={item.className} className={`floating-item ${item.className}`}> <div key={item.className} className={`floating-item ${item.className}`}>
<div className={`floating-circle ${idx % 2 === 0 ? 'floating-slow' : 'floating-fast'}`}> <div className={`floating-circle ${idx % 2 === 0 ? 'floating-slow' : 'floating-fast'}`}>
<img src={item.icon} alt={item.title} /> <img loading="lazy" src={item.icon} alt={item.title} />
</div> </div>
<div className="floating-content"> <div className="floating-content">
<h6>{item.title}</h6> <h6>{item.title}</h6>
@ -69,6 +69,7 @@ const BannerBottom = () => {
{/* Central hero image */} {/* Central hero image */}
<img <img
loading="lazy"
src="/assets/img/home/section1/second-section-centre-img.webp" src="/assets/img/home/section1/second-section-centre-img.webp"
alt="Digital Solutions Illustration" alt="Digital Solutions Illustration"
className="main-delivery-img img-fluid mt-2" className="main-delivery-img img-fluid mt-2"
@ -114,7 +115,7 @@ const BannerBottom = () => {
}} }}
> >
<div className="call-icon-bg" style={{ width: '40px', height: '40px' }}> <div className="call-icon-bg" style={{ width: '40px', height: '40px' }}>
<img src="/assets/img/icons/phn1.svg" alt="Phone Icon" className="scooter-mini-icon" style={{ width: '20px' }} /> <img loading="lazy" src="/assets/img/icons/phn1.svg" alt="Phone Icon" className="scooter-mini-icon" style={{ width: '20px' }} />
</div> </div>
<div className="call-details ms-2"> <div className="call-details ms-2">
<span style={{ color: '#fff', fontWeight: 600, fontSize: '16px' }}>Speak With Our Experts Today</span> <span style={{ color: '#fff', fontWeight: 600, fontSize: '16px' }}>Speak With Our Experts Today</span>

4
src/components/web-development-service/BrandSlider.tsx
View File

@ -64,7 +64,7 @@ const BrandSlider = () => {
<div className="col-lg-8 m-auto text-center"> <div className="col-lg-8 m-auto text-center">
<div className="brand-header heading2 text-center"> <div className="brand-header heading2 text-center">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} loading="lazy" /></span>Our Partners</h5> <h5><span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Our Partners</h5>
</GsapReveal> </GsapReveal>
<div className="space24"></div> <div className="space24"></div>
<GsapReveal y={20} delay={0.2}> <GsapReveal y={20} delay={0.2}>
@ -84,7 +84,7 @@ const BrandSlider = () => {
<Slider {...settings}> <Slider {...settings}>
{brands.map((brand) => ( {brands.map((brand) => (
<div key={brand.id} className="brand-item"> <div key={brand.id} className="brand-item">
<img src={brand.src} alt={brand.alt} loading="lazy" /> <img loading="lazy" src={brand.src} alt={brand.alt} />
</div> </div>
))} ))}
</Slider> </Slider>

11
src/components/web-development-service/CaseStudies.tsx
View File

@ -65,12 +65,12 @@ const CaseStudies = () => {
return ( return (
<section className="case-studies-section sp1 position-relative" id="portfolio" style={{ overflow: 'hidden' }}> <section className="case-studies-section sp1 position-relative" id="portfolio" style={{ overflow: 'hidden' }}>
<img src="/assets/img/home/section6/1.webp" alt="" className="case-floating-element case-el-left-3" /> <img loading="lazy" src="/assets/img/home/section6/1.webp" alt="" className="case-floating-element case-el-left-3" />
<img src="/assets/img/home/section6/2.webp" alt="" className="case-floating-element case-el-left-4" /> <img loading="lazy" src="/assets/img/home/section6/2.webp" alt="" className="case-floating-element case-el-left-4" />
{/* Floating Elements - Right (4) */} {/* Floating Elements - Right (4) */}
<img src="/assets/img/home/section6/3.webp" alt="" className="case-floating-element case-el-right-1" /> <img loading="lazy" src="/assets/img/home/section6/3.webp" alt="" className="case-floating-element case-el-right-1" />
<img src="/assets/img/home/section6/4.webp" alt="" className="case-floating-element case-el-right-2" /> <img loading="lazy" src="/assets/img/home/section6/4.webp" alt="" className="case-floating-element case-el-right-2" />
<div className="container"> <div className="container">
@ -81,7 +81,7 @@ const CaseStudies = () => {
<div className="consen-section-title upper text-center pb-80 heading2"> <div className="consen-section-title upper text-center pb-80 heading2">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}> <h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}>
<span><img src="/favicon.ico" alt="" /></span> <span><img loading="lazy" src="/favicon.ico" alt="" /></span>
Case Studies Case Studies
</h5> </h5>
</GsapReveal> </GsapReveal>
@ -157,7 +157,6 @@ const CaseStudies = () => {
width={600} width={600}
height={400} height={400}
className="loaded" className="loaded"
priority
style={{ width: "100%", height: "100%", objectFit: "cover" }} style={{ width: "100%", height: "100%", objectFit: "cover" }}
/> />
</div> </div>

10
src/components/web-development-service/CaseStudy.tsx
View File

@ -58,12 +58,12 @@ const CaseStudy = () => {
</div> </div>
<div className="col-lg-4"> <div className="col-lg-4">
<div className="images" data-aos="zoom-in" data-aos-duration="1000"> <div className="images" data-aos="zoom-in" data-aos-duration="1000">
<img src="/assets/img/elements/elements43.png" alt="" className="elements43" /> <img loading="lazy" src="/assets/img/elements/elements43.png" alt="" className="elements43" />
<img src="/assets/img/elements/elements27.png" alt="" className="elements27" /> <img loading="lazy" src="/assets/img/elements/elements27.png" alt="" className="elements27" />
<img src="/assets/img/elements/elements30.png" alt="" className="elements30" /> <img loading="lazy" src="/assets/img/elements/elements30.png" alt="" className="elements30" />
<img src="/assets/img/elements/elements39.png" alt="" className="elements39" /> <img loading="lazy" src="/assets/img/elements/elements39.png" alt="" className="elements39" />
<div className="img1"> <div className="img1">
<img src="/assets/img/all-images/case/case-img4.png" alt="" /> <img loading="lazy" src="/assets/img/all-images/case/case-img4.png" alt="" />
</div> </div>
</div> </div>
</div> </div>

3
src/components/web-development-service/FAQ.tsx
View File

@ -105,7 +105,7 @@ const FAQ = ({ faqData }: { faqData?: { question: string; answer: string }[] })
<div className="space-margin60"> <div className="space-margin60">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5 className="faqv2-subtitle"> <h5 className="faqv2-subtitle">
<span><img src="/favicon.ico" alt="" /></span> <span><img loading="lazy" src="/favicon.ico" alt="" /></span>
FAQ FAQ
</h5> </h5>
</GsapReveal> </GsapReveal>
@ -141,6 +141,7 @@ const FAQ = ({ faqData }: { faqData?: { question: string; answer: string }[] })
<div className="faqv2-center-wrap"> <div className="faqv2-center-wrap">
<div className="faqv2-main-img"> <div className="faqv2-main-img">
<img <img
loading="lazy"
src="/assets/img/home/section9/9.webp" src="/assets/img/home/section9/9.webp"
alt="FAQ Section" alt="FAQ Section"
/> />

14
src/components/web-development-service/Hero.tsx
View File

@ -11,8 +11,8 @@ const Hero = () => {
return ( return (
<div className="hero1-section-area" id="home"> <div className="hero1-section-area" id="home">
<img src="/assets/img/elements/elements4.png" alt="" className="elements4" /> <img loading="lazy" src="/assets/img/elements/elements4.png" alt="" className="elements4" />
<img src="/assets/img/elements/elements5.png" alt="" className="elements5" /> <img loading="lazy" src="/assets/img/elements/elements5.png" alt="" className="elements5" />
<div className="container"> <div className="container">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-lg-7"> <div className="col-lg-7">
@ -40,19 +40,19 @@ const Hero = () => {
<div className="col-lg-5"> <div className="col-lg-5">
<div className="hero-images-area"> <div className="hero-images-area">
<div className="img1" data-aos="zoom-in" data-aos-duration="1000"> <div className="img1" data-aos="zoom-in" data-aos-duration="1000">
<img src="/assets/img/home/banner/centre-img.webp" alt="" /> <img loading="lazy" src="/assets/img/home/banner/centre-img.webp" alt="" />
</div> </div>
{/* <div className="image-bg1"> {/* <div className="image-bg1">
<img src="/assets/img/all-images/bg/hero-bg2.png" alt="" className="keyframe5" /> <img loading="lazy" src="/assets/img/all-images/bg/hero-bg2.png" alt="" className="keyframe5" />
</div> */} </div> */}
<div className="elements1"> <div className="elements1">
<img src="/assets/img/home/banner/1-element.webp" alt="" className="animation-1 floating-slow" /> <img loading="lazy" src="/assets/img/home/banner/1-element.webp" alt="" className="animation-1 floating-slow" />
</div> </div>
<div className="elements2"> <div className="elements2">
<img src="/assets/img/home/banner/bottom.webp" alt="" className="animation-2 floating-fast" /> <img loading="lazy" src="/assets/img/home/banner/bottom.webp" alt="" className="animation-2 floating-fast" />
</div> </div>
<div className="elements3"> <div className="elements3">
<img src="/assets/img/home/banner/right.webp" alt="" className="animation-3 floating-slow" /> <img loading="lazy" src="/assets/img/home/banner/right.webp" alt="" className="animation-3 floating-slow" />
</div> </div>
</div> </div>
</div> </div>

3
src/components/web-development-service/Pricing.tsx
View File

@ -13,7 +13,7 @@ const Pricing = () => {
<div className="consen-section-title upper text-center pb-60 heading2"> <div className="consen-section-title upper text-center pb-60 heading2">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}> <h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}>
<span><img src="/favicon.ico" alt="" /></span> <span><img loading="lazy" src="/favicon.ico" alt="" /></span>
Pricing Plans Pricing Plans
</h5> </h5>
</GsapReveal> </GsapReveal>
@ -71,6 +71,7 @@ const Pricing = () => {
{plan.features.map((feature, i) => ( {plan.features.map((feature, i) => (
<li key={i} className="d-flex align-items-center mb-3" style={{ color: plan.isPopular ? '#fff' : '#4a5568', fontSize: '16px' }}> <li key={i} className="d-flex align-items-center mb-3" style={{ color: plan.isPopular ? '#fff' : '#4a5568', fontSize: '16px' }}>
<img <img
loading="lazy"
src={plan.isPopular ? "/assets/img/arrow-white.png" : "/assets/img/arrow.png"} src={plan.isPopular ? "/assets/img/arrow-white.png" : "/assets/img/arrow.png"}
alt="" alt=""
style={{ width: '20px', height: '20px', objectFit: 'contain', marginRight: '10px' }} style={{ width: '20px', height: '20px', objectFit: 'contain', marginRight: '10px' }}

3
src/components/web-development-service/Service.tsx
View File

@ -16,7 +16,7 @@ const Service = () => {
<div className="col-lg-7"> <div className="col-lg-7">
<div className="service-header heading2"> <div className="service-header heading2">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5 className="text-white"><span><img src="/favicon.ico" alt="" /></span>Our Services</h5> <h5 className="text-white"><span><img loading="lazy" src="/favicon.ico" alt="" /></span>Our Services</h5>
</GsapReveal> </GsapReveal>
<div className="space24"></div> <div className="space24"></div>
<GsapReveal y={20} delay={0.15}> <GsapReveal y={20} delay={0.15}>
@ -33,6 +33,7 @@ const Service = () => {
<div className="col-lg-5" data-aos="zoom-in" data-aos-duration="900"> <div className="col-lg-5" data-aos="zoom-in" data-aos-duration="900">
<div className="service-intro-img" style={{ position: 'relative' }}> <div className="service-intro-img" style={{ position: 'relative' }}>
<img <img
loading="lazy"
src="/assets/img/home/section3/top-right-image.webp" src="/assets/img/home/section3/top-right-image.webp"
alt="Our IT Services" alt="Our IT Services"
style={{ width: '100%', borderRadius: '20px 0 20px 0', objectFit: 'cover', height: 280, boxShadow: '0 20px 50px rgba(0,0,0,0.15)' }} style={{ width: '100%', borderRadius: '20px 0 20px 0', objectFit: 'cover', height: 280, boxShadow: '0 20px 50px rgba(0,0,0,0.15)' }}

8
src/components/web-development-service/Testimonial.tsx
View File

@ -85,7 +85,7 @@ const Testimonial = () => {
<div className="col-lg-7 m-auto"> <div className="col-lg-7 m-auto">
<div className="testimonial-header text-center heading2 space-margin60"> <div className="testimonial-header text-center heading2 space-margin60">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5><span><img src="/favicon.ico" alt="" /></span>Testimonials</h5> <h5><span><img loading="lazy" src="/favicon.ico" alt="" /></span>Testimonials</h5>
</GsapReveal> </GsapReveal>
<div className="space20"></div> <div className="space20"></div>
<GsapReveal y={20} delay={0.2}> <GsapReveal y={20} delay={0.2}>
@ -107,7 +107,7 @@ const Testimonial = () => {
<div className="col-lg-5"> <div className="col-lg-5">
<GsapReveal y={30} duration={1}> <GsapReveal y={30} duration={1}>
<div className="testimonial-img-single" style={{ borderRadius: '24px', overflow: 'hidden' }}> <div className="testimonial-img-single" style={{ borderRadius: '24px', overflow: 'hidden' }}>
<img src="/assets/img/home/section8/left-img.webp" alt="Testimonials" /> <img loading="lazy" src="/assets/img/home/section8/left-img.webp" alt="Testimonials" />
</div> </div>
</GsapReveal> </GsapReveal>
</div> </div>
@ -138,7 +138,7 @@ const Testimonial = () => {
position: 'relative', position: 'relative',
transition: 'transform 0.3s ease' transition: 'transform 0.3s ease'
}}> }}>
<img src="/assets/img/icons/quito1.svg" alt="" style={{ position: 'absolute', right: 30, top: 30, opacity: 0.15, width: 50 }} /> <img loading="lazy" src="/assets/img/icons/quito1.svg" alt="" style={{ position: 'absolute', right: 30, top: 30, opacity: 0.15, width: 50 }} />
{/* Stars */} {/* Stars */}
<div className="stars" style={{ display: 'flex', gap: '6px', marginBottom: '25px' }}> <div className="stars" style={{ display: 'flex', gap: '6px', marginBottom: '25px' }}>
@ -178,7 +178,7 @@ const Testimonial = () => {
flexShrink: 0 flexShrink: 0
}}> }}>
{profileImg ? ( {profileImg ? (
<img src={profileImg} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> <img loading="lazy" src={profileImg} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
) : ( ) : (
<span style={{ fontWeight: 'bold', color: '#fff' }}>{getInitials(name)}</span> <span style={{ fontWeight: 'bold', color: '#fff' }}>{getInitials(name)}</span>
)} )}

17
src/components/web-development-service/Work.tsx
View File

@ -17,8 +17,8 @@ const Work = () => {
backgroundSize: 'cover', backgroundSize: 'cover',
}} }}
> >
<img src="/assets/img/home/section5/element-2.webp" alt="" className="elements16" /> <img loading="lazy" src="/assets/img/home/section5/element-2.webp" alt="" className="elements16" />
<img src="/assets/img/home/section5/element-1.webp" alt="" className="elements1 keyframe5" /> <img loading="lazy" src="/assets/img/home/section5/element-1.webp" alt="" className="elements1 keyframe5" />
<div className="container"> <div className="container">
<div className="row align-items-center g-5"> <div className="row align-items-center g-5">
@ -27,16 +27,9 @@ const Work = () => {
<div className="col-12 col-xl-5"> <div className="col-12 col-xl-5">
<GsapReveal y={30} duration={1}> <GsapReveal y={30} duration={1}>
<img <img
loading="lazy"
src="/assets/img/home/section5/left-side.webp" src="/assets/img/home/section5/left-side.webp"
alt="How It Works" alt="How It Works"
// style={{
// width: '100%',
// height: '100%',
// minHeight: '670px',
// objectFit: 'cover',
// display: 'block',
// borderRadius: '16px',
// }}
/> />
</GsapReveal> </GsapReveal>
</div> </div>
@ -45,7 +38,7 @@ const Work = () => {
<div className="col-12 col-xl-7"> <div className="col-12 col-xl-7">
<div className="work-content-area heading1"> <div className="work-content-area heading1">
<GsapReveal y={20}> <GsapReveal y={20}>
<h5><span><img src="/favicon.ico" alt="" /></span>How It Works</h5> <h5><span><img loading="lazy" src="/favicon.ico" alt="" /></span>How It Works</h5>
</GsapReveal> </GsapReveal>
<div className="space24"></div> <div className="space24"></div>
<GsapReveal y={20} delay={0.15}> <GsapReveal y={20} delay={0.15}>
@ -77,7 +70,7 @@ const Work = () => {
].map((step, i) => ( ].map((step, i) => (
<div key={i} className="work-step-row" data-aos="fade-up" data-aos-duration={600 + i * 80}> <div key={i} className="work-step-row" data-aos="fade-up" data-aos-duration={600 + i * 80}>
<div className="work-step-num"> <div className="work-step-num">
<img src={step.img} alt={step.title} /> <img loading="lazy" src={step.img} alt={step.title} />
</div> </div>
<div className="work-step-body"> <div className="work-step-body">
<h4>{step.title}</h4> <h4>{step.title}</h4>

10
src/components/web-development-service/WorkProcess.tsx
View File

@ -54,12 +54,12 @@ const WorkProcess = () => {
</div> </div>
<div className="col-xl-4 col-lg-12 d-flex align-items-center justify-content-center"> <div className="col-xl-4 col-lg-12 d-flex align-items-center justify-content-center">
<div className="images" data-aos="zoom-in" data-aos-duration="1000"> <div className="images" data-aos="zoom-in" data-aos-duration="1000">
<img src="/assets/img/elements/elements12.png" alt="" className="elements12" /> <img loading="lazy" src="/assets/img/elements/elements12.png" alt="" className="elements12" />
<img src="/assets/img/elements/elements13.png" alt="" className="elements13" /> <img loading="lazy" src="/assets/img/elements/elements13.png" alt="" className="elements13" />
<img src="/assets/img/elements/elements14.png" alt="" className="elements14" /> <img loading="lazy" src="/assets/img/elements/elements14.png" alt="" className="elements14" />
<img src="/assets/img/elements/elements15.png" alt="" className="elements15" /> <img loading="lazy" src="/assets/img/elements/elements15.png" alt="" className="elements15" />
<div className="img1 shadow-lg"> <div className="img1 shadow-lg">
<img src="/assets/img/home/section5/bottom circle.webp" alt="" /> <img loading="lazy" src="/assets/img/home/section5/bottom circle.webp" alt="" />
</div> </div>
</div> </div>
</div> </div>

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

@ -47,7 +47,7 @@ const Footer = () => {
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6"> <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
<div className="footer-widget-1"> <div className="footer-widget-1">
<figure className="image"> <figure className="image">
<img src="/assets/images/logo/white-logo-2.png" alt="footer logo" /> <img loading="lazy" src="/assets/images/logo/white-logo-2.png" alt="footer logo" />
</figure> </figure>
<p className="mt-20 mb-40">Metatroncube Software Solution: Where innovation meets execution to elevate your digital presence. Partner with us for bespoke web and app development that powers your business growth.</p> <p className="mt-20 mb-40">Metatroncube Software Solution: 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 mb-20"> <div className="footer-socials mb-20">

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

@ -30,7 +30,7 @@ const Header = () => {
<div className="col-lg-3 col-md-6 col-6"> <div className="col-lg-3 col-md-6 col-6">
<div className="vl-logo"> <div className="vl-logo">
<Link href="#home"> <Link href="#home">
<img src="/assets/img/logo.webp" alt="MetatronCube" style={{ width: '100%', maxWidth: '250px', height: 'auto', transition: 'all 0.3s' }} /> <img loading="lazy" src="/assets/img/logo.webp" alt="MetatronCube" style={{ width: '100%', maxWidth: '250px', height: 'auto', transition: 'all 0.3s' }} />
</Link> </Link>
</div> </div>
</div> </div>

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

@ -27,7 +27,7 @@ const MobileMenu: React.FC<MobileMenuProps> = ({ isMobileMenuOpen, toggleMobileM
<div className="vl-offcanvas-header d-flex justify-content-between align-items-center"> <div className="vl-offcanvas-header d-flex justify-content-between align-items-center">
<div className="vl-offcanvas-logo"> <div className="vl-offcanvas-logo">
<Link href="#home" onClick={toggleMobileMenu}> <Link href="#home" onClick={toggleMobileMenu}>
<img src="/assets/img/logo.webp" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} /> <img loading="lazy" src="/assets/img/logo.webp" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} />
</Link> </Link>
</div> </div>
<div className="vl-offcanvas-close"> <div className="vl-offcanvas-close">