<body>
<div id="i8bdcp-2" class="lg:h-28 w-full">
<nav 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">
<a id="icb7-2" href="#" class="h-12 flex items-center"><img id="ilh8-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/h3iYKMf8DHDwladcdGOHhUXXXpL0R69VaxrKnTjp.svg" class="h-8"/><div id="ipvy-2" class="flex-grow lg:hidden">
</div><div id="i5vr-2" 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="irjjm3-2" class="fas fa-bars">
</i></span>
<span :class="isOpen ? '' : 'hidden'"><i id="iht2ei-2" class="fas fa-times">
</i></span>
</div></a>
<div id="ig8ej-2" :class="isOpen ? '' : 'hidden'" class="flex-grow lg:flex justify-end flex-col lg:flex-row pt-4 lg:pt-0">
<a id="idack-2" href="#learning" class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0">Learning</a>
<a id="iu2lk-2" href="#howto" class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0">How to</a>
<a id="ix5ijg-2" href="#download" class="bg-purple-500 text-white rounded-lg px-6 flex items-center justify-center mx-4 mb-4 lg:mb-0 lg:mr-0 lg:ml-4 h-12 mt-4 lg:mt-0">Download</a>
</div>
</div>
</nav>
</div>
<section id="ivz29x-2" class="relative container mx-auto mb-16">
<div id="i4vabr-2" class="w-full h-full grid grid-rows-5 absolute top-0 left-0">
<div id="i94quk-2" class="row-span-4 bg-gradient-to-r from-purple-500 to-blue-400 lg:rounded-2xl">
</div>
</div>
<div id="iqzvzf-2" class="pt-32 lg:pt-16 px-6 lg:px-16">
<div id="i50kvv-2" class="max-w-screen-lg mx-auto flex flex-col items-center text-white sticky">
<img id="iccil4-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/tG0scWwBczsudZwhdE58obNoVdoNDeqLTAXj2Jnb.svg" class="mb-4 lg:mb-8 max-w-md w-full"/>
<p id="iqco7v-2" class="lg:text-4xl mb-8 lg:mb-16 text-center font-semibold max-w-3xl text-2xl text-black">Dive into the fascinating world of STEM through the lens of Augmented Reality 🎉
<br/>
</p>
<div id="iktka-2" class="w-full overflow-hidden rounded-2xl border-8 border-white">
<img id="i5bk6l-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/7HIruLKQ0lDvrdkn87OLeX7dQyMO1rS1IL3ELQsG.png" class="w-full"/>
</div>
</div>
</div>
</section>
<section id="learning-2" class="h-20">
</section>
<section id="iia0d1-2" class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<h1 id="izfjzg-2" class="font-bold text-center mb-8 lg:mb-16 lg:text-6xl text-3xl lg:mx-24">📖 Learning STEM Topics
</h1>
<div id="ik753-2" class="flex flex-col gap-8 lg:gap-16">
<div id="iovnx-2" class="flex flex-col lg:mx-24">
<div id="ijtij-2" class="grid lg:grid-cols-2 gap-8 lg:gap-16 group">
<div id="imy13-2" class="order-2 lg:order-1 flex flex-col justify-center gap-4 lg:gap-8">
<div id="id5gvp-2" class="rounded-md px-2 max-w-max font-bold bg-purple-500 text-white">Science
</div>
<p id="ifzri-2" class="text-2xl lg:text-4xl font-bold">Eclipse
</p>
<p id="izj9o-2" 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 id="i5ioqr-2" class="order-1 lg:order-2 flex flex-col items-center">
<img id="ivuiu-2-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/Gz7nGvtRohqCgVptXqTz8N9i1T8X4dEb48fJcheH.png" class="w-full object-contain group-hover:scale-150 duration-500 ease-in-out"/>
<img id="i5vjof-2-3" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/MV2o3qaNGr5pl8L9x6K4yVm0qr6CAepDQU5utOSW.png" class="w-full object-contain max-w-sm"/>
</div>
</div>
</div>
<div id="i5m1by-2" class="flex flex-col lg:mx-24">
<div id="igwmx-2" class="grid lg:grid-cols-2 gap-8 lg:gap-16 group">
<div id="icg42-2" class="flex flex-col items-center">
<img id="ivuiu-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/RIt11TmRdwrY9oScyyfOoMLQPE0qsK3bJalSArEw.png" class="w-full object-contain max-w-xs group-hover:scale-150 duration-500 ease-in-out"/>
<img id="i5vjof-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/mPeaS6MtZKzjN4cH0DGBQmSTGTmRvFxEbgK0r0Ds.png" class="w-full object-contain max-w-sm"/>
</div>
<div id="isyto-2" class="flex flex-col justify-center gap-4 lg:gap-8">
<div id="i6ts0k-2" class="rounded-md px-2 max-w-max font-bold bg-purple-500 text-white">Technology
</div>
<p id="it1lq-2" class="text-2xl lg:text-4xl font-bold">Augmented Reality
<br/>
</p>
<p id="ijwwl-2" class="text-xl lg:text-2xl">Thanks to augmented reality technology, digital object can exist outside of digital world and come to our world.
<br/>
</p>
</div>
</div>
</div>
<div id="i6v1u-2" class="flex flex-col lg:mx-24">
<div id="iisyf-2" class="grid lg:grid-cols-2 gap-8 lg:gap-16 group">
<div id="i2dum-2" class="order-2 lg:order-1 flex flex-col justify-center gap-4 lg:gap-8">
<div id="ifz1jh-2" class="rounded-md px-2 max-w-max font-bold bg-purple-500 text-white">Engineering
</div>
<p id="irxvu-2" class="text-2xl lg:text-4xl font-bold">Combustion Engines
<br/>
</p>
<p id="ifhap-2" 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 id="io9nv7-2" class="order-1 lg:order-2 flex flex-col items-center">
<img id="i2eb4c-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/GMgWM2gLzilWy1JiZBxF00QONy06LDbCTzf5ajL7.png" class="w-full object-contain max-w-xs group-hover:scale-150 duration-500 ease-in-out"/>
<img id="i5vjof-2-2-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/PCnLfL17cWWIz6NloH1JT28yaoMJyGpLw4l29fAE.png" class="w-full object-contain max-w-sm"/>
</div>
</div>
</div>
<div id="i8pst-2" class="flex flex-col lg:mx-24">
<div id="irelh-2" class="grid lg:grid-cols-2 gap-8 lg:gap-16 group">
<div id="ioniui-2" class="flex flex-col items-center">
<img id="ivuiu-3-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/TWnStGsRrDIPltxPWMDXpz9mTVhU0o1dXnRj58Yb.png" class="w-full object-contain max-w-xs -ml-4 group-hover:scale-150 duration-500 ease-in-out"/>
<img id="i5vjof-3-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/hNzpQIOHsy0CyiZbbeNS7Q1NJAAlvAKNaa7W57RR.png" class="w-full object-contain max-w-sm"/>
</div>
<div id="izubpc-2" class="flex flex-col justify-center gap-4 lg:gap-8">
<div id="inx8vi-2" class="rounded-md px-2 max-w-max font-bold bg-purple-500 text-white">Mathematics
</div>
<p id="i6g1v-2" class="text-2xl lg:text-4xl font-bold">Dimensions
<br/>
</p>
<p id="iqslu-2" 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="howto-2" class="h-20">
</section>
<section id="islbl-2" class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div id="i1g8b4-2" class="grid grid-cols-1 lg:mx-24 mb-8 lg:mb-16 text-center">
<div id="ifhpfw-2" class="col-span-1">
</div>
<div id="ii2jm-2">
<h1 id="iyj0h-2" class="text-3xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">📱 How To Get Started
<br/>
</h1>
</div>
<div id="ia8bfp-2" class="flex items-center">
<p id="i7p89-2" class="text-base lg:text-2xl w-full font-medium">3 simple steps to start playing STEM-AR now.
<br/>
</p>
</div>
</div>
<div id="i4q09-2" class="grid lg:grid-cols-2 gap-4">
<div id="istii-2" class="flex items-center">
<img id="i5f9sn-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/eg1EDUQAcTOFDraFZqP03RDcMlmtDE7oiFm1UHYQ.png" class="mx-auto w-full"/>
</div>
<div id="iowf7j-2">
<div id="ilv2h-2" class="grid gap-4">
<div id="izo6k-2" class="rounded-2xl p-4 flex flex-col border-2 border-purple-500 bg-purple-100">
<div id="i0lmy-2" class="bg-purple-500 text-white rounded-full mb-4 flex items-center justify-center text-3xl h-16 w-16">
<i id="ikqdo5-2" class="fas fa-print">
</i>
</div>
<h4 id="iadh3-2" class="mb-2 font-semibold text-lg">Print the Marker
<br/>
</h4>
<p id="iuds9-2" 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-2" class="border-2 rounded-2xl p-4 flex flex-col border-purple-500 bg-purple-100">
<div id="i83zyh-2" class="bg-purple-500 text-white rounded-full mb-4 flex items-center justify-center text-3xl h-16 w-16">
<i id="i04wah-2" class="fas fa-gamepad">
</i>
</div>
<h4 id="itajj-2" class="mb-2 font-semibold text-lg">Start the App
<br/>
</h4>
<p id="ig8dk-2" 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 id="i1y3rk-2" href="https://stem-ar.bookklik.com/game/" type="button" target="_blank" class="border-2 rounded-lg text-lg font-semibold px-6 w-full lg:max-w-max h-12 flex items-center justify-center hover:opacity-80 text-purple-500 border-purple-500 mt-4 bg-white">▶️ Start Now!</a>
</div>
<div id="izcj4i-2" class="border-2 rounded-2xl p-4 flex flex-col border-purple-500 bg-purple-100">
<div id="ixb8lc-2" class="bg-purple-500 text-white rounded-full mb-4 flex items-center justify-center text-3xl h-16 w-16">
<i id="i2sowp-2" class="fas fa-check-circle">
</i>
</div>
<h4 id="i71hl-2" class="mb-2 font-semibold text-lg">Ready
<br/>
</h4>
<p id="i2cwq-2" 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 id="download-2" class="h-20">
</section>
<section id="iq6c9k-2" class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div id="ikg6bc-2" class="p-4 lg:px-16 lg:py-12 overflow-hidden relative grid grid-cols-1 lg:grid-cols-3 gap-4 text-white bg-gradient-to-r from-purple-500 to-blue-400 rounded-2xl">
<div id="it9lmw-2" class="col-span-1 lg:col-span-2 flex flex-col justify-center">
<h1 id="ijfehq-2" class="text-2xl lg:text-6xl capitalize font-semibold lg:font-bold mb-2">📂 Download Marker
</h1>
<p id="i9jh58-2" class="text-base lg:text-2xl w-full lg:mb-8 mb-4">Download and print out the markers and start playing.
<br/>
</p>
<div id="in87r6-2" class="flex gap-4 lg:flex-row flex-col">
<a id="ixfgqb-2" href="https://stem-ar.bookklik.com/res/file/stem_ar_marker_print.pdf" type="button" target="_blank" class="border-2 rounded-lg text-lg font-semibold px-6 w-full lg:max-w-max h-12 flex items-center justify-center hover:opacity-80 text-white border-white">PDF</a>
<a id="ic3b3j-2" href="https://stem-ar.bookklik.com/res/file/stem_ar_marker_print.docx" type="button" target="_blank" class="border-2 rounded-lg text-lg font-semibold px-6 w-full lg:max-w-max h-12 flex items-center justify-center hover:opacity-80 text-white border-white">DOCX</a>
</div>
</div>
<div id="i4ajll-2" class="justify-right aspect-square lg:flex hidden">
<img id="ivfr4c-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/Lzku8hzSDjY0KNPT5oEEDU7Nkz5yBB5fju1PwFRX.png" class="mx-auto rotate-12 object-contain w-full"/>
</div>
</div>
</section>
<footer id="i24yy9-2" class="grid container mx-auto px-6 lg:px-16 gap-4 lg:grid-cols-3">
<div id="iy3cxj-2" class="flex flex-col gap-2">
<div class="h-12 max-w-max">
<img id="i6sdn5-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/h3iYKMf8DHDwladcdGOHhUXXXpL0R69VaxrKnTjp.svg" class="h-12"/>
</div>
<p id="is6v7q-2" class="text-sm max-w-sm">Dive into the fascinating world of STEM through the lens of Augmented Reality
</p>
</div>
<div id="iqxzsu-2" class="flex flex-col gap-2">
<h4 id="i5k7n9-2" class="font-semibold text-lg">Site Map
</h4>
<a id="i13a0r-2" href="#learning" class="text-sm">Learning</a>
<a id="ihfa6b-2" href="#howto" class="text-sm">How to</a>
<a id="isam3y-2" href="#download" class="text-sm">Download</a>
</div>
<div id="i9yylk-2" class="flex flex-col gap-2">
<h4 id="i670h2-2" class="font-semibold text-lg">About Us
</h4>
<a id="irxqs5-2" href="https://bookklik.com" target="_blank" class="text-sm">Bookklik Technologies</a>
<p id="i45eh2-2" class="text-sm">Selangor, Malaysia
</p>
</div>
</footer>
<footer id="i8rhgl-2" class="flex flex-col lg:flex-row container mx-auto pt-4 px-6 lg:px-16 mb-16">
<div id="ii0qkq-2" class="flex justify-center">
<a id="iq4hkl-2" href="https://www.linkedin.com/company/bookklik-technologies-my/" target="_blank" class="bg-purple-100 rounded-md flex items-center justify-center w-8 h-8 text-purple-600 text-sm mr-2"><i class="fab fa-linkedin">
</i></a>
<a id="ibeffy-2" href="https://twitter.com/bookklik_my" target="_blank" class="bg-purple-100 rounded-md flex items-center justify-center w-8 h-8 text-purple-600 text-sm mr-2"><i class="fab fa-twitter">
</i></a>
<a id="ia294w-2" href="https://www.facebook.com/bookklik.malaysia/" target="_blank" class="bg-purple-100 rounded-md flex items-center justify-center w-8 h-8 text-purple-600 text-sm mr-2"><i id="ivuxym-2" class="fab fa-facebook">
</i></a>
</div>
<div id="ifk5ub-2" 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