"use client";
import Link from "next/link";
import Projectdtls1 from "../../../public/assets/images/shapes/testimonial-three-shape-1.png";
import Shape1 from "../../../public/assets/images/shapes/services-details-content-shape-1.png";
import Bannerimg from "../../../public/assets/images/projects/projects-banner-img.jpg";
import Innerdtls1 from "../../../public/assets/images/projects/project-details-inner-img-1.jpg";
import Innerdtls2 from "../../../public/assets/images/projects/project-details-inner-img-2.jpg";
import Figmaicon from "../../../public/assets/images/projects/figma-icon.png";
import Adobeicon from "../../../public/assets/images/projects/adobe_illustrator-icon.png";
import W3 from "../../../public/assets/images/projects/w3_html5-icon.png";
import Wordpress from "../../../public/assets/images/projects/wordpress-icon.png";
import Result from "../../../public/assets/images/projects/project-results-chart-img-1.png";
import Result2 from "../../../public/assets/images/projects/project-results-chart-img-2.png";
import Single from "../../../public/assets/images/projects/project-details-bottom-single-img.jpg";
import Project1 from "../../../public/assets/images/projects/projects-1.jpg";
import Project2 from "../../../public/assets/images/projects/projects-2.jpg";

function ProjectDetails() {
  return (
    <div>
      <section className="project-details">
        <div className="services-details-content-shape-1">
          <div className="animation_image_zoom">
            <div className="services-details-content-shape-1-img">
              <img src={Projectdtls1.src} alt="testimonial-three-shape-1" />
            </div>
          </div>
        </div>
        <div className="services-details-content-shape-2">
          <div className="animation_image_zoom">
            <div className="services-details-content-shape-2-img">
              <img src={Shape1.src} alt="services-details-content-shape-1" />
            </div>
          </div>
        </div>
        <div className="container">
          <div className="project-details-box">
            <div className="project-details-title-box">
              <div className="section-three-title">
                <div
                  className="project-details-title-text wow fadeInUp animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <span>Product Marketing</span>
                </div>
                <div
                  className="section-three-title-title wow fadeInUp animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                >
                  <h2>How to Build &amp; Grow Digital Product Marketing</h2>
                </div>
              </div>
              <div
                className="section-three-details wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="500ms"
              >
                <p>
                  Digital marketing &amp; advertising approach focuses on
                  capturing the essential
                </p>
              </div>
            </div>
            <div
              className="project-details-img wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="100ms"
            >
              <img src={Bannerimg.src} alt="" />
            </div>
            <div className="project-details-info">
              <div
                className="project-details-info-item wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <span>CLIENT</span>
                <h3>Digital Product Studio</h3>
              </div>
              <div
                className="project-details-info-item wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <span>Category</span>
                <h3>Digital Marketing</h3>
              </div>
              <div
                className="project-details-info-item wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="500ms"
              >
                <span>Location</span>
                <h3>Melbourne, Australia</h3>
              </div>
              <div
                className="project-details-info-item wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="700ms"
              >
                <span>Date</span>
                <h3>September 25, 2023</h3>
              </div>
            </div>
            <div
              className="project-details-inner-title wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="100ms"
            >
              <h2>About the Company</h2>
            </div>
            <div
              className="project-details-text wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                quae ab illo inventore veritatis et quasi architecto beatae
                vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                voluptas sit aspernatur aut odit aut fugit, sed quia
                consequuntur magni dolores eos qui ratione voluptatem sequi
                nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
                sit amet, consectetur, adipisci velit, sed quia non numquam eius
                modi tempora incidunt ut labore et dolore magnam aliquam quaerat
                voluptatem. Ut enim ad minima veniam, quis nostrum
                exercitationem ullam corporis suscipit laboriosam, nisi ut
                aliquid ex ea commodi consequatur? Quis autem vel eum iure
                reprehenderit qui in ea voluptate velit esse quam nihil
                molestiae consequatur, vel illum qui dolorem eum fugiat quo
                voluptas nulla pariatur
              </p>
            </div>
            <div className="row">
              <div className="col-xl-7 col-lg-7 col-md-7 col-sm-12">
                <div
                  className="project-details-img-box-img wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                >
                  <img src={Innerdtls1.src} alt="project-details-inner-img-1" />
                </div>
              </div>
              <div className="col-xl-5 col-lg-5 col-md-5 col-sm-12">
                <div
                  className="project-details-img-box-img wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                >
                  <img src={Innerdtls2.src} alt="project-details-inner-img-2" />
                </div>
              </div>
            </div>
            <div
              className="project-details-inner-title-two wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="100ms"
            >
              <h2>The Challenge</h2>
            </div>
            <div
              className="project-details-text-two wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <p>
                At vero eos et accusamus et iusto odio dignissimos ducimus qui
                blanditiis praesentium voluptatum deleniti atque corrupti quos
                dolores et quas molestias excepturi sint occaecati cupiditate
                non provident, similique sunt in culpa qui officia deserunt
                mollitia animi, id est laborum et dolorum fuga. Et harum quidem
                rerum facilis est et expedita distinctio. Nam libero tempore,
                cum soluta nobis est eligendi optio cumque
              </p>
              <p>
                Maxime placeat facere possimus, omnis voluptas assumenda est,
                omnis dolor repellendus. Temporibus autem quibusdam et aut
                officiis debitis aut rerum necessitatibus saepe eveniet ut et
                voluptates repudiandae sint et molestiae non recusandae.
              </p>
            </div>
            <div className="row">
              <div className="col-xl-7 col-lg-7 col-md-12 col-sm-12">
                <div className="project-using-tools">
                  <h2
                    className="wow fadeInUp animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="100ms"
                  >
                    Using Tools in Project
                  </h2>
                  <p
                    className="wow fadeInUp animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="300ms"
                  >
                    Blanditiis praesentium voluptatum deleniti atque corrupti
                    quos dolores et quas molestias excepturi sint occaecati
                    cupiditate
                  </p>
                  <div
                    className="project-using-tools-list wow fadeInUp animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="500ms"
                  >
                    <div className="row">
                      <div className="col-3">
                        <div className="project-using-tools-details text-center">
                          <img src={Figmaicon.src} alt="figma-icon" />
                          <h4>Figma</h4>
                        </div>
                      </div>
                      <div className="col-3">
                        <div className="project-using-tools-details text-center">
                          <img
                            src={Adobeicon.src}
                            alt="adobe_illustrator-icon"
                          />
                          <h4>illustrator</h4>
                        </div>
                      </div>
                      <div className="col-3">
                        <div className="project-using-tools-details text-center">
                          <img src={W3.src} alt="w3_html5-icon" />
                          <h4>HTML</h4>
                        </div>
                      </div>
                      <div className="col-3">
                        <div className="project-using-tools-details text-center">
                          <img src={Wordpress.src} alt="wordpress-icon" />
                          <h4>WordPress</h4>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="col-xl-5 col-lg-5 col-md-12 col-sm-12">
                <div className="project-results">
                  <h2
                    className="wow fadeInUp animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="100ms"
                  >
                    Statistics Results
                  </h2>
                  <p
                    className="wow fadeInUp animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="300ms"
                  >
                    Praesentium voluptatum deleniti atque corrupti quos dolores
                    et quas molestias excepturi sint occaecati cupiditate
                  </p>
                  <div
                    className="project-results-chart wow fadeInUp animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="500ms"
                  >
                    <div className="project-results-chart-img">
                      <h4>Annual Report</h4>
                      <img src={Result.src} alt="project-results-chart-img-1" />
                    </div>
                    <div className="project-results-chart-img">
                      <h4>Sales Report</h4>
                      <img
                        src={Result2.src}
                        alt="project-results-chart-img-2"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="project-details-bottom">
              <div className="row">
                <div className="col-xl-6 col-lg-6 col-md-12 col-sm-12">
                  <div className="project-details-bottom-single-box">
                    <div
                      className="project-details-bottom-single-img wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="300ms"
                    >
                      <img
                        src={Single.src}
                        alt="project-details-bottom-single-img"
                      />
                    </div>
                    <div
                      className="project-details-bottom-single-details wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="100ms"
                    >
                      <span>Product Sale</span>
                      <h3>How To Grow sale &amp; product marketing</h3>
                    </div>
                  </div>
                </div>
                <div className="col-xl-6 col-lg-6 col-md-12 col-sm-12">
                  <div className="project-details-bottom-single-box-two">
                    <div
                      className="project-details-bottom-single-img wow fadeInRight animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="300ms"
                    >
                      <img
                        src={Single.src}
                        alt="project-details-bottom-single-img"
                      />
                    </div>
                    <div
                      className="project-details-bottom-single-details wow fadeInRight animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="100ms"
                    >
                      <span>Digital Marketing</span>
                      <h3>Paid Social Media Marketing Strategy</h3>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="related-projects">
            <div
              className="section-three-title wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="100ms"
            >
              <div className="section-three-title-title text-center">
                <h2>Related Projects</h2>
              </div>
            </div>
            <div className="row">
              <div className="col-xl-6 col-lg-6 col-md-12 col-sm-12">
                <div className="projects-single-box">
                  <div
                    className="projects-single-img wow fadeInUp animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="100ms"
                  >
                    <img src={Project1.src} alt="projects-1" />
                  </div>
                  <div
                    className="projects-single-detail wow fadeInUp animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="300ms"
                  >
                    <span>Product Sale</span>
                    <h3>
                      <Link href="/project-details">
                        How To Grow sale &amp; product marketing
                      </Link>
                    </h3>
                  </div>
                </div>
              </div>
              <div className="col-xl-6 col-lg-6 col-md-12 col-sm-12">
                <div className="projects-single-box">
                  <div
                    className="projects-single-img wow fadeInUp animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="200ms"
                  >
                    <img src={Project2.src} alt="projects-2" />
                  </div>
                  <div
                    className="projects-single-detail wow fadeInUp animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="400ms"
                  >
                    <span>Marketing</span>
                    <h3>
                      <Link href="/project-details">
                        Increase 2x Faster SEO Strategy Develop
                      </Link>
                    </h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default ProjectDetails;
