265 lines
11 KiB
TypeScript
265 lines
11 KiB
TypeScript
"use client";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useAbout } from "@/lib/hooks/useAbout";
|
|
import { AboutService as AboutServiceType, AboutProcess } from "@/lib/api/aboutService";
|
|
import thumb from "@/public/images/service/two.png";
|
|
import thumbTwo from "@/public/images/service/three.png";
|
|
|
|
const AboutServiceComponent = () => {
|
|
const { data, loading, error } = useAbout();
|
|
|
|
// Show loading state
|
|
if (loading) {
|
|
return (
|
|
<section className="tp-service pt-120 pb-120">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="text-center py-5">
|
|
<div className="spinner-border text-primary" role="status">
|
|
<span className="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p className="mt-3">Loading service content...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// Show error state
|
|
if (error) {
|
|
return (
|
|
<section className="tp-service pt-120 pb-120">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="text-center py-5">
|
|
<div className="alert alert-danger" role="alert">
|
|
<h4 className="alert-heading">Error Loading Content</h4>
|
|
<p>{error}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// Use API data or fallback to default content
|
|
const serviceData = data?.service as AboutServiceType | undefined;
|
|
const processData = data?.process as AboutProcess | undefined;
|
|
|
|
return (
|
|
<section className="tp-service">
|
|
<div className="container">
|
|
<div className="row align-items-center">
|
|
<div className="col-12 col-lg-5">
|
|
<div className="tp-service__thumb">
|
|
<Link href="service-single" className="w-100">
|
|
<div className="parallax-image-wrap">
|
|
<div className="parallax-image-inner">
|
|
<Image
|
|
src={serviceData?.image_url || thumb}
|
|
className="w-100 parallax-image"
|
|
alt="Enterprise Technology Solutions"
|
|
width={400}
|
|
height={300}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-lg-7 col-xl-6 offset-xl-1">
|
|
<div className="tp-service__content">
|
|
<div className="enterprise-badge">
|
|
<i className={serviceData?.badge_icon || "fa-solid fa-users"}></i>
|
|
{serviceData?.badge_text || "About Our Company"}
|
|
</div>
|
|
<h2 className="title-anim">
|
|
{serviceData?.title || "Enterprise Technology Leaders"}
|
|
</h2>
|
|
<p>
|
|
{serviceData?.description || "Founded in 2008, EnterpriseSoft Solutions has emerged as a premier enterprise software company, serving Fortune 500 companies and innovative startups worldwide. Our team of 200+ engineers, architects, and consultants specializes in delivering mission-critical software solutions that drive digital transformation and business growth."}
|
|
</p>
|
|
<div className="enterprise-features">
|
|
<div className="row">
|
|
{serviceData?.features && serviceData.features.length > 0 ? (
|
|
serviceData.features.map((feature, index) => (
|
|
<div key={index} className="col-12 col-md-6">
|
|
<div className="feature-item">
|
|
<div className="feature-icon">
|
|
<i className={feature.icon}></i>
|
|
</div>
|
|
<div className="feature-content">
|
|
<h6>{feature.title}</h6>
|
|
<p>{feature.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<>
|
|
<div className="col-12 col-md-6">
|
|
<div className="feature-item">
|
|
<div className="feature-icon">
|
|
<i className="fa-solid fa-shield-halved"></i>
|
|
</div>
|
|
<div className="feature-content">
|
|
<h6>Enterprise Security</h6>
|
|
<p>Defense-Grade Protection</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-md-6">
|
|
<div className="feature-item">
|
|
<div className="feature-icon">
|
|
<i className="fa-solid fa-cloud"></i>
|
|
</div>
|
|
<div className="feature-content">
|
|
<h6>Cloud Native</h6>
|
|
<p>AWS, Azure, GCP Partners</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-md-6">
|
|
<div className="feature-item">
|
|
<div className="feature-icon">
|
|
<i className="fa-solid fa-certificate"></i>
|
|
</div>
|
|
<div className="feature-content">
|
|
<h6>Certified Experts</h6>
|
|
<p>Microsoft, AWS, Google Certified</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-md-6">
|
|
<div className="feature-item">
|
|
<div className="feature-icon">
|
|
<i className="fa-solid fa-globe"></i>
|
|
</div>
|
|
<div className="feature-content">
|
|
<h6>Global Reach</h6>
|
|
<p>Offices in 5 Countries</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="mt-4">
|
|
<Link href={serviceData?.cta_link || "service-single"} className="btn-line">
|
|
{serviceData?.cta_text || "Explore Our Solutions"}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row align-items-center">
|
|
<div className="col-12 col-lg-6">
|
|
<div className="tp-service__content">
|
|
<div className="enterprise-badge">
|
|
<i className={processData?.badge_icon || "fa-solid fa-cogs"}></i>
|
|
{processData?.badge_text || "Our Methodology"}
|
|
</div>
|
|
<h2 className="title-anim">
|
|
{processData?.title || "Enterprise Development Process"}
|
|
</h2>
|
|
<p>
|
|
{processData?.description || "Our proven enterprise development methodology combines agile practices with enterprise-grade security, scalability, and compliance requirements. We follow industry best practices including DevOps, CI/CD, and microservices architecture to deliver robust, scalable solutions."}
|
|
</p>
|
|
<div className="process-steps">
|
|
<div className="row">
|
|
{processData?.steps && processData.steps.length > 0 ? (
|
|
processData.steps.map((step, index) => (
|
|
<div key={index} className="col-12 col-md-6">
|
|
<div className="process-step">
|
|
<div className="step-number">{step.step_number}</div>
|
|
<div className="step-content">
|
|
<h6>{step.title}</h6>
|
|
<p>{step.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<>
|
|
<div className="col-12 col-md-6">
|
|
<div className="process-step">
|
|
<div className="step-number">01</div>
|
|
<div className="step-content">
|
|
<h6>Discovery & Planning</h6>
|
|
<p>Comprehensive analysis and architecture design</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-md-6">
|
|
<div className="process-step">
|
|
<div className="step-number">02</div>
|
|
<div className="step-content">
|
|
<h6>Development & Testing</h6>
|
|
<p>Agile development with continuous testing</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-md-6">
|
|
<div className="process-step">
|
|
<div className="step-number">03</div>
|
|
<div className="step-content">
|
|
<h6>Deployment & Integration</h6>
|
|
<p>Seamless deployment and system integration</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-md-6">
|
|
<div className="process-step">
|
|
<div className="step-number">04</div>
|
|
<div className="step-content">
|
|
<h6>Support & Maintenance</h6>
|
|
<p>24/7 enterprise support and maintenance</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="mt-4">
|
|
<Link href={processData?.cta_link || "service-single"} className="btn-line">
|
|
{processData?.cta_text || "View Our Services"}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-lg-6">
|
|
<div className="tp-service__thumb">
|
|
<Link href="service-single" className="w-100">
|
|
<div className="parallax-image-wrap">
|
|
<div className="parallax-image-inner">
|
|
<Image
|
|
src={processData?.image_url || thumbTwo}
|
|
className="w-100 parallax-image"
|
|
alt="Enterprise Development Process"
|
|
width={400}
|
|
height={300}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default AboutServiceComponent;
|
|
|
|
|