update

frontEnd/components/pages/services/ServiceDetails.tsx

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