first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,198 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react";
|
||||
import BrandTwo from "../brand/BrandTwo";
|
||||
import Modal from "react-modal";
|
||||
import HeaderPopupForm from "../form/HeaderPopupForm";
|
||||
import Image from "next/image";
|
||||
|
||||
// Modal.setAppElement("#root");
|
||||
|
||||
const HeroBannerFive = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
function toggleModalOne() {
|
||||
setIsOpen(!isOpen);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="hero-banner-five">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-10 col-lg-11 col-md-10 m-auto">
|
||||
<h1
|
||||
className="font-recoleta hero-heading"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
Build your <span>Product</span> with Deski pro app.
|
||||
</h1>
|
||||
<p
|
||||
className="hero-sub-heading"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
Deski delivered blazing fast performance, striking word soludtion
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .row */}
|
||||
|
||||
<div className="d-sm-flex align-items-center justify-content-center button-group">
|
||||
<a
|
||||
href="#"
|
||||
className="d-flex align-items-center ios-button"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="200"
|
||||
>
|
||||
<Image width="25" height="32" src="/images/icon/apple.svg" alt="brand" className="icon" />
|
||||
<div>
|
||||
<span>Download on the</span>
|
||||
<strong>App store</strong>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="d-flex align-items-center windows-button"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="300"
|
||||
>
|
||||
<Image width="26" height="26" src="/images/icon/windows.svg" alt="icon" className="icon" />
|
||||
<div>
|
||||
<span>Get it on</span>
|
||||
<strong>Windows pc</strong>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{/* End button group */}
|
||||
|
||||
<p
|
||||
className="sing-in-call"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="400"
|
||||
>
|
||||
Different Platform? <span onClick={toggleModalOne}>Contact us</span>
|
||||
</p>
|
||||
{/* End sign-in-call */}
|
||||
</div>
|
||||
{/* End .container */}
|
||||
|
||||
<div
|
||||
className="img-gallery"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="400"
|
||||
>
|
||||
<div className="container text-center">
|
||||
<div className="screen-container">
|
||||
<Image width={1162} height={645}
|
||||
style={{height:'fit-content'}}
|
||||
src="/images/assets/screen_01.png"
|
||||
alt="shape"
|
||||
className="main-screen"
|
||||
/>
|
||||
<Image width={219} height={253}
|
||||
style={{height:'fit-content'}}
|
||||
src="/images/assets/screen_01.1.png"
|
||||
alt="shape"
|
||||
className="shapes screen-one"
|
||||
/>
|
||||
<Image width={360} height={144}
|
||||
style={{height:'fit-content'}}
|
||||
src="/images/assets/screen_01.2.png"
|
||||
alt="shape"
|
||||
className="shapes screen-two"
|
||||
/>
|
||||
</div>
|
||||
{/* /.screen-container */}
|
||||
</div>
|
||||
</div>
|
||||
{/* /.img-gallery */}
|
||||
|
||||
<Image width="179" height="397"
|
||||
src="/images/shape/133.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width="91" height="241"
|
||||
src="/images/shape/134.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
<Image width="134" height="140"
|
||||
src="/images/shape/135.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-three"
|
||||
/>
|
||||
<Image width="84" height="92"
|
||||
src="/images/shape/136.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-four"
|
||||
/>
|
||||
|
||||
<div className="partner-slider-two mt-110 md-mt-80">
|
||||
<div className="container">
|
||||
<p className="text-center">
|
||||
Over <span>32K+</span> software businesses growing with Deski.
|
||||
</p>
|
||||
<div className="partnerSliderTwo">
|
||||
<BrandTwo />
|
||||
</div>
|
||||
{/* End .partner slider two */}
|
||||
</div>
|
||||
</div>
|
||||
{/* /.partner-slider-two */}
|
||||
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onRequestClose={toggleModalOne}
|
||||
contentLabel="My dialog"
|
||||
className="custom-modal modal-contact-popup-one"
|
||||
overlayClassName="custom-overlay"
|
||||
closeTimeoutMS={500}
|
||||
>
|
||||
<div className="box_inner ">
|
||||
<main className="main-body box_inner modal-content clearfix">
|
||||
<button className="close" onClick={toggleModalOne}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="close" />
|
||||
</button>
|
||||
{/* End close icon */}
|
||||
|
||||
<div className="left-side">
|
||||
<div className="d-flex flex-column justify-content-between h-100">
|
||||
<div className="row">
|
||||
<div className="col-xl-10 col-lg-8 m-auto">
|
||||
<blockquote>
|
||||
“I never dreamed about success. I worked for it.”
|
||||
</blockquote>
|
||||
<span className="bio">—Estée Lauder</span>
|
||||
</div>
|
||||
</div>
|
||||
<Image width="649" height="466"
|
||||
src="/images/assets/ils_18.svg"
|
||||
alt="image"
|
||||
className="illustration mt-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.left-side */}
|
||||
|
||||
<div className="right-side">
|
||||
<h2 className="form-title">Contact us</h2>
|
||||
<HeaderPopupForm />
|
||||
</div>
|
||||
{/* /.right-side */}
|
||||
</main>
|
||||
{/* /.main-body */}
|
||||
</div>
|
||||
</Modal>
|
||||
{/* End Modal For Request a demo */}
|
||||
</div>
|
||||
// /.hero-banner-five
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroBannerFive;
|
||||
Reference in New Issue
Block a user