update

frontEnd/components/pages/services/ServiceDeliverables.tsx

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