131 lines
4.8 KiB
TypeScript
131 lines
4.8 KiB
TypeScript
"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;
|