224 lines
9.6 KiB
TypeScript
224 lines
9.6 KiB
TypeScript
"use client";
|
|
import { useEffect } from "react";
|
|
import Image from "next/legacy/image";
|
|
import gsap from "gsap";
|
|
import ScrollTrigger from "gsap/dist/ScrollTrigger";
|
|
import { Service } from "@/lib/api/serviceService";
|
|
import { serviceUtils } from "@/lib/api/serviceService";
|
|
|
|
interface TransformProps {
|
|
service: Service;
|
|
}
|
|
|
|
const Transform = ({ service }: TransformProps) => {
|
|
|
|
useEffect(() => {
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
// Check if elements exist before animating
|
|
const footFadeElements = document.querySelectorAll(".foot-fade");
|
|
if (footFadeElements.length > 0) {
|
|
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) || "/images/transform-thumb.png"}
|
|
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;
|