<body id="if2c">
  <nav id="itli" x-data="{ isOpen: false }" class="fixed w-full z-50 p-6">
    <div
      class="p-2 w-full mx-auto rounded-lg flex flex-col lg:flex-row bg-white bg-opacity-80 backdrop-filter backdrop-blur container"
    >
      <div class="h-12 flex justify-between">
        <a href="#"
          ><img
            id="ievq"
            src="https://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/nHIIseMiqsJ1YQSa7p0I2QTPYjZSgK7FlrRhn8rE.png"
            class="h-full"
        /></a>
        <div
          x-on:click="isOpen = !isOpen"
          x-on:click.outside="isOpen = false"
          class="w-12 flex items-center justify-center lg:hidden cursor-pointer"
        >
          <span
            id="mobile_nav_icon_close"
            :class="!isOpen ? '' : 'hidden'"
            class=""
            ><i class="fas fa-bars"></i></span
          ><span
            id="mobile_nav_icon_open"
            :class="isOpen ? '' : 'hidden'"
            class="hidden"
            ><i class="fas fa-times"></i
          ></span>
        </div>
      </div>
      <div
        :class="isOpen ? '' : 'hidden'"
        class="flex-grow justify-end flex-col lg:flex lg:flex-row pt-4 lg:pt-0 hidden"
      >
        <a
          id="i3ywi"
          href="#services"
          class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0 hover:text-orange-500"
          >Services</a
        ><a
          id="iwxca"
          href="#products"
          class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0 hover:text-orange-500"
          >Products</a
        ><a
          id="iat1b"
          href="#about"
          class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0 hover:text-orange-500"
          >About</a
        ><a
          id="iaygu"
          href="#contact"
          class="bg-neutral-800 text-white rounded-lg font-semibold px-6 flex items-center justify-center hover:opacity-80 mx-4 mb-4 lg:mb-0 lg:mr-0 lg:ml-4 h-12 mt-4 lg:mt-0"
          >Contact Us</a
        >
      </div>
    </div>
  </nav>
  <section id="i1y6j" class="container mx-auto mb-16 lg:pt-28">
    <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-gradient-to-b from-white to-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-orange-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://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/d2paBBajOJhlde008ImzzLUc416b1H1PnVYIwPjA.png"
            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-orange-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-orange-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="if6xg" class="px-6 lg:px-16 my-4 lg:my-8 container mx-auto">
    <div class="flex items-center mb-4 lg:mb-8" id="ihxr9">
      <div class="flex-grow border-orange-100 border-t border-2"></div>
      <div class="px-4 font-bold text-2xl lg:text-4xl">
        <p id="ibn3j">Partners &amp; Clients</p>
      </div>
      <div class="flex-grow border-orange-100 border-t border-2"></div>
    </div>
    <div id="i5xkv" class="grid grid-cols-2 lg:grid-cols-6 gap-8 lg:gap-4">
      <div class="h-16 rounded flex items-center justify-center">
        <img
          id="iw983"
          src="https://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/BqTUYp2qYmWqGswNctnrKtjnmGm2VRH0flBWBqp0.jpg"
          class="h-16 w-full object-contain grayscale"
        />
      </div>
      <div class="h-16 rounded flex items-center justify-center">
        <img
          id="i8w79"
          src="https://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/sclsxL6yquoFtvqqynPFvl5IojUriBmd8NIhji2i.jpg"
          class="h-16 w-full object-contain grayscale"
        />
      </div>
      <div class="h-16 rounded flex items-center justify-center">
        <img
          id="i3qcyd"
          src="https://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/GyNf4msaHDo29ovFPJfltU3HI92AnTGtb5Hlmc84.png"
          class="h-16 w-full object-contain grayscale"
        />
      </div>
      <div class="h-16 rounded flex items-center justify-center">
        <img
          id="idt1l8"
          src="https://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/FqSSjd38DtpdTKNkvUVU1w0IFUWzFqEzCPS5jdRT.png"
          class="h-16 w-full object-contain grayscale"
        />
      </div>
      <div id="ikbqf" class="h-16 rounded flex items-center justify-center">
        <img
          id="i2i92"
          src="https://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/fKscwVs4X6g9Dn40SuwC82m2bJ2VmJBDQEYGycuT.png"
          class="h-16 w-full object-contain grayscale"
        />
      </div>
      <div id="imuaw8" class="h-16 rounded flex items-center justify-center">
        <img
          id="i77ezm"
          src="https://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/iBqa4qHQaOaLN01dPMwN164BejacQZ0rolhUNup1.png"
          class="h-16 w-full object-contain grayscale"
        />
      </div>
    </div>
  </section>
  <section id="services" class="h-20"></section>
  <section id="irchk" 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 lg:mx-24">
      <div class="col-span-1"></div>
      <div>
        <h1 class="text-3xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">
          Software Solutions Tailored for Your Business
        </h1>
      </div>
      <div class="flex items-center">
        <p class="text-xl lg:text-2xl w-full text-left opacity-80">
          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 lg:grid-cols-3 gap-4">
      <div class="border border-neutral-200 rounded-lg p-4 flex flex-col">
        <div
          class="bg-gray-800 text-orange-500 w-16 rounded-md mb-8 h-16 flex items-center justify-center text-4xl"
        >
          <i class="fas fa-vr-cardboard"></i>
        </div>
        <h4 class="mb-2 font-semibold text-lg">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
        id="i9mhd"
        class="border border-neutral-200 rounded-lg p-4 flex flex-col"
      >
        <div
          class="bg-gray-800 text-orange-500 w-16 rounded-md mb-8 h-16 flex items-center justify-center text-4xl"
        >
          <i class="fas fa-cube"></i>
        </div>
        <h4 class="mb-2 font-semibold text-lg">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="border border-neutral-200 rounded-lg p-4 flex flex-col">
        <div
          class="bg-gray-800 text-orange-500 w-16 rounded-md mb-8 h-16 flex items-center justify-center text-4xl"
        >
          <i class="fas fa-globe"></i>
        </div>
        <h4 class="mb-2 font-semibold text-lg">
          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="border border-neutral-200 rounded-lg p-4 flex flex-col">
        <div
          class="bg-gray-800 text-orange-500 w-16 rounded-md mb-8 h-16 flex items-center justify-center text-4xl"
        >
          <i class="fas fa-mobile"></i>
        </div>
        <h4 class="mb-2 font-semibold text-lg">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="border border-neutral-200 rounded-lg p-4 flex flex-col">
        <div
          class="bg-gray-800 text-orange-500 w-16 rounded-md mb-8 h-16 flex items-center justify-center text-4xl"
        >
          <i class="fas fa-palette"></i>
        </div>
        <h4 class="mb-2 font-semibold text-lg">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="border border-neutral-200 rounded-lg p-4 flex flex-col">
        <div
          class="bg-gray-800 text-orange-500 w-16 rounded-md mb-8 h-16 flex items-center justify-center text-4xl"
        >
          <i class="fas fa-chalkboard-teacher"></i>
        </div>
        <h4 class="mb-2 font-semibold text-lg">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="h-20"></section>
  <section id="iia0d1" class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
    <div class="flex flex-col gap-16 lg:gap-32">
      <div class="flex flex-col lg:mx-24">
        <div class="grid lg:grid-cols-3 gap-8 lg:gap-16">
          <div
            class="order-2 lg:order-1 lg:col-span-2 flex flex-col justify-center gap-4 lg:gap-8"
          >
            <p id="ib9e5z" class="text-2xl lg:text-4xl font-bold">
              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="border-gray-800 border-2 text-gray-800 rounded-lg text-lg font-semibold px-6 w-full lg:max-w-max h-12 flex items-center justify-center hover:opacity-80"
              >Our Works</a
            >
          </div>
          <div class="order-1 lg:order-2">
            <img
              src="https://cdn.glitch.global/82d64943-fcf3-455b-bf6d-b3e19eb9a042/undraw_progressive_app_m-9-ms.svg?v=1704883424315"
              class="w-full h-full object-contain"
            />
          </div>
        </div>
      </div>
      <div class="flex flex-col lg:mx-24">
        <div class="grid lg:grid-cols-3 gap-8 lg:gap-16">
          <div>
            <img
              src="https://cdn.glitch.global/82d64943-fcf3-455b-bf6d-b3e19eb9a042/undraw_design_sprint_re_tke3.svg?v=1704883423683"
              class="w-full h-full object-contain"
            />
          </div>
          <div
            class="lg:col-span-2 flex flex-col justify-center gap-4 lg:gap-8"
          >
            <p class="text-2xl lg:text-4xl font-bold">
              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="bg-orange-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"
              >Talk To An Expert</a
            >
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="products" class="h-20"></section>
  <section id="i45ch1" 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 lg:mx-24">
      <div class="col-span-1"></div>
      <div>
        <h1
          id="iwb62y"
          class="text-3xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4"
        >
          Our Previous Work - Proof of Our Expertise
        </h1>
      </div>
      <div class="flex items-center">
        <p id="it0vps" class="text-xl lg:text-2xl w-full text-left opacity-70">
          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 lg:grid-cols-2 gap-y-4 lg:gap-4">
      <div
        id="ifim5u"
        class="rounded-lg border border-gray-300 overflow-hidden flex flex-col justify-between group"
      >
        <div
          class="p-4 lg:p-8 text-center flex flex-col justify-between h-full"
        >
          <div id="ijjb2h">
            <div class="text-lg lg:text-3xl mb-2 lg:mb-4 font-bold">
              Kad Kahwin Digital
            </div>
            <div id="ion706" class="text-base lg:text-lg mb-4 lg:mb-8">
              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="font-semibold text-orange-600 lg:text-lg flex items-center gap-2 pr-1 hover:gap-3 hover:pr-0 hover:opacity-80"
              >Learn More<i class="fas fa-arrow-right"></i
            ></a>
          </div>
        </div>
        <div>
          <img
            id="iqz78g"
            src="https://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/bKHt6iqx5qhHGyeDse0VNynU3Uy6yuyQT5LNqDoV.jpg"
            class="w-full group-hover:translate-y-4 transition grayscale group-hover:grayscale-0"
          />
        </div>
      </div>
      <div
        id="ivbreb"
        class="rounded-lg border border-gray-300 overflow-hidden flex flex-col justify-between group"
      >
        <div
          id="iouupi"
          class="p-4 lg:p-8 text-center flex flex-col justify-between h-full"
        >
          <div id="ih3d3p">
            <div class="text-lg lg:text-3xl mb-2 lg:mb-4 font-bold">
              SenangWebs
            </div>
            <div id="inyi5b" class="text-base lg:text-lg mb-4 lg:mb-8">
              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="font-semibold text-orange-600 lg:text-lg flex items-center gap-2 pr-1 hover:gap-3 hover:pr-0 hover:opacity-80"
              >Learn More<i class="fas fa-arrow-right"></i
            ></a>
          </div>
        </div>
        <div>
          <img
            id="ie1xqz"
            src="https://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/Jkp2dzJV33HhxiMGpxGBpx8PyFfyUA62BJLWRX2Q.jpg"
            class="w-full group-hover:translate-y-4 transition grayscale group-hover:grayscale-0"
          />
        </div>
      </div>
      <div
        id="ixi16u"
        class="rounded-lg border border-gray-300 overflow-hidden flex flex-col justify-between group"
      >
        <div
          id="iefxe5"
          class="p-4 lg:p-8 text-center flex flex-col justify-between h-full"
        >
          <div>
            <div id="i765y2" class="text-lg lg:text-3xl mb-2 lg:mb-4 font-bold">
              QHeat
            </div>
            <div id="il5zfi" class="text-base lg:text-lg mb-4 lg:mb-8">
              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="font-semibold text-orange-600 lg:text-lg flex items-center gap-2 pr-1 hover:gap-3 hover:pr-0 hover:opacity-80"
              >Learn More<i class="fas fa-arrow-right"></i
            ></a>
          </div>
        </div>
        <div>
          <img
            id="ilx3al"
            src="https://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/5TgVpcEQwgnccWGSjh33aJ0UBz7KEhNTDdXIIs9I.jpg"
            class="w-full group-hover:translate-y-4 transition grayscale group-hover:grayscale-0"
          />
        </div>
      </div>
      <div
        id="icj8d9"
        class="rounded-lg border border-gray-300 overflow-hidden flex flex-col justify-between group"
      >
        <div
          id="iiu3jj"
          class="p-4 lg:p-8 text-center flex flex-col justify-between h-full"
        >
          <div>
            <div id="i6638l" class="text-lg lg:text-3xl mb-2 lg:mb-4 font-bold">
              STEM-AR
            </div>
            <div id="i83aw5" class="text-base lg:text-lg mb-4 lg:mb-8">
              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="font-semibold text-orange-600 lg:text-lg flex items-center gap-2 pr-1 hover:gap-3 hover:pr-0 hover:opacity-80"
              >Learn More<i class="fas fa-arrow-right"></i
            ></a>
          </div>
        </div>
        <div>
          <img
            id="i8rdy4"
            src="https://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/HQVhyHmm9rWZlqeT76chVskHZW65fWbCDGEsK9Y6.jpg"
            class="w-full group-hover:translate-y-4 transition grayscale group-hover:grayscale-0"
          />
        </div>
      </div>
    </div>
  </section>
  <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-orange-100 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-orange-100 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-gradient-to-br from-white to-neutral-200 lg:p-8"
      >
        <div
          class="w-16 h-16 flex items-center justify-center text-4xl bg-orange-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-gradient-to-br from-white to-neutral-200 lg:p-8"
      >
        <div
          class="w-16 h-16 flex items-center justify-center text-4xl bg-orange-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-gradient-to-br from-white to-neutral-200 lg:p-8"
      >
        <div
          class="w-16 h-16 flex items-center justify-center text-4xl bg-orange-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-gradient-to-br from-white to-neutral-200 lg:p-8"
      >
        <div
          class="w-16 h-16 flex items-center justify-center text-4xl bg-orange-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 id="about" class="h-20"></section>
  <section id="ih1vna" class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
    <div class="p-0 mb-4 lg:mb-8 lg:mx-24">
      <h1 class="text-3xl lg:text-6xl capitalize font-bold mb-2 lg:mb-6">
        About
      </h1>
      <div class="mb-2 lg:mb-4">
        <p class="text-xl lg:text-2xl opacity-80">
          Begin as a side project in university, designing digital solution to
          solve student’s textbooks problem. We are a group of problem solvers,
          engineers and lifetime student at heart. A small but agile company
          that approach every single project with flexibility and devotion. Yet,
          big enough to accept challenges of all shapes and sizes.
        </p>
      </div>
    </div>
    <div class="lg:mx-24">
      <img
        id="i3evn9"
        src="https://cdn.glitch.global/82d64943-fcf3-455b-bf6d-b3e19eb9a042/undraw_pair_programming_re_or4x.svg?v=1704645637570"
        class="w-full object-contain"
      />
    </div>
  </section>
  <section id="contact" class="h-20"></section>
  <section id="i5mjqy" class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
    <div
      class="rounded-lg bg-gradient-to-b from-white to-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-orange-100 relative overflow-hidden mr-4 h-16"
          >
            <img
              src="https://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/Hn772jyX6hVhhfO90vpJWDYg7zX7WgeHFPtFWgVm.jpg"
              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-orange-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://cdn.glitch.global/82d64943-fcf3-455b-bf6d-b3e19eb9a042/undraw_chatting_re_j55r.svg?v=1704900866487"
          class="w-full h-full absolute top-0 left-0 object-contain"
        />
      </div>
    </div>
  </section>
  <footer
    id="i24yy9"
    class="grid container mx-auto px-6 lg:px-16 gap-4 lg:grid-cols-3"
  >
    <div id="iy3cxj" class="flex flex-col gap-2">
      <div class="h-12 max-w-max">
        <img
          id="i6sdn5"
          src="https://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/nHIIseMiqsJ1YQSa7p0I2QTPYjZSgK7FlrRhn8rE.png"
          class="h-12"
        />
      </div>
      <p id="is6v7q" class="text-sm max-w-sm">
        Transform your idea into great product.
      </p>
    </div>
    <div id="iqxzsu" class="flex flex-col gap-2">
      <h4 id="i5k7n9" class="font-semibold text-lg">Site Map</h4>
      <a id="i13a0r" href="#services" class="text-sm">Services</a
      ><a id="ihfa6b" href="#products" class="text-sm">Products</a
      ><a id="iitp5q" href="#about" class="text-sm">About</a
      ><a
        id="isam3y"
        href="https://bookklik.com/contact-us"
        target="_blank"
        class="text-sm"
        >Contact</a
      >
    </div>
    <div id="i9yylk" class="flex flex-col gap-2">
      <h4 id="i670h2" class="font-semibold text-lg">Contact Us</h4>
      <p id="irxqs5" class="text-sm">
        <a
          href="/cdn-cgi/l/email-protection"
          class="__cf_email__"
          data-cfemail="8de5e8e1e1e2cdefe2e6e6e1e4e6a3eee2e0"
          >[email&nbsp;protected]</a
        >
      </p>
      <p id="iwceoq" class="text-sm">+60 10 6646 026</p>
      <p id="i45eh2" class="text-sm">Selangor, Malaysia</p>
    </div>
  </footer>
  <footer
    id="i8rhgl"
    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="https://www.linkedin.com/company/bookklik-technologies-my/"
        target="_blank"
        class="bg-orange-100 rounded-md flex items-center justify-center w-8 h-8 text-orange-600 text-sm mr-2"
        ><i class="fab fa-linkedin"></i></a
      ><a
        href="https://twitter.com/bookklik_my"
        target="_blank"
        class="bg-orange-100 rounded-md flex items-center justify-center w-8 h-8 text-orange-600 text-sm mr-2"
        ><i class="fab fa-twitter"></i></a
      ><a
        href="https://www.facebook.com/bookklik.malaysia/"
        target="_blank"
        class="bg-orange-100 rounded-md flex items-center justify-center w-8 h-8 text-orange-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"
    >
      © Bookklik Technologies (PG0446745-V)
    </div>
    <div class="flex justify-center">
      <a
        href="#"
        class="flex items-center justify-center w-8 h-8 text-sm lg:ml-4"
        ><i class="fas fa-arrow-up"></i
      ></a>
    </div>
  </footer>
</body>

Welcome to SenangStart Template Preview! 🎉 Visit our homepage for a deeper dive into our offerings, or you can edit this template with drag-n-drop website builder.

Edit Template