<section class="relative pb-24">
<div class="relative pt-24">
<div class="hidden lg:block absolute top-0 right-0 w-1/2 pt-24 xl:pt-14">
<img class="block ml-auto max-h-192" src="wrexa-assets/images/app-message-background-photo.png" alt="">
</div>
<div class="container px-4 mx-auto">
<div class="flex items-center mb-24 sm:mb-40">
<span class="font-heading text-xl">01</span>
<div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
<span class="font-heading text-xl">Introduction</span>
</div>
<div class="max-w-md 3xl:max-w-2xl mx-auto lg:mx-0 xl:ml-24">
<h1 class="font-heading text-5xl sm:text-6xl md:text-7xl mb-14">I’m happy my home found me</h1>
<p class="max-w-sm font-light mb-16 sm:mb-32">The house by the pond cras ornare, some chords for a three moments, like a sense of truth that comes from within. The final game.</p>
<a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Learn More</a>
</div>
</div>
<div class="lg:hidden mt-24">
<img class="block ml-auto max-h-192" src="wrexa-assets/images/app-message-background-photo.png" alt="">
</div>
</div>
<div class="container px-4 mx-auto mt-24 lg:mt-52">
<div class="sm:flex"><a class="inline-block w-full sm:w-auto sm:mr-24 md:mr-40 mb-2 sm:mb-0 text-gray-900 hover:text-gray-700" href="#">Download application</a><a class="inline-block w-full sm:w-auto sm:mr-auto mb-2 sm:mb-0 text-gray-900 hover:text-gray-700" href="#">Select plan</a><a class="inline-block w-full sm:w-auto text-gray-900 hover:text-gray-700" href="#">Start a conversation</a></div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
