<section id="ic39kg" class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
      <div class="flex items-center mb-4 lg:mb-8">
        <div class="flex-grow border-neutral-200 border-t border-2"></div>
        <div class="px-4 font-bold text-2xl lg:text-4xl">
          <p>Awards</p>
        </div>
        <div class="flex-grow border-neutral-200 border-t border-2"></div>
      </div>
      <div class="grid gap-4 lg:grid-cols-2">
        <div
          class="items-center justify-center p-4 rounded-lg bg-neutral-200 lg:p-8"
        >
          <div
            class="w-16 h-16 flex items-center justify-center text-4xl bg-blue-600 text-white mb-4 rounded-full"
          >
            <i class="fas fa-trophy"></i>
          </div>
          <h1 class="text-2xl lg:text-4xl font-semibold mb-2">
            1st Runner Up<br />
          </h1>
          <p class="lg:text-lg">UniMaker 2018 Northern Region<br /></p>
        </div>
        <div
          class="items-center justify-center p-4 rounded-lg bg-neutral-200 lg:p-8"
        >
          <div
            class="w-16 h-16 flex items-center justify-center text-4xl bg-blue-600 text-white mb-4 rounded-full"
          >
            <i class="fa-medapps fab"></i>
          </div>
          <h1 class="text-2xl lg:text-4xl font-semibold mb-2">
            1st Runner Up<br />
          </h1>
          <p class="lg:text-lg">Inclusive Innovation Challenge 2017<br /></p>
        </div>
        <div
          class="items-center justify-center p-4 rounded-lg bg-neutral-200 lg:p-8"
        >
          <div
            class="w-16 h-16 flex items-center justify-center text-4xl bg-blue-600 text-white mb-4 rounded-full"
          >
            <i class="fas fa-medal"></i>
          </div>
          <h1 class="text-2xl lg:text-4xl font-semibold mb-2">
            Gold Medal<br />
          </h1>
          <p class="lg:text-lg">
            Invention, Innovation &amp; Design Exposition 2018<br />
          </p>
        </div>
        <div
          class="items-center justify-center p-4 rounded-lg bg-neutral-200 lg:p-8"
        >
          <div
            class="w-16 h-16 flex items-center justify-center text-4xl bg-blue-600 text-white mb-4 rounded-full"
          >
            <i class="fas fa-award"></i>
          </div>
          <h1 class="text-2xl lg:text-4xl font-semibold mb-2">
            Diamond Award<br />
          </h1>
          <p class="lg:text-lg">
            National Student Affair Invention, Innovation &amp; Design
            Competition<br />
          </p>
        </div>
      </div>
    </section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
      <div class="text-center">
        <div class="headline mx-auto mb-8 max-w-full lg:max-w-3xl">
          <div
            class="mx-auto mb-2 w-min rounded-lg bg-blue-600 px-2 py-1 lg:mb-4"
          >
            <p class="text-sm font-bold uppercase text-white">Sections</p>
          </div>
          <h2 class="mb-4 text-3xl font-bold capitalize lg:text-6xl">
            Compliment Your Designs with Customizable Sections
          </h2>
          <h6 class="text-base lg:text-lg">
            From hero sections to testimonials, SenangStart has the perfect
            section for your website.
          </h6>
        </div>
        <div class="mb-8 grid grid-cols-1 gap-4 lg:mb-16 lg:grid-cols-2">
          <div
            class="aspect-square overflow-hidden rounded-xl bg-gradient-to-br from-blue-300 to-blue-600 lg:col-span-2 lg:aspect-video"
          >
            <img
              class="scale-120 h-full w-full object-cover object-center"
              src="https://placehold.co/600x400/2563EB/FFFFFF"
              alt=""
            />
          </div>
          <div
            class="flex flex-col justify-between rounded-xl bg-neutral-200 px-4 pt-4"
          >
            <div>
              <h5 class="mb-4 text-lg font-bold lg:text-xl">Hero Sections</h5>
              <h6 class="text-base lg:text-lg">
                Hero sections with background images, text, and buttons
              </h6>
            </div>
            <div class="p-8 lg:p-16">
              <img
                class="w-full"
                src="https://placehold.co/600x400/"
                alt=""
              />
            </div>
          </div>
          <div
            class="flex flex-col justify-between rounded-xl bg-neutral-200 px-4 pt-4"
          >
            <div>
              <h5 class="mb-4 text-lg font-bold lg:text-xl">Contents</h5>
              <h6 class="text-base lg:text-lg">
                Sections for displaying content, including text and images
              </h6>
            </div>
            <div class="p-8 lg:p-16">
              <img
                class="w-full"
                src="https://placehold.co/600x400/"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="flex justify-center">
          <a
            href="https://senangstart.com/sections"
            class="flex items-center gap-2 pr-1 text-xl font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80"
            >See All Sections<i class="fas fa-arrow-right"></i
          ></a>
        </div>
      </div>
    </section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
      <h4 class="text-xl font-bold capitalize lg:text-2xl">
        Up-Coming Webinar
      </h4>
      <div class="mt-4 grid gap-4 lg:mt-8 lg:grid-cols-3">
        <div>
          <div
            class="relative rounded-lg bg-gray-200 p-4"
            style="
              padding-top: 60%;
              background: url('https://placehold.co/600x400');
              background-size: cover;
            "
          >
            <p
              class="absolute left-4 top-4 flex h-6 items-center rounded border-2 border-black px-1 text-xs font-bold"
            >
              Latest
            </p>
          </div>
          <p class="mb-1 mt-2 text-sm">Thursday, March 28</p>
          <a href="#" class="font-bold hover:underline lg:text-lg">
            Navigate the Entrepreneurial Rollercoaster: Shift from Struggle to
            Success</a
          >
        </div>
        <div>
          <div
            class="relative rounded-lg bg-gray-200 p-4"
            style="
              padding-top: 60%;
              background: url('https://placehold.co/600x400');
              background-size: cover;
            "
          >
            <p
              class="absolute left-4 top-4 flex h-6 items-center rounded border-2 border-black px-1 text-xs font-bold"
            >
              Latest
            </p>
          </div>
          <p class="mb-1 mt-2 text-sm">Friday, April 5</p>
          <a href="#" class="font-bold hover:underline lg:text-lg">
            Tech Tea Time: Business Networking for AI Enthusiasts</a
          >
        </div>
        <div>
          <div
            class="relative rounded-lg bg-gray-200 p-4"
            style="
              padding-top: 60%;
              background: url('https://placehold.co/600x400');
              background-size: cover;
            "
          >
            <p
              class="absolute left-4 top-4 flex h-6 items-center rounded border-2 border-black px-1 text-xs font-bold"
            >
              Latest
            </p>
          </div>
          <p class="mb-1 mt-2 text-sm">Saturday, March 30</p>
          <a href="#" class="font-bold hover:underline lg:text-lg">
            The Financial Investment Expo 2024（Kuala Lunpur）</a
          >
        </div>
      </div>
    </section>

<section class="px-6 lg:px-16 container mx-auto my-8 lg:my-16">
      <h1 class="font-bold text-4xl">More Courses</h1>
      <div class="grid lg:grid-cols-3 mt-4 lg:mt-8 gap-4">
        <div
          class="bg-gray-200 rounded-lg p-4 flex flex-col"
          style="
            background: url('https://placehold.co/400x600');
            background-size: cover;
            background-position: center;
          "
        >
          <div class="text-center">
            <h4 class="text-xl font-semibold mb-1">Making Your Ads Work</h4>
            <p class="text-sm">3 Days</p>
          </div>
          <div class="flex-grow h-80"></div>
          <div>
            <div class="flex mb-4">
              <a
                href="#"
                class="min-h-12 flex items-center justify-center bg-white text-blue-600 font-semibold px-8 rounded-lg flex-grow"
                >View</a
              >
              <div class="w-2"></div>
              <a
                href="#"
                class="h-12 flex items-center justify-center text-white bg-blue-600 font-semibold px-8 rounded-lg"
                >Buy</a
              >
            </div>
            <p class="pt-4 border-t border-neutral-200 text-center text-xs">
              Bootcamp
            </p>
          </div>
        </div>
        <div
          class="bg-gray-200 rounded-lg p-4 flex flex-col"
          style="
            background: url('https://placehold.co/400x600');
            background-size: cover;
            background-position: center;
          "
        >
          <div class="text-center">
            <h4 class="text-xl font-semibold mb-1">Making Your Ads Work</h4>
            <p class="text-sm">3 Days</p>
          </div>
          <div class="flex-grow h-80"></div>
          <div>
            <div class="flex mb-4">
              <a
                href="#"
                class="min-h-12 flex items-center justify-center bg-white text-blue-600 font-semibold px-8 rounded-lg flex-grow"
                >View</a
              >
              <div class="w-2"></div>
              <a
                href="#"
                class="h-12 flex items-center justify-center text-white bg-blue-600 font-semibold px-8 rounded-lg"
                >Buy</a
              >
            </div>
            <p class="pt-4 border-t border-neutral-200 text-center text-xs">
              Bootcamp
            </p>
          </div>
        </div>
        <div
          class="bg-gray-200 rounded-lg p-4 flex flex-col"
          style="
            background: url('https://placehold.co/400x600');
            background-size: cover;
            background-position: center;
          "
        >
          <div class="text-center">
            <h4 class="text-xl font-semibold mb-1">Making Your Ads Work</h4>
            <p class="text-sm">3 Days</p>
          </div>
          <div class="flex-grow h-80"></div>
          <div>
            <div class="flex mb-4">
              <a
                href="#"
                class="min-h-12 flex items-center justify-center bg-white text-blue-600 font-semibold px-8 rounded-lg flex-grow"
                >View</a
              >
              <div class="w-2"></div>
              <a
                href="#"
                class="h-12 flex items-center justify-center text-white bg-blue-600 font-semibold px-8 rounded-lg"
                >Buy</a
              >
            </div>
            <p class="pt-4 border-t border-neutral-200 text-center text-xs">
              Bootcamp
            </p>
          </div>
        </div>
      </div>
    </section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="mb-4 grid grid-cols-1 lg:mb-8 lg:grid-cols-2">
    <div class="col-span-1 lg:col-span-2">
      <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">News</div>
    </div>
    <div>
      <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-0 lg:text-6xl">Bonus</h1>
    </div>
    <div class="flex items-center">
      <p class="w-full text-left text-base font-semibold lg:text-right lg:text-2xl">Our latest updates and what is happening in the organisation</p>
    </div>
  </div>
  <div class="grid grid-cols-1 grid-rows-3 gap-4 lg:grid-cols-2 lg:grid-rows-2">
    <div class="relative row-span-1 overflow-hidden rounded-lg bg-gray-200 lg:row-span-2" style="padding-top: 100%">
      <img src="https://placehold.co/600x600" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4 lg:p-8">
        <p class="mb-2 font-bold opacity-50 lg:mb-4">Points One</p>
        <h1 class="text-base font-semibold capitalize lg:text-6xl lg:font-bold">Headline Description</h1>
      </div>
    </div>
    <div class="relative row-span-1 overflow-hidden rounded-lg bg-gray-200">
      <img src="https://placehold.co/600x600" class="absolute top-0 w-full lg:hidden" />
      <img src="https://placehold.co/600x300" class="absolute top-0 hidden w-full lg:block" />
      <div class="absolute left-0 top-0 w-full p-4 lg:p-8">
        <p class="mb-2 font-bold opacity-50">Point Two</p>
        <p class="text-base font-semibold lg:text-2xl">Headline Description</p>
      </div>
    </div>
    <div class="relative row-span-1 overflow-hidden rounded-lg bg-gray-200">
      <img src="https://placehold.co/600x600" class="absolute top-0 w-full lg:hidden" />
      <img src="https://placehold.co/600x300" class="absolute top-0 hidden w-full lg:block" />
      <div class="absolute left-0 top-0 w-full p-4 lg:p-8">
        <p class="mb-2 font-bold opacity-50">Points Three</p>
        <p class="text-base font-semibold lg:text-2xl">Headline Description</p>
      </div>
    </div>
  </div>
</section>

<section id="i5mjqy" class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
    <div
        class="rounded-lg bg-neutral-200 p-4 lg:px-16 lg:py-12 overflow-hidden relative grid grid-cols-1 lg:grid-cols-3 gap-4">
        <div id="idkx7p" class="col-span-1 lg:col-span-2 flex flex-col justify-center">
            <h1 id="isvtkz" class="text-3xl lg:text-6xl capitalize font-semibold lg:font-bold mb-2">Ready to Take Your
                Business to the Next Level?</h1>
            <p id="i2aebj" class="text-xl lg:text-2xl w-full opacity-70 mb-4 lg:mb-8">Contact us today for a free
                consultation and let our team of experts
                discuss how we can create a custom software solution tailored to
                your business needs and goals.</p>
            <div id="i9v9v9" class="flex mb-4 lg:mb-8">
                <div class="w-16 rounded-full bg-blue-100 relative overflow-hidden mr-4 h-16"><img
                        src="https://placehold.co/64x64"
                        class="w-16 absolute top-0 right-0 grayscale"></div>
                <div class="flex justify-center flex-col font-semibold">
                    <p class="text-lg">A.Hakim Noor</p>
                    <p id="iwxz4f" class="text-sm">Technology Officer</p>
                </div>
            </div><a id="iks4tf" href="https://bookklik.com/contact-us" title="Contact Me"
                class="bg-blue-600 text-white rounded-lg text-lg font-semibold px-6 w-full lg:max-w-max h-12 flex items-center justify-center hover:opacity-80">Contact
                Me Now</a>
        </div>
        <div class="hidden lg:flex justify-right relative"><img
                src="https://placehold.co/400x400"
                class="w-full h-full absolute top-0 left-0 object-contain"></div>
    </div>
</section>

<section id="iq6c9k" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div id="ikg6bc" class="relative grid grid-cols-1 gap-4 overflow-hidden rounded-2xl bg-blue-500 p-4 text-white lg:grid-cols-3 lg:px-16 lg:py-12">
    <div id="it9lmw" class="col-span-1 flex flex-col justify-center lg:col-span-2">
      <h1 id="ijfehq" class="mb-2 text-2xl font-semibold capitalize lg:text-6xl lg:font-bold">Download My App</h1>
      <p id="i9jh58" class="mb-4 w-full text-base text-black lg:mb-8 lg:text-2xl">Don't wait anymore, push the download button now!</p>
      <div id="in87r6" class="flex flex-col gap-4 lg:flex-row"><a id="ibapy4" href="https://qheat.bookklik.com/web/" type="button" target="_blank" class="flex h-12 w-full items-center justify-center rounded-lg bg-white px-6 text-lg font-semibold text-blue-500 hover:opacity-80 lg:max-w-max">App Store</a><a id="ixfgqb" href="https://play.google.com/store/apps/details?id=com.qheat.calculator" type="button" target="_blank" class="flex h-12 w-full items-center justify-center rounded-lg border-2 border-white px-6 text-lg font-semibold text-white hover:opacity-80 lg:max-w-max">Play Store</a></div>
    </div>
    <div id="i4ajll" class="justify-right hidden aspect-square lg:flex"><img id="ivfr4c" src="https://placehold.co/400x400" class="mx-auto w-full object-contain" /></div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="group relative relative grid grid-cols-1 gap-4 overflow-hidden rounded-lg border bg-black text-white shadow-lg lg:grid-cols-3">
    <div class="absolute left-0 top-0 h-full w-full overflow-hidden">
      <img src="https://placehold.co/800x400" loading="lazy" class="h-full w-full object-cover opacity-70 blur-2xl" />
    </div>
    <div class="z-10 col-span-1 flex flex-col justify-center p-8 lg:col-span-2 lg:px-16 lg:py-12">
      <h1 class="mb-2 text-2xl font-semibold capitalize lg:text-6xl lg:font-bold">Start Building with <span class="text-blue-600">SenangWebs</span></h1>
      <p class="mb-4 w-full text-base lg:mb-8 lg:text-2xl">Drag &amp; drop website builder for effortless online presence. Came with SenangStart templates, sections &amp; components library built-in.</p>
      <div id="in87r6" class="flex flex-col gap-4 lg:flex-row"><a id="ibapy4" href="https://use.senangwebs.com" type="button" target="_blank" class="flex h-12 w-full items-center justify-center rounded-lg bg-blue-600 px-6 text-lg font-semibold text-white hover:opacity-80 lg:max-w-max"> Start Now! </a></div>
    </div>
    <div class="z-10 flex items-end justify-center">
      <img id="ivfr4c" src="https://placehold.co/300x400" class="scale-120 w-full duration-300 group-hover:-ml-16" />
    </div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div
    class="relative grid grid-cols-1 gap-4 overflow-hidden rounded-lg bg-gray-200 p-4 lg:grid-cols-3 lg:px-16 lg:py-12"
    style="
      background-image: url('https://placehold.co/1200x400/2563EB/FFFFFF');
      background-size: cover;
      background-position: center;
    "
  >
    <div class="col-span-1 flex flex-col justify-center lg:col-span-2">
      <h1 class="mb-2 text-2xl font-semibold capitalize lg:text-6xl lg:font-bold">Download Our Profile</h1>
      <p class="mb-4 w-full text-base font-semibold opacity-70 lg:mb-8 lg:text-2xl">Want to see if we are a good fit your next App or System project? Download our profile by clicking the button below.</p>
      <div class="mb-4 flex lg:mb-8">
        <div class="relative mr-4 h-12 w-12 overflow-hidden rounded-full bg-gray-200">
          <img src="https://placehold.co/48x48" class="absolute left-0 top-0 w-12" />
        </div>
        <div class="flex flex-col justify-center font-semibold">
          <p class="text-sm">Hamdan</p>
          <p class="text-xs">Engineering Consultant</p>
        </div>
      </div>
      <a href="#" class="flex items-center justify-center rounded-lg bg-white px-8 py-3 text-center font-semibold text-blue-600 lg:max-w-max lg:text-lg">Download Now</a>
    </div>
    <div class="justify-right hidden lg:flex"></div>
  </div>
</section>

    <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
      <div class="overflow-hidden rounded-2xl bg-blue-600 text-white">
        <div class="grid gap-8 lg:grid-cols-2">
          <!-- Content Side -->
          <div class="p-8 lg:p-16">
            <h2 class="mb-4 text-3xl font-bold lg:text-5xl">
              Ready to Transform Your Business?
            </h2>
            <p class="mb-8 text-lg lg:text-xl">
              Join over 10,000+ companies that have accelerated their growth
              with our solutions.
            </p>

            <!-- Stats Grid -->
            <div class="mb-8 grid grid-cols-2 gap-8">
              <div>
                <p class="text-3xl font-bold lg:text-5xl">98%</p>
                <p class="text-sm lg:text-base">Customer Satisfaction</p>
              </div>
              <div>
                <p class="text-3xl font-bold lg:text-5xl">2.5x</p>
                <p class="text-sm lg:text-base">Revenue Growth</p>
              </div>
              <div>
                <p class="text-3xl font-bold lg:text-5xl">24/7</p>
                <p class="text-sm lg:text-base">Expert Support</p>
              </div>
              <div>
                <p class="text-3xl font-bold lg:text-5xl">50+</p>
                <p class="text-sm lg:text-base">Countries Served</p>
              </div>
            </div>

            <!-- CTA Buttons -->
            <div class="flex flex-col gap-4 xl:flex-row">
              <a
                href="#demo"
                class="flex h-14 items-center justify-center rounded-lg bg-white px-8 text-lg font-semibold text-blue-600 hover:bg-opacity-90"
              >
                Schedule Demo
              </a>
              <a
                href="#contact"
                class="flex h-14 items-center justify-center rounded-lg border-2 border-white px-8 text-lg font-semibold hover:bg-white hover:text-blue-600"
              >
                Contact Sales
              </a>
            </div>
          </div>

          <!-- Image Side -->
          <div class="relative hidden lg:block">
            <img
              src="https://placehold.co/600x800"
              alt="Dashboard Preview"
              class="absolute -right-24 top-1/2 w-auto -translate-y-1/2 object-cover"
            />
          </div>
        </div>
      </div>
    </section>

    <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
      <div class="rounded-2xl bg-neutral-100 p-8 lg:p-16">
        <div class="mx-auto max-w-3xl text-center">
          <span
            class="mb-4 inline-block rounded-full bg-blue-100 px-4 py-2 text-sm font-semibold text-blue-600"
            >NEWSLETTER</span
          >
          <h2 class="mb-4 text-3xl font-bold lg:text-5xl">
            Stay Ahead of the Curve
          </h2>
          <p class="mb-8 text-lg lg:text-xl">
            Get weekly insights on industry trends, tech innovations, and growth
            strategies delivered to your inbox.
          </p>

          <!-- Email Form -->
          <form class="mb-8">
            <div class="flex flex-col gap-4 lg:flex-row">
              <input
                type="email"
                placeholder="Enter your email"
                class="h-14 flex-grow rounded-lg border border-neutral-200 px-6 focus:border-blue-600 focus:outline-none"
              />
              <button
                class="h-14 rounded-lg bg-blue-600 px-8 text-lg font-semibold text-white hover:bg-blue-700"
              >
                Subscribe Now
              </button>
            </div>
          </form>

          <!-- Social Proof -->
          <div class="flex flex-col items-center gap-4">
            <p class="text-sm font-semibold text-neutral-600">
              TRUSTED BY LEADING COMPANIES
            </p>
            <div class="flex flex-wrap items-center justify-center gap-8">
              <img
                src="https://placehold.co/120x40"
                alt="Company Logo"
                class="h-8 grayscale transition-all hover:grayscale-0"
              />
              <img
                src="https://placehold.co/120x40"
                alt="Company Logo"
                class="h-8 grayscale transition-all hover:grayscale-0"
              />
              <img
                src="https://placehold.co/120x40"
                alt="Company Logo"
                class="h-8 grayscale transition-all hover:grayscale-0"
              />
              <img
                src="https://placehold.co/120x40"
                alt="Company Logo"
                class="h-8 grayscale transition-all hover:grayscale-0"
              />
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
      <div class="rounded-2xl bg-neutral-100 p-8 lg:p-16">
        <div class="mx-auto max-w-4xl">
          <div class="mb-8 text-center">
            <span
              class="mb-4 inline-block rounded-full bg-blue-100 px-4 py-2 text-sm font-semibold text-blue-600"
              >UPGRADE NOW</span
            >
            <h2 class="mb-4 text-3xl font-bold lg:text-5xl">
              Why Choose Premium?
            </h2>
            <p class="text-lg lg:text-xl">
              Unlock advanced features and take your business to the next level.
            </p>
          </div>

          <!-- Feature Comparison -->
          <div class="mb-8 grid gap-4 lg:grid-cols-2">
            <!-- Free Features -->
            <div class="rounded-xl bg-white p-6">
              <div class="mb-6">
                <h3 class="text-xl font-bold">Free Plan</h3>
                <p class="text-sm text-neutral-600">
                  Basic features for small teams
                </p>
              </div>
              <ul class="mb-6 space-y-4">
                <li class="flex items-center gap-3">
                  <i class="fas fa-check text-green-500"></i>
                  <span>Up to 5 team members</span>
                </li>
                <li class="flex items-center gap-3">
                  <i class="fas fa-check text-green-500"></i>
                  <span>Basic analytics</span>
                </li>
                <li class="flex items-center gap-3">
                  <i class="fas fa-check text-green-500"></i>
                  <span>5GB storage</span>
                </li>
                <li class="flex items-center gap-3 text-neutral-400">
                  <i class="fas fa-times"></i>
                  <span>Advanced security</span>
                </li>
                <li class="flex items-center gap-3 text-neutral-400">
                  <i class="fas fa-times"></i>
                  <span>Custom integrations</span>
                </li>
              </ul>
              <a
                href="#signup"
                class="flex h-12 w-full items-center justify-center rounded-lg border-2 border-neutral-200 font-semibold hover:border-blue-600 hover:text-blue-600"
              >
                Current Plan
              </a>
            </div>

            <!-- Premium Features -->
            <div class="rounded-xl bg-blue-600 p-6 text-white">
              <div class="mb-6">
                <h3 class="text-xl font-bold">Premium Plan</h3>
                <p class="text-sm text-blue-200">
                  Advanced features for growing businesses
                </p>
              </div>
              <ul class="mb-6 space-y-4">
                <li class="flex items-center gap-3">
                  <i class="fas fa-check"></i>
                  <span>Unlimited team members</span>
                </li>
                <li class="flex items-center gap-3">
                  <i class="fas fa-check"></i>
                  <span>Advanced analytics & reporting</span>
                </li>
                <li class="flex items-center gap-3">
                  <i class="fas fa-check"></i>
                  <span>Unlimited storage</span>
                </li>
                <li class="flex items-center gap-3">
                  <i class="fas fa-check"></i>
                  <span>Enterprise-grade security</span>
                </li>
                <li class="flex items-center gap-3">
                  <i class="fas fa-check"></i>
                  <span>Custom integrations & API access</span>
                </li>
              </ul>
              <a
                href="#upgrade"
                class="flex h-12 w-full items-center justify-center rounded-lg bg-white font-semibold text-blue-600 hover:bg-opacity-90"
              >
                Upgrade Now
              </a>
            </div>
          </div>

          <!-- Testimonial -->
          <div
            class="flex flex-col items-center gap-4 rounded-xl bg-white p-6 text-center"
          >
            <img
              src="https://placehold.co/80x80"
              alt="Customer"
              class="h-16 w-16 rounded-full"
            />
            <blockquote class="text-lg italic">
              "Upgrading to Premium was a game-changer for our team. The
              advanced features and unlimited storage have significantly
              improved our workflow."
            </blockquote>
            <div>
              <p class="font-semibold">Sarah Johnson</p>
              <p class="text-sm text-neutral-600">
                Product Manager at TechCorp
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

<section id="iia0d1" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="flex flex-col gap-16 lg:gap-32">
    <div class="flex flex-col lg:mx-24">
      <div class="grid gap-8 lg:grid-cols-3 lg:gap-16">
        <div class="order-2 flex flex-col justify-center gap-4 lg:order-1 lg:col-span-2 lg:gap-8">
          <p id="ib9e5z" class="text-2xl font-bold lg:text-4xl">Leverage Our Expertise in IT and Software Development</p>
          <p class="text-xl lg:text-2xl">Benefit from our years of experience and proven track record in the industry. With a focus on innovation and collaboration, we create software that delivers real value to your business.</p>
          <a href="#products" class="flex h-12 w-full items-center justify-center rounded-lg border-2 border-gray-800 px-6 text-lg font-semibold text-gray-800 hover:opacity-80 lg:max-w-max">Our Works</a>
        </div>
        <div class="order-1 lg:order-2">
          <img src="https://placehold.co/400x400" class="h-full w-full object-contain" />
        </div>
      </div>
    </div>
    <div class="flex flex-col lg:mx-24">
      <div class="grid gap-8 lg:grid-cols-3 lg:gap-16">
        <div>
          <img src="https://placehold.co/400x400" class="h-full w-full object-contain" />
        </div>
        <div class="flex flex-col justify-center gap-4 lg:col-span-2 lg:gap-8">
          <p class="text-2xl font-bold lg:text-4xl">Maximize Your Business Potential with Custom Software</p>
          <p class="text-xl lg:text-2xl">Transform your ideas into reality with our custom software solutions. From startups to established companies, we help you reach new heights by optimizing processes and delivering competitive advantages.</p>
          <a id="iswbtx" href="#contact" class="flex h-12 w-full items-center justify-center rounded-lg bg-blue-600 px-6 text-lg font-semibold text-white hover:opacity-80 lg:max-w-max">Talk To An Expert</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto" id="ioede6">
  <div class="grid grid-cols-1 mb-4 lg:mb-8 mx-0 lg:mx-24">
    <div>
      <h1 class="text-3xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">Frequently Asked Questions
      </h1>
    </div>
    <div class="flex items-center">
      <p class="text-xl lg:text-2xl font-semibold w-full">We're sure you have questions, that's exactly why we've laid out all
        the answers for you here.
      </p>
    </div>
  </div>
  <div class="flex flex-col gap-4">
    <div id="i0yeej" x-data="{ isOpen: true }" class="rounded-lg shadow-xl p-8 gap-8 flex flex-col">
      <div class="flex gap-4 items-center justify-center">
        <p class="text-lg font-semibold flex-grow">Who is SenangStart for?
        </p>
        <div id="ipc6tj" x-on:click="isOpen = !isOpen" class="min-w-8 min-h-8 rounded bg-gray-100 flex items-center justify-center cursor-pointer">
          <i :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas">
          </i>
        </div>
      </div>
      <div x-show="isOpen" class="text-lg" id="ixn91f">SenangStart is perfect for Non-technical aspiring startup founders
        who are looking for a rapid development service that can help them
        build their Minimum Viable Product without having to go through the
        hassle of assembling an internal team. It’s like having a
        development team in your backpocket.
      </div>
    </div>
    <div x-data="{ isOpen: false }" class="rounded-lg shadow-xl p-8 gap-8 flex flex-col">
      <div class="flex gap-4 items-center justify-center">
        <p class="text-lg font-semibold flex-grow">What is unique about SenangStart?
        </p>
        <div id="in8z11" x-on:click="isOpen = !isOpen" class="min-w-8 min-h-8 rounded bg-gray-100 flex items-center justify-center cursor-pointer">
          <i :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas">
          </i>
        </div>
      </div>
      <div x-show="isOpen" class="text-lg" id="ifl1xy">Unlike most traditional software development agency, SenangStart
        deoesnt take charge a huge project fee and equity in exchange to
        build on your ideas. Our flexible monthly subscription package
        ensures that you keep your cost lean while having a product that you
        can go to market with or raise more funds for your startup.
      </div>
    </div>
    <div x-data="{ isOpen: false }" class="rounded-lg shadow-xl p-8 gap-8 flex flex-col">
      <div class="flex gap-4 items-center justify-center">
        <p class="text-lg font-semibold flex-grow">What sort of MVPs can be built by SenangStart?
        </p>
        <div x-on:click="isOpen = !isOpen" class="min-w-8 min-h-8 rounded bg-gray-100 flex items-center justify-center cursor-pointer">
          <i id="ieq38r" :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas">
          </i>
        </div>
      </div>
      <div x-show="isOpen" class="text-lg">You name it, we can build it. Our solution ranges from Automation
        Tools, CRMs, Saas, Mobile Applications, Landing Pages, Special
        Calculator, Onboarding System, Learning Management System and to
        name a few. We will suggest what is the best solution during the
        consultation call with our expert.
      </div>
    </div>
    <div x-data="{ isOpen: false }" class="rounded-lg shadow-xl p-8 gap-8 flex flex-col">
      <div class="flex gap-4 items-center justify-center">
        <p class="text-lg font-semibold flex-grow">What are the packages available?
        </p>
        <div id="ipn6gd" x-on:click="isOpen = !isOpen" class="min-w-8 min-h-8 rounded bg-gray-100 flex items-center justify-center cursor-pointer">
          <i :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas">
          </i>
        </div>
      </div>
      <div x-show="isOpen" class="text-lg">We have two types of packages, namely Package A and Package B.
        Package A suits for founders who already have a clue of what they
        want to build together with the design direction. This is where we
        act as a appointed developer ONLY for the product. Package B, on the
        other hands, gives you a complete product support. We help you
        figure the roadmap, features , and craft out the best user
        experience for the product.
      </div>
    </div>
  </div>
</section>

<section id="islbl" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div id="i1g8b4" class="mb-8 grid grid-cols-1 lg:mx-24 lg:mb-16">
    <div id="ifhpfw" class="col-span-1">
      <div id="io3zh" class="mb-2 max-w-max rounded-md bg-blue-600 px-2 font-bold text-white lg:mb-4">Meet QHeat</div>
    </div>
    <div id="ii2jm">
      <h1 id="iyj0h" class="mb-2 text-2xl font-bold capitalize text-blue-600 lg:mb-4 lg:text-6xl">Your New Best Friend<br /></h1>
    </div>
    <div id="ia8bfp" class="flex items-center">
      <p id="i7p89" class="w-full text-left text-base font-medium lg:text-2xl">Want to be that cool kid, who can explain Heat Transfer to the whole class? And solving complex problem on the board confidently? Get this brand new app that was designed for Heat Transfer learning and understanding.<br /></p>
    </div>
  </div>
  <div id="i4q09" class="grid gap-4 lg:grid-cols-2">
    <div id="istii" class="flex items-center"><img id="i5f9sn" src="https://placehold.co/320x480" class="mx-auto w-full max-w-md" /></div>
    <div id="iowf7j" class="flex items-center">
      <div id="ilv2h" class="grid gap-4">
        <div id="izo6k" class="flex flex-col rounded-3xl border-2 border-blue-600 p-4 lg:mr-8">
          <div id="i0lmy" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full border-2 border-blue-600 text-2xl text-blue-600">
            <i id="ikqdo5" class="far fa-file-image"></i>
          </div>
          <h4 id="iadh3" class="mb-2 text-lg font-semibold">View Workflow.<br /></h4>
          <p id="iuds9" class="text-lg">Learn to figuring it out by staring at the automatically generated workflow.<br /></p>
        </div>
        <div id="i2gaze" class="flex flex-col rounded-3xl border-2 border-blue-600 p-4 lg:ml-8">
          <div id="i83zyh" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full border-2 border-blue-600 text-2xl text-blue-600">
            <i id="i04wah" class="fas fa-random"></i>
          </div>
          <h4 id="itajj" class="mb-2 text-lg font-semibold">Shuffle Equation.<br /></h4>
          <p id="ig8dk" class="text-lg">Alter the equation to find the solution you need most.<br /></p>
        </div>
        <div id="izcj4i" class="flex flex-col rounded-3xl border-2 border-blue-600 p-4 lg:mr-8">
          <div id="ixb8lc" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full border-2 border-blue-600 text-2xl text-blue-600">
            <i id="i2sowp" class="fas fa-cube"></i>
          </div>
          <h4 id="i71hl" class="mb-2 text-lg font-semibold">Preset Parameters.<br /></h4>
          <p id="i2cwq" class="text-lg">Make life easier, just pick from numbers of preset value of conductivity.<br /></p>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="ioqulp" class="bg-blue-500 text-white">
  <div id="i3vb5c" class="container mx-auto px-6 py-24 lg:px-16">
    <div id="igco75" class="mb-8 grid grid-cols-1 lg:mx-24 lg:mb-16 lg:grid-cols-2">
      <div id="idha7q" class="lg:col-span-2">
        <div id="inim5x-2" class="mb-2 max-w-max rounded-md bg-white px-2 font-bold text-blue-500 lg:mb-4">World Class</div>
      </div>
      <div id="ig0kv8">
        <h1 id="i38ymj" class="mb-2 text-2xl font-bold capitalize lg:mb-0 lg:text-6xl">Practical Features<br /></h1>
      </div>
      <div id="ig68er" class="flex items-center">
        <p id="ingt2r" class="w-full text-left text-base text-black lg:text-right lg:text-2xl">Just more reasons for you start use it...<br /></p>
      </div>
    </div>
    <div id="irsp1j" class="grid lg:grid-cols-3">
      <div id="ifjw28" class="order-2 grid h-full gap-6 pb-6 lg:order-1 lg:grid-rows-2 lg:pb-0 lg:pt-32 lg:text-right">
        <div id="iptdcu" class="flex">
          <div id="in6p38" class="bg-prime flex aspect-square h-16 w-16 items-center justify-center rounded-full bg-white text-3xl text-blue-500 shadow lg:order-2">
            <i id="i6gw6s" class="far fa-file-image"></i>
          </div>
          <div id="ityz4p" class="px-6 lg:order-1">
            <h1 id="imlp9h" class="text-2xl font-bold"></h1>
            <h1 id="in84sc-2" draggable="false" class="gjs-selected text-2xl font-bold">View Workflow</h1>
            <p id="izinek" class="mt-2">Learn to figuring it out by staring at the automatically generated workflow<br /></p>
          </div>
        </div>
        <div id="ikr03e" class="flex">
          <div id="i3576u" class="bg-prime flex aspect-square h-16 w-16 items-center justify-center rounded-full bg-white text-3xl text-blue-500 shadow lg:order-2">
            <i class="fas fa-desktop"></i>
          </div>
          <div id="irqwpl" class="px-6 lg:order-1">
            <h1 id="i3ig09" class="text-2xl font-bold">Modern Design<br /></h1>
            <p id="i1kgg3" class="mt-2">Simple and easy to use, even my younger sibling can nailed it<br /></p>
          </div>
        </div>
      </div>
      <div class="order-1 mb-12 px-12 lg:order-2 lg:mb-0">
        <div class="relative w-full overflow-hidden"><img id="icjs4g" src="https://placehold.co/480x820" class="w-full" /></div>
      </div>
      <div id="ibhbu3" class="order-3 grid h-full gap-6 lg:order-3 lg:grid-rows-2 lg:pt-32">
        <div class="flex">
          <div id="idnyvy" class="bg-prime flex aspect-square h-16 w-16 items-center justify-center rounded-full bg-white text-3xl text-blue-500 shadow">
            <i id="i95e3q" class="fas fa-cube"></i>
          </div>
          <div id="iohomb" class="px-6">
            <h1 id="i1f4g8" class="text-2xl font-bold">Preset Parameters<br /></h1>
            <p id="iz2gzg" class="mt-2">Make life easier, just pick from numbers of preset value of conductivity<br /></p>
          </div>
        </div>
        <div id="iw51tu" class="flex">
          <div id="ie8kce" class="bg-prime flex aspect-square h-16 w-16 items-center justify-center rounded-full bg-white text-3xl text-blue-500 shadow">
            <i id="i7o55t" class="fas fa-random"></i>
          </div>
          <div id="i0mo7i" class="px-6">
            <h1 id="i9slfb" class="text-2xl font-bold">Shuffle Equation<br /></h1>
            <p id="iesxqm" class="mt-2">Alter the equation to find the solution you need most<br /></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <h1 class="w-full text-center text-4xl font-bold lg:text-7xl">Premium Service</h1>
  <div class="h-4 w-full border-b-2 border-neutral-200"></div>
  <div class="h-4 w-full"></div>
  <div class="mb-4 grid gap-4 lg:grid-cols-3">
    <div>
      <h6 class="text-2xl font-bold lg:text-4xl">Thousands of specialities</h6>
    </div>
    <div class="lg:col-span-2">
      <p class="text-xl">More and more physicians are becoming certified in multiple specialties. Some medical specialties, like dermatology, ophthalmology, and anesthesiology, are often ranked among the best medical specialties for lifestyle.</p>
    </div>
  </div>
  <div class="relative overflow-hidden rounded-lg bg-gray-200">
    <img src="https://placehold.co/800x500" class="w-full" />
  </div>
</section>

    <section
      class="container mx-auto mb-16 px-6 lg:px-16"
      x-data="{ activeFeature: 1 }"
    >
      <div class="grid gap-8 lg:grid-cols-2">
        <div class="order-2 lg:order-1">
          <div
            class="relative aspect-square overflow-hidden rounded-2xl bg-neutral-100 lg:aspect-auto"
          >
            <img
              x-show="activeFeature === 1"
              src="https://placehold.co/600x600"
              class="h-full w-full object-cover"
              x-transition:enter="transition ease-out duration-300"
              x-transition:enter-start="opacity-0 transform translate-x-4"
              x-transition:enter-end="opacity-100 transform translate-x-0"
            />
            <img
              x-show="activeFeature === 2"
              src="https://placehold.co/600x600"
              class="h-full w-full object-cover"
              x-transition:enter="transition ease-out duration-300"
              x-transition:enter-start="opacity-0 transform translate-x-4"
              x-transition:enter-end="opacity-100 transform translate-x-0"
            />
            <img
              x-show="activeFeature === 3"
              src="https://placehold.co/600x600"
              class="h-full w-full object-cover"
              x-transition:enter="transition ease-out duration-300"
              x-transition:enter-start="opacity-0 transform translate-x-4"
              x-transition:enter-end="opacity-100 transform translate-x-0"
            />
          </div>
        </div>
        <div class="order-1 flex flex-col justify-center lg:order-2">
          <div
            class="mb-2 max-w-max rounded-lg bg-blue-100 px-3 py-1 text-blue-600"
          >
            <p class="text-sm font-bold">FEATURES</p>
          </div>
          <h1 class="mb-8 text-4xl font-bold lg:text-6xl">
            Discover Our Platform
          </h1>
          <div class="space-y-6">
            <div
              x-on:click="activeFeature = 1"
              class="w-full rounded-xl p-4 text-left transition-colors cursor-pointer"
              :class="{ 'bg-blue-600 text-white': activeFeature === 1, 'bg-neutral-100': activeFeature !== 1 }"
            >
              <h3 class="text-xl font-bold">Intuitive Interface</h3>
              <p class="mt-2">
                User-friendly design that makes navigation a breeze
              </p>
            </div>
            <div
              x-on:click="activeFeature = 2"
              class="w-full rounded-xl p-4 text-left transition-colors cursor-pointer"
              :class="{ 'bg-blue-600 text-white': activeFeature === 2, 'bg-neutral-100': activeFeature !== 2 }"
            >
              <h3 class="text-xl font-bold">Real-time Collaboration</h3>
              <p class="mt-2">Work together seamlessly with your team</p>
            </div>
            <div
              x-on:click="activeFeature = 3"
              class="w-full rounded-xl p-4 text-left transition-colors cursor-pointer"
              :class="{ 'bg-blue-600 text-white': activeFeature === 3, 'bg-neutral-100': activeFeature !== 3 }"
            >
              <h3 class="text-xl font-bold">Advanced Analytics</h3>
              <p class="mt-2">Get insights that drive better decisions</p>
            </div>
          </div>
        </div>
      </div>
    </section>

<footer class="flex flex-col lg:flex-row container mx-auto pt-4 px-6 lg:px-16 mb-16">
    <div class="flex justify-center">
        <a href="#"
            class="bg-slate-200 rounded-md flex items-center justify-center w-8 h-8 text-slate-600 text-sm mr-2">
            <i class="fab fa-google"></i>
        </a>
        <a href="#"
            class="bg-slate-200 rounded-md flex items-center justify-center w-8 h-8 text-slate-600 text-sm mr-2">
            <i class="fab fa-linkedin"></i>
        </a>
        <a href="#"
            class="bg-slate-200 rounded-md flex items-center justify-center w-8 h-8 text-slate-600 text-sm mr-2">
            <i class="fab fa-twitter"></i>
        </a>
        <a href="#"
            class="bg-slate-200 rounded-md flex items-center justify-center w-8 h-8 text-slate-600 text-sm mr-2">
            <i class="fab fa-facebook"></i>
        </a>
    </div>
    <div class="flex-grow h-8 flex items-center justify-center lg:justify-end font-semibold">
        2024 © SenangStart
    </div>
    <div class="flex justify-center">
        <a href="#"
            class="flex items-center justify-center w-8 h-8 text-sm lg:ml-4 bg-blue-600 text-white rounded-md">
            <i class="fas fa-arrow-up"></i>
        </a>
    </div>
</footer>

<footer class="container mx-auto grid gap-8 px-6 lg:grid-cols-4 lg:gap-16 lg:px-16">
  <div class="flex flex-col gap-2">
    <div class="h-12 max-w-max">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1362 222" overflow="hidden" width="100%" height="100%">
        <defs>
          <clipPath id="clip0">
            <rect x="1089" y="1870" width="1103" height="184"></rect>
          </clipPath>
          <clipPath id="clip1">
            <rect x="1089" y="1870" width="1103" height="184"></rect>
          </clipPath>
          <clipPath id="clip2">
            <rect x="1089" y="1870" width="1103" height="184"></rect>
          </clipPath>
        </defs>
        <g transform="translate(-831 -1851)">
          <g>
            <g>
              <g>
                <path d="M197.224 319.004 195.434 321.663C186.923 335.104 183.178 350.775 184.162 366.336L184.211 366.912 184.787 366.963C200.349 367.945 216.021 364.199 229.46 355.689L232.121 353.901 230.803 355.762C228.703 358.584 226.374 361.285 223.817 363.842 208.229 379.43 187.284 386.526 166.535 385.215L165.959 385.164 165.909 384.588C164.598 363.84 171.694 342.896 187.283 327.308 189.84 324.751 192.541 322.421 195.363 320.321ZM336.452 214.672C326.364 204.584 310.007 204.584 299.918 214.672 289.829 224.761 289.829 241.118 299.918 251.206 310.007 261.295 326.364 261.295 336.452 251.206 346.541 241.118 346.541 224.761 336.452 214.672ZM385.164 165.959 385.262 167.426C387.406 216.985 370.69 267.361 335.171 306.886L332.519 309.682 336.452 360.809 232.939 379.076 260.788 351.225 255.258 347.735C245.237 340.962 235.717 333.141 226.85 324.275 217.982 315.407 210.163 305.887 203.388 295.866L199.899 290.334 172.049 318.185 190.316 214.672 241.442 218.604 244.238 215.954C283.762 180.434 334.139 163.719 383.699 165.861Z" fill-rule="evenodd" transform="matrix(1 0 0 1.00455 666.316 1685.75)"></path>
              </g>
            </g>
          </g>
          <g clip-path="url(#clip0)">
            <g clip-path="url(#clip1)">
              <g clip-path="url(#clip2)">
                <path d="M731.381 261.175C730.977 261.077 728.991 260.735 726.969 260.408 722.257 259.645 715.741 257.522 711.396 255.334 706.537 252.887 700.346 248.062 697.25 244.309L694.594 241.089 702.686 232.996 710.778 224.904 713.359 227.386C720.447 234.201 726.3 236.994 735.216 237.817 749.098 239.098 758.913 234.704 763.42 225.191 764.885 222.1 764.967 221.607 765.128 214.901 765.315 207.153 765.492 207.453 762.235 209.983 759.86 211.828 754.261 214.581 750.988 215.513 746.864 216.688 739.393 217.432 735.302 217.075 715.463 215.347 700.707 202.67 695.323 182.73 694.23 178.678 693.814 166.43 694.604 161.526 696.315 150.905 700.771 142.424 708.497 135.086 717.554 126.482 730.399 122.228 743.138 123.614 750.927 124.461 756.571 126.557 762.63 130.853L765.693 133.025 765.693 129.079 765.693 125.133 778.458 125.133 791.223 125.133 791.045 173.784C790.849 227.402 791.001 224.69 787.718 232.89 784.699 240.43 778.367 248.145 771.419 252.749 767.071 255.631 761.086 258.228 755.399 259.702 750.875 260.875 749.155 261.055 741.184 261.192 736.196 261.28 731.784 261.269 731.38 261.171ZM754.059 191.686C763.33 187.283 768.136 177.649 766.653 166.442 764.998 153.931 755.299 146.164 742.165 146.832 729.618 147.469 721.249 155.667 720.279 168.269 719.57 177.469 723.915 186.367 731.202 190.637 735.426 193.112 738.433 193.779 744.644 193.615 749.994 193.475 750.518 193.368 754.059 191.686ZM182.616 221.392C167.103 219.703 154.681 213.71 144.175 202.844L140.538 199.083 149.296 190.315 158.054 181.546 162.002 185.636C170.519 194.461 179.471 198.184 192.116 198.162 202.785 198.14 210.082 194.896 213.373 188.706 214.903 185.829 214.933 179.327 213.428 176.067 210.79 170.338 203.524 165.96 187.023 160.16 181.901 158.36 175.706 155.949 173.256 154.804 158.044 147.69 150.951 138.032 149.8 122.866 148.443 104.993 157.731 90.4932 174.769 83.8882 181.406 81.3149 186.964 80.3787 195.847 80.3376 200.428 80.3168 205.219 80.5751 207.366 80.9596 218.6 82.971 230.26 88.8665 237.502 96.1963L240.433 99.1627 231.629 107.977 222.825 116.791 219.875 113.944C212.448 106.777 205.829 104.011 195.847 103.903 185.629 103.793 178.57 107.322 176.749 113.453 175.797 116.661 175.798 118.413 176.757 121.641 178.59 127.816 184.09 131.337 201.729 137.632 219.81 144.085 227.011 148.117 232.649 154.947 237.276 160.55 239.63 166.136 240.716 174.086 241.89 182.672 240.662 191.312 237.255 198.415 231.818 209.757 221.255 217.09 205.798 220.252 200.843 221.266 187.487 221.922 182.611 221.392ZM295.849 221.146C274.12 218.432 256.819 202.41 253.199 181.648 251.708 173.099 252.514 163.052 255.327 155.101 260.287 141.085 273.881 128.714 288.512 124.903 299.123 122.14 311.368 122.843 321.104 126.775 334.794 132.305 345.114 145.29 347.846 160.426 348.656 164.911 348.737 174.187 348.004 178.4L347.463 181.504 312.902 181.504 278.341 181.504 278.675 182.836C279.499 186.122 281.732 189.764 284.782 192.802 290.256 198.253 296.48 200.42 305.407 199.982 313.551 199.582 319.664 197.251 324.893 192.549L327.295 190.39 334.786 197.893 342.277 205.395 339.552 208.121C329.282 218.391 312.893 223.275 295.848 221.146ZM323.752 161.038C323.071 157.991 320.088 152.532 317.918 150.361 309.717 142.16 293.236 142.632 284.552 151.316 282.083 153.785 278.447 160.005 278.447 161.76 278.447 162.259 283.066 162.386 301.25 162.386L324.053 162.386ZM508.836 221.406C499.776 219.732 495.476 218.109 489.42 214.08 479.803 207.681 472.66 196.663 470.05 184.2 469.093 179.63 468.743 169.154 469.392 164.483 472.161 144.537 485.49 129.05 503.749 124.564 509.694 123.104 519.109 123.116 524.767 124.597 529.702 125.885 534.855 128.458 538.698 131.555L541.679 133.956 541.679 129.547 541.679 125.137 554.423 125.137 567.168 125.137 567.168 172.44 567.168 219.743 554.423 219.743 541.679 219.743 541.679 215.309 541.679 210.875 538.615 213.356C534.89 216.373 528.822 219.441 524.522 220.481 521.367 221.244 511.199 221.847 508.836 221.411ZM523.541 197.654C530.456 196.552 536.707 192.097 539.825 186.05 542.327 181.197 542.904 178.593 542.897 172.19 542.888 165.548 541.824 161.733 538.653 156.985 536.236 153.365 533.575 151.142 529.15 149.047 525.826 147.473 525.594 147.436 519.129 147.436L512.512 147.436 508.715 149.249C502.665 152.138 498.297 157.252 496.24 163.857 495.171 167.286 495.056 176.752 496.038 180.278 499.528 192.799 510.504 199.733 523.541 197.654ZM849.026 221.148C836.423 219.694 825.064 213.961 815.381 204.166 812.856 201.613 810.791 199.381 810.791 199.205 810.791 199.03 812.996 196.69 815.691 194.005L820.591 189.123 821.424 190.338C823.075 192.746 828.744 198.323 831.624 200.372 835.637 203.227 838.872 204.785 843.973 206.319 849.635 208.021 861.811 208.519 867.636 207.287 875.84 205.55 882.887 200.573 885.553 194.633 888.046 189.079 887.697 180.588 884.742 174.897 881.195 168.068 874.37 163.782 856.624 157.241 840.141 151.165 833.697 147.654 828.188 141.743 822.277 135.401 819.916 128.767 819.923 118.515 819.928 109.26 821.914 103.054 826.758 97.1484 831.284 91.6314 838.932 86.9522 846.821 84.8748 851.806 83.562 863.335 83.0804 869.211 83.9396 880.006 85.518 889.417 90.2921 897.422 98.2505L901.01 101.818 896.101 106.728 891.192 111.637 887.633 108.146C881.325 101.957 874.898 98.4598 867.449 97.1627 862.519 96.3041 852.5 96.8103 848.883 98.1007 842.183 100.491 838.286 103.717 835.87 108.87 834.685 111.399 834.566 112.188 834.566 117.545 834.566 123.218 834.632 123.561 836.178 126.712 839.395 133.245 846.047 137.61 861.281 143.184 877.244 149.024 880.47 150.46 886.036 154.204 889.867 156.781 894.927 161.976 896.977 165.437 901.907 173.76 903.077 187.089 899.792 197.488 894.354 214.702 874.274 224.06 849.026 221.148ZM1025.27 221.191C1008.71 218.591 994.87 206.769 989.287 190.45 986.484 182.258 986.033 169.75 988.223 160.942 989.457 155.975 992.805 148.718 995.775 144.572 998.27 141.088 1003.6 135.845 1007.03 133.513 1010.29 131.288 1016.73 128.385 1020.84 127.282 1025.6 126.006 1038.97 125.967 1043.63 127.217 1049.44 128.774 1055.53 132.225 1059.77 136.363 1061.87 138.412 1064.05 140.749 1064.62 141.558L1065.66 143.029 1065.67 135.308 1065.68 127.588 1072.54 127.588 1079.41 127.588 1079.41 173.666 1079.41 219.743 1072.54 219.743 1065.68 219.743 1065.68 212.101 1065.68 204.459 1063.8 206.835C1058.66 213.343 1050.56 218.69 1043.13 220.487 1039.25 221.425 1029.25 221.819 1025.26 221.192ZM1043.34 207.5C1048.57 206.162 1052.61 203.885 1056.41 200.135 1063.41 193.239 1066.27 185.474 1066.26 173.42 1066.26 166.235 1065.32 161.654 1062.76 156.284 1059.88 150.254 1054.57 144.711 1049.13 142.045 1039.43 137.296 1025.67 137.946 1016.75 143.576 1010.41 147.577 1005.13 154.301 1002.71 161.459 1000.87 166.884 1000.41 176.377 1001.7 182.336 1004.34 194.549 1013.66 204.351 1025.6 207.479 1030.55 208.776 1038.31 208.785 1043.34 207.501ZM364.23 172.44 364.23 125.137 377.22 125.137 390.21 125.137 390.21 129.546 390.21 133.956 393.274 131.479C399.893 126.128 407.465 123.585 416.925 123.535 425.537 123.49 430.723 124.988 437.429 129.459 443.368 133.419 448.558 139.879 451.347 146.784 453.731 152.687 453.899 155.163 453.917 184.743 453.927 199.867 453.792 213.93 453.617 215.992L453.3 219.743 440.627 219.743 427.954 219.743 427.954 190.666C427.954 158.729 427.965 158.921 424.97 154.392 423.042 151.48 418.769 148.387 415.23 147.339 411.305 146.177 405.378 146.321 401.853 147.662 397.944 149.15 394.084 152.792 392.06 156.903L390.455 160.162 390.315 189.952 390.175 219.742 377.203 219.742 364.231 219.742ZM589.716 172.44 589.716 125.137 602.706 125.137 615.696 125.137 615.696 129.59 615.696 134.043 617.838 132.163C628.702 122.626 646.599 120.621 659.66 127.478 668.368 132.05 675.885 141.636 678.196 151.116 679.368 155.922 679.587 165.442 679.183 193.885L678.815 219.743 666.143 219.743 653.471 219.743 653.334 189.719 653.197 159.695 651.845 156.944C650.259 153.715 646.013 149.501 643.008 148.171 640.32 146.982 635.745 146.26 632.609 146.529 625.597 147.131 620.316 150.85 617.283 157.324L615.943 160.185 615.806 189.964 615.669 219.743 602.694 219.743 589.718 219.743ZM940.201 180.038 940.201 140.332 928.421 140.332 916.642 140.332 916.779 134.083 916.916 127.833 928.558 127.701 940.2 127.57 940.2 108.216 940.2 88.8628 947.062 88.8628 953.925 88.8628 953.925 108.225 953.925 127.588 965.444 127.588 976.964 127.588 976.964 133.96 976.964 140.332 965.444 140.332 953.925 140.332 953.925 180.038 953.925 219.743 947.062 219.743 940.2 219.743ZM1107.35 173.665 1107.35 127.588 1114.22 127.588 1121.08 127.588 1121.09 133.592 1121.1 139.597 1122.15 138.127C1124.34 135.057 1128.8 131.183 1132.15 129.43 1136.75 127.027 1140.78 126.133 1147.07 126.124 1152.9 126.117 1156.62 126.896 1161.02 129.049 1164.11 130.563 1170.09 135.125 1170.09 135.969 1170.09 136.24 1168.14 138.477 1165.75 140.939L1161.41 145.415 1159.22 143.622C1155.34 140.447 1151.92 139.21 1146.33 138.969 1134.5 138.459 1126.29 143.823 1122.47 154.548 1121.34 157.731 1121.33 157.762 1121.18 188.738L1121.03 219.743 1114.19 219.743 1107.34 219.743ZM1198.53 180.038 1198.53 140.332 1186.76 140.332 1175 140.332 1175 133.96 1175 127.588 1186.76 127.588 1198.53 127.588 1198.53 108.225 1198.53 88.8627 1205.39 88.8627 1212.25 88.8627 1212.25 108.225 1212.25 127.588 1223.77 127.588 1235.29 127.588 1235.29 133.96 1235.29 140.332 1223.77 140.332 1212.25 140.332 1212.25 180.038 1212.25 219.743 1205.39 219.743 1198.53 219.743Z" transform="matrix(1 0 0 1.01705 952.584 1788.29)"></path>
              </g>
            </g>
          </g>
        </g>
      </svg>
    </div>
    <p class="max-w-sm text-sm">Elevate Your Web Development Experience With SenangStart</p>
  </div>
  <div class="flex flex-col gap-2">
    <h4 class="text-lg font-semibold">Site Map</h4>
    <a href="#templates" class="text-sm">Templates</a>
    <a href="#sections" class="text-sm">Sections</a>
    <a href="#components" class="text-sm">Components</a>
    <a href="#designs" class="text-sm">Designs</a>
  </div>
  <div class="flex flex-col gap-2">
    <h4 class="text-lg font-semibold">Contact Us</h4>
    <div>
      <p class="font-semibold text-blue-600">SenangStart</p>
      <p class="text-xs">By Bookklik Technologies</p>
    </div>
    <p class="text-sm">[email protected]</p>
    <p class="text-sm">Selangor, Malaysia</p>
  </div>
  <div class="flex flex-col gap-2">
    <h4 class="text-lg font-semibold">Links</h4>
    <a href="#" class="text-sm">GitHub</a>
    <a href="https://senangstart.com/terms_conditions" class="text-sm">Terms &amp; Conditions</a>
    <a href="https://senangstart.com/privacy_policy" class="text-sm">Privacy Policy</a>
  </div>
</footer>
<footer class="container mx-auto mb-16 flex flex-col px-6 pt-4 lg:flex-row lg:px-16">
  <div class="flex justify-center">
    <a href="#" class="mr-2 flex h-8 w-8 items-center justify-center rounded-md bg-slate-200 text-sm text-slate-600">
      <i class="fab fa-google"></i>
    </a>
    <a href="#" class="mr-2 flex h-8 w-8 items-center justify-center rounded-md bg-slate-200 text-sm text-slate-600">
      <i class="fab fa-linkedin"></i>
    </a>
    <a href="#" class="mr-2 flex h-8 w-8 items-center justify-center rounded-md bg-slate-200 text-sm text-slate-600">
      <i class="fab fa-twitter"></i>
    </a>
    <a href="#" class="mr-2 flex h-8 w-8 items-center justify-center rounded-md bg-slate-200 text-sm text-slate-600">
      <i class="fab fa-facebook"></i>
    </a>
  </div>
  <div class="flex h-8 flex-grow items-center justify-center font-semibold lg:justify-end">2024 © SenangStart</div>
  <div class="flex justify-center">
    <a href="#" class="flex h-8 w-8 items-center justify-center rounded-md bg-blue-600 text-sm text-white lg:ml-4">
      <i class="fas fa-arrow-up"></i>
    </a>
  </div>
</footer>

<section id="i1y6j" class="container mx-auto mb-16">
    <div id="ix5kn"
        class="py-28 lg:py-20 px-0 lg:px-16 relative flex items-center justify-center h-screen lg:h-min lg:rounded-lg bg-neutral-200">
        <div class="max-w-screen-lg mx-auto flex flex-col items-center px-6 z-10">
            <h1 id="is6u8" class="text-4xl lg:text-7xl font-bold text-center mb-4">Transform Your
                Idea<br>Into&nbsp;<span class="text-blue-600" id="ixj3p">Great Product</span></h1>
            <p class="text-2xl lg:text-4xl mb-6 lg:mb-8 text-center font-semibold" id="id97k">Empowering Business to
                Build, Innovate, and Succeed<br></p>
            <div class="aspect-video w-full relative mb-4 lg:mb-8 max-w-2xl" id="imfy1"><img
                    src="https://placehold.co/600x400"
                    id="ifdyv" class="w-full h-full top-0 left-0 absolute lg:rounded-lg object-contain"></div>
            <div class="w-full flex gap-4 justify-center flex-col lg:flex-row" id="i6ixf"><a href="#services"
                    class="bg-blue-600 text-white text-xl rounded-lg px-8 h-14 w-full lg:max-w-max py-4 flex items-center justify-center hover:opacity-80 font-semibold"
                    id="ihdgl">Services</a><a href="#products" id="ib08uq"
                    class="bg-white text-blue-600 text-xl rounded-lg px-8 h-14 w-full lg:max-w-max py-4 flex items-center justify-center hover:opacity-80 font-semibold">Products</a>
            </div>
        </div>
    </div>
</section>

<section id="ivz29x" class="relative container mx-auto mb-16">
    <div id="i4vabr" class="w-full h-full grid grid-rows-5 absolute top-0 left-0">
        <div id="i94quk" class="row-span-4 bg-blue-600 sm:rounded-xl"></div>
    </div>
    <div id="iqzvzf" class="pt-32 lg:pt-16 px-6 lg:px-16">
        <div id="i50kvv" class="max-w-screen-lg mx-auto flex flex-col items-center text-white sticky">
            <h1 id="ikqu22" class="text-4xl lg:text-7xl font-bold text-center mb-4 lg:mb-8">
                Heat Transfer<br>New Cool Friend
            </h1>
            <p id="iqco7v" class="lg:text-4xl mb-8 lg:mb-16 text-center font-semibold text-black max-w-3xl text-2xl">
                Trust Me, I am Mechanical Engineer Student Too. To Save Time, Let's
                Assume I'm Right.<br>
            </p>
            <img id="ib5vuf"
                src="https://placehold.co/1000x700"
                class="w-full rounded-lg">
        </div>
    </div>
</section>

<section class="container mx-auto mb-16 overflow-hidden lg:rounded-lg">
  <div
    class="relative flex h-screen items-center justify-center px-6 py-60 lg:h-96 lg:px-16"
    style="
      background-image: url('https://placehold.co/1200x400');
    background-size: cover;"
  >
    <div class="absolute mx-auto flex max-w-screen-lg flex-col items-center px-6">
      <p class="mb-2 text-center text-sm font-semibold lg:text-lg">Announcement</p>
      <h1 class="mb-4 text-center text-4xl font-bold lg:text-7xl">Build Your Project, Effortlessly.</h1>
      <h3 class="mb-6 text-center text-2xl font-semibold lg:mb-8 lg:text-4xl">We provide end to end solution for business owner to start their business or creating and revamp your digital product.</h3>
      <div class="flex w-full justify-center">
        <a href="#" class="flex h-14 w-full items-center justify-center rounded-lg bg-blue-600 px-8 text-xl font-semibold text-white hover:opacity-80 lg:max-w-max">Learn More</a>
      </div>
    </div>
  </div>
</section>

<section class="relative mx-auto mb-16 lg:container">
  <div class="shadow-neumorphic grid w-full overflow-hidden rounded lg:grid-cols-2 lg:rounded-lg">
    <div class="relative flex min-h-screen items-center bg-gray-100 lg:min-h-min">
      <img src="https://placehold.co/600x500/2563EB/FFFFFF" class="absolute left-0 top-0 h-full w-full object-cover" />
      <div class="z-10 w-full px-6 pb-16 pt-40 lg:px-16 lg:py-40">
        <div class="flex flex-col items-center rounded-xl bg-white bg-opacity-50 p-6 backdrop-blur-md lg:-mr-80 lg:items-start">
          <img src="https://placehold.co/192x192" class="mb-4 w-48 rounded-full shadow-lg lg:hidden" />
          <p class="mb-2 text-left font-semibold text-gray-800 lg:text-lg">Hello &amp; Welcome!</p>
          <h1 class="mb-4 text-left text-4xl font-bold lg:text-7xl">A.Hakim Noor</h1>
          <p class="mb-6 text-left text-2xl font-semibold lg:mb-8 lg:text-4xl">A mechanical engineer by training, software engineer by trade.</p>
          <div class="flex w-full flex-col lg:flex-row">
            <a href="#works" class="flex h-14 w-full items-center justify-center rounded-lg bg-blue-600 px-8 text-lg font-semibold text-white hover:opacity-80 lg:max-w-max">My Works</a>
            <div class="h-4 w-full lg:w-4"></div>
            <a href="#experiences" class="flex h-14 w-full items-center justify-center rounded-lg border-2 border-neutral-800 px-8 text-lg font-semibold text-neutral-800 hover:opacity-80 lg:max-w-max">Experiences</a>
          </div>
        </div>
      </div>
    </div>
    <div class="relative hidden bg-gray-200 pt-80 lg:block lg:p-0"><img src="https://placehold.co/600x500" class="absolute left-0 top-0 h-full w-full object-cover" /></div>
  </div>
</section>

    <section class="container mx-auto mb-16 px-6 lg:px-16">
      <div class="grid gap-8 lg:grid-cols-12">
        <div class="flex flex-col justify-center lg:col-span-5">
          <div
            class="mb-2 max-w-max rounded-lg bg-blue-100 px-3 py-1 text-blue-600"
          >
            <p class="text-sm font-bold">INNOVATION</p>
          </div>
          <h1 class="mb-4 text-4xl font-bold lg:text-7xl">
            Build Better
            <span class="text-blue-600">Together</span>
          </h1>
          <p class="mb-8 text-xl opacity-80">
            Empower your team with cutting-edge collaboration tools and
            innovative solutions.
          </p>
          <div class="flex flex-col gap-4 xl:flex-row">
            <a
              href="#contact"
              class="flex h-14 items-center justify-center rounded-lg bg-blue-600 px-8 text-lg font-semibold text-white hover:bg-blue-700"
              >Start Project</a
            >
            <a
              href="#learn"
              class="group flex h-14 items-center justify-center px-8 text-lg font-semibold"
            >
              Learn More
              <i
                class="fas fa-arrow-right ml-2 transform transition-transform group-hover:translate-x-2"
              ></i>
            </a>
          </div>
        </div>
        <div class="lg:col-span-7">
          <div class="grid gap-4 md:grid-cols-2">
            <div
              class="group rounded-2xl bg-neutral-100 p-6 transition-transform hover:-translate-y-2 aspect-square"
            >
              <div class="mb-4 text-3xl text-blue-600">
                <i class="fas fa-rocket"></i>
              </div>
              <h3 class="mb-2 text-xl font-bold">Fast Development</h3>
              <p>Launch your projects quickly with our streamlined process</p>
            </div>
            <div
              class="group rounded-2xl bg-neutral-100 p-6 transition-transform hover:-translate-y-2 lg:mt-8 aspect-square"
            >
              <div class="mb-4 text-3xl text-blue-600">
                <i class="fas fa-shield-alt"></i>
              </div>
              <h3 class="mb-2 text-xl font-bold">Secure Platform</h3>
              <p>Enterprise-grade security for your peace of mind</p>
            </div>
            <div
              class="group rounded-2xl bg-neutral-100 p-6 transition-transform hover:-translate-y-2 lg:-mt-8 aspect-square"
            >
              <div class="mb-4 text-3xl text-blue-600">
                <i class="fas fa-users"></i>
              </div>
              <h3 class="mb-2 text-xl font-bold">Team Collaboration</h3>
              <p>Work seamlessly with your team members</p>
            </div>
            <div
              class="group rounded-2xl bg-neutral-100 p-6 transition-transform hover:-translate-y-2 aspect-square"
            >
              <div class="mb-4 text-3xl text-blue-600">
                <i class="fas fa-chart-line"></i>
              </div>
              <h3 class="mb-2 text-xl font-bold">Analytics</h3>
              <p>Data-driven insights for better decisions</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="relative mb-16 overflow-hidden bg-blue-600">
      <div class="absolute inset-0 overflow-hidden">
        <div class="absolute inset-0 bg-blue-600 opacity-90"></div>
        <img
          src="https://placehold.co/1920x1080"
          class="h-full w-full object-cover"
          alt="Background Pattern"
        />
      </div>
      <div
        class="container relative mx-auto grid gap-8 px-6 py-20 lg:grid-cols-2 lg:px-16"
      >
        <div class="flex flex-col justify-center text-white">
          <div
            class="mb-4 max-w-max rounded-lg bg-white/10 px-4 py-2 backdrop-blur-sm"
          >
            <p class="text-sm font-bold">NEW RELEASE</p>
          </div>
          <h1 class="mb-6 text-4xl font-bold lg:text-7xl">
            Next Generation Development Platform
          </h1>
          <p class="mb-8 text-xl lg:text-2xl">
            Build scalable applications with modern tools and frameworks
          </p>
          <div class="flex flex-col gap-4 lg:flex-row">
            <a
              href="#start"
              class="flex h-14 items-center justify-center rounded-lg bg-white px-8 text-lg font-semibold text-blue-600 hover:bg-opacity-90"
              >Get Started Free</a
            >
            <a
              href="#demo"
              class="flex h-14 items-center justify-center rounded-lg border-2 border-white px-8 text-lg font-semibold text-white hover:bg-white hover:text-blue-600"
              >Schedule Demo</a
            >
          </div>
          <div class="mt-8 flex items-center gap-8">
            <div class="flex -space-x-4">
              <img
                src="https://placehold.co/40x40"
                class="h-10 w-10 rounded-full border-2 border-white"
              />
              <img
                src="https://placehold.co/40x40"
                class="h-10 w-10 rounded-full border-2 border-white"
              />
              <img
                src="https://placehold.co/40x40"
                class="h-10 w-10 rounded-full border-2 border-white"
              />
            </div>
            <p class="text-sm">Join over 10,000+ developers worldwide</p>
          </div>
        </div>
        <div class="relative">
          <div
            class="relative aspect-square overflow-hidden rounded-2xl bg-white/10 backdrop-blur-sm lg:aspect-auto"
          >
            <img
              src="https://placehold.co/600x600"
              class="h-full w-full object-cover"
            />
            <div
              class="absolute bottom-0 left-0 right-0 p-6 text-white backdrop-blur-sm"
            >
              <div class="rounded-lg bg-white/10 p-4">
                <div class="mb-2 text-sm font-semibold">Featured Project</div>
                <h3 class="text-lg font-bold">
                  AI-Powered Analytics Dashboard
                </h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

<div class="w-full lg:h-28">
  <nav class="z-50 w-full p-6" x-data="{ isOpen: false }">
    <div class="container mx-auto flex w-full flex-col rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter lg:flex-row">
      <div class="flex h-12 items-center">
        <img src="https://cdn.glitch.global/16c1060a-84ef-4364-baee-52e9c6da00a5/2843136f-e299-447d-a8a4-9e3f17746926.image.png?v=1668040849154" class="h-full" />
        <div class="flex-grow lg:hidden"></div>
        <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="flex w-12 cursor-pointer items-center justify-center lg:hidden">
          <span :class="!isOpen ? '' : 'hidden'">
            <i class="fas fa-bars"></i>
          </span>
          <span :class="isOpen ? '' : 'hidden'">
            <i class="fas fa-times"></i>
          </span>
        </div>
      </div>
      <div :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:pt-0">
        <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Service</a>
        <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Works</a>
        <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Insight</a>
        <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Support</a>
        <a href="#" class="mx-4 mb-4 mt-4 flex h-12 items-center justify-center rounded-lg bg-blue-600 px-6 text-white lg:mb-0 lg:ml-4 lg:mr-0 lg:mt-0">Contact Us</a>
      </div>
    </div>
  </nav>
</div>

<div class="w-full lg:h-40">
  <nav class="z-50 w-full p-6" x-data="{ isOpen: false }">
    <div class="container mx-auto w-full rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter">
      <div class="flex flex-col lg:flex-row">
        <div class="flex h-12 items-center">
          <img src="https://cdn.glitch.global/16c1060a-84ef-4364-baee-52e9c6da00a5/2843136f-e299-447d-a8a4-9e3f17746926.image.png?v=1668040849154" class="h-full" />
          <div class="flex-grow lg:hidden"></div>
          <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="flex w-12 cursor-pointer items-center justify-center lg:hidden">
            <span :class="!isOpen ? '' : 'hidden'">
              <i class="fas fa-bars"></i>
            </span>
            <span :class="isOpen ? '' : 'hidden'">
              <i class="fas fa-times"></i>
            </span>
          </div>
        </div>
        <div :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:pt-0">
          <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Service</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Works</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Insight</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Support</a>
          <a href="#" class="mx-4 mb-4 mt-4 flex h-12 items-center justify-center rounded-lg bg-blue-600 px-6 text-white lg:mb-0 lg:ml-4 lg:mr-0 lg:mt-0">Contact Us</a>
        </div>
      </div>
      <div class="mt-2 flex h-8 w-full items-center border-t border-gray-100 px-2 pt-2 text-sm font-semibold">
        <div>
          <a href=""> <i class="fas fa-chevron-left mr-2"></i> Prev </a>
        </div>
        <div class="flex-grow text-center">
          <a href="" class="underline">Back to main</a>
        </div>
        <div>
          <a href=""> Next<i class="fas fa-chevron-right ml-2"></i> </a>
        </div>
      </div>
    </div>
  </nav>
</div>

<div class="w-full lg:h-40">
  <nav class="z-50 w-full p-6" x-data="{ isOpen: false }">
    <div class="container mx-auto w-full rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter">
      <div class="mb-2 flex h-8 w-full items-center text-sm font-semibold">
        <div class="flex flex-grow">
          <a href="" class="flex h-8 items-center px-3">
            <i class="fas fa-phone p-0 lg:pr-2"></i>
            <p class="hidden lg:block">+60123456789</p>
          </a>
          <a href="" class="flex h-8 items-center px-3">
            <i class="fas fa-map-marker-alt p-0 lg:pr-2"></i>
            <p class="hidden lg:block">Location, Country</p>
          </a>
        </div>
        <div class="flex">
          <a href="" class="flex h-8 w-8 items-center justify-center">
            <i class="fab fa-facebook"></i>
          </a>
          <a href="" class="flex h-8 w-8 items-center justify-center">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="" class="flex h-8 w-8 items-center justify-center">
            <i class="fab fa-linkedin"></i>
          </a>
        </div>
      </div>
      <div class="w-full border-t pb-2"></div>
      <div class="flex flex-col lg:flex-row">
        <div class="flex h-12 items-center">
          <img src="https://cdn.glitch.global/16c1060a-84ef-4364-baee-52e9c6da00a5/2843136f-e299-447d-a8a4-9e3f17746926.image.png?v=1668040849154" class="h-full" />
          <div class="flex-grow lg:hidden"></div>
          <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="flex w-12 items-center justify-center lg:hidden">
            <span :class="!isOpen ? '' : 'hidden'">
              <i class="fas fa-bars"></i>
            </span>
            <span :class="isOpen ? '' : 'hidden'">
              <i class="fas fa-times"></i>
            </span>
          </div>
        </div>
        <div :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:pt-0">
          <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">About</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Service</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Operating Hour</a>
          <a href="#" class="mx-4 mb-4 mt-4 flex h-12 items-center justify-center rounded-lg bg-blue-600 px-6 text-white lg:mb-0 lg:ml-4 lg:mr-0 lg:mt-0">Booking an Appoinment</a>
        </div>
      </div>
    </div>
  </nav>
</div>

    <div class="w-full lg:h-28">
      <nav
        class="w-full p-6 z-50"
        x-data="{ isOpen: false, isSearchOpen: false }"
      >
        <div
          class="container mx-auto flex flex-col rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter lg:flex-row"
        >
          <!-- Logo & Mobile Menu -->
          <div class="flex h-12 items-center">
            <img src="https://placehold.co/120x48" class="h-full" alt="Logo" />
            <div class="flex-grow lg:hidden"></div>
            <div
              x-on:click="isOpen = !isOpen"
              x-on:click.outside="isOpen = false"
              class="flex w-12 cursor-pointer items-center justify-center lg:hidden"
            >
              <span :class="!isOpen ? '' : 'hidden'">
                <i class="fas fa-bars"></i>
              </span>
              <span :class="isOpen ? '' : 'hidden'">
                <i class="fas fa-times"></i>
              </span>
            </div>
          </div>

          <!-- Navigation Links -->
          <div
            :class="isOpen ? '' : 'hidden'"
            class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:items-center lg:pt-0"
          >
            <a
              href="#"
              class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0"
              >Home</a
            >
            <a
              href="#"
              class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0"
              >Products</a
            >
            <a
              href="#"
              class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0"
              >Solutions</a
            >
            <a
              href="#"
              class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0"
              >About</a
            >

            <!-- Search Bar -->
            <div class="relative mx-4 hidden lg:block">
              <input
                type="text"
                placeholder="Search..."
                class="w-48 rounded-lg border border-neutral-200 px-4 py-2 pl-10 focus:border-blue-600 focus:outline-none"
              />
              <i
                class="fas fa-search absolute left-3 top-3 text-neutral-400"
              ></i>
            </div>

            <a
              href="#"
              class="mx-4 mb-4 mt-4 flex h-12 items-center justify-center rounded-lg bg-blue-600 px-6 text-white hover:bg-blue-700 lg:mb-0 lg:ml-4 lg:mr-0 lg:mt-0"
            >
              Get Started
            </a>
          </div>
        </div>
      </nav>
    </div>

<div class="w-full lg:h-28">
  <nav class="z-50 w-full p-6" x-data="{ isOpen: false, activeMega: null }">
    <div class="container mx-auto rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter">
      <div class="flex flex-col lg:flex-row">
        <!-- Logo & Mobile Menu -->
        <div class="flex h-12 items-center">
          <img src="https://placehold.co/120x48" class="h-full" alt="Logo" />
          <div class="flex-grow lg:hidden"></div>
          <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="flex w-12 cursor-pointer items-center justify-center lg:hidden">
            <span :class="!isOpen ? '' : 'hidden'">
              <i class="fas fa-bars"></i>
            </span>
            <span :class="isOpen ? '' : 'hidden'">
              <i class="fas fa-times"></i>
            </span>
          </div>
        </div>

        <!-- Navigation Links -->
        <div :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:items-center lg:pt-0">
          <div class="relative">
            <a href="#" x-on:click="activeMega = activeMega === 'products' ? null : 'products'" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0">
              Products
              <i class="fas fa-chevron-down ml-2 text-sm"></i>
            </a>

            <!-- Mega Menu - Products -->
            <div x-show="activeMega === 'products'" x-on:click.outside="activeMega = null" class="absolute left-0 mt-2 w-full max-w-2xl rounded-lg bg-white p-6 shadow-xl md:w-screen">
              <div class="grid gap-6 lg:grid-cols-2">
                <div>
                  <h3 class="mb-4 text-lg font-bold">Software Solutions</h3>
                  <div class="grid gap-4">
                    <a href="#" class="flex items-center gap-3 rounded-lg p-3 hover:bg-neutral-100">
                      <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
                        <i class="fas fa-desktop"></i>
                      </div>
                      <div>
                        <p class="font-semibold">Enterprise Suite</p>
                        <p class="text-sm text-neutral-600">Complete business management</p>
                      </div>
                    </a>
                    <a href="#" class="flex items-center gap-3 rounded-lg p-3 hover:bg-neutral-100">
                      <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
                        <i class="fas fa-mobile-alt"></i>
                      </div>
                      <div>
                        <p class="font-semibold">Mobile Solutions</p>
                        <p class="text-sm text-neutral-600">Apps for iOS and Android</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div>
                  <h3 class="mb-4 text-lg font-bold">Services</h3>
                  <div class="grid gap-4">
                    <a href="#" class="flex items-center gap-3 rounded-lg p-3 hover:bg-neutral-100">
                      <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
                        <i class="fas fa-code"></i>
                      </div>
                      <div>
                        <p class="font-semibold">Custom Development</p>
                        <p class="text-sm text-neutral-600">Tailored to your needs</p>
                      </div>
                    </a>
                    <a href="#" class="flex items-center gap-3 rounded-lg p-3 hover:bg-neutral-100">
                      <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
                        <i class="fas fa-cloud"></i>
                      </div>
                      <div>
                        <p class="font-semibold">Cloud Services</p>
                        <p class="text-sm text-neutral-600">Scalable infrastructure</p>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0">Solutions</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0">Resources</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0">Pricing</a>

          <div class="flex flex-col gap-2 lg:ml-4 lg:flex-row lg:items-center">
            <a href="#" class="flex h-12 items-center justify-center rounded-lg px-6 font-semibold hover:bg-neutral-100"> Sign In </a>
            <a href="#" class="flex h-12 items-center justify-center rounded-lg bg-blue-600 px-6 font-semibold text-white hover:bg-blue-700"> Start Free Trial </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>

<div class="w-full lg:h-40">
  <nav class="z-50 w-full p-6" x-data="{ isOpen: false }">
    <!-- Announcement Bar -->
    <div class="container mx-auto mb-4">
      <div class="flex items-center justify-between rounded-lg bg-blue-600 px-4 py-2 text-white">
        <p class="text-sm">
          🎉 New Feature Alert: Try our AI-powered analytics -
          <a href="#" class="underline hover:text-blue-200">Learn More</a>
        </p>
        <div class="hidden lg:flex lg:items-center lg:gap-4">
          <a href="#" class="text-sm hover:text-blue-200">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="#" class="text-sm hover:text-blue-200">
            <i class="fab fa-linkedin"></i>
          </a>
          <a href="#" class="text-sm hover:text-blue-200">
            <i class="fab fa-github"></i>
          </a>
        </div>
      </div>
    </div>

    <!-- Main Navigation -->
    <div class="container mx-auto rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter">
      <div class="flex flex-col lg:flex-row">
        <!-- Logo & Mobile Menu -->
        <div class="flex h-12 items-center">
          <img src="https://placehold.co/120x48" class="h-full" alt="Logo" />
          <div class="flex-grow lg:hidden"></div>
          <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="flex w-12 cursor-pointer items-center justify-center lg:hidden">
            <span :class="!isOpen ? '' : 'hidden'">
              <i class="fas fa-bars"></i>
            </span>
            <span :class="isOpen ? '' : 'hidden'">
              <i class="fas fa-times"></i>
            </span>
          </div>
        </div>

        <!-- Navigation Links -->
        <div :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:items-center lg:pt-0">
          <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0">Dashboard</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0">Analytics</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0">Reports</a>
          <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0">Team</a>

          <!-- User Menu -->
          <div class="relative ml-4">
            <a href="" class="flex items-center gap-2 rounded-lg px-4 py-2 hover:bg-neutral-100">
              <img src="https://placehold.co/32x32" class="h-8 w-8 rounded-full" alt="User" />
              <span class="font-semibold">John Doe</span>
              <i class="fas fa-chevron-down text-sm"></i>
            </a>
          </div>
        </div>
      </div>

      <!-- Secondary Navigation -->
      <div class="mt-2 flex h-8 w-full items-center border-t border-neutral-200 px-2 pt-2 text-sm">
        <div class="flex-grow">
          <a href="#" class="flex items-center gap-1 font-semibold text-blue-600 hover:underline">
            <i class="fas fa-home"></i>
            Project Dashboard
          </a>
        </div>
        <div class="flex items-center gap-4">
          <span class="text-neutral-500">Last updated: 2 minutes ago</span>
          <div class="h-4 w-px bg-neutral-200"></div>
          <a href="#" class="flex items-center gap-1 hover:text-blue-600">
            <i class="fas fa-question-circle"></i>
            Help
          </a>
        </div>
      </div>
    </div>
  </nav>
</div>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="mb-4 grid grid-cols-1 lg:mb-8 lg:grid-cols-2">
    <div class="col-span-1 lg:col-span-2">
      <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Offer</div>
    </div>
    <div>
      <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-0 lg:text-6xl">What we offer</h1>
    </div>
    <div class="flex items-center">
      <p class="w-full text-left text-base font-semibold lg:text-right lg:text-2xl">Our latest updates and what is happening in the organisation</p>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" class="absolute top-0 w-full" />
      <div class="absolute bottom-0 left-0 w-full p-4">
        <p class="text-base font-semibold lg:text-2xl">Card description. Flexible components.</p>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" class="absolute top-0 w-full" />
      <div class="absolute bottom-0 left-0 w-full p-4">
        <p class="text-base font-semibold lg:text-2xl">Card description. Flexible components.</p>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" class="absolute top-0 w-full" />
      <div class="absolute bottom-0 left-0 w-full p-4">
        <p class="text-base font-semibold lg:text-2xl">Card description. Flexible components.</p>
      </div>
    </div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <h3 class="text-2xl font-bold capitalize lg:text-4xl">Expand Your Skill Set</h3>
  <div class="mt-4 grid gap-4 lg:mt-8 lg:grid-cols-3">
    <div class="flex flex-col rounded-lg bg-gray-200 p-4" style="background: url('https://placehold.co/400x600'); background-size: cover;">
      <div class="text-center">
        <h4 class="mb-1 text-xl font-semibold">Mastering Digital Advertising</h4>
        <p class="text-sm">3-Day Intensive Bootcamp</p>
      </div>
      <div class="h-80 flex-grow"></div>
      <div>
        <div class="mb-4 grid gap-2 xl:grid-cols-2">
          <a href="#" type="button" class="flex min-h-12 items-center justify-center rounded-lg bg-white px-6 py-2 text-lg font-semibold text-blue-600 hover:opacity-80">View Syllabus</a>
          <a href="#" type="button" class="flex min-h-12 items-center justify-center rounded-lg bg-blue-600 px-6 py-2 text-lg font-semibold text-white hover:opacity-80">Enroll Now</a>
        </div>
        <p class="border-t-2 border-white border-opacity-50 pt-4 text-center text-xs">Hands-On Learning</p>
      </div>
    </div>
    <div class="flex flex-col rounded-lg bg-gray-200 p-4" style="background: url('https://placehold.co/400x600'); background-size: cover;">
      <div class="text-center">
        <h4 class="mb-1 text-xl font-semibold">Data Analytics Essentials</h4>
        <p class="text-sm">5-Day Comprehensive Course</p>
      </div>
      <div class="h-80 flex-grow"></div>
      <div>
        <div class="mb-4 grid gap-2 xl:grid-cols-2">
          <a href="#" type="button" class="flex min-h-12 items-center justify-center rounded-lg bg-white px-6 py-2 text-lg font-semibold text-blue-600 hover:opacity-80">View Syllabus</a>
          <a href="#" type="button" class="flex min-h-12 items-center justify-center rounded-lg bg-blue-600 px-6 py-2 text-lg font-semibold text-white hover:opacity-80">Enroll Now</a>
        </div>
        <p class="border-t-2 border-white border-opacity-50 pt-4 text-center text-xs">Real-World Applications</p>
      </div>
    </div>
    <div class="flex flex-col rounded-lg bg-gray-200 p-4" style="background: url('https://placehold.co/400x600'); background-size: cover;">
      <div class="text-center">
        <h4 class="mb-1 text-xl font-semibold">Social Media Strategy</h4>
        <p class="text-sm">4-Day Interactive Workshop</p>
      </div>
      <div class="h-80 flex-grow"></div>
      <div>
        <div class="mb-4 grid gap-2 xl:grid-cols-2">
          <a href="#" type="button" class="flex min-h-12 items-center justify-center rounded-lg bg-white px-6 py-2 text-lg font-semibold text-blue-600 hover:opacity-80">View Syllabus</a>
          <a href="#" type="button" class="flex min-h-12 items-center justify-center rounded-lg bg-blue-600 px-6 py-2 text-lg font-semibold text-white hover:opacity-80">Enroll Now</a>
        </div>
        <p class="border-t-2 border-white border-opacity-50 pt-4 text-center text-xs">Expert-Led Training</p>
      </div>
    </div>
  </div>
</section>

<section id="if6xg" class="container mx-auto my-4 px-6 lg:my-8 lg:px-16">
  <div class="mb-4 flex items-center lg:mb-8" id="ihxr9">
    <div class="flex-grow border-2 border-t border-blue-200"></div>
    <div class="px-4 text-2xl font-bold lg:text-4xl">
      <p id="ibn3j">Partners &amp; Clients</p>
    </div>
    <div class="flex-grow border-2 border-t border-blue-200"></div>
  </div>
  <div id="i5xkv" class="grid grid-cols-2 gap-8 lg:grid-cols-6 lg:gap-4">
    <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div>
    <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div>
    <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div>
    <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div>
    <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div>
    <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <h1 class="mb-8 text-center text-3xl font-bold lg:mx-24 lg:mb-16 lg:text-6xl">📖 Learning STEM Topics</h1>
  <div class="flex flex-col gap-8 lg:gap-16">
    <div class="flex flex-col lg:mx-24">
      <div class="group grid gap-8 lg:grid-cols-2 lg:gap-16">
        <div class="order-2 flex flex-col justify-center gap-4 lg:order-1 lg:gap-8">
          <div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Science</div>
          <p class="text-2xl font-bold lg:text-4xl">Eclipse</p>
          <p class="text-xl lg:text-2xl">An eclipse takes place when one heavenly body such as a moon or planet moves into the shadow of another heavenly body.<br /></p>
        </div>
        <div class="order-1 flex flex-col items-center lg:order-2">
          <img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" />
          <img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" />
        </div>
      </div>
    </div>
    <div class="flex flex-col lg:mx-24">
      <div class="group grid gap-8 lg:grid-cols-2 lg:gap-16">
        <div class="flex flex-col items-center">
          <img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" />
          <img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" />
        </div>
        <div class="flex flex-col justify-center gap-4 lg:gap-8">
          <div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Technology</div>
          <p class="text-2xl font-bold lg:text-4xl">Augmented Reality<br /></p>
          <p class="text-xl lg:text-2xl">Thanks to augmented reality technology, digital objects can exist outside of the digital world and come into our world.<br /></p>
        </div>
      </div>
    </div>
    <div class="flex flex-col lg:mx-24">
      <div class="group grid gap-8 lg:grid-cols-2 lg:gap-16">
        <div class="order-2 flex flex-col justify-center gap-4 lg:order-1 lg:gap-8">
          <div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Engineering</div>
          <p class="text-2xl font-bold lg:text-4xl">Combustion Engines<br /></p>
          <p class="text-xl lg:text-2xl">Internal combustion engines (ICE) are the most common form of heat engines, as they are used in vehicles, boats, ships, airplanes, and trains.<br /></p>
        </div>
        <div class="order-1 flex flex-col items-center lg:order-2">
          <img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" />
          <img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" />
        </div>
      </div>
    </div>
    <div class="flex flex-col lg:mx-24">
      <div class="group grid gap-8 lg:grid-cols-2 lg:gap-16">
        <div class="flex flex-col items-center">
          <img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" />
          <img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" />
        </div>
        <div class="flex flex-col justify-center gap-4 lg:gap-8">
          <div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Mathematics</div>
          <p class="text-2xl font-bold lg:text-4xl">Dimensions<br /></p>
          <p class="text-xl lg:text-2xl">Dimensions are used to describe the size and shape of an object. For example: length, width, height, etc.<br /></p>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="ilc2u9" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div id="isptkh" class="mb-8 grid grid-cols-1 lg:mx-24 lg:mb-16">
    <div id="ig5foi" class="col-span-1">
      <div id="id5gvp" class="mb-2 max-w-max rounded-md bg-blue-600 px-2 font-bold text-white lg:mb-4">Sneak Peak</div>
    </div>
    <div id="igs3aa">
      <h1 id="ipdwmm" class="mb-2 text-2xl font-bold capitalize text-blue-600 lg:mb-4 lg:text-6xl">Screenshots<br /></h1>
    </div>
    <div id="iuc5n3" class="flex items-center">
      <p id="ircdcj" class="w-full text-left text-base font-medium lg:text-2xl">Wondering how it looks? Exactly like this<br /></p>
    </div>
  </div>
  <div id="iohgva" class="grid grid-cols-2 gap-4 lg:grid-cols-4">
    <div id="iuexhs"><img src="https://placehold.co/320x640" class="mx-auto" /></div>
    <div id="iuexhs"><img src="https://placehold.co/320x640" class="mx-auto" /></div>
    <div id="iuexhs"><img src="https://placehold.co/320x640" class="mx-auto" /></div>
    <div id="iuexhs"><img src="https://placehold.co/320x640" class="mx-auto" /></div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16" x-data="{ annual: false }">
  <div class="text-center">
    <div class="mx-auto mb-2 w-min rounded-lg bg-blue-600 px-2 py-1">
      <p class="text-sm font-bold uppercase text-white">Pricing</p>
    </div>
    <h2 class="mb-4 text-3xl font-bold capitalize lg:text-6xl">Choose Your Perfect Plan</h2>
    <p class="mx-auto mb-8 max-w-2xl text-lg lg:text-xl">Select the plan that best suits your needs. All plans include our core features with different usage limits.</p>

    <div class="mb-8 flex items-center justify-center gap-4">
      <span :class="{ 'text-blue-600 font-bold': !annual }">Monthly</span>
      <a href="" x-on:click="annual = !annual" class="relative h-8 w-16 rounded-full bg-blue-600 transition-colors" :class="{ 'bg-blue-400': !annual }">
        <span class="absolute left-1 top-1 h-6 w-6 rounded-full bg-white transition-transform" :class="{ 'translate-x-8': annual }"> </span>
      </a>
      <span :class="{ 'text-blue-600 font-bold': annual }">Annual</span>
      <span class="rounded-full bg-green-100 px-3 py-1 text-sm text-green-600">Save 20%</span>
    </div>

    <div class="grid gap-8 lg:grid-cols-3">
      <!-- Starter Plan -->
      <div class="flex flex-col rounded-lg border-2 border-neutral-200 p-8">
        <h3 class="mb-2 text-2xl font-bold">Starter</h3>
        <p class="mb-6">Perfect for small businesses</p>
        <div class="mb-6">
          <span class="text-4xl font-bold" x-text="annual ? '$190' : '$19'"></span>
          <span class="text-neutral-500">/month</span>
        </div>
        <ul class="mb-8 space-y-4">
          <li class="flex items-center">
            <i class="fas fa-check-circle mr-2 text-green-500"></i>
            <span>Up to 5 users</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check-circle mr-2 text-green-500"></i>
            <span>Basic analytics</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check-circle mr-2 text-green-500"></i>
            <span>24/7 support</span>
          </li>
        </ul>
        <a href="#" class="mt-auto flex h-12 items-center justify-center rounded-lg border-2 border-blue-600 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white">Get Started</a>
      </div>

      <!-- Pro Plan -->
      <div class="flex flex-col rounded-lg border-2 border-blue-600 bg-blue-50 p-8">
        <div class="-mt-12 mb-4 rounded-full bg-blue-600 px-4 py-1 text-center text-sm font-bold text-white">MOST POPULAR</div>
        <h3 class="mb-2 text-2xl font-bold">Pro</h3>
        <p class="mb-6">Best for growing teams</p>
        <div class="mb-6">
          <span class="text-4xl font-bold" x-text="annual ? '$490' : '$49'"></span>
          <span class="text-neutral-500">/month</span>
        </div>
        <ul class="mb-8 space-y-4">
          <li class="flex items-center">
            <i class="fas fa-check-circle mr-2 text-green-500"></i>
            <span>Up to 20 users</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check-circle mr-2 text-green-500"></i>
            <span>Advanced analytics</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check-circle mr-2 text-green-500"></i>
            <span>Priority support</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check-circle mr-2 text-green-500"></i>
            <span>Custom integrations</span>
          </li>
        </ul>
        <a href="#" class="mt-auto flex h-12 items-center justify-center rounded-lg bg-blue-600 font-semibold text-white hover:bg-blue-700">Get Started</a>
      </div>

      <!-- Enterprise Plan -->
      <div class="flex flex-col rounded-lg border-2 border-neutral-200 p-8">
        <h3 class="mb-2 text-2xl font-bold">Enterprise</h3>
        <p class="mb-6">For large organizations</p>
        <div class="mb-6">
          <span class="text-4xl font-bold" x-text="annual ? '$990' : '$99'"></span>
          <span class="text-neutral-500">/month</span>
        </div>
        <ul class="mb-8 space-y-4">
          <li class="flex items-center">
            <i class="fas fa-check-circle mr-2 text-green-500"></i>
            <span>Unlimited users</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check-circle mr-2 text-green-500"></i>
            <span>Custom analytics</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check-circle mr-2 text-green-500"></i>
            <span>Dedicated support</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check-circle mr-2 text-green-500"></i>
            <span>Advanced security</span>
          </li>
        </ul>
        <a href="#" class="mt-auto flex h-12 items-center justify-center rounded-lg border-2 border-blue-600 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white">Contact Sales</a>
      </div>
    </div>
  </div>
</section>

    <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
      <div class="mb-12 text-center">
        <h2 class="mb-4 text-3xl font-bold lg:text-6xl">Compare Plans</h2>
        <p class="mx-auto max-w-2xl text-lg">
          Find the perfect plan for your team. All plans include unlimited
          projects and secure cloud storage.
        </p>
      </div>

      <div class="overflow-x-auto rounded-lg border">
        <table class="w-full min-w-max">
          <thead>
            <tr class="bg-neutral-100">
              <th class="p-4 text-left">Features</th>
              <th class="p-4 text-center">Free</th>
              <th class="p-4 text-center">Pro</th>
              <th class="p-4 text-center">Enterprise</th>
            </tr>
          </thead>
          <tbody>
            <tr class="border-t">
              <td class="p-4 font-semibold">Price</td>
              <td class="p-4 text-center">$0</td>
              <td class="p-4 text-center">$49/month</td>
              <td class="p-4 text-center">Custom</td>
            </tr>
            <tr class="border-t bg-neutral-50">
              <td class="p-4">Team members</td>
              <td class="p-4 text-center">Up to 3</td>
              <td class="p-4 text-center">Up to 20</td>
              <td class="p-4 text-center">Unlimited</td>
            </tr>
            <tr class="border-t">
              <td class="p-4">Storage</td>
              <td class="p-4 text-center">10 GB</td>
              <td class="p-4 text-center">100 GB</td>
              <td class="p-4 text-center">Unlimited</td>
            </tr>
            <tr class="border-t bg-neutral-50">
              <td class="p-4">API Access</td>
              <td class="p-4 text-center">
                <i class="fas fa-times text-red-500"></i>
              </td>
              <td class="p-4 text-center">
                <i class="fas fa-check text-green-500"></i>
              </td>
              <td class="p-4 text-center">
                <i class="fas fa-check text-green-500"></i>
              </td>
            </tr>
            <tr class="border-t">
              <td class="p-4">Custom Domain</td>
              <td class="p-4 text-center">
                <i class="fas fa-times text-red-500"></i>
              </td>
              <td class="p-4 text-center">
                <i class="fas fa-check text-green-500"></i>
              </td>
              <td class="p-4 text-center">
                <i class="fas fa-check text-green-500"></i>
              </td>
            </tr>
            <tr class="border-t bg-neutral-50">
              <td class="p-4">Analytics</td>
              <td class="p-4 text-center">Basic</td>
              <td class="p-4 text-center">Advanced</td>
              <td class="p-4 text-center">Custom</td>
            </tr>
            <tr class="border-t">
              <td class="p-4">Support</td>
              <td class="p-4 text-center">Community</td>
              <td class="p-4 text-center">Priority</td>
              <td class="p-4 text-center">Dedicated</td>
            </tr>
            <tr class="border-t bg-neutral-50">
              <td class="p-4"></td>
              <td class="p-4 text-center">
                <a
                  href="#"
                  class="inline-block rounded-lg border-2 border-blue-600 px-6 py-2 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white"
                  >Start Free</a
                >
              </td>
              <td class="p-4 text-center">
                <a
                  href="#"
                  class="inline-block rounded-lg bg-blue-600 px-6 py-2 font-semibold text-white hover:bg-blue-700"
                  >Upgrade</a
                >
              </td>
              <td class="p-4 text-center">
                <a
                  href="#"
                  class="inline-block rounded-lg border-2 border-blue-600 px-6 py-2 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white"
                  >Contact Us</a
                >
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="mb-4 grid grid-cols-1 lg:mb-8 lg:grid-cols-2">
    <div class="col-span-1 lg:col-span-2">
      <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Problem</div>
    </div>
    <div>
      <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-0 lg:text-6xl">Internal Struggle</h1>
    </div>
    <div class="flex items-center">
      <p class="w-full text-left text-base font-semibold lg:text-right lg:text-2xl">Our latest updates and what is happening in the organisation</p>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/600x600" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4 lg:p-8">
        <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Headline Description</h1>
        <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/600x600" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4 lg:p-8">
        <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Headline Description</h1>
        <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="mb-4 grid grid-cols-1 lg:mb-8 lg:grid-cols-2">
    <div class="col-span-1 lg:col-span-2">
      <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Problem</div>
    </div>
    <div>
      <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-0 lg:text-6xl">External Struggle</h1>
    </div>
    <div class="flex items-center">
      <p class="w-full text-left text-base font-semibold lg:text-right lg:text-2xl">Our latest updates and what is happening in the organisation</p>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4">
        <div class="mb-2 max-w-max rounded-md border-2 border-black px-2 font-bold lg:mb-4">Tag</div>
        <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4">
        <div class="mb-2 max-w-max rounded-md border-2 border-black px-2 font-bold lg:mb-4">Tag</div>
        <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4">
        <div class="mb-2 max-w-max rounded-md border-2 border-black px-2 font-bold lg:mb-4">Tag</div>
        <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div class="relative col-span-1 overflow-hidden rounded-lg bg-gray-200 lg:col-span-3" style="padding-top: 60%">
      <img src="https://placehold.co/800x500" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4 lg:p-8">
        <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Headline Description</h1>
        <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
      <div class="mb-8 text-center">
        <div class="mx-auto mb-2 max-w-max rounded-lg bg-blue-600 px-2 py-1">
          <p class="text-sm font-bold uppercase text-white">Pain Points</p>
        </div>
        <h2 class="mb-4 text-3xl font-bold lg:text-6xl">
          Common Challenges in Business Today
        </h2>
        <p class="text-lg lg:text-xl">
          Businesses face numerous obstacles in the digital age. Here are the
          key challenges we help solve.
        </p>
      </div>
      <div class="grid gap-6 lg:grid-cols-3">
        <div class="rounded-lg bg-neutral-100 p-6">
          <div
            class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-600 text-2xl text-white"
          >
            <i class="fas fa-clock"></i>
          </div>
          <h3 class="mb-2 text-xl font-bold">Time Management</h3>
          <p class="text-lg">
            Struggling to balance multiple tasks and deadlines, leading to
            decreased productivity and missed opportunities.
          </p>
        </div>
        <div class="rounded-lg bg-neutral-100 p-6">
          <div
            class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-600 text-2xl text-white"
          >
            <i class="fas fa-chart-line"></i>
          </div>
          <h3 class="mb-2 text-xl font-bold">Resource Allocation</h3>
          <p class="text-lg">
            Inefficient distribution of resources resulting in waste and
            increased operational costs.
          </p>
        </div>
        <div class="rounded-lg bg-neutral-100 p-6">
          <div
            class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-600 text-2xl text-white"
          >
            <i class="fas fa-users"></i>
          </div>
          <h3 class="mb-2 text-xl font-bold">Team Coordination</h3>
          <p class="text-lg">
            Lack of effective communication and collaboration tools leading to
            misaligned objectives and duplicated efforts.
          </p>
        </div>
      </div>
    </section>

    <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
      <div class="mb-8 text-center">
        <div class="mx-auto mb-2 w-min rounded-lg bg-blue-600 px-2 py-1">
          <p class="text-sm font-bold uppercase text-white">Transform</p>
        </div>
        <h2 class="mb-4 text-3xl font-bold lg:text-6xl">
          The Path to Improvement
        </h2>
        <p class="text-lg lg:text-xl">
          See how our solutions transform common business challenges
        </p>
      </div>
      <div class="grid gap-8 lg:grid-cols-2">
        <div class="rounded-lg bg-neutral-100 p-8">
          <h3 class="mb-4 text-2xl font-bold text-red-500">Before</h3>
          <ul class="space-y-4">
            <li class="flex items-center">
              <i class="fas fa-times-circle mr-3 text-red-500"></i>
              <span>Manual data entry and paperwork</span>
            </li>
            <li class="flex items-center">
              <i class="fas fa-times-circle mr-3 text-red-500"></i>
              <span>Scattered communication channels</span>
            </li>
            <li class="flex items-center">
              <i class="fas fa-times-circle mr-3 text-red-500"></i>
              <span>Delayed decision making</span>
            </li>
          </ul>
        </div>
        <div class="rounded-lg bg-neutral-100 p-8">
          <h3 class="mb-4 text-2xl font-bold text-green-500">After</h3>
          <ul class="space-y-4">
            <li class="flex items-center">
              <i class="fas fa-check-circle mr-3 text-green-500"></i>
              <span>Automated workflows and processes</span>
            </li>
            <li class="flex items-center">
              <i class="fas fa-check-circle mr-3 text-green-500"></i>
              <span>Centralized communication hub</span>
            </li>
            <li class="flex items-center">
              <i class="fas fa-check-circle mr-3 text-green-500"></i>
              <span>Real-time data and insights</span>
            </li>
          </ul>
        </div>
      </div>
    </section>

    <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
      <div class="mb-8">
        <div
          class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600"
        >
          Challenges
        </div>
        <h2 class="mb-4 text-3xl font-bold lg:text-5xl">
          Understanding Your Pain Points
        </h2>
        <p class="text-lg lg:text-xl">
          Click on each challenge to learn more about how we address it
        </p>
      </div>
      <div class="grid gap-4" x-data="{ activeTab: 'tab1' }">
        <div class="grid gap-4 lg:grid-cols-3">
          <div
            x-on:click="activeTab = 'tab1'"
            :class="{ 'bg-blue-600 text-white': activeTab === 'tab1', 'bg-neutral-100': activeTab !== 'tab1' }"
            class="rounded-lg p-4 text-left transition-colors cursor-pointer"
          >
            <h3 class="text-xl font-bold">Operational Inefficiency</h3>
          </div>
          <div
            x-on:click="activeTab = 'tab2'"
            :class="{ 'bg-blue-600 text-white': activeTab === 'tab2', 'bg-neutral-100': activeTab !== 'tab2' }"
            class="rounded-lg p-4 text-left transition-colors cursor-pointer"
          >
            <h3 class="text-xl font-bold">Data Management</h3>
          </div>
          <div
            x-on:click="activeTab = 'tab3'"
            :class="{ 'bg-blue-600 text-white': activeTab === 'tab3', 'bg-neutral-100': activeTab !== 'tab3' }"
            class="rounded-lg p-4 text-left transition-colors cursor-pointer"
          >
            <h3 class="text-xl font-bold">Customer Experience</h3>
          </div>
        </div>
        <div class="rounded-lg bg-neutral-100 p-6">
          <div x-show="activeTab === 'tab1'" class="space-y-4">
            <h4 class="text-xl font-bold">
              Manual Processes Slowing You Down?
            </h4>
            <p class="text-lg">
              Many businesses waste valuable time on repetitive tasks that could
              be automated, leading to reduced productivity and increased costs.
            </p>
          </div>
          <div x-show="activeTab === 'tab2'" class="space-y-4">
            <h4 class="text-xl font-bold">Struggling with Data Overload?</h4>
            <p class="text-lg">
              Organizations often struggle to manage and analyze their data
              effectively, missing out on valuable insights and opportunities.
            </p>
          </div>
          <div x-show="activeTab === 'tab3'" class="space-y-4">
            <h4 class="text-xl font-bold">Customer Satisfaction Issues?</h4>
            <p class="text-lg">
              Poor customer experience management can lead to decreased
              satisfaction rates and lost business opportunities.
            </p>
          </div>
        </div>
      </div>
    </section>

    <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
      <div class="grid gap-8 lg:grid-cols-2">
        <div class="flex flex-col justify-center">
          <div
            class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600"
          >
            Problems
          </div>
          <h2 class="mb-4 text-3xl font-bold lg:text-5xl">
            Real Challenges, Real Solutions
          </h2>
          <p class="text-lg lg:text-xl">
            Every business faces unique challenges. We help identify and solve
            them.
          </p>
        </div>
        <div class="grid gap-4">
          <div class="group relative overflow-hidden rounded-lg">
            <img
              src="https://placehold.co/600x200"
              alt="Challenge 1"
              class="w-full transition-transform duration-300 group-hover:scale-105"
            />
            <div
              class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent p-6 text-white"
            >
              <h3 class="mt-auto text-xl font-bold">Market Competition</h3>
              <p class="text-lg">
                Standing out in a crowded market requires innovative solutions
                and strategic thinking.
              </p>
            </div>
          </div>
          <div class="group relative overflow-hidden rounded-lg">
            <img
              src="https://placehold.co/600x200"
              alt="Challenge 2"
              class="w-full transition-transform duration-300 group-hover:scale-105"
            />
            <div
              class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent p-6 text-white"
            >
              <h3 class="mt-auto text-xl font-bold">Digital Transformation</h3>
              <p class="text-lg">
                Adapting to rapid technological changes while maintaining
                operational efficiency.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

<section class="container relative mx-auto mb-16">
  <div class="absolute left-0 top-0 -z-10 h-full w-full">
    <div
      class="h-96 w-full bg-neutral-200 lg:rounded-lg"
      style="
        background-image: url('https://placehold.co/1000x200');
        background-size: cover;
        background-position: center;
      "
    ></div>
  </div>
  <div class="px-6 pt-32 lg:px-16 lg:pt-16">
    <div class="mx-auto grid w-full gap-4 lg:grid-cols-3">
      <div class="lg:col-span-2">
        <section>
          <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 bg-blue-600 px-2 font-bold text-white lg:mb-4">Enrollment Now Open</div>
          <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Master the Art of High-Performing Ads</h1>
          <p class="mb-8 text-lg"><i class="fas fa-calendar mr-2"></i>3 Days (Wednesday & Thursday)<i class="fas fa-clock mx-2"></i>10:00 AM - 5:00 PM</p>
          <div class="relative aspect-video overflow-hidden rounded-lg bg-neutral-100">
            <iframe src="https://www.youtube.com/embed/__NeP0RqACU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="absolute left-0 top-0 h-full w-full"></iframe>
          </div>
        </section>

        <div class="block lg:hidden">
          <div class="h-8 w-full"></div>
          <div class="sticky top-28 rounded-lg bg-neutral-100 p-4">
            <p class="mb-1 font-semibold lg:text-xl">Flexible Pricing Plans</p>
            <p class="mb-1 text-sm font-semibold">Choose the plan that works for you</p>
            <p class="mb-1 font-semibold lg:text-lg">What’s Included:</p>
            <ul>
              <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>32 mins of on-demand video content</li>
              <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Lifetime access to course materials</li>
              <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Practical assignments to reinforce learning</li>
              <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Certificate of completion</li>
              <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Access on mobile, tablet, and TV</li>
            </ul>
            <div class="flex border-t border-neutral-200 py-4">
              <span class="flex-grow">Total Investment</span>
              <span class="font-bold">RM 1,000</span>
            </div>
            <a href="" class="flex h-14 w-full items-center justify-center rounded-lg bg-blue-600 px-6 text-base text-white"> Get a Custom Quote </a>
          </div>
        </div>

        <div class="h-8 w-full"></div>

        <!--Start Description Section-->
        <section>
          <h1 class="mb-4 text-2xl font-bold">About the Course</h1>
          <p class="text-lg">In today’s competitive digital landscape, creating ads that truly resonate with your audience is more important than ever. This course is designed to equip you with the skills and strategies needed to craft compelling, high-converting ads. From understanding your target audience to optimizing ad performance, you’ll gain actionable insights that drive real results.</p>
        </section>
        <!--End Description Section-->

        <div class="h-8 w-full border-b border-neutral-200"></div>
        <div class="h-8 w-full"></div>

        <!--Start Learn Section-->
        <section>
          <h1 class="text-2xl font-bold">What You’ll Learn</h1>
          <div class="mt-4 rounded-lg bg-neutral-100 p-4" id="accordion1">
            <div class="accordion-title flex">
              <div class="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-blue-600 text-white" onclick="open_accordion('accordion1')">
                <div class="accordion-open hidden"><i class="fas fa-chevron-down"></i></div>
                <div class="accordion-close"><i class="fas fa-chevron-right"></i></div>
              </div>
              <div class="flex flex-grow items-center px-4 font-semibold">
                <p>Day 1 - Foundations of Effective Ads</p>
              </div>
              <div class="flex items-center">
                <p>Half Day</p>
              </div>
            </div>
            <div class="accordion-body hidden pt-4">
              <p class="text-lg">Discover the core principles of creating ads that capture attention and drive action.</p>
              <ul>
                <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Master the art of ad targeting</li>
                <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Learn how to craft compelling ad copy</li>
                <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Understand the psychology behind ad performance</li>
              </ul>
            </div>
          </div>
          <div class="mt-4 rounded-lg bg-neutral-100 p-4" id="accordion2">
            <div class="accordion-title flex">
              <div class="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-blue-600 text-white" onclick="open_accordion('accordion2')">
                <div class="accordion-open hidden"><i class="fas fa-chevron-down"></i></div>
                <div class="accordion-close"><i class="fas fa-chevron-right"></i></div>
              </div>
              <div class="flex flex-grow items-center px-4 font-semibold">
                <p>Day 2 - Advanced Ad Strategies</p>
              </div>
              <div class="flex items-center">
                <p>Half Day</p>
              </div>
            </div>
            <div class="accordion-body hidden pt-4">
              <p class="text-lg">Take your skills to the next level with advanced techniques for ad optimization.</p>
              <ul>
                <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Explore retargeting and remarketing tactics</li>
                <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Learn how to analyze and optimize ad performance</li>
                <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Discover the secrets of A/B testing</li>
              </ul>
            </div>
          </div>
          <div class="mt-4 rounded-lg bg-neutral-100 p-4" id="accordion3">
            <div class="accordion-title flex">
              <div class="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-blue-600 text-white" onclick="open_accordion('accordion3')">
                <div class="accordion-open hidden"><i class="fas fa-chevron-down"></i></div>
                <div class="accordion-close"><i class="fas fa-chevron-right"></i></div>
              </div>
              <div class="flex flex-grow items-center px-4 font-semibold">
                <p>Day 3 - Real-World Applications</p>
              </div>
              <div class="flex items-center">
                <p>Half Day</p>
              </div>
            </div>
            <div class="accordion-body hidden pt-4">
              <p class="text-lg">Apply what you’ve learned to real-world scenarios and case studies.</p>
              <ul>
                <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Create a full ad campaign from scratch</li>
                <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Get feedback and refine your approach</li>
                <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Walk away with a portfolio-ready project</li>
              </ul>
            </div>
          </div>
        </section>
        <script>
          function open_accordion(id) {
              $("#" + id + " .accordion-body").slideToggle("hidden");
              $("#" + id + " .accordion-open").toggleClass("hidden");
              $("#" + id + " .accordion-close").toggleClass("hidden");
          }
        </script>
        <!--End Learn Section-->

        <div class="h-8 w-full border-b border-neutral-200"></div>
        <div class="h-8 w-full"></div>

        <!--Start Included Section-->
        <section>
          <h1 class="text-2xl font-bold">What’s Included</h1>
          <ol class="mt-4 grid gap-4 text-lg lg:grid-cols-2">
            <li><i class="fas fa-check-circle mr-2"></i>32 mins of on-demand video content</li>
            <li><i class="fas fa-check-circle mr-2"></i>Lifetime access to all course materials</li>
            <li><i class="fas fa-check-circle mr-2"></i>Hands-on assignments to practice your skills</li>
            <li><i class="fas fa-check-circle mr-2"></i>Certificate of completion to showcase your expertise</li>
            <li><i class="fas fa-check-circle mr-2"></i>Access on any device—mobile, tablet, or TV</li>
          </ol>
        </section>
        <!--End Included Section-->

        <div class="h-8 w-full border-b border-neutral-200"></div>
        <div class="h-8 w-full"></div>

        <!--Start Bonus Section-->
        <section>
          <h1 class="text-2xl font-bold">Exclusive Bonuses</h1>
          <div class="mt-8 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
            <div class="relative rounded-lg bg-neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;">
              <div class="absolute top-0 w-full px-3 py-2">
                <p>Bonus: Ad Templates</p>
              </div>
            </div>
            <div class="relative rounded-lg bg-neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;">
              <div class="absolute top-0 w-full px-3 py-2">
                <p>Bonus: Case Studies</p>
              </div>
            </div>
            <div class="relative rounded-lg bg-neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;">
              <div class="absolute top-0 w-full px-3 py-2">
                <p>Bonus: Checklist</p>
              </div>
            </div>
            <div class="relative rounded-lg bg-neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;">
              <div class="absolute top-0 w-full px-3 py-2">
                <p>Bonus: Resource Guide</p>
              </div>
            </div>
          </div>
        </section>
        <!--End Bonus Section-->

        <div class="h-8 w-full border-b border-neutral-200"></div>
        <div class="h-8 w-full"></div>

        <!--Start Trainer Section-->
        <section>
          <h1 class="text-2xl font-bold">Meet Your Instructors</h1>
          <div class="mt-4 grid grid-cols-1 gap-4">
            <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
              <div class="rounded-lg bg-neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"></div>
              <div class="md:hidden"></div>
              <div class="col-span-2 lg:col-span-3">
                <p class="text-lg font-semibold">Xien Puo</p>
                <p class="my-1 text-xs">Co-Founder of DriveFunnels</p>
                <p>With years of experience in digital marketing, Xien has helped countless businesses scale their ad campaigns and achieve measurable success. His practical, results-driven approach makes him a sought-after expert in the field.</p>
              </div>
            </div>
          </div>
        </section>
        <!--End Trainer Section-->
      </div>
      <div class="hidden lg:block">
        <div class="sticky top-28 rounded-lg bg-neutral-100 p-4">
          <p class="mb-1 font-semibold lg:text-xl">Flexible Pricing Plans</p>
          <p class="mb-1 text-sm font-semibold">Choose the plan that works for you</p>
          <p class="mb-1 font-semibold lg:text-lg">What’s Included:</p>
          <ul>
            <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>32 mins of on-demand video content</li>
            <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Lifetime access to all course materials</li>
            <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Hands-on assignments to practice your skills</li>
            <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Certificate of completion to showcase your expertise</li>
            <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Access on any device—mobile, tablet, or TV</li>
          </ul>
          <div class="flex border-t border-neutral-200 py-4">
            <span class="flex-grow">Total Investment</span>
            <span class="font-bold">RM 1,000</span>
          </div>
          <a href="" class="flex h-14 w-full items-center justify-center rounded-lg bg-blue-600 px-6 text-base text-white"> Get a Custom Quote </a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="container relative mx-auto mb-16">
  <div class="px-6 pt-36 lg:px-16 lg:pt-16">
    <div class="mx-auto grid w-full gap-4 lg:grid-cols-3">
      <div class="lg:col-span-3">
        <div class="mb-2 text-sm">Webinar</div>
        <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Master the Pillars of Product Design</h1>
        <p class="text lg:mb-4"><i class="fas fa-calendar mr-2"></i>3 Days (Wednesday & Thursday)<i class="fas fa-clock mx-2"></i>10:00 AM - 5:00 PM</p>
      </div>
      <div class="lg:col-span-2">
        <!--Start Hero Section-->
        <section>
          <iframe src="https://www.youtube.com/embed/__NeP0RqACU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="aspect-video w-full rounded-lg"></iframe>
        </section>
        <!--End Hero Section-->

        <div class="h-4 w-full"></div>

        <div class="mb-4 rounded-lg border border-neutral-200 p-4 lg:hidden">
          <div class="flex">
            <div class="h-12 w-12 rounded-md bg-neutral-200"></div>
            <div class="h-full w-3"></div>
            <div>
              <h1 class="text-2xl font-bold leading-7">Starting at RM 437</h1>
              <p class="text-sm leading-5"><i class="fas fa-users mr-2 text-neutral-400"></i>394/400 spots filled</p>
            </div>
          </div>
          <div class="h-4 w-full"></div>
          <div class="h-4 w-full border-t border-neutral-200"></div>
          <div class="flex">
            <div>
              <i class="fas fa-laptop"></i>
            </div>
            <div class="w-3"></div>
            <div class="flex flex-grow flex-col">
              <p class="font-semibold">Join via video call</p>
              <p class="text-sm">A link will be emailed to you upon registration.</p>
            </div>
          </div>
          <div class="h-4 w-full"></div>
          <div class="h-4 w-full border-t border-neutral-200"></div>
          <div>
            <h1 class="mb-2 text-xl font-semibold">Guest</h1>
            <div class="flex h-12 items-center rounded-lg border border-neutral-200 p-2">
              <p class="flex-grow">Adult</p>
              <div class="flex">
                <div class="flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100">
                  <i class="fas fa-minus"></i>
                </div>
                <div class="flex h-8 w-12 items-center justify-center">
                  <p>1</p>
                </div>
                <div class="flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100">
                  <i class="fas fa-plus"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="h-4 w-full"></div>
          <div class="h-4 w-full border-t border-neutral-200"></div>
          <div>
            <div class="flex w-full">
              <p class="flex-grow">RM 874.00 x 1 adult</p>
              <p>RM 874</p>
            </div>
            <div class="h-2 w-full"></div>
            <div class="flex w-full">
              <p class="flex-grow">20% early bird discount</p>
              <p class="text-green-400">- RM 200</p>
            </div>
          </div>
          <div class="h-4 w-full"></div>
          <div class="h-4 w-full border-t border-neutral-200"></div>
          <div class="flex w-full text-xl">
            <p class="flex-grow">Total</p>
            <p class="font-semibold">RM 674</p>
          </div>
          <div class="h-4 w-full"></div>
          <a href="" class="flex h-14 w-full items-center justify-center rounded-lg bg-neutral-800 px-6 text-lg font-semibold text-white hover:opacity-80"> Reserve Your Spot </a>
          <div class="h-2 w-full"></div>
          <a href="" class="flex h-14 w-full items-center justify-center rounded-lg px-6 text-lg font-semibold hover:bg-neutral-100"> Need Assistance? <i class="fas fa-headset ml-4"></i> </a>
        </div>

        <!--Start Description Section-->
        <section>
          <h1 class="mb-4 text-2xl font-bold">About the Course</h1>
          <p class="text-lg">
            Discover the essential skills every digital product designer needs to succeed. Guided by Kyle Turman, Sr. Director of Product Design at Slack, this webinar dives deep into the core pillars of digital product design. Learn how to design and deliver impactful digital products at scale, drawing from real-world insights and best practices.
            <br /><br />
            <strong>In Partnership with Slack Design</strong>
            <br /><br />
            Slack Design is a team of passionate, innovative designers dedicated to making work simpler, more enjoyable, and productive. Through collaboration and knowledge-sharing, they aim to empower the broader design community.
          </p>
        </section>
        <!--End Description Section-->

        <div class="h-8 w-full border-b border-neutral-200"></div>
        <div class="h-8 w-full"></div>

        <!--Start Speaker Section-->
        <section>
          <h1 class="text-2xl font-bold leading-7">Meet Your Instructor</h1>
          <div class="mt-4 grid grid-cols-1 gap-4">
            <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
              <div
                class="rounded-lg bg-neutral-100"
                style="
                  padding-top: 120%;
                  background: url('https://placehold.co/200x260');
                  background-size: cover;
                "
              ></div>
              <div class="md:hidden"></div>
              <div class="col-span-2 lg:col-span-3">
                <p class="text-lg font-semibold">Kyle Turman</p>
                <p class="my-1 text-xs">Sr. Director of Product Design at Slack</p>
                <p>With years of experience in designing scalable digital products, Kyle Turman brings a wealth of knowledge to this webinar. Learn how to navigate the challenges of app design, create user-centric solutions, and stand out in a competitive market.</p>
              </div>
            </div>
          </div>
        </section>
        <!--End Speaker Section-->

        <div class="h-8 w-full border-b border-neutral-200"></div>
        <div class="h-8 w-full"></div>

        <!--Start Organizer Section-->
        <section>
          <h1 class="text-2xl font-bold leading-7">Organized By</h1>
          <div class="mt-4 grid grid-cols-1 gap-4">
            <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
              <div
                class="rounded-lg bg-neutral-100"
                style="
                  padding-top: 120%;
                  background: url('https://placehold.co/200x260');
                  background-size: cover;
                "
              ></div>
              <div class="md:hidden"></div>
              <div class="col-span-2 lg:col-span-3">
                <p class="text-lg font-semibold">FixColab Group Sdn Bhd</p>
                <p class="my-1 text-xs">Innovators in Design Education</p>
                <p>FixColab is committed to empowering designers with the skills and knowledge needed to thrive in the digital age. Through workshops, webinars, and collaborative projects, they aim to foster creativity and innovation in the design community.</p>
              </div>
            </div>
          </div>
        </section>
        <!--End Organizer Section-->

        <section class="hidden lg:block">
          <div class="h-8 w-full"></div>
          <div class="flex h-14 items-center border-b border-t border-neutral-100">
            <div class="h-8 w-8 overflow-hidden rounded-full bg-neutral-100">
              <img src="https://placehold.co/32x32" />
            </div>
            <div class="flex flex-grow flex-col px-2">
              <h1 class="text-sm font-bold">Hosted by FixColab Group Sdn Bhd</h1>
              <p class="text-xs">Published December 2, 2021</p>
            </div>
            <div>
              <a href="" class="flex h-8 items-center rounded-lg bg-neutral-100 px-3 text-sm"
                ><i class="fas fa-share-alt mr-2"></i>
                <p>Share</p>
              </a>
            </div>
          </div>
        </section>
      </div>
      <div class="hidden lg:block">
        <div class="sticky top-36 rounded-lg border border-neutral-200 p-4">
          <div class="flex">
            <div class="flex h-12 w-12 items-center justify-center rounded-md bg-neutral-200 text-xl text-blue-600">
              <i class="fas fa-graduation-cap"></i>
            </div>
            <div class="h-full w-3"></div>
            <div>
              <h1 class="text-2xl font-bold leading-7">Starting at RM 437</h1>
              <p class="text-sm leading-5"><i class="fas fa-users mr-2 text-neutral-400"></i>394/400 spots filled</p>
            </div>
          </div>
          <div class="h-4 w-full"></div>
          <div class="h-4 w-full border-t border-neutral-200"></div>
          <div class="flex">
            <div>
              <i class="fas fa-laptop"></i>
            </div>
            <div class="w-3"></div>
            <div class="flex flex-grow flex-col">
              <p class="font-semibold">Join via video call</p>
              <p class="text-sm">A link will be emailed to you upon registration.</p>
            </div>
          </div>
          <div class="h-4 w-full"></div>
          <div class="h-4 w-full border-t border-neutral-200"></div>
          <div>
            <h1 class="mb-2 text-xl font-semibold">Guest</h1>
            <div class="flex h-12 items-center rounded-lg border border-neutral-200 p-2">
              <p class="flex-grow">Adult</p>
              <div class="flex">
                <div class="flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100">
                  <i class="fas fa-minus"></i>
                </div>
                <div class="flex h-8 w-12 items-center justify-center">
                  <p>1</p>
                </div>
                <div class="flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100">
                  <i class="fas fa-plus"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="h-4 w-full"></div>
          <div class="h-4 w-full border-t border-neutral-200"></div>
          <div>
            <div class="flex w-full">
              <p class="flex-grow">RM 874.00 x 1 adult</p>
              <p>RM 874</p>
            </div>
            <div class="h-2 w-full"></div>
            <div class="flex w-full">
              <p class="flex-grow">20% early bird discount</p>
              <p class="text-red-500">- RM 200</p>
            </div>
          </div>
          <div class="h-4 w-full"></div>
          <div class="h-4 w-full border-t border-neutral-200"></div>
          <div class="flex w-full text-xl">
            <p class="flex-grow">Total</p>
            <p class="font-semibold">RM 674</p>
          </div>
          <div class="h-4 w-full"></div>
          <a href="" class="flex h-14 w-full items-center justify-center rounded-lg bg-blue-600 px-6 text-lg font-semibold text-white hover:opacity-80"> Reserve Your Spot </a>
          <div class="h-2 w-full"></div>
          <a href="" class="flex h-14 w-full items-center justify-center rounded-lg px-6 text-lg font-semibold hover:bg-neutral-100"> Need Assistance? <i class="fas fa-headset ml-4"></i> </a>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="i45ch1" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="mb-4 grid grid-cols-1 lg:mx-24 lg:mb-8">
    <div class="col-span-1"></div>
    <div>
      <h1 id="iwb62y" class="mb-2 text-3xl font-bold capitalize lg:mb-4 lg:text-6xl">Our Previous Work - Proof of Our Expertise</h1>
    </div>
    <div class="flex items-center">
      <p id="it0vps" class="w-full text-left text-xl opacity-70 lg:text-2xl">Explore our diverse range of software development projects that showcase our team's capabilities. From simple web applications to complex enterprise solutions, we've got you covered.</p>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-y-4 lg:grid-cols-2 lg:gap-4">
    <div id="ifim5u" class="group flex flex-col justify-between overflow-hidden rounded-lg border border-gray-300">
      <div class="flex h-full flex-col justify-between p-4 text-center lg:p-8">
        <div id="ijjb2h">
          <div class="mb-2 text-lg font-bold lg:mb-4 lg:text-3xl">Kad Kahwin Digital</div>
          <div id="ion706" class="mb-4 text-base lg:mb-8 lg:text-lg">Revolusi Kad Kahwin - E-card wedding invitation revolution with Chat AI feature</div>
        </div>
        <div id="ib9ess" class="flex justify-center">
          <a id="is8dpb" href="https://hub.kadkahwindigital.my/" class="flex items-center gap-2 pr-1 font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80 lg:text-lg">Learn More<i class="fas fa-arrow-right"></i></a>
        </div>
      </div>
      <div><img id="iqz78g" src="https://placehold.co/600x600/2563EB/FFFFFF" class="w-full grayscale transition group-hover:translate-y-4 group-hover:grayscale-0" /></div>
    </div>
    <div id="ivbreb" class="group flex flex-col justify-between overflow-hidden rounded-lg border border-gray-300">
      <div id="iouupi" class="flex h-full flex-col justify-between p-4 text-center lg:p-8">
        <div id="ih3d3p">
          <div class="mb-2 text-lg font-bold lg:mb-4 lg:text-3xl">SenangWebs</div>
          <div id="inyi5b" class="mb-4 text-base lg:mb-8 lg:text-lg">Effortless Web Design, Your Way! Drag and drop static page website builder</div>
        </div>
        <div class="flex justify-center">
          <a id="iz0gwi" href="https://use.senangwebs.com" class="flex items-center gap-2 pr-1 font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80 lg:text-lg">Learn More<i class="fas fa-arrow-right"></i></a>
        </div>
      </div>
      <div><img id="ie1xqz" src="https://placehold.co/600x600/2563EB/FFFFFF" class="w-full grayscale transition group-hover:translate-y-4 group-hover:grayscale-0" /></div>
    </div>
    <div id="ixi16u" class="group flex flex-col justify-between overflow-hidden rounded-lg border border-gray-300">
      <div id="iefxe5" class="flex h-full flex-col justify-between p-4 text-center lg:p-8">
        <div>
          <div id="i765y2" class="mb-2 text-lg font-bold lg:mb-4 lg:text-3xl">QHeat</div>
          <div id="il5zfi" class="mb-4 text-base lg:mb-8 lg:text-lg">Advanced heat transfer calculator with preset parameter &amp; built in workflow generator</div>
        </div>
        <div class="flex justify-center">
          <a id="ijau8a" href="https://qheatapp.com/" class="flex items-center gap-2 pr-1 font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80 lg:text-lg">Learn More<i class="fas fa-arrow-right"></i></a>
        </div>
      </div>
      <div><img id="ilx3al" src="https://placehold.co/600x600/2563EB/FFFFFF" class="w-full grayscale transition group-hover:translate-y-4 group-hover:grayscale-0" /></div>
    </div>
    <div id="icj8d9" class="group flex flex-col justify-between overflow-hidden rounded-lg border border-gray-300">
      <div id="iiu3jj" class="flex h-full flex-col justify-between p-4 text-center lg:p-8">
        <div>
          <div id="i6638l" class="mb-2 text-lg font-bold lg:mb-4 lg:text-3xl">STEM-AR</div>
          <div id="i83aw5" class="mb-4 text-base lg:mb-8 lg:text-lg">Dive into the fascinating world of STEM (Science, Technology, Engineering &amp; Mathematic) through the lens of Augmented Reality<br /></div>
        </div>
        <div class="flex justify-center">
          <a id="imvnkg" href="https://stem-ar.use.senangwebs.com/" class="flex items-center gap-2 pr-1 font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80 lg:text-lg">Learn More<i class="fas fa-arrow-right"></i></a>
        </div>
      </div>
      <div><img id="i8rdy4" src="https://placehold.co/600x600/2563EB/FFFFFF" class="w-full grayscale transition group-hover:translate-y-4 group-hover:grayscale-0" /></div>
    </div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="text-center">
    <div class="headline mx-auto mb-8 max-w-full lg:max-w-3xl">
      <div class="mx-auto mb-2 w-max rounded-lg bg-blue-600 px-2 py-1 lg:mb-4">
        <p class="text-sm font-bold uppercase text-white">Templates</p>
      </div>
      <div class="mb-4 text-3xl font-bold capitalize lg:text-6xl">Explore Versatility with Ready-to-Use Templates</div>
      <div class="text-base lg:text-lg">Our collection showcases a variety of designs, each ingeniously crafted to highlight the versatility of our Tailwind CSS component library. From minimalist portfolios to dynamic e-commerce interfaces, SenangStart has the perfect template for your project.</div>
    </div>

    <div class="mb-8 grid grid-cols-1 gap-y-4 lg:mb-16 lg:grid-cols-3 lg:gap-4">
      <div class="group flex flex-col justify-between overflow-hidden rounded-lg border border-slate-300 lg:rounded-2xl">
        <img class="w-full" src="https://placehold.co/400x400/2563EB/FFFFFF" alt="Agency Business" />
        <div class="flex h-full flex-col justify-between p-4 text-center lg:p-8">
          <div>
            <div class="lg:text-32 mb-2 text-lg font-bold lg:mb-4">Agency Business</div>
            <div class="mb-4 text-base lg:mb-8 lg:text-lg">Agency Business</div>
          </div>
          <div class="flex justify-center">
            <a href="https://senangstart.com/template/agency-business" target="_blank" class="flex items-center gap-2 pr-1 text-lg font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80">Preview<i class="fas fa-arrow-right"></i></a>
          </div>
        </div>
      </div>
      <div class="group flex flex-col justify-between overflow-hidden rounded-lg border border-slate-300 lg:rounded-2xl">
        <img class="w-full" src="https://placehold.co/400x400/2563EB/FFFFFF" alt="Personal Website" />
        <div class="flex h-full flex-col justify-between p-4 text-center lg:p-8">
          <div>
            <div class="lg:text-32 mb-2 text-lg font-bold lg:mb-4">Personal Website</div>
            <div class="mb-4 text-base lg:mb-8 lg:text-lg">For personal branding, portfolio, and resume</div>
          </div>
          <div class="flex justify-center">
            <a href="https://senangstart.com/template/personal-website" target="_blank" class="flex items-center gap-2 pr-1 text-lg font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80">Preview<i class="fas fa-arrow-right"></i></a>
          </div>
        </div>
      </div>
      <div class="group flex flex-col justify-between overflow-hidden rounded-lg border border-slate-300 lg:rounded-2xl">
        <img class="w-full" src="https://placehold.co/400x400/2563EB/FFFFFF" alt="Education App" />
        <div class="flex h-full flex-col justify-between p-4 text-center lg:p-8">
          <div>
            <div class="lg:text-32 mb-2 text-lg font-bold lg:mb-4">Education App</div>
            <div class="mb-4 text-base lg:mb-8 lg:text-lg">Education App</div>
          </div>
          <div class="flex justify-center">
            <a href="https://senangstart.com/template/education-app" target="_blank" class="flex items-center gap-2 pr-1 text-lg font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80">Preview<i class="fas fa-arrow-right"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-center">
      <a href="https://senangstart.com/templates" class="flex items-center gap-2 pr-1 text-xl font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80">See More Templates<i class="fas fa-arrow-right"></i></a>
    </div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="mb-4 grid grid-cols-1 lg:mx-24 lg:mb-8">
    <div class="col-span-1">
      <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Brand</div>
    </div>
    <div>
      <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Product that we proud of</h1>
    </div>
    <div class="flex items-center">
      <p class="w-full text-left text-base font-semibold lg:text-2xl">Here’s what we have to complete our ecosystem</p>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/600x600" class="absolute top-0 w-full" />
      <div class="absolute bottom-0 left-0 w-full p-4 lg:p-8">
        <h1 class="mb-2 text-2xl font-bold lg:text-5xl">SenangStart</h1>
        <p class="mb-2 lg:text-lg">A website rebranding + Corporate photography to bring you the best</p>
        <p class="mb-4 text-sm lg:text-base">Product Price</p>
        <a href="" class="flex h-8 max-w-max items-center justify-center rounded-lg bg-blue-600 px-4 text-sm text-white lg:h-12 lg:px-6 lg:text-base"> Learn more </a>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/600x600" class="absolute top-0 w-full" />
      <div class="absolute bottom-0 left-0 w-full p-4 lg:p-8">
        <h1 class="mb-2 text-2xl font-bold lg:text-5xl">Product Name</h1>
        <p class="mb-2 lg:text-lg">Content can be used to explain the glimpse idea or to catch in seconds viewer eye</p>
        <p class="mb-4 text-sm lg:text-base">Product Price</p>
        <a href="" class="flex h-8 max-w-max items-center justify-center rounded-lg bg-blue-600 px-4 text-sm text-white lg:h-12 lg:px-6 lg:text-base"> Learn more </a>
      </div>
    </div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16" x-data="{ activeCategory: 'all' }">
  <div class="mb-8 grid grid-cols-1 lg:grid-cols-2">
    <div>
      <div class="mb-2 max-w-max rounded-lg bg-blue-100 px-3 py-1 text-blue-600">
        <p class="text-sm font-bold">PORTFOLIO</p>
      </div>
      <h2 class="mb-4 text-3xl font-bold lg:text-5xl">Featured Work</h2>
    </div>
    <div class="flex items-center">
      <p class="text-lg lg:text-xl">Browse through our collection of successful projects and creative solutions.</p>
    </div>
  </div>

  <!-- Category Filters -->
  <div class="mb-8 flex flex-wrap gap-4">
    <a x-on:click="activeCategory = 'all'" class="rounded-lg px-4 py-2 text-sm font-semibold transition-colors" :class="activeCategory === 'all' ? 'bg-blue-600 text-white' : 'bg-neutral-100 hover:bg-neutral-200'">All Projects</a>
    <a x-on:click="activeCategory = 'web'" class="rounded-lg px-4 py-2 text-sm font-semibold transition-colors" :class="activeCategory === 'web' ? 'bg-blue-600 text-white' : 'bg-neutral-100 hover:bg-neutral-200'">Web Development</a>
    <a x-on:click="activeCategory = 'mobile'" class="rounded-lg px-4 py-2 text-sm font-semibold transition-colors" :class="activeCategory === 'mobile' ? 'bg-blue-600 text-white' : 'bg-neutral-100 hover:bg-neutral-200'">Mobile Apps</a>
    <a x-on:click="activeCategory = 'design'" class="rounded-lg px-4 py-2 text-sm font-semibold transition-colors" :class="activeCategory === 'design' ? 'bg-blue-600 text-white' : 'bg-neutral-100 hover:bg-neutral-200'">UI/UX Design</a>
  </div>

  <!-- Gallery Grid -->
  <div class="grid gap-8">
    <!-- Project Card 1 -->
    <div x-show="activeCategory === 'all' || activeCategory === 'web'" class="group grid overflow-hidden rounded-2xl bg-neutral-100 lg:grid-cols-2">
      <div class="order-2 flex flex-col justify-center p-8 lg:order-1">
        <div class="mb-2 text-sm font-semibold text-blue-600">Web Development</div>
        <h3 class="mb-4 text-2xl font-bold">E-commerce Platform</h3>
        <p class="mb-6 text-lg">A complete online shopping solution with advanced features and seamless user experience.</p>
        <div class="flex flex-wrap gap-2">
          <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600">React</span>
          <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600">Node.js</span>
          <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600">MongoDB</span>
        </div>
      </div>
      <div class="order-1 overflow-hidden lg:order-2">
        <img src="https://placehold.co/800x600" alt="E-commerce Platform" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110" />
      </div>
    </div>

    <!-- Project Card 2 -->
    <div x-show="activeCategory === 'all' || activeCategory === 'mobile'" class="group grid overflow-hidden rounded-2xl bg-neutral-100 lg:grid-cols-2">
      <div class="overflow-hidden">
        <img src="https://placehold.co/800x600" alt="Mobile App" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110" />
      </div>
      <div class="flex flex-col justify-center p-8">
        <div class="mb-2 text-sm font-semibold text-blue-600">Mobile Development</div>
        <h3 class="mb-4 text-2xl font-bold">Fitness Tracking App</h3>
        <p class="mb-6 text-lg">A comprehensive fitness tracking application with real-time monitoring and personalized insights.</p>
        <div class="flex flex-wrap gap-2">
          <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600">React Native</span>
          <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600">Firebase</span>
          <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600">GraphQL</span>
        </div>
      </div>
    </div>

    <!-- Project Card 3 -->
    <div x-show="activeCategory === 'all' || activeCategory === 'design'" class="group grid overflow-hidden rounded-2xl bg-neutral-100 lg:grid-cols-2">
      <div class="order-2 flex flex-col justify-center p-8 lg:order-1">
        <div class="mb-2 text-sm font-semibold text-blue-600">UI/UX Design</div>
        <h3 class="mb-4 text-2xl font-bold">Financial Dashboard</h3>
        <p class="mb-6 text-lg">An intuitive dashboard design for monitoring and analyzing financial data with advanced visualization.</p>
        <div class="flex flex-wrap gap-2">
          <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600">Figma</span>
          <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600">Adobe XD</span>
          <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600">Prototyping</span>
        </div>
      </div>
      <div class="order-1 overflow-hidden lg:order-2">
        <img src="https://placehold.co/800x600" alt="Dashboard Design" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110" />
      </div>
    </div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="grid gap-4 lg:grid-cols-3">
    <div class="order-2 lg:order-1">
      <h5 class="mb-4 text-3xl font-bold lg:text-5xl">Care of High Quality</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet pellentesque aliquam enim.</p>
    </div>
    <div class="order-1 lg:order-2">
      <div
        class="rounded-lg bg-gray-100"
        style="
          padding-top: calc(150% + 1rem);
          background-image: url('https://placehold.co/400x600/2563EB/FFFFFF');
          background-size: cover;
          background-position: center;
        "
      ></div>
    </div>
    <div class="order-3">
      <div class="grid grid-cols-1 gap-4">
        <div
          class="rounded-lg bg-gray-100"
          style="
            padding-top: 90%;
            background-image: url('https://placehold.co/400x300/2563EB/FFFFFF');
            background-size: cover;
            background-position: center;
          "
        ></div>
        <div
          class="rounded-lg bg-gray-100"
          style="
            padding-top: 60%;
            background-image: url('https://placehold.co/400x200/2563EB/FFFFFF');
            background-size: cover;
            background-position: center;
          "
        ></div>
      </div>
    </div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="mb-4 grid grid-cols-1 lg:mx-24 lg:mb-8">
    <div class="col-span-1"></div>
    <div>
      <h1 class="mb-2 text-3xl font-bold capitalize lg:mb-4 lg:text-6xl">Software Solutions Tailored for Your Business</h1>
    </div>
    <div class="flex items-center">
      <p class="w-full text-left text-xl opacity-80 lg:text-2xl">At Bookklik, we believe that every business deserves a software solution that fits their unique needs. Our team of expert developers creates custom solutions to help you streamline processes, boost productivity, and drive growth.</p>
    </div>
  </div>
  <div class="grid gap-4 lg:grid-cols-3">
    <div class="flex flex-col rounded-lg border border-neutral-200 p-4">
      <div class="mb-8 flex h-16 w-16 items-center justify-center rounded-md bg-blue-600 text-4xl text-white">
        <i class="fas fa-vr-cardboard"></i>
      </div>
      <h4 class="mb-2 text-lg font-semibold">Virtual Reality (VR)<br /></h4>
      <p class="text-lg">We provide immersive 3D visualization to wow your audience and make a lasting mark for your brands.<br /></p>
    </div>
    <div class="flex flex-col rounded-lg border border-neutral-200 p-4">
      <div class="mb-8 flex h-16 w-16 items-center justify-center rounded-md bg-blue-600 text-4xl text-white">
        <i class="fas fa-cube"></i>
      </div>
      <h4 class="mb-2 text-lg font-semibold">Augmented Reality (AR)<br /></h4>
      <p class="text-lg">We offer unique Augmented Reality solution for myriad applications, including tourism, education, exhibition, and many more.<br /></p>
    </div>
    <div class="flex flex-col rounded-lg border border-neutral-200 p-4">
      <div class="mb-8 flex h-16 w-16 items-center justify-center rounded-md bg-blue-600 text-4xl text-white">
        <i class="fas fa-globe"></i>
      </div>
      <h4 class="mb-2 text-lg font-semibold">Website &amp; Web System<br /></h4>
      <p class="text-lg">Our team use pixels and codes to create beautiful things. We design and develop award-winning portals &amp; websites using the latest technologies.<br /></p>
    </div>
    <div class="flex flex-col rounded-lg border border-neutral-200 p-4">
      <div class="mb-8 flex h-16 w-16 items-center justify-center rounded-md bg-blue-600 text-4xl text-white">
        <i class="fas fa-mobile"></i>
      </div>
      <h4 class="mb-2 text-lg font-semibold">Mobile App Development<br /></h4>
      <p class="text-lg">Our app developers build native and hybrid mobile applications on IOS, Android, and Windows, for a variety of mobile devices and tablets.<br /></p>
    </div>
    <div class="flex flex-col rounded-lg border border-neutral-200 p-4">
      <div class="mb-8 flex h-16 w-16 items-center justify-center rounded-md bg-blue-600 text-4xl text-white">
        <i class="fas fa-palette"></i>
      </div>
      <h4 class="mb-2 text-lg font-semibold">Graphic Design<br /></h4>
      <p class="text-lg">We help you find the right pixels combination for your brands or products.<br /></p>
    </div>
    <div class="flex flex-col rounded-lg border border-neutral-200 p-4">
      <div class="mb-8 flex h-16 w-16 items-center justify-center rounded-md bg-blue-600 text-4xl text-white">
        <i class="fas fa-chalkboard-teacher"></i>
      </div>
      <h4 class="mb-2 text-lg font-semibold">Training<br /></h4>
      <p class="text-lg">We provide training in web and mobile application development for beginners who are eager to learn.<br /></p>
    </div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="h-4 w-full"></div>
  <div class="mb-8 grid gap-4 lg:grid-cols-2">
    <div>
      <h5 class="text-3xl font-bold lg:text-5xl">Comprehensive Care at Clinika</h5>
    </div>
    <div class="flex items-center">
      <p class="text-base lg:text-lg">Our expert team is dedicated to providing personalized, compassionate care in a modern and welcoming environment.</p>
    </div>
  </div>
  <div class="grid gap-4 lg:grid-cols-3">
    <div class="flex flex-col rounded-lg border border-neutral-200 p-4">
      <div class="mb-8 flex h-12 w-12 items-center justify-center rounded bg-neutral-200 text-blue-600 text-xl">
        <i class="fas fa-building"></i>
      </div>
      <h4 class="mb-2 text-lg font-semibold">State-of-the-Art Facilities</h4>
      <p class="text-lg">Our clinic is equipped with cutting-edge technology to ensure accurate diagnoses and effective treatments for all our patients.</p>
    </div>
    <div class="flex flex-col rounded-lg border border-neutral-200 p-4">
      <div class="mb-8 flex h-12 w-12 items-center justify-center rounded bg-neutral-200 text-blue-600 text-xl">
        <i class="fas fa-stethoscope"></i>
      </div>
      <h4 class="mb-2 text-lg font-semibold">Expert Medical Team</h4>
      <p class="text-lg">Our board-certified specialists are committed to delivering the highest standard of care tailored to your unique health needs.</p>
    </div>
    <div class="flex flex-col rounded-lg border border-neutral-200 p-4">
      <div class="mb-8 flex h-12 w-12 items-center justify-center rounded bg-neutral-200 text-blue-600 text-xl">
        <i class="fas fa-notes-medical"></i>
      </div>
      <h4 class="mb-2 text-lg font-semibold">Personalized Treatment Plans</h4>
      <p class="text-lg">We create customized care plans to ensure you receive the most effective and compassionate treatment possible.</p>
    </div>
  </div>
</section>

    <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
      <div class="grid gap-8 lg:grid-cols-2">
        <div>
          <div
            class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600"
          >
            Statistics
          </div>
          <h2 class="mb-4 text-3xl font-bold lg:text-5xl">
            The Impact of Inefficiency
          </h2>
          <p class="text-lg lg:text-xl">
            Our research shows that businesses face significant challenges in
            their daily operations. Here's what the numbers tell us.
          </p>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div class="rounded-lg bg-blue-600 p-6 text-white">
            <p class="text-4xl font-bold lg:text-6xl">40%</p>
            <p class="text-lg">Time spent on administrative tasks</p>
          </div>
          <div class="rounded-lg bg-blue-600 p-6 text-white">
            <p class="text-4xl font-bold lg:text-6xl">62%</p>
            <p class="text-lg">Teams struggle with remote collaboration</p>
          </div>
          <div class="rounded-lg bg-blue-600 p-6 text-white">
            <p class="text-4xl font-bold lg:text-6xl">25%</p>
            <p class="text-lg">Revenue lost due to inefficient processes</p>
          </div>
          <div class="rounded-lg bg-blue-600 p-6 text-white">
            <p class="text-4xl font-bold lg:text-6xl">83%</p>
            <p class="text-lg">Want better digital tools</p>
          </div>
        </div>
      </div>
    </section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="mb-4 grid grid-cols-1 lg:mb-8 lg:grid-cols-2">
    <div class="col-span-1 lg:col-span-2">
      <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Get Started</div>
    </div>
    <div>
      <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-0 lg:text-6xl">How to use SenangWebs</h1>
    </div>
    <div class="flex items-center">
      <p class="w-full text-left text-base font-semibold lg:text-right lg:text-2xl">Create website easily without worry, in minutes</p>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4">
        <p class="mb-2 font-bold opacity-50">Step 1</p>
        <p class="text-base font-semibold lg:text-2xl">Register & login to your account.</p>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4">
        <p class="mb-2 font-bold opacity-50">Step 2</p>
        <p class="text-base font-semibold lg:text-2xl">Create a new wbsite, get free SenangWebs.com domain name.</p>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4">
        <p class="mb-2 font-bold opacity-50">Step 3</p>
        <p class="text-base font-semibold lg:text-2xl">Customize your webpage & click live to publish your website.</p>
      </div>
    </div>
  </div>
</section>

<section id="islbl" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div id="i1g8b4" class="mb-8 grid grid-cols-1 text-center lg:mx-24 lg:mb-16">
    <div id="ifhpfw" class="col-span-1"></div>
    <div id="ii2jm">
      <h1 id="iyj0h" class="mb-2 text-3xl font-bold capitalize lg:mb-4 lg:text-6xl">📱 How To Get Started<br /></h1>
    </div>
    <div id="ia8bfp" class="flex items-center">
      <p id="i7p89" class="w-full text-base font-medium lg:text-2xl">3 simple steps to start playing STEM-AR now.<br /></p>
    </div>
  </div>
  <div id="i4q09" class="grid gap-4 lg:grid-cols-2 lg:gap-16">
    <div id="istii" class="flex items-center"><img id="i5f9sn" src="https://placehold.co/320x480" class="mx-auto w-full" /></div>
    <div id="iowf7j">
      <div id="ilv2h" class="grid gap-4">
        <div id="izo6k" class="flex flex-col rounded-2xl border-2 border-blue-600 bg-blue-100 p-4">
          <div id="i0lmy" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-600 text-3xl text-white"><i id="ikqdo5" class="fas fa-print"></i></div>
          <h4 id="iadh3" class="mb-2 text-lg font-semibold">Print the Marker<br /></h4>
          <p id="iuds9" class="text-lg">Get ready to embark on an immersive learning journey by printing our specially designed markers. These markers serve as gateways to unlock a world of knowledge and discovery.<br /></p>
        </div>
        <div id="i2gaze" class="flex flex-col rounded-2xl border-2 border-blue-600 bg-blue-100 p-4">
          <div id="i83zyh" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-600 text-3xl text-white"><i id="i04wah" class="fas fa-gamepad"></i></div>
          <h4 id="itajj" class="mb-2 text-lg font-semibold">Start the App<br /></h4>
          <p id="ig8dk" class="text-lg">Launch the STEM-AR app on your device and point it towards the printed marker. Watch in awe as the marker transforms into a portal, transporting you to interactive, three-dimensional models and simulations.<br /></p>
          <a href="https://stem-ar.bookklik.com/game/" type="button" target="_blank" id="i1y3rk" class="mt-4 flex h-12 w-full items-center justify-center rounded-lg border-2 border-blue-600 bg-white px-6 text-lg font-semibold text-blue-600 hover:opacity-80 lg:max-w-max">▶️ Start Now!</a>
        </div>
        <div id="izcj4i" class="flex flex-col rounded-2xl border-2 border-blue-600 bg-blue-100 p-4">
          <div id="ixb8lc" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-600 text-3xl text-white"><i id="i2sowp" class="fas fa-check-circle"></i></div>
          <h4 id="i71hl" class="mb-2 text-lg font-semibold">Ready<br /></h4>
          <p id="i2cwq" class="text-lg">Whether you're delving into the mysteries of physics, unraveling the complexities of mathematics, or engineering innovative solutions, STEM-AR is your companion in learning.<br /></p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="mb-4 p-0 lg:mb-16 lg:px-24">
    <h1 class="mb-2 hidden text-2xl font-bold capitalize lg:mb-6 lg:block lg:text-6xl">Our Story</h1>
    <div class="mb-2 lg:mb-4 lg:text-3xl">
      <p>
        Our process gathers existing programs and initiatives, stakeholder input, customer research, and industry trends into a highly engaging and interactive meeting. If agreed, we run collaborative work sessions with you to gain a deep understanding of your brand and the mission that it is currently on. This approach accelerates the strategic process in general, and builds consensus throughout the entire engagement.
        <br /><br />
        Together, using a fast paced, user centric, and facilitated framework, we define and prioritise user needs, create desired user journeys, define the brand, create wireframes, surface actionable insights, make strategic recommendations and produce tangible results that can be deployed within your organisation.
        <br /><br />
        We then would carry out a corporate photography session to really capture the essence of the people behind the company and put together a brand new website that impresses your visitors. Schedule a call today!
      </p>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-4">
    <div
      class="grid grid-cols-1 rounded-lg bg-gray-200 p-4 lg:grid-cols-2 lg:px-16 lg:py-8"
      style="
          background-image: url('https://placehold.co/1200x600');
          background-size: cover;
          background-position: center;
        "
    >
      <div style="padding-top: 100%" class="relative lg:col-start-2">
        <div class="absolute left-0 top-0 flex h-full w-full flex-col lg:justify-center">
          <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Mission</div>
          <p class="text-xl font-semibold lg:text-2xl">Changing paradigms isn't easy - we're building a complex product that's a huge design and engineering challenge. We need to balance power with ease of use, information density with simplicity, and form with function. We’re here to make it a reality.</p>
        </div>
      </div>
    </div>
    <div
      class="grid grid-cols-1 rounded-lg bg-gray-200 p-4 lg:grid-cols-2 lg:px-16 lg:py-8"
      style="
          background-image: url('https://placehold.co/1200x600');
          background-size: cover;
          background-position: center;
        "
    >
      <div style="padding-top: 100%" class="relative lg:col-start-1">
        <div class="absolute left-0 top-0 flex h-full w-full flex-col lg:justify-center">
          <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Philosophy</div>
          <p class="text-xl font-semibold lg:text-2xl">We’re hyper focused on doing better, and being better, at every single thing we do. Heck, we want to be known for it. If we don’t know something, we learn it. If we need help, we ask for it. Our biggest competitor is ourselves.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="mb-4 grid grid-cols-1 lg:mx-24 lg:mb-8">
    <div class="col-span-1">
      <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Our Leadership</div>
    </div>
    <div>
      <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Driven by Vision, United by Purpose</h1>
    </div>
    <div class="flex items-center">
      <p class="w-full text-left text-base font-semibold lg:text-2xl">Meet the passionate leaders guiding our mission to make a difference.</p>
    </div>
  </div>
  <div class="mb-4 grid grid-cols-1 gap-4 lg:mb-8 lg:grid-cols-3">
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 140%">
      <img src="https://placehold.co/400x600/2563EB/FFFFFF" class="absolute top-0 w-full" />
      <div class="absolute bottom-0 left-0 flex w-full p-4 text-white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);">
        <div class="flex-grow">
          <p class="text-xl">Ah Chong</p>
          <p class="text-base">CEO & Founder</p>
        </div>
        <div class="flex items-center text-4xl">
          <a href=""><i class="fab fa-linkedin ml-4"></i></a>
          <a href=""><i class="fab fa-facebook ml-4"></i></a>
        </div>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 140%">
      <img src="https://placehold.co/400x600/2563EB/FFFFFF" class="absolute top-0 w-full" />
      <div class="absolute bottom-0 left-0 flex w-full p-4 text-white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);">
        <div class="flex-grow">
          <p class="text-xl">Abu Zamir</p>
          <p class="text-base">Chief Technology Officer</p>
        </div>
        <div class="flex items-center text-4xl">
          <a href=""><i class="fab fa-linkedin ml-4"></i></a>
          <a href=""><i class="fab fa-facebook ml-4"></i></a>
        </div>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 140%">
      <img src="https://placehold.co/400x600/2563EB/FFFFFF" class="absolute top-0 w-full" />
      <div class="absolute bottom-0 left-0 flex w-full p-4 text-white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);">
        <div class="flex-grow">
          <p class="text-xl">Arjun</p>
          <p class="text-base">Chief Operations Officer</p>
        </div>
        <div class="flex items-center text-4xl">
          <a href=""><i class="fab fa-linkedin ml-4"></i></a>
          <a href=""><i class="fab fa-facebook ml-4"></i></a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <h6 class="mb-4 text-2xl font-bold lg:text-4xl">Our experienced doctors</h6>
  <div class="mb-4 grid grid-cols-1 gap-4 lg:mb-8 lg:grid-cols-3">
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 140%">
      <img src="https://placehold.co/400x600/2563EB/FFFFFF" class="absolute top-0 w-full" />
      <div class="absolute bottom-0 left-0 flex w-full p-4 text-white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);">
        <div class="flex-grow">
          <p class="text-xl">Ah Chong</p>
          <p class="text-base">CEO & Founder</p>
        </div>
        <div class="flex items-center text-4xl">
          <a href=""><i class="fab fa-linkedin ml-4"></i></a>
          <a href=""><i class="fab fa-facebook ml-4"></i></a>
        </div>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 140%">
      <img src="https://placehold.co/400x600/2563EB/FFFFFF" class="absolute top-0 w-full" />
      <div class="absolute bottom-0 left-0 flex w-full p-4 text-white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);">
        <div class="flex-grow">
          <p class="text-xl">Abu Zamir</p>
          <p class="text-base">Chief Technology Officer</p>
        </div>
        <div class="flex items-center text-4xl">
          <a href=""><i class="fab fa-linkedin ml-4"></i></a>
          <a href=""><i class="fab fa-facebook ml-4"></i></a>
        </div>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 140%">
      <img src="https://placehold.co/400x600/2563EB/FFFFFF" class="absolute top-0 w-full" />
      <div class="absolute bottom-0 left-0 flex w-full p-4 text-white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);">
        <div class="flex-grow">
          <p class="text-xl">Arjun</p>
          <p class="text-base">Chief Operations Officer</p>
        </div>
        <div class="flex items-center text-4xl">
          <a href=""><i class="fab fa-linkedin ml-4"></i></a>
          <a href=""><i class="fab fa-facebook ml-4"></i></a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
    <div class="grid grid-cols-1 mb-4 lg:mb-8 mx-0 lg:mx-24">
        <div class="col-span-1">
            <div class="border-2 rounded-md border-blue-600 text-blue-600 px-2 max-w-max font-bold mb-2 lg:mb-4">
                Testimonial
            </div>
        </div>
        <div>
            <h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">
                Stories from our clients
            </h1>
        </div>
        <div class="flex items-center">
            <p class="text-base lg:text-2xl font-semibold w-full opacity-70">
                Stop repeating the same messages to your customers to introduce
                your business.
            </p>
        </div>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <div class="border border-gray-200 rounded-lg p-4">
            <h4 class="text-xl font-semibold">Name</h4>
            <p class="text-xs mb-2">Position / Company</p>
            <p class="text-xl">
                Whether it’s a life-changing app idea, business app, mobile game
                app, designing a mobile app is a real challenge especially when it
                has to survive among
            </p>
        </div>
        <div class="border border-gray-200 rounded-lg p-4">
            <h4 class="text-xl font-semibold">Name</h4>
            <p class="text-xs mb-2">Position / Company</p>
            <p class="text-xl">
                Whether it’s a life-changing app idea, business app, mobile game
                app, designing a mobile app is a real challenge especially when it
                has to survive among
            </p>
        </div>
        <div class="border border-gray-200 rounded-lg p-4">
            <h4 class="text-xl font-semibold">Name</h4>
            <p class="text-xs mb-2">Position / Company</p>
            <p class="text-xl">
                Whether it’s a life-changing app idea, business app, mobile game
                app, designing a mobile app is a real challenge especially when it
                has to survive among
            </p>
        </div>
    </div>
</section>

<section class="px-6 lg:px-16 container mx-auto my-8 lg:my-16">
    <h6 class="text-2xl lg:text-4xl font-bold mb-4">
        Our experienced doctors
    </h6>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <div class="border border-gray-200 rounded-lg p-4">
            <h4 class="text-xl font-semibold">Name</h4>
            <p class="text-xs mb-2">Position / Company</p>
            <p class="text-xl">
                Whether it’s a life-changing app idea, business app, mobile game
                app, designing a mobile app is a real challenge especially when it
                has to survive among
            </p>
        </div>
        <div class="border border-gray-200 rounded-lg p-4">
            <h4 class="text-xl font-semibold">Name</h4>
            <p class="text-xs mb-2">Position / Company</p>
            <p class="text-xl">
                Whether it’s a life-changing app idea, business app, mobile game
                app, designing a mobile app is a real challenge especially when it
                has to survive among
            </p>
        </div>
        <div class="border border-gray-200 rounded-lg p-4">
            <h4 class="text-xl font-semibold">Name</h4>
            <p class="text-xs mb-2">Position / Company</p>
            <p class="text-xl">
                Whether it’s a life-changing app idea, business app, mobile game
                app, designing a mobile app is a real challenge especially when it
                has to survive among
            </p>
        </div>
    </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16" x-data="{ activeSlide: 1 }">
  <div class="mb-8 text-center">
    <div class="mx-auto mb-2 w-min rounded-lg bg-blue-600 px-2 py-1">
      <p class="text-sm font-bold uppercase text-white">Testimonials</p>
    </div>
    <h2 class="mb-4 text-3xl font-bold lg:text-6xl">What Our Clients Say</h2>
    <p class="mx-auto max-w-2xl text-lg lg:text-xl">Real feedback from real customers who have transformed their businesses with our solutions.</p>
  </div>

  <div class="relative">
    <!-- Testimonial Slides -->
    <div class="relative min-h-24 overflow-hidden rounded-2xl bg-neutral-100">
      <!-- Slide 1 -->
      <div x-show="activeSlide === 1" class="h-full w-full p-8 lg:p-16" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0">
        <div class="mb-8 text-4xl text-blue-600">
          <i class="fas fa-quote-left"></i>
        </div>
        <blockquote class="mb-8 text-xl lg:text-2xl">"The platform has completely transformed how we handle our business operations. The efficiency gains have been remarkable, and the support team has been exceptional throughout our journey."</blockquote>
        <div class="flex items-center gap-4">
          <img src="https://placehold.co/80x80" class="h-16 w-16 rounded-full" alt="Customer Photo" />
          <div>
            <p class="font-bold">Sarah Johnson</p>
            <p class="text-sm">CEO at TechStart Inc.</p>
          </div>
        </div>
      </div>

      <!-- Slide 2 -->
      <div x-show="activeSlide === 2" class="h-full w-full p-8 lg:p-16" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0">
        <div class="mb-8 text-4xl text-blue-600">
          <i class="fas fa-quote-left"></i>
        </div>
        <blockquote class="mb-8 text-xl lg:text-2xl">"Implementation was smooth and the results were immediate. Our team's productivity has increased significantly, and we've seen a notable improvement in customer satisfaction."</blockquote>
        <div class="flex items-center gap-4">
          <img src="https://placehold.co/80x80" class="h-16 w-16 rounded-full" alt="Customer Photo" />
          <div>
            <p class="font-bold">Michael Chen</p>
            <p class="text-sm">Operations Director at Global Solutions</p>
          </div>
        </div>
      </div>

      <!-- Slide 3 -->
      <div x-show="activeSlide === 3" class="h-full w-full p-8 lg:p-16" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0">
        <div class="mb-8 text-4xl text-blue-600">
          <i class="fas fa-quote-left"></i>
        </div>
        <blockquote class="mb-8 text-xl lg:text-2xl">"The analytics capabilities have given us insights we never had before. We're now making data-driven decisions that have significantly improved our bottom line."</blockquote>
        <div class="flex items-center gap-4">
          <img src="https://placehold.co/80x80" class="h-16 w-16 rounded-full" alt="Customer Photo" />
          <div>
            <p class="font-bold">Emily Rodriguez</p>
            <p class="text-sm">Data Analytics Lead at InnovateCorp</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Navigation Controls -->
    <div class="mt-8 flex justify-center gap-4">
      <a href="#" x-on:click="activeSlide = 1" class="h-3 w-3 rounded-full transition-colors" :class="{ 'bg-blue-600': activeSlide === 1, 'bg-neutral-300': activeSlide !== 1 }"></a>
      <a href="#" x-on:click="activeSlide = 2" class="h-3 w-3 rounded-full transition-colors" :class="{ 'bg-blue-600': activeSlide === 2, 'bg-neutral-300': activeSlide !== 2 }"></a>
      <a href="#" x-on:click="activeSlide = 3" class="h-3 w-3 rounded-full transition-colors" :class="{ 'bg-blue-600': activeSlide === 3, 'bg-neutral-300': activeSlide !== 3 }"></a>
    </div>
  </div>
</section>

    <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
      <div class="mb-8 grid grid-cols-1 lg:grid-cols-2">
        <div>
          <div
            class="mb-2 max-w-max rounded-lg bg-blue-100 px-3 py-1 text-blue-600"
          >
            <p class="text-sm font-bold">SUCCESS STORIES</p>
          </div>
          <h2 class="mb-4 text-3xl font-bold lg:text-5xl">
            What Our Customers Are Saying
          </h2>
        </div>
        <div class="flex items-center">
          <p class="text-lg lg:text-xl">
            Discover how our solutions have helped businesses like yours achieve
            their goals and drive success.
          </p>
        </div>
      </div>

      <div class="grid gap-6 lg:grid-cols-3">
        <!-- Testimonial Card 1 -->
        <div
          class="group relative rounded-2xl bg-neutral-100 p-6 transition-all hover:-translate-y-2 hover:bg-blue-600 hover:text-white"
        >
          <div class="mb-6 text-3xl text-blue-600 group-hover:text-white">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
          </div>
          <blockquote class="mb-6 text-lg">
            "The implementation process was smooth and the results were beyond
            our expectations. Our team's productivity has increased by 50% since
            we started using the platform."
          </blockquote>
          <div class="flex items-center gap-4">
            <img
              src="https://placehold.co/60x60"
              class="h-12 w-12 rounded-full"
              alt="Customer Photo"
            />
            <div>
              <p class="font-bold">David Kim</p>
              <p class="text-sm">Product Manager</p>
            </div>
          </div>
          <div
            class="absolute bottom-6 right-6 text-4xl text-blue-200 opacity-30 group-hover:text-white/30"
          >
            <i class="fas fa-quote-right"></i>
          </div>
        </div>

        <!-- Testimonial Card 2 -->
        <div
          class="group relative rounded-2xl bg-neutral-100 p-6 transition-all hover:-translate-y-2 hover:bg-blue-600 hover:text-white"
        >
          <div class="mb-6 text-3xl text-blue-600 group-hover:text-white">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
          </div>
          <blockquote class="mb-6 text-lg">
            "The analytics capabilities have transformed how we make decisions.
            We're now able to spot trends and opportunities we would have missed
            before."
          </blockquote>
          <div class="flex items-center gap-4">
            <img
              src="https://placehold.co/60x60"
              class="h-12 w-12 rounded-full"
              alt="Customer Photo"
            />
            <div>
              <p class="font-bold">Lisa Chen</p>
              <p class="text-sm">Operations Director</p>
            </div>
          </div>
          <div
            class="absolute bottom-6 right-6 text-4xl text-blue-200 opacity-30 group-hover:text-white/30"
          >
            <i class="fas fa-quote-right"></i>
          </div>
        </div>

        <!-- Testimonial Card 3 -->
        <div
          class="group relative rounded-2xl bg-neutral-100 p-6 transition-all hover:-translate-y-2 hover:bg-blue-600 hover:text-white"
        >
          <div class="mb-6 text-3xl text-blue-600 group-hover:text-white">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
          </div>
          <blockquote class="mb-6 text-lg">
            "Customer support has been exceptional. Any questions we had were
            answered quickly, and the team went above and beyond to ensure our
            success."
          </blockquote>
          <div class="flex items-center gap-4">
            <img
              src="https://placehold.co/60x60"
              class="h-12 w-12 rounded-full"
              alt="Customer Photo"
            />
            <div>
              <p class="font-bold">Mark Thompson</p>
              <p class="text-sm">Technical Lead</p>
            </div>
          </div>
          <div
            class="absolute bottom-6 right-6 text-4xl text-blue-200 opacity-30 group-hover:text-white/30"
          >
            <i class="fas fa-quote-right"></i>
          </div>
        </div>
      </div>

      <!-- Metrics -->
      <div
        class="mt-12 grid gap-6 rounded-2xl bg-neutral-100 p-8 lg:grid-cols-3"
      >
        <div class="text-center">
          <p class="text-4xl font-bold text-blue-600 lg:text-6xl">98%</p>
          <p class="mt-2 text-lg font-semibold">Customer Satisfaction</p>
        </div>
        <div class="text-center">
          <p class="text-4xl font-bold text-blue-600 lg:text-6xl">500+</p>
          <p class="mt-2 text-lg font-semibold">Active Users</p>
        </div>
        <div class="text-center">
          <p class="text-4xl font-bold text-blue-600 lg:text-6xl">50+</p>
          <p class="mt-2 text-lg font-semibold">Countries Served</p>
        </div>
      </div>
    </section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="mb-4 grid grid-cols-1 lg:mx-24 lg:mb-8">
    <div class="col-span-1">
      <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Our Experiences</div>
    </div>
    <div>
      <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Timeline Of Our Growth</h1>
    </div>
    <div class="flex items-center">
      <p class="w-full text-left text-base font-semibold lg:text-2xl">Here’s what we stand for</p>
    </div>
  </div>
  <div class="flex grid-cols-12 flex-col text-gray-50 lg:grid">
    <div class="flex lg:contents">
      <div class="relative col-start-2 col-end-4 mr-10 flex items-center lg:mx-auto">
        <div class="flex h-full w-6 items-center justify-center">
          <div class="pointer-events-none h-full w-1 bg-blue-600"></div>
        </div>
        <div class="absolute flex h-6 w-6 items-center justify-center rounded-full bg-blue-600">
          <i class="fas fa-check-circle text-white"></i>
        </div>
      </div>
      <div class="col-start-4 col-end-12 my-4 mr-auto w-full rounded-xl bg-blue-600 p-4">
        <h3 class="mb-1 text-lg font-semibold">Package Booked</h3>
        <p class="w-full text-justify leading-tight">21 July 2021, 04:30 PM</p>
      </div>
    </div>

    <div class="flex lg:contents">
      <div class="relative col-start-2 col-end-4 mr-10 flex items-center lg:mx-auto">
        <div class="flex h-full w-6 items-center justify-center">
          <div class="pointer-events-none h-full w-1 bg-blue-600"></div>
        </div>
        <div class="absolute flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 text-center">
          <i class="fas fa-check-circle text-white"></i>
        </div>
      </div>
      <div class="col-start-4 col-end-12 my-4 mr-auto w-full rounded-xl bg-blue-600 p-4">
        <h3 class="mb-1 text-lg font-semibold">Out for Delivery</h3>
        <p class="text-justify leading-tight">22 July 2021, 01:00 PM</p>
      </div>
    </div>

    <div class="flex lg:contents">
      <div class="relative col-start-2 col-end-4 mr-10 flex items-center lg:mx-auto">
        <div class="flex h-full w-6 items-center justify-center">
          <div class="pointer-events-none h-full w-1 bg-red-500"></div>
        </div>
        <div class="absolute flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-center">
          <i class="fas fa-times-circle text-white"></i>
        </div>
      </div>
      <div class="col-start-4 col-end-12 my-4 mr-auto w-full rounded-xl bg-red-500 p-4">
        <h3 class="mb-1 text-lg font-semibold text-gray-50">Cancelled</h3>
        <p class="text-justify leading-tight">Customer cancelled the order</p>
      </div>
    </div>

    <div class="flex lg:contents">
      <div class="relative col-start-2 col-end-4 mr-10 flex items-center lg:mx-auto">
        <div class="flex h-full w-6 items-center justify-center">
          <div class="pointer-events-none h-full w-1 bg-gray-300"></div>
        </div>
        <div class="absolute flex h-6 w-6 items-center justify-center rounded-full bg-gray-300 text-center">
          <i class="fas fa-exclamation-circle text-gray-400"></i>
        </div>
      </div>
      <div class="col-start-4 col-end-12 my-4 mr-auto w-full rounded-xl bg-gray-300 p-4">
        <h3 class="mb-1 text-lg font-semibold text-gray-400">Delivered</h3>
        <p class="text-justify leading-tight"></p>
      </div>
    </div>
  </div>
</section>

<section class="px-6 lg:px-16 flex flex-col items-center my-8 lg:my-16 container mx-auto">
    <div class="border-2 rounded-md border-blue-600 text-blue-600 px-2 max-w-max font-bold mb-2 lg:mb-4">
        Solution
    </div>
    <h1
        class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4 text-left lg:text-center lg:max-w-screen-md w-full">
        Why Choose Us As Your Growth Partner
    </h1>
    <p class="text-base lg:text-2xl font-semibold mb-4 lg:mb-8">
        Stop repeating the same messages to your customers to introduce your
        business.
    </p>

    <div class="bg-gray-200 rounded-lg overflow-hidden relative w-full lg:max-w-screen-md">
        <div class="w-full" style="padding-top: 60%">
            <iframe src="https://www.youtube.com/embed/__NeP0RqACU" title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen class="absolute top-0 left-0 w-full h-full"></iframe>
        </div>
    </div>
</section>