57 lines
3.4 KiB
TypeScript
57 lines
3.4 KiB
TypeScript
import React, { useEffect } from "react";
|
|
|
|
const BannerSection = () => {
|
|
return (
|
|
<section className="banner-section-2 p-relative fix">
|
|
<div className="swiper banner-active">
|
|
<div className="swiper-wrapper">
|
|
{[1, 1, 1].map((_, i) => (
|
|
<div key={i} className="swiper-slide">
|
|
<div className="banner-main-2" style={{ backgroundImage: "url(/assets/imgs/banner/banner-3.jpg)" }}>
|
|
<div className="large-container">
|
|
<div className="banner-area-2 p-relative z-3 wow img-custom-anim-left animated" data-wow-delay={`${1000 + i * 2000}ms`}>
|
|
<span className="p-relative banner-sub-title">Best it SOULTION Provider</span>
|
|
<h1 className="banner-title">Excellent It Services for Your Success</h1>
|
|
<p className="banner-text">We denounce with righteous indignation and dislike men who are so<br /> beguiled and demoralized by the charms of pleasure.</p>
|
|
<div className="banner-btn-area-2">
|
|
<a className="primary-btn-1 btn-hover" href="/services">
|
|
VIEW SERVICES | <i className="fa-solid fa-arrow-right"></i>
|
|
<span className="btn-hover-span"></span>
|
|
</a>
|
|
<div className="round-image-area">
|
|
<div className="image-1">
|
|
<img src="/assets/imgs/banner/clients-group.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<h6>satisfied clients</h6>
|
|
</div>
|
|
</div>
|
|
<div className="socials-area">
|
|
<ul>
|
|
<li><a href="#"><i className="fab fa-facebook-f"></i></a></li>
|
|
<li><a href="#"><i className="fab fa-twitter"></i></a></li>
|
|
<li><a href="#"><i className="fab fa-linkedin-in"></i></a></li>
|
|
<li><a href="#"><i className="fab fa-youtube"></i></a></li>
|
|
</ul>
|
|
<span>FOLLOW US</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="shape-area-2">
|
|
{[18, 19, 20, 21, 22, 23].map((s, idx) => (
|
|
<div key={idx} className={`shape-${idx + 1}`} style={{ backgroundImage: `url(/assets/imgs/shapes/shape-${s}.png)` }}></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="banner-dot-inner">
|
|
<div className="banner-dot"></div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default BannerSection;
|