"use client";
import Link from "next/link";
import Blogsingimg1 from "../../../public/assets/images/blog/blog-three-single-img-1.jpg";
import Blogsingimg2 from "../../../public/assets/images/blog/blog-three-single-img-2.jpg";
import Bloguser1 from "../../../public/assets/images/blog/blog-three-user-img-1.png";
import Bloguser2 from "../../../public/assets/images/blog/blog-three-user-img-2.png";

function BlogThree() {
  return (
    <div>
      <section className="blog-three">
        <div className="container">
          <div className="blog-three-title-box">
            <div className="section-three-title">
              <div
                className="section-three-title-text wow fadeInLeft animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <p>Latest News &amp; Blog</p>
              </div>
              <div
                className="section-three-title-title wow fadeInLeft animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <h2>Explore Marketing Blog</h2>
              </div>
            </div>
            <div
              className="blog-three-btn wow fadeInRight animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <Link href="/blog" className="thm-btn transparent-btn">
                View More
                <i className="icon-right-arrow" />
              </Link>
            </div>
          </div>
          <div className="row">
            <div className="col-xl-6 col-lg-12 col-md-12 col-sm-12">
              <div
                className="blog-three-single-box wow fadeInLeft animated"
                data-wow-duration="1500ms"
                data-wow-delay="200ms"
              >
                <div className="blog-three-single-img-box">
                  <img src={Blogsingimg1.src} alt="blog-three-single-img-1" />
                </div>
                <div className="blog-three-single-detail">
                  <p className="blog-three-date">September 20, 2023</p>
                  <h4 className="blog-three-title">
                    <Link href="/blog-details">
                      Achieving Fashion Elegan Runway to Real Life
                    </Link>
                  </h4>
                  <div className="blog-three-user-box">
                    <div className="blog-three-user">
                      <img src={Bloguser1.src} alt="blog-three-user-img-1" />
                      <Link href="#">Matthew</Link>
                    </div>
                    <Link href="/blog" className="read-more-btn">
                      Read More
                      <i className="icon-right-arrow" />
                    </Link>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-xl-6 col-lg-12 col-md-12 col-sm-12">
              <div
                className="blog-three-single-box wow fadeInRight animated"
                data-wow-duration="1500ms"
                data-wow-delay="200ms"
              >
                <div className="blog-three-single-img-box">
                  <img src={Blogsingimg2.src} alt="blog-three-single-img-2" />
                </div>
                <div className="blog-three-single-detail">
                  <p className="blog-three-date">September 20, 2023</p>
                  <h4 className="blog-three-title">
                    <Link href="/blog-details">
                      Remote work made easy way better tools.
                    </Link>
                  </h4>
                  <div className="blog-three-user-box">
                    <div className="blog-three-user">
                      <img src={Bloguser2.src} alt="blog-three-user-img-2" />
                      <Link href="#">Feuerstein</Link>
                    </div>
                    <Link href="/blog" className="read-more-btn">
                      Read More
                      <i className="icon-right-arrow" />
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default BlogThree;
