Tailwind CSS Components

<div class="fixed bottom-0 inset-x-0 max-w-4xl mx-auto z-50 p-8" x-data="{ open: true }" :class="{ 'hidden': !open }">
    <div class="relative">
        <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-900 to-purple-950 rounded-2xl filter blur-3xl"></div>
        <div class="relative p-1 border border-white border-opacity-20 rounded-2xl">
            <div class="p-8 bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-950 border border-white border-opacity-20 rounded-xl">
                <div class="flex flex-wrap items-center">
                    <div class="mb-8">
                        <h3 class="mb-2 text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Cookie Policy</h3>
                        <p class="text-neutral-300 leading-relaxed">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the 'how to reject cookies' section of our . Otherwise, if you agree to our use of cookies, please continue to use our website.</p>
                    </div>
                    <div class="w-full flex flex-col sm:flex-row gap-4">
                        <a x-on:click.prevent="open=false" class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group" href="#">
                            Allow
                            <svg class="transform ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </a>
                        <a x-on:click.prevent="open=false" class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-white hover:text-white border border-neutral-700 hover:border-white hover:border-opacity-50 rounded-full transition-all duration-200" href="#">Decline</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="relative">
          <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-xl filter blur-xl"></div>
          <div class="p-1 border border-white border-opacity-20 rounded-2xl">
              <img class="relative object-cover w-full rounded-xl border border-neutral-800" src="https://images.unsplash.com/photo-1702471897388-5d9c50ea434e?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwzMXx8d29ya3xlbnwwfDJ8fHwxNzQ4OTYzODEzfDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;h=640&amp;w=640" alt="">
          </div>
        </div>
      </div>          
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-md lg:max-w-lg lg:mx-auto">
          <span class="text-sm text-neutral-400 font-medium">New Feature</span>
          <h2 class="mb-4 mt-4 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Increase your brand's regular profit.</h2>
          <p class="text-lg leading-relaxed text-neutral-300 mb-8">If you have ever wondered how to develop your brand, this is the place for you.</p>
          <div class="relative">
            <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
            <a class="relative inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group" href="#">
              Try Demo
              <svg class="ml-2 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </a>

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
      <div class="container px-4 mx-auto">
        <div class="max-w-2xl mx-auto">
          <div class="relative mb-12">
            <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
            <h2 class="text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">When I was a developer, I often had a hundblue questions when</h2>
          </div>
          <p class="mb-6 text-lg lg:text-xl leading-relaxed text-neutral-300">Building websites from wireframes that I had received. Some of those questions were:</p>
          <ul>
            <li class="flex mb-4 items-center">
              <div class="flex-shrink-0 w-9 h-9 mr-4 flex items-center justify-center rounded-full p-1 border border-white border-opacity-20">
                <span class="flex items-center justify-center w-full h-full bg-white rounded-full text-neutral-950 font-semibold transition-all duration-200 hover:shadow-lg">1</span>
              </div>
                <h3 class="text-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">How will this design scale when I shrink the browser window?</h3>
            </li>
            <li class="flex mb-4 items-center">
               <div class="flex-shrink-0 w-9 h-9 mr-4 flex items-center justify-center rounded-full p-1 border border-white border-opacity-20">
                <span class="flex items-center justify-center w-full h-full bg-white rounded-full text-neutral-950 font-semibold transition-all duration-200 hover:shadow-lg">2</span>
              </div>
              <h3 class="text-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">What happens when this shape is filled out incorrectly?</h3>
            </li>
            <li class="mb-6 flex items-center">
               <div class="flex-shrink-0 w-9 h-9 mr-4 flex items-center justify-center rounded-full p-1 border border-white border-opacity-20">
                <span class="flex items-center justify-center w-full h-full bg-white rounded-full text-neutral-950 font-semibold transition-all duration-200 hover:shadow-lg">3</span>

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="mb-12 text-center">
      <span class="text-sm text-neutral-400 font-medium">Error 404</span>
      <h2 class="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Page not found</h2>
      <p class="mb-8 text-lg leading-relaxed text-neutral-300">Sorry! We are unable to find the page you are looking for.</p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group" href="#">
          Return to homepage
          <svg class="transform ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </a>
        <a class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-white hover:text-white border border-neutral-700 hover:border-white hover:border-opacity-50 rounded-full transition-all duration-200" href="#">Try Again</a>
      </div>
    </div>
    <div class="max-w-4xl h-64 md:h-96 mx-auto">
      <div class="relative h-full w-full">
        <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
        <div class="p-1 border border-white border-opacity-20 rounded-2xl h-full">
          <img class="relative h-full w-full rounded-xl border border-neutral-800 object-cover" src="https://images.unsplash.com/photo-1730804518415-75297e8d2a41?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxfHxtaXNzaW5nfGVufDB8fHx8MTc1MDAyNDM3NHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080&amp;w=850" alt="">
        </div>
      </div>
    </div>

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="max-w-md mx-auto relative">
      <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
      <div class="relative p-1 border border-white border-opacity-20 rounded-2xl">
        <div class="py-12 px-8 bg-gradient-to-br from-neutral-950 via-neutral-800 to-neutral-950 border border-white border-opacity-20 rounded-xl text-center">
          <span class="text-sm text-neutral-400 font-medium uppercase">Sign Up</span>
          <h3 class="mb-8 text-3xl lg:leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Create new account</h3>
          <form action="#">
            <div class="flex flex-wrap md:flex-nowrap gap-2">
              <input class="w-full md:w-1/2 py-3 pl-3 mb-4 bg-neutral-900 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="text" placeholder="First Name">
              <input class="w-full md:w-1/2 py-3 pl-3 mb-4 bg-neutral-900 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="text" placeholder="Last Name">
            </div>
            <input class="w-full py-3 pl-3 mb-4 bg-neutral-900 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="email" placeholder="E-mail address">
            <input class="w-full py-3 pl-3 mb-4 bg-neutral-900 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="password" placeholder="Password">
            <label class="inline-block mb-4">
              <input class="mr-2 accent-white" type="checkbox" name="terms" value="1">
              <span class="text-sm text-neutral-300">By signing up, you agree to our <a class="font-medium text-white hover:text-neutral-200 transition-colors duration-200" href="#">Terms, Data Policy</a> and <a class="font-medium text-white hover:text-neutral-200 transition-colors duration-200" href="#">Cookies Policy</a>.</span>
            </label>
            <button class="inline-flex items-center justify-center w-full mb-4 px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group">
              Sign Up
              <svg class="ml-2 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950" x-data="{ tab: 'lifetime' }">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto text-center mb-12">
      <span class="block text-sm text-neutral-400 font-medium mb-4">Premium Access</span>
      <h2 class="mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Lorem ipsum dolor sit amet massa</h2>
      <p class="text-lg leading-relaxed text-neutral-300 mb-8">Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      <div class="relative flex flex-wrap justify-center gap-4">
        <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
        <label x-on:click="tab='lifetime'" class="relative flex items-center justify-center p-4 bg-neutral-900 border border-white border-opacity-50 rounded-full transition-all duration-200 cursor-pointer group" :class="{ 'border-white border-opacity-50': tab=='lifetime', 'border-neutral-700 hover:border-white hover:border-opacity-50': tab!='lifetime' }">
          <input type="radio" name="license" value="1" checked="" class="sr-only">
          <span class="mx-2 font-semibold text-white transition-colors duration-200" :class="{ 'text-white': tab=='lifetime', 'text-neutral-300 group-hover:text-white ': tab!='lifetime' }">Lifetime license</span>
          <span class="inline-flex py-1 px-3 items-center justify-center text-sm text-neutral-950 bg-white font-semibold rounded-full transition-all duration-200" :class="{ 'text-neutral-950 bg-white': tab=='lifetime', 'text-neutral-950 bg-neutral-500 group-hover:bg-white ': tab!='lifetime' }">$150</span>
        </label>
        <label x-on:click="tab='monthly'" class="relative group flex items-center justify-center p-4 bg-neutral-900 border border-neutral-700 hover:border-white hover:border-opacity-50 rounded-full transition-all duration-200 cursor-pointer group" :class="{ 'border-white border-opacity-50': tab=='monthly', 'border-neutral-700 hover:border-white hover:border-opacity-50': tab!='monthly' }">
          <input type="radio" name="license" value="2" class="sr-only">
          <span class="mx-2 font-semibold text-neutral-300 group-hover:text-white transition-colors duration-200" :class="{ 'text-white': tab=='monthly', 'text-neutral-300 group-hover:text-white ': tab!='monthly' }">Monthly license</span>
          <span class="inline-flex py-1 px-3 items-center justify-center text-sm font-semibold rounded-full transition-all duration-200" :class="{ 'text-neutral-950 bg-white': tab=='monthly', 'text-neutral-950 bg-neutral-500 group-hover:bg-white ': tab!='monthly' }">$85</span>
        </label>
      </div>
    </div>
    <div class="max-w-5xl mx-auto relative">
      <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
      <div class="relative flex flex-wrap bg-gradient-to-br from-neutral-900 to-purple-950 border border-white border-opacity-20 rounded-2xl overflow-hidden">
        <div class="w-full lg:w-2/5 px-4 mb-6 lg:mb-0">

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="max-w-lg mx-auto lg:ml-0 text-center lg:text-left">
          <h2 class="text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 mb-4">Trusted by brands all over the world</h2>
          <p class="text-lg leading-relaxed text-neutral-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="relative flex flex-wrap -m-4">
            <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
            <div class="w-1/2 md:w-1/3 p-4 px-6">
                <img class="mx-auto h-8 filter brightness-0 invert" src="darkpro-assets/logos/jiggle-color.svg" alt="">
            </div>
            <div class="w-1/2 md:w-1/3 p-4 px-6">
                <img class="mx-auto h-8 filter brightness-0 invert" src="darkpro-assets/logos/symtric-color.svg" alt="">
            </div>
            <div class="w-1/2 md:w-1/3 p-4 px-6">
                <img class="mx-auto h-8 filter brightness-0 invert" src="darkpro-assets/logos/wishelp-color.svg" alt="">
            </div>
            <div class="w-1/2 md:w-1/3 p-4 px-6">
                <img class="mx-auto h-8 filter brightness-0 invert" src="darkpro-assets/logos/resecurb-color.svg" alt="">
            </div>

<section x-data="{ mobileNavOpen: false }">
    <nav class="relative flex justify-between items-center py-8 px-10 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
        <a href="#">
            <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
        </a>
        <div class="lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block hover:text-white text-neutral-300 focus:outline-none transition-colors duration-200">
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <title>Mobile menu</title>
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
            </button>
        </div>
        <ul class="hidden lg:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 items-center w-auto space-x-8">
            <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Product</a></li>
            <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Solutions</a></li>
            <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Resources</a></li>
            <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Company</a></li>
        </ul>
        <div class="hidden lg:block">
            <div class="group flex p-1 border border-white border-opacity-20  border border-neutral-700 hover:border-neutral-600 transition-all duration-200 transition-all rounded-md">
            <input class="inline-block px-4 py-3 text-sm text-neutral-300 placeholder-neutral-400 font-semibold bg-neutral-800 border border-neutral-700 group-hover:border-neutral-600 focus:border-neutral-600 transition-all duration-200 transition-all rounded-l focus:outline-none focus:border-white transition-colors duration-200" placeholder="Search">
            <button class="block py-3 px-2 rounded-r bg-neutral-800 border border-l-0 border-neutral-700 border border-neutral-700 group-hover:border-neutral-600 transition-all duration-200 transition-all">
                <svg class="text-neutral-300 hover:text-white w-4 h-4 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">

<section class="relative pb-20 lg:pt-24 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="h-96 lg:h-auto lg:absolute top-0 right-0 bottom-0 lg:w-1/2 bg-no-repeat bg-cover bg-center relative overflow-hidden" style="background-image: url('https://images.unsplash.com/photo-1702471897388-5d9c50ea434e?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwzMXx8d29ya3xlbnwwfDJ8fHwxNzQ4OTYzODEzfDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;h=640&amp;w=640');">
  </div>
  <div class="container px-4 mx-auto">
    <div class="w-full lg:w-1/2 mt-16 lg:mt-0">
      <div class="lg:max-w-md">
        <h2 class="mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Security in saving</h2>
        <p class="text-neutral-300 mb-8 max-w-lg">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
        <div class="flex items-center py-4 px-2 -mx-2">
          <div class="flex-shrink-0 mr-5 text-white">
            <svg class="w-10 h-10 group-hover:scale-110 transition-transform duration-200" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
              <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
            </svg>
          </div>
          <div class="max-w-sm">
            <h3 class="text-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Quick problem-solving contact</h3>
          </div>
        </div>
        <div class="flex items-center py-4 px-2 -mx-2">
          <div class="flex-shrink-0 mr-5 text-white">
            <svg class="w-10 h-10 group-hover:scale-110 transition-transform duration-200" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
              <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="max-w-md lg:max-w-lg">
          <span class="text-sm text-neutral-400 font-medium">New Feature</span>
          <h2 class="mb-4 mt-4 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Increase your brand's regular profit.</h2>
          <p class="text-lg leading-relaxed text-neutral-300 mb-8">If you have ever wondered how to develop your brand, this is the place for you.</p>
          <div class="relative">
            <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
            <a class="relative inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group" href="#">
              Try Demo
              <svg class="ml-2 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-md mx-auto md:max-w-none relative">
          <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
          <div class="relative p-1 border border-white border-opacity-20 rounded-2xl">
            <div class="px-4 md:px-10 py-10 bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 rounded-xl">

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950" x-data="{ activeSlide: 1, slideCount: 4 }">
      <div class="container px-4 mx-auto">
        <div class="flex items-center">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="flex-shrink-0 hidden lg:block w-16 h-16 p-5 rounded-full border border-white border-opacity-20 hover:border-opacity-50 transition-all duration-200 group">
            <svg class="text-white group-hover:text-white transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
                <div class="inline-block w-full whitespace-normal">
                  <div class="max-w-3xl mb-12 mx-auto text-center">
                    <h2 class="mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Take quick action that increases your brand's regular profit.</h2>
                    <p class="text-lg leading-relaxed text-neutral-300 mb-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
                    <div class="relative">
                      <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
                      <a class="relative inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group" href="#">
                        Try Demo
                        <svg class="ml-2 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                      </a>
                    </div>
                  </div>

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
        <div class="container px-4 mx-auto">
            <div class="relative max-w-md mx-auto">
                <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
                <div class="relative p-1 border border-white border-opacity-20 rounded-2xl">
                    <div class="py-12 px-8 bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-950 border border-white border-opacity-20 rounded-xl text-center">
                        <span class="text-sm text-neutral-400 font-medium uppercase mb-2 block">Sign In</span>
                        <h3 class="mb-8 text-3xl lg:leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Join our community</h3>
                        <form action="#">
                            <input class="w-full py-3 px-4 mb-4 bg-neutral-800 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="email" placeholder="E-mail address">
                            <input class="w-full py-3 px-4 mb-6 bg-neutral-800 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="password" placeholder="Password">
                            <button class="inline-flex items-center justify-center w-full mb-4 px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group">
                                Get Started
                                <svg class="ml-2 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                </svg>
                            </button>
                            <a class="text-sm text-neutral-400 hover:text-white transition-colors duration-200" href="#">Forgot password?</a>
                            <div class="mt-6 pt-6 border-t border-neutral-700">
                                <p class="text-sm text-neutral-500 mb-4">Or continue with</p>
                                <a class="flex items-center justify-center mb-4 w-full px-5 py-3 text-sm font-medium text-white hover:text-white border border-neutral-700 hover:border-neutral-500 hover:border-opacity-50 rounded-full transition-all duration-200" href="#">
                                    <img class="w-5 h-5 mr-2" src="darkpro-assets/socials/facebook.svg" alt="">
                                    <span class="text-sm font-medium">Sign in with Facebook</span>
                                </a>

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
      <div class="container px-4 mx-auto">
        <div class="max-w-2xl mx-auto">
          <div class="relative p-1 mb-6 border border-white border-opacity-20 rounded-2xl transition-all duration-200">
            <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
            <div class="relative py-12 px-4 lg:px-24 bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 rounded-xl">
              <span class="absolute top-0 left-0 ml-8 mt-2 lg:mt-10">
                <svg class="text-white" width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.24 24.544C4.97867 24.544 3.272 23.7333 2.12 22.112C1.01067 20.448 0.456 18.144 0.456 15.2C0.456 12 1.26667 9.184 2.888 6.752C4.50933 4.27733 7.02667 2.22933 10.44 0.607998L12.744 5.344C10.696 6.24 9.16 7.34933 8.136 8.672C7.112 9.952 6.6 11.552 6.6 13.472C6.728 13.4293 6.94133 13.408 7.24 13.408C8.776 13.408 10.0773 13.8773 11.144 14.816C12.2107 15.7547 12.744 17.0347 12.744 18.656C12.744 20.448 12.232 21.8773 11.208 22.944C10.184 24.0107 8.86133 24.544 7.24 24.544ZM23.88 24.544C21.6187 24.544 19.912 23.7333 18.76 22.112C17.6507 20.448 17.096 18.144 17.096 15.2C17.096 12 17.9067 9.184 19.528 6.752C21.1493 4.27733 23.6667 2.22933 27.08 0.607998L29.384 5.344C27.336 6.24 25.8 7.34933 24.776 8.672C23.752 9.952 23.24 11.552 23.24 13.472C23.368 13.4293 23.5813 13.408 23.88 13.408C25.416 13.408 26.7173 13.8773 27.784 14.816C28.8507 15.7547 29.384 17.0347 29.384 18.656C29.384 20.448 28.872 21.8773 27.848 22.944C26.824 24.0107 25.5013 24.544 23.88 24.544Z" fill="currentColor"></path>
                </svg>
              </span>
              <p class="relative text-lg leading-loose text-neutral-300">On the other hand, perfection can also haunt some of us to the point of inaction. While some are too quick to act and end up wasting resources, others are completely paralyzed by the "excessive" amount of work behind building something new. There's just "so much to get done" before delivering the product to the user that we end up feeling frustrated and overwhelmed.</p>
            </div>
          </div>
          <p class="relative text-center text-lg text-neutral-300">Danny Bailey, CEO &amp; Founder at Wireframes</p>
        </div>
      </div>
    </section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative flex justify-between items-center py-8 px-10 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
    <button class="block text-neutral-300 hover:text-white w-6 h-6 transition-colors duration-200">
      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
      </svg>
    </button>
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 items-center">
      <a href="#">
        <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
      </a>
    </div>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block text-neutral-300 hover:text-white focus:outline-none transition-colors duration-200">
      <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <title>Mobile menu</title>
        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
      </svg>
    </button>
  </nav>

  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gradient-to-br from-neutral-950 via-neutral-900 to-neutral-950 opacity-75 filter blur-3xl"></div>
    <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-neutral-900 border-r border-neutral-800 overflow-y-auto">
        <div class="flex items-center mb-12">

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
      <div class="container px-4 mx-auto">
        <div class="max-w-2xl mx-auto">
          <h2 class="mb-8 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">When I was a developer, I often had a hundblue questions when</h2>
          <p class="mb-10 text-lg lg:text-xl leading-relaxed text-neutral-300">Building websites from wireframes that I had received. Some of those questions were:</p>
          <div class="mb-10">
            <div class="relative">
              <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
              <div class="p-1 border border-white border-opacity-20 rounded-2xl">
                <img class="relative w-full h-96 object-cover rounded-xl border border-neutral-800" src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxfHx0ZWNofGVufDB8fHx8MTc0ODkzNjgyOHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080" alt="">
              </div>
            </div>
          </div>
          <p class="mb-6 text-lg lg:text-xl leading-relaxed text-neutral-300">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
          <p class="text-lg lg:text-xl leading-relaxed text-neutral-300">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it's easy to lose track. To save time and energy for myself, I gatheblue all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
        </div>
      </div>
    </section>

<section x-data="{ mobileNavOpen: false }">
    <nav class="relative flex justify-between items-center py-8 px-10 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
        <a href="#">
            <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
        </a>
        <div class="lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block hover:text-white text-neutral-300 focus:outline-none transition-colors duration-200">
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <title>Mobile menu</title>
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
            </button>
        </div>
        <ul class="hidden lg:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 items-center w-auto space-x-8">
            <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Product</a></li>
            <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Solutions</a></li>
            <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Resources</a></li>
            <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Company</a></li>
        </ul>
        <div class="hidden lg:flex items-center justify-end gap-4">
            <a class="inline-block px-4 py-2 text-sm font-semibold text-neutral-300 hover:text-white transition-all duration-200" href="#">Sign in</a>
            <a class="inline-block px-4 py-2 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg" href="#">Sign up</a>
        </div>
    </nav>

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
    <div class="container px-4 mx-auto">
        <div class="relative lg:max-w-xl p-1 border border-white border-opacity-20 rounded-2xl">
            <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-800 via-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
            <div class="relative p-6 lg:p-12 bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 rounded-xl">
                <svg class="w-8 h-8 mb-6 text-white" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z" fill="currentColor"></path>
                </svg>
                <h3 class="mb-2 text-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-50 via-gray-100 to-gray-50">Weekly email updates</h3>
                <p class="mb-8 text-neutral-300">Focus on your business with a large number of useful tools to take care of your company's development. Share your difficulties with us, and we will help you.</p>
                <a class="inline-flex items-center text-lg text-white hover:text-white font-semibold transition-colors duration-200 group" href="#">
                    <span>Learn More</span>
                    <svg class="ml-2 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
   <div class="max-w-md mx-auto text-center relative">
      <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
      <div class="relative p-1 border border-white border-opacity-20 rounded-2xl">
        <div class="bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-900 border border-white border-opacity-20 rounded-xl py-12 px-8">
            <span class="text-sm text-neutral-400 font-medium uppercase">Sign Up</span>
            <h3 class="mb-8 text-3xl lg:leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Create new account</h3>
            <form action="#">
              <div class="flex flex-wrap md:flex-nowrap">
                <input class="w-full md:w-1/2 md:mr-2 py-3 pl-3 mb-4 bg-neutral-900 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="text" placeholder="First Name">
                <input class="w-full md:w-1/2 py-3 pl-3 mb-4 bg-neutral-900 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="text" placeholder="Last Name">
              </div>
              <input class="w-full py-3 pl-3 mb-4 bg-neutral-900 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="email" placeholder="E-mail address">
              <input class="w-full py-3 pl-3 mb-4 bg-neutral-900 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="password" placeholder="Password">
              <label class="inline-block mb-4">
                <input class="mr-1 accent-white" type="checkbox" name="terms" value="1">
                <span class="text-sm text-neutral-300">By signing up, you agree to our <a class="font-medium hover:text-white transition-colors duration-200" href="#">Terms, Data Policy</a> and <a class="font-medium hover:text-white transition-colors duration-200" href="#">Cookies Policy</a>.</span>
              </label>
              <button class="inline-flex items-center justify-center w-full mb-4 px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group">
                Sign Up
                <svg class="ml-2 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="max-w-md mx-auto text-center relative">
      <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
      <div class="relative p-1 border border-white border-opacity-20 rounded-2xl">
        <div class="bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-900 border border-white border-opacity-20 rounded-xl py-12 px-8">
          <span class="text-sm text-neutral-400 font-medium uppercase">Sign In</span>
          <h3 class="mb-8 text-3xl lg:leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Join our community</h3>
          <form action="#">
            <input class="w-full py-3 pl-3 mb-4 bg-neutral-800 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="email" placeholder="E-mail address">
            <input class="w-full py-3 pl-3 mb-4 bg-neutral-800 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="password" placeholder="Password">
            <button class="inline-flex items-center justify-center w-full mb-4 px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group">
              Get Started
              <svg class="ml-2 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </button>
            <a class="text-sm text-neutral-400 hover:text-white transition-colors duration-200" href="#">Forgot password?</a>
            <a class="flex items-center justify-center mt-4 mb-4 w-full px-5 py-3 text-sm bg-neutral-800 hover:bg-neutral-700 font-medium border border-neutral-700 hover:border-white hover:border-opacity-50 rounded-full transition-all duration-200" href="#">
              <img class="w-5 h-5 mr-2" src="darkpro-assets/socials/facebook.svg" alt="">
              <span class="text-sm font-medium text-neutral-300">Sign in with Facebook</span>
            </a>
            <a class="flex items-center justify-center px-5 py-3 text-sm bg-neutral-800 hover:bg-neutral-700 font-medium border border-neutral-700 hover:border-white hover:border-opacity-50 rounded-full transition-all duration-200" href="#">
              <img class="w-5 h-5 mr-2" src="darkpro-assets/socials/twitter.svg" alt="">

<section x-data="{ mobileNavOpen: false }">
    <nav class="flex justify-between items-center py-8 px-10 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
        <a href="#">
            <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
        </a>
      <div class="lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block hover:text-white text-neutral-300 focus:outline-none transition-colors duration-200">
              <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                  <title>Mobile menu</title>
                  <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
              </svg>
          </button>
      </div>
      <ul class="hidden lg:flex ml-auto mr-8 items-center w-auto space-x-8">
          <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Product</a></li>
          <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Solutions</a></li>
          <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Resources</a></li>
          <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Company</a></li>
      </ul>
      <a class="hidden lg:block px-4 py-2 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg" href="#">Get Started</a>
    </nav>

    <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
      <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gradient-to-br from-neutral-950 via-neutral-900 to-neutral-950 opacity-75 filter blur-3xl"></div>