first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,72 @@
|
||||
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import Video from "../../elements/Video";
|
||||
import BrandFive from "../../components/brand/BrandFive";
|
||||
import Image from "next/image";
|
||||
|
||||
const heroContent = {
|
||||
title: "Edit video & create great content",
|
||||
description: `Make stunning videos with animation, stock footage, and photos.`,
|
||||
buttonText: " Download - It’s free",
|
||||
};
|
||||
|
||||
const HeroBannerEight = () => {
|
||||
return (
|
||||
<div className="hero-banner-eight">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-10 m-auto">
|
||||
<h1 className="hero-heading" data-aos="fade-up">
|
||||
{heroContent.title}
|
||||
</h1>
|
||||
<p
|
||||
className="hero-sub-heading"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
{heroContent.description}
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="theme-btn-nine"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="200"
|
||||
>
|
||||
{heroContent.buttonText}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="video-wrapper">
|
||||
<Video />
|
||||
</div>
|
||||
{/* /.video-wrapper */}
|
||||
</div>
|
||||
|
||||
<div className="partner-slider-two mt-130 md-mt-80">
|
||||
<div className="container">
|
||||
<div className="partnerSliderTwo">
|
||||
<BrandFive />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.partner-slider-two */}
|
||||
<Image width="488" height="809"
|
||||
src="/images/shape/173.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-right"
|
||||
/>
|
||||
<Image width="563" height="862"
|
||||
src="/images/shape/174.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-left"
|
||||
/>
|
||||
</div>
|
||||
// /.hero-banner-eight
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroBannerEight;
|
||||
@@ -0,0 +1,64 @@
|
||||
import React from "react";
|
||||
import FormDemo from "../../components/form/FormDemo";
|
||||
import BrandFive from "../../components/brand/BrandFive";
|
||||
import Image from "next/image";
|
||||
|
||||
const HeroBannerEleven = () => {
|
||||
return (
|
||||
<div className="hero-banner-eleven lg-container">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-7 col-lg-6">
|
||||
<div className="hero-text-wrapper">
|
||||
<h1>
|
||||
Edit & Sign <br /> PDF{" "}
|
||||
<span>
|
||||
documents
|
||||
<Image width="459" height="38"
|
||||
src="/images/shape/line-shape-12.svg"
|
||||
alt="shape"
|
||||
className="cs-screen"
|
||||
/>
|
||||
</span>
|
||||
Online free.
|
||||
</h1>
|
||||
<p className="hero-sub-heading">
|
||||
Document edit, workflow, simplified
|
||||
</p>
|
||||
<FormDemo />
|
||||
<p className="term-text">No credit card required</p>
|
||||
</div>
|
||||
{/* .hero-text-wrapper */}
|
||||
</div>
|
||||
{/* End .col-xl-7 */}
|
||||
|
||||
<div className="illustration-container">
|
||||
<Image width={868} height={836} style={{height:'fit-content'}} src="/images/assets/ils-02.png" alt="illustration" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Emd .row */}
|
||||
</div>
|
||||
{/* End .container */}
|
||||
|
||||
<div className="partner-slider-two mt-150 md-mt-20">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-8 col-lg-10 col-md-10 m-auto">
|
||||
<p className="text-center text-lg">
|
||||
Join <span>27,000+</span> companies who’ve reached document
|
||||
workflow with Deski
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="partnerSliderTwo">
|
||||
<BrandFive />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.partner-slider-two */}
|
||||
</div>
|
||||
// .hero-banner-eleven
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroBannerEleven;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,108 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import FeaturesEight from "../features/FeaturesEight";
|
||||
import Image from "next/image";
|
||||
|
||||
const HeroBannerFour = () => {
|
||||
return (
|
||||
<div className="hero-banner-four">
|
||||
<Image width="213" height="86"
|
||||
src="/images/shape/100.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-four"
|
||||
/>
|
||||
<Image width="10" height="19"
|
||||
src="/images/shape/101.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-five"
|
||||
/>
|
||||
<Image width="242" height="433"
|
||||
src="/images/shape/102.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-six"
|
||||
/>
|
||||
<Image width="246" height="400"
|
||||
src="/images/shape/103.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-seven"
|
||||
/>
|
||||
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-6 order-lg-last">
|
||||
<div className="illustration-holder">
|
||||
<Image
|
||||
src="/images/assets/ils_14.svg"
|
||||
alt="shape"
|
||||
className="illustration"
|
||||
width={660}
|
||||
height={471}
|
||||
/>
|
||||
<Image
|
||||
src="/images/assets/ils_14.1.svg"
|
||||
width={83}
|
||||
height = {102}
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width="83" height="98"
|
||||
src="/images/assets/ils_14.2.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
<Image width="88" height="107"
|
||||
src="/images/assets/ils_14.3.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-three"
|
||||
/>
|
||||
</div>
|
||||
{/*<p className="review-text">*/}
|
||||
{/* Over <span>150,000+ client</span> all over the world.*/}
|
||||
{/*</p>*/}
|
||||
</div>
|
||||
{/* End .col Performance & Content Marketing Agency */}
|
||||
|
||||
<div className="col-lg-6 order-lg-first">
|
||||
<div className="text-wrapper">
|
||||
<h1 data-aos="fade-up" data-aos-duration="1200">
|
||||
<span>Performance & </span> Content Marketing.
|
||||
</h1>
|
||||
<p
|
||||
className="sub-text"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
The Performance & Content Marketing Agency for Fintech Companies.
|
||||
</p>
|
||||
<Link
|
||||
href="#"
|
||||
className="theme-btn-five"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="200"
|
||||
>
|
||||
{" "}
|
||||
Let’s get started
|
||||
</Link>
|
||||
</div>
|
||||
{/* /.text-wrapper */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="fancy-feature-eight mt-160 md-mt-100">
|
||||
<div className="container">
|
||||
<div className="bg-wrapper">
|
||||
<FeaturesEight />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.fancy-feature-eight */}
|
||||
</div>
|
||||
);
|
||||
// {/* /.hero-banner-four */}
|
||||
};
|
||||
|
||||
export default HeroBannerFour;
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from "react";
|
||||
import BrandFour from "../brand/BrandFour";
|
||||
import FormAppoint from "../form/FormAppoint";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
const HeroBannerNine = () => {
|
||||
return (
|
||||
<div className="hero-banner-nine lg-container">
|
||||
<Image width="1039" height="973" src="/images/shape/190.svg" alt="shape" className="shapes bg-shape" />
|
||||
<div className="container">
|
||||
<div className="illustration-container">
|
||||
<Image width={845} height={593} style={{height:'fit-content'}} src="/images/assets/screen_17.png" alt="screen" />
|
||||
</div>
|
||||
{/* illustration-container */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<h1 className="hero-heading">
|
||||
Simplified{" "}
|
||||
<span>
|
||||
Scheduling <Image width="430" height="67" src="/images/shape/189.svg" alt="shape" />
|
||||
</span>{" "}
|
||||
app for all.
|
||||
</h1>
|
||||
<p className="hero-sub-heading">
|
||||
Deski is your hub for scheduling & meetings professionally and
|
||||
efficiently.
|
||||
</p>
|
||||
<FormAppoint />
|
||||
<p className="term-text">
|
||||
Already using Deski? <Link href="/login">Sign in.</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .row */}
|
||||
</div>
|
||||
{/* End .container */}
|
||||
|
||||
<div className="partner-slider-two mt-130 md-mt-100">
|
||||
<div className="container">
|
||||
<p>
|
||||
Simplified scheduling for more than <span>200,000,000</span>{" "}
|
||||
meetings
|
||||
</p>
|
||||
<div className="partnerSliderTwo">
|
||||
<BrandFour />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.partner-slider-two */}
|
||||
</div>
|
||||
// /.hero-banner-nine
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroBannerNine;
|
||||
@@ -0,0 +1,51 @@
|
||||
'use client'
|
||||
|
||||
import React from "react";
|
||||
import FormDemo from "../../components/form/FormDemo";
|
||||
import BrandFour from "../brand/BrandFour";
|
||||
import Image from "next/image";
|
||||
const HeroBannerSeven = () => {
|
||||
return (
|
||||
<div className="hero-banner-seven lg-container">
|
||||
<div className="container">
|
||||
<div className="illustration-container">
|
||||
<Image width="773" height="543" src="/images/assets/ils_20.svg" alt="ils" />
|
||||
</div>
|
||||
{/* End .illustration-container */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<h1 className="hero-heading">
|
||||
<span>Capture</span> Idea & find it later.
|
||||
</h1>
|
||||
<p className="hero-sub-heading">
|
||||
Deski delivered blazing fast, striking soludtion
|
||||
</p>
|
||||
<FormDemo />
|
||||
<p className="term-text">
|
||||
For teams & individuals — web, mobile, Mac, Windows
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .row */}
|
||||
</div>
|
||||
{/* End .container */}
|
||||
|
||||
<div className="partner-slider-two mt-130 md-mt-80">
|
||||
<div className="container">
|
||||
<p className="text-center">
|
||||
Over <span>32K+</span> software businesses growing with Deski.
|
||||
</p>
|
||||
<div className="partnerSliderTwo">
|
||||
<BrandFour />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .partner-slider-two */}
|
||||
|
||||
{/* /.partner-slider-two */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroBannerSeven;
|
||||
@@ -0,0 +1,72 @@
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
import ModalVideo from "react-modal-video";
|
||||
|
||||
const HeroBannerSix = () => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-xl-6 col-lg-6">
|
||||
<h1
|
||||
className="font-recoleta hero-heading"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
Build your Next <span>Product</span> with Deski.
|
||||
</h1>
|
||||
<p
|
||||
className="hero-sub-heading"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
Deski delivered blazing fast, striking soludtion
|
||||
</p>
|
||||
<div className="d-sm-flex align-items-center button-group">
|
||||
<div
|
||||
className="d-flex align-items-center video-button fancybox order-sm-last"
|
||||
onClick={() => setOpen(true)}
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="150"
|
||||
>
|
||||
<Image width="19" height="19"
|
||||
src="/images/icon/play-circle.svg"
|
||||
alt="icon"
|
||||
className="icon"
|
||||
/>
|
||||
<span>See Intro Video</span>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
className="d-flex align-items-center ios-button gr-bg-one hover-reverse-gr-bg-one order-sm-first"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay="200"
|
||||
>
|
||||
<Image width="25" height="32" src="/images/icon/apple.svg" alt="icon" className="icon" />
|
||||
<div>
|
||||
<span>Download on the</span>
|
||||
<strong>App store</strong>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
{/* End .row */}
|
||||
<ModalVideo
|
||||
channel="youtube"
|
||||
autoplay
|
||||
isOpen={isOpen}
|
||||
videoId="FDaF8_5dzzk"
|
||||
onClose={() => setOpen(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroBannerSix;
|
||||
@@ -0,0 +1,86 @@
|
||||
import React from "react";
|
||||
import FormDoc from "../form/FormDoc";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
const HeroBannerThree = () => {
|
||||
return (
|
||||
<div className="hero-banner-three">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-9 col-lg-11 col-md-8 m-auto">
|
||||
<h1 className="font-rubik">Doc software you looking for.</h1>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-xl-8 col-lg-9 m-auto">
|
||||
<p className="sub-text font-rubik">
|
||||
With deski Docs, you can write, edit, and collaborate wherever you
|
||||
are with 7 day trial
|
||||
</p>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
{/* End .row */}
|
||||
|
||||
<div className="search-filter-form">
|
||||
<FormDoc />
|
||||
</div>
|
||||
{/* End search-filter-from */}
|
||||
|
||||
<p className="sing-in-call">
|
||||
Already using deski?{" "}
|
||||
<Link href="/login" className="font-rubik">
|
||||
Sign in.
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
|
||||
<Image width="1174" height="567"
|
||||
src="/images/assets/ils_09.svg"
|
||||
alt="illustration"
|
||||
className="illustration"
|
||||
/>
|
||||
</div>
|
||||
{/* /.container */}
|
||||
|
||||
<Image width={32} height={33} src="/images/shape/68.svg" alt="shape" className="shapes shape-one" />
|
||||
<Image width={24} height={34} src="/images/shape/69.svg" alt="shape" className="shapes shape-two" />
|
||||
<Image width="26" height="33"
|
||||
src="/images/shape/70.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-three"
|
||||
/>
|
||||
<Image width="21" height="21"
|
||||
src="/images/shape/71.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-four"
|
||||
/>
|
||||
<Image width="248" height="61"
|
||||
src="/images/shape/72.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-five"
|
||||
/>
|
||||
<Image width="224" height="55" src="/images/shape/73.svg" alt="shape" className="shapes shape-six" />
|
||||
<Image width="33" height="8"
|
||||
src="/images/shape/74.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-seven"
|
||||
/>
|
||||
<Image width="22" height="23"
|
||||
src="/images/shape/75.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-eight"
|
||||
/>
|
||||
<Image width="19" height="29"
|
||||
src="/images/shape/76.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-nine"
|
||||
/>
|
||||
<Image width="49" height="50" src="/images/shape/77.svg" alt="shape" className="shapes shape-ten" />
|
||||
</div>
|
||||
// End hero-banner-three
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroBannerThree;
|
||||
@@ -0,0 +1,96 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
const HeroBannerTwelve = () => {
|
||||
return (
|
||||
<div className="hero-banner-twelve lg-container" id="home">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-11 col-lg-12 col-md-10 m-auto text-center">
|
||||
<h1 className="hero-heading font-gordita" data-aos="fade-up">
|
||||
Building website{" "}
|
||||
<span style={{ color: "#FF006B" }}>products</span>,{" "}
|
||||
<span style={{ color: "#FEDC00" }}>brands</span> & expereince
|
||||
</h1>
|
||||
<p
|
||||
className="hero-sub-heading"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
Make stunning videos with animation, stock footage, and photos.
|
||||
</p>
|
||||
<div data-aos="fade-up" data-aos-delay="200">
|
||||
<Link href="/signup" className="get-start-btn">
|
||||
Get Started fo free{" "}
|
||||
<i className="fa fa-angle-right ms-1" aria-hidden="true"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="screen-holder" data-aos="fade-up">
|
||||
<Image width={1320} height={750} style={{height:'fit-content'}}
|
||||
src="/images/assets/screen_32.png"
|
||||
alt="screen"
|
||||
className="img-meta"
|
||||
/>
|
||||
<Image width={290} height={242} style={{height:'fit-content'}}
|
||||
src="/images/assets/screen_33.png"
|
||||
alt="screen"
|
||||
className="shapes screen-one"
|
||||
/>
|
||||
<Image width={274} height={335} style={{height:'fit-content'}}
|
||||
src="/images/assets/screen_34.png"
|
||||
alt="screen"
|
||||
className="shapes screen-two"
|
||||
/>
|
||||
<Image width="311" height="341"
|
||||
src="/images/shape/230.svg"
|
||||
alt="screen"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width="170" height="170"
|
||||
src="/images/shape/231.svg"
|
||||
alt="screen"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
{/* </div> <!-- /.screen-holder --> */}
|
||||
</div>
|
||||
<Image width="13" height="12"
|
||||
src="/images/shape/232.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-three"
|
||||
/>
|
||||
<Image width="17" height="20"
|
||||
src="/images/shape/233.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-four"
|
||||
/>
|
||||
<Image width="13" height="16"
|
||||
src="/images/shape/234.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-five"
|
||||
/>
|
||||
<Image width="14" height="14"
|
||||
src="/images/shape/235.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-six"
|
||||
/>
|
||||
<Image width="36" height="30"
|
||||
src="/images/shape/236.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-seven"
|
||||
/>
|
||||
<Image width="13" height="12"
|
||||
src="/images/shape/232.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-eight"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
// /.hero-banner-twelve
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroBannerTwelve;
|
||||
@@ -0,0 +1,101 @@
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import Brand from "../brand/Brand";
|
||||
import Image from "next/image";
|
||||
const HeroBannerTwo = () => {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
return (
|
||||
<div className="hero-banner-two">
|
||||
<div className="container">
|
||||
<div className="row align-items-start justify-content-between">
|
||||
<div className="col-lg-6 order-lg-last">
|
||||
<div className="illustration-holder">
|
||||
<Image width={655} height={644}
|
||||
style={{height:'fit-content'}}
|
||||
src="/images/assets/ils-01.png"
|
||||
alt="shape"
|
||||
className="illustration_01"
|
||||
/>
|
||||
<Image width={370} height={191}
|
||||
style={{height:'fit-content'}}
|
||||
src="/images/assets/ils-01.1.png"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width={390} height={212}
|
||||
style={{height:'fit-content'}}
|
||||
src="/images/assets/ils-01.2.png"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
<Image width={380} height={185}
|
||||
style={{height:'fit-content'}}
|
||||
src="/images/assets/ils-01.3.png"
|
||||
alt="shape"
|
||||
className="shapes shape-three"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-xl-5 col-lg-6 order-lg-first">
|
||||
<div className="hero-text-wrapper md-mt-50">
|
||||
<h1>
|
||||
<span>
|
||||
Great ticketing
|
||||
<Image width="554" height="43"
|
||||
src="/images/shape/line-shape-1.svg"
|
||||
alt="shape"
|
||||
className="cs-screen"
|
||||
/>
|
||||
</span>
|
||||
system for your customer.
|
||||
</h1>
|
||||
<p className="sub-text">
|
||||
For hassale free event, we are here to help you by creating
|
||||
online ticket.
|
||||
</p>
|
||||
<form onClick={handleSubmit}>
|
||||
<input type="email" placeholder="Enter your email" />
|
||||
<button>Get Started</button>
|
||||
</form>
|
||||
<ul className="list-item d-flex mt-20">
|
||||
<li>Live chat</li>
|
||||
<li>Ticketing</li>
|
||||
<li>14 days free trial</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* /.hero-text-wrapper */}
|
||||
</div>
|
||||
</div>
|
||||
{/* /.row */}
|
||||
</div>
|
||||
{/* /.container */}
|
||||
|
||||
<div className="mt-65 md-mt-50 trusted-companies">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-12">
|
||||
<p>
|
||||
Over <span>13,000+ Client</span> all over the world.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="companies-logo-slider">
|
||||
<Brand />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .row */}
|
||||
</div>
|
||||
</div>
|
||||
{/* /.trusted-companies */}
|
||||
</div>
|
||||
// End .hero-banner-two
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroBannerTwo;
|
||||
Reference in New Issue
Block a user