80 lines
4.9 KiB
TypeScript
80 lines
4.9 KiB
TypeScript
import { services2 } from "@/utils/data";
|
||
|
||
const ServiceTabSection = () => {
|
||
const tabData = [
|
||
{ id: "modified-roofing", icon: "icon-2.png" },
|
||
{ id: "roof-installation", icon: "icon-3.png" },
|
||
{ id: "roof-cornering", icon: "icon.png" },
|
||
{ id: "roof-renovation", icon: "icon-2.png" }
|
||
];
|
||
|
||
return (
|
||
<section className="service-tab-section section-space bg-color-1 p-relative">
|
||
<div className="bg-image" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-35.png)" }}></div>
|
||
<div className="bg-shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-33.png)" }}></div>
|
||
<div className="bg-shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-34.png)" }}></div>
|
||
<div className="small-container">
|
||
<div className="service-tab-title-area mb-70">
|
||
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
||
<span className="section-sub-title">SERVICES WE’RE OFFERING</span>
|
||
<h3 className="section-title mt-10 text-white p-relative">Exclusive IT Services</h3>
|
||
</div>
|
||
<a className="primary-btn-4 btn-hover mt-20" href="/services">
|
||
all services | <i className="fa-solid fa-arrow-right"></i>
|
||
<span className="btn-hover-span"></span>
|
||
</a>
|
||
</div>
|
||
<div className="row">
|
||
<div className="col-xxl-4 col-xl-4 col-lg-4">
|
||
<div className="service-tab-btn-area wow fadeInLeft" data-wow-delay="500ms">
|
||
<ul className="nav nav-tabs" id="myTab" role="tablist">
|
||
{services2.map((service, i) => (
|
||
<li key={service.id} className="nav-item" role="presentation">
|
||
<a href="javascript:void(0)" className={`nav-link ${i === 0 ? 'active' : ''}`} id={`${tabData[i].id}-tab`} data-bs-toggle="tab" data-bs-target={`#${tabData[i].id}-tab-pane`} role="tab">
|
||
<div className="icon-box">
|
||
<img src={`/assets/imgs/icon/${tabData[i].icon}`} alt="img" />
|
||
</div>
|
||
{service.title}
|
||
</a>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div className="col-xxl-8 col-xl-8 col-lg-8">
|
||
<div className="service-tab-details-area">
|
||
<div className="tab-content" id="myTabContent">
|
||
{services2.map((service, i) => (
|
||
<div key={service.id} className={`tab-pane fade ${i === 0 ? 'show active' : ''}`} id={`${tabData[i].id}-tab-pane`} role="tabpanel">
|
||
<div className="service-tab-content p-relative">
|
||
<div className="tab-bg-shape" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-32.png)" }}></div>
|
||
<figure className="image p-relative">
|
||
<img src="/assets/imgs/resources/service-tab-1.jpg" alt="" />
|
||
</figure>
|
||
<div className="content p-relative">
|
||
<h4>{service.title}</h4>
|
||
<p className="pt-15 pb-10">{service.description}</p>
|
||
<ul className="tab-list-content">
|
||
<li>Accurate Testing Processes</li>
|
||
<li>100% Satisfaction Guarantee</li>
|
||
<li>Award Winning Company</li>
|
||
</ul>
|
||
<a className="primary-btn-1 btn-hover mt-20" href="/services">
|
||
Read more | <i className="fa-solid fa-arrow-right"></i>
|
||
<span className="btn-hover-span"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default ServiceTabSection;
|