Awards 1
Benefits 1
Blogs 1
Blogs 2
Bonus 1
CTA 1
CTA 2
CTA 3
CTA 4
Experiences 1
FAQ 1
Features 1
Features 2
Features 3
Footer 1
Footer 2
Hero 1
Hero 2
Hero 3
Hero 4
Navbar 1
Navbar 2
Navbar 3
Offer 1
Offer 2
Partners & Clients
Previews 1
Previews 2
Problems 1
Problems 2
Product 1
Product 2
Products 1
Products 2
Products 3
Quality 1
Services 1
Specialities 1
Steps 1
Steps 2
Story 1
Team 1
Team 2
Testimony 1
Testimony 2
Timeline 1
Video 1
Awards 1
showcaseAwards Showcase 1
Awards
1st Runner Up
UniMaker 2018 Northern Region
1st Runner Up
Inclusive Innovation Challenge 2017
Gold Medal
Invention, Innovation & Design Exposition 2018
Diamond Award
National Student Affair Invention, Innovation & Design
Competition
<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 & 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 & Design
Competition<br></p>
</div>
</div>
</section>
Benefits 1
showcaseBenefits 1
Sections
Compliment Your Designs with Customizable Sections
From hero sections to testimonials, SenangStart has the perfect section for your website.
Hero Sections
Hero sections with background images, text, and buttons
Contents
Sections for displaying content, including text and images
<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-left lg:object-contain lg:object-center" src="https://senangstart.com/img/ss_sections.svg" alt="" />
</div>
<div class="flex flex-col justify-between rounded-xl bg-slate-100 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 -rotate-6 lg:-rotate-12" src="https://senangstart.com/img/ss_section_hero.svg" alt="" />
</div>
</div>
<div class="flex flex-col justify-between rounded-xl bg-slate-100 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 -rotate-6 lg:-rotate-12" src="https://senangstart.com/img/ss_section_content.svg" 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>
Blogs 1
showcaseUp-Coming Webinar
Latest
Thursday, March 28
Navigate the Entrepreneurial Rollercoaster: Shift from Struggle to Success<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://images.unsplash.com/photo-1622547748225-3fc4abd2cca0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80');
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://images.unsplash.com/photo-1622547748225-3fc4abd2cca0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80');
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://images.unsplash.com/photo-1622547748225-3fc4abd2cca0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80');
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>
Blogs 2
showcaseMore Courses
Making Your Ads Work
3 Days
Bootcamp
Making Your Ads Work
3 Days
Bootcamp
Making Your Ads Work
3 Days
Bootcamp
<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://images.unsplash.com/photo-1605478185737-99ae313e940c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'); background-size: cover;">
<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="h-12 flex items-center justify-center bg-white text-blue-600 font-semibold px-8 rounded-lg flex-grow">View Syllabus</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-gray-300 text-center text-xs">
Bootcamp
</p>
</div>
</div>
<div class="bg-gray-200 rounded-lg p-4 flex flex-col" style="background: url('https://images.unsplash.com/photo-1605478185737-99ae313e940c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'); background-size: cover;">
<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="h-12 flex items-center justify-center bg-white text-blue-600 font-semibold px-8 rounded-lg flex-grow">View Syllabus</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-gray-300 text-center text-xs">
Bootcamp
</p>
</div>
</div>
<div class="bg-gray-200 rounded-lg p-4 flex flex-col" style="background: url('https://images.unsplash.com/photo-1605478185737-99ae313e940c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'); background-size: cover;">
<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="h-12 flex items-center justify-center bg-white text-blue-600 font-semibold px-8 rounded-lg flex-grow">View Syllabus</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-gray-300 text-center text-xs">
Bootcamp
</p>
</div>
</div>
</div>
</section>Bonus 1
showcaseNews
Bonus
Our latest updates and what is happening in the organisation
Label
Headline Description
Label
Headline Description
Label
Headline Description
<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://images.pexels.com/photos/1194760/pexels-photo-1194760.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" 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">Label</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://images.pexels.com/photos/1194760/pexels-photo-1194760.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" 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">Label</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://images.pexels.com/photos/1194760/pexels-photo-1194760.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" 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">Label</p>
<p class="text-base font-semibold lg:text-2xl">Headline Description</p>
</div>
</div>
</div>
</section>
CTA 1
ctaReady to Take Your Business to the Next Level?
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.
A.Hakim Noor
Technology Officer
<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>
CTA 2
cta<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>
CTA 3
cta
Start Building with SenangWebs
Drag & drop website builder for effortless online presence. Came with SenangStart templates, sections & components library built-in.
<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://images.unsplash.com/photo-1580927752452-89d86da3fa0a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" loading="lazy" class="h-full w-full scale-150 object-cover opacity-50 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 style="color: rgb(0,255,153, 1)">SenangWebs</span></h1>
<p class="mb-4 w-full text-base lg:mb-8 lg:text-2xl">Drag & drop website builder for effortless online presence. Came with SenangStart templates, sections & 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 px-6 text-lg font-semibold text-black hover:opacity-80 lg:max-w-max" style="background-color: rgb(0,255,153, 1)"> Start Now! </a></div>
</div>
<div class="z-10 flex items-end justify-center">
<img id="ivfr4c" src="https://senangstart.com/img/promo_cta.png" class="w-full scale-125 duration-300 group-hover:-ml-16" />
</div>
</div>
</section>
CTA 4
ctaDownload Our Profile
Want to see if we are a good fit your next App or System project? Download our profile by clicking the button below.
Person Name
Person Position/Note
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div class="rounded-lg bg-gray-200 p-4 lg:px-16 lg:py-12 overflow-hidden relative grid grid-cols-1 lg:grid-cols-3 gap-4"
style="
background-image: url('https://images.unsplash.com/photo-1614851099362-9adf73ccebe9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80');
background-size: cover;
background-position: center;
">
<div class="col-span-1 lg:col-span-2 flex flex-col justify-center">
<h1 class="text-2xl lg:text-6xl capitalize font-semibold lg:font-bold mb-2">
Download Our Profile
</h1>
<p class="text-base lg:text-2xl font-semibold w-full opacity-70 mb-4 lg:mb-8">
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="flex mb-4 lg:mb-8">
<div class="h-12 w-12 rounded-full bg-gray-200 relative overflow-hidden mr-4">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
class="w-12 absolute top-0 left-0" />
</div>
<div class="flex justify-center flex-col font-semibold">
<p class="text-sm">Person Name</p>
<p class="text-xs">Person Position/Note</p>
</div>
</div>
<a href="#"
class="bg-blue-600 text-white rounded-lg text-center lg:text-lg px-8 lg:max-w-max py-3 flex items-center justify-center font-semibold">Action
Button</a>
</div>
<div class="hidden lg:flex justify-right"></div>
</div>
</section>Experiences 1
showcaseSolution Experiences
Leverage Our Expertise in IT and Software Development
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.
Our Works
Maximize Your Business Potential with Custom Software
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.
Talk To An Expert<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>
FAQ 1
faqFrequently Asked Questions
We're sure you have questions, that's exactly why we've laid out all the answers for you here.
Who is SenangStart for?
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.
What is unique about SenangStart?
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.
What sort of MVPs can be built by SenangStart?
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.
What are the packages available?
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.
<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>Features 1
featureFeatures 1
Meet QHeat
Your New Best
Friend
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.
View Workflow.
Learn to figuring it out by staring at the automatically generated
workflow.
Shuffle Equation.
Alter the equation to find the solution you need most.
Preset Parameters.
Make life easier, just pick from numbers of preset value of
conductivity.
<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>
Features 2
featureFeatures 2
World
Class
Practical Features
Just more
reasons for you start use it...
View Workflow
Learn to figuring it out by staring at the automatically
generated workflow
Modern Design
Simple and easy to use, even my younger sibling can nailed
it
Preset Parameters
Make life easier, just pick from numbers of preset value of
conductivity
Shuffle Equation
Alter the equation to find the solution you need most
<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>
Features 3
featurePremium Service
Thousands of specialities
Aenean volutpat, sem sit amet ullamcoer gravida, molestie risus enim nulla. Pellentesqu velit faucibus kodale dolor rhoncu. Curabituring laciniam efficitur porttitor. Predefined chuniks.
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<h1 class="lg:text-7xl text-4xl font-bold w-full text-center">
Premium Service
</h1>
<div class="w-full h-4 border-b border-gray-100"></div>
<div class="w-full h-4"></div>
<div class="grid lg:grid-cols-3 gap-4 mb-4">
<div>
<h6 class="text-2xl lg:text-4xl font-bold">
Thousands of specialities
</h6>
</div>
<div class="lg:col-span-2">
<p class="text-xl">
Aenean volutpat, sem sit amet ullamcoer gravida, molestie risus
enim nulla. Pellentesqu velit faucibus kodale dolor rhoncu.
Curabituring laciniam efficitur porttitor. Predefined chuniks.
</p>
</div>
</div>
<div
class="bg-gray-200 rounded-lg relative overflow-hidden"
style="padding-top: 60%"
>
<img
src="https://images.pexels.com/photos/5083490/pexels-photo-5083490.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
class="w-full absolute top-0"
/>
</div>
</section>Hero 1
hero
<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 <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>
Hero 2
hero
Heat Transfer
New Cool Friend
Trust Me, I am Mechanical Engineer Student Too. To Save Time, Let's
Assume I'm Right.
<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-gradient-to-r from-blue-400 to-blue-500 lg:rounded-3xl"></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>Hero 3
heroAnnouncement
Build Your Project, Effortlessly.
We provide end to end solution for business owner to start their business or creating and revamp your digital product.
<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://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');
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>
Hero 4
hero
Hello & Welcome!
A.Hakim Noor
A mechanical engineer by training, software engineer by trade.
<section class="relative container mx-auto mb-16 lg:pt-28">
<div class="grid lg:grid-cols-2 w-full rounded lg:rounded-lg overflow-hidden shadow-neumorphic">
<div class="bg-gray-100 flex items-center relative min-h-screen lg:min-h-min"><img
src="https://assets.senangwebs.com/websites/efc7c6b6-3a22-4ffc-a131-b24f23b63dd2/images/PiNwfZDwL5lpuApjDFCTd6RgwLCekmTLgt0LgHHO.jpg"
class="w-full h-full top-0 left-0 absolute object-cover">
<div class="pt-40 pb-16 lg:py-40 px-6 lg:px-16 z-10">
<div
class="flex flex-col lg:-mr-80 bg-white bg-opacity-50 backdrop-blur-md p-6 rounded-xl items-center lg:items-start">
<img src="https://assets.senangwebs.com/websites/efc7c6b6-3a22-4ffc-a131-b24f23b63dd2/images/zkbIoeelf1HovrdmLImnzFMaHyyutzGsuJbZ84ZB.jpg"
class="w-48 rounded-full mb-4 lg:hidden shadow-lg">
<p class="lg:text-lg font-semibold mb-2 text-left text-gray-800">
Hello & Welcome!
</p>
<h1 class="text-4xl lg:text-7xl font-bold text-left mb-4">
A.Hakim Noor
</h1>
<p class="text-2xl lg:text-4xl mb-6 lg:mb-8 text-left font-semibold">
A mechanical engineer by training, software engineer by trade.
</p>
<div class="w-full flex flex-col lg:flex-row"><a href="#works"
class="bg-emerald-500 text-white rounded-lg text-lg font-semibold px-8 w-full lg:max-w-max h-14 flex items-center justify-center hover:opacity-80">My
Works</a>
<div class="w-full lg:w-4 h-4"></div><a href="#experiences"
class="border-neutral-800 border-2 text-neutral-800 rounded-lg text-lg font-semibold px-8 w-full lg:max-w-max h-14 flex items-center justify-center hover:opacity-80">Experiences</a>
</div>
</div>
</div>
</div>
<div class="bg-gray-200 pt-80 lg:p-0 hidden lg:block relative"><img
src="https://assets.senangwebs.com/websites/efc7c6b6-3a22-4ffc-a131-b24f23b63dd2/images/zkbIoeelf1HovrdmLImnzFMaHyyutzGsuJbZ84ZB.jpg"
class="w-full h-full top-0 left-0 absolute object-cover"></div>
</div>
</section>
Offer 1
showcase
Offer
What we offer
Our latest updates and what is happening in the organisation
Card description. Flexible components.
Card description. Flexible components.
Card description. Flexible components.
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-2 mb-4 lg:mb-8">
<div class="col-span-1 lg:col-span-2">
<div class="border-2 rounded-md border-blue-600 text-blue-600 px-2 max-w-max font-bold mb-2 lg:mb-4">
Offer
</div>
</div>
<div>
<h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-0">
What we offer
</h1>
</div>
<div class="flex items-center">
<p class="text-base lg:text-2xl font-semibold w-full text-left lg:text-right">
Our latest updates and what is happening in the organisation
</p>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div class="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 100%">
<img src="https://images.pexels.com/photos/211856/pexels-photo-211856.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
class="w-full absolute top-0" />
<div class="absolute bottom-0 left-0 w-full p-4">
<p class="text-base lg:text-2xl font-semibold">
Card description. Flexible components.
</p>
</div>
</div>
<div class="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 100%">
<img src="https://images.pexels.com/photos/211856/pexels-photo-211856.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
class="w-full absolute top-0" />
<div class="absolute bottom-0 left-0 w-full p-4">
<p class="text-base lg:text-2xl font-semibold">
Card description. Flexible components.
</p>
</div>
</div>
<div class="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 100%">
<img src="https://images.pexels.com/photos/211856/pexels-photo-211856.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
class="w-full absolute top-0" />
<div class="absolute bottom-0 left-0 w-full p-4">
<p class="text-base lg:text-2xl font-semibold">
Card description. Flexible components.
</p>
</div>
</div>
</div>
</section>Offer 2
showcaseMore Courses
Making Your Ads Work
3 Days
Bootcamp
Making Your Ads Work
3 Days
Bootcamp
Making Your Ads Work
3 Days
Bootcamp
<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">More Courses</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 text-white" style="background: url('https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-size: cover;">
<div class="text-center">
<h4 class="mb-1 text-xl font-semibold">Making Your Ads Work</h4>
<p class="text-sm">3 Days</p>
</div>
<div class="h-80 flex-grow"></div>
<div>
<div class="mb-4 flex gap-2">
<a href="#" type="button" class="flex min-h-12 w-full 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 lg:max-w-max">Buy</a>
</div>
<p class="border-t border-white border-opacity-50 pt-4 text-center text-xs">Bootcamp</p>
</div>
</div>
<div class="flex flex-col rounded-lg bg-gray-200 p-4 text-white" style="background: url('https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-size: cover;">
<div class="text-center">
<h4 class="mb-1 text-xl font-semibold">Making Your Ads Work</h4>
<p class="text-sm">3 Days</p>
</div>
<div class="h-80 flex-grow"></div>
<div>
<div class="mb-4 flex gap-2">
<a href="#" type="button" class="flex min-h-12 w-full 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 lg:max-w-max">Buy</a>
</div>
<p class="border-t border-white border-opacity-50 pt-4 text-center text-xs">Bootcamp</p>
</div>
</div>
<div class="flex flex-col rounded-lg bg-gray-200 p-4 text-white" style="background: url('https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-size: cover;">
<div class="text-center">
<h4 class="mb-1 text-xl font-semibold">Making Your Ads Work</h4>
<p class="text-sm">3 Days</p>
</div>
<div class="h-80 flex-grow"></div>
<div>
<div class="mb-4 flex gap-2">
<a href="#" type="button" class="flex min-h-12 w-full 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 lg:max-w-max">Buy</a>
</div>
<p class="border-t border-white border-opacity-50 pt-4 text-center text-xs">Bootcamp</p>
</div>
</div>
</div>
</section>
Partners & Clients
showcasePartners & Clients
Partners & Clients
<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 & 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>
Previews 1
showcase📖 Learning STEM Topics
Science
Eclipse
An eclipse takes place when one heavenly body such as a moon or planet moves into the shadow of another heavenly body.
Technology
Augmented Reality
Thanks to augmented reality technology, digital object can exist outside of digital world and come to our world.
Engineering
Combustion Engines
Internal combustion engines (ICE) are the most common form of heat engines, as they are used in vehicles, boats, ships, airplanes, and trains.
Mathematics
Dimensions
Dimensions are used to describe the size and shape of an object. For example: length, width, height, etc.
<section id="iia0d1" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<h1 id="izfjzg" class="mb-8 text-center text-3xl font-bold lg:mx-24 lg:mb-16 lg:text-6xl">📖 Learning STEM Topics</h1>
<div id="ik753" class="flex flex-col gap-8 lg:gap-16">
<div id="iovnx" class="flex flex-col lg:mx-24">
<div id="ijtij" class="group grid gap-8 lg:grid-cols-2 lg:gap-16">
<div id="imy13" class="order-2 flex flex-col justify-center gap-4 lg:order-1 lg:gap-8">
<div id="id5gvp" class="max-w-max rounded-md bg-purple-500 px-2 font-bold text-white">Science</div>
<p id="ifzri" class="text-2xl font-bold lg:text-4xl">Eclipse</p>
<p id="izj9o" 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" class="order-1 flex flex-col items-center lg:order-2"><img id="ivuiu-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/Gz7nGvtRohqCgVptXqTz8N9i1T8X4dEb48fJcheH.png" class="w-full object-contain duration-500 ease-in-out group-hover:scale-150" /><img id="i5vjof-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/MV2o3qaNGr5pl8L9x6K4yVm0qr6CAepDQU5utOSW.png" class="w-full max-w-sm object-contain" /></div>
</div>
</div>
<div id="i5m1by" class="flex flex-col lg:mx-24">
<div id="igwmx" class="group grid gap-8 lg:grid-cols-2 lg:gap-16">
<div id="icg42" class="flex flex-col items-center"><img id="ivuiu" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/RIt11TmRdwrY9oScyyfOoMLQPE0qsK3bJalSArEw.png" class="w-full max-w-xs object-contain duration-500 ease-in-out group-hover:scale-150" /><img id="i5vjof" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/mPeaS6MtZKzjN4cH0DGBQmSTGTmRvFxEbgK0r0Ds.png" class="w-full max-w-sm object-contain" /></div>
<div id="isyto" class="flex flex-col justify-center gap-4 lg:gap-8">
<div id="i6ts0k" class="max-w-max rounded-md bg-purple-500 px-2 font-bold text-white">Technology</div>
<p id="it1lq" class="text-2xl font-bold lg:text-4xl">Augmented Reality<br /></p>
<p id="ijwwl" 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" class="flex flex-col lg:mx-24">
<div id="iisyf" class="group grid gap-8 lg:grid-cols-2 lg:gap-16">
<div id="i2dum" class="order-2 flex flex-col justify-center gap-4 lg:order-1 lg:gap-8">
<div id="ifz1jh" class="max-w-max rounded-md bg-purple-500 px-2 font-bold text-white">Engineering</div>
<p id="irxvu" class="text-2xl font-bold lg:text-4xl">Combustion Engines<br /></p>
<p id="ifhap" 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" class="order-1 flex flex-col items-center lg:order-2"><img id="i2eb4c" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/GMgWM2gLzilWy1JiZBxF00QONy06LDbCTzf5ajL7.png" class="w-full max-w-xs object-contain duration-500 ease-in-out group-hover:scale-150" /><img id="i5vjof-2-2" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/PCnLfL17cWWIz6NloH1JT28yaoMJyGpLw4l29fAE.png" class="w-full max-w-sm object-contain" /></div>
</div>
</div>
<div id="i8pst" class="flex flex-col lg:mx-24">
<div id="irelh" class="group grid gap-8 lg:grid-cols-2 lg:gap-16">
<div id="ioniui" class="flex flex-col items-center"><img id="ivuiu-3" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/TWnStGsRrDIPltxPWMDXpz9mTVhU0o1dXnRj58Yb.png" class="-ml-4 w-full max-w-xs object-contain duration-500 ease-in-out group-hover:scale-150" /><img id="i5vjof-3" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/hNzpQIOHsy0CyiZbbeNS7Q1NJAAlvAKNaa7W57RR.png" class="w-full max-w-sm object-contain" /></div>
<div id="izubpc" class="flex flex-col justify-center gap-4 lg:gap-8">
<div id="inx8vi" class="max-w-max rounded-md bg-purple-500 px-2 font-bold text-white">Mathematics</div>
<p id="i6g1v" class="text-2xl font-bold lg:text-4xl">Dimensions<br /></p>
<p id="iqslu" 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>
Previews 2
showcaseSneak Peak
Screenshots
Wondering how it looks? Exactly
like this
<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>
Problems 1
showcase
Problem
Internal Struggle
Our latest updates and what is happening in the organisation
Headline Description
Content can be used to explain the glimpse idea or to catch in
seconds viewer eye.
Headline Description
Content can be used to explain the glimpse idea or to catch in
seconds viewer eye.
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-2 mb-4 lg:mb-8">
<div class="col-span-1 lg:col-span-2">
<div class="border-2 rounded-md border-blue-600 text-blue-600 px-2 max-w-max font-bold mb-2 lg:mb-4">
Problem
</div>
</div>
<div>
<h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-0">
Internal Struggle
</h1>
</div>
<div class="flex items-center">
<p class="text-base lg:text-2xl font-semibold w-full text-left lg:text-right">
Our latest updates and what is happening in the organisation
</p>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div class="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 100%">
<img src="https://images.pexels.com/photos/6791447/pexels-photo-6791447.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
class="w-full absolute top-0" />
<div class="absolute top-0 left-0 w-full p-4 lg:p-8">
<h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">
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="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 100%">
<img src="https://images.pexels.com/photos/6791447/pexels-photo-6791447.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
class="w-full absolute top-0" />
<div class="absolute top-0 left-0 w-full p-4 lg:p-8">
<h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">
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>Problems 2
showcase
Problem
External Struggle
Our latest updates and what is happening in the organisation
Tag
Content can be used to explain the glimpse idea or to catch in
seconds viewer eye.
Tag
Content can be used to explain the glimpse idea or to catch in
seconds viewer eye.
Tag
Content can be used to explain the glimpse idea or to catch in
seconds viewer eye.
Headline Description
Content can be used to explain the glimpse idea or to catch in
seconds viewer eye.
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-2 mb-4 lg:mb-8">
<div class="col-span-1 lg:col-span-2">
<div class="border-2 rounded-md border-blue-600 text-blue-600 px-2 max-w-max font-bold mb-2 lg:mb-4">
Problem
</div>
</div>
<div>
<h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-0">
External Struggle
</h1>
</div>
<div class="flex items-center">
<p class="text-base lg:text-2xl font-semibold w-full text-left lg:text-right">
Our latest updates and what is happening in the organisation
</p>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div class="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 100%">
<img src="https://images.pexels.com/photos/3756877/pexels-photo-3756877.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
class="w-full absolute top-0" />
<div class="absolute top-0 left-0 w-full p-4">
<div class="border-2 rounded-md px-2 border-black max-w-max font-bold mb-2 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="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 100%">
<img src="https://images.pexels.com/photos/3756877/pexels-photo-3756877.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
class="w-full absolute top-0" />
<div class="absolute top-0 left-0 w-full p-4">
<div class="border-2 rounded-md px-2 border-black max-w-max font-bold mb-2 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="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 100%">
<img src="https://images.pexels.com/photos/3756877/pexels-photo-3756877.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
class="w-full absolute top-0" />
<div class="absolute top-0 left-0 w-full p-4">
<div class="border-2 rounded-md px-2 border-black max-w-max font-bold mb-2 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="bg-gray-200 rounded-lg relative overflow-hidden col-span-1 lg:col-span-3" style="padding-top: 60%">
<img src="https://images.pexels.com/photos/5083490/pexels-photo-5083490.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
class="w-full absolute top-0" />
<div class="absolute top-0 left-0 w-full p-4 lg:p-8">
<h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">
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>Product 1
showcaseIntake Now open
Making Your Ads Work
3 Days ( Wednesday, Thursday )clock 10:00AM - 5:00PM
Pricing Structure
Select suitable plan
Package Includes :
- 32 mins on-demand video
- Full lifetime access
- Full lifetime access
- Full lifetime access
- Access on mobile and TV
Total Investment
RM 1,000
Request Qoutation
Course Description
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 millions of other existing apps. Basically, our mind is programmed to get attracted to colors and ambiance it perceives. Therefore, apart from app development, app designing plays a vital role in the fascinating audience by which your app can get better chances to serve its purpose. This course will teach you how to use Adobe XD to design dynamic, development-ready mobile app user interfaces that impress clients and engage users.
What you'll learn
Day 1 - Remarketing
Half Day
Day 2 - Remarketing
Half Day
Day 3 - Remarketing
Half Day
Whats included
- 32 mins on-demand video
- Full lifetime access
- Assignments
- Certificate of completion
- Access on mobile and TV
Special Bonus
Bonus 1 here
Bonus 1 here
Bonus 1 here
Bonus 1 here
Bonus 1 here
Bonus 1 here
Meet Your Trainers
Xien Puo
Co-Founder of DriveFunnels
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 millions of other existing apps. Basically, our mind is programmed to get attracted to colors and ambiance it perceives. Therefore, apart from app development, app designing plays
Xien Puo
Co-Founder of DriveFunnels
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 millions of other existing apps. Basically, our mind is programmed to get attracted to colors and ambiance it perceives. Therefore, apart from app development, app designing plays
Pricing Structure
Select suitable plan
Package Includes :
- 32 mins on-demand video
- Full lifetime access
- Full lifetime access
- Full lifetime access
- Access on mobile and TV
Total Investment
RM 1,000
Request Qoutation
<section class="container relative mx-auto mb-16">
<div class="absolute left-0 top-0 h-full w-full -z-10">
<div
class="h-96 w-full bg-gray-200 lg:rounded-lg"
style="
background-image: url('https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');
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">Intake Now open</div>
<h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Making Your Ads Work</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>clock 10:00AM - 5:00PM</p>
<div class="relative overflow-hidden rounded-lg bg-gray-100" style="padding-top: 60%; background: url('https://images.unsplash.com/photo-1622547748225-3fc4abd2cca0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80'); background-size: cover;">
<iframe src="https://www.youtube.com/embed/0okuAwqTHs0" 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-gray-100 p-4">
<p class="mb-1 font-semibold lg:text-xl">Pricing Structure</p>
<p class="mb-1 text-sm font-semibold">Select suitable plan</p>
<p class="mb-1 font-semibold lg:text-lg">Package Includes :</p>
<ul>
<li class="mb-4"><i class="fas fa-check-circle mr-2"></i>32 mins on-demand video</li>
<li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Full lifetime access</li>
<li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Full lifetime access</li>
<li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Full lifetime access</li>
<li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Access on mobile and TV</li>
</ul>
<div class="flex border-t border-gray-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"> Request Qoutation </a>
</div>
</div>
<div class="h-8 w-full"></div>
<!--Start Description Section-->
<section>
<h1 class="mb-4 text-2xl font-bold">Course Description</h1>
<p class="text-lg">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 millions of other existing apps. Basically, our mind is programmed to get attracted to colors and ambiance it perceives. Therefore, apart from app development, app designing plays a vital role in the fascinating audience by which your app can get better chances to serve its purpose. This course will teach you how to use Adobe XD to design dynamic, development-ready mobile app user interfaces that impress clients and engage users.</p>
</section>
<!--End Description Section-->
<div class="h-8 w-full border-b border-gray-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-gray-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 - Remarketing</p>
</div>
<div class="flex items-center">
<p>Half Day</p>
</div>
</div>
<div class="accordion-body hidden pt-4">
<p class="text-lg">Content can be used to explain the glimpse idea or to catch in seconds viewer eye</p>
<ul>
<li class="mt-4"><i class="fas fa-check-circle mr-2"></i>A deeper understanding into ad buying</li>
<li class="mt-4"><i class="fas fa-check-circle mr-2"></i>The importance of ad buying</li>
<li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Knowing your objective and target audience</li>
</ul>
</div>
</div>
<div class="mt-4 rounded-lg bg-gray-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 - Remarketing</p>
</div>
<div class="flex items-center">
<p>Half Day</p>
</div>
</div>
<div class="accordion-body hidden pt-4">
<p class="text-lg">Content can be used to explain the glimpse idea or to catch in seconds viewer eye</p>
<ul>
<li class="mt-4"><i class="fas fa-check-circle mr-2"></i>A deeper understanding into ad buying</li>
<li class="mt-4"><i class="fas fa-check-circle mr-2"></i>The importance of ad buying</li>
<li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Knowing your objective and target audience</li>
</ul>
</div>
</div>
<div class="mt-4 rounded-lg bg-gray-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 - Remarketing</p>
</div>
<div class="flex items-center">
<p>Half Day</p>
</div>
</div>
<div class="accordion-body hidden pt-4">
<p class="text-lg">Content can be used to explain the glimpse idea or to catch in seconds viewer eye</p>
<ul>
<li class="mt-4"><i class="fas fa-check-circle mr-2"></i>A deeper understanding into ad buying</li>
<li class="mt-4"><i class="fas fa-check-circle mr-2"></i>The importance of ad buying</li>
<li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Knowing your objective and target audience</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-gray-200"></div>
<div class="h-8 w-full"></div>
<!--Start Included Section-->
<section>
<h1 class="text-2xl font-bold">Whats 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 on-demand video</li>
<li><i class="fas fa-check-circle mr-2"></i>Full lifetime access</li>
<li><i class="fas fa-check-circle mr-2"></i>Assignments</li>
<li><i class="fas fa-check-circle mr-2"></i>Certificate of completion</li>
<li><i class="fas fa-check-circle mr-2"></i>Access on mobile and TV</li>
</ol>
</section>
<!--End Included Section-->
<div class="h-8 w-full border-b border-gray-200"></div>
<div class="h-8 w-full"></div>
<!--Start Bonus Section-->
<section>
<h1 class="text-2xl font-bold">Special Bonus</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-gray-100" style="padding-top: 120%; background: url('https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80'); background-size: cover;">
<div class="absolute top-0 w-full px-3 py-2">
<p>Bonus 1 here</p>
</div>
</div>
<div class="relative rounded-lg bg-gray-100" style="padding-top: 120%; background: url('https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80'); background-size: cover;">
<div class="absolute top-0 w-full px-3 py-2">
<p>Bonus 1 here</p>
</div>
</div>
<div class="relative rounded-lg bg-gray-100" style="padding-top: 120%; background: url('https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80'); background-size: cover;">
<div class="absolute top-0 w-full px-3 py-2">
<p>Bonus 1 here</p>
</div>
</div>
<div class="relative rounded-lg bg-gray-100" style="padding-top: 120%; background: url('https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80'); background-size: cover;">
<div class="absolute top-0 w-full px-3 py-2">
<p>Bonus 1 here</p>
</div>
</div>
<div class="relative rounded-lg bg-gray-100" style="padding-top: 120%; background: url('https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80'); background-size: cover;">
<div class="absolute top-0 w-full px-3 py-2">
<p>Bonus 1 here</p>
</div>
</div>
<div class="relative rounded-lg bg-gray-100" style="padding-top: 120%; background: url('https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80'); background-size: cover;">
<div class="absolute top-0 w-full px-3 py-2">
<p>Bonus 1 here</p>
</div>
</div>
</div>
</section>
<!--End Bonus Section-->
<div class="h-8 w-full border-b border-gray-200"></div>
<div class="h-8 w-full"></div>
<!--Start Trainer Section-->
<section>
<h1 class="text-2xl font-bold">Meet Your Trainers</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-gray-100" style="padding-top: 120%; background: url('https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'); background-size: cover;"></div>
<div class="md:hidden"></div>
<div class="col-span-2 lg:col-span-3">
<p clas="text-lg font-semibold ">Xien Puo</p>
<p class="my-1 text-xs">Co-Founder of DriveFunnels</p>
<p>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 millions of other existing apps. Basically, our mind is programmed to get attracted to colors and ambiance it perceives. Therefore, apart from app development, app designing plays</p>
</div>
</div>
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
<div class="rounded-lg bg-gray-100" style="padding-top: 120%; background: url('https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'); background-size: cover;"></div>
<div class="md:hidden"></div>
<div class="col-span-2 lg:col-span-3">
<p clas="text-lg font-semibold ">Xien Puo</p>
<p class="my-1 text-xs">Co-Founder of DriveFunnels</p>
<p>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 millions of other existing apps. Basically, our mind is programmed to get attracted to colors and ambiance it perceives. Therefore, apart from app development, app designing plays</p>
</div>
</div>
</div>
</section>
<!--End Trainer Section-->
</div>
<div class="hidden lg:block">
<div class="sticky top-28 rounded-lg bg-gray-100 p-4">
<p class="mb-1 font-semibold lg:text-xl">Pricing Structure</p>
<p class="mb-1 text-sm font-semibold">Select suitable plan</p>
<p class="mb-1 font-semibold lg:text-lg">Package Includes :</p>
<ul>
<li class="mb-4"><i class="fas fa-check-circle mr-2"></i>32 mins on-demand video</li>
<li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Full lifetime access</li>
<li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Full lifetime access</li>
<li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Full lifetime access</li>
<li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Access on mobile and TV</li>
</ul>
<div class="flex border-t border-gray-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"> Request Qoutation </a>
</div>
</div>
</div>
</div>
</section>
Product 2
showcaseWebinar
Pillars of Product Design
3 Days ( Wednesday, Thursday )clock 10:00AM - 5:00PM
From RM 437
394/400 attending
Join a video call
Link will provided via email when you already register your slot
Guest
Adult
1
RM 874.00 x 1 adult
RM 874
20 % off early bird discount
- RM 200
Total
RM 674
Course Description
Based on the Pillars of Digital Product Design
(https://slack.design/articles/pillars-of-digital-product-design/),
Sr. Director of Product Design Kyle Turman will talk to us
about some of the core skill pillars that a digital product
designers usually possess and develop in order to design and
ship successful digital products at scale.
In Partnership with Slack
Slack Design is a crew of designers who are resilient,
diverse, considerate, growing, and fun!! We aim to make
people's work lives more simple, pleasant, and productive
through thoughtful design. And we're passionate about giving
back to the broader design community through collaboration and
knowledge sharing.
Meet Your Speakers
Kyle Turman
Sr. Director of Product Design at Slack
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 millions of other existing apps. Basically, our mind is programmed to get attracted to colors and ambiance it perceives. Therefore, apart from app development, app designing plays
Organize By
Kyle Turman
Sr. Director of Product Design at Slack
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 millions of other existing apps. Basically, our mind is programmed to get attracted to colors and ambiance it perceives. Therefore, apart from app development, app designing plays
Hosted by FixColab Group Sdn Bhd
Published December 2, 2021
From RM 437
394/400 attending
Join a video call
Link will provided via email when you already register your slot
Guest
Adult
1
RM 874.00 x 1 adult
RM 874
20 % off early bird discount
- RM 200
Total
RM 674
<section class="relative container mx-auto mb-16">
<div class="pt-36 lg:pt-16 px-6 lg:px-16">
<div class="w-full mx-auto grid lg:grid-cols-3 gap-4">
<div class="lg:col-span-3">
<div class="text-sm mb-2">Webinar</div>
<h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">
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>clock 10:00AM - 5:00PM
</p>
</div>
<div class="lg:col-span-2">
<!--Start Hero Section-->
<section>
<div class="bg-gray-100 rounded-lg relative overflow-hidden"
style="
padding-top: 60%;
background: url('https://images.unsplash.com/photo-1622547748225-3fc4abd2cca0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80');
background-size: cover;
">
<iframe src="https://www.youtube.com/embed/0okuAwqTHs0" 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>
</section>
<!--End Hero Section-->
<div class="w-full h-4"></div>
<div class="border-gray-200 border rounded-lg p-4 mb-4 lg:hidden">
<div class="flex">
<div class="w-12 h-12 rounded-md bg-gray-200"></div>
<div class="w-3 h-full"></div>
<div>
<h1 class="text-2xl font-bold leading-7 ">
From RM 437
</h1>
<p class="text-sm leading-5">
<i class="fas fa-users text-gray-400 mr-2"></i>394/400 attending
</p>
</div>
</div>
<div class="w-full h-4"></div>
<div class="w-full h-4 border-t border-gray-200"></div>
<div class="flex">
<div>
<i class="fas fa-laptop"></i>
</div>
<div class="w-3">
</div>
<div class="flex flex-col flex-grow">
<p class="font-semibold">
Join a video call
</p>
<p class="text-sm">
Link will provided via email when you already register your slot
</p>
</div>
</div>
<div class="w-full h-4"></div>
<div class="w-full h-4 border-t border-gray-200"></div>
<div>
<h1 class="text-xl font-semibold mb-2">
Guest
</h1>
<div class="h-12 border border-gray-200 p-2 flex items-center rounded-lg">
<p class="flex-grow">
Adult
</p>
<div class="flex">
<div class="w-8 h-8 bg-gray-100 flex items-center justify-center rounded-md">
<i class="fas fa-minus"></i>
</div>
<div class="w-12 h-8 flex items-center justify-center">
<p>
1
</p>
</div>
<div class="w-8 h-8 bg-gray-100 flex items-center justify-center rounded-md">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
</div>
<div class="w-full h-4"></div>
<div class="w-full h-4 border-t border-gray-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 % off early bird discount
</p>
<p class="text-green-400">
- RM 200
</p>
</div>
</div>
<div class="w-full h-4"></div>
<div class="w-full h-4 border-t border-gray-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="w-full h-4"></div>
<a href=""
class="bg-gray-800 text-white text-lg rounded-lg px-6 w-full h-14 flex items-center font-semibold justify-center hover:opacity-80">
Buy Ticket
</a>
<div class="w-full h-2"></div>
<a href=""
class="text-lg rounded-lg px-6 w-full h-14 flex items-center justify-center font-semibold hover:bg-gray-100">
Need Help<i class="fas fa-headset ml-4"></i>
</a>
</div>
<!--Start Description Section-->
<section>
<h1 class="mb-4 font-bold text-2xl">Course Description</h1>
<p class="text-lg">
Based on the Pillars of Digital Product Design
(https://slack.design/articles/pillars-of-digital-product-design/),
Sr. Director of Product Design Kyle Turman will talk to us
about some of the core skill pillars that a digital product
designers usually possess and develop in order to design and
ship successful digital products at scale.
<br><br>
In Partnership with Slack
<br><br>
Slack Design is a crew of designers who are resilient,
diverse, considerate, growing, and fun!! We aim to make
people's work lives more simple, pleasant, and productive
through thoughtful design. And we're passionate about giving
back to the broader design community through collaboration and
knowledge sharing.
</p>
</section>
<!--End Description Section-->
<div class="w-full border-b border-gray-200 h-8"></div>
<div class="w-full h-8"></div>
<!--Start Speaker Section-->
<section>
<h1 class="font-bold text-2xl leading-7">Meet Your Speakers</h1>
<div class="grid gap-4 grid-cols-1 mt-4">
<div class="grid lg:grid-cols-4 md:grid-cols-3 grid-cols-2 gap-4">
<div class="rounded-lg bg-gray-100"
style="
padding-top: 120%;
background: url('https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80');
background-size: cover;
">
</div>
<div class="md:hidden"></div>
<div class="lg:col-span-3 col-span-2">
<p clas="text-lg font-semibold ">Kyle Turman</p>
<p class="text-xs my-1">Sr. Director of Product Design at Slack</p>
<p>
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
millions of other existing apps. Basically, our mind is
programmed to get attracted to colors and ambiance it
perceives. Therefore, apart from app development, app
designing plays
</p>
</div>
</div>
</div>
</section>
<!--End Speaker Section-->
<div class="w-full border-b border-gray-200 h-8"></div>
<div class="w-full h-8"></div>
<!--Start Organizer Section-->
<section>
<h1 class="font-bold text-2xl leading-7">Organize By</h1>
<div class="grid gap-4 grid-cols-1 mt-4">
<div class="grid lg:grid-cols-4 md:grid-cols-3 grid-cols-2 gap-4">
<div class="rounded-lg bg-gray-100"
style="
padding-top: 120%;
background: url('https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80');
background-size: cover;
">
</div>
<div class="md:hidden"></div>
<div class="lg:col-span-3 col-span-2">
<p clas="text-lg font-semibold ">Kyle Turman</p>
<p class="text-xs my-1">Sr. Director of Product Design at Slack</p>
<p>
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
millions of other existing apps. Basically, our mind is
programmed to get attracted to colors and ambiance it
perceives. Therefore, apart from app development, app
designing plays
</p>
</div>
</div>
</div>
</section>
<!--End Organizer Section-->
<section class="hidden lg:block">
<div class="w-full h-8"></div>
<div class="h-14 border-t border-b border-gray-100 flex items-center">
<div class="w-8 h-8 rounded-full bg-gray-100"></div>
<div class="flex-grow flex 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="bg-gray-100 rounded-lg h-8 flex items-center 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="border-gray-200 border rounded-lg p-4 sticky top-36">
<div class="flex">
<div class="w-12 h-12 rounded-md bg-gray-200"></div>
<div class="w-3 h-full"></div>
<div>
<h1 class="text-2xl font-bold leading-7 ">
From RM 437
</h1>
<p class="text-sm leading-5">
<i class="fas fa-users text-gray-400 mr-2"></i>394/400 attending
</p>
</div>
</div>
<div class="w-full h-4"></div>
<div class="w-full h-4 border-t border-gray-200"></div>
<div class="flex">
<div>
<i class="fas fa-laptop"></i>
</div>
<div class="w-3">
</div>
<div class="flex flex-col flex-grow">
<p class="font-semibold">
Join a video call
</p>
<p class="text-sm">
Link will provided via email when you already register your slot
</p>
</div>
</div>
<div class="w-full h-4"></div>
<div class="w-full h-4 border-t border-gray-200"></div>
<div>
<h1 class="text-xl font-semibold mb-2">
Guest
</h1>
<div class="h-12 border border-gray-200 p-2 flex items-center rounded-lg">
<p class="flex-grow">
Adult
</p>
<div class="flex">
<div class="w-8 h-8 bg-gray-100 flex items-center justify-center rounded-md">
<i class="fas fa-minus"></i>
</div>
<div class="w-12 h-8 flex items-center justify-center">
<p>
1
</p>
</div>
<div class="w-8 h-8 bg-gray-100 flex items-center justify-center rounded-md">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
</div>
<div class="w-full h-4"></div>
<div class="w-full h-4 border-t border-gray-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 % off early bird discount
</p>
<p class="text-green-400">
- RM 200
</p>
</div>
</div>
<div class="w-full h-4"></div>
<div class="w-full h-4 border-t border-gray-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="w-full h-4"></div>
<a href=""
class="bg-gray-800 text-white text-lg rounded-lg px-6 w-full h-14 flex items-center font-semibold justify-center hover:opacity-80">
Buy Ticket
</a>
<div class="w-full h-2"></div>
<a href=""
class="text-lg rounded-lg px-6 w-full h-14 flex items-center justify-center font-semibold hover:bg-gray-100">
Need Help<i class="fas fa-headset ml-4"></i>
</a>
</div>
</div>
</div>
</div>
</section>Products 1
showcaseProducts Showcase
Our Previous Work - Proof of Our Expertise
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.
Kad Kahwin Digital
Revolusi Kad Kahwin - E-card wedding
invitation revolution with
Chat AI feature
SenangWebs
Effortless Web Design, Your Way! Drag
and drop static page
website builder
QHeat
Advanced heat transfer calculator with
preset parameter & built in workflow generator
STEM-AR
Dive into the fascinating world of
STEM (Science, Technology, Engineering & Mathematic) through the lens of Augmented
Reality
<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 & 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 & 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>
Products 2
showcaseProducts 2
Templates
Explore Versatility with Ready-to-Use Templates
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.
Agency Business
Agency Business
Personal Website
For personal branding, portfolio, and resume
Education App
Education App
<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://senangstart.com/img/ss_template_agency.jpg" 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://senangstart.com/img/ss_template_personal.jpg" 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://senangstart.com/img/ss_template_education.jpg" 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>
Products 3
showcase
Subsidaries Company
Product that we proud of
Here’s what we have to complete our ecosystem
SenangStart
A website rebranding + Corporate photography to bring you the best
Product Price
Learn more
Product Name
Content can be used to explain the glimpse idea or to catch in seconds viewer eye
Product Price
Learn more<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 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">
Subsidaries Company
</div>
</div>
<div>
<h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">
Product that we proud of
</h1>
</div>
<div class="flex items-center">
<p class="text-base lg:text-2xl font-semibold w-full text-left">
Here’s what we have to complete our ecosystem
</p>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div class="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 100%">
<img src="https://images.unsplash.com/photo-1535043205849-513fe27db33e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"
class="w-full absolute top-0" />
<div class="absolute bottom-0 left-0 w-full p-4 lg:p-8">
<h1 class="text-2xl lg:text-5xl font-bold mb-2">SenangStart</h1>
<p class="lg:text-lg mb-2">
A website rebranding + Corporate photography to bring you the
best
</p>
<p class="text-sm lg:text-base mb-4">Product Price</p>
<a href=""
class="bg-blue-600 text-white text-sm lg:text-base rounded-lg px-4 lg:px-6 max-w-max h-8 lg:h-12 flex items-center justify-center">
Learn more
</a>
</div>
</div>
<div class="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 100%">
<img src="https://images.unsplash.com/photo-1535043498887-a5a9fb4dd782?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"
class="w-full absolute top-0" />
<div class="absolute bottom-0 left-0 w-full p-4 lg:p-8">
<h1 class="text-2xl lg:text-5xl font-bold mb-2">Product Name</h1>
<p class="lg:text-lg mb-2">
Content can be used to explain the glimpse idea or to catch in
seconds viewer eye
</p>
<p class="text-sm lg:text-base mb-4">Product Price</p>
<a href=""
class="bg-blue-600 text-white text-sm lg:text-base rounded-lg px-4 lg:px-6 max-w-max h-8 lg:h-12 flex items-center justify-center">
Learn more
</a>
</div>
</div>
</div>
</section>Quality 1
showcaseCare of High Quality
Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet pellentesque aliquam enim.
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div class="grid lg:grid-cols-3 gap-4">
<div class="order-2 lg:order-1">
<h5 class="text-3xl lg:text-5xl font-bold mb-4">
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="bg-gray-100 rounded-lg"
style="
padding-top: calc(150% + 1rem);
background-image: url('https://images.unsplash.com/photo-1639759032617-8c3a13ad667a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80');
background-size: cover;
background-position: center;
">
</div>
</div>
<div class="order-3">
<div class="grid gap-4 grid-cols-1">
<div class="bg-gray-100 rounded-lg"
style="
padding-top: 90%;
background-image: url('https://images.unsplash.com/photo-1639759032617-8c3a13ad667a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80');
background-size: cover;
background-position: center;
">
</div>
<div class="bg-gray-100 rounded-lg"
style="
padding-top: 60%;
background-image: url('https://images.unsplash.com/photo-1639759032617-8c3a13ad667a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80');
background-size: cover;
background-position: center;
">
</div>
</div>
</div>
</div>
</section>Services 1
showcaseShowcase your service solutions
Software Solutions Tailored for Your Business
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.
Virtual Reality (VR)
We provide immersive 3D visualization to wow your audience and make
a lasting mark for your brands.
Augmented Reality (AR)
We offer unique Augmented Reality solution for myriad applications,
including tourism, education, exhibition, and many more.
Website & Web System
Our team use pixels and codes to create beautiful things. We design
and develop award-winning portals & websites using the latest
technologies.
Mobile App Development
Our app developers build native and hybrid mobile applications on
IOS, Android, and Windows, for a variety of mobile devices and
tablets.
Graphic Design
We help you find the right pixels combination for your brands or
products.
Training
We provide training in web and mobile application development for
beginners who are eager to learn.
<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 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 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 & 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 & 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>Specialities 1
showcaseSpecialities available at Clinika
Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet pellentesque aliquam enim.
Title Content
Content can be used to explain the glimpse idea or to catch in seconds viewer eye
Title Content
Content can be used to explain the glimpse idea or to catch in seconds viewer eye
Title Content
Content can be used to explain the glimpse idea or to catch in seconds viewer eye
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div class="w-full h-4"></div>
<div class="grid lg:grid-cols-2 gap-4 mb-8">
<div>
<h5 class="text-3xl lg:text-5xl font-bold">
Specialities available at Clinika
</h5>
</div>
<div class="flex items-center">
<p class="text-base lg:text-lg">
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>
<div class="grid lg:grid-cols-3 gap-4">
<div class="border border-gray-200 rounded-lg p-4 flex flex-col">
<div class="bg-gray-200 w-12 h-12 rounded mb-8"></div>
<h4 class="mb-2 font-semibold text-lg">Title Content</h4>
<p class="text-lg">
Content can be used to explain the glimpse idea or to catch in
seconds viewer eye
</p>
</div>
<div class="border border-gray-200 rounded-lg p-4 flex flex-col">
<div class="bg-gray-200 w-12 h-12 rounded mb-8"></div>
<h4 class="mb-2 font-semibold text-lg">Title Content</h4>
<p class="text-lg">
Content can be used to explain the glimpse idea or to catch in
seconds viewer eye
</p>
</div>
<div class="border border-gray-200 rounded-lg p-4 flex flex-col">
<div class="bg-gray-200 w-12 h-12 rounded mb-8"></div>
<h4 class="mb-2 font-semibold text-lg">Title Content</h4>
<p class="text-lg">
Content can be used to explain the glimpse idea or to catch in
seconds viewer eye
</p>
</div>
</div>
</section>Steps 1
general
Offer
What we offer
Our latest updates and what is happening in the organisation
Step 1
Card description. Flexible components customizable in a few clicks.
Step 1
Card description. Flexible components customizable in a few clicks.
Step 1
Card description. Flexible components customizable in a few clicks.
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-2 mb-4 lg:mb-8">
<div class="col-span-1 lg:col-span-2">
<div
class="border-2 rounded-md border-blue-600 text-blue-600 px-2 max-w-max font-bold mb-2 lg:mb-4"
>
Offer
</div>
</div>
<div>
<h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-0">
What we offer
</h1>
</div>
<div class="flex items-center">
<p
class="text-base lg:text-2xl font-semibold w-full text-left lg:text-right"
>
Our latest updates and what is happening in the organisation
</p>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div
class="bg-gray-200 rounded-lg relative overflow-hidden"
style="padding-top: 100%"
>
<img
src="https://images.pexels.com/photos/4680163/pexels-photo-4680163.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
class="w-full absolute top-0"
/>
<div class="absolute top-0 left-0 w-full p-4">
<p class="font-bold mb-2 opacity-50">Step 1</p>
<p class="text-base lg:text-2xl font-semibold">
Card description. Flexible components customizable in a few
clicks.
</p>
</div>
</div>
<div
class="bg-gray-200 rounded-lg relative overflow-hidden"
style="padding-top: 100%"
>
<img
src="https://images.pexels.com/photos/4680163/pexels-photo-4680163.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
class="w-full absolute top-0"
/>
<div class="absolute top-0 left-0 w-full p-4">
<p class="font-bold mb-2 opacity-50">Step 1</p>
<p class="text-base lg:text-2xl font-semibold">
Card description. Flexible components customizable in a few
clicks.
</p>
</div>
</div>
<div
class="bg-gray-200 rounded-lg relative overflow-hidden"
style="padding-top: 100%"
>
<img
src="https://images.pexels.com/photos/4680163/pexels-photo-4680163.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
class="w-full absolute top-0"
/>
<div class="absolute top-0 left-0 w-full p-4">
<p class="font-bold mb-2 opacity-50">Step 1</p>
<p class="text-base lg:text-2xl font-semibold">
Card description. Flexible components customizable in a few
clicks.
</p>
</div>
</div>
</div>
</section>Steps 2
general📱 How To Get Started
3 simple steps to start playing STEM-AR now.
Print the Marker
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.
Start the App
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.
Ready
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.
<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">
<div id="istii" class="flex items-center"><img id="i5f9sn" src="https://assets.senangwebs.com/websites/cdd6df3d-580d-4c4a-b542-d398f56551b3/images/eg1EDUQAcTOFDraFZqP03RDcMlmtDE7oiFm1UHYQ.png" 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-purple-500 bg-purple-100 p-4">
<div id="i0lmy" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-purple-500 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-purple-500 bg-purple-100 p-4">
<div id="i83zyh" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-purple-500 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-purple-500 bg-white px-6 text-lg font-semibold text-purple-500 hover:opacity-80 lg:max-w-max">▶️ Start Now!</a>
</div>
<div id="izcj4i" class="flex flex-col rounded-2xl border-2 border-purple-500 bg-purple-100 p-4">
<div id="ixb8lc" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-purple-500 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>
Story 1
generalOur Story
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.
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.
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!
Mission
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.
Philosophy
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.
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div class="p-0 lg:px-24 mb-4 lg:mb-16">
<h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-6 hidden lg:block">
Our Story
</h1>
<div class="lg:text-3xl mb-2 lg:mb-4">
<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="rounded-lg bg-gray-200 grid grid-cols-1 lg:grid-cols-2 p-4 lg:px-16 lg:py-8"
style="
background-image: url('https://images.unsplash.com/photo-1643453157630-dadc7e4e33f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');
background-size: cover;
background-position: center;
">
<div style="padding-top: 100%" class="relative lg:col-start-2">
<div class="absolute top-0 left-0 w-full h-full flex lg:justify-center flex-col">
<div
class="border-2 rounded-md border-blue-600 text-blue-600 px-2 max-w-max font-bold mb-2 lg:mb-4">
Mission
</div>
<p class="text-xl lg:text-2xl font-semibold">
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="rounded-lg bg-gray-200 grid grid-cols-1 lg:grid-cols-2 p-4 lg:px-16 lg:py-8"
style="
background-image: url('https://images.unsplash.com/photo-1643453157624-d5c83c5e5f3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80');
background-size: cover;
background-position: center;
">
<div style="padding-top: 100%" class="relative lg:col-start-1">
<div class="absolute top-0 left-0 w-full h-full flex lg:justify-center flex-col">
<div
class="border-2 rounded-md border-blue-600 text-blue-600 px-2 max-w-max font-bold mb-2 lg:mb-4">
Philosophy
</div>
<p class="text-xl lg:text-2xl font-semibold">
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>Team 1
showcase
Our Leadership
We’re a tight-knit team with a singular focus
Here’s what we stand for
<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 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">
Our Leadership
</div>
</div>
<div>
<h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">
We’re a tight-knit team with a singular focus
</h1>
</div>
<div class="flex items-center">
<p class="text-base lg:text-2xl font-semibold w-full text-left">
Here’s what we stand for
</p>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 mb-4 lg:mb-8 gap-4">
<div class="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 140%">
<img src="https://images.unsplash.com/photo-1539694265588-f101b5569bd2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
class="w-full absolute top-0" />
<div class="absolute bottom-0 left-0 w-full p-4 flex 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">Name</p>
<p class="text-base">Title</p>
</div>
<div class="flex text-4xl items-center">
<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="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 140%">
<img src="https://images.unsplash.com/photo-1539694265588-f101b5569bd2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
class="w-full absolute top-0" />
<div class="absolute bottom-0 left-0 w-full p-4 flex 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">Name</p>
<p class="text-base">Title</p>
</div>
<div class="flex text-4xl items-center">
<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="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 140%">
<img src="https://images.unsplash.com/photo-1539694265588-f101b5569bd2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
class="w-full absolute top-0" />
<div class="absolute bottom-0 left-0 w-full p-4 flex 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">Name</p>
<p class="text-base">Title</p>
</div>
<div class="flex text-4xl items-center">
<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>Team 2
showcase<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="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 140%">
<img src="https://images.unsplash.com/photo-1539694265588-f101b5569bd2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
class="w-full absolute top-0" />
<div class="absolute bottom-0 left-0 w-full p-4 flex 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">Name</p>
<p class="text-base">Title</p>
</div>
<div class="flex text-4xl items-center">
<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="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 140%">
<img src="https://images.unsplash.com/photo-1539694265588-f101b5569bd2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
class="w-full absolute top-0" />
<div class="absolute bottom-0 left-0 w-full p-4 flex 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">Name</p>
<p class="text-base">Title</p>
</div>
<div class="flex text-4xl items-center">
<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="bg-gray-200 rounded-lg relative overflow-hidden" style="padding-top: 140%">
<img src="https://images.unsplash.com/photo-1539694265588-f101b5569bd2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
class="w-full absolute top-0" />
<div class="absolute bottom-0 left-0 w-full p-4 flex 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">Name</p>
<p class="text-base">Title</p>
</div>
<div class="flex text-4xl items-center">
<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>Testimony 1
testimonial
Testimonial
Stories from our clients
Stop repeating the same messages to your customers to introduce your business.
Name
Position / Company
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
Name
Position / Company
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
Name
Position / Company
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
<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>Testimony 2
generalOur experienced doctors
Name
Position / Company
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
Name
Position / Company
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
Name
Position / Company
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
<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>Timeline 1
general
Our Experiences
Timeline Of Our Growth
Here’s what we stand for
Package Booked
21 July 2021, 04:30 PM
Out for Delivery
22 July 2021, 01:00 PM
Cancelled
Customer cancelled the order
Delivered
<section class="px-6 lg:px-16 container mx-auto my-8 lg:my-16">
<div class="grid grid-cols-1 mb-4 lg:mb-8 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">
Our Experiences
</div>
</div>
<div>
<h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">
Timeline Of Our Growth
</h1>
</div>
<div class="flex items-center">
<p class="text-base lg:text-2xl font-semibold w-full text-left">
Here’s what we stand for
</p>
</div>
</div>
<div class="flex flex-col lg:grid grid-cols-12 text-gray-50">
<div class="flex lg:contents">
<div class="col-start-2 col-end-4 mr-10 lg:mx-auto relative flex items-center">
<div class="h-full w-6 flex items-center justify-center">
<div class="h-full w-1 bg-blue-500 pointer-events-none"></div>
</div>
<div class="w-6 h-6 rounded-full bg-blue-500 absolute flex items-center justify-center">
<i class="fas fa-check-circle text-white"></i>
</div>
</div>
<div class="bg-blue-500 col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto w-full">
<h3 class="font-semibold text-lg mb-1">Package Booked</h3>
<p class="leading-tight text-justify w-full">
21 July 2021, 04:30 PM
</p>
</div>
</div>
<div class="flex lg:contents">
<div class="col-start-2 col-end-4 mr-10 lg:mx-auto relative flex items-center">
<div class="h-full w-6 flex items-center justify-center">
<div class="h-full w-1 bg-blue-500 pointer-events-none"></div>
</div>
<div class="w-6 h-6 absolute rounded-full bg-blue-500 text-center flex items-center justify-center">
<i class="fas fa-check-circle text-white"></i>
</div>
</div>
<div class="bg-blue-500 col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto w-full">
<h3 class="font-semibold text-lg mb-1">Out for Delivery</h3>
<p class="leading-tight text-justify">22 July 2021, 01:00 PM</p>
</div>
</div>
<div class="flex lg:contents">
<div class="col-start-2 col-end-4 mr-10 lg:mx-auto relative flex items-center">
<div class="h-full w-6 flex items-center justify-center">
<div class="h-full w-1 bg-red-500 pointer-events-none"></div>
</div>
<div class="w-6 h-6 absolute rounded-full bg-red-500 text-center flex items-center justify-center">
<i class="fas fa-times-circle text-white"></i>
</div>
</div>
<div class="bg-red-500 col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto w-full">
<h3 class="font-semibold text-lg mb-1 text-gray-50">Cancelled</h3>
<p class="leading-tight text-justify">
Customer cancelled the order
</p>
</div>
</div>
<div class="flex lg:contents">
<div class="col-start-2 col-end-4 mr-10 lg:mx-auto relative flex items-center">
<div class="h-full w-6 flex items-center justify-center">
<div class="h-full w-1 bg-gray-300 pointer-events-none"></div>
</div>
<div class="w-6 h-6 absolute rounded-full bg-gray-300 text-center flex items-center justify-center">
<i class="fas fa-exclamation-circle text-gray-400"></i>
</div>
</div>
<div class="bg-gray-300 col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto w-full">
<h3 class="font-semibold text-lg mb-1 text-gray-400">
Delivered
</h3>
<p class="leading-tight text-justify"></p>
</div>
</div>
</div>
</section>Video 1
solution
Solution
Why Choose Us As Your Growth Partner
Stop repeating the same messages to your customers to introduce your business.
<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>