update
This commit is contained in:
Iliyan Angelov
@@ -1,367 +0,0 @@
|
||||
"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;
|
||||
@@ -3,6 +3,7 @@ import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useAbout } from "@/lib/hooks/useAbout";
|
||||
import { AboutService as AboutServiceType, AboutProcess } from "@/lib/api/aboutService";
|
||||
import { getValidImageUrl, FALLBACK_IMAGES } from "@/lib/imageUtils";
|
||||
import thumb from "@/public/images/service/two.png";
|
||||
import thumbTwo from "@/public/images/service/three.png";
|
||||
|
||||
@@ -62,13 +63,23 @@ const AboutServiceComponent = () => {
|
||||
<Link href="service-single" className="w-100">
|
||||
<div className="parallax-image-wrap">
|
||||
<div className="parallax-image-inner">
|
||||
<Image
|
||||
src={serviceData?.image_url || thumb}
|
||||
className="w-100 parallax-image"
|
||||
alt="Enterprise Technology Solutions"
|
||||
width={400}
|
||||
height={300}
|
||||
/>
|
||||
{serviceData?.image_url ? (
|
||||
<img
|
||||
src={getValidImageUrl(serviceData.image_url, FALLBACK_IMAGES.SERVICE)}
|
||||
className="w-100 parallax-image"
|
||||
alt="Enterprise Technology Solutions"
|
||||
width={400}
|
||||
height={300}
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src={thumb}
|
||||
className="w-100 parallax-image"
|
||||
alt="Enterprise Technology Solutions"
|
||||
width={400}
|
||||
height={300}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
@@ -241,13 +252,23 @@ const AboutServiceComponent = () => {
|
||||
<Link href="service-single" className="w-100">
|
||||
<div className="parallax-image-wrap">
|
||||
<div className="parallax-image-inner">
|
||||
<Image
|
||||
src={processData?.image_url || thumbTwo}
|
||||
className="w-100 parallax-image"
|
||||
alt="Enterprise Development Process"
|
||||
width={400}
|
||||
height={300}
|
||||
/>
|
||||
{processData?.image_url ? (
|
||||
<img
|
||||
src={getValidImageUrl(processData.image_url, FALLBACK_IMAGES.SERVICE)}
|
||||
className="w-100 parallax-image"
|
||||
alt="Enterprise Development Process"
|
||||
width={400}
|
||||
height={300}
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src={thumbTwo}
|
||||
className="w-100 parallax-image"
|
||||
alt="Enterprise Development Process"
|
||||
width={400}
|
||||
height={300}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@@ -3,6 +3,7 @@ import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useAbout } from "@/lib/hooks/useAbout";
|
||||
import { AboutJourney } from "@/lib/api/aboutService";
|
||||
import { getValidImageUrl, FALLBACK_IMAGES } from "@/lib/imageUtils";
|
||||
import thumb from "@/public/images/start-thumb.png";
|
||||
|
||||
const AboutStarter = () => {
|
||||
@@ -52,7 +53,7 @@ const AboutStarter = () => {
|
||||
const journeyData = data?.journey as AboutJourney | undefined;
|
||||
|
||||
return (
|
||||
<section className="tp-gallery">
|
||||
<section className="tp-gallery about-compact">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-12 col-lg-6">
|
||||
@@ -65,7 +66,7 @@ const AboutStarter = () => {
|
||||
{journeyData?.title || "From Startup to Enterprise Leader"}
|
||||
</h2>
|
||||
<p>
|
||||
{journeyData?.description || "Founded in 2008 by three visionary engineers, Itify Technologies began as a small startup with a big dream: to revolutionize how enterprises approach software development. What started as a passion project has grown into a global enterprise software company serving Fortune 500 clients worldwide."}
|
||||
{journeyData?.description || "Founded in 2020 by three visionary engineers, GNX Technologies began as a small startup with a big dream: to revolutionize how enterprises approach software development. What started as a passion project has grown into a global enterprise software company serving Fortune 500 clients worldwide."}
|
||||
</p>
|
||||
<div className="journey-milestones">
|
||||
{journeyData?.milestones && journeyData.milestones.length > 0 ? (
|
||||
@@ -112,7 +113,7 @@ const AboutStarter = () => {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<div className="cta-wrap">
|
||||
<Link
|
||||
href={journeyData?.cta_link || "services"}
|
||||
className="btn-line"
|
||||
@@ -124,26 +125,123 @@ const AboutStarter = () => {
|
||||
</div>
|
||||
<div className="col-12 col-lg-6">
|
||||
<div className="tp-gallery__thumb">
|
||||
<Image
|
||||
src={journeyData?.image_url || thumb}
|
||||
className="w-100"
|
||||
alt="Enterprise Journey"
|
||||
width={500}
|
||||
height={400}
|
||||
style={{
|
||||
objectFit: 'contain',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 20px 40px rgba(0, 0, 0, 0.1)',
|
||||
maxWidth: '100%',
|
||||
maxHeight: '500px',
|
||||
width: '100%',
|
||||
height: 'auto'
|
||||
}}
|
||||
/>
|
||||
{journeyData?.image_url ? (
|
||||
<img
|
||||
src={getValidImageUrl(journeyData.image_url, FALLBACK_IMAGES.DEFAULT)}
|
||||
className="w-100 compact-img"
|
||||
alt="Enterprise Journey"
|
||||
width={500}
|
||||
height={400}
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src={thumb}
|
||||
className="w-100 compact-img"
|
||||
alt="Enterprise Journey"
|
||||
width={500}
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style jsx>{`
|
||||
.about-compact {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
.about-compact .enterprise-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.about-compact .enterprise-badge i { font-size: 12px; }
|
||||
|
||||
.about-compact .title-anim {
|
||||
font-size: clamp(20px, 2.2vw, 28px);
|
||||
line-height: 1.25;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
.about-compact p {
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
margin: 0 0 12px 0;
|
||||
color: rgba(255,255,255,0.85);
|
||||
}
|
||||
|
||||
/* Milestones */
|
||||
.about-compact .journey-milestones {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.about-compact .journey-milestones { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
.about-compact .milestone-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: start;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.about-compact .year-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
border-radius: 6px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.about-compact .milestone-content h6 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.about-compact .milestone-content p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.75);
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.about-compact .cta-wrap { margin-top: 12px; }
|
||||
.about-compact :global(.btn-line) {
|
||||
padding: 8px 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Image */
|
||||
.about-compact .tp-gallery__thumb { margin-top: 8px; }
|
||||
@media (min-width: 992px) {
|
||||
.about-compact .tp-gallery__thumb { margin-top: 0; }
|
||||
}
|
||||
.about-compact :global(.compact-img),
|
||||
.about-compact .compact-img {
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
|
||||
max-height: 260px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
`}</style>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user