GNXSOFT.COM

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

@@ -0,0 +1,158 @@
+"use client";
+import { useState, useEffect } from "react";
+import Image from "next/legacy/image";
+import Link from "next/link";
+import { getValidImageUrl, FALLBACK_IMAGES } from "@/lib/imageUtils";
+import { useServices } from "@/lib/hooks/useServices";
+import { serviceUtils } from "@/lib/api/serviceService";
+
+const ServiceMain = () => {
+  // Fetch services from API
+  const { services, loading, error } = useServices();
+
+
+  // Show loading state
+  if (loading) {
+    return (
+      <section className="tp-service pt-120 fade-wrapper" id="scroll-to">
+        <div className="container">
+          <div className="row">
+            <div className="col-12">
+              <div className="text-center">
+                <div className="spinner-border" role="status">
+                  <span className="visually-hidden">Loading...</span>
+                </div>
+                <p className="mt-3">Loading services...</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  // Show error state
+  if (error) {
+    return (
+      <section className="tp-service pt-120 fade-wrapper" id="scroll-to">
+        <div className="container">
+          <div className="row">
+            <div className="col-12">
+              <div className="text-center">
+                <div className="alert alert-danger" role="alert">
+                  <h4>Error Loading Services</h4>
+                  <p>{error}</p>
+                  <button 
+                    className="btn btn-primary" 
+                    onClick={() => window.location.reload()}
+                  >
+                    Try Again
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  // Show empty state
+  if (!services || services.length === 0) {
+    return (
+      <section className="tp-service pt-120 fade-wrapper" id="scroll-to">
+        <div className="container">
+          <div className="row">
+            <div className="col-12">
+              <div className="text-center">
+                <h3>No Services Available</h3>
+                <p>We&apos;re working on adding new services. Please check back later.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="enterprise-services py-5" id="scroll-to">
+      <div className="container">
+        <div className="row justify-content-center">
+          <div className="col-12 col-xl-10">
+            <div className="section-header text-center mb-5">
+              <span className="enterprise-section-tag">Our Services</span>
+              <h2 className="enterprise-section-title mb-4">
+                Professional Software Development Services
+              </h2>
+              <p className="enterprise-section-description">
+                We deliver comprehensive technology solutions tailored to your business needs
+              </p>
+            </div>
+          </div>
+        </div>
+        
+        <div className="row g-4">
+          {services.map((service, index) => (
+            <div key={service.id} className="col-12 col-lg-6 col-xl-4">
+              <div className="enterprise-service-card">
+                <div className="service-image-wrapper">
+                  <Link href={`/services/${service.slug}`}>
+                    <Image
+                      src={getValidImageUrl(serviceUtils.getServiceImageUrl(service), FALLBACK_IMAGES.SERVICE)}
+                      alt={service.title}
+                      width={400}
+                      height={300}
+                      className="service-image"
+                    />
+                  </Link>
+                  <div className="service-overlay">
+                    <Link href={`/services/${service.slug}`} className="btn btn-primary">
+                      <span>Learn More</span>
+                      <i className="fa-solid fa-arrow-right ms-2"></i>
+                    </Link>
+                  </div>
+                </div>
+                
+                <div className="service-content">
+                  <div className="service-meta">
+                    <span className="service-number">
+                      {String(index + 1).padStart(2, '0')}
+                    </span>
+                    {service.category && (
+                      <span className="service-category">
+                        {service.category.name}
+                      </span>
+                    )}
+                  </div>
+                  
+                  <h3 className="service-title">
+                    <Link href={`/services/${service.slug}`}>
+                      {service.title}
+                    </Link>
+                  </h3>
+                  
+                  <p className="service-description">
+                    {service.short_description || service.description}
+                  </p>
+                  
+                  <div className="service-footer">
+                    <div className="service-price">
+                      {service.formatted_price}
+                    </div>
+                    <Link href={`/services/${service.slug}`} className="service-link">
+                      <span>View Details</span>
+                      <i className="fa-solid fa-arrow-right"></i>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ServiceMain;