<section>
   <div class="items-center px-8 py-12 mx-auto max-w-7xl lg:px-16 md:px-12 lg:py-24">
     <div class="justify-center w-full text-center lg:p-10 max-auto">
       <div class="justify-center w-full mx-auto">
         <p class="mt-8 text-5xl font-medium tracking-tighter">
           I am a short heading
         </p>
         <p class="max-w-xl mx-auto mt-4 text-lg tracking-tight">
           If you could kick the person in the pants responsible for most of your
           trouble, you wouldn't sit for a month
         </p>
       </div>
       <div class="flex flex-col items-center justify-center max-w-xl gap-3 mx-auto mt-10 lg:flex-row"> <a href="" class="items-center justify-center w-full px-6 py-2.5 text-center text-primary-content duration-200 bg-primary hover:bg-transparent hover:border-primary hover:text-primary border-2 border-primary rounded-full inline-flex  focus:outline-none lg:w-auto focus-visible:outline-black text-sm focus-visible:ring-black">
           Button
         </a> <a href="" class="inline-flex items-center justify-center text-sm font-semibold text-primary duration-200 link link-hover focus:outline-none focus-visible:outline-gray-600">
           Learn more &nbsp; →
         </a> </div>
     </div>
   </div>
 </section>

 <section class="mt-12">
   <div class="relative items-center w-full px-5 py-24 mx-auto overflow-hidden md:px-12 lg:px-16 max-w-7xl">
     <div class="grid items-start grid-cols-1 gap-12 md:grid-cols-2">
       <div>
         <div class="max-w-xl lg:p-10">
           <div>
             <p class="text-2xl font-medium tracking-tight sm:text-4xl">
               I am a short heading
             </p>
             <p class="max-w-xl mt-4 text-base tracking-tight">
               Use this paragraph to share information about your company or products. Make
               it engaging and interesting, and showcase your brand's personality. Thanks for
               visiting our website!
             </p>
           </div>
           <div class="flex flex-col items-center justify-center gap-3 mt-10 lg:flex-row lg:justify-start"> <a href="" class="items-center justify-center w-full px-6 py-2.5 text-center text-primary-content duration-200 bg-primary border-2 border-primary rounded-full inline-flex hover:bg-transparent hover:border-primary hover:text-primary focus:outline-none lg:w-auto focus-visible:outline-black text-sm focus-visible:ring-black">
               Button
             </a> <a href="" class="inline-flex items-center justify-center text-sm font-semibold link link-hover duration-200">
               Learn more &nbsp; →
             </a> </div>
         </div>
       </div>
       <div class="lg:mt-0 lg:ml-auto">
         <div class="absolute transform lg:-translate-y-1/2 lg:left-1/2 lg:top-1/2 lg:translate-x-8 sm:left-1/2 sm:top-0 sm:translate-x-8">
           <div class="flex items-center space-x-6 lg:space-x-8">
             <div class="grid flex-shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
               <div class="h-full overflow-hidden w-44 lg:opacity-100 sm:opacity-0"> <img alt="thumbnail" class="object-cover" src="/rectangle2.svg" decoding="async" height="926" loading="lazy" width="428"> </div>
               <div class="h-full overflow-hidden w-44"> <img alt="thumbnail" class="object-cover" src="/rectangle2.svg" decoding="async" height="926" loading="lazy" width="428"> </div>
             </div>
             <div class="grid flex-shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
               <div class="h-full overflow-hidden w-44"> <img alt="thumbnail" class="object-cover" src="/rectangle2.svg" decoding="async" height="926" loading="lazy" width="428"> </div>
               <div class="h-full overflow-hidden w-44"> <img alt="thumbnail" class="object-cover" src="/rectangle2.svg" decoding="async" height="926" loading="lazy" width="428"> </div>
               <div class="h-full overflow-hidden w-44"> <img alt="thumbnail" class="object-cover" src="/rectangle2.svg" decoding="async" height="926" loading="lazy" width="428"> </div>
             </div>
             <div class="grid flex-shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
               <div class="h-full overflow-hidden w-44"> <img alt="thumbnail" class="object-cover" src="/rectangle2.svg" decoding="async" height="926" loading="lazy" width="428"> </div>
               <div class="h-full overflow-hidden w-44"> <img alt="thumbnail" class="object-cover" src="/rectangle2.svg" decoding="async" height="926" loading="lazy" width="428"> </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </section>

 <section>
   <div class="py-24">
     <div class="relative px-8">
       <div class="max-w-3xl text-center lg:text-left">
         <div class="max-w-xl mx-auto text-center lg:p-10 lg:text-left">
           <div>
             <p class="text-2xl font-medium tracking-tight sm:text-4xl">
               I am a short heading
             </p>
             <p class="max-w-xl mt-4 text-base tracking-tight ">
               Use this paragraph to share information about your company or products. Make
               it engaging and interesting, and showcase your brand's personality. Thanks for
               visiting our website!
             </p>
           </div>
           <div class="flex flex-col items-center justify-center gap-3 mt-10 lg:flex-row lg:justify-start"> <a href="#_" class="items-center justify-center w-full px-6 py-2.5 text-center text-primary-content duration-200 bg-primary border-2 border-primary rounded-full inline-flex hover:bg-transparent hover:border-primary hover:text-primary focus:outline-none lg:w-auto focus-visible:outline-black text-sm focus-visible:ring-black">
               Button
             </a> <a href="#_" class="inline-flex items-center justify-center text-sm font-semibold text-primary duration-200 link link-hover focus:outline-none focus-visible:outline-gray-600">
               Learn more →
             </a> </div>
         </div>
       </div>
     </div>
   </div>
 </section>

 <section>
   <div class="items-center w-full px-5 py-24 mx-auto md:px-12 lg:px-16 max-w-7xl">
     <div class="text-left">
       <div class="items-center mx-auto lg:inline-flex">
         <div class="grid grid-cols-1 gap-6 lg:grid-cols-2 lg:gap-24">
           <div>
             <p class="text-2xl font-medium tracking-tight sm:text-4xl">
               I am a short heading
             </p>
           </div>
           <div class="lg:ml-auto">
             <p class="mt-4 text-lg tracking-tight lg:mt-0">
               Whether you're a beginner or an experienced programmer, our SaaS
               product offers the tools you need to be successful.
             </p>
           </div>
         </div>
       </div>
     </div>
     <div class="relative items-center w-full mx-auto mt-12"> <img class="object-cover object-center w-full" src="rectangle1.svg" alt=""> </div>
     <div>
       <div class="pt-12 mx-auto lg:max-w-7xl">
         <dl class="grid grid-cols-1 gap-6 space-y-0 lg:gap-24 lg:grid-cols-3">
           <div>
             <div>
               <p class="text-lg font-medium leading-6">
                 Developer experience
               </p>
             </div>
             <div class="mt-2 text-base ">
               Plus, our platform is constantly evolving to meet the changing
               needs of the tech industry, ensuring you'll always be ahead.
             </div>
           </div>
           <div>
             <div>
               <p class="text-lg font-medium leading-6">
                 Designers go-to app
               </p>
             </div>
             <div class="mt-2 text-base ">
               Plus, our platform is constantly evolving to meet the changing
               needs of the tech industry, ensuring you'll always be ahead.
             </div>
           </div>
           <div>
             <div>
               <p class="text-lg font-medium leading-6">
                 Easy onboarding
               </p>
             </div>
             <div class="mt-2 text-base ">
               Plus, our platform is constantly evolving to meet the changing
               needs of the tech industry, ensuring you'll always be ahead.
             </div>
           </div>
         </dl>
       </div>
     </div>
   </div>
 </section>

 <section>
   <div class="items-center w-full max-w-3xl px-5 py-24 mx-auto md:px-12 lg:px-16">
     <div>
       <p class="text-4xl text-center">
         Frequently asked questions
       </p>
     </div>
     <ul role="list" class="grid grid-cols-1 gap-4 list-none lg:gap-12 mt-12">
       <li>
         <div>
           <p class="mt-5 text-lg font-medium leading-6">
             Can I use Daisy Static for my site?
           </p>
         </div>
         <div class="mt-2 text-base">
           Upswing securities passively index inverse bondholders
           capitalization financial health Moody's debt managed.
         </div>
       </li>
       <li>
         <div>
           <p class="mt-5 text-lg font-medium leading-6">
             Will i get updates?
           </p>
         </div>
         <div class="mt-2 text-base">
           Upswing securities passively index inverse bondholders
           capitalization financial health Moody's debt managed.
         </div>
       </li>
       <li>
         <div>
           <p class="mt-5 text-lg font-medium leading-6">
             How much do disputes cost?
           </p>
         </div>
         <div class="mt-2 text-base">
           Upswing securities passively index inverse bondholders
           capitalization financial health Moody's debt managed.
         </div>
       </li>
       <li>
         <div>
           <p class="mt-5 text-lg font-medium leading-6">
             How do refunds work?
           </p>
         </div>
         <div class="mt-2 text-base">
           Plus, our platform is constantly evolving to meet the changing needs.
         </div>
       </li>
       <li>
         <div>
           <p class="mt-5 text-lg font-medium leading-6">
             Is there a fee to use Google Pay?
           </p>
         </div>
         <div class="mt-2 text-base">
           Plus, our platform is constantly evolving to meet the changing needs.
         </div>
       </li>
       <li>
         <div>
           <p class="mt-5 text-lg font-medium leading-6">
             Customer support
           </p>
         </div>
         <div class="mt-2 text-base">
           Plus, our platform is constantly evolving to meet the changing needs.
         </div>
       </li>
     </ul>
   </div>
 </section>

 <footer class="w-full" aria-labelledby="footer-heading">
   <h2 id="footer-heading" class="sr-only">Footer</h2>
   <div class="px-4 py-12 mx-auto max-w-7xl sm:px-6 lg:px-16">
     <div class="flex flex-col items-baseline space-y-6">
       <div class="mx-auto"> <span class="mx-auto mt-2 text-sm">
daisystatic by <a href="https://twitter.com/iwootten" class="link link-primary" rel="noopener noreferrer">@iwootten</a>, original <a class="link link-primary" href="https://windstatic.com">windstatic</a> components by <a class="link link-primary" href="https://michaelandreuzza.com/">Michael Andreuzza</a>. Since 2023
</span> </div>
     </div>
   </div>
 </footer>