<section x-data="{ mobileNavOpen: false }" class="px-4 pt-6 pb-8 lg:px-18 lg:pb-18" style="background: linear-gradient(131deg, #E8E5FE 26.82%, #FFEED8 96.89%);">
<nav class="relative bg-white mb-6 px-10 lg:pl-20 py-7 lg:py-4 rounded-2xl">
<div class="flex items-center justify-between">
<div class="flex items-center justify-between w-full lg:w-auto">
<button x-on:click="mobileNavOpen = !mobileNavOpen" class="order-1 lg:order-none lg:pr-9">
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="14" viewBox="0 0 34 14" fill="none"><g clip-path="url(#clip0_231_4713)"><rect width="34" height="3" rx="1.5" fill="#19191B"></rect><rect y="11" width="34" height="3" rx="1.5" fill="#19191B"></rect></g><defs><clipPath id="clip0_231_4713"><rect width="34" height="14" fill="white"></rect></clipPath></defs></svg>
</button>
<a class="pr-4 lg:pr-0" href="#">
<img class="h-10" src="mirga-assets/images/logos/mirga-dark-logo3.svg" alt="">
</a>
</div>
<div class="hidden lg:flex items-center gap-5"><a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-lg focus:text-neutral-900 bg-transparent hover:bg-transparent focus:bg-transparent border border-transparent rounded-lg focus:ring-4 focus:ring-transparent transition duration-200" href="#">Login</a><a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-transparent hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Sign up free</a></div>
</div>
</nav>
<div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
<div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-20"></div>
<nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
<div class="flex flex-col justify-between h-full">
<div class="flex items-center justify-between mb-16">
<a class="pr-4" href="#">
<img class="h-10" src="mirga-assets/images/logos/mirga-dark-logo3.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="#252E4A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
<div class="flex flex-col items-center gap-2"><a class="inline-flex justify-center items-center text-center w-full h-16 p-5 font-semibold tracking-tight text-lg focus:text-neutral-900 bg-transparent hover:bg-transparent focus:bg-transparent border border-transparent rounded-lg focus:ring-4 focus:ring-transparent transition duration-200" href="#">Login</a><a class="inline-flex justify-center items-center text-center w-full h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-transparent hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Sign up free</a></div>
</div>
</nav>
</div>
<div class="bg-white rounded-2xl pt-4 lg:pt-10 px-4 lg:px-10 pb-4 lg:pb-14">
<div class="flex flex-wrap -m-4 mb-8">
<div class="w-full md:w-2/3 p-4">
<div class="h-full border-2 border-neutral-50 border-opacity-50 rounded-3xl py-18 lg:py-32 pl-4 lg:pl-18 pr-4 lg:pr-16">
<h1 class="font-heading mb-12 font-semibold text-6xl sm:text-9xl xl:text-11xl max-w-7xl">
<span class="relative z-10">Join the community, and change</span>
<span class="bg-orange-50 rounded-lg px-4 inline-block">the future.</span>
</h1>
<h2 class="font-heading text-neutral-600 tracking-tight text-2xl font-semibold mb-24">Your journey to digital excellence starts here.</h2>
<div class="flex flex-wrap items-center gap-8">
<a class="inline-flex justify-center items-center text-center h-20 p-5 font-semibold tracking-tight text-2xl text-white bg-neutral-900 hover:bg-neutral-800 focus:bg-neutral-800 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Join now</a>
<a class="group inline-flex justify-center items-center text-center tracking-tight gap-3" href="#">
<span class="text-neutral-600 tracking-tight font-semibold group-hover:text-neutral-800 transition duration-200">Learn more</span>
<div class="w-6 h-6 rounded-full border border-neutral-50 group-hover:border-neutral-200 transition duration-200 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 1L5.2825 1.6965L9.086 5.5H1V6.5H9.086L5.293 10.293L6 11L11 6L6 1Z" fill="#19191B"></path>
</svg>
</div>
</a>
</div>
</div>
</div>
<div class="w-full md:w-1/3 p-4">
<div class="relative h-56 md:h-full">
<img class="absolute inset-0 rounded-3xl w-full h-full object-cover" src="mirga-assets/images/hero/background1.png" alt="">
<div class="absolute bottom-10 left-10">
<a class="flex items-center gap-3 group" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="27" viewBox="0 0 24 27" fill="none">
<path d="M22.5 10.9019C24.5 12.0566 24.5 14.9434 22.5 16.0981L5.24999 26.0574C3.24999 27.2121 0.749999 25.7687 0.749999 23.4593L0.75 3.5407C0.75 1.2313 3.25 -0.212069 5.25 0.942631L22.5 10.9019Z" fill="#7CFF8F"></path>
</svg>
<h2 class="text-white text-xl tracking-tight font-semibold group-hover:text-opacity-80 transition duration-200">Watch video</h2>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/3 p-2">
<div class="rounded-4xl p-8 bg-orange-50 h-full relative overflow-hidden">
<div class="flex flex-col items-start justify-between gap-6 h-full relative z-20">
<h2 class="font-heading text-3xl tracking-tight font-semibold max-w-xs">Lecture by E. Dyrchs</h2>
<a class="group inline-flex justify-center items-center text-center tracking-tight gap-3" href="#">
<span class="text-neutral-600 tracking-tight font-semibold group-hover:text-neutral-800 transition duration-200">Learn more now</span>
<div class="w-6 h-6 bg-white rounded-full border border-neutral-50 group-hover:border-neutral-200 transition duration-200 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 1L5.2825 1.6965L9.086 5.5H1V6.5H9.086L5.293 10.293L6 11L11 6L6 1Z" fill="#19191B"></path>
</svg>
</div>
</a>
</div>
<img class="absolute h-32 sm:h-52 object-cover bottom-0 right-0 z-10" src="mirga-assets/images/hero/woman-picture1.png" alt="">
</div>
</div>
<div class="w-full md:w-1/3 p-2">
<div class="rounded-4xl border-2 border-neutral-50 border-opacity-50 h-full p-8">
<div class="flex items-center justify-between flex-wrap -m-2">
<div class="w-full xl:w-1/2 p-2">
<h2 class="font-heading tracking-tight text-3xl font-semibold mb-4">Over 88%</h2>
<p class="text-neutral-600 tracking-tight text-lg font-medium max-w-xs">of royalties for artists in your streaming activity</p>
</div>
<div class="w-full xl:w-1/2 p-2">
<img class="mx-auto h-40" src="mirga-assets/images/hero/circle.svg" alt="">
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/3 p-2">
<div class="p-8 h-full">
<h2 class="font-heading text-5xl tracking-tight font-semibold mb-7 max-w-xs">Unlocking Digital Potential.</h2>
<a class="group inline-flex justify-center items-center text-center tracking-tight gap-3" href="#">
<span class="text-neutral-600 tracking-tight font-semibold group-hover:text-neutral-800 transition duration-200">Learn more now</span>
<div class="w-6 h-6 bg-white rounded-full border border-neutral-50 group-hover:border-neutral-200 transition duration-200 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 1L5.2825 1.6965L9.086 5.5H1V6.5H9.086L5.293 10.293L6 11L11 6L6 1Z" fill="#19191B"></path>
</svg>
</div>
</a>
</div>
</div>
</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
