GNXSOFT.COM

gnx-react/components/pages/home/Story.tsx

@@ -0,0 +1,136 @@
+"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;