update
This commit is contained in:
Iliyan Angelov
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