GNXSOFT.COM

gnx-react/components/pages/services/ServiceProcess.tsx

@@ -0,0 +1,130 @@
+"use client";
+import { useEffect } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+import { Service } from "@/lib/api/serviceService";
+
+interface ServiceProcessProps {
+  service: Service;
+}
+
+const ServiceProcess = ({ service }: ServiceProcessProps) => {
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+    
+    // Modern entrance animations
+    gsap.set(".process-step", {
+      y: 60,
+      opacity: 0,
+      scale: 0.9,
+    });
+
+    ScrollTrigger.batch(".process-step", {
+      start: "-150px bottom",
+      onEnter: (elements) =>
+        gsap.to(elements, {
+          y: 0,
+          opacity: 1,
+          scale: 1,
+          stagger: {
+            amount: 0.6,
+            from: "start"
+          },
+          duration: 1,
+          ease: "power3.out",
+        }),
+    });
+    
+    // Animate section header
+    gsap.fromTo(".section-header", 
+      {
+        y: 40,
+        opacity: 0
+      },
+      {
+        y: 0,
+        opacity: 1,
+        duration: 1,
+        ease: "power3.out",
+        scrollTrigger: {
+          trigger: ".section-header",
+          start: "-100px bottom"
+        }
+      }
+    );
+  }, []);
+
+  if (!service.process_steps) {
+    return null;
+  }
+
+  // Split process steps by common separators
+  const processSteps = service.process_steps
+    .split(/[,;•\n]/)
+    .map(step => step.trim())
+    .filter(step => step.length > 0);
+
+  return (
+    <section className="enterprise-process py-4">
+      <div className="container">
+        <div className="row justify-content-center">
+          <div className="col-12 col-xl-10">
+            <div className="section-header text-center mb-4">
+              <span className="enterprise-section-tag">Our Process</span>
+              <h2 className="enterprise-section-title mb-3">
+                {service.title} Process
+              </h2>
+              <p className="enterprise-section-description">
+                {service.process_description || `Our proven methodology ensures successful delivery of your ${service.title.toLowerCase()} project.`}
+              </p>
+            </div>
+            
+            <div className="row g-5">
+              {processSteps.map((step, index) => (
+                <div key={index} className="col-12 col-md-6 col-lg-4">
+                  <div className="process-step enterprise-process-step-compact">
+                    <div className="step-number">
+                      <span className="step-number-text">
+                        {String(index + 1).padStart(2, '0')}
+                      </span>
+                    </div>
+                    <div className="step-content">
+                      <h6 className="step-title">
+                        {step}
+                      </h6>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+// Helper function to generate step descriptions based on step name and service
+const getStepDescription = (step: string, serviceTitle: string): string => {
+  const descriptions: { [key: string]: string } = {
+    'Requirements Analysis': 'We analyze your business requirements and technical specifications to ensure we understand your goals.',
+    'System Design': 'Our team creates a comprehensive system architecture and design that meets your specific needs.',
+    'Development': 'We implement the solution using industry best practices and modern technologies.',
+    'Testing': 'Rigorous testing ensures your solution is reliable, secure, and performs optimally.',
+    'Deployment': 'We handle the deployment process and ensure smooth transition to production.',
+    'Training': 'We provide comprehensive training to your team for successful adoption.',
+    'API Planning': 'We design the API architecture and define endpoints based on your integration needs.',
+    'API Development': 'We build robust, scalable APIs using modern frameworks and best practices.',
+    'Documentation': 'Comprehensive API documentation ensures easy integration and maintenance.',
+    'Integration': 'We integrate the API with your existing systems and third-party services.',
+    'Assessment': 'We evaluate your current infrastructure and identify migration opportunities.',
+    'Migration Planning': 'We create a detailed migration strategy with minimal downtime.',
+    'Implementation': 'We execute the migration plan with careful monitoring and rollback procedures.',
+    'Optimization': 'We optimize your cloud infrastructure for performance and cost efficiency.',
+    'Support': 'Ongoing support and maintenance ensure your solution continues to perform optimally.'
+  };
+
+  return descriptions[step] || `This step involves ${step.toLowerCase()} to ensure the success of your ${serviceTitle.toLowerCase()} project.`;
+};
+
+export default ServiceProcess;