"use client";
import Link from "next/link";
import BlogImgOne1 from "../../../public/assets/images/resources/blog-one-img-3.jpg";
import BlogImgOneImg1 from "../../../public/assets/images/resources/blog-one-img-1.jpg";
import BlogImgOneImg2 from "../../../public/assets/images/resources/blog-one-img-2.jpg";
import BlogshapeImg1 from "../../../public/assets/images/shapes/blog-one-shape-1.png";
import BlogshapeImg5 from "../../../public/assets/images/shapes/blog-one-shape-1.png";
import testimonialFourImg8 from "../../../public/assets/images/shapes/testimonial-one-shape-8.png";
import BlogOneUserOneImg1 from "../../../public/assets/images/resources/blog-one-user-1.png";
import BlogOneUserOneImg2 from "../../../public/assets/images/resources/blog-one-user-2.png";
import BlogOneUserOneImg3 from "../../../public/assets/images/resources/blog-one-user-3.png";

function BlogOne() {
  return (
    <div>
      <section className="blog-one">
        <div
          className="blog-one-shape-1 wow fadeInLeft animated"
          data-wow-duration="1500ms"
          data-wow-delay="100ms"
        />
        <div
          className="blog-one-shape-2 wow fadeInRight animated"
          data-wow-duration="1500ms"
          data-wow-delay="200ms"
        />
        <div
          className="blog-one-shape-3 wow fadeInLeft animated"
          data-wow-duration="1500ms"
          data-wow-delay="300ms"
        >
          <div className="animation_image_zoom">
            <div className="blog-one-shape-3-img">
              <img src={BlogshapeImg1.src} alt="blog-one-shape-1" />
            </div>
          </div>
        </div>
        <div
          className="blog-one-shape-4 wow fadeInRight animated"
          data-wow-duration="1500ms"
          data-wow-delay="400ms"
        >
          <div className="animation_image_zoom">
            <div className="blog-one-shape-4-img">
              <img
                src={testimonialFourImg8.src}
                alt="testimonial-one-shape-8"
              />
            </div>
          </div>
        </div>
        <div
          className="blog-one-shape-5 wow fadeInRight animated"
          data-wow-duration="1500ms"
          data-wow-delay="500ms"
        >
          <div className="animation_image_zoom">
            <div className="blog-one-shape-5-img"></div>
          </div>
        </div>
        <div
          className="blog-one-shape-6 wow fadeInLeft animated"
          data-wow-duration="1500ms"
          data-wow-delay="600ms"
        >
          <div className="animation_image_zoom">
            <div className="blog-one-shape-6-img">
              <img src={BlogshapeImg5.src} alt="banner-one-shape-5" />
            </div>
          </div>
        </div>
        <div className="container">
          <div
            className="section-title text-center wow fadeInUp animated"
            data-wow-duration="1500ms"
            data-wow-delay="200ms"
          >
            <h2>Browse our Articles on Digital marketing and growth</h2>
          </div>
          <div
            className="section-details text-center wow fadeInUp animated"
            data-wow-duration="1500ms"
            data-wow-delay="300ms"
          >
            <p>
              Digital marketing &amp; advertising approach focuses on capturing
              the essential
            </p>
          </div>
          <div className="row">
            <div className="col-xl-4 col-lg-4 col-md-12 col-sm-12">
              <div className="blog-one-single">
                <div
                  className="blog-one-img-box wow fadeInUp animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <img src={BlogImgOneImg1.src} alt="blog-one-img-1" />
                </div>
                <div
                  className="blog-one-content-box wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="700ms"
                >
                  <div className="blog-one-date">
                    <p>September 20, 2023</p>
                  </div>
                  <div className="blog-one-title">
                    <h4>
                      <Link href="/blog-details">
                        Achieving Fashion Elegan Runway to Real Life
                      </Link>
                    </h4>
                  </div>
                  <div className="blog-one-user-box">
                    <div className="blog-one-user-detail">
                      <div className="blog-one-user-img">
                        <img
                          src={BlogOneUserOneImg1.src}
                          alt="blog-one-user-1"
                        />
                      </div>
                      <div className="blog-one-user-name">
                        <h5>T. Cosentino</h5>
                      </div>
                    </div>
                    <div className="blog-one-user-btn">
                      <Link href="/blog" className="read-more-btn">
                        Read More <i className="icon-right-arrow" />
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-xl-4 col-lg-4 col-md-12 col-sm-12">
              <div className="blog-one-single">
                <div
                  className="blog-one-img-box wow fadeInUp animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                >
                  <img src={BlogImgOneImg2.src} alt="blog-one-img-1" />
                </div>
                <div
                  className="blog-one-content-box wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="900ms"
                >
                  <div className="blog-one-date">
                    <p>September 21, 2023</p>
                  </div>
                  <div className="blog-one-title">
                    <h4>
                      <Link href="/blog-details">
                        Remote work made easy way better tools.
                      </Link>
                    </h4>
                  </div>
                  <div className="blog-one-user-box">
                    <div className="blog-one-user-detail">
                      <div className="blog-one-user-img">
                        <img
                          src={BlogOneUserOneImg2.src}
                          alt="blog-one-user-1"
                        />
                      </div>
                      <div className="blog-one-user-name">
                        <h5>S. Overton</h5>
                      </div>
                    </div>
                    <div className="blog-one-user-btn">
                      <Link href="/blog" className="read-more-btn">
                        Read More <i className="icon-right-arrow" />
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-xl-4 col-lg-4 col-md-12 col-sm-12">
              <div className="blog-one-single">
                <div
                  className="blog-one-img-box wow fadeInUp animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="500ms"
                >
                  <img src={BlogImgOne1.src} alt="blog-one-img-1" />
                </div>
                <div
                  className="blog-one-content-box wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="1100ms"
                >
                  <div className="blog-one-date">
                    <p>September 25, 2023</p>
                  </div>
                  <div className="blog-one-title">
                    <h4>
                      <Link href="/blog-details">
                        Fashion Elegance Runs way to Real Life
                      </Link>
                    </h4>
                  </div>
                  <div className="blog-one-user-box">
                    <div className="blog-one-user-detail">
                      <div className="blog-one-user-img">
                        <img
                          src={BlogOneUserOneImg3.src}
                          alt="blog-one-user-1"
                        />
                      </div>
                      <div className="blog-one-user-name">
                        <h5>N. Harwood</h5>
                      </div>
                    </div>
                    <div className="blog-one-user-btn">
                      <Link href="/blog" className="read-more-btn">
                        Read More <i className="icon-right-arrow" />
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="cta-one">
            <div className="row align-items-center">
              <div className="col-xl-8 col-lg-12 col-md-12 col-sm-12">
                <div className="cta-one-box">
                  <div
                    className="section-title wow fadeInUp animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="100ms"
                  >
                    <h2>
                      <span className="section-title-shape-2">Ready</span> to
                      Boost your Digital product marketing ?
                    </h2>
                  </div>
                  <div
                    className="section-details wow fadeInUp animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="300ms"
                  >
                    <p>Approach focuses on capturing the essential</p>
                  </div>
                </div>
              </div>
              <div className="col-xl-4 col-lg-12 col-md-12 col-sm-12">
                <div
                  className="cta-one-btn wow fadeInUp animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="200ms"
                >
                  <Link href="/contact" className="main-black-btn thm-btn">
                    Get Started <i className="icon-right-arrow" />
                  </Link>
                  <div className="cta-one-btn-checkout">
                    <i className="icon-check" />
                    <p>No Credit card requirement</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default BlogOne;
