115 lines
4.2 KiB
JavaScript
115 lines
4.2 KiB
JavaScript
import React from "react";
|
|
import Image from "next/image";
|
|
import AnimatedText from "@/components/common/AnimatedText";
|
|
import { skills } from "@/data/skills";
|
|
export default function Skills() {
|
|
return (
|
|
<section className="skills-section fix section-padding">
|
|
<div className="shape-1 float-bob-x">
|
|
<Image
|
|
src="/assets/img/home/build/left-centre-element.webp"
|
|
width={135}
|
|
height={99}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<div className="shape-2 float-bob-y">
|
|
<Image
|
|
src="/assets/img/home/build/right.webp"
|
|
width={310}
|
|
height={344}
|
|
alt="img"
|
|
style={{
|
|
opacity: 0.3,
|
|
zIndex: -1,
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="container">
|
|
<div className="skills-wrapper">
|
|
<div className="row g-4">
|
|
<div className="col-lg-6">
|
|
<div className="row g-4">
|
|
<div className="col-lg-7 wow fadeInUp" data-wow-delay=".2s">
|
|
<div className="skills-image">
|
|
<Image
|
|
src="/assets/img/home/build/build-on-innovation-left.webp"
|
|
width={324}
|
|
height={520}
|
|
alt="img"
|
|
/>
|
|
<div className="logo-shape">
|
|
<Image
|
|
src="/assets/img/home/build/logo.webp"
|
|
width={153}
|
|
height={167}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-5 wow fadeInUp" data-wow-delay=".4s">
|
|
<div className="skills-image">
|
|
<Image
|
|
src="/assets/img/home/build/build-on-innovation-right.webp"
|
|
width={227}
|
|
height={520}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div className="skill-content">
|
|
<div className="section-title">
|
|
<h6 className="wow fadeInUp">
|
|
<i className="fa-regular fa-arrow-left-long" />
|
|
Built on Innovation, Powered by Trust
|
|
<i className="fa-regular fa-arrow-right-long" />
|
|
</h6>
|
|
<h2 className="splt-txt wow">
|
|
<AnimatedText text="We Are Giving You A Chance To Build Your Dream" />
|
|
</h2>
|
|
</div>
|
|
<p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
|
|
We specialize in building solutions that meet your exact needs. From machinery fabrication to installation and commissioning, we offer end-to-end support that ensures smooth plant operations.
|
|
</p>
|
|
<div className="skill-feature-items">
|
|
{skills.map((skill, index) => (
|
|
<div
|
|
key={index}
|
|
className="skill-feature wow fadeInUp"
|
|
data-wow-delay={skill.delay}
|
|
>
|
|
<h3 className="box-title">{skill.title}</h3>
|
|
<div className="progress">
|
|
<div
|
|
className="progress-bar"
|
|
style={{
|
|
width: `${skill.percentage}%`,
|
|
animation:
|
|
"2.6s ease 0s 1 normal none running animate-positive",
|
|
opacity: 1,
|
|
}}
|
|
>
|
|
<div className="progress-value">
|
|
<span className="counter-number2">
|
|
{skill.percentage}
|
|
</span>
|
|
%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|