<section class="pb-64 bg-gray-100 overflow-hidden">
<nav class="relative bg-gray-900 px-6 sm:px-12 pt-4">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
<a class="inline-block" href="#">
<img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto">
</a>
</div>
<div class="3xl:hidden pb-4">
<button class="flex navbar-burger ml-auto items-center justify-center w-14 h-14 rounded-full bg-white hover:bg-gray-200">
<svg width="20" height="9" viewbox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.75" y1="1.25" x2="19.25" y2="1.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line><line x1="0.75" y1="8.25" x2="13.25" y2="8.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line></svg>
</button>
</div>
<div class="hidden 3xl:block">
<div class="pb-2"><a class="inline-block mr-6 text-xs text-gray-400 hover:text-gray-300" href="#">Account</a><a class="inline-block text-xs text-gray-400 hover:text-gray-300" href="#">Saved</a></div>
<div>
<div class="flex relative">
<div class="w-5/12 mr-auto">
<div class="pt-5 pr-24 border-t border-gray-100 border-opacity-10">
<ul class="flex items-center justify-end">
<li class="mr-6">
<a class="inline-flex items-center pb-5 pr-8 text-sm text-white hover:text-gray-200" href="#">
<span class="mr-4">Collection</span>
<svg width="12" height="7" viewbox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2L6 6L2 2" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
</svg>
</a>
<div class="border-b-4 border-lime-900"></div>
</li>
<li class="pb-6 mr-20"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">Projects</a></li>
<li class="pb-6"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">About</a></li>
</ul>
</div>
</div>
<div class="w-auto 3xl:w-3/12 mr-4 3xl:mr-12">
<div class="pt-5 2xl:pl-10 3xl:pl-24 border-t border-gray-100 border-opacity-10">
<div style="height: 1px;"></div>
<ul class="flex items-center">
<li class="pb-6 mr-12">
<a class="inline-flex items-center text-sm text-white hover:text-gray-200" href="#">
<span class="mr-4">How to Start</span>
<svg width="12" height="7" viewbox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2L6 6L2 2" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
</svg>
</a>
</li>
<li class="pb-6"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">Design</a></li>
</ul>
</div>
</div>
<div class="w-auto flex-shrink-0">
<div class="flex -mt-4 items-center">
<a class="inline-block w-full sm:w-auto px-7 py-4 mr-12 text-center font-medium text-white border border-white hover:border-gray-200 hover:text-gray-200 rounded" href="#">Get Started</a>
<button class="flex items-center justify-center w-14 h-14 rounded-full bg-white hover:bg-gray-200">
<svg width="20" height="9" viewbox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.75" y1="1.25" x2="19.25" y2="1.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line><line x1="0.75" y1="8.25" x2="13.25" y2="8.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line></svg>
</button>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="flex flex-wrap">
<div class="w-full lg:w-2/5 xl:w-1/2 relative order-last lg:order-first">
<img class="block w-full h-192 object-cover" src="wrexa-assets/images/people-havinf-fun-placeholder.png" alt="">
<div class="h-26 bg-white"></div>
<div class="absolute bottom-0 right-0 w-full sm:w-auto -mb-32 sm:mr-6 xl:mr-24 px-4">
<div class="max-w-sm mx-auto px-6 pt-5 pb-18 bg-white shadow rounded-xl">
<div class="flex mb-16 items-center justify-between">
<button class="inline-flex items-center justify-center w-10 h-10 bg-indigo-500 hover:bg-indigo-600 text-white rounded" role="button">
<svg width="10" height="10" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3.60156" width="2.4" height="10.4" rx="1" fill="currentColor"></rect><rect x="9.60156" y="4" width="2.4" height="9.6" rx="1" transform="rotate(90 9.60156 4)" fill="currentColor"></rect></svg>
</button>
<svg width="35" height="35" viewbox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="17" cy="18" r="16.5" stroke="black" stroke-opacity="0.12"></circle>
<path d="M16.8645 1.27174C26.1782 1.27174 33.7285 8.82201 33.7285 18.1357" stroke="#5B2FE2" stroke-width="1.5" stroke-linecap="round"></path>
</svg>
</div>
<img class="block mx-auto mb-12" src="wrexa-assets/images/green-chair.png" alt="">
<div class="flex items-center justify-center">
<a class="inline-block" href="#">
<svg width="7" height="12" viewbox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 10L1 6L5 2" stroke="#232126" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
</svg>
</a>
<a class="block mx-14 text-center" href="#">
<h3 class="text-2xl">Kirk Oak</h3>
<span class="text-xs text-gray-400">New in</span>
</a>
<a class="inline-block" href="#">
<svg width="7" height="12" viewbox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2L6 6L2 10" stroke="#232126" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-3/5 xl:w-1/2 bg-gray-800 relative">
<div class="px-4 pt-32 pb-16">
<div class="max-w-lg mx-auto">
<div class="mb-32">
<h1 class="font-heading text-5xl sm:text-6xl text-white mb-10">Find your editor and create your home.</h1>
<a class="inline-flex items-center text-lg text-white" href="#">
<span class="mr-6">Exploring the shift of today</span>
<svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="white"></path>
</svg>
</a>
</div>
<a class="inline-block w-full sm:w-auto px-7 py-4 mb-40 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Discover Now</a>
<div><a class="inline-block mr-24 text-gray-500 hover:text-gray-400 text-sm" href="#">Let’s talk</a><a class="inline-block text-gray-500 hover:text-gray-400 text-sm" href="#">Scroll for more</a></div>
</div>
</div>
<div class="hidden sm:block absolute bottom-0 right-0 h-26 w-26 bg-white">
<div class="absolute bottom-0 left-1/2 mb-8 transform translate-x-1/2">
<div class="h-26 w-px bg-white"></div>
<div class="h-18 w-px bg-gray-800"></div>
</div>
</div>
</div>
</div>
<div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 sm:max-w-xs z-50">
<div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-80"></div>
<nav class="relative flex flex-col pt-12 pb-40 h-full w-full bg-gray-200 overflow-y-auto">
<div class="px-12">
<div>
<a class="inline-block mb-52" href="#">
<img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto">
</a>
<button type="button" aria-label="Close"></button>
</div>
<ul>
<li class="mb-6">
<a class="flex items-center justify-between" href="#">
<span>Collection</span>
<svg width="12" height="7" viewbox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2L6 6L2 2" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
</svg>
</a>
</li>
<li class="mb-6"><a class="inline-block" href="#">Projects</a></li>
<li class="mb-16"><a class="inline-block" href="#">About</a></li>
<li class="mb-6"><a class="inline-block" href="#">How to Start</a></li>
<li><a class="inline-block" href="#">Design</a></li>
</ul>
</div>
</nav>
<div class="absolute bottom-0 left-0 w-full">
<a class="flex items-center pt-4 pb-5 pl-6 pr-4 bg-white" href="#">
<div class="relative mr-4">
<img class="w-12 h-12 rounded-full" src="wrexa-assets/images/avatar2.png" alt="">
<div class="absolute bottom-0 left-0 -ml-2 flex items-center justify-center w-6 h-6 bg-green-800 rounded-full text-white text-xs">1</div>
</div>
<div class="pr-5 mr-auto">
<h4 class="text-xs text-gray-400">Account</h4>
<span>matloay</span>
</div>
<svg width="12" height="7" viewbox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2L6 6L2 2" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
</section>