104 lines
2.8 KiB
TypeScript
104 lines
2.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 ServiceDeliverablesProps {
|
|
service: Service;
|
|
}
|
|
|
|
const ServiceDeliverables = ({ service }: ServiceDeliverablesProps) => {
|
|
useEffect(() => {
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
// Modern entrance animations
|
|
gsap.set(".deliverable-item", {
|
|
y: 60,
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
});
|
|
|
|
ScrollTrigger.batch(".deliverable-item", {
|
|
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.deliverables) {
|
|
return null;
|
|
}
|
|
|
|
const deliverablesList = service.deliverables
|
|
.split(/[,;•\n]/)
|
|
.map(item => item.trim())
|
|
.filter(item => item.length > 0);
|
|
|
|
return (
|
|
<section className="enterprise-deliverables 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">What You Get</span>
|
|
<h2 className="enterprise-section-title mb-3">
|
|
What You Get with {service.title}
|
|
</h2>
|
|
<p className="enterprise-section-description">
|
|
{service.deliverables_description || `Our comprehensive ${service.title.toLowerCase()} service includes everything you need for success`}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="row g-5">
|
|
{deliverablesList.map((deliverable, index) => (
|
|
<div key={index} className="col-12 col-md-6 col-lg-4">
|
|
<div className="deliverable-item enterprise-section-card">
|
|
<div className="card-icon">
|
|
<i className="fa-solid fa-check-circle"></i>
|
|
</div>
|
|
<div className="card-content">
|
|
<h6 className="card-title">
|
|
{deliverable}
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ServiceDeliverables; |