lazy loading updated all images
This commit is contained in:
akash
parent
d4fc6bd1d9
commit
221a4ba577
@ -13,7 +13,7 @@ const ResultsSection = () => {
|
||||
<h6 className="sec-title__tagline">Discover Our Process</h6>
|
||||
<h3 className="sec-title__title">How We Deliver Exceptional Results</h3>
|
||||
</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>
|
||||
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>
|
||||
@ -55,11 +55,11 @@ const ResultsSection = () => {
|
||||
<div className="col-lg-6">
|
||||
<div className="image-area-wrapper p-relative">
|
||||
<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 className="circular-image">
|
||||
<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>
|
||||
|
||||
@ -10,11 +10,11 @@ const WhyChooseUs = () => {
|
||||
<div className="col-lg-6">
|
||||
<div className="image-area-wrapper p-relative">
|
||||
<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 className="circular-image">
|
||||
<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>
|
||||
|
||||
@ -39,7 +39,7 @@ const BlogDetails = ({ blog }: BlogDetailsProps) => {
|
||||
<div className="col-lg-8">
|
||||
<div className="blog-details-content">
|
||||
<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 className="blog-meta mb-30">
|
||||
|
||||
@ -146,7 +146,7 @@ const BlogSidebar = ({
|
||||
<div key={post.id} className="single-post-item">
|
||||
<div className="thumb bg-cover">
|
||||
<Link href={`/${post.slug}`}>
|
||||
<img src={post.image} alt={post.title} />
|
||||
<img loading="lazy" src={post.image} alt={post.title} />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="post-content">
|
||||
|
||||
@ -10,7 +10,7 @@ const ServiceCard: React.FC<ServiceCardProps> = ({ service }) => {
|
||||
return (
|
||||
<div className="service1-boxarea">
|
||||
<div className="icons">
|
||||
<img src={service.icon} alt={service.title} />
|
||||
<img loading="lazy" src={service.icon} alt={service.title} />
|
||||
</div>
|
||||
<div className="space24"></div>
|
||||
<div className="space16"></div>
|
||||
|
||||
@ -104,7 +104,7 @@ const CareersWorkProcess = () => {
|
||||
<h3>{step.title}</h3>
|
||||
<p>{step.desc}</p>
|
||||
<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>
|
||||
|
||||
@ -145,7 +145,7 @@ const ContactSection = () => {
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<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>
|
||||
@ -159,7 +159,7 @@ const ContactSection = () => {
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<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 className="col-lg-6">
|
||||
|
||||
@ -60,7 +60,7 @@ const ServiceSection2 = () => {
|
||||
<h6 className="sec-title__tagline">OUR BEST SERVICE</h6>
|
||||
<h3 className="sec-title__title">We Run All Kinds Of Services <br /> From Technologies</h3>
|
||||
</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 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__content">
|
||||
<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>
|
||||
<h4 className="home-services__card__count">--</h4>
|
||||
<h2 className="home-services__card__title">
|
||||
@ -87,7 +87,7 @@ const ServiceSection2 = () => {
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<Link href={`/service/${service.slug}`} className="home-services__card__hover-link">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
|
||||
@ -85,7 +85,7 @@ const WorkProcessSection2 = () => {
|
||||
<div className="container">
|
||||
<div className="work-process-wrapper style2">
|
||||
<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 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="col-xl-5">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
@ -162,6 +162,7 @@ const InnerBanner = ({
|
||||
data-wow-duration="1500ms"
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/img/elements/elements16.png"
|
||||
alt="shape"
|
||||
width={169}
|
||||
@ -177,6 +178,7 @@ const InnerBanner = ({
|
||||
data-wow-duration="1500ms"
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/img/elements/elements8.png"
|
||||
alt="shape"
|
||||
width={188}
|
||||
@ -192,6 +194,7 @@ const InnerBanner = ({
|
||||
data-wow-duration="1500ms"
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/img/elements/elements9.png"
|
||||
alt="shape"
|
||||
width={535}
|
||||
|
||||
@ -95,7 +95,7 @@ const FaqPageSection = () => {
|
||||
{/* Center Image */}
|
||||
<div className="col-xl-4 col-md-12 text-center">
|
||||
<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>
|
||||
|
||||
|
||||
@ -41,10 +41,10 @@ const AboutThree = () => {
|
||||
<section className="about-three">
|
||||
<div className="about-three__bg">
|
||||
<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 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 className="container">
|
||||
@ -63,7 +63,7 @@ const AboutThree = () => {
|
||||
<ul className="about-three__card__list">
|
||||
<li className="about-three__card__item">
|
||||
<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>
|
||||
<h3 className='text-white'>Innovate Fearlessly</h3>
|
||||
</li>
|
||||
@ -111,7 +111,7 @@ const AboutThree = () => {
|
||||
<div className="col-xl-6 wow fadeInRight animated" data-wow-delay="200ms">
|
||||
<div className="pelocis-stretch-element-inside-column" style={{ marginLeft: '0px', marginRight: '-375.012px' }}>
|
||||
<div className="about-three__img">
|
||||
<img src="/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>
|
||||
|
||||
@ -7,11 +7,13 @@ const AboutTwo = () => {
|
||||
<section className="about-two">
|
||||
<div className="about-two__shape"></div>
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/images/services/why/left-element.webp"
|
||||
alt="metatroncube canada"
|
||||
className="about-two__shape__two"
|
||||
/>
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/images/services/why/right-element.webp"
|
||||
alt="metatroncube digital solutions"
|
||||
className="about-two__shape__three"
|
||||
@ -22,6 +24,7 @@ const AboutTwo = () => {
|
||||
<div className="col-xl-6">
|
||||
<div className="about-two__img">
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/images/services/choose/circle.webp"
|
||||
alt="about"
|
||||
/>
|
||||
@ -43,8 +46,8 @@ const AboutTwo = () => {
|
||||
<ul className="about-two__list">
|
||||
<li>
|
||||
<div className="about-two__list__icon-box">
|
||||
{/* <img 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/circle.webp" alt="circle" className="about-two__list__circle" /> */}
|
||||
<img loading="lazy" src="/assets/images/services/why/icon-1.webp" alt="Latest Technology" className="about-two__list__icon" />
|
||||
</div>
|
||||
<div className="about-two__list__content">
|
||||
<h3 className="about-two__list__title">Latest Technology</h3>
|
||||
@ -53,8 +56,8 @@ const AboutTwo = () => {
|
||||
</li>
|
||||
<li>
|
||||
<div className="about-two__list__icon-box">
|
||||
{/* <img 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/circle.webp" alt="circle" className="about-two__list__circle" /> */}
|
||||
<img loading="lazy" src="/assets/images/services/why/icon-2.webp" alt="Certified Experts" className="about-two__list__icon" />
|
||||
</div>
|
||||
<div className="about-two__list__content">
|
||||
<h4 className="about-two__list__title">Certified Experts</h4>
|
||||
@ -63,8 +66,8 @@ const AboutTwo = () => {
|
||||
</li>
|
||||
<li>
|
||||
<div className="about-two__list__icon-box">
|
||||
{/* <img 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/circle.webp" alt="circle" className="about-two__list__circle" /> */}
|
||||
<img loading="lazy" src="/assets/images/services/why/icon-3.webp" alt="Get Reasonable Price" className="about-two__list__icon" />
|
||||
</div>
|
||||
<div className="about-two__list__content">
|
||||
<h4 className="about-two__list__title">Get Reasonable Price</h4>
|
||||
|
||||
@ -10,11 +10,13 @@ const CounsellingSolutions: React.FC = () => {
|
||||
<div className="col-lg-6">
|
||||
<div className="counselling-solutions__image">
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/images/home/4/back.webp"
|
||||
alt="Why choose metatroncube Software Solution"
|
||||
className="counselling-solutions__image__one"
|
||||
/>
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/images/home/4/front.webp"
|
||||
alt="Why choose Metatroncube Software Solution"
|
||||
className="counselling-solutions__image__two"
|
||||
|
||||
@ -87,7 +87,7 @@ const CounterAreaThree: React.FC = () => {
|
||||
{counterItems.map((item, index) => (
|
||||
<li key={index} className="counter-area-three__item count-box">
|
||||
<div className="counter-area-three__icon">
|
||||
<img src={item.icon} alt={item.text} />
|
||||
<img loading="lazy" src={item.icon} alt={item.text} />
|
||||
</div>
|
||||
<div className="counter-area-three__content">
|
||||
<h3 className="counter-area-three__count">
|
||||
|
||||
@ -87,7 +87,7 @@ const CounterAreaTwo: React.FC = () => {
|
||||
{counterItems.map((item, index) => (
|
||||
<li key={index} className="counter-area-two__item count-box">
|
||||
<div className="counter-area-two__icon">
|
||||
<img src={item.icon} alt={item.text} />
|
||||
<img loading="lazy" src={item.icon} alt={item.text} />
|
||||
</div>
|
||||
<div className="counter-area-two__content">
|
||||
<h3 className="counter-area-two__count">
|
||||
|
||||
@ -65,6 +65,7 @@ const FaqFive = () => {
|
||||
<div className="pelocis-stretch-element-inside-column">
|
||||
<div className="faq-four__image2 text-center">
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/images/faq/3.webp"
|
||||
alt="Metatroncube FAQs: web-apps, SEO, & digital marketing"
|
||||
/>
|
||||
|
||||
@ -30,12 +30,12 @@ const HistoryTwo = () => {
|
||||
<div className="col-md-6 d-none d-md-block">
|
||||
<div className="history-two__images">
|
||||
<span className="history-two__images__date"></span>
|
||||
<img src="/assets/images/about/4/1.webp" alt="our mission" />
|
||||
<img loading="lazy" src="/assets/images/about/4/1.webp" alt="our mission" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 d-none d-md-block">
|
||||
<div className="history-two__images history-two__images--right">
|
||||
<img src="/assets/images/about/4/2.webp" alt="our-vision" />
|
||||
<img loading="lazy" src="/assets/images/about/4/2.webp" alt="our-vision" />
|
||||
{/* <span className="history-two__images__date">2021</span> */}
|
||||
</div>
|
||||
</div>
|
||||
@ -66,7 +66,7 @@ const HistoryTwo = () => {
|
||||
<div className="col-md-6 d-none d-md-block">
|
||||
<div className="history-two__images">
|
||||
<span className="history-two__images__date"></span>
|
||||
<img src="/assets/images/about/4/3.webp" alt="our values" />
|
||||
<img loading="lazy" src="/assets/images/about/4/3.webp" alt="our values" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -43,7 +43,7 @@ const HomeServiceOne: React.FC = () => {
|
||||
<div className="home-services__card__shape--two"></div>
|
||||
<div className="home-services__card__content">
|
||||
<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>
|
||||
<h4 className="home-services__card__count">--</h4>
|
||||
<h2 className="home-services__card__title">
|
||||
@ -54,7 +54,7 @@ const HomeServiceOne: React.FC = () => {
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<Link href={`/service/${service.slug}`} className="home-services__card__hover-link">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
|
||||
@ -40,7 +40,7 @@ function MonitorCard({ item, onOpen }: { item: (typeof PortfolioData)[0], onOpen
|
||||
<div className="pf-monitor-wrap">
|
||||
<div className="pf-monitor" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
|
||||
<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 className="pf-monitor-stand" />
|
||||
<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-paper" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
|
||||
<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 className="pf-card-info">
|
||||
<h4 className="pf-card-name">{item.name}</h4>
|
||||
@ -91,7 +91,7 @@ function MetaCard({ item, onOpen }: { item: (typeof PortfolioData)[0], onOpen: (
|
||||
return (
|
||||
<div className="pf-meta-wrap" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
|
||||
<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">
|
||||
<h4 className="pf-card-name" style={{ color: '#fff', margin: 0 }}>{item.name}</h4>
|
||||
</div>
|
||||
@ -105,7 +105,7 @@ function LogoCard({ item, onOpen }: { item: (typeof PortfolioData)[0], onOpen: (
|
||||
return (
|
||||
<div className="pf-logo-wrap" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
|
||||
<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 className="pf-card-info">
|
||||
<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-notch" />
|
||||
<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 className="pf-phone-home-btn" />
|
||||
</div>
|
||||
@ -173,7 +173,7 @@ function PortfolioLightbox({ item, onClose }: { item: any; onClose: () => void }
|
||||
return (
|
||||
<div className="pf-lightbox-backdrop" onClick={onClose}>
|
||||
<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">
|
||||
<h3>{item.name}</h3>
|
||||
</div> */}
|
||||
@ -224,6 +224,7 @@ export default function PortfolioSection() {
|
||||
{TABS.map((tab) => (
|
||||
<button
|
||||
key={tab.value}
|
||||
suppressHydrationWarning
|
||||
className={`pf-tab-btn${activeTab === tab.value ? " active" : ""}`}
|
||||
onClick={() => setActiveTab(tab.value)}
|
||||
>
|
||||
|
||||
@ -88,6 +88,7 @@ const ProjectsSection = () => {
|
||||
{/* Row 1: All Items */}
|
||||
<div className="d-flex justify-content-center mb-4 pr-10">
|
||||
<button
|
||||
suppressHydrationWarning
|
||||
className={`list-unstyled-item ${activeFilter === "all" ? "active" : ""}`}
|
||||
onClick={() => setActiveFilter("all")}
|
||||
>
|
||||
@ -100,6 +101,7 @@ const ProjectsSection = () => {
|
||||
{categories.slice(1, 4).map((cat, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
suppressHydrationWarning
|
||||
className={`list-unstyled-item ${activeFilter === cat.filter ? "active" : ""}`}
|
||||
onClick={() => setActiveFilter(cat.filter)}
|
||||
>
|
||||
@ -113,6 +115,7 @@ const ProjectsSection = () => {
|
||||
{categories.slice(4, 7).map((cat, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
suppressHydrationWarning
|
||||
className={`list-unstyled-item ${activeFilter === cat.filter ? "active" : ""}`}
|
||||
onClick={() => setActiveFilter(cat.filter)}
|
||||
>
|
||||
@ -127,7 +130,7 @@ const ProjectsSection = () => {
|
||||
{filteredProjects.map((project) => (
|
||||
<div key={project.id} className="project-item">
|
||||
<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-mask"></div>
|
||||
<div className="projects-one__card__hover-content-inner">
|
||||
@ -138,7 +141,7 @@ const ProjectsSection = () => {
|
||||
<p>{project.description}</p>
|
||||
</div>
|
||||
<div className="projects-one__card__hover-item"></div>
|
||||
<div
|
||||
<div
|
||||
className="projects-one__card__hover-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={(e) => openPopup(project.title, e)}
|
||||
@ -160,9 +163,9 @@ const ProjectsSection = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<CareersContactPopup
|
||||
isOpen={isPopupOpen}
|
||||
onClose={closePopup}
|
||||
<CareersContactPopup
|
||||
isOpen={isPopupOpen}
|
||||
onClose={closePopup}
|
||||
defaultPosition={selectedPosition}
|
||||
/>
|
||||
</section>
|
||||
|
||||
@ -7,7 +7,7 @@ interface WhyChooseTwoProps {
|
||||
const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
|
||||
return (
|
||||
<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={`row ${reverse ? 'flex-row-reverse' : ''}`}>
|
||||
<div className="col-xl-6">
|
||||
@ -28,7 +28,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
|
||||
<li className="why-choose-two__item">
|
||||
<div className="why-choose-two__count"></div>
|
||||
<div className="why-choose-two__icon">
|
||||
<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 className="why-choose-two__item__content">
|
||||
<h3 className="why-choose-two__item__title">Urgent development solutions</h3>
|
||||
@ -40,7 +40,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
|
||||
<li className="why-choose-two__item">
|
||||
<div className="why-choose-two__count"></div>
|
||||
<div className="why-choose-two__icon">
|
||||
<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 className="why-choose-two__item__content">
|
||||
<h3 className="why-choose-two__item__title">Top quality services with reasonable price</h3>
|
||||
@ -52,7 +52,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
|
||||
<li className="why-choose-two__item">
|
||||
<div className="why-choose-two__count"></div>
|
||||
<div className="why-choose-two__icon">
|
||||
<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 className="why-choose-two__item__content">
|
||||
<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="pelocis-stretch-element-inside-column" style={reverse ? { marginLeft: '-227.812px', marginRight: '0px' } : { marginLeft: '0px', marginRight: '-267.812px' }}>
|
||||
<div className="why-choose-two__shape-one">
|
||||
<img src="/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 className="why-choose-two__shape-two"></div>
|
||||
</div>
|
||||
|
||||
@ -14,11 +14,11 @@ const AboutSection = () => {
|
||||
<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>
|
||||
<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>
|
||||
{/* <div className="image-2-area">
|
||||
<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="video_player_btn">
|
||||
<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>
|
||||
<div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".8s">
|
||||
<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 className="content">
|
||||
<h5>Exceptional Digital Quality</h5>
|
||||
@ -58,7 +58,7 @@ const AboutSection = () => {
|
||||
</div>
|
||||
<div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
|
||||
<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 className="content">
|
||||
<h5>Expertise in innovation</h5>
|
||||
@ -67,7 +67,7 @@ const AboutSection = () => {
|
||||
</div>
|
||||
<div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
|
||||
<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 className="content">
|
||||
<h5>Comprehensive web solutions</h5>
|
||||
|
||||
@ -120,12 +120,12 @@ const BannerSection = () => {
|
||||
{/* Right Side: Floating Image Group + Category Slider */}
|
||||
<div className="hero-right-content" 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 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 src={banner.images.leftBottom} alt="shape" className="cup-shape" />
|
||||
<img src={banner.images.topRight} alt="shape" className="t-shirt-shape" />
|
||||
<img src={banner.images.rightBottom} alt="shape" className="cap-shape" />
|
||||
{/* <img loading="lazy" src="https://modinatheme.com/html/printnow-html/assets/img/hero/t-shirt-bg.png" alt="shape" className="circle-shape" /> */}
|
||||
<img loading="lazy" src={banner.images.center} alt="t-shirt" className="main-shirt" />
|
||||
{/* <img loading="lazy" src="https://modinatheme.com/html/printnow-html/assets/img/hero/mockup-shape.png" alt="shape" className="mockup-shape" /> */}
|
||||
<img loading="lazy" src={banner.images.leftBottom} alt="shape" className="cup-shape" />
|
||||
<img loading="lazy" src={banner.images.topRight} alt="shape" className="t-shirt-shape" />
|
||||
<img loading="lazy" src={banner.images.rightBottom} alt="shape" className="cap-shape" />
|
||||
</div>
|
||||
|
||||
{/* Bottom Right "Our Service" Slider */}
|
||||
@ -150,7 +150,7 @@ const BannerSection = () => {
|
||||
<div key={idx} className="slider-item" suppressHydrationWarning>
|
||||
<div className="slider-image-node" suppressHydrationWarning>
|
||||
<a href={cat.link}>
|
||||
<img src={cat.image} alt={cat.title} />
|
||||
<img loading="lazy" src={cat.image} alt={cat.title} />
|
||||
</a>
|
||||
</div>
|
||||
<div className="slider-category-title" suppressHydrationWarning>
|
||||
|
||||
@ -151,7 +151,7 @@ const BlogSection = ({
|
||||
<div key={blog.id} className="blog-slider-item px-3">
|
||||
<div className="blog-style-one relative overflow-hidden">
|
||||
<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>
|
||||
</Link>
|
||||
<div className="blog-content">
|
||||
@ -180,7 +180,7 @@ const BlogSection = ({
|
||||
<div key={blog.id} className={columns}>
|
||||
<div className="blog-style-one relative overflow-hidden">
|
||||
<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>
|
||||
</Link>
|
||||
<div className="blog-content">
|
||||
|
||||
@ -20,7 +20,7 @@ const ChooseSection = () => (
|
||||
</p>
|
||||
<div className="faq-one__card">
|
||||
<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 className="faq-one__content">
|
||||
<ul className="faq-one__list list-unstyled">
|
||||
@ -34,7 +34,7 @@ const ChooseSection = () => (
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
@ -5,7 +5,7 @@ const CtaSection = () => (
|
||||
<div className="small-container">
|
||||
<div className="row g-0 box-shadow-1 fix">
|
||||
<div className="col-xxl-6 col-lg-6 bg-white">
|
||||
<figure className="image w-img"><img src="/assets/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 className="col-xxl-6 col-lg-6">
|
||||
<div className="content p-relative">
|
||||
|
||||
@ -86,7 +86,7 @@ const TestimonialsSection = ({ className = "section-space" }: { className?: stri
|
||||
<div className="row g-0">
|
||||
<div className="col-xxl-4 col-xl-4 col-lg-12">
|
||||
<div className="testimonials-video-area p-relative">
|
||||
<figure className="image w-img"><img src="/assets/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 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 className="testimonials-two-box-solid">
|
||||
<div className="author-image-solid">
|
||||
<img src={profileImg} alt={name} />
|
||||
<img loading="lazy" src={profileImg} alt={name} />
|
||||
</div>
|
||||
<div className="icon-quote-testi">
|
||||
<i className="fa-solid fa-quote-right"></i>
|
||||
|
||||
@ -9,10 +9,10 @@ const About2Section = () => (
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 col-md-12">
|
||||
<div className="about-2-image-area p-relative wow fadeInLeft" data-wow-delay="500ms">
|
||||
<figure className="main-image m-img">
|
||||
<img src="/assets/images/about/1/grid.webp" alt="Our story" loading="lazy" />
|
||||
<img loading="lazy" src="/assets/images/about/1/grid.webp" alt="Our story" />
|
||||
</figure>
|
||||
{/* <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 className="icon-box">
|
||||
<div className="icon">
|
||||
|
||||
@ -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 className="work-process-box text-center">
|
||||
<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>
|
||||
</div>
|
||||
<div className="content">
|
||||
|
||||
@ -10,11 +10,11 @@ const ChooseSection = () => (
|
||||
<div className="choose-3-image-area p-relative">
|
||||
<div className="shape-1" style={{ backgroundImage: "url(/assets/images/services/choose/element-2.webp)" }}></div>
|
||||
<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>
|
||||
{/* <div className="image-3-area">
|
||||
<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="video_player_btn">
|
||||
<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 className="icon-box-area">
|
||||
<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>
|
||||
<h5><a href="#">{item.label}</a></h5>
|
||||
</div>
|
||||
|
||||
@ -23,24 +23,24 @@ const CTA = () => {
|
||||
<div className="col-lg-3"></div>
|
||||
<div className="col-lg-4">
|
||||
<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">
|
||||
<img src="/assets/img/home/section10/right-image.webp" alt="" />
|
||||
<img loading="lazy" src="/assets/img/home/section10/right-image.webp" alt="" />
|
||||
</div>
|
||||
<ul className="aniamtion-key-1">
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -47,7 +47,7 @@ const Footer1 = () => {
|
||||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||||
<div className="footer-widget-1">
|
||||
<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>
|
||||
<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">
|
||||
|
||||
@ -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-logo">
|
||||
<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>
|
||||
</div>
|
||||
<div className="vl-offcanvas-close">
|
||||
|
||||
@ -38,7 +38,7 @@ const Header1 = () => {
|
||||
<div className="col-lg-3 col-md-6 col-9">
|
||||
<div className="vl-logo">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,13 +8,14 @@ const About = () => {
|
||||
const [isContactOpen, setIsContactOpen] = useState(false);
|
||||
return (
|
||||
<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="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<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
|
||||
loading="lazy"
|
||||
src="/assets/img-app/home/section2/about.webp"
|
||||
alt="About Metatroncube Software Solution"
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', borderRadius: '12px' }}
|
||||
@ -26,7 +27,7 @@ const About = () => {
|
||||
<div className="col-lg-5">
|
||||
<div className="about-glass-container about-header-area heading2">
|
||||
<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>
|
||||
<div className="space24"></div>
|
||||
<GsapReveal y={20} delay={0.2}>
|
||||
|
||||
@ -59,7 +59,7 @@ const BannerBottom = () => {
|
||||
{floatingItems.map((item, idx) => (
|
||||
<div key={item.className} className={`floating-item ${item.className}`}>
|
||||
<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 className="floating-content">
|
||||
<h6>{item.title}</h6>
|
||||
@ -71,6 +71,7 @@ const BannerBottom = () => {
|
||||
|
||||
{/* Central hero image */}
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/img-app/home/section1/second-section-centre-img.webp"
|
||||
alt="Digital Solutions Illustration"
|
||||
className="main-delivery-img img-fluid mt-2"
|
||||
@ -118,7 +119,7 @@ const BannerBottom = () => {
|
||||
}}
|
||||
>
|
||||
<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 className="call-details ms-2">
|
||||
<span style={{ color: '#fff', fontWeight: 600, fontSize: '16px' }}>Speak With Our App Experts Today </span>
|
||||
|
||||
@ -64,7 +64,7 @@ const BrandSlider = () => {
|
||||
<div className="col-lg-8 m-auto text-center">
|
||||
<div className="brand-header heading2 text-center">
|
||||
<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>
|
||||
<div className="space24"></div>
|
||||
<GsapReveal y={20} delay={0.2}>
|
||||
@ -84,7 +84,7 @@ const BrandSlider = () => {
|
||||
<Slider {...settings}>
|
||||
{brands.map((brand) => (
|
||||
<div key={brand.id} className="brand-item">
|
||||
<img src={brand.src} alt={brand.alt} />
|
||||
<img loading="lazy" src={brand.src} alt={brand.alt} />
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
|
||||
@ -64,12 +64,12 @@ const CaseStudies = () => {
|
||||
return (
|
||||
<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 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/1.webp" alt="" className="case-floating-element case-el-left-3" />
|
||||
<img loading="lazy" src="/assets/img-app/home/section6/2.webp" alt="" className="case-floating-element case-el-left-4" />
|
||||
|
||||
{/* Floating Elements - Right (4) */}
|
||||
<img 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/3.webp" alt="" className="case-floating-element case-el-right-1" />
|
||||
<img loading="lazy" src="/assets/img-app/home/section6/4.webp" alt="" className="case-floating-element case-el-right-2" />
|
||||
|
||||
|
||||
<div className="container">
|
||||
@ -80,7 +80,7 @@ const CaseStudies = () => {
|
||||
<div className="consen-section-title upper text-center pb-80 heading2">
|
||||
<GsapReveal y={20}>
|
||||
<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
|
||||
</h5>
|
||||
</GsapReveal>
|
||||
@ -156,7 +156,6 @@ const CaseStudies = () => {
|
||||
width={200}
|
||||
height={200}
|
||||
className="loaded"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="mobile-home-btn"></div>
|
||||
@ -188,6 +187,7 @@ const CaseStudies = () => {
|
||||
|
||||
{/* Lightbox Component */}
|
||||
<ImageLightbox
|
||||
|
||||
isOpen={isLightboxOpen}
|
||||
onClose={closeLightbox}
|
||||
imageUrl={selectedImage || ""}
|
||||
|
||||
@ -58,12 +58,12 @@ const CaseStudy = () => {
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<div className="images" data-aos="zoom-in" data-aos-duration="1000">
|
||||
<img src="/assets/img-app/elements/elements43.png" alt="" className="elements43" />
|
||||
<img src="/assets/img-app/elements/elements27.png" alt="" className="elements27" />
|
||||
<img 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/elements43.png" alt="" className="elements43" />
|
||||
<img loading="lazy" src="/assets/img-app/elements/elements27.png" alt="" className="elements27" />
|
||||
<img loading="lazy" src="/assets/img-app/elements/elements30.png" alt="" className="elements30" />
|
||||
<img loading="lazy" src="/assets/img-app/elements/elements39.png" alt="" className="elements39" />
|
||||
<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>
|
||||
|
||||
@ -97,7 +97,7 @@ const FAQ = () => {
|
||||
<div className="space-margin60">
|
||||
<GsapReveal y={20}>
|
||||
<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
|
||||
</h5>
|
||||
</GsapReveal>
|
||||
@ -139,6 +139,7 @@ const FAQ = () => {
|
||||
<div className="faqv2-center-wrap">
|
||||
<div className="faqv2-main-img">
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/img-app/home/section9/faq.webp"
|
||||
alt="FAQ Section"
|
||||
/>
|
||||
|
||||
@ -11,8 +11,8 @@ const Hero = () => {
|
||||
|
||||
return (
|
||||
<div className="hero1-section-area" id="home">
|
||||
<img 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/elements4.png" alt="" className="elements4" />
|
||||
<img loading="lazy" src="/assets/img-app/elements/elements5.png" alt="" className="elements5" />
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-7">
|
||||
@ -40,19 +40,19 @@ const Hero = () => {
|
||||
<div className="col-lg-5">
|
||||
<div className="hero-images-area">
|
||||
<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 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 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 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 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>
|
||||
|
||||
@ -13,7 +13,7 @@ const Pricing = () => {
|
||||
<div className="consen-section-title upper text-center pb-60 heading2">
|
||||
<GsapReveal y={20}>
|
||||
<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
|
||||
</h5>
|
||||
</GsapReveal>
|
||||
@ -71,6 +71,7 @@ const Pricing = () => {
|
||||
{plan.features.map((feature, i) => (
|
||||
<li key={i} className="d-flex align-items-center mb-3" style={{ color: plan.isPopular ? '#fff' : '#4a5568', fontSize: '16px' }}>
|
||||
<img
|
||||
loading="lazy"
|
||||
src={plan.isPopular ? "/assets/img/arrow-white.png" : "/assets/img/arrow.png"}
|
||||
alt=""
|
||||
style={{ width: '20px', height: '20px', objectFit: 'contain', marginRight: '10px' }}
|
||||
|
||||
@ -16,7 +16,7 @@ const Service = () => {
|
||||
<div className="col-lg-7">
|
||||
<div className="service-header heading2">
|
||||
<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>
|
||||
<div className="space24"></div>
|
||||
<GsapReveal y={20} delay={0.15}>
|
||||
|
||||
@ -86,7 +86,7 @@ const Testimonial = () => {
|
||||
<div className="col-lg-7 m-auto">
|
||||
<div className="testimonial-header text-center heading2 space-margin60">
|
||||
<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>
|
||||
<div className="space20"></div>
|
||||
<GsapReveal y={20} delay={0.2}>
|
||||
@ -108,7 +108,7 @@ const Testimonial = () => {
|
||||
<div className="col-lg-5">
|
||||
<GsapReveal y={30} duration={1}>
|
||||
<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>
|
||||
</GsapReveal>
|
||||
</div>
|
||||
@ -139,7 +139,7 @@ const Testimonial = () => {
|
||||
position: 'relative',
|
||||
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 */}
|
||||
<div className="stars" style={{ display: 'flex', gap: '6px', marginBottom: '25px' }}>
|
||||
@ -179,7 +179,7 @@ const Testimonial = () => {
|
||||
flexShrink: 0
|
||||
}}>
|
||||
{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>
|
||||
)}
|
||||
|
||||
@ -17,8 +17,8 @@ const Work = () => {
|
||||
backgroundSize: 'cover',
|
||||
}}
|
||||
>
|
||||
<img 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-2.webp" alt="" className="elements16" />
|
||||
<img loading="lazy" src="/assets/img-app/home/section5/top-element-1.webp" alt="" className="elements1 keyframe5" />
|
||||
|
||||
<div className="container">
|
||||
<div className="row align-items-center g-5">
|
||||
@ -27,16 +27,9 @@ const Work = () => {
|
||||
<div className="col-12 col-xl-5">
|
||||
<GsapReveal y={30} duration={1}>
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/img-app/home/section5/left.webp"
|
||||
alt="How It Works"
|
||||
// style={{
|
||||
// width: '100%',
|
||||
// height: '100%',
|
||||
// minHeight: '670px',
|
||||
// objectFit: 'cover',
|
||||
// display: 'block',
|
||||
// borderRadius: '16px',
|
||||
// }}
|
||||
/>
|
||||
</GsapReveal>
|
||||
</div>
|
||||
@ -45,7 +38,7 @@ const Work = () => {
|
||||
<div className="col-12 col-xl-7">
|
||||
<div className="work-content-area heading1">
|
||||
<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>
|
||||
<div className="space24"></div>
|
||||
<GsapReveal y={20} delay={0.15}>
|
||||
|
||||
@ -54,12 +54,12 @@ const WorkProcess = () => {
|
||||
</div>
|
||||
<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">
|
||||
<img src="/assets/img-app/elements/elements12.png" alt="" className="elements12" />
|
||||
<img src="/assets/img-app/elements/elements13.png" alt="" className="elements13" />
|
||||
<img 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/elements12.png" alt="" className="elements12" />
|
||||
<img loading="lazy" src="/assets/img-app/elements/elements13.png" alt="" className="elements13" />
|
||||
<img loading="lazy" src="/assets/img-app/elements/elements14.png" alt="" className="elements14" />
|
||||
<img loading="lazy" src="/assets/img-app/elements/elements15.png" alt="" className="elements15" />
|
||||
<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>
|
||||
|
||||
@ -10,19 +10,19 @@ const BlogCard: React.FC<BlogCardProps> = ({ blog }) => {
|
||||
return (
|
||||
<div className="vl-blog-1-item">
|
||||
<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 className="vl-blog-1-content">
|
||||
<div className="vl-blog-meta">
|
||||
<ul>
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -10,7 +10,7 @@ const CaseStudyCard: React.FC<CaseStudyCardProps> = ({ caseStudy }) => {
|
||||
return (
|
||||
<div className="case-slider-boxarea">
|
||||
<div className="img1 image-anime">
|
||||
<img src={caseStudy.image} alt={caseStudy.title} />
|
||||
<img loading="lazy" src={caseStudy.image} alt={caseStudy.title} />
|
||||
</div>
|
||||
<div className="content-area">
|
||||
<p>{caseStudy.tag}</p>
|
||||
|
||||
@ -10,7 +10,7 @@ const MemberCard: React.FC<MemberCardProps> = ({ member }) => {
|
||||
return (
|
||||
<div className="team-author-boxarea">
|
||||
<div className="img1 image-anime">
|
||||
<img src={member.image} alt={member.name} />
|
||||
<img loading="lazy" src={member.image} alt={member.name} />
|
||||
</div>
|
||||
<div className="content-area">
|
||||
<div className="text">
|
||||
@ -19,7 +19,7 @@ const MemberCard: React.FC<MemberCardProps> = ({ member }) => {
|
||||
<p>{member.role}</p>
|
||||
</div>
|
||||
<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>
|
||||
<ul>
|
||||
|
||||
@ -10,7 +10,7 @@ const ServiceCard: React.FC<ServiceCardProps> = ({ service }) => {
|
||||
return (
|
||||
<div className="service1-boxarea h-100 d-flex flex-column" style={{ marginBottom: 0 }}>
|
||||
<div className="icons">
|
||||
<img src={service.icon} alt={service.title} />
|
||||
<img loading="lazy" src={service.icon} alt={service.title} />
|
||||
</div>
|
||||
<div className="space24"></div>
|
||||
<div className="space16"></div>
|
||||
|
||||
@ -32,24 +32,24 @@ const CTA = () => {
|
||||
<div className="col-lg-3"></div>
|
||||
<div className="col-lg-4">
|
||||
<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">
|
||||
<img src="/assets/img-app/home/section10/right.webp" alt="" />
|
||||
<img loading="lazy" src="/assets/img-app/home/section10/right.webp" alt="" />
|
||||
</div>
|
||||
<ul className="aniamtion-key-1">
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -47,7 +47,7 @@ const Footer = () => {
|
||||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||||
<div className="footer-widget-1">
|
||||
<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>
|
||||
<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">
|
||||
|
||||
@ -29,7 +29,7 @@ const Header = () => {
|
||||
<div className="col-lg-3 col-md-6 col-6">
|
||||
<div className="vl-logo">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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-logo">
|
||||
<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>
|
||||
</div>
|
||||
<div className="vl-offcanvas-close">
|
||||
|
||||
@ -15,17 +15,17 @@ const AboutService = () => {
|
||||
|
||||
{/* Background Image */}
|
||||
<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>
|
||||
|
||||
{/* Foreground Curved Image */}
|
||||
<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>
|
||||
|
||||
{/* Decorative Dots */}
|
||||
<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>
|
||||
@ -46,7 +46,7 @@ const AboutService = () => {
|
||||
<div className="single-format-content mb-20">
|
||||
<div className="format-row d-flex align-items-start gap-4">
|
||||
{/* <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 className="feature-bullets">
|
||||
<div className="bullet-item d-flex align-items-center">
|
||||
|
||||
@ -48,7 +48,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
|
||||
</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' }}>
|
||||
<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">
|
||||
<span className="sidebar__call__icon">
|
||||
<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="service-details__content">
|
||||
{/* <div className="service-details__thumbnail">
|
||||
<img src={service.bigImage} alt={service.title} />
|
||||
<img loading="lazy" src={service.bigImage} alt={service.title} />
|
||||
</div> */}
|
||||
|
||||
{service.content && (
|
||||
@ -80,7 +80,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
|
||||
<div className="col-md-12 col-lg-12 mt-20">
|
||||
<div className="service-details__content">
|
||||
{/* <div className="service-details__thumbnail">
|
||||
<img src={service.bigImage} alt={service.title} />
|
||||
<img loading="lazy" src={service.bigImage} alt={service.title} />
|
||||
</div> */}
|
||||
|
||||
{service.fullcontent && (
|
||||
|
||||
@ -8,13 +8,14 @@ const About = () => {
|
||||
const [isContactOpen, setIsContactOpen] = useState(false);
|
||||
return (
|
||||
<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="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<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
|
||||
loading="lazy"
|
||||
src="/assets/img/home/section2/third-section.webp"
|
||||
alt="About MetatronCube IT Solution"
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', borderRadius: '12px' }}
|
||||
@ -26,7 +27,7 @@ const About = () => {
|
||||
<div className="col-lg-5">
|
||||
<div className="about-glass-container about-header-area heading2">
|
||||
<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>
|
||||
<div className="space24"></div>
|
||||
<GsapReveal y={20} delay={0.2}>
|
||||
@ -40,13 +41,13 @@ const About = () => {
|
||||
<h6>We specialize in:</h6>
|
||||
<div className="specialty-row mt-3">
|
||||
<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 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> Business 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 loading="lazy" src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Landing Pages</li>
|
||||
</ul>
|
||||
<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 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> E-commerce Stores</li>
|
||||
<li><span><img loading="lazy" src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Custom Web Applications</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
@ -57,7 +57,7 @@ const BannerBottom = () => {
|
||||
{floatingItems.map((item, idx) => (
|
||||
<div key={item.className} className={`floating-item ${item.className}`}>
|
||||
<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 className="floating-content">
|
||||
<h6>{item.title}</h6>
|
||||
@ -69,6 +69,7 @@ const BannerBottom = () => {
|
||||
|
||||
{/* Central hero image */}
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/img/home/section1/second-section-centre-img.webp"
|
||||
alt="Digital Solutions Illustration"
|
||||
className="main-delivery-img img-fluid mt-2"
|
||||
@ -114,7 +115,7 @@ const BannerBottom = () => {
|
||||
}}
|
||||
>
|
||||
<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 className="call-details ms-2">
|
||||
<span style={{ color: '#fff', fontWeight: 600, fontSize: '16px' }}>Speak With Our Experts Today</span>
|
||||
|
||||
@ -64,7 +64,7 @@ const BrandSlider = () => {
|
||||
<div className="col-lg-8 m-auto text-center">
|
||||
<div className="brand-header heading2 text-center">
|
||||
<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>
|
||||
<div className="space24"></div>
|
||||
<GsapReveal y={20} delay={0.2}>
|
||||
@ -84,7 +84,7 @@ const BrandSlider = () => {
|
||||
<Slider {...settings}>
|
||||
{brands.map((brand) => (
|
||||
<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>
|
||||
))}
|
||||
</Slider>
|
||||
|
||||
@ -65,12 +65,12 @@ const CaseStudies = () => {
|
||||
return (
|
||||
<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 src="/assets/img/home/section6/2.webp" alt="" className="case-floating-element case-el-left-4" />
|
||||
<img loading="lazy" src="/assets/img/home/section6/1.webp" alt="" className="case-floating-element case-el-left-3" />
|
||||
<img loading="lazy" src="/assets/img/home/section6/2.webp" alt="" className="case-floating-element case-el-left-4" />
|
||||
|
||||
{/* Floating Elements - Right (4) */}
|
||||
<img 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/3.webp" alt="" className="case-floating-element case-el-right-1" />
|
||||
<img loading="lazy" src="/assets/img/home/section6/4.webp" alt="" className="case-floating-element case-el-right-2" />
|
||||
|
||||
|
||||
<div className="container">
|
||||
@ -81,7 +81,7 @@ const CaseStudies = () => {
|
||||
<div className="consen-section-title upper text-center pb-80 heading2">
|
||||
<GsapReveal y={20}>
|
||||
<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
|
||||
</h5>
|
||||
</GsapReveal>
|
||||
@ -157,7 +157,6 @@ const CaseStudies = () => {
|
||||
width={600}
|
||||
height={400}
|
||||
className="loaded"
|
||||
priority
|
||||
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -58,12 +58,12 @@ const CaseStudy = () => {
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<div className="images" data-aos="zoom-in" data-aos-duration="1000">
|
||||
<img src="/assets/img/elements/elements43.png" alt="" className="elements43" />
|
||||
<img src="/assets/img/elements/elements27.png" alt="" className="elements27" />
|
||||
<img 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/elements43.png" alt="" className="elements43" />
|
||||
<img loading="lazy" src="/assets/img/elements/elements27.png" alt="" className="elements27" />
|
||||
<img loading="lazy" src="/assets/img/elements/elements30.png" alt="" className="elements30" />
|
||||
<img loading="lazy" src="/assets/img/elements/elements39.png" alt="" className="elements39" />
|
||||
<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>
|
||||
|
||||
@ -105,7 +105,7 @@ const FAQ = ({ faqData }: { faqData?: { question: string; answer: string }[] })
|
||||
<div className="space-margin60">
|
||||
<GsapReveal y={20}>
|
||||
<h5 className="faqv2-subtitle">
|
||||
<span><img src="/favicon.ico" alt="" /></span>
|
||||
<span><img loading="lazy" src="/favicon.ico" alt="" /></span>
|
||||
FAQ
|
||||
</h5>
|
||||
</GsapReveal>
|
||||
@ -141,6 +141,7 @@ const FAQ = ({ faqData }: { faqData?: { question: string; answer: string }[] })
|
||||
<div className="faqv2-center-wrap">
|
||||
<div className="faqv2-main-img">
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/img/home/section9/9.webp"
|
||||
alt="FAQ Section"
|
||||
/>
|
||||
|
||||
@ -11,8 +11,8 @@ const Hero = () => {
|
||||
|
||||
return (
|
||||
<div className="hero1-section-area" id="home">
|
||||
<img 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/elements4.png" alt="" className="elements4" />
|
||||
<img loading="lazy" src="/assets/img/elements/elements5.png" alt="" className="elements5" />
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-7">
|
||||
@ -40,19 +40,19 @@ const Hero = () => {
|
||||
<div className="col-lg-5">
|
||||
<div className="hero-images-area">
|
||||
<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 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 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 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 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>
|
||||
|
||||
@ -13,7 +13,7 @@ const Pricing = () => {
|
||||
<div className="consen-section-title upper text-center pb-60 heading2">
|
||||
<GsapReveal y={20}>
|
||||
<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
|
||||
</h5>
|
||||
</GsapReveal>
|
||||
@ -71,6 +71,7 @@ const Pricing = () => {
|
||||
{plan.features.map((feature, i) => (
|
||||
<li key={i} className="d-flex align-items-center mb-3" style={{ color: plan.isPopular ? '#fff' : '#4a5568', fontSize: '16px' }}>
|
||||
<img
|
||||
loading="lazy"
|
||||
src={plan.isPopular ? "/assets/img/arrow-white.png" : "/assets/img/arrow.png"}
|
||||
alt=""
|
||||
style={{ width: '20px', height: '20px', objectFit: 'contain', marginRight: '10px' }}
|
||||
|
||||
@ -16,7 +16,7 @@ const Service = () => {
|
||||
<div className="col-lg-7">
|
||||
<div className="service-header heading2">
|
||||
<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>
|
||||
<div className="space24"></div>
|
||||
<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="service-intro-img" style={{ position: 'relative' }}>
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/img/home/section3/top-right-image.webp"
|
||||
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)' }}
|
||||
|
||||
@ -85,7 +85,7 @@ const Testimonial = () => {
|
||||
<div className="col-lg-7 m-auto">
|
||||
<div className="testimonial-header text-center heading2 space-margin60">
|
||||
<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>
|
||||
<div className="space20"></div>
|
||||
<GsapReveal y={20} delay={0.2}>
|
||||
@ -107,7 +107,7 @@ const Testimonial = () => {
|
||||
<div className="col-lg-5">
|
||||
<GsapReveal y={30} duration={1}>
|
||||
<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>
|
||||
</GsapReveal>
|
||||
</div>
|
||||
@ -138,7 +138,7 @@ const Testimonial = () => {
|
||||
position: 'relative',
|
||||
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 */}
|
||||
<div className="stars" style={{ display: 'flex', gap: '6px', marginBottom: '25px' }}>
|
||||
@ -178,7 +178,7 @@ const Testimonial = () => {
|
||||
flexShrink: 0
|
||||
}}>
|
||||
{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>
|
||||
)}
|
||||
|
||||
@ -17,8 +17,8 @@ const Work = () => {
|
||||
backgroundSize: 'cover',
|
||||
}}
|
||||
>
|
||||
<img 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-2.webp" alt="" className="elements16" />
|
||||
<img loading="lazy" src="/assets/img/home/section5/element-1.webp" alt="" className="elements1 keyframe5" />
|
||||
|
||||
<div className="container">
|
||||
<div className="row align-items-center g-5">
|
||||
@ -27,16 +27,9 @@ const Work = () => {
|
||||
<div className="col-12 col-xl-5">
|
||||
<GsapReveal y={30} duration={1}>
|
||||
<img
|
||||
loading="lazy"
|
||||
src="/assets/img/home/section5/left-side.webp"
|
||||
alt="How It Works"
|
||||
// style={{
|
||||
// width: '100%',
|
||||
// height: '100%',
|
||||
// minHeight: '670px',
|
||||
// objectFit: 'cover',
|
||||
// display: 'block',
|
||||
// borderRadius: '16px',
|
||||
// }}
|
||||
/>
|
||||
</GsapReveal>
|
||||
</div>
|
||||
@ -45,7 +38,7 @@ const Work = () => {
|
||||
<div className="col-12 col-xl-7">
|
||||
<div className="work-content-area heading1">
|
||||
<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>
|
||||
<div className="space24"></div>
|
||||
<GsapReveal y={20} delay={0.15}>
|
||||
@ -77,7 +70,7 @@ const Work = () => {
|
||||
].map((step, i) => (
|
||||
<div key={i} className="work-step-row" data-aos="fade-up" data-aos-duration={600 + i * 80}>
|
||||
<div className="work-step-num">
|
||||
<img src={step.img} alt={step.title} />
|
||||
<img loading="lazy" src={step.img} alt={step.title} />
|
||||
</div>
|
||||
<div className="work-step-body">
|
||||
<h4>{step.title}</h4>
|
||||
|
||||
@ -54,12 +54,12 @@ const WorkProcess = () => {
|
||||
</div>
|
||||
<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">
|
||||
<img src="/assets/img/elements/elements12.png" alt="" className="elements12" />
|
||||
<img src="/assets/img/elements/elements13.png" alt="" className="elements13" />
|
||||
<img 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/elements12.png" alt="" className="elements12" />
|
||||
<img loading="lazy" src="/assets/img/elements/elements13.png" alt="" className="elements13" />
|
||||
<img loading="lazy" src="/assets/img/elements/elements14.png" alt="" className="elements14" />
|
||||
<img loading="lazy" src="/assets/img/elements/elements15.png" alt="" className="elements15" />
|
||||
<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>
|
||||
|
||||
@ -47,7 +47,7 @@ const Footer = () => {
|
||||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||||
<div className="footer-widget-1">
|
||||
<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>
|
||||
<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">
|
||||
|
||||
@ -30,7 +30,7 @@ const Header = () => {
|
||||
<div className="col-lg-3 col-md-6 col-6">
|
||||
<div className="vl-logo">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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-logo">
|
||||
<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>
|
||||
</div>
|
||||
<div className="vl-offcanvas-close">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user