import Link from "next/link";
import React from "react";

const BlogLayer = () => {
  return (
    <div className='row gy-4'>
      <div className='col-xxl-3 col-lg-4 col-sm-6'>
        <div className='card h-100 p-0 radius-12 overflow-hidden'>
          <div className='card-body p-24'>
            <Link
              href='/blog-details'
              className='w-100 max-h-194-px radius-8 overflow-hidden'
            >
              <img
                src='/assets/images/blog/blog1.png'
                alt=''
                className='w-100 h-100 object-fit-cover'
              />
            </Link>
            <div className='mt-20'>
              <div className='d-flex align-items-center gap-6 justify-content-between flex-wrap mb-16'>
                <Link
                  href='blog-details'
                  className='px-20 py-6 bg-neutral-100 rounded-pill bg-hover-neutral-300 text-neutral-600 fw-medium'
                >
                  Workshop
                </Link>
                <div className='d-flex align-items-center gap-8 text-neutral-500 fw-medium'>
                  <i className='ri-calendar-2-line' />
                  Jan 17, 2024
                </div>
              </div>
              <h6 className='mb-16'>
                <Link
                  href='/blog-details'
                  className='text-line-2 text-hover-primary-600 text-xl transition-2'
                >
                  Discover Endless Possibilities in Real Estate Live Your Best
                  Life in a
                </Link>
              </h6>
              <p className='text-line-3 text-neutral-500'>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
                dolores explicabo corrupti, fuga necessitatibus fugiat adipisci
                quidem eveniet enim minus.
              </p>
              <Link
                href='/blog-details'
                className='d-flex align-items-center gap-8 fw-semibold text-neutral-900 text-hover-primary-600 transition-2'
              >
                Read More
                <i className='ri-arrow-right-double-line text-xl d-flex line-height-1' />
              </Link>
            </div>
          </div>
        </div>
      </div>
      <div className='col-xxl-3 col-lg-4 col-sm-6'>
        <div className='card h-100 p-0 radius-12 overflow-hidden'>
          <div className='card-body p-24'>
            <Link
              href='/blog-details'
              className='w-100 max-h-194-px radius-8 overflow-hidden'
            >
              <img
                src='/assets/images/blog/blog2.png'
                alt=''
                className='w-100 h-100 object-fit-cover'
              />
            </Link>
            <div className='mt-20'>
              <div className='d-flex align-items-center gap-6 justify-content-between flex-wrap mb-16'>
                <Link
                  href='blog-details'
                  className='px-20 py-6 bg-neutral-100 rounded-pill bg-hover-neutral-300 text-neutral-600 fw-medium'
                >
                  Hiring
                </Link>
                <div className='d-flex align-items-center gap-8 text-neutral-500 fw-medium'>
                  <i className='ri-calendar-2-line' />
                  Jan 17, 2024
                </div>
              </div>
              <h6 className='mb-16'>
                <Link
                  href='/blog-details'
                  className='text-line-2 text-hover-primary-600 text-xl transition-2'
                >
                  Turn Your Real Estate Dreams Into Reality Embrace the Real
                  Estate
                </Link>
              </h6>
              <p className='text-line-3 text-neutral-500'>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
                dolores explicabo corrupti, fuga necessitatibus fugiat adipisci
                quidem eveniet enim minus.
              </p>
              <Link
                href='/blog-details'
                className='d-flex align-items-center gap-8 fw-semibold text-neutral-900 text-hover-primary-600 transition-2'
              >
                Read More
                <i className='ri-arrow-right-double-line text-xl d-flex line-height-1' />
              </Link>
            </div>
          </div>
        </div>
      </div>
      <div className='col-xxl-3 col-lg-4 col-sm-6'>
        <div className='card h-100 p-0 radius-12 overflow-hidden'>
          <div className='card-body p-24'>
            <Link
              href='/blog-details'
              className='w-100 max-h-194-px radius-8 overflow-hidden'
            >
              <img
                src='/assets/images/blog/blog3.png'
                alt=''
                className='w-100 h-100 object-fit-cover'
              />
            </Link>
            <div className='mt-20'>
              <div className='d-flex align-items-center gap-6 justify-content-between flex-wrap mb-16'>
                <Link
                  href='blog-details'
                  className='px-20 py-6 bg-neutral-100 rounded-pill bg-hover-neutral-300 text-neutral-600 fw-medium'
                >
                  Workshop
                </Link>
                <div className='d-flex align-items-center gap-8 text-neutral-500 fw-medium'>
                  <i className='ri-calendar-2-line' />
                  Jan 17, 2024
                </div>
              </div>
              <h6 className='mb-16'>
                <Link
                  href='/blog-details'
                  className='text-line-2 text-hover-primary-600 text-xl transition-2'
                >
                  Your satisfaction is our top the best priority
                </Link>
              </h6>
              <p className='text-line-3 text-neutral-500'>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
                dolores explicabo corrupti, fuga necessitatibus fugiat adipisci
                quidem eveniet enim minus.
              </p>
              <Link
                href='/blog-details'
                className='d-flex align-items-center gap-8 fw-semibold text-neutral-900 text-hover-primary-600 transition-2'
              >
                Read More
                <i className='ri-arrow-right-double-line text-xl d-flex line-height-1' />
              </Link>
            </div>
          </div>
        </div>
      </div>
      <div className='col-xxl-3 col-lg-4 col-sm-6'>
        <div className='card h-100 p-0 radius-12 overflow-hidden'>
          <div className='card-body p-24'>
            <Link
              href='/blog-details'
              className='w-100 max-h-194-px radius-8 overflow-hidden'
            >
              <img
                src='/assets/images/blog/blog4.png'
                alt=''
                className='w-100 h-100 object-fit-cover'
              />
            </Link>
            <div className='mt-20'>
              <div className='d-flex align-items-center gap-6 justify-content-between flex-wrap mb-16'>
                <Link
                  href='blog-details'
                  className='px-20 py-6 bg-neutral-100 rounded-pill bg-hover-neutral-300 text-neutral-600 fw-medium'
                >
                  Workshop
                </Link>
                <div className='d-flex align-items-center gap-8 text-neutral-500 fw-medium'>
                  <i className='ri-calendar-2-line' />
                  Jan 17, 2024
                </div>
              </div>
              <h6 className='mb-16'>
                <Link
                  href='/blog-details'
                  className='text-line-2 text-hover-primary-600 text-xl transition-2'
                >
                  Your journey to home ownership starts here
                </Link>
              </h6>
              <p className='text-line-3 text-neutral-500'>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
                dolores explicabo corrupti, fuga necessitatibus fugiat adipisci
                quidem eveniet enim minus.
              </p>
              <Link
                href='/blog-details'
                className='d-flex align-items-center gap-8 fw-semibold text-neutral-900 text-hover-primary-600 transition-2'
              >
                Read More
                <i className='ri-arrow-right-double-line text-xl d-flex line-height-1' />
              </Link>
            </div>
          </div>
        </div>
      </div>
      {/* Style Two */}
      <div className='col-xxl-3 col-lg-4 col-sm-6'>
        <div className='card h-100 p-0 radius-12 overflow-hidden'>
          <div className='card-body p-0'>
            <Link
              href='/blog-details'
              className='w-100 max-h-266-px radius-0 overflow-hidden'
            >
              <img
                src='/assets/images/blog/blog5.png'
                alt=''
                className='w-100 h-100 object-fit-cover'
              />
            </Link>
            <div className='p-20'>
              <h6 className='mb-16'>
                <Link
                  href='/blog-details'
                  className='text-line-2 text-hover-primary-600 text-xl transition-2'
                >
                  How to hire a right business executive for your company
                </Link>
              </h6>
              <p className='text-line-3 text-neutral-500 mb-0'>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
                dolores explicabo corrupti, fuga necessitatibus fugiat adipisci
                quidem eveniet enim minus.
              </p>
              <span className='d-block border-bottom border-neutral-300 border-dashed my-20' />
              <div className='d-flex align-items-center justify-content-between flex-wrap gap-6'>
                <div className='d-flex align-items-center gap-8'>
                  <img
                    src='/assets/images/user-list/user-list1.png'
                    alt=''
                    className='w-40-px h-40-px rounded-circle object-fit-cover'
                  />
                  <div className='d-flex flex-column'>
                    <h6 className='text-sm mb-0'>John Doe</h6>
                    <span className='text-xs text-neutral-500'>1 day ago</span>
                  </div>
                </div>
                <Link
                  href='/blog-details'
                  className='btn btn-sm btn-primary-600 d-flex align-items-center gap-1 text-xs px-8 py-6'
                >
                  Read More
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className='col-xxl-3 col-lg-4 col-sm-6'>
        <div className='card h-100 p-0 radius-12 overflow-hidden'>
          <div className='card-body p-0'>
            <Link
              href='/blog-details'
              className='w-100 max-h-266-px radius-0 overflow-hidden'
            >
              <img
                src='/assets/images/blog/blog6.png'
                alt=''
                className='w-100 h-100 object-fit-cover'
              />
            </Link>
            <div className='p-20'>
              <h6 className='mb-16'>
                <Link
                  href='/blog-details'
                  className='text-line-2 text-hover-primary-600 text-xl transition-2'
                >
                  The Gig Economy: Adapting to a Flexible Workforce
                </Link>
              </h6>
              <p className='text-line-3 text-neutral-500 mb-0'>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
                dolores explicabo corrupti, fuga necessitatibus fugiat adipisci
                quidem eveniet enim minus.
              </p>
              <span className='d-block border-bottom border-neutral-300 border-dashed my-20' />
              <div className='d-flex align-items-center justify-content-between flex-wrap gap-6'>
                <div className='d-flex align-items-center gap-8'>
                  <img
                    src='/assets/images/user-list/user-list2.png'
                    alt=''
                    className='w-40-px h-40-px rounded-circle object-fit-cover'
                  />
                  <div className='d-flex flex-column'>
                    <h6 className='text-sm mb-0'>Robiul Hasan</h6>
                    <span className='text-xs text-neutral-500'>1 day ago</span>
                  </div>
                </div>
                <Link
                  href='/blog-details'
                  className='btn btn-sm btn-primary-600 d-flex align-items-center gap-1 text-xs px-8 py-6'
                >
                  Read More
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className='col-xxl-3 col-lg-4 col-sm-6'>
        <div className='card h-100 p-0 radius-12 overflow-hidden'>
          <div className='card-body p-0'>
            <Link
              href='/blog-details'
              className='w-100 max-h-266-px radius-0 overflow-hidden'
            >
              <img
                src='/assets/images/blog/blog7.png'
                alt=''
                className='w-100 h-100 object-fit-cover'
              />
            </Link>
            <div className='p-20'>
              <h6 className='mb-16'>
                <Link
                  href='/blog-details'
                  className='text-line-2 text-hover-primary-600 text-xl transition-2'
                >
                  The Future of Remote Work: Strategies for Success
                </Link>
              </h6>
              <p className='text-line-3 text-neutral-500 mb-0'>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
                dolores explicabo corrupti, fuga necessitatibus fugiat adipisci
                quidem eveniet enim minus.
              </p>
              <span className='d-block border-bottom border-neutral-300 border-dashed my-20' />
              <div className='d-flex align-items-center justify-content-between flex-wrap gap-6'>
                <div className='d-flex align-items-center gap-8'>
                  <img
                    src='/assets/images/user-list/user-list3.png'
                    alt=''
                    className='w-40-px h-40-px rounded-circle object-fit-cover'
                  />
                  <div className='d-flex flex-column'>
                    <h6 className='text-sm mb-0'>John Doe</h6>
                    <span className='text-xs text-neutral-500'>1 day ago</span>
                  </div>
                </div>
                <Link
                  href='/blog-details'
                  className='btn btn-sm btn-primary-600 d-flex align-items-center gap-1 text-xs px-8 py-6'
                >
                  Read More
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className='col-xxl-3 col-lg-4 col-sm-6'>
        <div className='card h-100 p-0 radius-12 overflow-hidden'>
          <div className='card-body p-0'>
            <Link
              href='/blog-details'
              className='w-100 max-h-266-px radius-0 overflow-hidden'
            >
              <img
                src='/assets/images/blog/blog6.png'
                alt=''
                className='w-100 h-100 object-fit-cover'
              />
            </Link>
            <div className='p-20'>
              <h6 className='mb-16'>
                <Link
                  href='/blog-details'
                  className='text-line-2 text-hover-primary-600 text-xl transition-2'
                >
                  Lorem ipsum dolor sit amet consectetur adipisicing.
                </Link>
              </h6>
              <p className='text-line-3 text-neutral-500 mb-0'>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
                dolores explicabo corrupti, fuga necessitatibus fugiat adipisci
                quidem eveniet enim minus.
              </p>
              <span className='d-block border-bottom border-neutral-300 border-dashed my-20' />
              <div className='d-flex align-items-center justify-content-between flex-wrap gap-6'>
                <div className='d-flex align-items-center gap-8'>
                  <img
                    src='/assets/images/user-list/user-list5.png'
                    alt=''
                    className='w-40-px h-40-px rounded-circle object-fit-cover'
                  />
                  <div className='d-flex flex-column'>
                    <h6 className='text-sm mb-0'>John Doe</h6>
                    <span className='text-xs text-neutral-500'>1 day ago</span>
                  </div>
                </div>
                <Link
                  href='/blog-details'
                  className='btn btn-sm btn-primary-600 d-flex align-items-center gap-1 text-xs px-8 py-6'
                >
                  Read More
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* Style Three */}
      <div className='col-xxl-3 col-lg-4 col-sm-6'>
        <div className='card h-100 p-0 radius-12 overflow-hidden'>
          <div className='card-body p-24'>
            <h6 className='mb-16'>
              <Link
                href='/blog-details'
                className='text-line-2 text-hover-primary-600 text-xl transition-2'
              >
                Discover Endless Possibilities in Real Estate Live Your Best
                Life in a
              </Link>
            </h6>
            <div className='d-flex align-items-center gap-6 justify-content-between flex-wrap mb-16'>
              <div className='d-flex align-items-center gap-8 text-neutral-500 fw-medium'>
                <i className='ri-chat-3-line' />
                10 Comments
              </div>
              <div className='d-flex align-items-center gap-8 text-neutral-500 fw-medium'>
                <i className='ri-calendar-2-line' />
                Jan 17, 2024
              </div>
            </div>
            <Link
              href='/blog-details'
              className='w-100 max-h-194-px radius-8 overflow-hidden'
            >
              <img
                src='/assets/images/blog/blog1.png'
                alt=''
                className='w-100 h-100 object-fit-cover'
              />
            </Link>
            <div className='mt-20'>
              <p className='text-line-3 text-neutral-500'>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
                dolores explicabo corrupti, fuga necessitatibus fugiat adipisci
                quidem eveniet enim minus.
              </p>
              <span className='d-block border-bottom border-neutral-300 border-dashed my-20' />
              <div className='d-flex align-items-center justify-content-between flex-wrap gap-6'>
                <div className='d-flex align-items-center gap-8'>
                  <img
                    src='/assets/images/user-list/user-list1.png'
                    alt=''
                    className='w-40-px h-40-px rounded-circle object-fit-cover'
                  />
                  <div className='d-flex flex-column'>
                    <h6 className='text-sm mb-0'>John Doe</h6>
                    <span className='text-xs text-neutral-500'>1 day ago</span>
                  </div>
                </div>
                <Link
                  href='/blog-details'
                  className='btn btn-sm btn-primary-600 d-flex align-items-center gap-1 text-xs px-8 py-6'
                >
                  Read More
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className='col-xxl-3 col-lg-4 col-sm-6'>
        <div className='card h-100 p-0 radius-12 overflow-hidden'>
          <div className='card-body p-24'>
            <h6 className='mb-16'>
              <Link
                href='/blog-details'
                className='text-line-2 text-hover-primary-600 text-xl transition-2'
              >
                Turn Your Real Estate Dreams Into Reality Embrace the Real
                Estate
              </Link>
            </h6>
            <div className='d-flex align-items-center gap-6 justify-content-between flex-wrap mb-16'>
              <div className='d-flex align-items-center gap-8 text-neutral-500 fw-medium'>
                <i className='ri-chat-3-line' />
                10 Comments
              </div>
              <div className='d-flex align-items-center gap-8 text-neutral-500 fw-medium'>
                <i className='ri-calendar-2-line' />
                Jan 17, 2024
              </div>
            </div>
            <Link
              href='/blog-details'
              className='w-100 max-h-194-px radius-8 overflow-hidden'
            >
              <img
                src='/assets/images/blog/blog2.png'
                alt=''
                className='w-100 h-100 object-fit-cover'
              />
            </Link>
            <div className='mt-20'>
              <p className='text-line-3 text-neutral-500'>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
                dolores explicabo corrupti, fuga necessitatibus fugiat adipisci
                quidem eveniet enim minus.
              </p>
              <span className='d-block border-bottom border-neutral-300 border-dashed my-20' />
              <div className='d-flex align-items-center justify-content-between flex-wrap gap-6'>
                <div className='d-flex align-items-center gap-8'>
                  <img
                    src='/assets/images/user-list/user-list1.png'
                    alt=''
                    className='w-40-px h-40-px rounded-circle object-fit-cover'
                  />
                  <div className='d-flex flex-column'>
                    <h6 className='text-sm mb-0'>John Doe</h6>
                    <span className='text-xs text-neutral-500'>1 day ago</span>
                  </div>
                </div>
                <Link
                  href='/blog-details'
                  className='btn btn-sm btn-primary-600 d-flex align-items-center gap-1 text-xs px-8 py-6'
                >
                  Read More
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className='col-xxl-3 col-lg-4 col-sm-6'>
        <div className='card h-100 p-0 radius-12 overflow-hidden'>
          <div className='card-body p-24'>
            <h6 className='mb-16'>
              <Link
                href='/blog-details'
                className='text-line-2 text-hover-primary-600 text-xl transition-2'
              >
                Your satisfaction is our top the best priority
              </Link>
            </h6>
            <div className='d-flex align-items-center gap-6 justify-content-between flex-wrap mb-16'>
              <div className='d-flex align-items-center gap-8 text-neutral-500 fw-medium'>
                <i className='ri-chat-3-line' />
                10 Comments
              </div>
              <div className='d-flex align-items-center gap-8 text-neutral-500 fw-medium'>
                <i className='ri-calendar-2-line' />
                Jan 17, 2024
              </div>
            </div>
            <Link
              href='/blog-details'
              className='w-100 max-h-194-px radius-8 overflow-hidden'
            >
              <img
                src='/assets/images/blog/blog3.png'
                alt=''
                className='w-100 h-100 object-fit-cover'
              />
            </Link>
            <div className='mt-20'>
              <p className='text-line-3 text-neutral-500'>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
                dolores explicabo corrupti, fuga necessitatibus fugiat adipisci
                quidem eveniet enim minus.
              </p>
              <span className='d-block border-bottom border-neutral-300 border-dashed my-20' />
              <div className='d-flex align-items-center justify-content-between flex-wrap gap-6'>
                <div className='d-flex align-items-center gap-8'>
                  <img
                    src='/assets/images/user-list/user-list1.png'
                    alt=''
                    className='w-40-px h-40-px rounded-circle object-fit-cover'
                  />
                  <div className='d-flex flex-column'>
                    <h6 className='text-sm mb-0'>John Doe</h6>
                    <span className='text-xs text-neutral-500'>1 day ago</span>
                  </div>
                </div>
                <Link
                  href='/blog-details'
                  className='btn btn-sm btn-primary-600 d-flex align-items-center gap-1 text-xs px-8 py-6'
                >
                  Read More
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className='col-xxl-3 col-lg-4 col-sm-6'>
        <div className='card h-100 p-0 radius-12 overflow-hidden'>
          <div className='card-body p-24'>
            <h6 className='mb-16'>
              <Link
                href='/blog-details'
                className='text-line-2 text-hover-primary-600 text-xl transition-2'
              >
                Your journey to home ownership starts here
              </Link>
            </h6>
            <div className='d-flex align-items-center gap-6 justify-content-between flex-wrap mb-16'>
              <div className='d-flex align-items-center gap-8 text-neutral-500 fw-medium'>
                <i className='ri-chat-3-line' />
                10 Comments
              </div>
              <div className='d-flex align-items-center gap-8 text-neutral-500 fw-medium'>
                <i className='ri-calendar-2-line' />
                Jan 17, 2024
              </div>
            </div>
            <Link
              href='/blog-details'
              className='w-100 max-h-194-px radius-8 overflow-hidden'
            >
              <img
                src='/assets/images/blog/blog4.png'
                alt=''
                className='w-100 h-100 object-fit-cover'
              />
            </Link>
            <div className='mt-20'>
              <p className='text-line-3 text-neutral-500'>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
                dolores explicabo corrupti, fuga necessitatibus fugiat adipisci
                quidem eveniet enim minus.
              </p>
              <span className='d-block border-bottom border-neutral-300 border-dashed my-20' />
              <div className='d-flex align-items-center justify-content-between flex-wrap gap-6'>
                <div className='d-flex align-items-center gap-8'>
                  <img
                    src='/assets/images/user-list/user-list1.png'
                    alt=''
                    className='w-40-px h-40-px rounded-circle object-fit-cover'
                  />
                  <div className='d-flex flex-column'>
                    <h6 className='text-sm mb-0'>John Doe</h6>
                    <span className='text-xs text-neutral-500'>1 day ago</span>
                  </div>
                </div>
                <Link
                  href='/blog-details'
                  className='btn btn-sm btn-primary-600 d-flex align-items-center gap-1 text-xs px-8 py-6'
                >
                  Read More
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default BlogLayer;
