101 lines
5.0 KiB
TypeScript
101 lines
5.0 KiB
TypeScript
const banners = [
|
|
{
|
|
image: "/assets/images/home/1/banner-image/web.webp",
|
|
subTitle: "METATRONCUBE SOLUTIONS",
|
|
title: "WEB AND APP DEVELOPMENT PIONEERING INNOVATION",
|
|
text: "Elevate your digital landscape with Metatroncube's cutting-edge web and mobile app solutions.",
|
|
btnLabel: "Book Your Call Now",
|
|
btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
|
|
},
|
|
{
|
|
image: "/assets/images/home/1/banner-image/digital.webp",
|
|
subTitle: "METATRONCUBE SOLUTIONS",
|
|
title: "DIGITAL MARKETING AMPLIFYING YOUR ONLINE VOICE",
|
|
text: "Explore Metatroncube's innovative strategies to connect, engage, and grow your audience in the digital realm.",
|
|
btnLabel: "Schedule Appointment",
|
|
btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
|
|
},
|
|
{
|
|
image: "/assets/images/home/1/banner-image/seo.webp",
|
|
subTitle: "METATRONCUBE SOLUTIONS",
|
|
title: "SEO STRATEGIES PAVING YOUR PATH TO SUCCESS",
|
|
text: "Maximize visibility and drive traffic with Metatroncube's expert SEO strategies.",
|
|
btnLabel: "REQUEST CONSULTATION",
|
|
btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
|
|
},
|
|
{
|
|
image: "/assets/images/home/1/banner-image/graphic.webp",
|
|
subTitle: "METATRONCUBE SOLUTIONS",
|
|
title: "GRAPHIC DESIGN CREATING VISUAL IMPACT",
|
|
text: "Craft compelling visuals that enhance your brand identity with Metatroncube's graphic design services",
|
|
btnLabel: "BOOK YOUR FREE CONSULTATION",
|
|
btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
|
|
},
|
|
];
|
|
|
|
const BannerSection = () => {
|
|
return (
|
|
<section className="banner-section p-relative fix">
|
|
<div className="swiper banner-active">
|
|
<div className="swiper-wrapper">
|
|
{banners.map((banner, i) => (
|
|
<div key={i} className="swiper-slide">
|
|
<div className="banner-main" style={{ backgroundImage: `url(${banner.image})` }}>
|
|
<div className="large-container">
|
|
<div className="banner-area p-relative z-3 wow img-custom-anim-left animated" data-wow-delay={`${1500 + i * 1000}ms`}>
|
|
<span className="p-relative banner-sub-title">{banner.subTitle}</span>
|
|
<h1 className="banner-title">{banner.title}</h1>
|
|
<p className="banner-text">{banner.text}</p>
|
|
<div className="banner-btn-area">
|
|
<a
|
|
className="primary-btn-1 btn-hover"
|
|
href={banner.btnHref}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{banner.btnLabel} | <i className="fa-solid fa-arrow-right"></i>
|
|
<span className="btn-hover-span"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="banner-shape-area">
|
|
{/* <div
|
|
className="shape-1"
|
|
style={{ backgroundImage: "url(/assets/images/home/1/white-blue/white.webp)" }}
|
|
></div> */}
|
|
|
|
<div
|
|
className="shape-2"
|
|
style={{ backgroundImage: "url(/assets/images/home/1/white-blue/blue.webp)" }}
|
|
></div>
|
|
|
|
<div
|
|
className="shape-3"
|
|
style={{ backgroundImage: "url(/assets/images/home/1/dark-light/light.webp)" }}
|
|
></div>
|
|
|
|
{/* <div
|
|
className="shape-4"
|
|
style={{ backgroundImage: "url(/assets/images/home/1/dark-light/dark.webp)" }}
|
|
></div> */}
|
|
|
|
<div
|
|
className="shape-5"
|
|
style={{ backgroundImage: "url(/assets/images/home/1/right/right.webp)" }}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="banner-dot-inner">
|
|
<div className="banner-dot"></div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default BannerSection;
|