166 lines
9.8 KiB
JavaScript
166 lines
9.8 KiB
JavaScript
"use client";
|
|
import { useState } from "react";
|
|
|
|
export default function Choose2() {
|
|
const [activeIndex, setActiveIndex] = useState(1);
|
|
const handleOnClick = (index) => {
|
|
setActiveIndex(index);
|
|
};
|
|
return (
|
|
<>
|
|
<section className="choose__area-two">
|
|
<div className="choose__bg">
|
|
<video src="/assets/video/aboutpage.webm" autoPlay muted loop />
|
|
</div>
|
|
<div className="container">
|
|
<div className="row justify-content-end">
|
|
<div className="col-lg-8 col-md-10">
|
|
<div className="choose__content-two">
|
|
<div className="section-title mb-20 tg-heading-subheading animation-style3">
|
|
<span className="sub-title">
|
|
COMPREHENSIVE <span className="title-color">APPROACH</span>
|
|
</span>
|
|
<h2 className="title tg-element-title">Optimize Your Company's Website Today!</h2>
|
|
</div>
|
|
<p>
|
|
At RankRunners, we never cut corners. Our team takes a comprehensive approach
|
|
towards maximizing your site's SEO by utilizing all of the tools in our gearbox!
|
|
</p>
|
|
<div className="choose__tab">
|
|
{/* <ul className="nav nav-tabs" id="myTab" role="tablist">
|
|
<li className="nav-item" onClick={() => handleOnClick(1)}>
|
|
<button
|
|
className={activeIndex == 1 ? "nav-link active" : "nav-link"}
|
|
id="goal-tab"
|
|
data-bs-toggle="tab"
|
|
data-bs-target="#goal-tab-pane"
|
|
type="button"
|
|
role="tab"
|
|
aria-controls="goal-tab-pane"
|
|
aria-selected="true"
|
|
>
|
|
Focus On Goal
|
|
</button>
|
|
</li>
|
|
<li className="nav-item" onClick={() => handleOnClick(2)}>
|
|
<button
|
|
className={activeIndex == 2 ? "nav-link active" : "nav-link"}
|
|
id="management-tab"
|
|
data-bs-toggle="tab"
|
|
data-bs-target="#management-tab-pane"
|
|
type="button"
|
|
role="tab"
|
|
aria-controls="management-tab-pane"
|
|
aria-selected="false"
|
|
>
|
|
Risk Management
|
|
</button>
|
|
</li>
|
|
</ul> */}
|
|
<div className="tab-content" id="myTabContent">
|
|
<div
|
|
className={activeIndex == 1 ? "tab-pane fade show active" : "tab-pane fade"}
|
|
id="goal-tab-pane"
|
|
role="tabpanel"
|
|
aria-labelledby="goal-tab"
|
|
tabIndex={0}
|
|
>
|
|
<div className="choose__tab-content">
|
|
{/* <p>
|
|
longerty successfully cope with tasks of varying complexity provide
|
|
area guarantees and regularly master new Practice.
|
|
</p> */}
|
|
<ul className="list-wrap">
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Backlink Creation
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Web Design Overhauls
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Complete Site Audits
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Competitor Analysis
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Performance Monitoring
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Site Content Optimization
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{/* <div
|
|
className={activeIndex == 2 ? "tab-pane fade show active" : "tab-pane fade"}
|
|
id="management-tab-pane"
|
|
role="tabpanel"
|
|
aria-labelledby="management-tab"
|
|
tabIndex={0}
|
|
>
|
|
<div className="choose__tab-content">
|
|
<p>
|
|
longerty successfully cope with tasks of varying complexity provide
|
|
area guarantees and regularly master new Practice.
|
|
</p>
|
|
<ul className="list-wrap">
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Save Money Time
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
100% Satisfaction
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Best For IT Consulting
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Our Vision, Our Mission
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
{/* <div className="operating__box">
|
|
<div className="icon">
|
|
<i className="fas fa-globe" />
|
|
</div>
|
|
<div className="content">
|
|
<p>
|
|
Since 1991 operating <br /> in the world
|
|
</p>
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <div className="choose__shape-wrap-two">
|
|
<img
|
|
src="/assets/img/images/h2_choose_shape01.png"
|
|
alt=""
|
|
data-parallax='{"x" : -80 , "y" : 80 , "rotateZ":80}'
|
|
/>
|
|
<img
|
|
src="/assets/img/images/h2_choose_shape02.png"
|
|
alt=""
|
|
data-aos="fade-left"
|
|
data-aos-delay={400}
|
|
/>
|
|
</div> */}
|
|
</section>
|
|
</>
|
|
);
|
|
}
|