368 lines
15 KiB
TypeScript
368 lines
15 KiB
TypeScript
"use client";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { Autoplay, Navigation } from "swiper/modules";
|
|
import "swiper/swiper-bundle.css";
|
|
import Counter from "../../common/Counter";
|
|
import one from "@/public/images/study/one.png";
|
|
import two from "@/public/images/study/two.png";
|
|
import three from "@/public/images/study/three.png";
|
|
import four from "@/public/images/study/four.png";
|
|
import five from "@/public/images/study/five.png";
|
|
|
|
const AboutCase = () => {
|
|
return (
|
|
<section className="tp-study pt-120 pb-120 bg-quinary">
|
|
<div className="container">
|
|
<div className="row vertical-column-gap align-items-center">
|
|
<div className="col-12 col-lg-7">
|
|
<div className="tp-lp-title text-center text-lg-start">
|
|
<div className="enterprise-badge mb-20">
|
|
<span className="badge enterprise-badge-content">
|
|
<i className="fa-solid fa-chart-line"></i>
|
|
Success Stories
|
|
</span>
|
|
</div>
|
|
<h2 className="mt-8 fw-7 text-secondary title-anim">
|
|
Enterprise Success Stories
|
|
</h2>
|
|
<p className="cur-lg mt-20">
|
|
Discover how we've helped Fortune 500 companies and innovative startups
|
|
achieve their digital transformation goals through cutting-edge technology solutions.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-lg-5">
|
|
<div className="tp-study-arrows d-flex justify-content-center justify-content-lg-end">
|
|
<button className="prev-study" aria-label="previous study">
|
|
<span className="material-symbols-outlined">west</span>
|
|
</button>
|
|
<button className="next-study" aria-label="next study">
|
|
<span className="material-symbols-outlined">east</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="tp-study-slider-wrapper">
|
|
<div className="tp-study-slider-wrap">
|
|
<Swiper
|
|
slidesPerView={"auto"}
|
|
spaceBetween={24}
|
|
slidesPerGroup={1}
|
|
freeMode={true}
|
|
speed={1200}
|
|
loop={true}
|
|
roundLengths={true}
|
|
modules={[Autoplay, Navigation]}
|
|
autoplay={{
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
pauseOnMouseEnter: true,
|
|
}}
|
|
className="tp-study-slider"
|
|
navigation={{
|
|
nextEl: ".prev-study",
|
|
prevEl: ".next-study",
|
|
}}
|
|
>
|
|
<SwiperSlide>
|
|
<div className="tp-study-slider__single">
|
|
<div className="thumb">
|
|
<Link href="case-study-single">
|
|
<Image
|
|
src={one}
|
|
className="w-100 mh-400"
|
|
alt="Image"
|
|
width={400}
|
|
height={400}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content text-center">
|
|
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
|
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
|
</h5>
|
|
<Link href="case-study-single" className="btn-angle">
|
|
View
|
|
<span></span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-study-slider__single">
|
|
<div className="thumb">
|
|
<Link href="case-study-single">
|
|
<Image
|
|
src={two}
|
|
className="w-100 mh-400"
|
|
alt="Image"
|
|
width={400}
|
|
height={400}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content text-center">
|
|
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
|
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
|
</h5>
|
|
<Link href="case-study-single" className="btn-angle">
|
|
View
|
|
<span></span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-study-slider__single">
|
|
<div className="thumb">
|
|
<Link href="case-study-single">
|
|
<Image
|
|
src={three}
|
|
className="w-100 mh-400"
|
|
alt="Image"
|
|
width={400}
|
|
height={400}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content text-center">
|
|
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
|
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
|
</h5>
|
|
<Link href="case-study-single" className="btn-angle">
|
|
View
|
|
<span></span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-study-slider__single">
|
|
<div className="thumb">
|
|
<Link href="case-study-single">
|
|
<Image
|
|
src={four}
|
|
className="w-100 mh-400"
|
|
alt="Image"
|
|
width={400}
|
|
height={400}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content text-center">
|
|
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
|
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
|
</h5>
|
|
<Link href="case-study-single" className="btn-angle">
|
|
View
|
|
<span></span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-study-slider__single">
|
|
<div className="thumb">
|
|
<Link href="case-study-single">
|
|
<Image
|
|
src={five}
|
|
className="w-100 mh-400"
|
|
alt="Image"
|
|
width={400}
|
|
height={400}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content text-center">
|
|
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
|
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
|
</h5>
|
|
<Link href="case-study-single" className="btn-angle">
|
|
View
|
|
<span></span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-study-slider__single">
|
|
<div className="thumb">
|
|
<Link href="case-study-single">
|
|
<Image
|
|
src={one}
|
|
className="w-100 mh-400"
|
|
alt="Image"
|
|
width={400}
|
|
height={400}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content text-center">
|
|
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
|
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
|
</h5>
|
|
<Link href="case-study-single" className="btn-angle">
|
|
View
|
|
<span></span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-study-slider__single">
|
|
<div className="thumb">
|
|
<Link href="case-study-single">
|
|
<Image
|
|
src={two}
|
|
className="w-100 mh-400"
|
|
alt="Image"
|
|
width={400}
|
|
height={400}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content text-center">
|
|
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
|
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
|
</h5>
|
|
<Link href="case-study-single" className="btn-angle">
|
|
View
|
|
<span></span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-study-slider__single">
|
|
<div className="thumb">
|
|
<Link href="case-study-single">
|
|
<Image
|
|
src={three}
|
|
className="w-100 mh-400"
|
|
alt="Image"
|
|
width={400}
|
|
height={400}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content text-center">
|
|
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
|
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
|
</h5>
|
|
<Link href="case-study-single" className="btn-angle">
|
|
View
|
|
<span></span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-study-slider__single">
|
|
<div className="thumb">
|
|
<Link href="case-study-single">
|
|
<Image
|
|
src={four}
|
|
className="w-100 mh-400"
|
|
alt="Image"
|
|
width={400}
|
|
height={400}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content text-center">
|
|
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
|
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
|
</h5>
|
|
<Link href="case-study-single" className="btn-angle">
|
|
View
|
|
<span></span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="tp-study-slider__single">
|
|
<div className="thumb">
|
|
<Link href="case-study-single">
|
|
<Image
|
|
src={five}
|
|
className="w-100 mh-400"
|
|
alt="Image"
|
|
width={400}
|
|
height={400}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content text-center">
|
|
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
|
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
|
</h5>
|
|
<Link href="case-study-single" className="btn-angle">
|
|
View
|
|
<span></span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row pt-120 vertical-column-gap-lg">
|
|
<div className="col-12 col-sm-6 col-xl-3">
|
|
<div className="counter__single text-center">
|
|
<h2 className="fw-5 text-secondary mt-8 mb-16">
|
|
<span className="odometer">
|
|
<Counter value={500} />
|
|
</span>
|
|
<span>+</span>
|
|
</h2>
|
|
<p className="text-tertiary">Enterprise Projects</p>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-sm-6 col-xl-3">
|
|
<div className="counter__single text-center">
|
|
<h2 className="fw-5 text-secondary mt-8 mb-16">
|
|
<span className="odometer">
|
|
<Counter value={99} />
|
|
</span>
|
|
<span>.9%</span>
|
|
</h2>
|
|
<p className="text-tertiary">Uptime SLA</p>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-sm-6 col-xl-3">
|
|
<div className="counter__single text-center">
|
|
<h2 className="fw-5 text-secondary mt-8 mb-16">
|
|
<span className="odometer">
|
|
<Counter value={15} />
|
|
</span>
|
|
<span>+</span>
|
|
</h2>
|
|
<p className="text-tertiary">Years Experience</p>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-sm-6 col-xl-3">
|
|
<div className="counter__single text-center border-0">
|
|
<h2 className="fw-5 text-secondary mt-8 mb-16">
|
|
<span className="odometer">
|
|
<Counter value={200} />
|
|
</span>
|
|
<span>+</span>
|
|
</h2>
|
|
<p className="text-tertiary">Expert Engineers</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default AboutCase;
|