"use client";
import Link from "next/link";
import Project1 from "../../../public/assets/images/projects/projects-1.jpg";
import Project2 from "../../../public/assets/images/projects/projects-2.jpg";
import Project3 from "../../../public/assets/images/projects/projects-3.jpg";
import Project4 from "../../../public/assets/images/projects/projects-4.jpg";
import Project5 from "../../../public/assets/images/projects/projects-5.jpg";
import Project6 from "../../../public/assets/images/projects/projects-6.jpg";
import Project7 from "../../../public/assets/images/projects/projects-7.jpg";
import Project8 from "../../../public/assets/images/projects/projects-8.jpg";

function ProjectPage() {
  return (
    <div>
      <section className="projects-page">
        <div className="container">
          <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 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={Project3.src} alt="projects-3" />
                </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 build lead generations
                    </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={Project4.src} alt="projects-4" />
                </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">
                      Paid Social Media Marketing Strategy
                    </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="100ms"
                >
                  <img src={Project5.src} alt="projects-5" />
                </div>
                <div
                  className="projects-single-detail wow fadeInUp animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                >
                  <span>SEO Optimization</span>
                  <h3>
                    <Link href="/project-details">
                      User Research &amp; SEO Optimizations
                    </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={Project6.src} alt="projects-6" />
                </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">
                      Development your Digital 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="100ms"
                >
                  <img src={Project7.src} alt="projects-7" />
                </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">
                      Grow your Project manager pointing
                    </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={Project8.src} alt="projects-8" />
                </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
            className="projects-view-more-btn text-center wow fadeInUp animated"
            data-wow-duration="1500ms"
            data-wow-delay="300ms"
          >
            <Link href="/projects" className="main-black-btn thm-btn">
              View More Project <i className="icon-right-arrow" />
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}

export default ProjectPage;
