137 lines
4.8 KiB
TypeScript
137 lines
4.8 KiB
TypeScript
"use client";
|
|
import { useState, useEffect } from "react";
|
|
import Image from "next/legacy/image";
|
|
import Link from "next/link";
|
|
import { getValidImageUrl, FALLBACK_IMAGES } from "@/lib/imageUtils";
|
|
|
|
const Story = () => {
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
const [activeImageIndex, setActiveImageIndex] = useState(0);
|
|
|
|
// Static case studies data
|
|
const storyData = [
|
|
{
|
|
id: 1,
|
|
destination: "Financial Services",
|
|
title: "Banking System Modernization",
|
|
subtitle: "Complete digital transformation of legacy banking systems with enhanced security and real-time processing capabilities.",
|
|
image: "/images/case/one.png",
|
|
path: "/case-study/banking-system-modernization",
|
|
display_order: 1,
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString()
|
|
},
|
|
{
|
|
id: 2,
|
|
destination: "Healthcare",
|
|
title: "Patient Management System",
|
|
subtitle: "Enterprise-grade patient management system with HIPAA compliance and seamless integration across multiple healthcare facilities.",
|
|
image: "/images/case/two.png",
|
|
path: "/case-study/patient-management-system",
|
|
display_order: 2,
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString()
|
|
},
|
|
{
|
|
id: 3,
|
|
destination: "Manufacturing",
|
|
title: "Supply Chain Optimization",
|
|
subtitle: "Advanced supply chain management system with real-time tracking, predictive analytics, and automated inventory management.",
|
|
image: "/images/case/three.png",
|
|
path: "/case-study/supply-chain-optimization",
|
|
display_order: 3,
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString()
|
|
},
|
|
{
|
|
id: 4,
|
|
destination: "E-commerce",
|
|
title: "Multi-Platform Integration",
|
|
subtitle: "Seamless integration of multiple e-commerce platforms with unified inventory management and real-time synchronization.",
|
|
image: "/images/case/four.png",
|
|
path: "/case-study/multi-platform-integration",
|
|
display_order: 4,
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString()
|
|
},
|
|
{
|
|
id: 5,
|
|
destination: "Education",
|
|
title: "Learning Management System",
|
|
subtitle: "Comprehensive LMS with advanced analytics, automated grading, and seamless integration with existing educational tools.",
|
|
image: "/images/case/five.png",
|
|
path: "/case-study/learning-management-system",
|
|
display_order: 5,
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString()
|
|
}
|
|
];
|
|
|
|
const handleMouseEnter = (index: number) => {
|
|
setActiveIndex(index);
|
|
setActiveImageIndex(index);
|
|
};
|
|
|
|
|
|
return (
|
|
<section className="tp-story pt-120 pb-120 bg-black sticky-wrapper fade-wrapper">
|
|
<div className="container">
|
|
<div className="row vertical-column-gap-md">
|
|
<div className="col-12 col-lg-5">
|
|
<div className="tp-story__content sticky-item">
|
|
<h2 className="mt-8 title-anim text-white fw-7">
|
|
Enterprise Case Studies
|
|
</h2>
|
|
<div className="tp-story__items">
|
|
{storyData.map((item, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={`tp-story__single fade-top ${
|
|
index === activeIndex ? "active" : ""
|
|
}`}
|
|
onMouseEnter={() => handleMouseEnter(index)}
|
|
>
|
|
<p className="fw-6 mt-8">
|
|
<Link href={`${item.path}`}>{item.destination}</Link>
|
|
</p>
|
|
<h5 className="fw-4 mt-12 mb-12 text-white">
|
|
{item.title}
|
|
</h5>
|
|
<p className="text-xs">{item.subtitle}</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-lg-7 col-xxl-6 offset-xxl-1 d-none d-lg-block">
|
|
<div className="tp-story__thumbs sticky-item">
|
|
{storyData.map((item, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={`tp-story-thumb ${
|
|
index === activeImageIndex ? "thumb-active" : ""
|
|
}`}
|
|
>
|
|
<Image
|
|
src={getValidImageUrl(item.image, FALLBACK_IMAGES.CASE_STUDY)}
|
|
width={600}
|
|
height={300}
|
|
className="w-100 mh-300"
|
|
alt="Image"
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Story;
|