<body>
<div id="ixxb" class="lg:h-28 w-full">
<nav id="iw4y" 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 items-center">
<img id="iqwd" src="https://assets.senangwebs.com/websites/76da0eba-93cd-4c8c-9ad1-74861fabca02/images/xsRBhYzoncYHh0z0uBlMOMCGsxiZU6cMhg1oYy48.png" class="h-8"/>
<div class="flex-grow lg:hidden">
</div>
<div id="ipdy" x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="mobile_nav_toggle w-12 flex items-center justify-center lg:hidden cursor-pointer">
<span :class="!isOpen ? '' : 'hidden'"><i id="ivxh7" class="fas fa-bars">
</i></span>
<span :class="isOpen ? '' : 'hidden'"><i id="i34ma" class="fas fa-times">
</i></span>
</div>
</div>
<div :class="isOpen ? '' : 'hidden'" class="flex-grow lg:flex justify-end flex-col lg:flex-row pt-4 lg:pt-0">
<a id="i4com" href="#" class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0">Home</a>
<a id="idack" href="#about" class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0">About</a>
<a id="iu2lk" href="#features" class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0">Features</a>
<a id="il7gv" href="#screenshots" class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0">Screenshots</a>
<a id="iykok" href="#download" class="bg-gray-800 text-white rounded-lg px-6 flex items-center justify-center mx-4 mb- 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" 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 lg:rounded-3xl bg-blue-500">
</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://assets.senangwebs.com/websites/76da0eba-93cd-4c8c-9ad1-74861fabca02/images/6HSET9Jeen558k7Wofbnfa6aUv8DoJTs4zPPKMhy.png" class="w-full rounded-lg"/>
</div>
</div>
</section>
<section id="about" class="h-24">
</section>
<section id="islbl" class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div id="i1g8b4" class="grid grid-cols-1 lg:mx-24 mb-8 lg:mb-16">
<div id="ifhpfw" class="col-span-1">
<div id="io3zh" class="rounded-md px-2 max-w-max font-bold mb-2 lg:mb-4 bg-blue-500 text-white">Meet QHeat
</div>
</div>
<div id="ii2jm">
<h1 id="iyj0h" class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4 text-blue-500">Your New Best Friend
<br/>
</h1>
</div>
<div id="ia8bfp" class="flex items-center">
<p id="i7p89" class="text-base lg:text-2xl w-full text-left font-medium">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 lg:grid-cols-2 gap-4">
<div id="istii" class="flex items-center">
<img id="i5f9sn" src="https://assets.senangwebs.com/websites/76da0eba-93cd-4c8c-9ad1-74861fabca02/images/h3Mdi2ocnZe7z7J0xBWITOTiIcXpOi9BeYNPY1Ng.png" class="mx-auto max-w-md w-full"/>
</div>
<div id="iowf7j">
<div id="ilv2h" class="grid gap-4">
<div id="izo6k" class="rounded-3xl p-4 flex flex-col border-2 border-blue-500 lg:mr-8">
<div id="i0lmy" class="border-2 border-blue-500 text-blue-500 rounded-full mb-4 flex items-center justify-center text-2xl h-16 w-16">
<i id="ikqdo5" class="far fa-file-image">
</i>
</div>
<h4 id="iadh3" class="mb-2 font-semibold text-lg">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="border-2 border-blue-500 rounded-3xl p-4 flex flex-col lg:ml-8">
<div id="i83zyh" class="border-2 border-blue-500 text-blue-500 rounded-full mb-4 flex items-center justify-center text-2xl h-16 w-16">
<i id="i04wah" class="fas fa-random">
</i>
</div>
<h4 id="itajj" class="mb-2 font-semibold text-lg">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="border-2 border-blue-500 rounded-3xl p-4 flex flex-col lg:mr-8">
<div id="ixb8lc" class="border-2 border-blue-500 text-blue-500 rounded-full mb-4 flex items-center justify-center text-2xl h-16 w-16">
<i id="i2sowp" class="fas fa-cube">
</i>
</div>
<h4 id="i71hl" class="mb-2 font-semibold text-lg">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="features" class="h-24">
</section>
<section id="ioqulp" class="text-white bg-gradient-to-r from-blue-400 to-blue-500">
<div id="i3vb5c" class="container py-24 mx-auto px-6 lg:px-16">
<div id="igco75" class="grid grid-cols-1 lg:grid-cols-2 mb-8 lg:mb-16 lg:mx-24">
<div id="idha7q" class="lg:col-span-2">
<div id="inim5x-2" class="rounded-md px-2 max-w-max font-bold mb-2 lg:mb-4 bg-white text-blue-500">World Class
</div>
</div>
<div id="ig0kv8">
<h1 id="i38ymj" class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-0">Practical Features
<br/>
</h1>
</div>
<div id="ig68er" class="flex items-center">
<p id="ingt2r" class="text-base lg:text-2xl w-full text-left lg:text-right text-black">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="lg:text-right h-full grid lg:grid-rows-2 gap-6 order-2 lg:order-1 pb-6 lg:pb-0 lg:pt-32">
<div id="iptdcu" class="flex">
<div id="in6p38" class="lg:order-2 w-16 h-16 rounded-full bg-prime aspect-square flex items-center justify-center text-3xl shadow bg-white text-blue-500">
<i id="i6gw6s" class="far fa-file-image">
</i>
</div>
<div id="ityz4p" class="lg:order-1 px-6">
<h1 id="imlp9h" class="text-2xl font-bold">
</h1>
<h1 id="in84sc-2" draggable="false" class="text-2xl font-bold gjs-selected">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="lg:order-2 w-16 h-16 rounded-full bg-prime aspect-square flex items-center justify-center text-3xl shadow bg-white text-blue-500">
<i class="fas fa-desktop">
</i>
</div>
<div id="irqwpl" class="lg:order-1 px-6">
<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 lg:order-2 px-12 mb-12 lg:mb-0">
<div class="w-full relative overflow-hidden">
<img id="icjs4g" src="https://assets.senangwebs.com/websites/76da0eba-93cd-4c8c-9ad1-74861fabca02/images/Pbkon2BnKKuEuCp9DBTCmrsul57OawYflahKUcdm.png" class="w-full"/>
</div>
</div>
<div id="ibhbu3" class="h-full grid lg:grid-rows-2 order-3 gap-6 lg:order-3 lg:pt-32">
<div class="flex">
<div id="idnyvy" class="w-16 h-16 rounded-full bg-prime aspect-square flex items-center justify-center text-3xl shadow text-blue-500 bg-white">
<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="w-16 h-16 rounded-full bg-prime aspect-square flex items-center justify-center text-3xl shadow text-blue-500 bg-white">
<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 id="screenshots" class="h-24">
</section>
<section id="ilc2u9" class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div id="isptkh" class="grid grid-cols-1 lg:mx-24 mb-8 lg:mb-16">
<div id="ig5foi" class="col-span-1">
<div id="id5gvp" class="rounded-md px-2 max-w-max font-bold mb-2 lg:mb-4 bg-blue-500 text-white">Sneak Peak
</div>
</div>
<div id="igs3aa">
<h1 id="ipdwmm" class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4 text-blue-500">Screenshots
<br/>
</h1>
</div>
<div id="iuc5n3" class="flex items-center">
<p id="ircdcj" class="text-base lg:text-2xl w-full text-left font-medium">Wondering how it looks? Exactly like this
<br/>
</p>
</div>
</div>
<div id="iohgva" class="grid gap-4 lg:grid-cols-4 grid-cols-2">
<div id="iuexhs">
<img id="irsrwk" src="https://assets.senangwebs.com/websites/76da0eba-93cd-4c8c-9ad1-74861fabca02/images/8ECA3F40AjMQGEcZ3ZCWUcYsNElM1uZXL9v5OapB.png" class="mx-auto"/>
</div>
<div id="it5c9x">
<img id="if5r4c" src="https://assets.senangwebs.com/websites/76da0eba-93cd-4c8c-9ad1-74861fabca02/images/Pbkon2BnKKuEuCp9DBTCmrsul57OawYflahKUcdm.png" class="mx-auto"/>
</div>
<div id="ivpngb">
<img id="i20q0q" src="https://assets.senangwebs.com/websites/76da0eba-93cd-4c8c-9ad1-74861fabca02/images/CMSpWDnUj9us6gEOzgXA0OwzsyGUye1KdCWosZtD.png" class="mx-auto"/>
</div>
<div id="in1acw">
<img id="itccb4" src="https://assets.senangwebs.com/websites/76da0eba-93cd-4c8c-9ad1-74861fabca02/images/0qm71f5s8KlU1G1Q8vylVGtMTkJ60uaD6Jg4U38d.png" class="mx-auto"/>
</div>
</div>
</section>
<section id="download" class="h-24">
</section>
<section id="iq6c9k" class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div id="ikg6bc" class="rounded-3xl 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-blue-400 to-blue-500">
<div id="it9lmw" class="col-span-1 lg:col-span-2 flex flex-col justify-center">
<h1 id="ijfehq" class="text-2xl lg:text-6xl capitalize font-semibold lg:font-bold mb-2">Download QHeat
</h1>
<p id="i9jh58" class="text-base lg:text-2xl w-full lg:mb-8 mb-4 text-black">Don't wait anymore, push the download button now!
</p>
<div id="in87r6" class="flex gap-4 lg:flex-row flex-col">
<a id="ibapy4" href="https://qheat.bookklik.com/web/" type="button" target="_blank" class="text-blue-500 rounded-lg text-lg font-semibold px-6 w-full lg:max-w-max h-12 flex items-center justify-center hover:opacity-80 bg-white">Web App</a>
<a id="ixfgqb" href="https://play.google.com/store/apps/details?id=com.qheat.calculator" 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">Play Store</a>
</div>
</div>
<div id="i4ajll" class="justify-right aspect-square lg:flex hidden">
<img id="ivfr4c" src="https://assets.senangwebs.com/websites/76da0eba-93cd-4c8c-9ad1-74861fabca02/images/8ECA3F40AjMQGEcZ3ZCWUcYsNElM1uZXL9v5OapB.png" class="mx-auto rotate-12 object-contain w-full"/>
</div>
</div>
</section>
<script>var items = document.querySelectorAll('#ixxb');
for (var i = 0, len = items.length; i < len; i++) {
(function(){
console.log("the element",this);
const e=this.getElementsByClassName("mobile_nav_toggle")[0],t=this.getElementsByClassName("mobile_nav_body")[0],l=this.getElementsByClassName("mobile_nav_icon_close")[0],n=this.getElementsByClassName("mobile_nav_icon_open")[0];
e.addEventListener("click",(function(){
t.classList.toggle("hidden"),l.classList.toggle("hidden"),n.classList.toggle("hidden")}
))
}
.bind(items[i]))();
}
</script>
<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/76da0eba-93cd-4c8c-9ad1-74861fabca02/images/xsRBhYzoncYHh0z0uBlMOMCGsxiZU6cMhg1oYy48.png" class="h-12"/>
</div>
<p id="is6v7q" class="text-sm max-w-sm">Trust Me, I am Mechanical Engineer Student Too. To Save Time, Let's Assume I'm Right.
</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="#about" class="text-sm">About</a>
<a id="ihfa6b" href="#features" class="text-sm">Features</a>
<a id="iitp5q" href="#screenshots" class="text-sm">Screenshots</a>
<a id="isam3y" href="#download" class="text-sm">Download</a>
</div>
<div id="i9yylk" class="flex flex-col gap-2">
<h4 id="i670h2" class="font-semibold text-lg">Contact Us
</h4>
<a id="irxqs5" href="https://bookklik.com" target="_blank" class="text-sm">Bookklik Technologies</a>
<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 id="iq4hkl" href="https://www.linkedin.com/company/bookklik-technologies-my/" target="_blank" class="bg-blue-100 rounded-md flex items-center justify-center w-8 h-8 text-blue-600 text-sm mr-2"><i class="fab fa-linkedin">
</i></a>
<a id="ibeffy" href="https://twitter.com/bookklik_my" target="_blank" class="bg-blue-100 rounded-md flex items-center justify-center w-8 h-8 text-blue-600 text-sm mr-2"><i class="fab fa-twitter">
</i></a>
<a id="ia294w" href="https://www.facebook.com/bookklik.malaysia/" target="_blank" class="bg-blue-100 rounded-md flex items-center justify-center w-8 h-8 text-blue-600 text-sm mr-2"><i class="fab fa-facebook">
</i></a>
</div>
<div id="ifk5ub" 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