export function BlogsWithCardLayoutAndScaleEffect() {
  return (
    <div className="py-24 lg:pb-36">
      <div className="mx-auto w-full max-w-7xl px-4 md:px-6 lg:px-8">
        <div className="mb-10 flex w-full flex-col items-center justify-between gap-4 lg:mb-12 lg:flex-row lg:gap-0">
          <div className="block">
            <h2 className="font-manrope mb-3 text-center text-4xl leading-snug font-bold text-gray-900 lg:text-start">
              Our newest content
            </h2>
            <p className="text-center text-lg leading-8 font-normal text-gray-500 lg:text-start">
              Check out our newest content for the latest insights and updates!
            </p>
          </div>
          <button className="rounded-full border border-gray-300 px-10 py-2.5 text-base font-semibold text-gray-900 shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] transition-all duration-300 hover:bg-gray-100">
            View All
          </button>
        </div>
        <div className="swiper mySwiper">
          <div className="swiper-wrapper">
            <div className="swiper-slide">
              <div className="rounded-3xl border border-gray-200 p-8">
                <img
                  src="https://pagedone.io/asset/uploads/1722663400.png"
                  alt="girl image"
                  className="h-auto w-full rounded-2xl object-cover"
                />
                <div className="mt-8">
                  <div className="mb-6 flex items-center gap-2">
                    {/* SVG removed */}
                    <p className="text-base font-normal text-gray-500">
                      March 20, 2024
                    </p>
                  </div>
                  <h3 className="mb-5 text-2xl leading-9 font-bold text-gray-900">
                    Mastering Social Media Marketing: A Guide for Small
                    Businesses
                  </h3>
                  <p className="mb-8 text-lg leading-8 font-normal text-gray-500">
                    Mastering social media marketing requires a strategic
                    approach and consistent effort. By understanding your
                    audience, creating valuable content, and engaging
                    effectively, small businesses can harness the power of
                    social media to drive growth and success.
                  </p>
                  <a
                    href="javascript:;"
                    className="flex w-max items-center gap-2 py-2.5 text-base font-semibold text-indigo-600 transition-all duration-500 hover:gap-3.5"
                  >
                    Read More
                    {/* SVG removed */}
                  </a>
                </div>
              </div>
            </div>
            <div className="swiper-slide">
              <div className="rounded-3xl border border-gray-200 p-8">
                <img
                  src="https://pagedone.io/asset/uploads/1722663400.png"
                  alt="girl image"
                  className="h-auto w-full rounded-2xl object-cover"
                />
                <div className="mt-8">
                  <div className="mb-6 flex items-center gap-2">
                    {/* SVG removed */}
                    <p className="text-base font-normal text-gray-500">
                      March 20, 2024
                    </p>
                  </div>
                  <h3 className="mb-5 text-2xl leading-9 font-bold text-gray-900">
                    Mastering Social Media Marketing: A Guide for Small
                    Businesses
                  </h3>
                  <p className="mb-8 text-lg leading-8 font-normal text-gray-500">
                    Mastering social media marketing requires a strategic
                    approach and consistent effort. By understanding your
                    audience, creating valuable content, and engaging
                    effectively, small businesses can harness the power of
                    social media to drive growth and success.
                  </p>
                  <a
                    href="javascript:;"
                    className="flex w-max items-center gap-2 py-2.5 text-base font-semibold text-indigo-600 transition-all duration-500 hover:gap-3.5"
                  >
                    Read More
                    {/* SVG removed */}
                  </a>
                </div>
              </div>
            </div>
            <div className="swiper-slide">
              <div className="rounded-3xl border border-gray-200 p-8">
                <img
                  src="https://pagedone.io/asset/uploads/1722663400.png"
                  alt="girl image"
                  className="h-auto w-full rounded-2xl object-cover"
                />
                <div className="mt-8">
                  <div className="mb-6 flex items-center gap-2">
                    {/* SVG removed */}
                    <p className="text-base font-normal text-gray-500">
                      March 20, 2024
                    </p>
                  </div>
                  <h3 className="mb-5 text-2xl leading-9 font-bold text-gray-900">
                    Mastering Social Media Marketing: A Guide for Small
                    Businesses
                  </h3>
                  <p className="mb-8 text-lg leading-8 font-normal text-gray-500">
                    Mastering social media marketing requires a strategic
                    approach and consistent effort. By understanding your
                    audience, creating valuable content, and engaging
                    effectively, small businesses can harness the power of
                    social media to drive growth and success.
                  </p>
                  <a
                    href="javascript:;"
                    className="flex w-max items-center gap-2 py-2.5 text-base font-semibold text-indigo-600 transition-all duration-500 hover:gap-3.5"
                  >
                    Read More
                    {/* SVG removed */}
                  </a>
                </div>
              </div>
            </div>
            <div className="swiper-slide">
              <div className="rounded-3xl border border-gray-200 p-8">
                <img
                  src="https://pagedone.io/asset/uploads/1722663400.png"
                  alt="girl image"
                  className="h-auto w-full rounded-2xl object-cover"
                />
                <div className="mt-8">
                  <div className="mb-6 flex items-center gap-2">
                    {/* SVG removed */}
                    <p className="text-base font-normal text-gray-500">
                      March 20, 2024
                    </p>
                  </div>
                  <h3 className="mb-5 text-2xl leading-9 font-bold text-gray-900">
                    Mastering Social Media Marketing: A Guide for Small
                    Businesses
                  </h3>
                  <p className="mb-8 text-lg leading-8 font-normal text-gray-500">
                    Mastering social media marketing requires a strategic
                    approach and consistent effort. By understanding your
                    audience, creating valuable content, and engaging
                    effectively, small businesses can harness the power of
                    social media to drive growth and success.
                  </p>
                  <a
                    href="javascript:;"
                    className="flex w-max items-center gap-2 py-2.5 text-base font-semibold text-indigo-600 transition-all duration-500 hover:gap-3.5"
                  >
                    Read More
                    {/* SVG removed */}
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div className="swiper-pagination" />
        </div>
      </div>
    </div>
  )
}