The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<div class="py-16">
<div class="container m-auto px-6 text-gray-500 md:px-12 xl:px-0">
<div class="mx-auto grid gap-6 md:w-3/4 lg:w-full lg:grid-cols-3">
<div class="border border-gray-100 dark:border-gray-700 rounded-3xl bg-white dark:bg-gray-800 px-8 pt-12 shadow-2xl shadow-gray-600/10 dark:shadow-none sm:px-12 lg:px-8">
<div class="mb-12 space-y-4">
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Graphic Design</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
Obcaecati, quam? Eligendi, nulla numquam natus laborum porro at cum, consectetur
ullam tempora ipsa iste officia sed officiis! Incidunt ea animi officiis.
</p>
<a href="#" class="block font-medium text-primary">Know more</a>
</div>
<img
src="images/graphic.svg"
class="ml-auto w-2/3"
alt="illustration"
loading="lazy"
width="900"
height="600"
/>
</div>
<div class="border border-gray-100 dark:border-gray-700 rounded-3xl bg-white dark:bg-gray-800 px-8 py-12 shadow-2xl shadow-gray-600/10 dark:shadow-none sm:px-12 lg:px-8">
<div class="mb-12 space-y-4">
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">UI Design</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
Obcaecati, quam? Eligendi, nulla numquam natus laborum porro at cum, consectetur
ullam tempora ipsa iste officia sed officiis! Incidunt ea animi officiis.
</p>
<a href="#" class="block font-medium text-primary">Know more</a>
</div>
<img
src="images/ui-design.svg"
class="ml-auto w-2/3"
alt="illustration"
loading="lazy"
width="900"
height="600"
/>
</div>
<div class="border border-gray-100 dark:border-gray-700 rounded-3xl bg-white dark:bg-gray-800 px-8 py-12 shadow-2xl shadow-gray-600/10 dark:shadow-none sm:px-12 lg:px-8">
<div class="mb-12 space-y-4">
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">UX Design</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
Obcaecati, quam? Eligendi, nulla numquam natus laborum porro at cum, consectetur
ullam tempora ipsa iste officia sed officiis! Incidunt ea animi officiis.
</p>
<a href="#" class="block font-medium text-primary">Know more</a>
</div>
<img
src="images/ux-design.svg"
class="ml-auto w-2/3"
alt="illustration"
loading="lazy"
width="900"
height="600"
/>
</div>
</div>
</div>
</div>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<div class="relative py-16">
<div class="container relative m-auto px-6 text-gray-500 md:px-12">
<div class="grid gap-6 md:mx-auto md:w-8/12 lg:w-full lg:grid-cols-3">
<div class="group space-y-6 border border-gray-100 dark:border-gray-700 rounded-3xl bg-white dark:bg-gray-800 px-8 py-12 text-center shadow-2xl shadow-gray-600/10 dark:shadow-none">
<img
class="mx-auto w-24"
src="images/icons/code.png"
alt="illustration"
loading="lazy"
/>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Web development</h3>
<p>
Obcaecati, quam? Eligendi, nulla numquam natus laborum porro at cum, consectetur ullam
tempora ipsa iste officia sed officiis! Incidunt ea animi officiis.
</p>
<a
href="#"
class="relative mx-auto flex h-10 w-10 items-center justify-center before:absolute before:inset-0 before:rounded-full before:border before:border-gray-100 dark:before:border-gray-600 before:transition before:duration-300 group-hover:before:scale-125"
>
<span class="text-primary">→</span>
</a>
</div>
<div class="group space-y-6 border border-gray-100 dark:border-gray-700 rounded-3xl bg-white dark:bg-gray-800 px-8 py-12 text-center shadow-2xl shadow-gray-600/10 dark:shadow-none">
<img
class="mx-auto w-24"
src="images/icons/magic.png"
alt="illustration"
loading="lazy"
/>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Seo</h3>
<p>
Obcaecati, quam? Eligendi, nulla numquam natus laborum porro at cum, consectetur ullam
tempora ipsa iste officia sed officiis! Incidunt ea animi officiis.
</p>
<a
href="#"
class="relative mx-auto flex h-10 w-10 items-center justify-center before:absolute before:inset-0 before:rounded-full before:border before:border-gray-100 dark:before:border-gray-600 before:transition before:duration-300 group-hover:before:scale-125"
>
<span class="text-primary">→</span>
</a>
</div>
<div class="group space-y-6 border border-gray-100 dark:border-gray-700 rounded-3xl bg-white dark:bg-gray-800 px-8 py-12 text-center shadow-2xl shadow-gray-600/10 dark:shadow-none">
<img
class="mx-auto w-24"
src="images/icons/graphic.webp"
alt="illustration"
loading="lazy"
/>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Web Design</h3>
<p>
Obcaecati, quam? Eligendi, nulla numquam natus laborum porro at cum, consectetur ullam
tempora ipsa iste officia sed officiis! Incidunt ea animi officiis.
</p>
<a
href="#"
class="relative mx-auto flex h-10 w-10 items-center justify-center before:absolute before:inset-0 before:rounded-full before:border before:border-gray-100 dark:before:border-gray-600 before:transition before:duration-300 group-hover:before:scale-125"
>
<span class="text-primary">→</span>
</a>
</div>
</div>
</div>
</div>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<div class="py-16">
<div class="container m-auto px-6 text-gray-500 md:px-12 xl:px-0">
<div class="grid gap-6 lg:grid-cols-7">
<div class="lg:col-span-3">
<div class="space-y-4 rounded-3xl border border-gray-100 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none bg-white dark:bg-gray-800 px-8 py-12 sm:px-12 lg:px-8">
<img
src="images/service.webp"
alt="illustration"
loading="lazy"
width="900"
height="600"
/>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Web development</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
Obcaecati, quam? Eligendi, nulla numquam natus laborum porro at cum, consectetur
ullam tempora ipsa iste officia sed officiis! Incidunt ea animi officiis.
</p>
<a href="#" class="block font-medium text-primary">Know more</a>
</div>
</div>
<div class="lg:col-span-2">
<div
class="flex h-full flex-col justify-between rounded-3xl border border-gray-100 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none bg-white dark:bg-gray-800 px-8 py-12 sm:px-12 lg:px-8"
>
<div class="mb-6 space-y-4">
<img
src="images/service2.webp"
alt="illustration"
loading="lazy"
width="616"
height="400"
/>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Web development mentoring.</h3>
<p class="text-gray-600 dark:text-gray-300">
Obcaecati, quam? Eligendi, nulla numquam natus laborum porro at cum, consectetur
ullam tempora ipsa iste officia sed officiis! Incidunt ea animi officiis.
</p>
</div>
<a href="#" class="block font-medium text-primary">Know more</a>
</div>
</div>
<div class="lg:col-span-2">
<div
class="flex h-full flex-col justify-between rounded-3xl border border-gray-100 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none bg-white dark:bg-gray-800 px-8 py-12 sm:px-12 lg:px-8"
>
<div class="mb-6 space-y-4">
<img
src="images/service3.webp"
alt="illustration"
loading="lazy"
width="675"
height="450"
/>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Web development training</h3>
<p class="text-gray-600 dark:text-gray-300">
Obcaecati, quam? Eligendi, nulla numquam natus laborum porro at cum, consectetur
ullam tempora ipsa iste officia sed officiis! Incidunt ea animi officiis.
</p>
</div>
<a href="#" class="block font-medium text-primary">Know more</a>
</div>
</div>
</div>
</div>
</div>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<div class="py-16">
<div class="xl:container m-auto px-6 text-gray-500 md:px-12">
<div>
<h2 class="mt-4 text-2xl font-bold text-gray-700 dark:text-white md:text-4xl">
A technology-first approach to payments <br class="lg:block" hidden />
and finance
</h2>
</div>
<div
class="mt-16 grid divide-x divide-y divide-gray-100 dark:divide-gray-700 overflow-hidden rounded-3xl border border-gray-100 dark:border-gray-700 sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0 xl:grid-cols-4"
>
<div class="group relative bg-white dark:bg-gray-800 transition hover:z-[1] hover:shadow-2xl hover:shadow-gray-600/10">
<div class="relative space-y-8 py-12 p-8">
<img
src="https://cdn-icons-png.flaticon.com/512/4341/4341139.png"
class="w-12"
width="512"
height="512"
alt="burger illustration"
/>
<div class="space-y-2">
<h5
class="text-xl font-medium text-gray-700 dark:text-white transition group-hover:text-primary"
>
First feature
</h5>
<p class="text-sm text-gray-600 dark:text-gray-300">
Neque Dolor, fugiat non cum doloribus aperiam voluptates nostrum.
</p>
</div>
<a href="#" class="flex items-center justify-between group-hover:text-primary">
<span class="text-sm">Read more</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 -translate-x-4 text-2xl opacity-0 transition duration-300 group-hover:translate-x-0 group-hover:opacity-100">
<path fill-rule="evenodd" d="M12.97 3.97a.75.75 0 011.06 0l7.5 7.5a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 11-1.06-1.06l6.22-6.22H3a.75.75 0 010-1.5h16.19l-6.22-6.22a.75.75 0 010-1.06z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<div class="group relative bg-white dark:bg-gray-800 transition hover:z-[1] hover:shadow-2xl hover:shadow-gray-600/10">
<div class="relative space-y-8 py-12 p-8">
<img
src="https://cdn-icons-png.flaticon.com/512/4341/4341134.png"
class="w-12"
width="512"
height="512"
alt="burger illustration"
/>
<div class="space-y-2">
<h5
class="text-xl font-medium text-gray-700 dark:text-white transition group-hover:text-primary"
>
Second feature
</h5>
<p class="text-sm text-gray-600 dark:text-gray-300">
Neque Dolor, fugiat non cum doloribus aperiam voluptates nostrum.
</p>
</div>
<a href="#" class="flex items-center justify-between group-hover:text-primary">
<span class="text-sm">Read more</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 -translate-x-4 text-2xl opacity-0 transition duration-300 group-hover:translate-x-0 group-hover:opacity-100">
<path fill-rule="evenodd" d="M12.97 3.97a.75.75 0 011.06 0l7.5 7.5a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 11-1.06-1.06l6.22-6.22H3a.75.75 0 010-1.5h16.19l-6.22-6.22a.75.75 0 010-1.06z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<div class="group relative bg-white dark:bg-gray-800 transition hover:z-[1] hover:shadow-2xl hover:shadow-gray-600/10">
<div class="relative space-y-8 py-12 p-8">
<img
src="https://cdn-icons-png.flaticon.com/512/4341/4341160.png"
class="w-12"
width="512"
height="512"
alt="burger illustration"
/>
<div class="space-y-2">
<h5
class="text-xl font-medium text-gray-700 dark:text-white transition group-hover:text-primary"
>
Third feature
</h5>
<p class="text-sm text-gray-600 dark:text-gray-300">
Neque Dolor, fugiat non cum doloribus aperiam voluptates nostrum.
</p>
</div>
<a href="#" class="flex items-center justify-between group-hover:text-primary">
<span class="text-sm">Read more</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 -translate-x-4 text-2xl opacity-0 transition duration-300 group-hover:translate-x-0 group-hover:opacity-100">
<path fill-rule="evenodd" d="M12.97 3.97a.75.75 0 011.06 0l7.5 7.5a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 11-1.06-1.06l6.22-6.22H3a.75.75 0 010-1.5h16.19l-6.22-6.22a.75.75 0 010-1.06z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<div
class="group relative bg-gray-50 dark:bg-gray-900 transition hover:z-[1] hover:shadow-2xl hover:shadow-gray-600/10"
>
<div
class="relative space-y-8 py-12 p-8 transition duration-300 group-hover:bg-white dark:group-hover:bg-gray-800"
>
<img
src="https://cdn-icons-png.flaticon.com/512/4341/4341025.png"
class="w-12"
width="512"
height="512"
alt="burger illustration"
/>
<div class="space-y-2">
<h5
class="text-xl font-medium text-gray-700 dark:text-white transition group-hover:text-primary"
>
More features
</h5>
<p class="text-sm text-gray-600 dark:text-gray-300">
Neque Dolor, fugiat non cum doloribus aperiam voluptates nostrum.
</p>
</div>
<a href="#" class="flex items-center justify-between group-hover:text-primary">
<span class="text-sm">Read more</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 -translate-x-4 text-2xl opacity-0 transition duration-300 group-hover:translate-x-0 group-hover:opacity-100">
<path fill-rule="evenodd" d="M12.97 3.97a.75.75 0 011.06 0l7.5 7.5a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 11-1.06-1.06l6.22-6.22H3a.75.75 0 010-1.5h16.19l-6.22-6.22a.75.75 0 010-1.06z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<div class="py-16">
<div class="container m-auto space-y-8 px-6 md:px-12 lg:px-20">
<div>
<h2 class="mt-4 text-center text-2xl font-bold text-gray-800 dark:text-white md:text-4xl">
A technology-first approach to payments <br class="lg:block" hidden />
and finance
</h2>
</div>
<div class="mt-16 grid gap-8 sm:grid-cols-2 md:-mx-8 lg:grid-cols-3">
<div class="p-8 py-12 sm:p-12 rounded-3xl bg-white border border-gray-100 dark:shadow-none dark:border-gray-700 dark:bg-gray-800 bg-opacity-50 shadow-2xl shadow-gray-600/10">
<div class="space-y-16">
<div
aria-hidden="true"
class="flex h-10 w-10 items-center justify-center rounded-full bg-pink-50 dark:bg-gray-700"
>
<span class="font-bold text-pink-600 dark:text-pink-300">1</span>
</div>
<div class="space-y-4">
<h3 class="text-2xl font-semibold text-gray-800 transition dark:text-white">
First feature
</h3>
<p class="text-gray-600 dark:text-gray-300">
Quae accusantium, laudantium recusandae tenetur fugiat non cum doloribus aperiam
voluptates nostrum.
</p>
</div>
<img
src="https://cdn-icons-png.flaticon.com/512/7983/7983132.png"
class="w-16"
width="512"
height="512"
alt="burger illustration"
/>
</div>
</div>
<div class="p-8 py-12 sm:p-12 rounded-3xl bg-white border border-gray-100 dark:shadow-none dark:border-gray-700 dark:bg-gray-800 bg-opacity-50 shadow-2xl shadow-gray-600/10">
<div class="space-y-16">
<div
aria-hidden="true"
class="flex h-10 w-10 items-center justify-center rounded-full bg-pink-50 dark:bg-gray-700"
>
<span class="font-bold text-pink-600 dark:text-pink-300">2</span>
</div>
<div class="space-y-4">
<h3 class="text-2xl font-semibold text-gray-800 transition dark:text-white">
Second feature
</h3>
<p class="text-gray-600 dark:text-gray-300">
Quae accusantium, laudantium recusandae tenetur fugiat non cum doloribus aperiam
voluptates nostrum.
</p>
</div>
<img
src="https://cdn-icons-png.flaticon.com/512/7983/7983306.png"
class="w-16"
width="512"
height="512"
alt="burger illustration"
/>
</div>
</div>
<div class="p-8 py-12 sm:p-12 rounded-3xl bg-white border border-gray-100 dark:shadow-none dark:border-gray-700 dark:bg-gray-800 bg-opacity-50 shadow-2xl shadow-gray-600/10">
<div class="space-y-16">
<div
aria-hidden="true"
class="flex h-10 w-10 items-center justify-center rounded-full bg-purple-50 dark:bg-gray-700"
>
<span class="font-bold text-purple-600 dark:text-purple-300">3</span>
</div>
<div class="space-y-4">
<h3 class="text-2xl font-semibold text-gray-800 transition dark:text-white">
Third feature
</h3>
<p class="text-gray-600 dark:text-gray-300">
Quae accusantium, laudantium recusandae tenetur fugiat non cum doloribus aperiam
voluptates nostrum.
</p>
</div>
<img
src="https://cdn-icons-png.flaticon.com/512/7983/7983333.png"
class="w-16"
width="512"
height="512"
alt="burger illustration"
/>
</div>
</div>
</div>
</div>
</div>