"use client";
import Link from "next/link";
import BlogSingleImg1 from "../../../public/assets/images/blog/blog-single-img-1.jpg";
import BlogSingleImg2 from "../../../public/assets/images/blog/blog-single-img-2.jpg";
import BlogSingleImg3 from "../../../public/assets/images/blog/blog-single-img-3.jpg";
import singleBlogInnerImg1 from "../../../public/assets/images/blog/blog-single-inner-img-1.png";
import sliderPostImg1 from "../../../public/assets/images/blog/sidebar-post-image-1.png";
import sliderPostImg2 from "../../../public/assets/images/blog/sidebar-post-image-2.png";
import sliderPostImg3 from "../../../public/assets/images/blog/sidebar-post-image-3.png";

function BlogPage() {
  return (
    <div>
      <section className="blog-page">
        <div className="container">
          <div className="row">
            <div className="col-lg-8 col-md-12 col-sm-12">
              <div className="blog-page-left">
                <div className="blog-single">
                  <div
                    className="blog-img-box wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="100ms"
                  >
                    <img src={BlogSingleImg1.src} alt="blog-single-img-1" />
                  </div>
                  <div className="blog-content">
                    <div
                      className="blog-more wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="300ms"
                    >
                      <ul>
                        <li>
                          <Link href="/blog">SEO Camping</Link>
                        </li>
                        <li className="blog-single-name">
                          <img
                            src={singleBlogInnerImg1.src}
                            alt="blog-single-inner-img-1"
                          />
                          <p>Matthew</p>
                        </li>
                        <li>
                          <Link href="/blog">September 20, 2023</Link>
                        </li>
                      </ul>
                    </div>
                    <div
                      className="blog-title wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="400ms"
                    >
                      <h3>
                        Achieving Fashion Elegant Design Runway to Real Life
                      </h3>
                    </div>
                    <div
                      className="blog-text wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="500ms"
                    >
                      <p>
                        Sed ut perspiciatis unde omnis iste natus sit voluptatem
                        accusantium doloremque laudantium eaque ipsa quae ab
                        illo inventore veritatis et quasi architecto beatae
                      </p>
                    </div>
                    <div
                      className="blog-btn wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="600ms"
                    >
                      <Link href="/blog" className="thm-btn main-btn">
                        Read More <i className="icon-right-arrow" />
                      </Link>
                    </div>
                    <div
                      className="blog-quote-box wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="700ms"
                    >
                      <h3>
                        Remote work made easy way better tools. Section Finibus
                        Bonorum et Malorum" Cicero{" "}
                        <span>
                          <i className="icon-right-quotation-sign-1" />
                        </span>
                      </h3>
                      <h5>Michael A. Jenkins</h5>
                      <p>CEO &amp; Founder</p>
                    </div>
                  </div>
                </div>
                <div className="blog-single">
                  <div
                    className="blog-img-box wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="00ms"
                  >
                    <img src={BlogSingleImg2.src} alt="blog-single-img-2" />
                  </div>
                  <div className="blog-content">
                    <div
                      className="blog-more wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="200ms"
                    >
                      <ul>
                        <li>
                          <Link href="/blog">SEO Camping</Link>
                        </li>
                        <li className="blog-single-name">
                          <img
                            src={singleBlogInnerImg1.src}
                            alt="blog-single-inner-img-1"
                          />
                          <p>Matthew</p>
                        </li>
                        <li>
                          <Link href="/blog">September 20, 2023</Link>
                        </li>
                      </ul>
                    </div>
                    <div
                      className="blog-title wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="300ms"
                    >
                      <h3>
                        Achieving Fashion Elegant Design Runway to Real Life
                      </h3>
                    </div>
                    <div
                      className="blog-text wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="400ms"
                    >
                      <p>
                        Sed ut perspiciatis unde omnis iste natus sit voluptatem
                        accusantium doloremque laudantium eaque ipsa quae ab
                        illo inventore veritatis et quasi architecto beatae
                      </p>
                    </div>
                    <div
                      className="blog-btn wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="500ms"
                    >
                      <Link href="/blog" className="thm-btn main-black-btn">
                        Read More <i className="icon-right-arrow" />
                      </Link>
                    </div>
                    <div
                      className="blog-quote-box blog-quote-two-box wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="600ms"
                    >
                      <h3>
                        Remote work made easy way better tools. Section Finibus
                        Bonorum et Malorum" Cicero
                        <span>
                          <i className="icon-right-quotation-sign-1" />
                        </span>
                      </h3>
                      <h5>Michael A. Jenkins</h5>
                      <p>CEO &amp; Founder</p>
                    </div>
                  </div>
                </div>
                <div className="blog-single">
                  <div
                    className="blog-img-box wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="00ms"
                  >
                    <img src={BlogSingleImg3.src} alt="blog-single-img-3" />
                  </div>
                  <div className="blog-content">
                    <div
                      className="blog-more wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="200ms"
                    >
                      <ul>
                        <li>
                          <Link href="/blog">SEO Camping</Link>
                        </li>
                        <li className="blog-single-name">
                          <img
                            src={singleBlogInnerImg1.src}
                            alt="blog-single-inner-img-1"
                          />
                          <p>Matthew</p>
                        </li>
                        <li>
                          <Link href="/blog">September 20, 2023</Link>
                        </li>
                      </ul>
                    </div>
                    <div
                      className="blog-title wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="300ms"
                    >
                      <h3>
                        Achieving Fashion Elegant Design Runway to Real Life
                      </h3>
                    </div>
                    <div
                      className="blog-text wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="400ms"
                    >
                      <p>
                        Sed ut perspiciatis unde omnis iste natus sit voluptatem
                        accusantium doloremque laudantium eaque ipsa quae ab
                        illo inventore veritatis et quasi architecto beatae
                      </p>
                    </div>
                    <div
                      className="blog-btn wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="500ms"
                    >
                      <Link href="/blog" className="thm-btn main-black-btn">
                        Read More <i className="icon-right-arrow" />
                      </Link>
                    </div>
                  </div>
                </div>
                <div
                  className="page-numbers wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="600ms"
                >
                  <ul>
                    <li className="page-numbers-prev">
                      <Link href="#">
                        {" "}
                        <i className="icon icon-arrow-2" />
                      </Link>
                    </li>
                    <li className="page-numbers-list">
                      <Link href="#">
                        <span>1</span>
                      </Link>
                    </li>
                    <li className="page-numbers-list">
                      <Link href="#">
                        <span>2</span>
                      </Link>
                    </li>
                    <li className="page-numbers-list">
                      <Link href="#">
                        <span>3</span>
                      </Link>
                    </li>
                    <li className="page-numbers-list">
                      <Link href="#">
                        <span>4</span>
                      </Link>
                    </li>
                    <li className="page-numbers-next">
                      <Link href="#">
                        {" "}
                        <i className="icon icon-arrow-2" />
                      </Link>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div className="col-lg-4 col-md-12 col-sm-12">
              <div className="sidebar blog-sidebar widget-area">
                <div
                  className="widget-box widget widget-search wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="sidebar-search">
                    <h4>Search</h4>
                    <div className="blog-search">
                      <input type="search" placeholder="Keywords" />
                      <i className="icon-search" />
                    </div>
                  </div>
                </div>
                <div
                  className="widget-box widget widget-categories wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="sidebar-category">
                    <h4>Category</h4>
                    <ul className="list-unstyled">
                      <li>
                        <Link href="#" className="btn-right-arrow">
                          Digital Marketing
                          <i className="icon-right-arrow" />
                        </Link>
                      </li>
                      <li>
                        <Link href="#" className="btn-right-arrow">
                          SEO optimization
                          <i className="icon-right-arrow" />
                        </Link>
                      </li>
                      <li>
                        <Link href="#" className="btn-right-arrow">
                          Content Marketing
                          <i className="icon-right-arrow" />
                        </Link>
                      </li>
                      <li>
                        <Link href="#" className="btn-right-arrow">
                          Keywords Research
                          <i className="icon-right-arrow" />
                        </Link>
                      </li>
                      <li>
                        <Link href="#" className="btn-right-arrow">
                          Technical Adult
                          <i className="icon-right-arrow" />
                        </Link>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  className="widget-box widget widget-post wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="sidebar-post">
                    <h4>Recant News</h4>
                    <ul className="list-unstyled">
                      <li>
                        <div className="sidebar-post-image">
                          <img
                            src={sliderPostImg1.src}
                            alt="sidebar-post-image-1"
                          />
                        </div>
                        <div className="sidebar-post-content">
                          <span>September 20, 2023</span>
                          <h6>
                            <Link href="/blog-details">
                              Achieving Fashion Elegant se Runway to Real Life
                            </Link>
                          </h6>
                        </div>
                      </li>
                      <li>
                        <div className="sidebar-post-image">
                          <img
                            src={sliderPostImg2.src}
                            alt="sidebar-post-image-2"
                          />
                        </div>
                        <div className="sidebar-post-content">
                          <span>September 20, 2023</span>
                          <h6>
                            <Link href="/blog-details">
                              Achieving Fashion Elegant se Runway to Real Life
                            </Link>
                          </h6>
                        </div>
                      </li>
                      <li>
                        <div className="sidebar-post-image">
                          <img
                            src={sliderPostImg3.src}
                            alt="sidebar-post-image-3"
                          />
                        </div>
                        <div className="sidebar-post-content">
                          <span>September 20, 2023</span>
                          <h6>
                            <Link href="/blog-details">
                              Achieving Fashion Elegant se Runway to Real Life
                            </Link>
                          </h6>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  className="widget-box widget widget-tags wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="sidebar-tags">
                    <h4>Popular Tags</h4>
                    <div className="sidebar-tags-list">
                      <Link href="#">SEO Camping</Link>
                      <Link href="#">Marketing</Link>
                      <Link href="#">SMM</Link>
                      <Link href="#">SMM</Link>
                      <Link href="#">Content</Link>
                      <Link href="#">Social Media</Link>
                    </div>
                  </div>
                </div>
                <div
                  className="widget sidebar-banner wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="sidebar-banner-box-shape-1" />
                  <div className="sidebar-banner-box-shape-2" />
                  <div className="sidebar-banner-box-shape-3" />
                  <div className="sidebar-banner-box">
                    <div className="sidebar-banner-box-title">
                      <h5>Boost your Digital Product marketing?</h5>
                    </div>
                    <div className="sidebar-banner-box-btn">
                      <Link href="#" className="thm-btn main-btn">
                        Get Started
                        <i className="icon-right-arrow" />
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default BlogPage;
