File: /home/hnhtennm/public_html/billu.hnhtechsolutions.com/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Kaarigar AI Hero</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-0 p-0">
<!-- HERO SECTION -->
<section class="relative w-full min-h-screen overflow-hidden">
<!-- Background Image -->
<img
src="./assets/workes.png"
alt="Background"
class="absolute inset-0 w-full h-full object-cover"
/>
<!-- Overlay (optional for readability) -->
<div class="absolute inset-0 bg-black/50"></div>
<!-- Center Content -->
<div
class="relative z-10 flex flex-col items-center justify-center h-full text-center"
>
<!-- Logo -->
<img
src="./assets/logo.jpeg"
alt="Kaarigar AI Logo"
class="w-32 md:w-40 mb-6"
/>
<button class="bg-yellow-500 p-4 rounded-lg mt-2">
Book a Technication
</button>
<button class="bg-yellow-500 p-4 rounded-lg mt-2">
Become a Technication
</button>
<!-- Mobile Mockup -->
<img
src="./assets/mobile.png"
alt="Mobile App Preview"
class="w-[260px] md:w-[320px]"
/>
</div>
</section>
<div
style="background: linear-gradient(90deg, #fbe7c6 0%, #f9d74c 100%)"
class="h-[70vh]"
>
<div class="ml-6">
<h1 class="text-5xl text-center font-bold">KaarigarAi</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div>
<h1 class="text-2xl">TheProblem</h1>
<ul>
<li class="mt-2">
Households struggle to find trustworthy electricians, plumbers,
cleaners, mechanics, etc
</li>
<li class="mt-2">
Unverified workers = safety risk + inconsistent pricing
</li>
<li class="mt-2">No digital system for managing maintenance</li>
</ul>
</div>
<div class="flex justify-center">
<img
src="./assets/man.png"
alt="Service professional working"
class="rounded-lg shadow-lg w-[300px] h-auto ml-6"
/>
</div>
</div>
</div>
</div>
<div
style="background: linear-gradient(90deg, #fbe7c6 0%, #f9d74c 100%)"
class="h-[70vh]"
>
<div class="ml-6">
<h1 class="text-5xl text-center font-bold">KaarigarAi</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div>
<h1 class="text-2xl">TheSolution</h1>
<ul>
<li class="mt-2">
Mobile & web platform connecting verified, trained
</li>
<li class="mt-2">
App automatically matches you with the best-rated available
technician based on location, skill, and reviews.
</li>
<li class="mt-2">
Fixed or estimated rates shown before booking
</li>
<li class="mt-2">
AI-powered issue detection ( upload photo/video = automatic
diagnosis)
</li>
</ul>
</div>
<div class="flex justify-center">
<img
src="./assets/mobile.png"
alt="Service professional working"
class="rounded-lg shadow-lg w-[300px] h-auto ml-6"
/>
</div>
</div>
</div>
</div>
<section
style="background: linear-gradient(90deg, #fbe7c6 0%, #f9d74c 100%)"
class="w-full pt-10 pb-4"
>
<div class="flex justify-center align-items-center text-7xl font-bold">
Kaarigar Ai
</div>
<div class="container max-w-7xl m-auto mt-5">
<h1 class="text-5xl font-bold">Business Model</h1>
<div class="flex justify-between align-items-center max-w-2xl mt-3">
<h1 class="text-2xl">Revenue Stream</h1>
<h1 class="text-2xl">Description</h1>
</div>
<div>
<div class="space-y-4 text-base mt-4 max-w-2xl">
<!-- Row 1 -->
<div class="flex items-center gap-4">
<span class="whitespace-nowrap">Commission</span>
<span class="flex-1 border-b border-dashed border-black"></span>
<span class="whitespace-nowrap">10–20% from each service</span>
</div>
<!-- Row 2 -->
<div class="flex items-center gap-4">
<span class="whitespace-nowrap">Subscription Packages</span>
<span class="flex-1 border-b border-dashed border-black"></span>
<span class="whitespace-nowrap">Monthly/annual home plans</span>
</div>
<!-- Row 3 -->
<div class="flex items-center gap-4">
<span class="whitespace-nowrap">Corporate Contracts</span>
<span class="flex-1 border-b border-dashed border-black"></span>
<span class="whitespace-nowrap">Offices, malls, real estate</span>
</div>
</div>
<div class="flex justify-end pt-2">
<img src="./assets/icon.png" alt="" />
</div>
</div>
</div>
</section>
<div
style="background: linear-gradient(90deg, #fbe7c6 0%, #f9d74c 100%)"
class="h-[70vh]"
>
<div class="ml-6">
<h1 class="text-5xl text-center font-bold">KaarigarAi</h1>
<div class="flex justify-center gap-3 mt-24">
<h1 class="text-8xl text-center font-bold mt-3">ThankYou</h1>
<br />
<img
src="./assets/home.png"
alt="Thank You"
class="rounded-lg mb-6 w-[150px] h-auto"
/>
</div>
</div>
</div>
</body>
</html>