GNXSOFT.COM
This commit is contained in:
Iliyan Angelov
367
gnx-react/components/pages/about/AboutCase.tsx
Normal file
367
gnx-react/components/pages/about/AboutCase.tsx
Normal file
@@ -0,0 +1,367 @@
|
||||
"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;
|
||||
Reference in New Issue
Block a user