109 lines
5.9 KiB
TypeScript
109 lines
5.9 KiB
TypeScript
"use client";
|
|
import React, { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import GsapReveal from '@/components/common/GsapReveal';
|
|
import ContactPopup from '@/components/common/ContactPopup/ContactPopup';
|
|
|
|
const Work = () => {
|
|
const [isContactOpen, setIsContactOpen] = useState(false);
|
|
return (
|
|
<>
|
|
<div
|
|
className="work-others-section"
|
|
style={{
|
|
backgroundImage: 'url(/assets/img/home/bg/bg-3.webp)',
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundSize: 'cover',
|
|
}}
|
|
>
|
|
<img src="/assets/img/home/section5/element-2.webp" alt="" className="elements16" />
|
|
<img src="/assets/img/home/section5/element-1.webp" alt="" className="elements1 keyframe5" />
|
|
|
|
<div className="container">
|
|
<div className="row align-items-center g-5">
|
|
|
|
{/* LEFT: Full Image */}
|
|
<div className="col-12 col-xl-5">
|
|
<GsapReveal y={30} duration={1}>
|
|
<img
|
|
src="/assets/img/home/section5/left-side.webp"
|
|
alt="How It Works"
|
|
// style={{
|
|
// width: '100%',
|
|
// height: '100%',
|
|
// minHeight: '670px',
|
|
// objectFit: 'cover',
|
|
// display: 'block',
|
|
// borderRadius: '16px',
|
|
// }}
|
|
/>
|
|
</GsapReveal>
|
|
</div>
|
|
|
|
{/* RIGHT: Heading + Paragraph + Steps List + CTA */}
|
|
<div className="col-12 col-xl-7">
|
|
<div className="work-content-area heading1">
|
|
<GsapReveal y={20}>
|
|
<h5><span><img src="/favicon.ico" alt="" /></span>How It Works</h5>
|
|
</GsapReveal>
|
|
<div className="space24"></div>
|
|
<GsapReveal y={20} delay={0.15}>
|
|
<h2 className="text-anime-style-3">Why Our Websites Stand Out</h2>
|
|
</GsapReveal>
|
|
{/* <div className="space20"></div>
|
|
<GsapReveal y={20} delay={0.25}>
|
|
<p className="work-lead-para">
|
|
At MetatronCube, we make IT simple. Our proven four-step process ensures every engagement — from initial consultation to ongoing support — is transparent, efficient, and tailored to deliver measurable results for your business.
|
|
</p>
|
|
</GsapReveal> */}
|
|
|
|
<div className="space28"></div>
|
|
|
|
{/* Step List */}
|
|
<div className="work-steps-list">
|
|
{[
|
|
{ img: '/assets/img/home/section5/conversion-2.webp', title: 'Conversion-Focused Strategy', desc: 'We build websites that are designed to generate leads and sales.' },
|
|
|
|
{ img: '/assets/img/home/section5/mobile-2.webp', title: 'Mobile-First Development', desc: 'Fully responsive across mobile, tablet, and desktop.' },
|
|
|
|
{ img: '/assets/img/home/section5/seo-2.webp', title: 'SEO-Optimized Structure', desc: 'Built with clean code and optimized for search engine visibility.' },
|
|
|
|
{ img: '/assets/img/home/section5/fast.webp', title: 'Fast Loading Speed', desc: 'Performance-optimized websites that load in under 3 seconds.' },
|
|
|
|
{ img: '/assets/img/home/section5/secure.webp', title: 'Secure & Scalable', desc: ' Secure architecture designed to grow with your business.' },
|
|
|
|
{ img: '/assets/img/home/section5/marketing.webp', title: 'Marketing-Ready Integration', desc: 'Facebook Pixel, Google Analytics, CRM & Automation ready.' },
|
|
].map((step, i) => (
|
|
<div key={i} className="work-step-row" data-aos="fade-up" data-aos-duration={600 + i * 80}>
|
|
<div className="work-step-num">
|
|
<img src={step.img} alt={step.title} />
|
|
</div>
|
|
<div className="work-step-body">
|
|
<h4>{step.title}</h4>
|
|
<p>{step.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="space40"></div>
|
|
<GsapReveal y={20} delay={0.4}>
|
|
<button onClick={() => setIsContactOpen(true)} className="vl-btn1">
|
|
Book Free Strategy Call <i className="fa-solid fa-angle-right"></i>
|
|
</button>
|
|
</GsapReveal>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div className="space80"></div>
|
|
</div>
|
|
</div>
|
|
<ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Work;
|