<!-- Blog Start -->
<section class="pt-12 container mx-auto px-6">
<div class="flex">
<div class="space-y-5">
<h6 class="text-blue-800 text-sm font-bold uppercase mb-2">
Blogs
</h6>
<h3
class="mb-4 md:text-3xl md:leading-normal text-2xl leading-normal font-semibold"
>
Reads Our Latest <br />
News & Blog
</h3>
<p class="text-base leading-relaxed text-gray-500">
Our blog section serves as a platform for sharing our knowledge,
experiences, and ideas with our readers.
</p>
</div>
</div>
<!-- Articles-->
<div
class=" grid gap-6 mt-8 md:grid-cols-2 lg:grid-cols-3 pb-12"
>
<!-- 1st Article -->
<article
class="relative flex flex-col flex-wrap transition duration-300 ease-in-out rounded-2xl group hover:shadow-xl"
>
<!-- Image -->
<div
class="relative z-10 w-full overflow-hidden aspect-w-2 aspect-h-1 rounded-t-2xl bg-gray-50"
>
<a href="#">
<img
class="object-cover object-center w-full h-full opacity-90 rounded-t-2xl group-hover:scale-110 lazy"
src="https://res.cloudinary.com/daiyj7fxl/image/upload/v1685001401/components/airfocus-lTWC_5OjyYc-unsplash_1_cxaswx_e25jxz.webp"
/>
</a>
<p>hey</p>
</div>
<!-- Content -->
<div
class="box-border flex flex-col justify-between flex-1 w-full p-6 transition duration-300 ease-in-out bg-white border-b-2 border-l-2 border-r-2 border-gray-100 rounded-b-2xl xl:p-7 group-hover:border-transparent"
>
<div>
<a
href="#"
class="relative z-10 font-medium tracking-widest text-blue-700 uppercase duration-300 ease-in-out text-xs transition-color hover:text-blue-600"
>
Design
</a>
<h3
class="h5 text-lg font-medium hover:text-blue-600 transition duration-500 mt-3 leading-tight text-gray-900 ease-in-out lg:text-xl sm:text-2xl xl:text-xl decoration-gray-800 decoration-2"
>
<a href="#">
<span class="absolute inset-0" ></span>
How to increase conversion with design
<span class="sr-only"
>How to increase conversion with design</span
>
</a>
</h3>
<p class="block mt-4 text-base leading-relaxed text-gray-500">
Lorem ipsum dolor sit amet tempus bendum labore
laoreet.Hendrerit lobortis a leo curabitur faucibus sapien
ullamcorper do labore odio.
</p>
</div>
<!-- Author -->
<div class="flex items-center mt-5 sm:mt-6">
<a href="#" class="relative w-10 h-10 rounded-xl bg-gray-50">
<img
src="https://res.cloudinary.com/daiyj7fxl/image/upload/v1681309365/13486463_36..04_l9okrf.jpg"
class="object-cover object-center w-full h-full transition opacity-90 rounded-xl lazy"
/>
</a>
<div class="ml-3">
<a
href="#"
class="relative text-sm font-medium text-gray-700 hover:underline"
>
John Doe
</a>
<p class="text-sm text-gray-500">
<time datetime="2021-12-16">Dec 16 2021</time>
<span > · </span>
<span> 6 min read </span>
</p>
</div>
</div>
</div>
</article>
<!-- 2nd Article -->
<article
class="relative flex flex-col flex-wrap transition duration-300 rounded-2xl group hover:shadow-xl"
>
<!-- Image -->
<div
class="relative z-10 w-full overflow-hidden aspect-w-2 aspect-h-1 rounded-t-2xl bg-gray-50"
>
<a href="#">
<img
class="object-cover object-center w-full h-full transition duration-300 ease-in-out rounded-t-2xl group-hover:scale-110 lazy"
src="https://res.cloudinary.com/daiyj7fxl/image/upload/v1685001401/components/bg-home_oxiq4q_ynkmm5.webp"
/>
</a>
</div>
<!-- Content -->
<div
class="box-border flex flex-col justify-between flex-1 w-full p-6 transition duration-300 ease-in-out bg-white border-b-2 border-l-2 border-r-2 border-gray-100 rounded-b-2xl xl:p-7 group-hover:border-transparent"
>
<div>
<a
href="#"
class="relative z-10 font-medium tracking-widest text-blue-700 uppercase duration-300 ease-in-out text-xs transition-color hover:text-blue-600"
>
Startup
</a>
<h3
class="h5 text-lg font-medium hover:text-blue-600 transition duration-500 mt-3 leading-tight text-gray-900 ease-in-out lg:text-xl sm:text-2xl xl:text-xl decoration-gray-800 decoration-2"
>
<a href="#">
<span class="absolute inset-0"></span>
15 Ways to Grow your Startup
<span class="sr-only">15 Ways to Grow your Startup</span>
</a>
</h3>
<p class="block mt-4 text-base leading-relaxed text-gray-500">
Lorem ipsum dolor sit amet tempus bendum labore
laoreet.Hendrerit lobortis a leo curabitur faucibus sapien
ullamcorper do labore odio.
</p>
</div>
<!-- Author -->
<div class="flex items-center mt-5 sm:mt-6">
<a href="#" class="relative w-10 h-10 rounded-xl bg-gray-50">
<img
src="https://res.cloudinary.com/daiyj7fxl/image/upload/v1681309365/13486463_36..04_l9okrf.jpg"
class="object-cover object-center w-full h-full rounded-xl lazy"
/>
</a>
<div class="ml-3">
<a
href="#"
class="relative text-sm font-medium text-gray-700 hover:underline"
>
John Doe
</a>
<p class="text-sm text-gray-500">
<time datetime="2021-12-16">Jan 12 2022</time>
<span > · </span>
<span> 8 min read </span>
</p>
</div>
</div>
</div>
</article>
<!-- 3rd Article -->
<article
class="relative flex flex-col flex-wrap transition duration-300 ease-in-out rounded-2xl group hover:shadow-xl"
>
<!-- Image -->
<div
class="relative z-10 w-full overflow-hidden aspect-w-2 aspect-h-1 rounded-t-2xl bg-gray-50"
>
<a href="#">
<img
class="object-cover object-center w-full h-full transition duration-300 ease-in-out rounded-t-2xl group-hover:scale-110 lazy"
src="https://res.cloudinary.com/daiyj7fxl/image/upload/v1685001401/components/airfocus-lTWC_5OjyYc-unsplash_1_cxaswx_e25jxz.webp"
/>
</a>
</div>
<!-- Content -->
<div
class="box-border flex flex-col justify-between flex-1 w-full p-6 transition duration-300 ease-in-out bg-white border-b-2 border-l-2 border-r-2 border-gray-100 rounded-b-2xl xl:p-7 group-hover:border-transparent"
>
<div>
<a
href="#"
class="relative z-10 font-medium tracking-widest text-blue-700 uppercase duration-300 ease-in-out text-xs transition-color hover:text-blue-600"
>
Advertising
</a>
<h3
class="h5 text-lg font-medium hover:text-blue-600 transition duration-500 mt-3 leading-tight text-gray-900 ease-in-out lg:text-xl sm:text-2xl xl:text-xl decoration-gray-800 decoration-2"
>
<a href="#"> The Best way to get Free Advertising </a>
</h3>
<p class="block mt-4 text-base leading-relaxed text-gray-500">
Lorem ipsum dolor sit amet tempus bendum labore
laoreet.Hendrerit lobortis a leo curabitur faucibus sapien
ullamcorper do labore odio.
</p>
</div>
<!-- Author -->
<div class="flex items-center mt-5 sm:mt-6">
<a href="#" class="relative w-10 h-10 rounded-xl bg-gray-50">
<img
src="https://res.cloudinary.com/daiyj7fxl/image/upload/v1681309365/13486463_36..04_l9okrf.jpg"
class="object-cover object-center w-full h-full opacity-90 rounded-xl lazy"
/>
</a>
<div class="ml-3">
<a
href="#"
class="relative text-sm font-medium text-gray-700 hover:underline"
>
John Doe
</a>
<p class="text-sm text-gray-500">
<time datetime="2021-12-16">Sep 24 2021</time>
<span > · </span>
<span> 5 min read </span>
</p>
</div>
</div>
</div>
</article>
</div>
</section>
<!-- Blog End -->