| Server IP : 103.243.232.44 / Your IP : 216.73.216.250 Web Server : LiteSpeed System : Linux server17213-10344.hostycare.online 5.14.0-687.38.1.el9_8.x86_64 #1 SMP PREEMPT_DYNAMIC Wed Aug 12 17:19:12 EDT 2026 x86_64 User : iamakash ( 1400) PHP Version : 8.1.34 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/iamakash/kahom.tech/v1/ |
Upload File : |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=Alex+Brush&display=swap" rel="stylesheet" />
<style>
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #FDF8F0; color: #0F2557; font-family: 'Hanken Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: #17356F; text-decoration: none; }
a:hover { color: #E8A020; }
::selection { background: #F5A623; color: #0F2557; }
@keyframes ku-float { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(0,-16px,0) rotate(-1.2deg); } }
@keyframes ku-float-slow { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-26px,0); } }
@keyframes ku-drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(30px,-24px,0) scale(1.08); } 100% { transform: translate3d(0,0,0) scale(1); } }
@keyframes ku-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes ku-pulse { 0% { box-shadow: 0 0 0 0 rgba(245,166,35,.55); } 70% { box-shadow: 0 0 0 18px rgba(245,166,35,0); } 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); } }
@keyframes ku-blink { 0%,45% { opacity: 1; } 50%,95% { opacity: .25; } 100% { opacity: 1; } }
@keyframes ku-spin { to { transform: rotate(360deg); } }
@keyframes ku-dash { to { stroke-dashoffset: 0; } }
@keyframes ku-wave { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes ku-write { 0% { width: 0; } 55%,100% { width: 100%; } }
@keyframes ku-caret { 0%,100% { opacity: 0; } 8%,52% { opacity: 1; } }
@keyframes ku-hand { 0%,70%,100% { transform: translate3d(0,0,0) rotate(0deg); } 78% { transform: translate3d(0,-4px,0) rotate(-12deg); } 86% { transform: translate3d(0,-4px,0) rotate(12deg); } }
@keyframes ku-pop { 0%,58% { opacity: 0; transform: translate3d(0,8px,0); } 68%,94% { opacity: 1; transform: translate3d(0,0,0); } 100% { opacity: 0; transform: translate3d(0,8px,0); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; } }
/* ---- Responsive layer ------------------------------------------------
Everything above is the generated export. These rules override its
inline styles (hence !important) at the two widths where the fixed
layout breaks. */
img, svg { max-width: 100%; }
/* Header: the logo, five nav links and the CTA sit in one non-wrapping
row, which overflows below ~900px. Drop the links to their own centred
second row instead of building a JS drawer. */
@media (max-width: 900px) {
header > div { flex-wrap: wrap !important; gap: 12px 18px !important; }
header nav {
order: 3 !important;
width: 100% !important;
margin-left: 0 !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 8px 18px !important;
font-size: 14px !important;
}
header > div > a[href="#early"] { margin-left: auto !important; }
}
@media (max-width: 560px) {
header > div { padding: 10px 16px !important; }
header > div > a[href="#top"] svg { width: 132px !important; height: auto !important; }
header > div > a[href="#early"] { padding: 10px 16px !important; font-size: 14px !important; }
header nav { font-size: 13px !important; gap: 6px 14px !important; }
/* Signup fields are a two-up `auto 1fr` grid; stack them. */
#early [style*="grid-template-columns:auto 1fr"] { grid-template-columns: 1fr !important; }
}
</style>
</helmet>
<div style="position:fixed;top:0;left:0;height:3px;width:{{ scrollPct }};background:linear-gradient(90deg,#F5A623,#E8A020);z-index:60;transition:width .1s linear"></div>
<header style="position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(253,248,240,.82);border-bottom:1px solid rgba(15,37,87,.08)">
<div style="max-width:1220px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:28px">
<a href="#top" style="display:flex;align-items:center;gap:10px;flex:0 0 auto">
<svg width="167" height="42" viewBox="0 0 250 126" role="img" aria-label="Kautuki" style="display:block">
<g transform="translate(4,4)">
<text x="14" y="87" font-family="'Alex Brush', cursive" font-size="72" fill="#E8A020" stroke="#E8A020" stroke-width="1.7" stroke-linejoin="round" paint-order="stroke">Kau</text>
<text x="141.7" y="87" font-family="'Alex Brush', cursive" font-size="72" fill="#0F2557" stroke="#0F2557" stroke-width="1.7" stroke-linejoin="round" paint-order="stroke">tuki</text>
<g transform="translate(161.1,33.4)">
<polygon points="0,0 19.0,12.0 0,24.0 7.0,12.0" fill="#F5A623" opacity="0.65"></polygon>
<polygon points="7.0,0 29.0,12.0 7.0,24.0 14.0,12.0" fill="#F5A623"></polygon>
</g>
</g>
</svg>
</a>
<nav style="display:flex;gap:26px;margin-left:auto;align-items:center;font-size:15px;font-weight:600;color:#3D5285">
<a href="#how">How it works</a>
<a href="#audience">Who it's for</a>
<a href="#verify">Verification</a>
<a href="#teach">Teach</a>
<a href="#faq">FAQ</a>
</nav>
<a href="#early" style="flex:0 0 auto;background:#0F2557;color:#FDF8F0;padding:12px 20px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:-.01em;box-shadow:0 10px 24px -12px rgba(15,37,87,.7)" style-hover="background:#F5A623;color:#0F2557">Get early access</a>
</div>
</header>
<main id="top" style="display:block">
<section style="position:relative;overflow:hidden;padding:clamp(56px,7vw,110px) 24px clamp(60px,6vw,96px)">
<div style="position:absolute;top:-160px;right:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(245,166,35,.30),rgba(245,166,35,0) 68%);animation:ku-drift 18s ease-in-out infinite;pointer-events:none"></div>
<div style="position:absolute;bottom:-200px;left:-140px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle at 60% 40%,rgba(23,53,111,.18),rgba(23,53,111,0) 70%);animation:ku-drift 24s ease-in-out infinite reverse;pointer-events:none"></div>
<div style="max-width:1220px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:clamp(32px,5vw,72px);align-items:center;position:relative">
<div>
<div data-reveal="up" style="display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid rgba(245,166,35,.45);padding:7px 14px 7px 10px;border-radius:999px;font-size:13.5px;font-weight:700;color:#8A5A0B;letter-spacing:.01em;margin-bottom:26px">
<span style="width:8px;height:8px;border-radius:50%;background:#F5A623;animation:ku-blink 1.8s ease-in-out infinite"></span>
<span>Launching soon — onboarding our first teachers and learners</span>
</div>
<h1 data-reveal="up" style="font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(44px,6.2vw,84px);line-height:.96;letter-spacing:-.035em;margin:0 0 22px;text-wrap:balance">
Your child is not behind.<br />
<span style="color:#B87508">They were only</span> <span style="position:relative;display:inline-block">further from a teacher.<span style="position:absolute;left:0;right:0;bottom:.06em;height:.16em;background:rgba(245,166,35,.42);border-radius:4px;z-index:-1"></span></span>
</h1>
<p data-reveal="up" style="font-size:clamp(17px,1.4vw,20.5px);line-height:1.6;color:#41557F;max-width:560px;margin:0 0 32px;text-wrap:pretty">
Kautuki is a live tutoring marketplace for grades 6–12 across Tier 2–4 India. Hand-verified teachers, live 1:1 and batch classes, built to run on an entry-level Android phone over 3G.
</p>
<div data-reveal="up" style="display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:34px">
<a href="#early" style="background:#F5A623;color:#0F2557;font-weight:800;font-size:17px;padding:17px 30px;border-radius:999px;box-shadow:0 18px 34px -18px rgba(232,160,32,.9);animation:ku-pulse 3.2s ease-out infinite" style-hover="background:#E8A020">Get early access</a>
<a href="#how" style="font-weight:700;font-size:16px;padding:16px 24px;border-radius:999px;border:1.5px solid rgba(15,37,87,.18);color:#0F2557" style-hover="border-color:#0F2557;background:#fff">See how it works</a>
</div>
<div data-reveal="up" style="display:flex;flex-wrap:wrap;gap:10px">
<sc-for list="{{ heroChips }}" as="chip" hint-placeholder-count="4">
<span style="display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#41557F;background:rgba(255,255,255,.75);border:1px solid rgba(15,37,87,.1);padding:8px 13px;border-radius:10px">
<span style="color:#E8A020;font-weight:800">✓</span>{{ chip }}
</span>
</sc-for>
</div>
</div>
<div style="position:relative;min-height:420px">
<div style="position:absolute;inset:auto;top:0;left:0;right:0;background:#0F2557;color:#FDF8F0;border-radius:26px;padding:26px;box-shadow:0 40px 80px -40px rgba(15,37,87,.75);animation:ku-float-slow 9s ease-in-out infinite">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px">
<div style="display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#F5A623">
<span style="width:9px;height:9px;border-radius:50%;background:#F5A623;animation:ku-blink 1.4s infinite"></span>Product preview
</div>
<div style="font-size:13px;font-weight:600;color:rgba(253,248,240,.6)">CBSE Class 10 · Quadratics</div>
</div>
<div style="position:relative;background:#FDF8F0;border-radius:16px;padding:18px 18px 16px;margin-bottom:18px;min-height:132px;color:#0F2557">
<div style="display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8A5A0B;margin-bottom:14px">
<span>Whiteboard</span><span style="font-variant-numeric:tabular-nums;color:#5A6B8C">Sample class</span>
</div>
<div style="font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(14px,4.2vw,21px);font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;width:100%">
<span style="display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:ku-write 7s cubic-bezier(.5,0,.2,1) infinite">x² + 5x + 6 = (x + 2)(x + 3)</span><span style="display:inline-block;width:2px;height:.95em;background:#F5A623;vertical-align:-.08em;margin-left:2px;animation:ku-caret 7s steps(1,end) infinite"></span>
</div>
<div style="height:3px;border-radius:3px;background:rgba(245,166,35,.55);margin-top:10px;width:0;animation:ku-write 7s cubic-bezier(.5,0,.2,1) infinite;animation-delay:.35s"></div>
<div style="position:absolute;right:16px;bottom:14px;display:flex;align-items:center;gap:8px;background:#0F2557;color:#FDF8F0;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:700;animation:ku-pop 7s ease-in-out infinite">
<span style="display:inline-block;transform-origin:bottom center;animation:ku-hand 7s ease-in-out infinite">✋</span>Doubt raised
</div>
</div>
<div style="display:flex;gap:8px;margin-bottom:18px;font-size:12px;font-weight:600;color:rgba(253,248,240,.72)">
<span style="flex:1;text-align:center;background:rgba(253,248,240,.08);border:1px solid rgba(253,248,240,.14);border-radius:10px;padding:8px 4px">🎤 Mic</span>
<span style="flex:1;text-align:center;background:rgba(253,248,240,.08);border:1px solid rgba(253,248,240,.14);border-radius:10px;padding:8px 4px">🎥 Video</span>
<span style="flex:1;text-align:center;background:rgba(245,166,35,.18);border:1px solid rgba(245,166,35,.45);border-radius:10px;padding:8px 4px;color:#F5A623">✋ Hand</span>
<span style="flex:1;text-align:center;background:rgba(253,248,240,.08);border:1px solid rgba(253,248,240,.14);border-radius:10px;padding:8px 4px">💬 Chat</span>
</div>
<div style="display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid rgba(253,248,240,.14)">
<div style="width:44px;height:44px;border-radius:14px;background:#F5A623;color:#0F2557;display:grid;place-items:center;font-weight:800;font-family:'Bricolage Grotesque',sans-serif">RV</div>
<div>
<div style="font-weight:700;font-size:15.5px">Rina Verma ✓ Verified</div>
<div style="font-size:13px;color:rgba(253,248,240,.6)">Maths · 8 yrs · onboarding for launch · ₹350/hr</div>
</div>
</div>
</div>
<div style="position:absolute;top:250px;left:-6px;background:#fff;border:1px solid rgba(15,37,87,.1);border-radius:20px;padding:18px 20px;box-shadow:0 26px 50px -28px rgba(15,37,87,.45);animation:ku-float 7s ease-in-out infinite;animation-delay:.6s;max-width:250px">
<div style="font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#B87508;margin-bottom:8px">Identity check</div>
<div style="font-size:15px;font-weight:600;line-height:1.4">Aadhaar verified, qualification papers seen by a human.</div>
</div>
<div style="position:absolute;top:340px;right:-4px;background:#fff;border:1px solid rgba(15,37,87,.1);border-radius:20px;padding:18px 20px;box-shadow:0 26px 50px -28px rgba(15,37,87,.45);animation:ku-float 8.5s ease-in-out infinite;animation-delay:1.4s">
<div style="font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1">₹0</div>
<div style="font-size:14px;font-weight:600;color:#41557F">first session, any teacher</div>
</div>
</div>
</div>
</section>
<section style="background:#0F2557;color:#FDF8F0;padding:clamp(28px,3vw,40px) 24px">
<div style="max-width:1220px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:24px">
<sc-for list="{{ stats }}" as="s" hint-placeholder-count="4">
<div data-reveal="up" style="display:flex;flex-direction:column;gap:4px">
<div style="font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(30px,3.2vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1;color:#F5A623">{{ s.n }}</div>
<div style="font-size:14.5px;font-weight:500;color:rgba(253,248,240,.72);line-height:1.35">{{ s.label }}</div>
</div>
</sc-for>
</div>
</section>
<section id="how" style="padding:clamp(72px,8vw,120px) 24px">
<div style="max-width:1220px;margin:0 auto">
<div data-reveal="up" style="max-width:660px;margin-bottom:clamp(40px,5vw,64px)">
<div style="font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#B87508;margin-bottom:14px">How it works</div>
<h2 style="font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(34px,4.4vw,58px);font-weight:800;letter-spacing:-.032em;line-height:1.02;margin:0 0 16px">Four steps to your first class.</h2>
<p style="font-size:18px;line-height:1.6;color:#41557F;margin:0">Phone and OTP to sign up. No password, no annual package, no coaching-class commute.</p>
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:22px">
<sc-for list="{{ steps }}" as="st" hint-placeholder-count="3">
<div data-reveal="up" style="background:#fff;border:1px solid rgba(15,37,87,.09);border-radius:24px;padding:30px 28px 34px;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease" style-hover="transform:translateY(-8px);box-shadow:0 34px 60px -34px rgba(15,37,87,.5)">
<div style="font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:800;color:#0F2557;background:#F5A623;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:22px">{{ st.n }}</div>
<h3 style="font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 10px">{{ st.title }}</h3>
<p style="font-size:16px;line-height:1.58;color:#41557F;margin:0">{{ st.body }}</p>
</div>
</sc-for>
</div>
</div>
</section>
<section id="verify" style="background:#0F2557;color:#FDF8F0;padding:clamp(72px,8vw,120px) 24px;position:relative;overflow:hidden">
<div style="position:absolute;top:10%;left:50%;width:700px;height:700px;margin-left:-350px;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.14),transparent 65%);animation:ku-drift 26s ease-in-out infinite;pointer-events:none"></div>
<div style="max-width:1100px;margin:0 auto;position:relative">
<div data-reveal="up" style="max-width:700px;margin-bottom:clamp(44px,5vw,72px)">
<div style="font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#F5A623;margin-bottom:14px">The verification story</div>
<h2 style="font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(34px,4.4vw,58px);font-weight:800;letter-spacing:-.032em;line-height:1.02;margin:0 0 16px">Every teacher clears three checks before your child sees them.</h2>
<p style="font-size:18px;line-height:1.6;color:rgba(253,248,240,.72);margin:0">No random tutors. Each check is reviewed by a person on our team, and any single failure ends the application.</p>
</div>
<div style="display:flex;flex-direction:column;gap:0">
<sc-for list="{{ gates }}" as="g" hint-placeholder-count="4">
<div data-reveal="left" style="display:grid;grid-template-columns:64px 1fr;gap:clamp(18px,3vw,34px);padding:clamp(26px,3vw,38px) 0;border-top:1px solid rgba(253,248,240,.13)">
<div style="display:flex;flex-direction:column;align-items:center;gap:12px">
<div style="width:52px;height:52px;border-radius:16px;border:1.5px solid rgba(245,166,35,.55);color:#F5A623;display:grid;place-items:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;flex:0 0 auto">{{ g.n }}</div>
<div style="flex:1;width:1.5px;background:linear-gradient(180deg,rgba(245,166,35,.45),transparent)"></div>
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:clamp(14px,3vw,40px);align-items:start">
<h3 style="font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(24px,2.4vw,32px);font-weight:700;letter-spacing:-.024em;line-height:1.12;margin:0">{{ g.title }}</h3>
<div>
<p style="font-size:16.5px;line-height:1.62;color:rgba(253,248,240,.74);margin:0 0 12px">{{ g.body }}</p>
<span style="display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#F5A623;background:rgba(245,166,35,.12);padding:6px 12px;border-radius:8px">{{ g.tag }}</span>
</div>
</div>
</div>
</sc-for>
</div>
<div data-reveal="up" style="margin-top:clamp(36px,4vw,56px);display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:26px 28px;border-radius:22px;background:rgba(253,248,240,.06);border:1px solid rgba(253,248,240,.12)">
<div style="font-size:17px;font-weight:600;line-height:1.5;flex:1 1 320px">Payments run through Razorpay. Money moves to the teacher only after the class happens.</div>
<a href="#early" style="background:#F5A623;color:#0F2557;font-weight:800;font-size:16px;padding:15px 26px;border-radius:999px" style-hover="background:#fff">Meet a verified teacher free</a>
</div>
</div>
</section>
<section id="app" style="padding:clamp(72px,8vw,120px) 24px;overflow:hidden">
<div style="max-width:1220px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(40px,6vw,80px);align-items:center">
<div>
<div data-reveal="up" style="font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#B87508;margin-bottom:14px">Built for the phone you already own</div>
<h2 data-reveal="up" style="font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(34px,4.4vw,58px);font-weight:800;letter-spacing:-.032em;line-height:1.02;margin:0 0 18px">A classroom that survives one bar of signal.</h2>
<p data-reveal="up" style="font-size:18px;line-height:1.6;color:#41557F;margin:0 0 30px;max-width:520px">Adaptive bitrate video, an audio-first fallback when the signal drops, and a whiteboard that syncs on a trickle. Built to keep the class going on an entry-level Android phone.</p>
<div style="display:flex;flex-direction:column;gap:10px;max-width:520px">
<sc-for list="{{ appFeatures }}" as="f" hint-placeholder-count="4">
<button type="button" onClick="{{ f.onClick }}" style="text-align:left;font-family:inherit;cursor:pointer;background:{{ f.bg }};border:1px solid {{ f.border }};border-radius:18px;padding:18px 20px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;transition:background .35s ease,border-color .35s ease,transform .35s ease;transform:{{ f.tf }}">
<span style="width:34px;height:34px;border-radius:11px;background:{{ f.dot }};color:#0F2557;display:grid;place-items:center;font-weight:800;font-size:14px;font-family:'Bricolage Grotesque',sans-serif">{{ f.n }}</span>
<span style="display:block">
<span style="display:block;font-size:17px;font-weight:700;letter-spacing:-.015em;color:#0F2557;margin-bottom:3px">{{ f.title }}</span>
<span style="display:block;font-size:15px;line-height:1.5;color:#41557F">{{ f.body }}</span>
</span>
</button>
</sc-for>
</div>
</div>
<div data-reveal="up" style="display:flex;justify-content:center">
<div style="position:relative;width:min(320px,100%);flex:0 0 auto;animation:ku-float-slow 11s ease-in-out infinite">
<div style="position:absolute;inset:-40px;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.22),transparent 62%);pointer-events:none"></div>
<div style="position:relative;background:#0F2557;border-radius:44px;padding:12px;box-shadow:0 50px 90px -40px rgba(15,37,87,.8)">
<div style="background:#FDF8F0;border-radius:34px;overflow:hidden;height:600px;position:relative">
<div style="position:absolute;top:0;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:11.5px;font-weight:700;color:#0F2557;z-index:3">
<span>9:41</span><span>3G ▾ · 62%</span>
</div>
<sc-for list="{{ screens }}" as="sc" hint-placeholder-count="1">
<div style="position:absolute;inset:0;padding:46px 20px 20px;opacity:{{ sc.op }};transform:{{ sc.tf }};transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)">
<div style="font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#B87508;margin-bottom:10px">{{ sc.kicker }}</div>
<div style="font-family:'Bricolage Grotesque',sans-serif;font-size:25px;font-weight:800;letter-spacing:-.028em;line-height:1.08;margin-bottom:18px">{{ sc.title }}</div>
<div style="display:flex;flex-direction:column;gap:11px">
<sc-for list="{{ sc.rows }}" as="r" hint-placeholder-count="3">
<div style="background:#fff;border:1px solid rgba(15,37,87,.1);border-radius:16px;padding:14px 15px;display:flex;gap:12px;align-items:center">
<span style="width:38px;height:38px;border-radius:12px;background:{{ r.tint }};display:grid;place-items:center;font-weight:800;font-size:13px;color:#0F2557;flex:0 0 auto;font-family:'Bricolage Grotesque',sans-serif">{{ r.badge }}</span>
<span style="display:block;min-width:0">
<span style="display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em">{{ r.title }}</span>
<span style="display:block;font-size:12.5px;color:#5A6B8C;font-weight:500">{{ r.sub }}</span>
</span>
</div>
</sc-for>
</div>
<div style="margin-top:20px;background:#F5A623;color:#0F2557;border-radius:14px;padding:14px;text-align:center;font-weight:800;font-size:15px">{{ sc.cta }}</div>
</div>
</sc-for>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="audience" style="padding:clamp(64px,7vw,104px) 24px;background:#F6EFE2">
<div style="max-width:1220px;margin:0 auto">
<div data-reveal="up" style="display:flex;flex-wrap:wrap;gap:20px;align-items:end;justify-content:space-between;margin-bottom:clamp(30px,4vw,48px)">
<div>
<div style="font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#B87508;margin-bottom:12px">Who it's for</div>
<h2 style="font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(32px,4vw,52px);font-weight:800;letter-spacing:-.032em;line-height:1.04;margin:0;max-width:620px">One platform, two ways in.</h2>
</div>
<p style="font-size:16.5px;color:#41557F;margin:0;max-width:320px;line-height:1.55">Students and parents on one side, teachers on the other, on the same low-bandwidth classroom.</p>
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px">
<sc-for list="{{ audience }}" as="a" hint-placeholder-count="2">
<div data-reveal="up" style="background:{{ a.bg }};color:{{ a.fg }};border:1px solid rgba(15,37,87,.09);border-radius:26px;padding:32px 30px 34px">
<div style="font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:{{ a.kicker }};margin-bottom:20px">{{ a.side }}</div>
<div style="display:flex;flex-direction:column;gap:20px">
<sc-for list="{{ a.items }}" as="it" hint-placeholder-count="3">
<div style="display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start">
<span style="font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:{{ a.kicker }};padding-top:4px;min-width:64px">{{ it.tag }}</span>
<span style="display:block">
<span style="display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.018em;margin-bottom:4px">{{ it.title }}</span>
<span style="display:block;font-size:15.5px;line-height:1.55;color:{{ a.muted }}">{{ it.body }}</span>
</span>
</div>
</sc-for>
</div>
</div>
</sc-for>
</div>
</div>
</section>
<section id="early" style="padding:clamp(66px,7vw,110px) 24px">
<div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(32px,5vw,64px);align-items:center">
<div>
<div data-reveal="up" style="display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid rgba(245,166,35,.45);padding:7px 14px 7px 10px;border-radius:999px;font-size:13.5px;font-weight:700;color:#8A5A0B;margin-bottom:22px">
<span style="width:8px;height:8px;border-radius:50%;background:#F5A623;animation:ku-blink 1.8s ease-in-out infinite"></span>Early access
</div>
<h2 data-reveal="up" style="font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(32px,4.2vw,54px);font-weight:800;letter-spacing:-.032em;line-height:1.03;margin:0 0 16px">Be among the first families on Kautuki.</h2>
<p data-reveal="up" style="font-size:17.5px;line-height:1.6;color:#41557F;margin:0 0 26px;max-width:480px">We're onboarding the first learners and teachers now. Leave your number and we'll message you the moment classes open in your area.</p>
<div data-reveal="up" style="display:flex;flex-direction:column;gap:12px">
<sc-for list="{{ earlyPerks }}" as="p" hint-placeholder-count="3">
<div style="display:flex;align-items:center;gap:11px;font-size:16.5px;font-weight:600;color:#0F2557">
<span style="width:24px;height:24px;border-radius:8px;background:rgba(245,166,35,.3);color:#8A5A0B;display:grid;place-items:center;font-size:13px;font-weight:800;flex:0 0 auto">✓</span>{{ p }}
</div>
</sc-for>
</div>
</div>
<div data-reveal="up" style="background:#0F2557;color:#FDF8F0;border-radius:28px;padding:clamp(28px,3vw,38px);box-shadow:0 40px 80px -44px rgba(15,37,87,.8)">
<div style="font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.022em;margin-bottom:22px">Get early access</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="background:rgba(253,248,240,.08);border:1px solid rgba(253,248,240,.16);border-radius:14px;padding:14px 16px;font-size:15.5px;color:rgba(253,248,240,.6)">Full name</div>
<div style="display:grid;grid-template-columns:auto 1fr;gap:10px">
<div style="background:rgba(253,248,240,.08);border:1px solid rgba(253,248,240,.16);border-radius:14px;padding:14px 14px;font-size:15.5px;font-weight:600">🇮🇳 +91</div>
<div style="background:rgba(253,248,240,.08);border:1px solid rgba(253,248,240,.16);border-radius:14px;padding:14px 16px;font-size:15.5px;color:rgba(253,248,240,.6)">Mobile number</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px">
<sc-for list="{{ roles }}" as="r" hint-placeholder-count="2">
<button type="button" onClick="{{ r.onClick }}" style="font-family:inherit;cursor:pointer;text-align:left;border-radius:14px;padding:14px 16px;font-size:15px;font-weight:700;background:{{ r.bg }};color:{{ r.fg }};border:1px solid {{ r.border }};transition:background .3s ease,color .3s ease,border-color .3s ease">{{ r.label }}</button>
</sc-for>
</div>
<a href="#early" style="margin-top:8px;text-align:center;background:#F5A623;color:#0F2557;font-weight:800;font-size:16.5px;padding:16px;border-radius:14px" style-hover="background:#fff">Notify me at launch</a>
<p style="margin:6px 0 0;font-size:13px;line-height:1.5;color:rgba(253,248,240,.55)">No spam. We'll only message you about your early access. By continuing you accept the <a href="https://kautuki.co.in/privacy.html" style="color:#F5A623" style-hover="color:#fff">Privacy Policy</a> (DPDP Act 2023).</p>
</div>
</div>
</div>
</section>
<section style="padding:clamp(56px,6vw,86px) 0;overflow:hidden;background:#0F2557;color:#FDF8F0">
<div style="max-width:1220px;margin:0 auto;padding:0 24px 34px;display:flex;flex-wrap:wrap;gap:16px;align-items:end;justify-content:space-between">
<h2 data-reveal="up" style="font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0;max-width:600px">Learn in English or हिंदी.</h2>
<p data-reveal="up" style="margin:0;font-size:16px;color:rgba(253,248,240,.7);max-width:330px;line-height:1.55">Filter teachers by medium of instruction. More languages as we onboard teachers in each state.</p>
</div>
<div style="display:flex;width:max-content;gap:14px;animation:ku-marquee 34s linear infinite">
<sc-for list="{{ langs }}" as="l" hint-placeholder-count="12">
<span style="font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.02em;padding:12px 26px;border:1px solid rgba(253,248,240,.18);border-radius:999px;white-space:nowrap;color:rgba(253,248,240,.9)">{{ l }}</span>
</sc-for>
</div>
</section>
<section id="teach" style="padding:clamp(72px,8vw,120px) 24px">
<div style="max-width:1220px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(36px,5vw,72px);align-items:center">
<div>
<div data-reveal="up" style="font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#B87508;margin-bottom:14px">Teach with Kautuki</div>
<h2 data-reveal="up" style="font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(34px,4.4vw,56px);font-weight:800;letter-spacing:-.032em;line-height:1.02;margin:0 0 18px">If you can teach, your pincode should not decide your income.</h2>
<p data-reveal="up" style="font-size:18px;line-height:1.6;color:#41557F;margin:0 0 28px;max-width:520px">Clear the three checks once, set your own rates and hours, and take classes from wherever you have a signal. Keep up to 90% of what you charge, withdraw to your bank in about 24 hours, no fee.</p>
<div data-reveal="up" style="display:flex;flex-wrap:wrap;gap:14px">
<a href="#early" style="background:#0F2557;color:#FDF8F0;font-weight:800;font-size:16px;padding:16px 28px;border-radius:999px" style-hover="background:#F5A623;color:#0F2557">Apply to teach</a>
<a href="#faq" style="font-weight:700;font-size:16px;padding:15px 24px;border-radius:999px;border:1.5px solid rgba(15,37,87,.18)" style-hover="border-color:#0F2557">What we check</a>
</div>
</div>
<div data-reveal="up" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:16px">
<sc-for list="{{ teacherStats }}" as="t" hint-placeholder-count="4">
<div style="background:#fff;border:1px solid rgba(15,37,87,.09);border-radius:22px;padding:24px 22px">
<div style="font-family:'Bricolage Grotesque',sans-serif;font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1;color:#B87508;margin-bottom:8px">{{ t.n }}</div>
<div style="font-size:14.5px;font-weight:600;color:#41557F;line-height:1.4">{{ t.label }}</div>
</div>
</sc-for>
</div>
</div>
</section>
<section id="faq" style="padding:clamp(64px,7vw,110px) 24px;background:#F6EFE2">
<div style="max-width:900px;margin:0 auto">
<h2 data-reveal="up" style="font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(32px,4vw,52px);font-weight:800;letter-spacing:-.032em;line-height:1.04;margin:0 0 clamp(28px,4vw,44px)">Questions parents ask us first.</h2>
<div style="display:flex;flex-direction:column;gap:12px">
<sc-for list="{{ faqs }}" as="f" hint-placeholder-count="5">
<div data-reveal="up" style="background:#fff;border:1px solid rgba(15,37,87,.09);border-radius:20px;overflow:hidden">
<button type="button" onClick="{{ f.onClick }}" style="width:100%;text-align:left;background:none;border:0;font-family:inherit;cursor:pointer;padding:22px 24px;display:flex;gap:18px;align-items:center;justify-content:space-between">
<span style="font-size:18px;font-weight:700;letter-spacing:-.015em;color:#0F2557">{{ f.q }}</span>
<span style="width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:#F5A623;color:#0F2557;display:grid;place-items:center;font-weight:800;font-size:16px;transition:transform .4s cubic-bezier(.2,.8,.2,1);transform:{{ f.iconTf }}">+</span>
</button>
<div style="display:grid;grid-template-rows:{{ f.rows }};transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)">
<div style="overflow:hidden">
<p style="margin:0;padding:0 24px 24px;font-size:16.5px;line-height:1.6;color:#41557F;max-width:660px">{{ f.a }}</p>
</div>
</div>
</div>
</sc-for>
</div>
</div>
</section>
<section style="padding:clamp(72px,8vw,116px) 24px;background:#0F2557;color:#FDF8F0;position:relative;overflow:hidden">
<div style="position:absolute;bottom:-240px;right:-140px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.2),transparent 65%);animation:ku-drift 22s ease-in-out infinite;pointer-events:none"></div>
<div data-reveal="up" style="max-width:820px;margin:0 auto;text-align:center;position:relative">
<h2 style="font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(36px,5.2vw,68px);font-weight:800;letter-spacing:-.035em;line-height:1;margin:0 0 20px;text-wrap:balance">The first class costs nothing. The decision after it is yours.</h2>
<p style="font-size:19px;line-height:1.55;color:rgba(253,248,240,.74);margin:0 0 32px">Join the early-access list and we'll message you the moment classes open in your area.</p>
<a href="#early" style="display:inline-block;background:#F5A623;color:#0F2557;font-weight:800;font-size:18px;padding:19px 38px;border-radius:999px;animation:ku-pulse 3.4s ease-out infinite" style-hover="background:#fff">Get early access</a>
</div>
</section>
<footer style="padding:clamp(48px,5vw,72px) 24px 40px;background:#FDF8F0">
<div style="max-width:1220px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(15,37,87,.1)">
<div>
<svg width="183" height="46" viewBox="0 0 250 126" role="img" aria-label="Kautuki" style="display:block;margin-bottom:14px">
<g transform="translate(4,4)">
<text x="14" y="87" font-family="'Alex Brush', cursive" font-size="72" fill="#E8A020" stroke="#E8A020" stroke-width="1.7" stroke-linejoin="round" paint-order="stroke">Kau</text>
<text x="141.7" y="87" font-family="'Alex Brush', cursive" font-size="72" fill="#0F2557" stroke="#0F2557" stroke-width="1.7" stroke-linejoin="round" paint-order="stroke">tuki</text>
<g transform="translate(161.1,33.4)">
<polygon points="0,0 19.0,12.0 0,24.0 7.0,12.0" fill="#F5A623" opacity="0.65"></polygon>
<polygon points="7.0,0 29.0,12.0 7.0,24.0 14.0,12.0" fill="#F5A623"></polygon>
</g>
</g>
</svg>
<p style="margin:0;font-size:15px;line-height:1.55;color:#41557F;max-width:270px">Verified live tutoring for Bharat. Data stored in Mumbai (AWS ap-south-1).</p>
</div>
<div>
<div style="font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#B87508;margin-bottom:14px">Product</div>
<div style="display:flex;flex-direction:column;gap:9px;font-size:15px;font-weight:500">
<a href="#how">How it works</a><a href="#audience">Who it's for</a><a href="#verify">Verification</a><a href="#teach">Teach on Kautuki</a><a href="#early">Get early access</a>
</div>
</div>
<div>
<div style="font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#B87508;margin-bottom:14px">Company</div>
<div style="display:flex;flex-direction:column;gap:9px;font-size:15px;font-weight:500">
<a href="https://kautuki.co.in/contact.html">About</a><a href="https://kautuki.co.in/contact.html">Contact</a><a href="https://kautuki.co.in/contact.html#support">Support</a><a href="#faq">FAQ</a>
</div>
</div>
<div>
<div style="font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#B87508;margin-bottom:14px">Legal</div>
<div style="display:flex;flex-direction:column;gap:9px;font-size:15px;font-weight:500">
<a href="https://kautuki.co.in/privacy.html">Privacy (DPDP 2023)</a><a href="https://kautuki.co.in/terms.html">Terms</a><a href="https://kautuki.co.in/refund.html">Refund policy</a>
</div>
</div>
</div>
<div style="max-width:1220px;margin:22px auto 0;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13.5px;color:#5A6B8C;font-weight:500">
<span>© 2026 Kautuki · Data residency: Mumbai · Secured by Razorpay (PCI-DSS).</span>
<span style="display:flex;flex-wrap:wrap;gap:8px 18px"><a href="https://kautuki.co.in/index.html">kautuki.co.in</a><a href="https://kautuki.co.in/contact.html#support">Grievance officer</a></span>
</div>
</footer>
</main>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{"accent":{"editor":"color","default":"#F5A623","tsType":"string","options":["#F5A623","#E8A020","#17356F","#C2410C"],"section":"Brand"},"motion":{"editor":"enum","default":"full","options":["full","off"],"tsType":"'full' | 'off'","section":"Motion"}}">
class Component extends DCLogic {
state = { pct: 0, faqOpen: 0, feature: 0, role: 0 };
componentDidMount() {
this.onScroll = () => {
const h = document.documentElement;
const max = h.scrollHeight - h.clientHeight;
this.setState({ pct: max > 0 ? (h.scrollTop / max) * 100 : 0 });
};
window.addEventListener('scroll', this.onScroll, { passive: true });
this.onScroll();
if (this.props.motion !== 'off') {
const els = Array.from(document.querySelectorAll('[data-reveal]'));
els.forEach((el, i) => {
const dir = el.getAttribute('data-reveal');
el.style.opacity = '0';
el.style.transform = dir === 'left' ? 'translate3d(-26px,0,0)' : 'translate3d(0,32px,0)';
el.style.transition = 'opacity .7s cubic-bezier(.2,.8,.2,1) ' + ((i % 4) * 70) + 'ms, transform .8s cubic-bezier(.2,.8,.2,1) ' + ((i % 4) * 70) + 'ms';
});
this.io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.style.opacity = '1';
e.target.style.transform = 'none';
this.io.unobserve(e.target);
}
});
}, { rootMargin: '0px 0px -12% 0px', threshold: 0.12 });
els.forEach((el) => this.io.observe(el));
}
this.timer = setInterval(() => {
this.setState((s) => ({ feature: (s.feature + 1) % 4 }));
}, 3800);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.onScroll);
if (this.io) this.io.disconnect();
clearInterval(this.timer);
}
pickFeature = (i) => () => {
clearInterval(this.timer);
this.setState({ feature: i });
};
renderVals() {
const active = this.state.feature;
const accent = this.props.accent ?? '#F5A623';
const featureCopy = [
{ n: '1', title: 'Phone and OTP to sign in', body: 'No password to remember, and no card needed before your first free session.' },
{ n: '2', title: 'Adaptive video, audio-first fallback', body: 'When bandwidth drops the bitrate drops with it, and the lesson keeps going on audio.' },
{ n: '3', title: 'Whiteboard that syncs slowly', body: 'Strokes and notes arrive even on 3G, and stay saved for revision.' },
{ n: '4', title: 'Recordings for later', body: 'Every session is replayable, so a power cut is not a lost class.' }
];
const screenCopy = [
{ kicker: 'Step 1 · Find', title: 'Maths teacher · CBSE Class 10', cta: 'Book free session', rows: [
{ badge: 'RV', title: 'Rina Verma ✓ Verified', sub: 'Maths · 8 yrs · ★ 4.9 (212) · ₹350/hr', tint: 'rgba(245,166,35,.35)' },
{ badge: 'AK', title: 'Arjun Kapoor ✓ Verified', sub: 'Physics · 5 yrs · ★ 4.8 (96) · ₹400/hr', tint: 'rgba(23,53,111,.14)' },
{ badge: 'SD', title: 'Sunita Devi ✓ Verified', sub: 'Hindi · 3 yrs · ★ 5.0 (14) · ₹280/hr', tint: 'rgba(245,166,35,.22)' }
] },
{ kicker: 'Step 2 · Class', title: 'Live 1:1, low-data mode on', cta: 'Join class', rows: [
{ badge: '◉', title: 'Audio-first mode active', sub: 'Adaptive bitrate · connection stable', tint: 'rgba(245,166,35,.35)' },
{ badge: '✎', title: 'Whiteboard synced', sub: 'Trigonometry · page 3 of 4', tint: 'rgba(23,53,111,.14)' },
{ badge: '↺', title: 'Recording on', sub: 'Replay any time this month', tint: 'rgba(245,166,35,.22)' }
] },
{ kicker: 'Step 3 · Track', title: 'What changed this week', cta: 'See report', rows: [
{ badge: '↑', title: 'Maths accuracy 61% → 78%', sub: '4 sessions, 2 topics closed', tint: 'rgba(245,166,35,.35)' },
{ badge: '⏱', title: '3 h 20 m live time', sub: 'Attendance 100%', tint: 'rgba(23,53,111,.14)' },
{ badge: '₹', title: 'Paid per class', sub: 'Razorpay · refundable', tint: 'rgba(245,166,35,.22)' }
] },
{ kicker: 'Step 4 · Continue', title: 'Same teacher, your own pace', cta: 'Book next class', rows: [
{ badge: 'RV', title: 'Rina Verma · continue', sub: 'Sat 6:00 PM · ₹350/hr', tint: 'rgba(245,166,35,.35)' },
{ badge: '◍', title: 'Batch class option', sub: 'Lower cost per session', tint: 'rgba(23,53,111,.14)' },
{ badge: '⌂', title: 'Parent summary on WhatsApp', sub: 'Every Sunday', tint: 'rgba(245,166,35,.22)' }
] }
];
const faqData = [
{ q: 'Is the first session really free?', a: 'Yes. Your first session with any teacher on Kautuki is free, and you can do a free first session with more than one teacher before choosing.' },
{ q: 'What does hand-verified actually mean?', a: 'An Aadhaar identity match, qualification documents reviewed by our team, and a background check. All three, for every teacher, before their profile goes live.' },
{ q: 'Will it work on my phone and network?', a: 'Video uses adaptive bitrate so it keeps running on entry-level Android phones over 3G. On weak signal the class falls back to audio with a synced whiteboard instead of dropping.' },
{ q: 'How do payments and refunds work?', a: 'Payments are taken through Razorpay when you book a slot. Refunds follow our published refund policy, and teachers withdraw to their bank in about 24 hours with no fee.' },
{ q: 'Where is our data stored?', a: 'In Mumbai, on AWS ap-south-1. We handle personal data under the DPDP Act 2023, and you can read exactly what we keep in the privacy policy.' }
];
return {
scrollPct: this.state.pct + '%',
heroChips: ['100% hand-verified teachers', 'First session free', 'Razorpay secured', 'Works on 3G'],
waveBars: [
{ dur: '1.1s', delay: '0s' }, { dur: '.9s', delay: '.15s' }, { dur: '1.3s', delay: '.3s' },
{ dur: '.8s', delay: '.45s' }, { dur: '1.2s', delay: '.1s' }, { dur: '1s', delay: '.35s' },
{ dur: '1.4s', delay: '.2s' }
],
stats: [
{ n: '3 checks', label: 'Aadhaar, qualification and background, before going live' },
{ n: '₹0', label: 'for your first session with any teacher' },
{ n: 'Razorpay', label: 'secured payments, refunds per policy' },
{ n: '6–12', label: 'grades, in English or हिंदी' }
],
steps: [
{ n: '01', title: 'Sign up free', body: 'Phone number and an OTP. No password, ever, and no card to start.' },
{ n: '02', title: 'Find your teacher', body: 'Filter by subject, board, language, budget and rating until you find the right match.' },
{ n: '03', title: 'Book and pay', body: 'Pick a real slot from the teacher\u2019s calendar and pay securely through Razorpay.' },
{ n: '04', title: 'Join the class', body: 'One tap into live video on any phone. Your first session with any teacher is free.' }
],
gates: [
{ n: '01', title: 'Aadhaar identity', body: 'We match the person applying to a government ID. No aliases, no borrowed profiles, no agency middlemen.', tag: 'Identity matched' },
{ n: '02', title: 'Qualification papers', body: 'Degrees and teaching credentials are read by a human on our team, not scanned by a script.', tag: 'Documents reviewed' },
{ n: '03', title: 'Background check', body: 'A check on record and prior institutions before the profile is allowed to go live.', tag: 'Cleared or rejected' }
],
audience: [
{ side: 'Students and parents', bg: '#fff', fg: '#0F2557', muted: '#41557F', kicker: '#B87508', items: [
{ tag: 'Find', title: 'Best-match teachers', body: 'Filter by subject, board, language, budget and rating. New verified teachers get a fair boost.' },
{ tag: 'Learn', title: 'Live 1:1 and batch', body: 'Join a low-bandwidth video class, raise your hand, and ask doubts in chat.' },
{ tag: 'Free start', title: 'First session free', body: 'Try any teacher risk-free before you spend a rupee. No card needed.' }
] },
{ side: 'Teachers', bg: '#0F2557', fg: '#FDF8F0', muted: 'rgba(253,248,240,.72)', kicker: '#F5A623', items: [
{ tag: 'Earn', title: 'Keep up to 90%', body: 'Set your own rates per session type. Withdraw to your bank in about 24 hours, no fee.' },
{ tag: 'Schedule', title: 'Your hours, your way', body: 'Weekly availability plus one-off custom slots. Days off in one tap.' },
{ tag: 'Grow', title: 'Get discovered', body: 'A verified badge and a fair new-teacher boost help students find you.' }
] }
],
earlyPerks: ['First live session free', 'Priority teacher booking at launch', 'Founder pricing, locked in'],
roles: [
{ label: '🎓 Student / Parent', onClick: () => this.setState({ role: 0 }), bg: this.state.role === 0 ? '#F5A623' : 'rgba(253,248,240,.08)', fg: this.state.role === 0 ? '#0F2557' : '#FDF8F0', border: this.state.role === 0 ? '#F5A623' : 'rgba(253,248,240,.16)' },
{ label: '📚 Teacher', onClick: () => this.setState({ role: 1 }), bg: this.state.role === 1 ? '#F5A623' : 'rgba(253,248,240,.08)', fg: this.state.role === 1 ? '#0F2557' : '#FDF8F0', border: this.state.role === 1 ? '#F5A623' : 'rgba(253,248,240,.16)' }
],
appFeatures: featureCopy.map((f, i) => ({
...f,
onClick: this.pickFeature(i),
bg: i === active ? '#fff' : 'rgba(255,255,255,.45)',
border: i === active ? accent : 'rgba(15,37,87,.09)',
dot: i === active ? accent : 'rgba(15,37,87,.1)',
tf: i === active ? 'translate3d(6px,0,0)' : 'none'
})),
screens: screenCopy.map((s, i) => ({
...s,
op: i === active ? 1 : 0,
tf: i === active ? 'translate3d(0,0,0)' : (i < active ? 'translate3d(0,-24px,0)' : 'translate3d(0,24px,0)')
})),
langs: ['English', 'हिंदी', 'CBSE', 'Class 6–12', '1:1', 'Batch', 'English', 'हिंदी', 'CBSE', 'Class 6–12', '1:1', 'Batch', 'English', 'हिंदी', 'CBSE', 'Class 6–12', '1:1', 'Batch'],
teacherStats: [
{ n: 'Up to 90%', label: 'of what you charge stays with you' },
{ n: '~24h', label: 'bank withdrawals, no fee' },
{ n: 'You set', label: 'your rates, hours and session types' },
{ n: '3 checks', label: 'once, then you are live' }
],
faqs: faqData.map((f, i) => {
const open = this.state.faqOpen === i;
return {
...f,
rows: open ? '1fr' : '0fr',
iconTf: open ? 'rotate(45deg)' : 'rotate(0deg)',
onClick: () => this.setState({ faqOpen: open ? -1 : i })
};
})
};
}
}
</script>
</body>
</html>