64 lines
4.2 KiB
JavaScript
64 lines
4.2 KiB
JavaScript
'use client'
|
|
import { useState } from "react"
|
|
|
|
export default function ServiceTabs1() {
|
|
const [activeIndex, setActiveIndex] = useState(1)
|
|
const handleOnClick = (index) => {
|
|
setActiveIndex(index)
|
|
}
|
|
return (
|
|
<>
|
|
<div className="row">
|
|
<div className="col-md-6">
|
|
<ul className="nav nav-tabs tab-btn-style-one mr-md-4" role="tablist">
|
|
<li className="nav-item" onClick={() => handleOnClick(1)}>
|
|
<a className={activeIndex == 1 ? "nav-link active" : "nav-link"} aria-label="Workflow process">01. Workflow & Process
|
|
</a>
|
|
</li>
|
|
<li className="nav-item" onClick={() => handleOnClick(2)}>
|
|
<a className={activeIndex == 2 ? "nav-link active" : "nav-link"} aria-label="Research analysis">
|
|
02. Research analysis
|
|
</a>
|
|
</li>
|
|
<li className="nav-item" onClick={() => handleOnClick(3)}>
|
|
<a className={activeIndex == 3 ? "nav-link active" : "nav-link"} aria-label="Financial statement">
|
|
03. Financial statement
|
|
</a>
|
|
</li>
|
|
<li className="nav-item" onClick={() => handleOnClick(4)}>
|
|
<a className={activeIndex == 4 ? "nav-link active" : "nav-link"} aria-label="Risk assuarance">
|
|
04. Risk assuarance
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="col-md-6">
|
|
{/* Tab panes */}
|
|
<div className="tab-content wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1200ms">
|
|
<div className={activeIndex == 1 ? "tab-pane fadeInUp animated show active" : "tab-pane fadeInUp animated"}>
|
|
<h4>Workflow and <br />our successive work process</h4>
|
|
<div className="text">Blinded by desire that they cannot forese the pain and trouble that are bound to ensue and equal blame belongs to those who fail in their through weakness shrinking.</div>
|
|
<img src="/assets/images/resource/single-service-4.jpg" alt="" />
|
|
</div>
|
|
<div className={activeIndex == 2 ? "tab-pane fadeInUp animated show active" : "tab-pane fadeInUp animated"}>
|
|
<h4>Workflow and <br />our successive work process</h4>
|
|
<div className="text">Blinded by desire that they cannot forese the pain and trouble that are bound to ensue and equal blame belongs to those who fail in their through weakness shrinking.</div>
|
|
<img src="/assets/images/resource/single-service-4.jpg" alt="" />
|
|
</div>
|
|
<div className={activeIndex == 3 ? "tab-pane fadeInUp animated show active" : "tab-pane fadeInUp animated"}>
|
|
<h4>Workflow and <br />our successive work process</h4>
|
|
<div className="text">Blinded by desire that they cannot forese the pain and trouble that are bound to ensue and equal blame belongs to those who fail in their through weakness shrinking.</div>
|
|
<img src="/assets/images/resource/single-service-4.jpg" alt="" />
|
|
</div>
|
|
<div className={activeIndex == 4 ? "tab-pane fadeInUp animated show active" : "tab-pane fadeInUp animated"}>
|
|
<h4>Workflow and <br />our successive work process</h4>
|
|
<div className="text">Blinded by desire that they cannot forese the pain and trouble that are bound to ensue and equal blame belongs to those who fail in their through weakness shrinking.</div>
|
|
<img src="/assets/images/resource/single-service-4.jpg" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|