<body>
  <nav id="i4jk" 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 src="https://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/nHIIseMiqsJ1YQSa7p0I2QTPYjZSgK7FlrRhn8rE.png" class="h-full"/></a>
		<div id="iv6f" x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="w-12 flex items-center justify-center lg:hidden cursor-pointer">
		  <span :class="!isOpen ? '' : 'hidden'"><i id="i0wd" class="fas fa-bars">
			</i></span>
		  <span :class="isOpen ? '' : 'hidden'"><i id="ipm6e" class="fas fa-times">
			</i></span>
		</div>
	  </div>
	  <div id="i1ppl" :class="isOpen ? '' : 'hidden'" class="flex-grow justify-end flex-col lg:flex lg:flex-row pt-4 lg:pt-0">
		<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 id="ico7z" 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
		  <span id="ixj3p" class="text-orange-600">Great Product</span>
		</h1>
		<p id="id97k" class="text-2xl lg:text-4xl mb-6 lg:mb-8 text-center font-semibold">Empowering Business to Build, Innovate, and Succeed
		  <br/>
		</p>
		<div id="imfy1" class="aspect-video w-full relative mb-4 lg:mb-8 max-w-2xl">
		  <img id="ifdyv" src="https://assets.senangwebs.com/websites/1f3ee627-83f0-4ce7-8947-88bc240f08dd/images/d2paBBajOJhlde008ImzzLUc416b1H1PnVYIwPjA.png" class="w-full h-full top-0 left-0 absolute lg:rounded-lg object-contain"/>
		</div>
		<div id="i6ixf" class="w-full flex gap-4 justify-center flex-col lg:flex-row">
		  <a id="ihdgl" 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">Services</a>
		  <a id="ib08uq" href="#products" 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 id="ihxr9" 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 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">[email protected]
	  </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