<section class="relative bg-coolGray-50 overflow-hidden" x-data="{ mobileNavOpen: false }">
<nav>
<div class="container mx-auto px-4">
<div class="flex h-24 items-center">
<a class="inline-block" href="#">
<img class="h-5" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
</a>
<button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden py-1 ml-auto">
<svg width="44" height="16" viewBox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="44" height="2" rx="1" fill="black"></rect><rect y="14" width="44" height="2" rx="1" fill="black"></rect></svg>
</button>
<div class="hidden lg:flex ml-auto mr-12 items-center"><a class="inline-block hover:underline mr-10" href="#">About</a><a class="inline-block hover:underline mr-10" href="#">Services</a><a class="inline-block hover:underline mr-10" href="#">Projects</a><a class="inline-block hover:underline" href="#">Contact us</a></div>
<a class="group hidden lg:inline-flex py-4 px-8 items-center justify-center leading-none font-medium text-black hover:text-white border border-black rounded-full hover:bg-black transition duration-200" href="#">
<span class="mr-2">Get consulation</span>
<span class="group-hover:rotate-45 transform transition duration-100">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 1L1 9" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9 8.33571V1H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</a>
</div>
</div>
</nav>
<div class="container mx-auto px-4">
<div class="relative mx-auto mb-12 pt-12 pb-64 xs:pb-40 lg:pb-12 border-b">
<h1 class="font-heading text-6xl sm:text-9xl md:text-10xl xl:text-13xl tracking-tightest">We create modern architecture</h1>
<div class="absolute bottom-0 right-0 mb-10 max-w-sm ml-auto text-right">
<span class="block mb-1 text-xs">Since</span>
<span class="block mb-3 text-xs">1979</span>
<p>
<span class="block">Duoloco® is a strategic branding agency</span>
<span class="block">focused on brand creation, rebrands, and brand</span>
<span class="block">transformation for progressive companies.</span>
</p>
</div>
</div>
<div class="flex flex-wrap -mx-3 align-items-end">
<div class="w-full md:w-6/12 lg:w-7/12 px-3 relative">
<div class="absolute top-0 right-0 w-44 h-44 mt-4 mr-5 flex items-center justify-center">
<img class="absolute top-0 left-0 animate-spinSlow" style="animation-direction: reverse;" src="asitrastudio-assets/headers/spin-bonus.svg" alt="">
<img class="relative" src="asitrastudio-assets/headers/arrow-spin.svg" alt="">
</div>
<img class="block w-full h-64 lg:h-80 rounded-t-4xl object-cover" src="asitrastudio-assets/headers/header-photo-horizontal.png" alt="">
</div>
<div class="hidden md:block md:w-6/12 lg:w-5/12 px-3">
<div class="flex flex-wrap -mx-3">
<div class="w-5/12 px-3">
<img class="block w-full h-64 lg:h-80 rounded-t-4xl object-cover" src="asitrastudio-assets/headers/header-photo-small2.png" alt="">
</div>
<div class="w-7/12 px-3">
<img class="block w-full h-64 lg:h-80 rounded-t-4xl object-cover" src="asitrastudio-assets/headers/header-photo1.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div :class="{'block': mobileNavOpen,'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-md z-50">
<div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-50"></div>
<nav class="relative flex flex-col py-6 px-10 w-full h-full bg-white overflow-y-auto">
<div class="flex mb-auto items-center">
<a class="inline-block mr-auto" href="#">
<img class="h-4" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
</a>
<button x-on:click="mobileNavOpen = !mobileNavOpen">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
<div class="py-12 mb-auto">
<ul class="flex-col">
<li class="mb-6"><a class="inline-block text-black" href="#">About</a></li>
<li class="mb-6"><a class="inline-block text-black" href="#">Services</a></li>
<li class="mb-6"><a class="inline-block text-black" href="#">Projects</a></li>
<li><a class="inline-block text-black" href="#">Contact us</a></li>
</ul>
</div>
<div><a class="block mb-3 px-4 py-4 text-center font-medium text-black hover:text-white border border-black hover:bg-black rounded-full transition duration-200" href="#">Login</a><a class="block px-4 py-4 text-center font-medium text-white bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Sign in</a></div>
</nav>
</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
