68 lines
3.9 KiB
TypeScript
68 lines
3.9 KiB
TypeScript
"use client";
|
|
import React, { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import GsapReveal from '@/components/common/GsapReveal';
|
|
import VideoModal from '@/components/common/VideoModal/VideoModal';
|
|
import ContactPopup from '@/components/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/elements/elements4.png" alt="" className="elements4" />
|
|
<img src="/assets/img/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>Websites That Drive Real Business Growth</h5>
|
|
</GsapReveal>
|
|
<div className="space16"></div>
|
|
<GsapReveal y={30} duration={1} delay={0.2}>
|
|
<h1 className="text-anime-style-3">We build fast, SEO-optimized websites that drive leads and sales.</h1>
|
|
</GsapReveal>
|
|
<div className="space16"></div>
|
|
<GsapReveal y={30} duration={1.2} delay={0.4}>
|
|
<p>Whether you're a startup or an established business, we create powerful websites that turn visitors into customers.</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 Consultation <i className="fa-solid fa-angle-right"></i></button>
|
|
<Link href="#portfolio" className="vl-btn1">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/home/banner/centre-img.webp" alt="" />
|
|
</div>
|
|
{/* <div className="image-bg1">
|
|
<img src="/assets/img/all-images/bg/hero-bg2.png" alt="" className="keyframe5" />
|
|
</div> */}
|
|
<div className="elements1">
|
|
<img src="/assets/img/home/banner/1-element.webp" alt="" className="animation-1 floating-slow" />
|
|
</div>
|
|
<div className="elements2">
|
|
<img src="/assets/img/home/banner/bottom.webp" alt="" className="animation-2 floating-fast" />
|
|
</div>
|
|
<div className="elements3">
|
|
<img src="/assets/img/home/banner/right.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;
|