CHIEFSOFT\ameye
518 lines
19 KiB
React
518 lines
19 KiB
React
|
||
|
||
|
||
import React from "react";
|
||
|
||
import HeaderLandingMobileApp from "../../../components/header/landing/HeaderLandingMobileApp";
|
||
import MobileAppPortfolio from "../../../components/portfolio/MobileAppPortfolio";
|
||
import MobileAppScreenSlider from "../../../components/portfolio/MobileAppScreenSlider";
|
||
import TestimonialThree from "../../../components/testimonial/TestimonialThree";
|
||
import BrandThree from "../../../components/brand/BrandThree";
|
||
import FooterSeven from "../../../components/footer/FooterSeven";
|
||
import CopyRightThree from "../../../components/footer/CopyRightThree";
|
||
import FancyFeatureTewentyThree from "../../../components/features/FancyFeatureTewentyThree";
|
||
import PricingSeven from "../../../components/pricing/PricingSeven";
|
||
import Image from "next/image";
|
||
import dynamic from "next/dynamic";
|
||
const Scrollspy = dynamic(() => import('@/components/scrollpy/Scrollphy'), {
|
||
ssr: false,
|
||
|
||
})
|
||
|
||
export const metadata = {
|
||
title: ' Mobile App Landing || Deski-Saas & Software Nextjs Template',
|
||
description: `Unleash the full potential of your software projects with our SaaS-focused Next.js template. Create engaging blogs, showcase your talented team, set up an online shop, provide helpful FAQs, and offer exceptional services with our feature-rich solution. Elevate your SaaS and software development with ease and drive growth. Try it now and take your projects to new heights.`,
|
||
}
|
||
|
||
|
||
const MobileAppLanding = () => {
|
||
return (
|
||
<div className="main-page-wrapper font-gordita">
|
||
|
||
{/* End Page SEO Content */}
|
||
|
||
<HeaderLandingMobileApp />
|
||
{/* End Mobile App Landing Header */}
|
||
|
||
{/* =============================================
|
||
Theme Hero Banner
|
||
============================================== */}
|
||
<Scrollspy>
|
||
<div className="hero-banner-ten" id="home">
|
||
<div className="container">
|
||
<div className="row">
|
||
<div className="col-xl-9 col-lg-11 col-md-8 m-auto">
|
||
<h1
|
||
className="hero-heading"
|
||
data-aos="fade-up"
|
||
data-aos-duration="1200"
|
||
>
|
||
Build your Product by Deski 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 solution
|
||
</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="icon" 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="350"
|
||
>
|
||
<Image width="23" height="29"
|
||
src="/images/icon/playstore.svg"
|
||
alt="icon"
|
||
className="icon"
|
||
/>
|
||
<div>
|
||
<span>Get it on</span>
|
||
<strong>Google play</strong>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
{/* End .container */}
|
||
|
||
<div className="icon-box-one">
|
||
<Image width={29} height={27} src="/images/logo/logo-39.png" alt="icon" />
|
||
</div>
|
||
<div className="icon-box-two">
|
||
<Image width={42} height={36} src="/images/logo/logo-40.png" alt="icon" />
|
||
</div>
|
||
<div className="icon-box-three">
|
||
<Image width={30} height={30} src="/images/logo/logo-41.png" alt="icon" />
|
||
</div>
|
||
<div className="icon-box-four">
|
||
<Image width={36} height={36} src="/images/logo/logo-42.png" alt="icon" />
|
||
</div>
|
||
<div className="icon-box-five">
|
||
<Image width={35} height={35} src="/images/logo/logo-43.png" alt="icon" />
|
||
</div>
|
||
<div className="icon-box-six">
|
||
<Image width={80} height={53} src="/images/logo/logo-44.png" alt="icon" />
|
||
</div>
|
||
<div className="icon-box-seven">
|
||
<Image width={26} height={27} src="/images/logo/logo-45.png" alt="icon" />
|
||
</div>
|
||
<div className="icon-box-eight">
|
||
<Image width={30} height={30} src="/images/logo/logo-46.png" alt="icon" />
|
||
</div>
|
||
</div>
|
||
{/* /.hero-banner-ten */}
|
||
|
||
{/* =============================================
|
||
App Screen Preview
|
||
============================================== */}
|
||
<div className="app-screen-preview-one">
|
||
<div className="container">
|
||
<div className="app-preview-slider-one arrow-middle-center ">
|
||
<MobileAppPortfolio />
|
||
</div>
|
||
</div>
|
||
{/* End .container */}
|
||
|
||
<Image width="997" height="997"
|
||
src="/images/shape/bg5.svg"
|
||
alt="shape"
|
||
className="shapes round-bg"
|
||
/>
|
||
<Image width="24" height="14"
|
||
src="/images/shape/216.svg"
|
||
alt="shape"
|
||
className="shapes shape-one"
|
||
/>
|
||
<Image width="12" height="12"
|
||
src="/images/shape/217.svg"
|
||
alt="shape"
|
||
className="shapes shape-two"
|
||
/>
|
||
<Image width="13" height="16"
|
||
src="/images/shape/218.svg"
|
||
alt="shape"
|
||
className="shapes shape-three"
|
||
/>
|
||
<Image width="36" height="30"
|
||
src="/images/shape/219.svg"
|
||
alt="shape"
|
||
className="shapes shape-four"
|
||
/>
|
||
</div>
|
||
{/* /.app-screen-preview-one */}
|
||
|
||
{/* =============================================
|
||
Fancy Feature Twenty Two
|
||
============================================== */}
|
||
<div
|
||
className="fancy-feature-twentyTwo mpt-200 pt-130 md-mt-80 sm-pt-100"
|
||
id="product"
|
||
>
|
||
<div className="container">
|
||
<div className="title-style-ten mb-40 md-mb-20">
|
||
<div className="row align-items-center">
|
||
<div className="col-lg-7">
|
||
<h2>The Product we work with.</h2>
|
||
</div>
|
||
<div className="col-lg-5">
|
||
<p className="md-pt-20">
|
||
Commonly used in the graphic, print& publishing industris for
|
||
previewing visual mockups.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="row justify-content-center">
|
||
<FancyFeatureTewentyThree />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* /.fancy-feature-twentyTwo */}
|
||
|
||
{/* =============================================
|
||
Fancy Feature Twenty Five
|
||
============================================== */}
|
||
<div
|
||
className="fancy-feature-twentyFive lg-container pt-200 md-pt-100"
|
||
id="features"
|
||
>
|
||
<div className="container">
|
||
<div className="block-style-twentyFive">
|
||
<div className="row align-items-center">
|
||
<div
|
||
className="col-xl-7 col-lg-6 col-md-10 m-auto"
|
||
data-aos="fade-right"
|
||
data-aos-duration="1200"
|
||
>
|
||
<div className="screen-container">
|
||
<Image width={727} height={615} style={{height:'fit-content'}} src="/images/assets/screen_24.png" alt="screen" />
|
||
</div>
|
||
{/* /.screen-container */}
|
||
</div>
|
||
<div
|
||
className="col-xl-5 col-lg-6"
|
||
data-aos="fade-left"
|
||
data-aos-duration="1200"
|
||
>
|
||
<div className="text-wrapper ps-xl-5">
|
||
<h6>
|
||
Over <span>150,000+ client</span>
|
||
</h6>
|
||
<h3 className="title">Award winning application.</h3>
|
||
<p>
|
||
Commonly used in the graphic, prit quis & publishing indust
|
||
for previewing lorem visual mockups.
|
||
</p>
|
||
</div>
|
||
{/* /.text-wrapper */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* /.block-style-twentyFive */}
|
||
|
||
<div className="block-style-twentyFive mt-200 md-mt-100">
|
||
<div className="row align-items-center">
|
||
<div
|
||
className="col-xl-7 col-lg-6 col-md-10 m-auto text-center text-lg-right order-lg-last"
|
||
data-aos="fade-left"
|
||
data-aos-duration="1200"
|
||
>
|
||
<div className="screen-container">
|
||
<Image width="618" height="618"
|
||
src="/images/shape/bg6.svg"
|
||
alt="shape"
|
||
className="ms-auto bg-round-shape"
|
||
/>
|
||
<div className="block-content">
|
||
<div className="row align-items-center">
|
||
<div className="col-sm-6">
|
||
<div className="feature-meta">
|
||
<div className="icon d-flex align-items-end">
|
||
<Image width="38" height="38" src="/images/icon/136.svg" alt="image" />
|
||
</div>
|
||
<h4>
|
||
Friendly <br /> user interface
|
||
</h4>
|
||
</div>
|
||
{/* /.feature-meta */}
|
||
</div>
|
||
{/* End .col */}
|
||
|
||
<div className="col-sm-6">
|
||
<div className="feature-meta">
|
||
<div className="icon d-flex align-items-end">
|
||
<Image width="44" height="40" src="/images/icon/137.svg" alt="image" />
|
||
</div>
|
||
<h4>
|
||
SEO <br />
|
||
Optimization
|
||
</h4>
|
||
</div>
|
||
{/* /.feature-meta */}
|
||
<div className="feature-meta">
|
||
<div className="icon d-flex align-items-end">
|
||
<Image width="46" height="46" src="/images/icon/138.svg" alt="image" />
|
||
</div>
|
||
<h4>
|
||
Quality & fast <br />
|
||
support
|
||
</h4>
|
||
</div>
|
||
{/* /.feature-meta */}
|
||
</div>
|
||
{/* End .col */}
|
||
</div>
|
||
</div>
|
||
{/* /.block-content */}
|
||
</div>
|
||
{/* /.screen-container */}
|
||
</div>
|
||
<div
|
||
className="col-xl-5 col-lg-6"
|
||
data-aos="fade-right"
|
||
data-aos-duration="1200"
|
||
>
|
||
<div className="text-wrapper order-lg-first">
|
||
<h6>
|
||
<span>Best Solution</span>
|
||
</h6>
|
||
<h3 className="title">Why you choose desk app?</h3>
|
||
<p>Things go wrong have We’ve understand.</p>
|
||
<ul>
|
||
<li>Amazing communication.</li>
|
||
<li>Best trendinf designing experience.</li>
|
||
<li>Email & Live chat.</li>
|
||
</ul>
|
||
</div>
|
||
{/* /.text-wrapper */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* /.block-style-twentyFive */}
|
||
</div>
|
||
</div>
|
||
{/* /.fancy-feature-twentyFive */}
|
||
|
||
{/* =============================================
|
||
App Screen Preview
|
||
============================================== */}
|
||
<div className="app-screen-preview-two mt-200 md-mt-130">
|
||
<div className="container">
|
||
<div className="title-style-eleven text-center mb-120 md-mb-70">
|
||
<h2>App Screenshot</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="app-preview-slider-two arrow-none">
|
||
<MobileAppScreenSlider />
|
||
</div>
|
||
{/* /.app-preview-slider-two */}
|
||
</div>
|
||
{/* /.app-screen-preview-two */}
|
||
|
||
{/* =====================================================
|
||
Pricing Section Seven
|
||
===================================================== */}
|
||
<div className="pricing-section-seven pt-200 md-pt-130" id="pricing">
|
||
<div className="container">
|
||
<div className="row">
|
||
<div className="col-xl-9 col-lg-10 col-md-10 m-auto">
|
||
<div className="title-style-eleven text-center mb-100 md-mb-70">
|
||
<h2>No hidden charge, Choose your plan.</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pricing-table-area-seven">
|
||
<div className="row align-items-center justify-content-center">
|
||
<PricingSeven />
|
||
</div>
|
||
</div>
|
||
{/* /.pricing-table-area-seven */}
|
||
</div>
|
||
</div>
|
||
{/* /.pricing-section-seven */}
|
||
|
||
{/* =====================================================
|
||
Client Feedback Slider Seven
|
||
===================================================== */}
|
||
<div
|
||
className="client-feedback-slider-seven mt-250 md-mt-100"
|
||
id="feedback"
|
||
>
|
||
<div className="inner-container">
|
||
<div className="container">
|
||
<div className="row">
|
||
<div className="col-lg-8 m-auto">
|
||
<Image width="86" height="85" src="/images/icon/143.svg" alt="icon" className="m-auto" />
|
||
<div className="title-style-eleven text-center mt-30">
|
||
<h2>Check what’s our client say about us.</h2>
|
||
</div>
|
||
{/* /.title-style-eleven */}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="row">
|
||
<div className="col-xl-8 col-lg-10 m-auto">
|
||
<div className="clientSliderFive mt-80 md-mt-50">
|
||
<TestimonialThree />
|
||
</div>
|
||
<Image width="26" height="26"
|
||
src="/images/shape/156.svg"
|
||
alt="shape"
|
||
className="shapes shape-one"
|
||
/>
|
||
<Image width="16" height="16"
|
||
src="/images/shape/157.svg"
|
||
alt="shape"
|
||
className="shapes shape-two"
|
||
/>
|
||
<Image width="14" height="14"
|
||
src="/images/shape/158.svg"
|
||
alt="shape"
|
||
className="shapes shape-three"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* /.inner-container */}
|
||
<Image width="1573" height="1246" src="/images/shape/bg7.svg" alt="shape" className="bg-image" />
|
||
</div>
|
||
{/* /.client-feedback-slider-six */}
|
||
|
||
{/* =====================================================
|
||
Useable Tools
|
||
===================================================== */}
|
||
<div className="useable-tools-section-three mt-200 mb-200 md-mt-120 md-mb-80">
|
||
<div className="container">
|
||
<div className="row">
|
||
<div className="col-lg-6">
|
||
<div className="title-style-ten">
|
||
<h6>Our Partners</h6>
|
||
<h2>Who is using deski.</h2>
|
||
</div>
|
||
<p className="sub-text">
|
||
Share content across apps. Evernote connects with the
|
||
productivity tools you already use, so you can work your way.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* /.container */}
|
||
<div className="logo-wrapper brand-bg-white d-flex flex-wrap justify-content-center align-items-center">
|
||
<BrandThree />
|
||
</div>
|
||
{/* /.logo-wrapper */}
|
||
</div>
|
||
{/* /.useable-tools-section-three */}
|
||
|
||
{/* =====================================================
|
||
Fancy Short Banner Twelve
|
||
===================================================== */}
|
||
<div className="fancy-short-banner-twelve">
|
||
<div className="container">
|
||
<div className="row">
|
||
<div
|
||
className="col-xl-10 col-lg-11 m-auto"
|
||
data-aos="fade-up"
|
||
data-aos-duration="1200"
|
||
>
|
||
<div className="title-style-ten text-center">
|
||
<h2>Love our deski application? Download now!</h2>
|
||
<p className="pt-25 pb-45">
|
||
Try it risk free — we don’t charge any cancellation fees
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div data-aos="fade-up" data-aos-duration="1200" data-aos-delay="150">
|
||
<div className="d-sm-flex align-items-center justify-content-center button-group">
|
||
<a href="#" className="d-flex align-items-center ios-button">
|
||
<Image width="24" height="32"
|
||
src="/images/icon/apple-black.svg"
|
||
alt="icon"
|
||
className="icon"
|
||
/>
|
||
<div>
|
||
<span>Download on the</span>
|
||
<strong>App store</strong>
|
||
</div>
|
||
</a>
|
||
<a href="#" className="d-flex align-items-center windows-button">
|
||
<Image width="23" height="29"
|
||
src="/images/icon/playstore.svg"
|
||
alt="icon"
|
||
className="icon"
|
||
/>
|
||
<div>
|
||
<span>Get it on</span>
|
||
<strong>Google play</strong>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* /.container */}
|
||
<Image width="439" height="618"
|
||
src="/images/shape/220.svg"
|
||
alt="shape"
|
||
className="shapes shape-one"
|
||
/>
|
||
<Image width="387" height="620"
|
||
src="/images/shape/221.svg"
|
||
alt="shape"
|
||
className="shapes shape-two"
|
||
/>
|
||
</div>
|
||
{/* /.fancy-short-banner-twelve */}
|
||
|
||
{/* =====================================================
|
||
Footer Style Seven
|
||
===================================================== */}
|
||
</Scrollspy>
|
||
<footer className="theme-footer-seven mt-120 md-mt-100">
|
||
<div className="lg-container">
|
||
<div className="container inner-btn-black">
|
||
<FooterSeven />
|
||
</div>
|
||
|
||
<div className="container">
|
||
<div className="bottom-footer">
|
||
<CopyRightThree />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* /.lg-container */}
|
||
</footer>
|
||
{/* /.theme-footer-seven */}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default MobileAppLanding;
|
||
|
||
|