195 lines
7.8 KiB
JavaScript
195 lines
7.8 KiB
JavaScript
import React from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import AnimatedText from "@/components/common/AnimatedText";
|
|
export default function TeamDetails({ teamMember }) {
|
|
return (
|
|
<section className="team-details-section fix section-padding">
|
|
<div className="container">
|
|
<div className="team-details-wrapper">
|
|
<div className="team-details-items">
|
|
<div className="details-image">
|
|
<Image
|
|
src={teamMember.image}
|
|
width={370}
|
|
height={466}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<div className="team-details-content">
|
|
<div className="details-header">
|
|
<h3>{teamMember.name}</h3>
|
|
<span>{teamMember.role}</span>
|
|
</div>
|
|
<p className="cont">
|
|
Prior to joining company, she spent 20+ years at Inmosys, where
|
|
he held a wide range of global leadership roles, from services
|
|
to products, and across operations and sales. Most recently, he
|
|
was SVP & Global Head of the Manufacturing business..
|
|
</p>
|
|
<h6 className="team-details-info">
|
|
<span className="text-title">Phone Number:</span>
|
|
<span className="text-data">
|
|
<a href="tel:+915690036420">+91 5698 0036 420</a>
|
|
</span>
|
|
</h6>
|
|
<h6 className="team-details-info">
|
|
<span className="text-title">Email:</span>
|
|
<span className="text-data">
|
|
<a href="mailto:example@gmail.com">example@gmail.com</a>
|
|
</span>
|
|
</h6>
|
|
<h6 className="team-details-info">
|
|
<span className="text-title">Website:</span>
|
|
<span className="text-data">
|
|
<Link href={`#`}>http://example.com/example</Link>
|
|
</span>
|
|
</h6>
|
|
<h6 className="team-details-info">
|
|
<span className="text-title">Experience:</span>
|
|
<span className="text-data">15 Years</span>
|
|
</h6>
|
|
<h6 className="team-details-info">
|
|
<span className="text-title">Availability:</span>
|
|
<span className="text-data">Full Time Employee</span>
|
|
</h6>
|
|
<div className="social-icon d-flex align-items-center">
|
|
{teamMember.socials.map((link, index) => (
|
|
<a key={index} href={link.href}>
|
|
<i className={link.iconClass} />
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="personal-skills-items">
|
|
<div className="row g-5">
|
|
<div className="col-lg-5">
|
|
<h3 className="mb-3 splt-txt wow">
|
|
<AnimatedText text="About Me" />
|
|
</h3>
|
|
<p>
|
|
There are many variations of passages of x ohyt Lorem Ipsum
|
|
available, but the majority havehbith suffered x alteration in
|
|
some form, by injected humour, or randomised wo zyx words
|
|
which don't look even slightly believable. If you are going to
|
|
use a passage of Lorem Ipsum,
|
|
</p>
|
|
<p className="mt-4">
|
|
There are many variations of passages of Lorem Ipsum
|
|
available, but the majority have suffered alteration in some
|
|
form, by injected humour,
|
|
</p>
|
|
</div>
|
|
<div className="col-lg-7">
|
|
<h3 className="mb-3 splt-txt wow">
|
|
<AnimatedText text="Personal skills" />
|
|
</h3>
|
|
<p>
|
|
There are many variations of passages of Lorem Ipsum
|
|
available, but the majority have suffered alteration in some
|
|
form, by injected humour, or randomised words which don't look
|
|
even slightly believable. If you are going to use a passage
|
|
</p>
|
|
<div className="skill-feature-items">
|
|
<div className="skill-feature">
|
|
<h3 className="box-title">Architecture</h3>
|
|
<div className="progress">
|
|
<div
|
|
className="progress-bar"
|
|
style={{
|
|
width: "85%",
|
|
animation:
|
|
"2.6s ease 0s 1 normal none running animate-positive",
|
|
opacity: 1,
|
|
}}
|
|
>
|
|
<div className="progress-value">
|
|
<span className="counter-number2">85</span>%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="skill-feature">
|
|
<h3 className="box-title">Construction</h3>
|
|
<div className="progress">
|
|
<div
|
|
className="progress-bar"
|
|
style={{
|
|
width: "90%",
|
|
animation:
|
|
"2.6s ease 0s 1 normal none running animate-positive",
|
|
opacity: 1,
|
|
}}
|
|
>
|
|
<div className="progress-value">
|
|
<span className="counter-number2">90</span>%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="skill-feature">
|
|
<h3 className="box-title">Interior Design</h3>
|
|
<div className="progress">
|
|
<div
|
|
className="progress-bar"
|
|
style={{
|
|
width: "75%",
|
|
animation:
|
|
"2.6s ease 0s 1 normal none running animate-positive",
|
|
opacity: 1,
|
|
}}
|
|
>
|
|
<div className="progress-value">
|
|
<span className="counter-number2">75</span>%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="team-gallery-items">
|
|
<h3 className="mb-md-3 splt-txt wow">
|
|
<AnimatedText text="My Work Gallery" />
|
|
</h3>
|
|
<div className="row">
|
|
<div className="col-xl-4 col-lg-6 col-md-6">
|
|
<div className="gallery-thumb">
|
|
<Image
|
|
src="/assets/img/team/gallery-1.jpg"
|
|
width={370}
|
|
height={424}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-xl-4 col-lg-6 col-md-6">
|
|
<div className="gallery-thumb">
|
|
<Image
|
|
src="/assets/img/team/gallery-2.jpg"
|
|
width={370}
|
|
height={424}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-xl-4 col-lg-6 col-md-6">
|
|
<div className="gallery-thumb">
|
|
<Image
|
|
src="/assets/img/team/gallery-3.jpg"
|
|
width={370}
|
|
height={424}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|