first commit
This commit is contained in:
@@ -0,0 +1,81 @@
|
||||
|
||||
'use client'
|
||||
|
||||
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
|
||||
export default function FancyBanner() {
|
||||
// For header select menu
|
||||
const [selected, setSelected] = useState('')
|
||||
const [click1, setClick1] = useState(false);
|
||||
const handleClick1 = (elm) => {setClick1(!click1);
|
||||
setSelected(elm)}
|
||||
|
||||
return (
|
||||
<div className="fancy-short-banner-nine mt-170 md-mt-80">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div
|
||||
className="col-xl-8 col-lg-11 m-auto"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
<div className="title-style-seven text-center">
|
||||
<h2>200k+ Customers have our deski.Try it now!</h2>
|
||||
<p>Try it risk free — we don’t charge cancellation fees.</p>
|
||||
</div>
|
||||
{/* /.title-style-six */}
|
||||
</div>
|
||||
</div>
|
||||
{/* End .row */}
|
||||
<div data-aos="fade-up" data-aos-duration="1200" data-aos-delay="150">
|
||||
<div
|
||||
className={
|
||||
click1 ? "dropdown download-btn show" : "dropdown download-btn"
|
||||
}
|
||||
>
|
||||
<button
|
||||
className="dropdown-toggle"
|
||||
onClick={()=>setClick1(pre=>!pre)}
|
||||
type="button"
|
||||
>
|
||||
{selected || ' Get Deski app'}
|
||||
|
||||
</button>
|
||||
<div className={click1 ? "dropdown-menu show" : "dropdown-menu"}>
|
||||
<div
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
style={{cursor:'pointer'}}
|
||||
onClick={()=>handleClick1('IOS & Android')}
|
||||
>
|
||||
<Image width="22" height="22" src="/images/icon/103.svg" alt="icon" />
|
||||
<span>IOS & Android</span>
|
||||
</div>
|
||||
<div
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
style={{cursor:'pointer'}}
|
||||
|
||||
onClick={()=>handleClick1('Mac & Windows')}
|
||||
>
|
||||
<Image width="20" height="20" src="/images/icon/104.svg" alt="icon" />
|
||||
<span>Mac & Windows</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.container */}
|
||||
<Image width="344" height="503"
|
||||
src="/images/shape/177.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width="333" height="555"
|
||||
src="/images/shape/178.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
'use client'
|
||||
|
||||
import Tilt from "react-parallax-tilt";
|
||||
import React from 'react'
|
||||
import Image from "next/image";
|
||||
|
||||
export default function FancyFeature() {
|
||||
return (
|
||||
<div className="fancy-feature-fourteen mt-250 pt-80 md-mt-80">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-6 col-lg-7 col-md-8">
|
||||
<div className="title-style-six">
|
||||
<h6 style={{ color: "#FF2759", fontSize: "15" }}>
|
||||
Integrategration
|
||||
</h6>
|
||||
<h2>
|
||||
Connect App <br /> with the <span>Software</span> you use.
|
||||
</h2>
|
||||
<p className="text-xs pe-5 me-5">
|
||||
Lorem ipsum dolor on adipisci elit io quis sed do eiusmod tem.
|
||||
</p>
|
||||
</div>
|
||||
{/* /.title-style-six */}
|
||||
</div>
|
||||
|
||||
<div className="col-lg-5 ms-auto">
|
||||
<div className="right-side md-mt-60">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<Tilt>
|
||||
<div className="logo-meta lg d-flex align-items-center justify-content-center ">
|
||||
<Image width="142" height="54" src="/images/logo/logo-17.svg" alt="logo" />
|
||||
</div>
|
||||
</Tilt>
|
||||
<Tilt>
|
||||
<div className="logo-meta d-flex align-items-center justify-content-center ">
|
||||
<Image width="146" height="37" src="/images/logo/logo-18.svg" alt="logo" />
|
||||
</div>
|
||||
</Tilt>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-md-6">
|
||||
<Tilt>
|
||||
<div className="logo-meta mt-40 d-flex align-items-center justify-content-center ">
|
||||
<Image width="162" height="50" src="/images/logo/logo-19.svg" alt="logo" />
|
||||
</div>
|
||||
</Tilt>
|
||||
<Tilt>
|
||||
<div className="logo-meta lg d-flex align-items-center justify-content-center ">
|
||||
<Image width="140" height="76" src="/images/logo/logo-20.svg" alt="logo" />
|
||||
<Image width="98" height="83"
|
||||
src="/images/shape/154.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
</div>
|
||||
</Tilt>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
</div>
|
||||
{/* /.right-side */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
|
||||
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
|
||||
|
||||
|
||||
|
||||
export default function FancyFeaturesTwo() {
|
||||
const [click1, setClick1] = useState(false);
|
||||
const [selected, setSelected] = useState('')
|
||||
const handleClick1 = (elm) => {setClick1(!click1);
|
||||
setSelected(elm)}
|
||||
|
||||
return (
|
||||
<div className="fancy-short-banner-eight mt-170 md-mt-80">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div
|
||||
className="col-xl-8 col-lg-11 m-auto"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
<div className="title-style-seven text-center">
|
||||
<h2>
|
||||
<span>200k+</span> Customers have our deski.Try it now!
|
||||
</h2>
|
||||
<p>Try it risk free — we don’t charge cancellation fees.</p>
|
||||
</div>
|
||||
{/* /.title-style-six */}
|
||||
</div>
|
||||
</div>
|
||||
<div data-aos="fade-up" data-aos-duration="1200" data-aos-delay="150">
|
||||
<div
|
||||
className={
|
||||
click1 ? "dropdown download-btn show" : "dropdown download-btn"
|
||||
}
|
||||
>
|
||||
<button
|
||||
className="dropdown-toggle"
|
||||
onClick={()=>setClick1(pre=>!pre)}
|
||||
type="button"
|
||||
>
|
||||
{selected || ' Get Deski app'}
|
||||
</button>
|
||||
<div className={click1 ? "dropdown-menu show" : "dropdown-menu"}>
|
||||
<div
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
style={{cursor:'pointer'}}
|
||||
onClick={()=>handleClick1('IOS & Android')}
|
||||
>
|
||||
<Image width="22" height="22" src="/images/icon/103.svg" alt="icon" />
|
||||
<span>IOS & Android</span>
|
||||
</div>
|
||||
<div
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
style={{cursor:'pointer'}}
|
||||
onClick={()=>handleClick1('Mac & Windows')}
|
||||
>
|
||||
<Image width="20" height="20" src="/images/icon/104.svg" alt="icon" />
|
||||
<span>Mac & Windows</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.container */}
|
||||
<Image width="78" height="131"
|
||||
src="/images/shape/171.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width="78" height="131"
|
||||
src="/images/shape/172.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import Tilt from "react-parallax-tilt";
|
||||
import React from 'react'
|
||||
import Image from "next/image";
|
||||
|
||||
export default function FancyShortBanner() {
|
||||
return (
|
||||
<div className="fancy-short-banner-seven mt-250 md-mt-100">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-8 col-lg-11 m-auto">
|
||||
<div className="title-style-six text-center">
|
||||
<h2>
|
||||
love our product? <span>Save $20</span> by grab it today.
|
||||
</h2>
|
||||
</div>
|
||||
{/* /.title-style-six */}
|
||||
<a
|
||||
href="#"
|
||||
className="d-flex align-items-center ios-button gr-bg-one hover-reverse-gr-bg-one"
|
||||
>
|
||||
<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>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
{/* End .row */}
|
||||
<Tilt>
|
||||
<div className="screen-meta">
|
||||
<Image width={1160} height={340} style={{height:'fit-content'}}
|
||||
src="/images/assets/screen_10.png"
|
||||
alt="screen"
|
||||
className="m-auto"
|
||||
/>
|
||||
<Image width="104" height="89"
|
||||
src="/images/shape/165.svg"
|
||||
alt="screen"
|
||||
className="shapes shape-four"
|
||||
/>
|
||||
<Image width={324} height={324}
|
||||
src="/images/shape/166.png"
|
||||
alt="screen"
|
||||
className="shapes shape-five"
|
||||
/>
|
||||
</div>
|
||||
</Tilt>
|
||||
</div>
|
||||
{/* /.container */}
|
||||
|
||||
<Image width="12" height="12"
|
||||
src="/images/shape/162.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width="15" height="15"
|
||||
src="/images/shape/163.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
<Image width="15" height="15"
|
||||
src="/images/shape/164.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-three"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
|
||||
export default function FancybBannerTen() {
|
||||
// For header select menu
|
||||
const [selected, setSelected] = useState('')
|
||||
const [click1, setClick1] = useState(false);
|
||||
const handleClick1 = (elm) => {setClick1(!click1);
|
||||
setSelected(elm)}
|
||||
return (
|
||||
<div className="fancy-short-banner-ten mt-170 md-mt-80">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div
|
||||
className="col-xl-8 col-lg-11 m-auto"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
>
|
||||
<div className="text-center">
|
||||
<h2>Try Deski Free</h2>
|
||||
<p>
|
||||
After your 14-day trial of our Professional plan, enjoy the
|
||||
Free version of Calendly – forever.
|
||||
</p>
|
||||
</div>
|
||||
{/* /.title-style-six */}
|
||||
</div>
|
||||
</div>
|
||||
{/* End .row */}
|
||||
<div data-aos="fade-up" data-aos-duration="1200" data-aos-delay="150">
|
||||
<div
|
||||
className={
|
||||
click1 ? "dropdown download-btn show" : "dropdown download-btn"
|
||||
}
|
||||
>
|
||||
<button
|
||||
className="dropdown-toggle"
|
||||
onClick={()=>setClick1(pre=>!pre)}
|
||||
type="button"
|
||||
>
|
||||
{selected || ' Get Deski app'}
|
||||
|
||||
</button>
|
||||
<div className={click1 ? "dropdown-menu show" : "dropdown-menu"}>
|
||||
<div
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
style={{cursor:'pointer'}}
|
||||
onClick={()=>handleClick1('IOS & Android')}
|
||||
>
|
||||
<Image width="22" height="22" src="/images/icon/103.svg" alt="icon" />
|
||||
<span>IOS & Android</span>
|
||||
</div>
|
||||
<div
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
style={{cursor:'pointer'}}
|
||||
|
||||
onClick={()=>handleClick1('Mac & Windows')}
|
||||
>
|
||||
<Image width="20" height="20" src="/images/icon/104.svg" alt="icon" />
|
||||
<span>Mac & Windows</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End dropdown */}
|
||||
<div className="info-text">
|
||||
No Credit Card Required. Cancel Anytime
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.container */}
|
||||
<Image width="321" height="471"
|
||||
src="/images/shape/210.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width="311" height="445"
|
||||
src="/images/shape/211.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user