"use client";
import Link from "next/link";
import Projectimg1 from "../../../public/assets/images/resources/peoject-one-hover-item-img.png";
import Projectimg2 from "../../../public/assets/images/resources/peoject-one-hover-item-img-5.png";
import Projectimg3 from "../../../public/assets/images/resources/peoject-one-hover-item-img-4.png";
import Projectimg4 from "../../../public/assets/images/resources/peoject-one-hover-item-img-3.png";
import Projectimg5 from "../../../public/assets/images/resources/peoject-one-hover-item-img-2.png";

function ProjectOne() {
  return (
    <div>
      <section className="peoject-one">
        <div className="peoject-one-shape-1" />
        <div className="container">
          <div className="peoject-one-title-box">
            <div className="section-three-title">
              <div
                className="section-three-title-text wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <p>Latest Works</p>
              </div>
              <div
                className="section-three-title-title wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <h2>Explore Our Global Works Latest Work Gallery</h2>
              </div>
            </div>
          </div>
          <div className="peoject-one-info-box">
            <div
              className="peoject-one-single peoject-one-hover-item wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="100ms"
            >
              <div className="peoject-one-single-number">
                <span>Project 01</span>
              </div>
              <div className="peoject-one-single-title-box">
                <Link href="#">3D Illustration Design</Link>
              </div>
              <div className="peoject-one-single-btn">
                <Link href="/projects">
                  Project Details
                  <i className="icon-right-arrow" />
                </Link>
              </div>
              <div className="peoject-one-hover-item-box">
                <img
                  src={Projectimg1.src}
                  alt="team-item-hover"
                  className=" peoject-one-hover-item-box-img"
                />
              </div>
            </div>
            <div
              className="peoject-one-single peoject-one-hover-item wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="200ms"
            >
              <div className="peoject-one-single-number">
                <span>Project 02</span>
              </div>
              <div className="peoject-one-single-title-box">
                <Link href="#">Brand Identity Design</Link>
              </div>
              <div className="peoject-one-single-btn">
                <Link href="/projects">
                  Project Details
                  <i className="icon-right-arrow" />
                </Link>
              </div>
              <div className="peoject-one-hover-item-box">
                <img
                  src={Projectimg2.src}
                  alt="team-item-hover"
                  className=" peoject-one-hover-item-box-img"
                />
              </div>
            </div>
            <div
              className="peoject-one-single peoject-one-hover-item wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <div className="peoject-one-single-number">
                <span>Project 03</span>
              </div>
              <div className="peoject-one-single-title-box">
                <Link href="#">Media Marketing</Link>
              </div>
              <div className="peoject-one-single-btn">
                <Link href="/projects">
                  Project Details
                  <i className="icon-right-arrow" />
                </Link>
              </div>
              <div className="peoject-one-hover-item-box">
                <img
                  src={Projectimg3.src}
                  alt="team-item-hover"
                  className=" peoject-one-hover-item-box-img"
                />
              </div>
            </div>
            <div
              className="peoject-one-single peoject-one-hover-item wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="400ms"
            >
              <div className="peoject-one-single-number">
                <span>Project 04</span>
              </div>
              <div className="peoject-one-single-title-box">
                <Link href="#">Web Optimization</Link>
              </div>
              <div className="peoject-one-single-btn">
                <Link href="/projects">
                  Project Details
                  <i className="icon-right-arrow" />
                </Link>
              </div>
              <div className="peoject-one-hover-item-box">
                <img
                  src={Projectimg4.src}
                  alt="team-item-hover"
                  className=" peoject-one-hover-item-box-img"
                />
              </div>
            </div>
            <div
              className="peoject-one-single peoject-one-hover-item wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="500ms"
            >
              <div className="peoject-one-single-number">
                <span>Project 05</span>
              </div>
              <div className="peoject-one-single-title-box">
                <Link href="#">Mobile Apps Mockup Design</Link>
              </div>
              <div className="peoject-one-single-btn">
                <Link href="/projects">
                  Project Details
                  <i className="icon-right-arrow" />
                </Link>
              </div>
              <div className="peoject-one-hover-item-box">
                <img
                  src={Projectimg5.src}
                  alt="team-item-hover"
                  className=" peoject-one-hover-item-box-img"
                />
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default ProjectOne;
