update
This commit is contained in:
Iliyan Angelov
104
frontEnd/components/pages/services/ServiceDeliverables.tsx
Normal file
104
frontEnd/components/pages/services/ServiceDeliverables.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
"use client";
|
||||
import { useEffect } from "react";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
|
||||
import { Service } from "@/lib/api/serviceService";
|
||||
|
||||
interface ServiceDeliverablesProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
const ServiceDeliverables = ({ service }: ServiceDeliverablesProps) => {
|
||||
useEffect(() => {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
// Modern entrance animations
|
||||
gsap.set(".deliverable-item", {
|
||||
y: 60,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
});
|
||||
|
||||
ScrollTrigger.batch(".deliverable-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.deliverables) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const deliverablesList = service.deliverables
|
||||
.split(/[,;•\n]/)
|
||||
.map(item => item.trim())
|
||||
.filter(item => item.length > 0);
|
||||
|
||||
return (
|
||||
<section className="enterprise-deliverables 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">What You Get</span>
|
||||
<h2 className="enterprise-section-title mb-3">
|
||||
What You Get with {service.title}
|
||||
</h2>
|
||||
<p className="enterprise-section-description">
|
||||
{service.deliverables_description || `Our comprehensive ${service.title.toLowerCase()} service includes everything you need for success`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="row g-5">
|
||||
{deliverablesList.map((deliverable, index) => (
|
||||
<div key={index} className="col-12 col-md-6 col-lg-4">
|
||||
<div className="deliverable-item enterprise-section-card">
|
||||
<div className="card-icon">
|
||||
<i className="fa-solid fa-check-circle"></i>
|
||||
</div>
|
||||
<div className="card-content">
|
||||
<h6 className="card-title">
|
||||
{deliverable}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceDeliverables;
|
||||
125
frontEnd/components/pages/services/ServiceDetails.tsx
Normal file
125
frontEnd/components/pages/services/ServiceDetails.tsx
Normal file
@@ -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;
|
||||
102
frontEnd/components/pages/services/ServiceFeatures.tsx
Normal file
102
frontEnd/components/pages/services/ServiceFeatures.tsx
Normal file
@@ -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;
|
||||
155
frontEnd/components/pages/services/ServiceMain.tsx
Normal file
155
frontEnd/components/pages/services/ServiceMain.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
"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'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">
|
||||
<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;
|
||||
151
frontEnd/components/pages/services/ServicePricing.tsx
Normal file
151
frontEnd/components/pages/services/ServicePricing.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
"use client";
|
||||
import { useEffect } from "react";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
|
||||
import Link from "next/link";
|
||||
import { Service } from "@/lib/api/serviceService";
|
||||
|
||||
interface ServicePricingProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
const ServicePricing = ({ service }: ServicePricingProps) => {
|
||||
useEffect(() => {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
// Animate pricing section
|
||||
gsap.set(".pricing-content", {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
});
|
||||
|
||||
ScrollTrigger.create({
|
||||
trigger: ".pricing-content",
|
||||
start: "-100px bottom",
|
||||
onEnter: () =>
|
||||
gsap.to(".pricing-content", {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
ease: "power2.out",
|
||||
}),
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="enterprise-pricing py-5">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-12 col-xl-10">
|
||||
<div className="row">
|
||||
<div className="col-12 col-lg-8 offset-lg-2">
|
||||
<div className="section-header text-center mb-5">
|
||||
<span className="enterprise-section-tag">Pricing & Packages</span>
|
||||
<h2 className="enterprise-section-title mb-4">
|
||||
Pricing & Packages
|
||||
</h2>
|
||||
<p className="enterprise-section-description">
|
||||
Get started with our {service.title.toLowerCase()} service.
|
||||
Contact us for a customized quote based on your specific requirements.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="pricing-content text-center">
|
||||
|
||||
<div className="enterprise-pricing-card">
|
||||
<div className="pricing-header">
|
||||
<div className="pricing-badge">
|
||||
<span>Most Popular</span>
|
||||
</div>
|
||||
<h3 className="pricing-title">
|
||||
{service.title}
|
||||
</h3>
|
||||
<div className="price-display">
|
||||
<span className="price-period">
|
||||
Contact Us for Pricing
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pricing-features">
|
||||
<ul className="enterprise-feature-list">
|
||||
<li className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<span>Custom {service.title.toLowerCase()} solution</span>
|
||||
</li>
|
||||
<li className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<span>Professional consultation</span>
|
||||
</li>
|
||||
<li className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<span>Ongoing support & maintenance</span>
|
||||
</li>
|
||||
<li className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<span>Quality assurance & testing</span>
|
||||
</li>
|
||||
<li className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<span>Documentation & training</span>
|
||||
</li>
|
||||
{service.duration && (
|
||||
<li className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-clock"></i>
|
||||
</div>
|
||||
<span>Project duration: {service.duration}</span>
|
||||
</li>
|
||||
)}
|
||||
{service.technologies && (
|
||||
<li className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-code"></i>
|
||||
</div>
|
||||
<span>Latest technologies & frameworks</span>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="pricing-cta">
|
||||
<Link href="/contact-us" className="btn btn-primary btn-lg me-3 mb-3">
|
||||
<span>Get Free Quote</span>
|
||||
<i className="fa-solid fa-arrow-right ms-2"></i>
|
||||
</Link>
|
||||
<Link href="/services" className="btn btn-outline-secondary btn-lg mb-3">
|
||||
<span>View All Services</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pricing-note">
|
||||
<div className="note-content">
|
||||
<i className="fa-solid fa-info-circle"></i>
|
||||
<p>
|
||||
Final pricing depends on project scope, complexity, and specific requirements.
|
||||
Contact us for a detailed proposal.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServicePricing;
|
||||
130
frontEnd/components/pages/services/ServiceProcess.tsx
Normal file
130
frontEnd/components/pages/services/ServiceProcess.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
"use client";
|
||||
import { useEffect } from "react";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
|
||||
import { Service } from "@/lib/api/serviceService";
|
||||
|
||||
interface ServiceProcessProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
const ServiceProcess = ({ service }: ServiceProcessProps) => {
|
||||
useEffect(() => {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
// Modern entrance animations
|
||||
gsap.set(".process-step", {
|
||||
y: 60,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
});
|
||||
|
||||
ScrollTrigger.batch(".process-step", {
|
||||
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.process_steps) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Split process steps by common separators
|
||||
const processSteps = service.process_steps
|
||||
.split(/[,;•\n]/)
|
||||
.map(step => step.trim())
|
||||
.filter(step => step.length > 0);
|
||||
|
||||
return (
|
||||
<section className="enterprise-process 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">Our Process</span>
|
||||
<h2 className="enterprise-section-title mb-3">
|
||||
{service.title} Process
|
||||
</h2>
|
||||
<p className="enterprise-section-description">
|
||||
{service.process_description || `Our proven methodology ensures successful delivery of your ${service.title.toLowerCase()} project.`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="row g-5">
|
||||
{processSteps.map((step, index) => (
|
||||
<div key={index} className="col-12 col-md-6 col-lg-4">
|
||||
<div className="process-step enterprise-process-step-compact">
|
||||
<div className="step-number">
|
||||
<span className="step-number-text">
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="step-content">
|
||||
<h6 className="step-title">
|
||||
{step}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// Helper function to generate step descriptions based on step name and service
|
||||
const getStepDescription = (step: string, serviceTitle: string): string => {
|
||||
const descriptions: { [key: string]: string } = {
|
||||
'Requirements Analysis': 'We analyze your business requirements and technical specifications to ensure we understand your goals.',
|
||||
'System Design': 'Our team creates a comprehensive system architecture and design that meets your specific needs.',
|
||||
'Development': 'We implement the solution using industry best practices and modern technologies.',
|
||||
'Testing': 'Rigorous testing ensures your solution is reliable, secure, and performs optimally.',
|
||||
'Deployment': 'We handle the deployment process and ensure smooth transition to production.',
|
||||
'Training': 'We provide comprehensive training to your team for successful adoption.',
|
||||
'API Planning': 'We design the API architecture and define endpoints based on your integration needs.',
|
||||
'API Development': 'We build robust, scalable APIs using modern frameworks and best practices.',
|
||||
'Documentation': 'Comprehensive API documentation ensures easy integration and maintenance.',
|
||||
'Integration': 'We integrate the API with your existing systems and third-party services.',
|
||||
'Assessment': 'We evaluate your current infrastructure and identify migration opportunities.',
|
||||
'Migration Planning': 'We create a detailed migration strategy with minimal downtime.',
|
||||
'Implementation': 'We execute the migration plan with careful monitoring and rollback procedures.',
|
||||
'Optimization': 'We optimize your cloud infrastructure for performance and cost efficiency.',
|
||||
'Support': 'Ongoing support and maintenance ensure your solution continues to perform optimally.'
|
||||
};
|
||||
|
||||
return descriptions[step] || `This step involves ${step.toLowerCase()} to ensure the success of your ${serviceTitle.toLowerCase()} project.`;
|
||||
};
|
||||
|
||||
export default ServiceProcess;
|
||||
113
frontEnd/components/pages/services/ServicesBanner.tsx
Normal file
113
frontEnd/components/pages/services/ServicesBanner.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
"use client";
|
||||
import { useEffect } from "react";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
|
||||
import Image from "next/legacy/image";
|
||||
import Link from "next/link";
|
||||
|
||||
|
||||
const ServicesBanner = () => {
|
||||
useEffect(() => {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
if (document.querySelector(".service-banner")) {
|
||||
const tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: ".service-banner",
|
||||
start: "center center",
|
||||
end: "+=100%",
|
||||
scrub: true,
|
||||
pin: false,
|
||||
},
|
||||
});
|
||||
|
||||
tl.to(".thumb-one", {
|
||||
opacity: 0.3,
|
||||
y: "-100%",
|
||||
zIndex: -1,
|
||||
duration: 2,
|
||||
});
|
||||
|
||||
tl.to(
|
||||
".thumb-two",
|
||||
{
|
||||
opacity: 0.3,
|
||||
scale: 2,
|
||||
y: "100%",
|
||||
zIndex: -1,
|
||||
duration: 2,
|
||||
},
|
||||
0
|
||||
);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="enterprise-banner position-relative overflow-hidden">
|
||||
<div className="banner-background">
|
||||
<div className="gradient-overlay"></div>
|
||||
<div className="geometric-pattern"></div>
|
||||
</div>
|
||||
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-12 col-xl-10">
|
||||
<div className="enterprise-banner__content">
|
||||
<div className="banner-badge mb-4">
|
||||
<span className="enterprise-badge">
|
||||
Enterprise Services
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="enterprise-title mb-4">
|
||||
The end-to-end bespoke software development company you need
|
||||
</h1>
|
||||
|
||||
<p className="enterprise-description mb-5">
|
||||
Empower your business with sophisticated tech solutions by GNX.
|
||||
From ideation to implementation, with a team of experts right at your fingertips
|
||||
</p>
|
||||
|
||||
<div className="enterprise-cta">
|
||||
<Link href="/contact-us" className="btn btn-primary btn-lg me-3 mb-3">
|
||||
<span>Get Free Quote</span>
|
||||
<i className="fa-solid fa-arrow-right ms-2"></i>
|
||||
</Link>
|
||||
<Link href="#scroll-to" className="btn btn-outline-light btn-lg mb-3">
|
||||
<span>Explore Services</span>
|
||||
<i className="fa-solid fa-arrow-down ms-2"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="social">
|
||||
<li>
|
||||
<Link
|
||||
href="https://www.linkedin.com/company/gnxtech"
|
||||
target="_blank"
|
||||
aria-label="connect with us on linkedin"
|
||||
>
|
||||
<i className="fa-brands fa-linkedin-in"></i>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="https://github.com/gnxtech"
|
||||
target="_blank"
|
||||
aria-label="view our code on github"
|
||||
>
|
||||
<i className="fa-brands fa-github"></i>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="#scroll-to" className="scroll-to">
|
||||
Scroll
|
||||
<span className="arrow"></span>
|
||||
</Link>
|
||||
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServicesBanner;
|
||||
@@ -0,0 +1,65 @@
|
||||
"use client";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const SmoothScroll = dynamic(() => import("../../shared/layout/animations/SmoothScroll"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const ParallaxImage = dynamic(() => import("../../shared/layout/animations/ParallaxImage"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const FadeImageBottom = dynamic(() => import("../../shared/layout/animations/FadeImageBottom"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const ButtonHoverAnimation = dynamic(
|
||||
() => import("../../shared/layout/animations/ButtonHoverAnimation"),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
const VanillaTiltHover = dynamic(
|
||||
() => import("../../shared/layout/animations/VanillaTiltHover"),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
const SplitTextAnimations = dynamic(
|
||||
() => import("../../shared/layout/animations/SplitTextAnimations"),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
const ScrollToElement = dynamic(() => import("../../shared/layout/animations/ScrollToElement"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const AppearDown = dynamic(() => import("../../shared/layout/animations/AppearDown"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const FadeAnimations = dynamic(() => import("../../shared/layout/animations/FadeAnimations"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const ServicesInitAnimations = () => {
|
||||
return (
|
||||
<>
|
||||
<SmoothScroll />
|
||||
<ParallaxImage />
|
||||
<FadeImageBottom />
|
||||
<ButtonHoverAnimation />
|
||||
<VanillaTiltHover />
|
||||
<SplitTextAnimations />
|
||||
<ScrollToElement />
|
||||
<AppearDown />
|
||||
<FadeAnimations />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServicesInitAnimations;
|
||||
@@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
const ServicesScrollProgressButton = () => {
|
||||
useEffect(() => {
|
||||
window.scroll(0, 0);
|
||||
}, []);
|
||||
|
||||
const [scrollProgress, setScrollProgress] = useState(0);
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
const scrollRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const handleScroll = () => {
|
||||
const totalHeight = document.body.scrollHeight - window.innerHeight;
|
||||
const progress = (window.scrollY / totalHeight) * 100;
|
||||
setScrollProgress(progress);
|
||||
setIsActive(window.scrollY > 50);
|
||||
};
|
||||
|
||||
const handleProgressClick = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
handleScroll();
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={scrollRef}
|
||||
className={`progress-wrap ${isActive ? " active-progress" : " "}`}
|
||||
onClick={handleProgressClick}
|
||||
title="Go To Top"
|
||||
>
|
||||
<span></span>
|
||||
<svg
|
||||
className="progress-circle svg-content"
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="-1 -1 102 102"
|
||||
>
|
||||
<path
|
||||
d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"
|
||||
stroke="#3887FE"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
style={{
|
||||
strokeDasharray: "308.66px",
|
||||
strokeDashoffset: `${308.66 - scrollProgress * 3.0866}px`,
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServicesScrollProgressButton;
|
||||
220
frontEnd/components/pages/services/Transform.tsx
Normal file
220
frontEnd/components/pages/services/Transform.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
"use client";
|
||||
import { useEffect } from "react";
|
||||
import Image from "next/legacy/image";
|
||||
import gsap from "gsap";
|
||||
import ScrollTrigger from "gsap/dist/ScrollTrigger";
|
||||
import thumb from "@/public/images/transform-thumb.png";
|
||||
import teamThumb from "@/public/images/team-thumb.png";
|
||||
import { Service } from "@/lib/api/serviceService";
|
||||
import { serviceUtils } from "@/lib/api/serviceService";
|
||||
|
||||
interface TransformProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
const Transform = ({ service }: TransformProps) => {
|
||||
|
||||
useEffect(() => {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
gsap.set(".foot-fade", {
|
||||
x: -100,
|
||||
opacity: 0,
|
||||
});
|
||||
|
||||
ScrollTrigger.batch(".foot-fade", {
|
||||
start: "-100px bottom",
|
||||
onEnter: (elements) =>
|
||||
gsap.to(elements, {
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
stagger: 0.3,
|
||||
}),
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="enterprise-transform py-5" id="scroll-to">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-12 col-xl-10">
|
||||
<div className="row align-items-center mb-5">
|
||||
<div className="col-12 col-lg-6">
|
||||
<div className="transform__content">
|
||||
<div className="section-header mb-4">
|
||||
<span className="enterprise-section-tag">Transform Your Business</span>
|
||||
<h2 className="enterprise-section-title mb-4">
|
||||
Transform your business with {service.title}
|
||||
</h2>
|
||||
<p className="enterprise-section-description">
|
||||
{service.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-6">
|
||||
<div className="transform__thumb">
|
||||
<div className="enterprise-image-wrapper">
|
||||
<Image
|
||||
src={serviceUtils.getServiceImageUrl(service) || thumb}
|
||||
className="enterprise-service-image"
|
||||
alt={service.title}
|
||||
width={600}
|
||||
height={400}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="section-header text-center mb-4">
|
||||
<span className="enterprise-section-tag">Why Choose Us</span>
|
||||
<h2 className="enterprise-section-title mb-3">
|
||||
{service.why_choose_description || `Why choose our ${service.title.toLowerCase()}?`}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="row g-5">
|
||||
{service.features && service.features.length > 0 ? (
|
||||
service.features.slice(0, 6).map((feature, index) => (
|
||||
<div key={feature.id} className="col-12 col-md-6 col-lg-4">
|
||||
<div className="benefit-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>
|
||||
))
|
||||
) : (
|
||||
// Fallback content if no features are available
|
||||
<>
|
||||
<div className="col-12 col-md-6 col-lg-4">
|
||||
<div className="benefit-item enterprise-section-card">
|
||||
<div className="card-icon">
|
||||
<i className="fa-solid fa-rocket"></i>
|
||||
</div>
|
||||
<div className="card-content">
|
||||
<h6 className="card-title">Fast Delivery</h6>
|
||||
<p className="card-description">
|
||||
{service.duration ? `Delivered in ${service.duration}` : 'Quick turnaround times for your project needs'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6 col-lg-4">
|
||||
<div className="benefit-item enterprise-section-card">
|
||||
<div className="card-icon">
|
||||
<i className="fa-solid fa-shield-halved"></i>
|
||||
</div>
|
||||
<div className="card-content">
|
||||
<h6 className="card-title">Quality Assured</h6>
|
||||
<p className="card-description">
|
||||
Rigorous testing and quality control ensure reliable, robust solutions
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6 col-lg-4">
|
||||
<div className="benefit-item enterprise-section-card">
|
||||
<div className="card-icon">
|
||||
<i className="fa-solid fa-headset"></i>
|
||||
</div>
|
||||
<div className="card-content">
|
||||
<h6 className="card-title">Ongoing Support</h6>
|
||||
<p className="card-description">
|
||||
Comprehensive support and maintenance to ensure optimal performance
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="section-header text-center mb-4 mt-6">
|
||||
<span className="enterprise-section-tag">Our Expertise</span>
|
||||
<h2 className="enterprise-section-title mb-3">
|
||||
Our Expertise
|
||||
</h2>
|
||||
{service.expertise_description && (
|
||||
<p className="enterprise-section-description">
|
||||
{service.expertise_description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="row g-5">
|
||||
{service.expertise_items && service.expertise_items.length > 0 ? (
|
||||
service.expertise_items.slice(0, 3).map((expertise, index) => (
|
||||
<div key={expertise.id} className="col-12 col-md-6 col-lg-4">
|
||||
<div className="expertise-item enterprise-section-card">
|
||||
<div className="card-icon">
|
||||
<i className={`fa-solid fa-${expertise.icon || 'star'}`}></i>
|
||||
</div>
|
||||
<div className="card-content">
|
||||
<h6 className="card-title">{expertise.title}</h6>
|
||||
<p className="card-description">
|
||||
{expertise.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
// Fallback content if no expertise items are available
|
||||
<>
|
||||
<div className="col-12 col-md-6 col-lg-4">
|
||||
<div className="expertise-item enterprise-section-card">
|
||||
<div className="card-icon">
|
||||
<i className="fa-solid fa-users"></i>
|
||||
</div>
|
||||
<div className="card-content">
|
||||
<h6 className="card-title">Expert Team</h6>
|
||||
<p className="card-description">
|
||||
Our experienced team specializes in {service.title.toLowerCase()} with years of industry expertise.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6 col-lg-4">
|
||||
<div className="expertise-item enterprise-section-card">
|
||||
<div className="card-icon">
|
||||
<i className="fa-solid fa-code"></i>
|
||||
</div>
|
||||
<div className="card-content">
|
||||
<h6 className="card-title">Modern Technologies</h6>
|
||||
<p className="card-description">
|
||||
We use cutting-edge technologies and frameworks to deliver scalable, secure solutions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6 col-lg-4">
|
||||
<div className="expertise-item enterprise-section-card">
|
||||
<div className="card-icon">
|
||||
<i className="fa-solid fa-chart-line"></i>
|
||||
</div>
|
||||
<div className="card-content">
|
||||
<h6 className="card-title">Proven Results</h6>
|
||||
<p className="card-description">
|
||||
We have successfully delivered solutions to numerous clients, helping them achieve their goals.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Transform;
|
||||
Reference in New Issue
Block a user