105 lines
4.3 KiB
JavaScript
105 lines
4.3 KiB
JavaScript
"use client";
|
|
import { slidesData } from "@/data/team";
|
|
import React from "react";
|
|
import { Pagination } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import Image from "next/image";
|
|
export default function Team3() {
|
|
return (
|
|
<div className="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-24 md:!mb-[7rem] xl:!mb-40 items-center">
|
|
<div className="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
|
|
<h2 className="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.35]">
|
|
MEET THE TEAM
|
|
</h2>
|
|
<h3 className="!text-[calc(1.285rem_+_0.42vw)] font-bold xl:!text-[1.6rem] !leading-[1.3] !mb-5">
|
|
Save your time and money by choosing our professional team.
|
|
</h3>
|
|
<p>
|
|
Donec id elit non mi porta gravida at eget metus. Morbi leo risus,
|
|
porta ac consectetur ac, vestibulum at eros tempus porttitor.
|
|
</p>
|
|
<a
|
|
href="#"
|
|
className="btn btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] !rounded-[50rem] !mt-3 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
>
|
|
See All Members
|
|
</a>
|
|
</div>
|
|
{/*/column */}
|
|
<div className="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
|
|
<div className="swiper-container !text-center !mb-6">
|
|
<Swiper
|
|
className="swiper"
|
|
spaceBetween={30}
|
|
modules={[Pagination]}
|
|
pagination={{
|
|
clickable: true,
|
|
el: ".spd20",
|
|
}}
|
|
breakpoints={{
|
|
0: { slidesPerView: 1 },
|
|
575: {
|
|
slidesPerView: 1,
|
|
},
|
|
768: {
|
|
slidesPerView: 2,
|
|
},
|
|
992: {
|
|
slidesPerView: 2,
|
|
},
|
|
1200: {
|
|
slidesPerView: 3,
|
|
},
|
|
}}
|
|
>
|
|
{slidesData.map((elm, i) => (
|
|
<SwiperSlide key={i} className="swiper-slide">
|
|
<Image
|
|
className="rounded-[50%] w-40 !mx-auto !mb-4"
|
|
alt="image"
|
|
width={300}
|
|
srcSet={elm.imageSrcSet}
|
|
height={300}
|
|
src={elm.imageSrc}
|
|
/>
|
|
<h4 className="!mb-1">{elm.name}</h4>
|
|
<div className="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">
|
|
{elm.role}
|
|
</div>
|
|
<p className="!mb-2">{elm.description}</p>
|
|
<nav className="nav social justify-center !text-center !mb-0">
|
|
<a
|
|
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
|
|
href="#"
|
|
>
|
|
<i className="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]" />
|
|
</a>
|
|
<a
|
|
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
|
|
href="#"
|
|
>
|
|
<i className="uil uil-slack before:content-['\ecdd'] text-[1rem] !text-[#d4135c]" />
|
|
</a>
|
|
<a
|
|
className="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
|
|
href="#"
|
|
>
|
|
<i className="uil uil-linkedin before:content-['\ebd1'] text-[1rem] !text-[#3393c1]" />
|
|
</a>
|
|
</nav>
|
|
{/* /.social */}
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
<div className="swiper-controls">
|
|
<div className="swiper-pagination spd20"></div>
|
|
</div>
|
|
{/* /.swiper */}
|
|
</div>
|
|
{/* /.swiper-container */}
|
|
</div>
|
|
{/*/column */}
|
|
</div>
|
|
);
|
|
}
|