70 lines
4.2 KiB
TypeScript
70 lines
4.2 KiB
TypeScript
"use client";
|
|
import React, { useState } from 'react';
|
|
import GsapReveal from '@/components/mobile-app-development-service/support/common/GsapReveal';
|
|
import ServiceCard from '@/components/mobile-app-development-service/support/cards/ServiceCard';
|
|
import { services } from '@/utils/data';
|
|
import ContactPopup from '@/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup';
|
|
|
|
const Service = () => {
|
|
const [isContactOpen, setIsContactOpen] = useState(false);
|
|
return (
|
|
<div className="service1-section-area sp2 service-parallax" id="services" style={{ backgroundImage: 'url(/assets/img-app/home/section3/bg.webp)', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundAttachment: 'fixed', position: 'relative' }}>
|
|
<div className="section-overlay" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 0 }}></div>
|
|
<div className="container" style={{ position: 'relative', zIndex: 1 }}>
|
|
{/* Header + intro image row */}
|
|
<div className="row align-items-center g-4 space-margin60">
|
|
<div className="col-lg-7">
|
|
<div className="service-header heading2">
|
|
<GsapReveal y={20}>
|
|
<h5 className="text-white"><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Our Services</h5>
|
|
</GsapReveal>
|
|
<div className="space24"></div>
|
|
<GsapReveal y={20} delay={0.15}>
|
|
<h2 className="text-anime-style-3 text-white">App Development Services Designed for Business Growth</h2>
|
|
</GsapReveal>
|
|
{/* <div className="space20"></div>
|
|
<GsapReveal y={20} delay={0.25}>
|
|
<p data-aos="fade-up" data-aos-duration="800" style={{ maxWidth: 520, color: 'rgba(255,255,255,0.8)' }}>
|
|
From cybersecurity and cloud solutions to software development and managed support — we deliver end-to-end IT services that drive growth, efficiency and resilience for your business.
|
|
</p>
|
|
</GsapReveal> */}
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-5" data-aos="zoom-in" data-aos-duration="900">
|
|
<div className="service-intro-img" style={{ position: 'relative' }}>
|
|
<img
|
|
src="/assets/img-app/home/section3/top-right.webp"
|
|
alt="Our IT Services"
|
|
style={{ width: '100%', borderRadius: '20px 0 20px 0', objectFit: 'cover', height: 280, boxShadow: '0 20px 50px rgba(0,0,0,0.15)' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Service Cards */}
|
|
<div className="row g-4">
|
|
{services.slice(6, 12).map((service, i) => (
|
|
<div key={service.id} className="col-lg-4 col-md-6 d-flex" data-aos="zoom-in" data-aos-duration={800 + i * 100}>
|
|
<ServiceCard service={service} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bottom CTA Area */}
|
|
<div className="row justify-content-center mt-5">
|
|
<div className="col-lg-8 text-center" data-aos="fade-up" data-aos-duration="1000">
|
|
<div className="service-bottom-cta mt-50">
|
|
<button onClick={() => setIsContactOpen(true)} className="vl-btn1">
|
|
Request Free Proposal <i className="fa-solid fa-angle-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Service;
|