125 lines
4.4 KiB
TypeScript
125 lines
4.4 KiB
TypeScript
"use client";
|
|
import { useEffect } from "react";
|
|
import gsap from "gsap";
|
|
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
|
|
import Image from "next/legacy/image";
|
|
import { Service } from "@/lib/api/serviceService";
|
|
import { serviceUtils } from "@/lib/api/serviceService";
|
|
|
|
interface ServiceDetailsProps {
|
|
service: Service;
|
|
}
|
|
|
|
const ServiceDetails = ({ service }: ServiceDetailsProps) => {
|
|
useEffect(() => {
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
// Animate content on scroll
|
|
gsap.set(".detail-content", {
|
|
x: -50,
|
|
opacity: 0,
|
|
});
|
|
|
|
gsap.set(".detail-image", {
|
|
x: 50,
|
|
opacity: 0,
|
|
});
|
|
|
|
ScrollTrigger.batch(".detail-content, .detail-image", {
|
|
start: "-100px bottom",
|
|
onEnter: (elements) =>
|
|
gsap.to(elements, {
|
|
x: 0,
|
|
opacity: 1,
|
|
duration: 0.8,
|
|
ease: "power2.out",
|
|
}),
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<section id="service-details" className="enterprise-details py-5">
|
|
<div className="container">
|
|
<div className="row justify-content-center">
|
|
<div className="col-12 col-xl-10">
|
|
<div className="row align-items-center">
|
|
<div className="col-12 col-lg-6">
|
|
<div className="detail-content">
|
|
<div className="section-header mb-5">
|
|
<span className="enterprise-section-tag">About Service</span>
|
|
<h2 className="enterprise-section-title mb-4">
|
|
About Our {service.title}
|
|
</h2>
|
|
{service.short_description && (
|
|
<p className="enterprise-section-description">
|
|
{service.short_description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="enterprise-stats mb-4">
|
|
<div className="row g-3">
|
|
<div className="col-12">
|
|
<div className="enterprise-stat-card">
|
|
<div className="stat-icon">
|
|
<i className="fa-solid fa-star"></i>
|
|
</div>
|
|
<div className="stat-content">
|
|
<div className="stat-number">
|
|
{service.featured ? 'Featured' : 'Standard'}
|
|
</div>
|
|
<div className="stat-label">Service Type</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="enterprise-meta mb-4">
|
|
<div className="meta-item">
|
|
<div className="meta-icon">
|
|
<i className="fa-solid fa-tag"></i>
|
|
</div>
|
|
<div className="meta-content">
|
|
<span className="meta-label">Category</span>
|
|
<span className="meta-value">{service.category?.name || 'General'}</span>
|
|
</div>
|
|
</div>
|
|
{service.duration && (
|
|
<div className="meta-item">
|
|
<div className="meta-icon">
|
|
<i className="fa-solid fa-clock"></i>
|
|
</div>
|
|
<div className="meta-content">
|
|
<span className="meta-label">Duration</span>
|
|
<span className="meta-value">{service.duration}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-12 col-lg-6">
|
|
<div className="detail-image">
|
|
<div className="enterprise-image-wrapper">
|
|
<Image
|
|
src={serviceUtils.getServiceImageUrl(service) || '/images/service/default.png'}
|
|
alt={service.title}
|
|
width={600}
|
|
height={400}
|
|
className="enterprise-service-image"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ServiceDetails; |