import React from "react";
import Link from "next/link";

import Header from "../../../components/header/Header";
import FaqClassic from "../../../components/faq/FaqClassicTwo";
import SocialTwo from "../../../components/social/SocialTwo";
import CounterOne from "../../../components/counter/CounterOne";
import CallToActionFour from "../../../components/call-to-action/CallToActionFour";
import Footer from "../../../components/footer/Footer";
import CopyRight from "../../../components/footer/CopyRight";
import BlockMetaData from "../../../components/fancy-text-block/BlockMetaData";
import FormProjectManagement from "@/components/form/FormProjectManagement";
import Image from "next/image";



export const metadata = {
    title: 'Project Management || 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 ProjectManagement = () => {
  

  return (
    <div className="main-page-wrapper">
    
      {/* End Page SEO Content */}

      <Header />
      {/* End Header */}

      {/* 
     =============================================
			Hero Banner One
		============================================== */}
      <div className="hero-banner-one">
        <div className="hero-upper-container">
          <div className="icon-box-one">
            <Image width={29} height={27} src="/images/logo/01.png" alt="logo" />
          </div>
          <div className="icon-box-two">
            <Image width={42} height={36}  src="/images/logo/02.png" alt="logo" />
          </div>
          <div className="icon-box-three">
            <Image width={30} height={30}  src="/images/logo/03.png" alt="logo" />
          </div>
          <div className="icon-box-four">
            <Image width={40} height={40}  src="/images/logo/04.png" alt="logo" />
          </div>
          <div className="icon-box-five">
            <Image width={35} height={35}  src="/images/logo/05.png" alt="logo" />
          </div>
          <div className="icon-box-six">
            <Image width={54} height={53}  src="/images/logo/06.png" alt="logo" />
          </div>
          <div className="icon-box-seven">
            <Image width={26} height={26}  src="/images/logo/07.png" alt="logo" />
          </div>
          <div className="icon-box-eight">
            <Image width={30} height={30}  src="/images/logo/08.png" alt="logo" />
          </div>

          <div className="bubble-one"></div>
          <div className="bubble-two"></div>
          <div className="bubble-three"></div>
          <div className="bubble-four"></div>
          <div className="bubble-five"></div>
          <div className="bubble-six"></div>
          {/* End all bubble images */}

          <div className="container">
            <div className="row">
              <div className="col-xl-8 col-lg-10 m-auto">
                <h1 className="font-rubik hero-heading">
                  Get your work done with <span>deski</span>
                </h1>
                <p className="hero-sub-heading">
                  The first project management platform that brings everything
                  together
                </p>
              </div>
              {/* End .col */}
            </div>
            {/* End row */}

           <FormProjectManagement/>
       

            <p className="sing-in-call">
              Already using deski? <Link        href="/login">Sign in.</Link>
            </p>
          </div>
          {/* End .container */}
        </div>
        {/* /.hero-upper-container */}
      </div>
      {/* /.hero-banner-one */}

      {/* 
     =============================================
				Fancy Feature One
		============================================== */}
      <div className="fancy-feature-one pb-150 md-pb-80">
        <div className="text-center">
          <div className="feature-img-area">
            <Image width={1032} height={552} style={{height:'fit-content'}}     src="/images/assets/feature-img-01.png" alt="feature" />
            <Image width={591} height={591}   
            style={{height:'fit-content'}} 
              src="/images/assets/feature-img-01-01.png"
              alt="feature"
              className="cs-screen screen-one"
            />
            <Image width={440} height={55} style={{height:'fit-content'}} 
              src="/images/assets/feature-img-01-02.png"
              alt="feature"
              className="cs-screen screen-two"
              data-aos="fade-left"
              data-aos-duration="1200"
            />
            <Image width={374} height={55} style={{height:'fit-content'}} 
              src="/images/assets/feature-img-01-03.png"
              alt="feature"
              className="cs-screen screen-three"
              data-aos="fade-right"
              data-aos-duration="1200"
              data-aos-delay="100"
            />
            <Image width={374} height={55} style={{height:'fit-content'}} 
              src="/images/assets/feature-img-01-04.png"
              alt="feature"
              className="cs-screen screen-four"
              data-aos="fade-right"
              data-aos-duration="1200"
              data-aos-delay="150"
            />
            <Image width={294} height={55} style={{height:'fit-content'}} 
              src="/images/assets/feature-img-01-05.png"
              alt="feature"
              className="cs-screen screen-five"
              data-aos="fade-left"
              data-aos-duration="1200"
              data-aos-delay="200"
            />
          </div>
          {/* /.feature-img-area */}
        </div>
        {/* /.text-center */}

        {/* 
        =============================================
				Fancy Block Style One
		    ============================================== */}
        <div className="block-style-one">
          <div className="container">
            <div className="d-lg-flex align-items-center justify-content-between inner-container">
              <BlockMetaData />
            </div>
          </div>
          {/* /.container */}
        </div>
        {/* /.block-style-one */}
      </div>
      {/* /.fancy-feature-one */}

      {/* 
     =============================================
				Fancy Feature Two
		============================================== */}
      <div className="fancy-feature-two">
        <div className="container">
          <div className="row">
            <div className="col-xl-7 col-lg-7 col-md-9 m-auto">
              <div className="title-style-one text-center mb-190 md-mb-100">
                <h2>Know everything about App features.</h2>
              </div>
              {/* /.title-style-one */}
            </div>
          </div>
        </div>

        <div className="container">
          <div className="row align-items-center block-style-two pb-250 md-pb-90">
            <div className="col-lg-7 col-md-8 m-auto">
              <div data-aos="fade-right" data-aos-duration="1200">
                <div className="img-holder img-holder-one">
                  <div
                    className="cs-screen progress-line-one"
                    data-aos="fade-right"
                    data-aos-duration="1200"
                  ></div>
                  <div
                    className="cs-screen progress-line-two"
                    data-aos="fade-right"
                    data-aos-duration="1200"
                  ></div>
                  <Image width={674} height={604} style={{height:'fit-content'}}     src="/images/assets/feature-img-05.png" alt="feature" />
                  <Image width={821} height={821}
                    src="/images/shape/1.svg"
                    alt="feature"
                    className="cs-screen screen-one"
                  />
                  <Image  width={421} height={421}
                    src="/images/shape/2.svg"
                    alt="feature"
                    className="cs-screen dot-shape"
                  />
                  <div className="bubble-one"></div>
                  <div className="bubble-two"></div>
                  <div className="bubble-three"></div>
                  <div className="bubble-four"></div>
                </div>
                {/* /.img-holder */}
              </div>
            </div>
            {/* End .col */}
            <div className="col-lg-5">
              <div
                className="text-wrapper"
                data-aos="fade-left"
                data-aos-duration="1200"
              >
                <h6 className="font-rubik" style={{ color: "#FF5291" }}>
                  FLEXIBILITY
                </h6>
                <h3 className="font-gilroy-bold">
                  Get instant visibility into all your team work.
                </h3>
                <p>
                  Don’t waste time on tedious manual tasks. Let Automation do it
                  for you. Simplify workflows, reduce errors, and save time for
                  solving more important problems.
                </p>
                <a href="#">Learn about flexibility</a>
              </div>
              {/*  /.text-wrapper */}
            </div>{" "}
            {/* End .col */}
          </div>
          {/* /.block-style-two */}

          <div className="row align-items-center block-style-two pb-250 md-pb-90">
            <div className="col-lg-6 col-md-8 m-auto order-lg-last">
              <div data-aos="fade-left" data-aos-duration="1200">
                <div className="img-holder img-holder-two">
                  <Image width={550} height={616} style={{height:'fit-content'}} src="/images/assets/feature-img-06.png" alt="feature" />
                  <Image width={476} height={260}
                    src="/images/assets/feature-img-06-01.png" style={{height:'fit-content'}} 
                    alt="feature"
                    className="cs-screen screen-one"
                  />
                  <Image width={907} height={916}
                    src="/images/shape/3.svg" style={{height:'fit-content'}} 
                    alt="feature"
                    className="cs-screen screen-two"
                  />
                  <Image width={362} height={362}
                    src="/images/shape/4.svg" style={{height:'fit-content'}} 
                    alt="feature"
                    className="cs-screen dot-shape"
                  />
                  <div className="bubble-one"></div>
                  <div className="bubble-two"></div>
                  <div className="bubble-three"></div>
                  <div className="bubble-four"></div>
                </div>
                {/* /.img-holder */}
              </div>
            </div>{" "}
            {/* End .col */}
            <div className="col-lg-6 order-lg-first">
              <div
                className="text-wrapper ps-5 pe-5"
                data-aos="fade-right"
                data-aos-duration="1200"
              >
                <h6 className="font-rubik" style={{ color: "#AA4CFF" }}>
                  QUICK & FAST
                </h6>
                <h3 className="font-gilroy-bold">Fast App response time</h3>
                <p>
                  deski is 5x as fast to load than other popular tools, quick to
                  configure.
                </p>
                <div className="quote">
                  <blockquote>
                    “Our team really feel great to use the deski app specially
                    their faster load & server speed”
                  </blockquote>
                  <div className="d-flex align-items-center">
                    <Image width={42} height={42} src="/images/media/img_01.png" alt="media" />
                    <div className="info-meta">
                      <h5>Micle Duke, Product Manager</h5>
                      <span className="font-rubik">Uber Inc.</span>
                    </div>
                  </div>
                </div>
                {/*  /.quote */}
              </div>
              {/*  /.text-wrapper */}
            </div>{" "}
            {/* End .col */}
          </div>
          {/* /.block-style-two */}

          <div className="row align-items-center block-style-two pb-170 md-pb-50">
            <div className="col-lg-7 col-md-7 m-auto">
              <div data-aos="fade-right" data-aos-duration="1200">
                <div className="img-holder img-holder-three">
                  <Image width={544} height={526}  style={{height:'fit-content'}}    src="/images/assets/feature-img-07.png" alt="feature" />
                  <Image width={501} height={501}    style={{height:'fit-content'}}    
                    src="/images/assets/feature-img-07-01.png"
                    alt="feature"
                    className="cs-screen screen-one"
                  />
                  <Image width="907" height="916"
                    src="/images/shape/5.svg"  style={{height:'fit-content'}}  
                    alt="feature"
                    className="cs-screen screen-two"
                  />
                  <Image width="362" height="362"
                    src="/images/shape/6.svg"  style={{height:'fit-content'}}  
                    alt="feature"
                    className="cs-screen dot-shape"
                  />
                  <div className="bubble-one"></div>
                  <div className="bubble-two"></div>
                  <div className="bubble-three"></div>
                  <div className="bubble-four"></div>
                </div>
                {/* /.img-holder */}
              </div>
            </div>{" "}
            {/* End .col */}
            <div className="col-lg-5">
              <div
                className="text-wrapper"
                data-aos="fade-left"
                data-aos-duration="1200"
              >
                <h6 className="font-rubik" style={{ color: "#03DDD5" }}>
                  PROJECT STATUS
                </h6>
                <h3 className="font-gilroy-bold">
                  Real time project status monitoring.
                </h3>
                <p>
                  Don’t waste time on tedious manual tasks. Let Automation do it
                  for you. Simplify workflows, reduce errors, and save time for
                  solving more important problems.
                </p>
              </div>
              {/* /.text-wrapper */}
            </div>{" "}
            {/* End .col */}
          </div>
          {/* /.block-style-two */}
        </div>
        {/* /.container */}
      </div>
      {/* /.fancy-feature-two */}

      {/* 
     =============================================
			Usable Tools Section
		============================================== */}
      <div className="useable-tools-section bg-color mt-140 mb-50 md-mt-80">
        <div className="bubble-one"></div>
        <div className="bubble-two"></div>
        <div className="bubble-three"></div>
        <div className="bubble-four"></div>
        <div className="bubble-five"></div>
        <div className="container">
          <h6 className="font-rubik">Integrates with your tools</h6>
          <h2>
            Deski ties into your existing tools, services, & workflow. Get
            notifications or create a Story with others tools.
          </h2>

          <SocialTwo />
        </div>
        {/* /.container */}
      </div>
      {/* /.useable-tools-section */}

      {/* 
     =============================================
				Fancy Feature Three
		============================================== */}
      <div className="fancy-feature-three pt-200 md-pt-80">
        <div className="container">
          <div className="row">
            <div className="col-lg-6">
              <div className="title-style-one">
                <h6 className="font-rubik">You’re in good company</h6>
                <h2>Join the community by using our apps to grow faster.</h2>
              </div>
              {/* /.title-style-one */}

              <CounterOne />
              {/* /.counter-info-classic */}
            </div>

            <div className="col-lg-6">
              <div className="clients-feedback-classic md-mt-80">
                <div
                  className="feedback-wrapper"
                  data-aos="fade-up"
                  data-aos-duration="1200"
                >
                  <Image width={71} height={71} 
                    src="/images/media/img_02.png"
                    alt="image"
                    className="media-meta"
                  />
                  <p>
                    it’s a great exprience to work with deski. They’r vey humble
                    and expert & the service has been excellent & super.
                  </p>
                  <h6 className="name">Rena Singleton</h6>
                  <span className="font-rubik disg-info">
                    Former Assistant Jamuna Group.
                  </span>
                </div>{" "}
                {/* /.feedback-wrapper */}
                <div
                  className="feedback-wrapper"
                  data-aos="fade-up"
                  data-aos-duration="1200"
                >
                  <Image width={71} height={71} 
                    src="/images/media/img_03.png"
                    alt="image"
                    className="media-meta"
                  />
                  <p>
                    it’s a great exprience to work with deski. They’r vey humble
                    and expert & the service has been excellent & super.
                  </p>
                  <h6 className="name">Rashed Ka.</h6>
                  <span className="font-rubik disg-info">
                    UI designer Baper Inc.
                  </span>
                </div>{" "}
                {/* /.feedback-wrapper */}
                <div
                  className="feedback-wrapper"
                  data-aos="fade-up"
                  data-aos-duration="1200"
                >
                  <Image width={71} height={71}
                    src="/images/media/img_04.png"
                    alt="image"
                    className="media-meta"
                  />
                  <p>
                    it’s a great exprience to work with deski. They’r vey humble
                    and expert & the service has been excellent & super.
                  </p>
                  <h6 className="name">Zubayer Hasan</h6>
                  <span className="font-rubik disg-info">
                    Front-end coder HeloShape.
                  </span>
                </div>
                {/* /.feedback-wrapper */}
              </div>
              {/* /.clients-feedback-classic */}
            </div>
          </div>
        </div>
      </div>
      {/* /.fancy-feature-three */}

      {/* 
     =============================================
			Call To Action
		============================================== */}
      <div className="fancy-short-banner-one">
        <div className="container">
          <CallToActionFour />
        </div>
        {/* /.container */}
        <div className="bubble-one"></div>
        <div className="bubble-two"></div>
        <div className="bubble-three"></div>
        <div className="bubble-four"></div>
        <div className="bubble-five"></div>
        <div className="bubble-six"></div>
      </div>
      {/* /.fancy-short-banner-one */}

      {/* 
     =============================================
				Faq Classic
		============================================== */}
      <div className="faq-classic pt-225 md-pt-120">
        <div className="container">
          <div className="row">
            <div className="col-lg-6">
              <div className="title-style-one">
                <h6 className="font-rubik">Find your answers</h6>
                <h2>Have any thought? Look here.</h2>
              </div>
              {/* /.title-style-one */}
              <Link        href="/faq" className="theme-btn-one mt-50 md-mt-30">
                {" "}
                Go to Faq
              </Link>
            </div>
            {/* End .col */}
            <div className="col-lg-6">
              <div className="md-mt-60">
                <FaqClassic />
              </div>
            </div>
            {/* End .col */}
          </div>
        </div>
      </div>
      {/* /.faq-classic */}

      {/* 
      =============================================
				Footer
		  ============================================== */}
      <div className="footer-bg-wrapper">
        <div className="bubble-one"></div>
        <div className="bubble-two"></div>
        <div className="bubble-three"></div>
        <div className="fancy-short-banner-two">
          <div className="container">
            <div className="content-wrapper">
              <div
                className="
                  bg-wrapper
                  d-lg-flex
                  align-items-center
                  justify-content-between
                "
              >
                <h2 className="font-gilroy-bold">
                  Don’t find the answer? contact us for any query.
                </h2>
                <Link        href="/contact-pm"> Contact us</Link>
                <div className="bubble-one"></div>
                <div className="bubble-two"></div>
                <div className="bubble-three"></div>
                <div className="bubble-four"></div>
                <div className="bubble-five"></div>
              </div>
              {/* /.bg-wrapper */}
            </div>
            {/*  /.content-wrapper */}
          </div>
          {/* /.container */}
        </div>
        {/* /.fancy-short-banner-two */}

        <footer className="theme-footer-one pt-130 md-pt-70">
          <div className="top-footer">
            <div className="container">
              <Footer />
            </div>
            {/* /.container */}
          </div>
          {/* /.top-footer */}

          <div className="container">
            <div className="bottom-footer-content">
              <CopyRight />
            </div>
            {/*  /.bottom-footer */}
          </div>
        </footer>
        {/* /.theme-footer-one */}
      </div>
    </div>
  );
};

export default ProjectManagement;