68 lines
4.1 KiB
TypeScript
68 lines
4.1 KiB
TypeScript
"use client";
|
|
import React, { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import GsapReveal from '@/components/mobile-app-development-service/support/common/GsapReveal';
|
|
import VideoModal from '@/components/mobile-app-development-service/support/common/VideoModal/VideoModal';
|
|
import ContactPopup from '@/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup';
|
|
|
|
const Hero = () => {
|
|
const [isVideoOpen, setIsVideoOpen] = useState(false);
|
|
const [isContactOpen, setIsContactOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="hero1-section-area" id="home">
|
|
<img src="/assets/img-app/elements/elements4.png" alt="" className="elements4" />
|
|
<img src="/assets/img-app/elements/elements5.png" alt="" className="elements5" />
|
|
<div className="container">
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-7">
|
|
<div className="hero1-header heading1">
|
|
<GsapReveal y={30} duration={0.8}>
|
|
<h5>Build Powerful Mobile Apps That Drive Growth & Revenue</h5>
|
|
</GsapReveal>
|
|
<div className="space16"></div>
|
|
<GsapReveal y={30} duration={1} delay={0.2}>
|
|
<h1 className="text-anime-style-3">High-performance Android, iOS, cross-platform apps for businesses</h1>
|
|
</GsapReveal>
|
|
<div className="space16"></div>
|
|
<GsapReveal y={30} duration={1.2} delay={0.4}>
|
|
<p>From startups to enterprises, we create scalable, secure, and user-friendly mobile apps that increase engagement, automate operations, and generate revenue.</p>
|
|
</GsapReveal>
|
|
<div className="space32"></div>
|
|
<GsapReveal y={30} duration={1.4} delay={0.6}>
|
|
<div className="btn-area1 d-flex flex-wrap gap-3">
|
|
<button onClick={() => setIsContactOpen(true)} className="vl-btn1">Get Free App Consultation<i className="fa-solid fa-angle-right"></i></button>
|
|
{/* <Link href="#portfolio" className="vl-btn1 secondary-cta">View Our Work <i className="fa-solid fa-angle-right"></i></Link> */}
|
|
</div>
|
|
</GsapReveal>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-5">
|
|
<div className="hero-images-area">
|
|
<div className="img1" data-aos="zoom-in" data-aos-duration="1000">
|
|
<img src="/assets/img-app/home/banner/centre-img.webp" alt="" />
|
|
</div>
|
|
{/* <div className="image-bg1">
|
|
<img src="/assets/img-app/all-images/bg/hero-bg2.png" alt="" className="keyframe5" />
|
|
</div> */}
|
|
<div className="elements1">
|
|
<img src="/assets/img-app/home/banner/left-element.webp" alt="" className="animation-1 floating-slow" />
|
|
</div>
|
|
<div className="elements2">
|
|
<img src="/assets/img-app/home/banner/bottom-element.webp" alt="" className="animation-2 floating-fast" />
|
|
</div>
|
|
<div className="elements3">
|
|
<img src="/assets/img-app/home/banner/right-element.webp" alt="" className="animation-3 floating-slow" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<VideoModal isOpen={isVideoOpen} onClose={() => setIsVideoOpen(false)} videoUrl="https://www.youtube.com/embed/7e90gBu4pas" />
|
|
<ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|