Tailwind CSS Components

<section class="py-14 pb-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-white w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-gray.png" alt="">
      </div>
      <div class="relative flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 p-4">
          <div class="p-8 h-full bg-white border border-gray-100 rounded-3xl">
            <h2 class="font-heading mb-6 text-5xl md:text-6xl text-blue-500 font-black tracking-tight">16,200</h2>
            <h3 class="font-heading mb-2 text-xl text-gray-700 font-bold">Satisfied clients</h3>
            <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-4">
          <div class="p-8 h-full bg-white border border-gray-100 rounded-3xl">
            <h2 class="font-heading mb-6 text-5xl md:text-6xl text-blue-500 font-black tracking-tight">4.7M+</h2>
            <h3 class="font-heading mb-2 text-xl text-gray-700 font-bold">Downloads</h3>
            <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-4">
          <div class="p-8 h-full bg-white border border-gray-100 rounded-3xl">

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative pt-16 pb-24 md:max-w-3xl mx-auto bg-white overflow-hidden border border-gray-100 rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-white w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-gray.png" alt="">
      </div>
      <div class="relative">
        <img class="mb-14 mx-auto" src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
        <div class="md:max-w-md mx-auto">
          <div class="mb-10 text-center">
            <h2 class="font-heading mb-4 text-4xl md:text-5xl text-black font-black tracking-tight">Join for free</h2>
            <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
          </div>
          <form>
            <div class="flex flex-wrap -m-3">
              <div class="w-full p-3">
                <label class="block mb-2 text-sm text-gray-500 font-bold" for="signUpLightBorderPatternInput3-1">Full Name</label>
                <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signUpLightBorderPatternInput3-1" type="text" placeholder="First and last name">
              </div>
              <div class="w-full p-3">
                <label class="block mb-2 text-sm text-gray-500 font-bold" for="signUpLightBorderPatternInput3-2">Email Address</label>
                <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signUpLightBorderPatternInput3-2" type="email" placeholder="Enter email address">
              </div>

<section class="relative py-16 bg-gray-100 overflow-hidden">
  <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
    <div class="absolute bg-gradient-radial-gray w-full h-full"></div>
    <img src="zanrly-assets/images/pattern-white.png" alt="">
  </div>
  <div class="container mx-auto px-4">
    <div class="relative max-w-lg mx-auto text-center">
      <h2 class="font-heading max-w-xl mb-4 text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Process how it works</h2>
      <p class="mb-12 text-gray-700 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros.</p>
    </div>
    <div class="relative py-16 px-8 md:px-16 overflow-hidden rounded-3xl" style="background-image: url('zanrly-assets/images/how-it-works/work.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
      <div class="max-w-md">
        <div class="flex flex-wrap">
          <div class="w-full">
            <div class="flex flex-wrap -m-3.5">
              <div class="flex flex-col items-center w-auto p-3.5">
                <div class="flex items-center justify-center w-9 h-9 bg-blue-500 rounded-full">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.66699 11.3333L8.00033 14.6666L16.3337 6.33325" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div class="w-px flex-1 border border-gray-600 border-dashed"></div>
              </div>
              <div class="flex-1 p-3.5 pb-14">

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-20 px-8 md:px-16 overflow-hidden rounded-3xl" style="background-image: url('zanrly-assets/images/applications/website.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
      <div class="max-w-7xl mx-auto">
        <div class="md:max-w-lg">
          <h2 class="font-heading mb-6 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Build website animations and interactions visually.</h2>
          <p class="mb-8 text-gray-200 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis volutpat velit, quis iaculis velit bibendum a. Maecenas accumsan fermentum nisl.</p>
          <div class="flex flex-wrap -m-2">
            <div class="w-full md:w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Download Zanrly App</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-10 px-8 bg-gray-900 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="flex flex-wrap -m-8">
          <div class="w-full md:w-1/2 p-8">
            <div class="py-9 md:max-w-md">
              <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Pricing</span>
              <h2 class="font-heading mb-4 text-4xl text-gray-100 font-black tracking-tight">Unlimited access to all products</h2>
              <p class="mb-8 text-gray-500 font-bold">Yearly access to all products with ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
              <div class="flex flex-wrap -m-2">
                <div class="w-auto p-2">
                  <div class="flex flex-wrap px-3 py-2 bg-white rounded-full">
                    <div class="w-auto mr-2 pt-1">
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8.095 1H3.905C2.085 1 1 2.085 1 3.905V8.09C1 9.915 2.085 11 3.905 11H8.09C9.91 11 10.995 9.915 10.995 8.095V3.905C11 2.085 9.915 1 8.095 1ZM8.39 4.85L5.555 7.685C5.485 7.755 5.39 7.795 5.29 7.795C5.19 7.795 5.095 7.755 5.025 7.685L3.61 6.27C3.465 6.125 3.465 5.885 3.61 5.74C3.755 5.595 3.995 5.595 4.14 5.74L5.29 6.89L7.86 4.32C8.005 4.175 8.245 4.175 8.39 4.32C8.535 4.465 8.535 4.7 8.39 4.85Z" fill="#3B82F6"></path>
                      </svg>
                    </div>
                    <div class="flex-1">
                      <p class="text-sm text-gray-900 font-bold">Build CSS grid–powered layouts visually</p>
                    </div>
                  </div>
                </div>
                <div class="w-auto p-2">

<section class="py-16 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-dark w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative md:max-w-lg mb-10">
        <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Frequently asked questions</span>
        <h2 class="font-heading text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Common Answers</h2>
      </div>
      <div class="relative flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 p-4">
          <div class="flex flex-col justify-between p-10 h-full bg-gray-800 border border-gray-800 rounded-3xl">
            <div class="flex-initial mb-8 md:mb-36">
              <h3 class="font-heading text-xl text-white font-black">How does Zanrly help you in problems?</h3>
            </div>
            <div class="flex-initial">
              <p class="text-gray-400 font-bold">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-4">
          <div class="flex flex-col justify-between p-10 h-full bg-gray-800 border border-gray-800 rounded-3xl">

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-white border border-gray-100 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="max-w-lg mx-auto text-center">
          <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Testimonials</span>
          <h2 class="font-heading mb-12 text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Our customer says</h2>
        </div>
        <div class="flex flex-wrap -m-4">
          <div class="w-full md:w-1/3 p-4">
            <div class="flex flex-col justify-between px-8 pt-12 pb-8 h-full text-center bg-white border border-gray-100 rounded-3xl">
              <div class="flex-initial mb-8">
                <img class="mb-6 mx-auto rounded-full" src="zanrly-assets/images/testimonials/avatar2.png" alt="">
                <p class="text-base text-gray-700 font-bold">Had some issues where my site crashed and broke, reached out to Shuffle Editor to see if they could help me fix it.</p>
              </div>
              <div class="flex-initial">
                <h3 class="font-heading text-2xl text-gray-900 font-black">Monica Johnson</h3>
                <p class="text-sm text-gray-500 font-bold">@monicajonhson</p>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/3 p-4">
            <div class="flex flex-col justify-between px-8 pt-12 pb-8 h-full text-center bg-white border border-gray-100 rounded-3xl">
              <div class="flex-initial mb-8">

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-900 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="max-w-lg mx-auto text-center">
          <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Testimonials</span>
          <h2 class="font-heading mb-12 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Our customer says</h2>
        </div>
        <div class="flex flex-wrap -m-4">
          <div class="w-full md:w-1/3 p-4">
            <div class="flex flex-col justify-between px-8 pt-12 pb-8 h-full text-center bg-gray-800 rounded-3xl">
              <div class="flex-initial mb-8">
                <img class="mb-6 mx-auto rounded-full" src="zanrly-assets/images/testimonials/avatar2.png" alt="">
                <p class="text-base text-gray-500 font-bold">Had some issues where my site crashed and broke, reached out to Shuffle Editor to see if they could help me fix it.</p>
              </div>
              <div class="flex-initial">
                <h3 class="font-heading text-2xl text-gray-100 font-black">Monica Johnson</h3>
                <p class="text-sm text-gray-700 font-bold">@monicajonhson</p>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/3 p-4">
            <div class="flex flex-col justify-between px-8 pt-12 pb-8 h-full text-center bg-gray-800 rounded-3xl">
              <div class="flex-initial mb-8">

<section class="py-16 bg-gray-100 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-gray w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-white.png" alt="">
      </div>
      <div class="relative md:max-w-lg mb-10">
        <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Frequently asked questions</span>
        <h2 class="font-heading text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Common Answers</h2>
      </div>
      <div class="relative flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 p-4">
          <div class="flex flex-col justify-between p-10 h-full bg-white rounded-3xl">
            <div class="flex-initial mb-8 md:mb-36">
              <h3 class="font-heading text-xl text-gray-900 font-black">How does Zanrly help you in problems?</h3>
            </div>
            <div class="flex-initial">
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-4">
          <div class="flex flex-col justify-between p-10 h-full bg-white rounded-3xl">

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative p-10 bg-gray-900 overflow-hidden border border-gray-800 rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-dark w-full h-full"></div>
        <img src="zanrly-assets/images/http-codes/pattern-dark.png" alt="">
      </div>
      <div class="relative z-10">
        <div class="flex flex-wrap items-center -m-8">
          <div class="w-full md:w-1/2 p-8">
            <img src="zanrly-assets/images/http-codes/work.png" alt="">
          </div>
          <div class="w-full md:w-1/2 p-8">
            <div class="md:max-w-md mx-auto">
              <h3 class="font-heading text-2xl text-blue-500 font-black tracking-tight">Error 404</h3>
              <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">This page doesn’t exist</h2>
              <div class="flex flex-wrap -m-2">
                <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Go back to Homepage</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

<section class="py-14 pb-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 p-4">
        <div class="p-8 h-full bg-gray-100 border border-gray-100 rounded-3xl">
          <h2 class="font-heading mb-6 text-5xl md:text-6xl text-blue-500 font-black tracking-tight">16,200</h2>
          <h3 class="font-heading mb-2 text-xl text-gray-700 font-bold">Satisfied clients</h3>
          <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="p-8 h-full bg-gray-100 border border-gray-100 rounded-3xl">
          <h2 class="font-heading mb-6 text-5xl md:text-6xl text-blue-500 font-black tracking-tight">4.7M+</h2>
          <h3 class="font-heading mb-2 text-xl text-gray-700 font-bold">Downloads</h3>
          <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="p-8 h-full bg-gray-100 border border-gray-100 rounded-3xl">
          <h2 class="font-heading mb-6 text-5xl md:text-6xl text-blue-500 font-black tracking-tight">21,370</h2>
          <h3 class="font-heading mb-2 text-xl text-gray-700 font-bold">Customer Reviews</h3>
          <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet</p>
        </div>
      </div>

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="pt-16 pb-24 md:pb-52 md:max-w-3xl mx-auto bg-white rounded-3xl">
      <img class="mb-24 mx-auto" src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
      <div class="md:max-w-md mx-auto">
        <div class="mb-10 text-center">
          <h2 class="font-heading mb-4 text-4xl md:text-5xl text-black font-black tracking-tight">Welcome Back</h2>
          <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
        </div>
        <form>
          <div class="flex flex-wrap -m-3">
            <div class="w-full p-3">
              <label class="block mb-2 text-sm text-gray-500 font-bold" for="signInLightReverseInput3-1">Email Address</label>
              <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signInLightReverseInput3-1" type="email" placeholder="Enter email address">
            </div>
            <div class="w-full p-3">
              <label class="block mb-2 text-sm text-gray-500 font-bold" for="signInLightReverseInput3-2">Password</label>
              <div class="border border-gray-200 overflow-hidden rounded-full focus-within:ring-4 focus-within:ring-blue-200">
                <div class="flex flex-wrap">
                  <div class="flex-1">
                    <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 placeholder-gray-500 outline-none" id="signInLightReverseInput3-2" type="password" placeholder="*************">
                  </div>
                  <div class="w-auto"><a class="flex items-center pr-4 text-blue-500 hover:text-blue-600 h-full bg-gray-100 font-bold" href="#">Forgot password?</a></div>
                </div>

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="relative z-10">
    <div class="container mx-auto px-4">
      <h2 class="font-heading mb-10 text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Meet our top tier customers</h2>
    </div>
  </div>
  <div class="relative">
    <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
      <div class="absolute bg-gradient-radial-gray w-full h-full"></div>
      <img src="zanrly-assets/images/pattern-white.png" alt="">
    </div>
    <div class="relative flex flex-nowrap justify-center items-center -m-4">
      <div class="flex-shrink-0 w-64 p-4">
        <div class="py-24 px-8 h-full bg-white rounded-3xl">
          <img class="mx-auto" src="zanrly-assets/brands/brand.svg" alt="">
        </div>
      </div>
      <div class="flex-shrink-0 w-64 p-4">
        <div class="py-24 px-8 h-full bg-white rounded-3xl">
          <img class="mx-auto" src="zanrly-assets/brands/brand3.svg" alt="">
        </div>
      </div>
      <div class="flex-shrink-0 w-64 p-4">
        <div class="py-24 px-8 h-full bg-white rounded-3xl">

<section class="relative py-16 bg-white overflow-hidden">
  <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
    <div class="absolute bg-gradient-radial-white w-full h-full"></div>
    <img src="zanrly-assets/images/pattern-gray.png" alt="">
  </div>
  <div class="container mx-auto px-4">
    <div class="relative max-w-lg mx-auto text-center">
      <h2 class="font-heading max-w-xl mb-4 text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Process how it works</h2>
      <p class="mb-12 text-gray-700 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros.</p>
    </div>
    <div class="relative py-16 px-8 md:px-16 overflow-hidden rounded-3xl" style="background-image: url('zanrly-assets/images/how-it-works/work.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
      <div class="max-w-md">
        <div class="flex flex-wrap">
          <div class="w-full">
            <div class="flex flex-wrap -m-3.5">
              <div class="flex flex-col items-center w-auto p-3.5">
                <div class="flex items-center justify-center w-9 h-9 bg-blue-500 rounded-full">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.66699 11.3333L8.00033 14.6666L16.3337 6.33325" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div class="w-px flex-1 border border-gray-600 border-dashed"></div>
              </div>
              <div class="flex-1 p-3.5 pb-14">

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 md:px-16 bg-gray-800 rounded-3xl">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <img class="mx-auto md:ml-0 rounded-3xl" src="zanrly-assets/images/features/business.png" alt="">
        </div>
        <div class="w-full md:w-1/2 p-8">
          <div class="md:max-w-md">
            <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Feature</span>
            <h2 class="font-heading mb-10 text-4xl text-gray-100 font-black tracking-tight">
              <span>Let’s track your business</span>
              <span class="text-blue-500">easily!</span>
            </h2>
            <div class="flex flex-wrap -m-2.5">
              <div class="w-full p-2.5">
                <div class="flex flex-wrap -m-3">
                  <div class="w-auto p-3">
                    <div class="flex items-center justify-center w-12 h-12 bg-gray-900 rounded-xl">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14 16C14 17.77 13.23 19.37 12 20.46C10.94 21.42 9.54 22 8 22C4.69 22 2 19.31 2 16C2 13.9753 3.01397 12.1814 4.5554 11.0973C4.80358 10.9228 5.1393 11.0422 5.27324 11.3145C6.21715 13.2332 7.95419 14.6699 10.02 15.23C10.65 15.41 11.31 15.5 12 15.5C12.4872 15.5 12.9539 15.4538 13.4074 15.3687C13.6958 15.3147 13.9828 15.4995 13.9955 15.7926C13.9985 15.8621 14 15.9314 14 16Z" fill="#3B82F6"></path>
                        <path d="M18 8C18 8.78 17.85 9.53 17.58 10.21C16.89 11.95 15.41 13.29 13.58 13.79C13.08 13.93 12.55 14 12 14C11.45 14 10.92 13.93 10.42 13.79C8.59 13.29 7.11 11.95 6.42 10.21C6.15 9.53 6 8.78 6 8C6 4.69 8.69 2 12 2C15.31 2 18 4.69 18 8Z" fill="#3B82F6"></path>
                        <path d="M22 16C22 19.31 19.31 22 16 22C15.2555 22 14.5393 21.8643 13.8811 21.6141C13.5624 21.4929 13.503 21.0851 13.7248 20.8262C14.8668 19.4938 15.5 17.786 15.5 16C15.5 15.66 15.47 15.32 15.42 15C15.3902 14.8155 15.4844 14.6342 15.6478 14.5437C16.9719 13.8107 18.0532 12.6876 18.727 11.3153C18.8609 11.0427 19.1968 10.923 19.4452 11.0978C20.9863 12.1818 22 13.9755 22 16Z" fill="#3B82F6"></path>
                      </svg>

<section class="py-16 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-lg mx-auto text-center">
      <h2 class="font-heading max-w-xl mb-4 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Process how it works</h2>
      <p class="mb-12 text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros.</p>
    </div>
    <div class="py-16 px-8 md:px-16 overflow-hidden rounded-3xl" style="background-image: url('zanrly-assets/images/how-it-works/work.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
      <div class="max-w-md">
        <div class="flex flex-wrap">
          <div class="w-full">
            <div class="flex flex-wrap -m-3.5">
              <div class="flex flex-col items-center w-auto p-3.5">
                <div class="flex items-center justify-center w-9 h-9 bg-blue-500 rounded-full">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.66699 11.3333L8.00033 14.6666L16.3337 6.33325" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div class="w-px flex-1 border border-gray-600 border-dashed"></div>
              </div>
              <div class="flex-1 p-3.5 pb-14">
                <span class="inline-block mb-2.5 text-sm text-gray-400 font-bold uppercase">Step 1</span>
                <h3 class="font-heading mb-2.5 text-xl text-white font-black">Choose A Package</h3>
                <p class="text-gray-300 font-bold">Lorem ipsum dolor sit amet, to the consectetur adipiscing elit.</p>
              </div>

<section class="py-16 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-dark w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative max-w-lg mx-auto text-center">
        <h2 class="font-heading max-w-xl mb-4 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Process how it works</h2>
        <p class="mb-12 text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros.</p>
      </div>
      <div class="relative py-16 px-8 md:px-16 overflow-hidden rounded-3xl" style="background-image: url('zanrly-assets/images/how-it-works/work.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
        <div class="max-w-md">
          <div class="flex flex-wrap">
            <div class="w-full">
              <div class="flex flex-wrap -m-3.5">
                <div class="flex flex-col items-center w-auto p-3.5">
                  <div class="flex items-center justify-center w-9 h-9 bg-blue-500 rounded-full">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M4.66699 11.3333L8.00033 14.6666L16.3337 6.33325" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div class="w-px flex-1 border border-gray-600 border-dashed"></div>
                </div>

<section class="py-16 bg-gray-100 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="md:max-w-lg mb-10">
      <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Frequently asked questions</span>
      <h2 class="font-heading text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Common Answers</h2>
    </div>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 p-4">
        <div class="flex flex-col justify-between p-10 h-full bg-white rounded-3xl">
          <div class="flex-initial mb-8 md:mb-36">
            <h3 class="font-heading text-xl text-gray-900 font-black">How does Zanrly help you in problems?</h3>
          </div>
          <div class="flex-initial">
            <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="flex flex-col justify-between p-10 h-full bg-white rounded-3xl">
          <div class="flex-initial mb-8 md:mb-36">
            <h3 class="font-heading text-xl text-gray-900 font-black">What makes us look good?</h3>
          </div>
          <div class="flex-initial">
            <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.Mauris accumsan tristique velit, lobortis tincidunt ex interdum sagittis.</p>

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-20 px-8 md:px-16 overflow-hidden rounded-3xl" style="background-image: url('zanrly-assets/images/applications/website.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
      <div class="max-w-7xl mx-auto">
        <div class="md:max-w-lg">
          <h2 class="font-heading mb-6 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Build website animations and interactions visually.</h2>
          <p class="mb-8 text-gray-200 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis volutpat velit, quis iaculis velit bibendum a. Maecenas accumsan fermentum nisl.</p>
          <div class="flex flex-wrap -m-2">
            <div class="w-full md:w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Download Zanrly App</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-10 px-8 bg-gray-100 overflow-hidden rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-gray w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-white.png" alt="">
      </div>
      <div class="relative max-w-7xl mx-auto">
        <div class="flex flex-wrap -m-8">
          <div class="w-full md:w-1/2 p-8">
            <div class="py-9 md:max-w-md">
              <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Pricing</span>
              <h2 class="font-heading mb-4 text-4xl text-gray-900 font-black tracking-tight">Unlimited access to all products</h2>
              <p class="mb-8 text-gray-700 font-bold">Yearly access to all products with ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
              <div class="flex flex-wrap -m-2">
                <div class="w-auto p-2">
                  <div class="flex flex-wrap px-3 py-2 bg-white rounded-full">
                    <div class="w-auto mr-2 pt-1">
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8.095 1H3.905C2.085 1 1 2.085 1 3.905V8.09C1 9.915 2.085 11 3.905 11H8.09C9.91 11 10.995 9.915 10.995 8.095V3.905C11 2.085 9.915 1 8.095 1ZM8.39 4.85L5.555 7.685C5.485 7.755 5.39 7.795 5.29 7.795C5.19 7.795 5.095 7.755 5.025 7.685L3.61 6.27C3.465 6.125 3.465 5.885 3.61 5.74C3.755 5.595 3.995 5.595 4.14 5.74L5.29 6.89L7.86 4.32C8.005 4.175 8.245 4.175 8.39 4.32C8.535 4.465 8.535 4.7 8.39 4.85Z" fill="#3B82F6"></path>
                      </svg>
                    </div>
                    <div class="flex-1">
                      <p class="text-sm text-gray-900 font-bold">Build CSS grid–powered layouts visually</p>