103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
"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;
|