<section x-data="{ mobileNavOpen: false }" class="relative bg-white overflow-hidden">
<nav class="relative z-10 py-7">
<div class="container mx-auto px-4">
<div class="relative flex items-center justify-between">
<a class="inline-block" href="#">
<img class="h-10" src="casper-assets/logos/casper-logo.svg" alt="">
</a>
<div class="flex items-center justify-end">
<div class="hidden lg:block mr-10"><a class="inline-flex py-2 px-4 mr-4 items-center justify-center text-sm font-medium uppercase text-violet-900 hover:text-violet-500" href="#">SIGN IN</a><a class="inline-flex h-11 py-2 px-4 items-center justify-center text-sm font-medium uppercase text-black hover:text-white bg-violet-500 hover:bg-violet-600 transition duration-200 rounded-full" href="#">SIGN UP</a></div>
<button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-black hover:text-violet-500">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 16H29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M3 8H29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M20 24L29 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
</div>
</div>
</nav>
<img class="absolute top-0 right-0" src="casper-assets/headers/circle-double-element.svg" alt="">
<div class="relative">
<img class="hidden lg:block absolute top-0 left-0 lg:mt-14 lg:ml-16 animate-spinStar" src="casper-assets/headers/blink.png" alt="">
<div class="container mx-auto px-4">
<div class="pt-16 pb-8 xl:pb-4 text-center">
<div class="relative z-10 inline-block">
<h1 class="absolute top-0 left-0 mt-2 xs:mt-3 sm:mt-6 xl:mt-8 font-heading text-5xl xs:text-7xl sm:text-8xl xl:text-9xl text-white font-semibold text-outline">CASPERAI</h1>
<div class="absolute top-0 left-0 w-full mt-1 sm:mt-10 h-9 xs:h-16 sm:h-12 xl:h-28 bg-white"></div>
<h1 class="relative font-heading text-black text-5xl xs:text-7xl sm:text-8xl xl:text-9xl font-semibold">CASPERAI</h1>
</div>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3">
<a class="group block bg-radial to-indigo-900 from-blueGray-800" href="#">
<div class="relative h-112 md:h-148 bg-opacity-0 bg-blueGray-800 group-hover:bg-opacity-100 transition duration-500">
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
<img class="h-64 lg:h-96 transform group-hover:scale-105 transition duration-300" src="casper-assets/headers/robot-full-size.png" alt="">
</div>
<div class="relative flex flex-col p-10 h-full">
<span class="block text-5xl text-white font-medium">01</span>
<span class="block mt-auto text-4xl text-white">Chat</span>
<span class="block text-4xl text-white">Assistant</span>
</div>
</div>
</a>
</div>
<div class="w-full md:w-1/3">
<a class="group block bg-radial to-orange-800 from-orange-600" href="#">
<div class="relative h-74 bg-opacity-0 bg-orange-600 group-hover:bg-opacity-60 transition duration-500">
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
<img class="h-52 lg:h-64 transform group-hover:scale-105 transition duration-300" src="casper-assets/headers/planet.png" alt="">
</div>
<div class="relative flex flex-col p-10 h-full">
<span class="block text-5xl text-white font-medium">02</span>
<span class="block mt-auto text-4xl text-white">Image Optimizing</span>
</div>
</div>
</a>
<a class="group block bg-radial to-teal-800 from-teal-600" href="#">
<div class="relative h-74 bg-opacity-0 bg-teal-600 group-hover:bg-opacity-60 transition duration-500">
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
<img class="h-52 lg:h-64 transform group-hover:scale-105 transition duration-300" src="casper-assets/headers/plant-robo.png" alt="">
</div>
<div class="relative flex flex-col p-10 h-full">
<span class="block text-5xl text-white font-medium">03</span>
<span class="block mt-auto text-4xl text-white">Video Editor</span>
</div>
</div>
</a>
</div>
<div class="w-full md:w-1/3">
<a class="group block bg-radial to-violet-900 from-blue-500" href="#">
<div class="relative h-112 md:h-148 bg-opacity-0 bg-violet-800 group-hover:bg-opacity-100 transition duration-500">
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
<img class="h-52 lg:h-96 transform group-hover:scale-105 transition duration-300" src="casper-assets/headers/chip.png" alt="">
</div>
<div class="relative flex flex-col p-10 h-full">
<span class="block text-5xl text-white font-medium">04</span>
<span class="block mt-auto text-4xl text-white">Content</span>
<span class="block text-4xl text-white">Copywriting</span>
</div>
</div>
</a>
</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-violet-900 opacity-20"></div>
<nav class="relative flex flex-col py-7 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-10" src="casper-assets/logos/casper-logo.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-base text-black font-medium uppercase" href="#">FEATURED</a></li>
<li class="mb-6"><a class="inline-block text-base text-black font-medium uppercase" href="#">SOLUTIONS</a></li>
<li class="mb-6"><a class="inline-block text-base text-black font-medium uppercase" href="#">PRODUCTS</a></li>
<li><a class="inline-block text-base text-black font-medium uppercase" href="#">ARTICLES</a></li>
</ul>
</div>
<div><a class="flex py-2 px-4 mb-4 items-center justify-center text-sm font-medium uppercase text-violet-900 hover:text-violet-500" href="#">SIGN IN</a><a class="flex h-11 py-2 px-4 items-center justify-center text-sm font-medium uppercase text-black hover:text-white bg-violet-500 hover:bg-violet-600 transition duration-200 rounded-full" href="#">SIGN UP</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
