GNXSOFT.COM

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

@@ -0,0 +1,102 @@
+"use client";
+import { useEffect } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+import { Service, ServiceFeature } from "@/lib/api/serviceService";
+
+interface ServiceFeaturesProps {
+  service: Service;
+}
+
+const ServiceFeatures = ({ service }: ServiceFeaturesProps) => {
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+    
+    // Modern entrance animations
+    gsap.set(".feature-item", {
+      y: 60,
+      opacity: 0,
+      scale: 0.9,
+    });
+
+    ScrollTrigger.batch(".feature-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.features || service.features.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className="enterprise-features 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">Key Features</span>
+              <h2 className="enterprise-section-title mb-3">
+                {service.title} Features
+              </h2>
+              <p className="enterprise-section-description">
+                {service.features_description || `Discover the key features that make our ${service.title.toLowerCase()} service stand out from the competition`}
+              </p>
+            </div>
+            
+            <div className="row g-5">
+              {service.features.map((feature: ServiceFeature, index: number) => (
+                <div key={feature.id} className="col-12 col-md-6 col-lg-4">
+                  <div className="feature-item enterprise-section-card">
+                    <div className="card-icon">
+                      <i className={`fa-solid fa-${feature.icon || 'check'}`}></i>
+                    </div>
+                    <div className="card-content">
+                      <h6 className="card-title">
+                        {feature.title}
+                      </h6>
+                      <p className="card-description">
+                        {feature.description}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ServiceFeatures;