<header class="relative h-[980px] md:h-[680px]">
<div class="absolute -z-10 h-full w-full bg-[#FAFF47] md:w-2/5">
<img class="absolute bottom-0 px-5 md:right-[-100px] md:px-0" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656979028/webwinds/images/Hero-image-4_ssy9pf.svg" alt="" />
</div>
<nav class="container mx-auto w-full max-w-7xl py-4 px-4 md:flex md:items-center md:justify-between md:py-4 lg:px-0">
<div class="flex items-center justify-between">
<a href="#" class="flex items-center text-xl font-bold tracking-tighter text-slate-900 md:text-2xl">
LUMAX
</a>
<!-- Mobile menu button -->
<div class="flex md:hidden">
<button type="button" class="text-slate-900 focus:text-slate-600 focus:outline-none" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
<path fill-rule="evenodd"
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z">
</path>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="hidden w-full md:flex md:items-center md:justify-between md:pl-10">
<div class="flex flex-col text-slate-500 md:flex-row">
<a href="#" class="relative my-4 mr-8 inline-block font-medium text-slate-900 after:absolute after:-inset-y-1 after:-inset-x-3 after:-z-10 after:block after:rounded-sm hover:after:bg-[#FCFF89] md:my-0">Home</a>
<a href="#" class="relative my-4 mr-8 text-slate-900 after:absolute after:-inset-y-1 after:-inset-x-3 after:-z-10 after:block after:rounded-sm hover:after:bg-[#FCFF89] md:my-0">Features</a>
<a href="#" class="relative my-4 mr-8 text-slate-900 after:absolute after:-inset-y-1 after:-inset-x-3 after:-z-10 after:block after:rounded-sm hover:after:bg-[#FCFF89] md:my-0">About</a>
<a href="#" class="relative my-4 mr-8 text-slate-900 after:absolute after:-inset-y-1 after:-inset-x-3 after:-z-10 after:block after:rounded-sm hover:after:bg-[#FCFF89] md:my-0">Support</a>
</div>
<div class="flex flex-wrap justify-center">
<button type="button"
class="my-4 inline-flex w-full items-center justify-center rounded-md border-0 bg-slate-900 py-2 px-5 text-base text-white hover:bg-slate-700 focus:outline-none md:my-0 md:w-auto">
TRY FREE
</button>
</div>
</div>
</nav>
<main class="container mx-auto flex max-w-7xl justify-end px-4 md:flex-row md:px-0">
<div class="mt-5 md:mt-10 md:w-1/2">
<h1 class="text-6xl font-semibold text-slate-900 md:text-6xl md:leading-[4.5rem]">
We build digital products & Services
</h1>
<p class="mt-5 text-lg font-light md:mt-10 md:w-3/4 md:leading-[2rem] md:text-slate-500">
Open a free account in minutes right from your phone, and make your
money go further.
</p>
<div class="my-5 flex items-center justify-between md:my-10 md:w-4/5">
<div>
<h2 class="flex text-6xl font-semibold text-slate-900">
<span class="text-2xl font-medium md:text-slate-500">$</span>
1.5
</h2>
<p class="text-lg md:text-slate-500">Per month</p>
</div>
<a href="#" class="relative flex h-[140px] w-[140px] items-center justify-center rounded-full bg-[url('https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977127/webwinds/images/pattren-2_yrgqk9.svg')]">
<p class="text-white">
Get
<svg class="inline-flex" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 17L17.5 7" stroke="currentcolor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.5 7H17.5V17" stroke="currentcolor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<br />
Started
</p>
</a>
</div>
</div>
</main>
</header>
<section class="h-full w-full overflow-hidden bg-[#124944]">
<div class="container mx-auto flex h-full max-w-7xl flex-col-reverse items-center justify-between px-4 pt-10 md:flex-row md:px-0">
<div class="flex items-center md:w-7/12">
<img class="h-40 md:h-auto" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977120/webwinds/images/lumax-2_ujpx5l.png" alt="" />
<div>
<p class="relative text-xs font-light text-white md:text-lg">
<span class="absolute left-[-40px] top-8 h-[1px] w-14 bg-white md:left-[-100px] md:w-40"></span>
<span class="absolute left-5 top-6 md:left-16 md:top-5">OUR PROJECT VISION</span>
</p>
<h2 class="text-1xl mt-16 font-semibold text-white md:text-4xl md:leading-[3.2rem]">
The perfect smart home products for your home.
</h2>
</div>
</div>
<div class="md:w-4/12">
<div class="flex items-center">
<img class="h-16 rounded-full border-2 border-solid border-white" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656979437/webwinds/avatar/avatar-1_fiopzz.jpg"
alt="" />
<div class="ml-5">
<p class="text-lg font-semibold text-white">Basura monutra</p>
<p class="text-sm text-slate-300">Creative director</p>
</div>
</div>
<hr class="my-5 w-52" />
<p class="mb-10 font-light leading-[2rem] text-white md:mb-0">
Had a very pleasant experience dealing with Smart Home. They offer
top of the line automation solutions and have a very professional
team that delivers what is promised. Anyone looking for...
</p>
</div>
</div>
</section>
