<section>
<div class="relative px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl">
<div class="max-w-xl mx-auto text-center lg:text-balance">
<p class="text-sm leading-normal font-bold uppercase text-accent-600">
Tagline
</p>
<h2
class="text-xl leading-tight tracking-tight sm:text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-base-900"
>
Key updates & releases
</h2>
<p class="text-base leading-normal mt-4 text-base-500 font-medium">
Explore the evolution of our product, from the initial launch to the
latest enhancements.
</p>
</div>
<div class="flex flex-col grid-cols-9 mx-auto mt-12 md:grid">
<!-- left -->
<div class="flex flex-row-reverse md:contents">
<div class="col-start-1 col-end-5 my-4 ml-auto">
<div class="relative size-full p-4 bg-base-50 lg:p-8 rounded-xl">
<p
class="text-sm leading-normal font-bold uppercase text-accent-600"
>
<time datetime="01.08.2024">01.08.2024</time>
</p>
<h3
class="text-base leading-normal sm:text-lg md:text-xl mt-8 text-base-900 font-medium"
>
The dawn of version 3.0.0
</h3>
<p class="text-base leading-normal mt-4 text-base-500 font-medium">
Welcome to the future with Version 3.0.0! This monumental update
unveils a completely revamped interface, groundbreaking AI-powered
tools, and seamless integration with your favorite apps. Get ready
to explore uncharted territories in productivity!
</p>
<div class="mt-8">
<a
class="text-md leading-normal text-accent-500 font-medium flex items-center gap-2 hover:text-base-900"
href="#_"
>
Read further
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="relative col-start-5 col-end-6 mr-10 md:mx-auto">
<div class="flex items-center justify-center w-3 h-full">
<div
class="h-full w-[0.05rem] bg-base-200 pointer-events-none"
></div>
</div>
<div
class="absolute w-3 h-3 -mt-3 bg-white border-2 border-accent-500 rounded-full top-1/2"
></div>
</div>
</div>
<!-- right -->
<div class="flex md:contents">
<div class="relative col-start-5 col-end-6 mr-10 md:mx-auto">
<div class="flex items-center justify-center w-3 h-full">
<div
class="h-full w-[0.05rem] bg-base-200 pointer-events-none"
></div>
</div>
<div
class="absolute w-3 h-3 -mt-3 bg-white border-2 border-accent-500 rounded-full top-1/2"
></div>
</div>
<div class="col-start-6 col-end-10 my-4 mr-auto">
<div class="relative size-full p-4 bg-base-50 lg:p-8 rounded-xl">
<p
class="text-sm leading-normal font-bold uppercase text-accent-600"
>
<time datetime="01.08.2024">01.08.2024</time>
</p>
<h3
class="text-base leading-normal sm:text-lg md:text-xl mt-8 text-base-900 font-medium"
>
Version 3.1.0: the cosmic leap
</h3>
<p class="text-base leading-normal mt-4 text-base-500 font-medium">
Version 3.1.0 propels you into the cosmos with faster processing
speeds, enhanced customization options, and new cosmic-themed
visual elements. Experience the power of the stars at your
fingertips.
</p>
<div class="mt-8">
<a
class="text-md leading-normal text-accent-500 font-medium flex items-center gap-2 hover:text-base-900"
href="#_"
>
Read further
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
