mistri-patrika

Harsh Tyagi

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mistri Patrika — Services Next Door</title> <meta name="description" content="Mistri Patrika: verified local carpenters, available now. Booking made simple."> <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=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> <style> /* ========================================================= MISTRI PATRIKA — design tokens Note on i18n: labels use uppercase text-transform (not hardcoded caps) and containers use min-height / flexible widths rather than fixed truncation, so Hindi copy can drop in later without breaking layout. Space Mono is a Latin-only utility face — swap the utility font stack when Devanagari labels are added. ========================================================= */ :root{ --paper: #F2ECDC; --paper-deep: #EAE2CC; --card: #FBF8F0; --card-muted: #E7DFCA; --ink: #2A2420; --ink-soft: #6B6153; --brown-deep: #45301F; --wood: #8C5A34; --stamp: #7A2A28; --stamp-soft: rgba(122,42,40,0.08); --rule: #C7BBA0; --rule-strong: #9C8C6D; --shadow: rgba(42,36,28,0.16); --radius-card: 6px; --radius-pill: 999px; --maxw: 1180px; } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *,*::before,*::after{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body{ margin:0; background: var(--paper); color: var(--ink); font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; line-height: 1.6; position: relative; } /* paper grain overlay */ body::before{ content:""; position: fixed; inset:0; pointer-events:none; z-index: 2000; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); } img,svg{ display:block; max-width:100%; } a{ color: inherit; } button{ font-family: inherit; } .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .eyebrow{ font-family: 'Space Mono', monospace; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stamp); font-weight: 700; display:inline-block; margin: 0 0 10px; } h1,h2,h3{ font-family: 'Fraunces', Georgia, serif; color: var(--brown-deep); margin: 0; line-height: 1.12; } .section-head{ max-width: 640px; margin-bottom: 40px; } .section-head h2{ font-size: clamp(28px, 3.6vw, 40px); font-weight: 600; } .section-head p{ color: var(--ink-soft); font-size: 17px; margin-top: 12px; } section{ padding: 76px 0; border-bottom: 1px solid var(--rule); } section:last-of-type{ border-bottom: none; } /* focus visibility */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline: 2px dashed var(--stamp); outline-offset: 3px; } /* ---------------- header ---------------- */ .dateline{ background: var(--brown-deep); color: #E9DFC7; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.06em; } .dateline .wrap{ padding: 7px 28px; display:flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; } header.masthead{ background: var(--card); border-bottom: 3px double var(--brown-deep); position: sticky; top: 0; z-index: 500; } .masthead-row{ display:flex; align-items:center; justify-content: space-between; gap: 20px; padding: 20px 0 16px; border-bottom: 1px solid var(--rule); } .brand{ display:flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .brand-name{ font-size: clamp(26px, 4vw, 34px); font-weight: 700; letter-spacing: 0.01em; } .brand-tagline{ font-family:'Space Mono', monospace; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); border-left: 1px solid var(--rule-strong); padding-left: 14px; } .btn{ display:inline-flex; align-items:center; gap: 9px; font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; padding: 13px 22px; border-radius: var(--radius-pill); border: 1.5px solid var(--brown-deep); background: transparent; color: var(--brown-deep); cursor: pointer; text-decoration: none; min-height: 44px; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; white-space: normal; } .btn:hover{ transform: translateY(-2px); box-shadow: 0 6px 0 var(--shadow); } .btn-primary{ background: var(--stamp); border-color: var(--stamp); color: #F6EEDD; } .btn-primary:hover{ background: #692321; } .btn:disabled, .btn[aria-disabled="true"]{ cursor: not-allowed; opacity: 0.55; transform: none !important; box-shadow: none !important; } .btn svg{ width: 16px; height: 16px; } nav.mainnav{ padding: 12px 0; } .mainnav .wrap{ display:flex; align-items:center; justify-content: center; gap: 4px; position: relative; } .navlinks{ display:flex; gap: 8px; list-style:none; margin:0; padding:0; flex-wrap: wrap; justify-content:center; } .navlinks a{ font-family:'Space Mono', monospace; font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; text-decoration:none; padding: 9px 14px; border-radius: 3px; transition: background 0.15s ease, color 0.15s ease; } .navlinks a:hover{ background: var(--stamp-soft); color: var(--stamp); } .nav-toggle{ display:none; position:absolute; right:0; top: 50%; transform: translateY(-50%); background:none; border: 1.5px solid var(--brown-deep); border-radius: 6px; width: 42px; height: 42px; align-items:center; justify-content:center; cursor:pointer; } /* ---------------- hero ---------------- */ .hero .wrap{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items:center; padding-top: 64px; padding-bottom: 64px; } .hero h1{ font-size: clamp(34px, 5vw, 54px); font-weight: 700; margin-bottom: 18px; } .hero-sub{ font-size: 18px; color: var(--ink-soft); max-width: 46ch; margin-bottom: 30px; } .hero-ctas{ display:flex; gap: 14px; flex-wrap: wrap; } .btn-outline{ background: transparent; } .hero-art{ background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 30px; box-shadow: 0 10px 0 var(--shadow); } .hero-art svg{ width: 100%; height: auto; } .hero-art figcaption{ text-align:center; font-family:'Space Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 12px; } /* ---------------- carpenter cards ---------------- */ .grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .card{ background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 24px; box-shadow: 0 3px 0 var(--shadow); transition: transform 0.15s ease, box-shadow 0.15s ease; position: relative; } .card:hover{ transform: translateY(-3px); box-shadow: 0 8px 0 var(--shadow); } .cp-top{ display:flex; gap:14px; align-items:center; margin-bottom: 14px; } .cp-avatar{ flex: 0 0 auto; width: 56px; height: 56px; border-radius:50%; background: var(--paper-deep); border: 2px solid var(--wood); display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-weight:700; font-size: 18px; color: var(--brown-deep); } .cp-name{ font-family:'Fraunces', serif; font-weight:600; font-size:19px; color: var(--brown-deep); } .cp-area{ display:flex; align-items:center; gap:6px; font-size: 13.5px; color: var(--ink-soft); margin-top:2px; } .cp-area svg{ width:13px; height:13px; flex:0 0 auto; } .cp-tags{ display:flex; flex-wrap:wrap; gap:6px; margin: 10px 0 14px; } .tag{ font-family:'Space Mono', monospace; font-size: 11.5px; letter-spacing: 0.03em; background: var(--stamp-soft); color: var(--stamp); padding: 5px 10px; border-radius: var(--radius-pill); } .cp-meta{ display:flex; justify-content: space-between; align-items:center; border-top: 1px dashed var(--rule-strong); padding-top: 12px; margin-bottom: 16px; font-size: 13.5px; color: var(--ink-soft); } .cp-exp strong{ color: var(--ink); } .stars{ display:flex; align-items:center; gap:4px; } .stars svg{ width:14px; height:14px; } .star-filled{ fill: var(--wood); stroke: var(--wood); } .star-empty{ fill: none; stroke: var(--rule-strong); } .rating-num{ font-family:'Space Mono', monospace; font-size:12px; margin-left:4px; } .book-btn{ width:100%; justify-content:center; } .book-btn.is-booked{ background: var(--paper-deep); border-color: var(--wood); color: var(--wood); } /* perforation / ticket-stub motif, used for the primary booking action */ .book-btn{ position:relative; } .book-btn::before, .book-btn::after{ content:""; position:absolute; top:50%; transform: translateY(-50%); width:10px; height:10px; border-radius:50%; background: var(--paper); border: 1.5px solid var(--brown-deep); } .book-btn::before{ left:-5px; } .book-btn::after{ right:-5px; } /* ---------------- services overview cards ---------------- */ .svc-card{ display:flex; flex-direction:column; } .svc-top{ display:flex; align-items:flex-start; gap:14px; margin-bottom:12px; } .svc-icon-wrap{ flex:0 0 auto; width:48px; height:48px; border-radius:50%; background: var(--paper-deep); border: 2px solid var(--wood); display:flex; align-items:center; justify-content:center; } .svc-card.is-inactive .svc-icon-wrap{ border-color: var(--rule-strong); background: var(--card-muted); } .svc-icon-wrap svg{ width:22px; height:22px; color: var(--wood); } .svc-card.is-inactive .svc-icon-wrap svg{ color: var(--ink-soft); } .svc-title{ font-family:'Fraunces', serif; font-weight:600; font-size:18px; color: var(--brown-deep); } .svc-card.is-inactive .svc-title{ color: var(--ink-soft); } .svc-label{ font-size:14px; color: var(--ink-soft); margin-top:2px; } .svc-badge{ display:inline-flex; align-items:center; gap:6px; font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; padding:5px 11px; border-radius: var(--radius-pill); margin: 2px 0 14px; } .svc-badge svg{ width:11px; height:11px; } .svc-badge.active{ background: var(--stamp-soft); color: var(--stamp); border: 1px solid var(--stamp); } .svc-badge.soon{ background: transparent; color: var(--ink-soft); border: 1px dashed var(--rule-strong); } .svc-actions{ margin-top:auto; } .svc-link{ display:inline-flex; align-items:center; gap:7px; font-family:'Space Mono', monospace; font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; font-weight:700; color: var(--ink-soft); background:none; border:none; padding: 10px 0; cursor:pointer; min-height:44px; } .svc-link:hover{ color: var(--stamp); } .svc-link svg{ width:14px; height:14px; transition: transform 0.15s ease; } .svc-link[aria-expanded="true"] svg{ transform: rotate(180deg); } .svc-detail{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease; } .svc-detail-inner{ overflow:hidden; } .svc-card.is-open .svc-detail{ grid-template-rows: 1fr; } .svc-detail-body{ font-size:13.5px; color: var(--ink-soft); border-top: 1px dashed var(--rule-strong); padding-top: 12px; margin-top: 4px; } /* ---------------- carpenter booking banner ---------------- */ .cta-banner{ background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 26px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; box-shadow: 0 4px 0 var(--shadow); margin-top: 12px; } .cta-banner h3{ font-size:19px; font-weight:600; margin-bottom:4px; } .cta-banner p{ font-size:14px; color: var(--ink-soft); margin:0; } /* ---------------- services tag grid ---------------- */ .service-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 8px; } .service-item{ display:flex; align-items:center; gap: 12px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 14px 16px; } .service-item svg{ width:22px; height:22px; color: var(--wood); flex:0 0 auto; } .service-item span{ font-size: 15px; } /* ---------------- gallery ---------------- */ .gallery-card{ padding: 0; overflow:hidden; } .ba{ display:grid; grid-template-columns: 1fr 1fr; height: 150px; border-bottom: 1px dashed var(--rule-strong); } .ba-panel{ position:relative; display:flex; align-items:flex-end; } .ba-label{ font-family:'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px; margin: 8px; background: rgba(42,36,32,0.78); color: #F2ECDC; border-radius: 3px; } .ba-before{ background: repeating-linear-gradient(115deg, #cdbf9e 0 3px, #d9cdae 3px 9px); } .ba-after{ background: repeating-linear-gradient(90deg, #e9dcbd 0 6px, #f4ecd8 6px 16px); } .gallery-body{ padding: 18px 20px 22px; } .gallery-body h3{ font-size: 17px; font-weight: 600; margin-bottom: 6px; } .gallery-body p{ font-size: 14px; color: var(--ink-soft); margin:0; } /* ---------------- coming soon cards ---------------- */ .cs-card{ background: var(--card-muted); } .cs-ribbon{ position:absolute; top: 16px; right: -34px; background: var(--brown-deep); color: #EFE6CE; font-family:'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 40px; transform: rotate(28deg); box-shadow: 0 2px 4px var(--shadow); } .cs-top{ display:flex; align-items:center; gap:12px; margin-bottom: 10px; } .cs-top svg{ width:28px; height:28px; color: var(--ink-soft); } .cs-top h3{ font-size:18px; font-weight:600; color: var(--ink-soft); } .cs-card p{ font-size: 13.5px; color: var(--ink-soft); margin: 0 0 16px; } /* ---------------- how it works ---------------- */ .steps{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; counter-reset: step; } .step{ position: relative; padding-left: 54px; } .step-num{ position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%; border: 1.5px solid var(--brown-deep); display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-weight:700; color: var(--brown-deep); background: var(--card); } .step h3{ font-size: 17px; font-weight:600; margin-bottom: 6px; } .step p{ font-size: 14.5px; color: var(--ink-soft); margin:0; } /* ---------------- trust stamps ---------------- */ .stamps{ display:flex; flex-wrap:wrap; gap: 26px; justify-content: space-between; } .stamp-badge{ flex: 1 1 160px; text-align:center; padding: 18px 10px; border: 1.5px dashed var(--rule-strong); border-radius: 50% / 18%; } .stamp-badge:nth-child(odd){ transform: rotate(-1.4deg); } .stamp-badge:nth-child(even){ transform: rotate(1.4deg); } .stamp-badge svg{ width: 26px; height:26px; color: var(--stamp); margin: 0 auto 10px; } .stamp-badge span{ display:block; font-family:'Space Mono', monospace; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brown-deep); font-weight: 700; } /* ---------------- footer ---------------- */ footer{ background: var(--paper-deep); padding-top: 56px; } .footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; } .footer-grid h4{ font-family:'Space Mono', monospace; font-size: 12px; letter-spacing:0.1em; text-transform:uppercase; color: var(--stamp); margin: 0 0 14px; } .footer-grid p, .footer-grid li{ font-size: 14.5px; color: var(--ink-soft); } .footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .footer-grid a{ text-decoration:none; } .footer-grid a:hover{ color: var(--stamp); } .footer-brand{ font-family:'Fraunces', serif; font-size: 22px; font-weight:700; color: var(--brown-deep); margin-bottom: 8px; } .colophon{ border-top: 1px solid var(--rule-strong); padding: 16px 0; font-family:'Space Mono', monospace; font-size: 11.5px; color: var(--ink-soft); display:flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } /* ---------------- responsive ---------------- */ @media (max-width: 880px){ .hero .wrap{ grid-template-columns: 1fr; } .hero-art{ order: -1; max-width: 420px; margin: 0 auto; } .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 700px){ .dateline .wrap{ flex-direction: column; gap: 2px; padding: 8px 20px; } .masthead-row{ flex-direction: column; align-items: flex-start; gap: 12px; } .navlinks{ display:none; flex-direction: column; width:100%; align-items: stretch; text-align:center; } .mainnav.nav-open .navlinks{ display:flex; } .nav-toggle{ display:flex; } .mainnav .wrap{ flex-direction:column; } section{ padding: 52px 0; } .footer-grid{ grid-template-columns: 1fr; } } </style> </head> <body> <div class="dateline"> <div class="wrap"> <span id="dateline-date">Local Edition</span> <span>Verified Local Mistris · Booking Open</span> </div> </div> <header class="masthead"> <div class="wrap masthead-row"> <div class="brand"> <span class="brand-name">Mistri Patrika</span> <span class="brand-tagline">Services Next Door</span> </div> <a class="btn btn-primary" href="tel:+911800000000"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.6 10.5c1.4 2.8 3.7 5.1 6.5 6.5l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.5.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.9 21 3 13.1 3 3.4c0-.6.4-1 1-1h3.8c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.5.1.4 0 .8-.2 1L6.6 10.5z"/></svg> Call Now </a> </div> <nav class="mainnav" id="mainnav"> <div class="wrap"> <ul class="navlinks"> <li><a href="#home">Home</a></li> <li><a href="#services">Services</a></li> <li><a href="#carpenters">Carpenters</a></li> <li><a href="#work">Work</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> <button class="nav-toggle" id="navToggle" aria-label="Open menu" aria-expanded="false" aria-controls="mainnav"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg> </button> </div> </nav> </header> <section class="hero" id="home"> <div class="wrap"> <div> <span class="eyebrow">Notice · Neighbourhood Home Services</span> <h1>Your neighbourhood's home services, all in one place</h1> <p class="hero-sub">Mistri Patrika is bringing trusted local professionals online, one department at a time. Carpenter services are available now — verified, reliable, and just a call away. More departments are on the way.</p> <div class="hero-ctas"> <a href="#services" class="btn btn-outline">View Services</a> <a href="#carpenters" class="btn btn-primary">Book Carpenter</a> <a href="#work" class="btn btn-outline">See Work</a> </div> </div> <figure class="hero-art"> <svg viewBox="0 0 320 260" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="160" cy="130" r="112" stroke="#8C5A34" stroke-width="1.5" stroke-dasharray="2 5"/> <g stroke="#45301F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">  <path d="M70 175 L150 95" /> <path d="M150 95 l14 6 -8 12 z" fill="#45301F"/> <path d="M78 168 l64 -64" stroke-dasharray="3 6"/>  <path d="M200 70 l55 55" /> <path d="M196 56 l24 -14 18 18 -14 24 z" fill="none"/> <path d="M196 56 l24 -14 18 18 -14 24" />  <rect x="88" y="176" width="150" height="20" rx="2" /> <path d="M108 176 v20 M138 176 v20 M168 176 v20 M198 176 v20" stroke-width="1.2"/> </g> </svg> <figcaption>Est. for your neighbourhood</figcaption> </figure> </div> </section> <section id="services"> <div class="wrap"> <div class="section-head"> <span class="eyebrow">Our Services</span> <h2>One neighbourhood directory, every home service</h2> <p>Carpenters are live and ready to book today. Every other department below is a trusted professional category we're onboarding next.</p> </div> <div class="grid" id="serviceOverviewGrid"></div> </div> </section> <section id="carpenters"> <div class="wrap"> <div class="section-head"> <span class="eyebrow">Now Serving</span> <h2>Carpenters — fully active</h2> <p>Every mistri listed below is verified, experienced, and ready to take your booking today. Browse the workers, see what they handle, then book directly.</p> </div> <div class="grid" id="carpenterGrid"></div> </div> </section> <section id="carpenter-work-types"> <div class="wrap"> <div class="section-head"> <span class="eyebrow">Types Of Carpenter Work</span> <h2>What our carpenters handle</h2> </div> <div class="service-grid" id="serviceGrid"></div> <div class="cta-banner"> <div> <h3>Ready to get your work done?</h3> <p>Book a verified carpenter today — most visits can be arranged within 24 hours.</p> </div> <a href="#carpenterGrid" class="btn btn-primary" onclick="document.getElementById('carpenterGrid').scrollIntoView({behavior:'smooth'}); return false;">Book Carpenter</a> </div> </div> </section> <section id="work"> <div class="wrap"> <div class="section-head"> <span class="eyebrow">Portfolio Notes</span> <h2>From the work gallery</h2> <p>A few recent jobs — before the mistri arrived, and after the work was done.</p> </div> <div class="grid" id="galleryGrid"></div> </div> </section> <section id="how" aria-label="How it works"> <div class="wrap"> <div class="section-head"> <span class="eyebrow">How It Works</span> <h2>Booking a mistri is simple</h2> </div> <div class="steps" id="stepsGrid"></div> </div> </section> <section id="about" aria-label="Trust"> <div class="wrap"> <div class="section-head"> <span class="eyebrow">Built On Trust</span> <h2>Why neighbours choose us</h2> </div> <div class="stamps" id="stampsRow"></div> </div> </section> <footer id="contact"> <div class="wrap"> <div class="footer-grid"> <div> <div class="footer-brand">Mistri Patrika</div> <p>Verified local carpenters, available now. More departments arriving soon.</p> <a class="btn btn-primary" href="tel:+911800000000" style="margin-top:14px;"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.6 10.5c1.4 2.8 3.7 5.1 6.5 6.5l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.5.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.9 21 3 13.1 3 3.4c0-.6.4-1 1-1h3.8c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.5.1.4 0 .8-.2 1L6.6 10.5z"/></svg> Call Now </a> </div> <div> <h4>Service Areas</h4> <ul> <li>Rohini, Delhi</li> <li>Dwarka, Delhi</li> <li>Lajpat Nagar, Delhi</li> <li>Sector 62, Noida</li> <li>More areas soon</li> </ul> </div> <div> <h4>Quick Links</h4> <ul> <li><a href="#home">Home</a></li> <li><a href="#services">Services</a></li> <li><a href="#carpenters">Carpenters</a></li> <li><a href="#work">Work Gallery</a></li> <li><a href="#about">About</a></li> </ul> </div> <div> <h4>Contact</h4> <ul> <li>+91 1800‑000‑000</li> <li>hello@mistripatrika.in</li> <li>Mon–Sat, 8am–8pm</li> </ul> </div> </div> <div class="colophon"> <span>Printed digitally for your neighbourhood.</span> <span>Issue No. 001 · © <span id="year"></span> Mistri Patrika</span> </div> </div> </footer> <script> (function(){ "use strict"; /* ---------- dateline ---------- */ var d = new Date(); document.getElementById('dateline-date').textContent = d.toLocaleDateString('en-IN', { weekday:'long', day:'numeric', month:'long', year:'numeric' }); document.getElementById('year').textContent = d.getFullYear(); /* ---------- icon set (simple, single-stroke, reusable) ---------- */ var ICONS = { pin: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-6.4-7-11.5A7 7 0 0 1 19 9.5C19 14.6 12 21 12 21z"/><circle cx="12" cy="9.5" r="2.3"/></svg>', hammer: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 6.5l3 3L9 18l-4 1 1-4 8.5-8.5z"/><path d="M13 5l1.5-1.5a2 2 0 0 1 2.8 0l2.2 2.2a2 2 0 0 1 0 2.8L18 10"/></svg>', door: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="3" width="14" height="18" rx="1"/><circle cx="14.5" cy="12" r="0.8" fill="currentColor" stroke="none"/></svg>', window: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="1"/><path d="M12 4v16M4 12h16"/></svg>', shelf: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8h16M4 16h16"/><path d="M6 8v3M18 8v3M6 16v3M18 16v3"/></svg>', bed: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6"/><path d="M3 18v2M21 18v2"/><path d="M3 13V9a2 2 0 0 1 2-2h4v6"/></svg>', wood: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="9" width="18" height="6" rx="1"/><path d="M7 9v6M12 9v6M17 9v6"/></svg>', polish: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></svg>', wrench: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a4 4 0 0 0-5.4 5l-6.3 6.3 2 2 6.3-6.3a4 4 0 0 0 5-5.4l-2.7 2.7-2-2 2.7-2.7z"/></svg>', bolt: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8z"/></svg>', fan: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1.6"/><path d="M12 10.4C10 6 12 3 12 3s2 3 0 7.4M13.6 12C18 10 21 12 21 12s-3 2-7.4 0M12 13.6C14 18 12 21 12 21s-2-3 0-7.4M10.4 12C6 14 3 12 3 12s3-2 7.4 0"/></svg>', roller: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="14" height="6" rx="1"/><path d="M17 8h2a2 2 0 0 1 2 2v2h-4M11 11v9"/></svg>', broom: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 4 9 15"/><path d="M9 15l-5 5M9 15l3-8 4 4-8 3zM4 20l2-2M8 20l1-3"/></svg>', toolbox: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="9" width="18" height="10" rx="1.5"/><path d="M8 9V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v3M3 13h18"/></svg>', check: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.6-3 8-7 10-4-2-7-5.4-7-10V6l7-3z"/><path d="M9 12l2 2 4-4"/></svg>', tag: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3h6a2 2 0 0 1 2 2v6l-9 9-8-8 9-9z"/><circle cx="15" cy="7" r="1.2"/></svg>', house: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11l8-7 8 7"/><path d="M6 10v9h12v-9"/></svg>', headset: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 13v-1a8 8 0 0 1 16 0v1"/><rect x="3" y="13" width="4" height="6" rx="1.2"/><rect x="17" y="13" width="4" height="6" rx="1.2"/><path d="M20 19a4 4 0 0 1-4 3h-2"/></svg>', clipboard: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="12" height="17" rx="1.5"/><rect x="9" y="2.5" width="6" height="3" rx="1"/><path d="M9 12h6M9 16h6"/></svg>' }; function starRow(rating){ var full = Math.round(rating); var html = '<span class="stars" aria-hidden="true">'; for (var i=1;i<=5;i++){ html += i <= full ? '<svg class="star-filled" viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.7 1.6 7-6.2-3.7L6 21l1.6-7L2.2 9.3l7.1-.7z"/></svg>' : '<svg class="star-empty" viewBox="0 0 24 24" stroke-width="1.5"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.7 1.6 7-6.2-3.7L6 21l1.6-7L2.2 9.3l7.1-.7z"/></svg>'; } html += '<span class="rating-num">' + rating.toFixed(1) + '</span></span>'; return html; } /* ---------- data ---------- */ var carpenters = [ { name:"Ramesh Verma", initials:"RV", skills:["Furniture Repair","Modular Work"], exp:12, area:"Rohini, Delhi", rating:4.8 }, { name:"Suresh Yadav", initials:"SY", skills:["Door Fitting","Window Repair"], exp:8, area:"Lajpat Nagar, Delhi", rating:4.6 }, { name:"Vinod Prajapati", initials:"VP", skills:["Custom Woodwork","Polishing"], exp:15, area:"Dwarka, Delhi", rating:4.9 }, { name:"Mahesh Solanki", initials:"MS", skills:["Bed & Table Repair","Shelf Work"], exp:6, area:"Sector 62, Noida", rating:4.5 } ]; var services = [ { label:"Wooden Furniture Repair", icon:"hammer" }, { label:"Door Fitting", icon:"door" }, { label:"Window Repair", icon:"window" }, { label:"Modular Shelf Work", icon:"shelf" }, { label:"Bed & Table Repair", icon:"bed" }, { label:"Custom Woodwork", icon:"wood" }, { label:"Polishing & Finishing", icon:"polish" } ]; var galleryItems = [ { title:"Wardrobe Restoration", note:"Old sliding wardrobe re-fitted with new tracks and a fresh polish." }, { title:"Main Door Refit", note:"Warped entrance door replaced and hinged for a snug, quiet close." }, { title:"Study Table Repair", note:"Wobbly joints reglued and reinforced; finished with matching stain." } ]; var serviceCategories = [ { name:"Carpenters", icon:"hammer", label:"Furniture, doors, windows & custom woodwork", status:"active", statusLabel:"Available Now" }, { name:"Plumbers", icon:"wrench", label:"Leak fixes, fittings & pipeline work", status:"soon", statusLabel:"Coming Soon", detail:"Plumbing will be available soon. We're onboarding trusted, verified plumbers in your area." }, { name:"Electricians", icon:"bolt", label:"Wiring, switches & repairs", status:"soon", statusLabel:"Coming Soon", detail:"Electrician services will be available soon. We're expanding to this category shortly." }, { name:"AC Repair", icon:"fan", label:"Servicing, gas refill & installation", status:"soon", statusLabel:"Available Soon", detail:"AC repair is on its way. Updates on availability in your area are coming shortly." }, { name:"Painters", icon:"roller", label:"Interior & exterior painting", status:"soon", statusLabel:"Coming Soon", detail:"Painting services will be available soon. We're expanding to this category shortly." }, { name:"Cleaners", icon:"broom", label:"Home & deep cleaning", status:"soon", statusLabel:"Available Soon", detail:"Home cleaning is on its way. We're onboarding trusted professionals for this department." }, { name:"Handyman", icon:"toolbox", label:"General repairs & odd jobs", status:"soon", statusLabel:"Coming Soon", detail:"Handyman services will be available soon. We're expanding to this category shortly." } ]; var steps = [ { title:"Choose Carpenter", note:"Browse verified mistris near you and pick the right fit.", icon:"pin" }, { title:"Share Work Details", note:"Tell us what needs fixing, fitting, or building.", icon:"clipboard" }, { title:"Book Visit", note:"Pick a time that works — we confirm it right away.", icon:"check" }, { title:"Get Work Done", note:"Your mistri arrives, finishes the job, done.", icon:"hammer" } ]; var stamps = [ { label:"Verified Workers", icon:"check" }, { label:"Transparent Pricing", icon:"tag" }, { label:"Local Service", icon:"house" }, { label:"Easy Support", icon:"headset" }, { label:"Simple Booking", icon:"clipboard" } ]; /* ---------- render: carpenters ---------- */ var carpenterGrid = document.getElementById('carpenterGrid'); carpenters.forEach(function(c, idx){ var tagsHtml = c.skills.map(function(s){ return '<span class="tag">'+s+'</span>'; }).join(''); var el = document.createElement('article'); el.className = 'card'; el.innerHTML = '<div class="cp-top">' + '<div class="cp-avatar" aria-hidden="true">'+c.initials+'</div>' + '<div>' + '<div class="cp-name">'+c.name+'</div>' + '<div class="cp-area">'+ICONS.pin+'<span>'+c.area+'</span></div>' + '</div>' + '</div>' + '<div class="cp-tags">'+tagsHtml+'</div>' + '<div class="cp-meta">' + '<span class="cp-exp"><strong>'+c.exp+'</strong> yrs experience</span>' + starRow(c.rating) + '</div>' + '<button type="button" class="btn btn-primary book-btn" data-idx="'+idx+'">Book Now</button>'; carpenterGrid.appendChild(el); }); carpenterGrid.addEventListener('click', function(e){ var btn = e.target.closest('.book-btn'); if(!btn || btn.classList.contains('is-booked')) return; btn.classList.add('is-booked'); btn.textContent = '✓ Booked — we\'ll call you soon'; btn.setAttribute('aria-disabled', 'true'); }); /* ---------- render: services ---------- */ var serviceGrid = document.getElementById('serviceGrid'); services.forEach(function(s){ var el = document.createElement('div'); el.className = 'service-item'; el.innerHTML = ICONS[s.icon] + '<span>' + s.label + '</span>'; serviceGrid.appendChild(el); }); /* ---------- render: gallery ---------- */ var galleryGrid = document.getElementById('galleryGrid'); galleryItems.forEach(function(g){ var el = document.createElement('article'); el.className = 'card gallery-card'; el.innerHTML = '<div class="ba">' + '<div class="ba-panel ba-before"><span class="ba-label">Before</span></div>' + '<div class="ba-panel ba-after"><span class="ba-label">After</span></div>' + '</div>' + '<div class="gallery-body"><h3>'+g.title+'</h3><p>'+g.note+'</p></div>'; galleryGrid.appendChild(el); }); /* ---------- render: services overview ---------- */ var checkBadgeIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>'; var clockBadgeIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg>'; var chevronIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>'; var serviceOverviewGrid = document.getElementById('serviceOverviewGrid'); serviceCategories.forEach(function(svc, idx){ var isActive = svc.status === 'active'; var el = document.createElement('article'); el.className = 'card svc-card' + (isActive ? '' : ' is-inactive'); var badgeHtml = '<span class="svc-badge ' + (isActive ? 'active' : 'soon') + '">' + (isActive ? checkBadgeIcon : clockBadgeIcon) + '<span>' + svc.statusLabel + '</span></span>'; var actionHtml; if (isActive){ actionHtml = '<div class="svc-actions"><a href="#carpenters" class="btn btn-primary">Explore Carpenters</a></div>'; } else { actionHtml = '<div class="svc-actions">' + '<button type="button" class="svc-link" data-toggle="' + idx + '" aria-expanded="false">Learn More ' + chevronIcon + '</button>' + '</div>' + '<div class="svc-detail"><div class="svc-detail-inner"><p class="svc-detail-body">' + svc.detail + '</p></div></div>'; } el.innerHTML = '<div class="svc-top">' + '<div class="svc-icon-wrap" aria-hidden="true">' + ICONS[svc.icon] + '</div>' + '<div><div class="svc-title">' + svc.name + '</div><div class="svc-label">' + svc.label + '</div></div>' + '</div>' + badgeHtml + actionHtml; serviceOverviewGrid.appendChild(el); }); serviceOverviewGrid.addEventListener('click', function(e){ var toggle = e.target.closest('.svc-link'); if(!toggle) return; var card = toggle.closest('.svc-card'); var open = card.classList.toggle('is-open'); toggle.setAttribute('aria-expanded', open ? 'true' : 'false'); toggle.innerHTML = (open ? 'Show Less ' : 'Learn More ') + chevronIcon; }); /* ---------- render: how it works ---------- */ var stepsGrid = document.getElementById('stepsGrid'); steps.forEach(function(s, i){ var el = document.createElement('div'); el.className = 'step'; el.innerHTML = '<div class="step-num" aria-hidden="true">'+(i+1)+'</div>' + '<h3>'+s.title+'</h3><p>'+s.note+'</p>'; stepsGrid.appendChild(el); }); /* ---------- render: trust stamps ---------- */ var stampsRow = document.getElementById('stampsRow'); stamps.forEach(function(s){ var el = document.createElement('div'); el.className = 'stamp-badge'; el.innerHTML = ICONS[s.icon] + '<span>'+s.label+'</span>'; stampsRow.appendChild(el); }); /* ---------- mobile nav ---------- */ var navToggle = document.getElementById('navToggle'); var mainnav = document.getElementById('mainnav'); navToggle.addEventListener('click', function(){ var open = mainnav.classList.toggle('nav-open'); navToggle.setAttribute('aria-expanded', open ? 'true' : 'false'); }); mainnav.querySelectorAll('.navlinks a').forEach(function(a){ a.addEventListener('click', function(){ mainnav.classList.remove('nav-open'); navToggle.setAttribute('aria-expanded', 'false'); }); }); })(); </script> </body> </html> { "project_meta": { "project_name": "SERVICES NEXT DOOR", "alternate_brand_name": "Mistri Patrika", "project_type": "hyperlocal home services marketplace", "launch_region": "Delhi NCR", "launch_phase": "carpenters only", "future_categories": [ "Plumbers", "Electricians", "AC Repair", "Painters", "Cleaners", "Handyman" ], "goal": "Build a complete full-stack startup-ready project including website, mobile app, backend APIs, admin dashboard, provider workflow, booking flow, and scalable architecture." }, "product_vision": { "summary": "Create a trust-first hyperlocal home services platform that connects customers with verified local workers. The first live category is carpenters. Other service categories must be visible as coming soon. The product should support website visitors, mobile app users, service providers, and admins.", "core_value_proposition": [ "Verified local workers", "Simple booking flow", "Clear service categories", "Easy support", "Future-ready multi-service architecture", "Paper-style trustworthy user experience" ], "business_goal": "Launch a real revenue-generating MVP in NCR and expand service categories after validating the carpentry-first model." }, "design_system": { "theme": "old-school classic paper directory", "style_keywords": [ "paper UI", "printed directory", "newspaper-inspired", "classic cards", "simple", "neat", "clean", "warm neutral", "human-friendly", "easy to understand" ], "design_rules": [ "Do not use glossy startup visuals", "Do not use neon colors", "Do not use glassmorphism", "Do not use futuristic effects", "Do not use overly animated UI", "Use cream, warm white, charcoal, deep brown, faded black, and subtle wood accents", "Use thin borders, paper texture, classic typography, and card-based layouts", "Keep the UI accessible for both literate and less-literate users", "Use large touch-friendly buttons and simple labels", "Maintain a trustworthy and calm visual identity across web and app" ], "responsiveness": { "required": true, "targets": [ "mobile", "tablet", "desktop" ] } }, "deliverables": { "website": { "required": true, "type": "responsive dynamic web application", "pages": [ "Home", "Services", "Carpenters Listing", "Carpenter Detail", "Work Gallery", "Booking Flow", "About", "Contact", "Customer Login/Register", "Customer Dashboard", "Support", "Privacy Policy", "Terms of Service" ] }, "mobile_app": { "required": true, "platforms": [ "Android", "iOS" ], "preferred_stack": "Flutter or React Native", "screens": [ "Splash", "Onboarding", "Location Selection", "Home", "Service Categories", "Carpenters Listing", "Carpenter Profile", "Booking Form", "Booking Confirmation", "Orders", "Order Detail", "Payments", "Profile", "Support", "Notifications" ] }, "provider_app": { "required": true, "type": "mobile-first provider panel or separate provider app", "screens": [ "Provider Login", "KYC Upload", "Availability Toggle", "Assigned Bookings", "Booking Detail", "Mark Arrived", "Start Job", "Complete Job", "Payment Status", "Ratings and Reviews", "Support" ] }, "admin_dashboard": { "required": true, "modules": [ "Customer Management", "Provider Management", "Service Categories", "Zones and Areas", "Bookings", "Assignments", "Payments", "Payouts", "Complaints", "Reviews", "Notifications", "Analytics", "CMS Content Management" ] }, "backend": { "required": true, "includes": [ "Authentication", "Role-based access control", "REST API or GraphQL API", "Booking engine", "Provider assignment logic", "Payment integration", "Notification service", "Admin workflows", "Scalable database schema" ] } }, "user_roles": [ { "role": "guest", "abilities": [ "Browse services", "View carpenters", "View work gallery", "See coming soon categories", "Contact support" ] }, { "role": "customer", "abilities": [ "Register", "Login", "Manage profile", "Save addresses", "Browse services", "Book carpenter", "Schedule visit", "Track order", "Pay online or cash", "Rate service", "Raise complaint", "View booking history" ] }, { "role": "provider", "abilities": [ "Register or be onboarded", "Upload KYC", "Manage profile", "Set availability", "Accept or reject jobs", "View earnings", "Update job status", "Receive ratings" ] }, { "role": "admin", "abilities": [ "Manage all users", "Approve providers", "Manage categories", "Manage service packages", "Assign providers", "Handle disputes", "Manage refunds", "Manage payouts", "View analytics" ] } ], "website_requirements": { "home_page": { "sections": [ "Header", "Hero", "Services Overview", "Active Carpenters Section", "Carpenter Work Types", "Work Gallery", "Coming Soon Categories", "How It Works", "Trust Section", "Footer" ], "header": { "brand_name": "SERVICES NEXT DOOR", "navigation": [ "Home", "Services", "Carpenters", "Work Gallery", "About", "Contact" ], "cta": "Call Now" }, "hero": { "headline": "Trusted carpenters available now in your neighbourhood", "subtext": "Book verified local professionals with a simple and clear process.", "ctas": [ "Book Carpenter", "View Services", "See Work" ] }, "services_overview": { "show_all_categories": true, "active_category": "Carpenters", "other_categories_state": "Coming Soon or Available Soon" } }, "carpenter_listing": { "filters": [ "Area", "Experience", "Skills", "Rating", "Availability" ], "card_fields": [ "Photo", "Name", "Skill tags", "Experience", "Service area", "Rating", "Book Now button" ] }, "carpenter_detail": { "sections": [ "Profile Summary", "Experience", "Service Types", "Area Covered", "Ratings", "Work Gallery", "Pricing or Price Guidance", "Booking CTA" ] }, "coming_soon_categories": { "visible": true, "interactive_mode": "inactive placeholder with learn more text", "message_examples": [ "Coming Soon", "Available Soon in Your Area", "We are onboarding trusted professionals" ] } }, "mobile_app_requirements": { "customer_app_features": [ "Phone OTP login", "Location and area selection", "Browse service categories", "View carpenter profiles", "Book services", "Track job progress", "Chat or call support", "Payment integration", "Ratings and feedback", "Notification center" ], "provider_app_features": [ "Secure login", "KYC profile onboarding", "Accept or reject bookings", "Availability control", "Job status updates", "Earnings dashboard", "Payout tracking", "Support requests" ] }, "functional_modules": [ { "module": "Authentication and Authorization", "features": [ "Customer login via OTP/email", "Provider login", "Admin login", "JWT or session auth", "Role-based permissions" ] }, { "module": "User Management", "features": [ "Customer profiles", "Provider profiles", "Saved addresses", "Profile editing", "Account status" ] }, { "module": "Service Category Management", "features": [ "Active categories", "Coming soon categories", "Category descriptions", "Category status management" ] }, { "module": "Provider Management", "features": [ "KYC", "Skill tags", "Serviceable areas", "Experience", "Ratings", "Approval workflow", "Availability" ] }, { "module": "Booking Management", "features": [ "Create booking", "Select address", "Select service type", "Choose preferred time", "Auto or manual provider assignment", "Booking status tracking", "Reschedule or cancel" ] }, { "module": "Payments", "features": [ "Cash on service", "UPI / payment gateway", "Booking fee or convenience fee", "Invoice generation", "Refund handling", "Provider payout ledger" ] }, { "module": "Ratings and Reviews", "features": [ "Customer review submission", "Provider rating calculation", "Review moderation" ] }, { "module": "Support and Complaint Handling", "features": [ "Complaint ticket creation", "Issue categorization", "Status tracking", "Escalation management" ] }, { "module": "Notifications", "features": [ "SMS notifications", "Push notifications", "Email notifications", "Booking confirmation alerts", "Provider assignment alerts" ] }, { "module": "Analytics", "features": [ "Bookings by area", "Revenue reports", "Provider utilization", "Customer repeat rate", "Cancellation rate", "Category performance" ] } ], "database_schema": { "entities": [ { "name": "users", "fields": [ "id", "role", "full_name", "phone", "email", "password_hash", "status", "created_at", "updated_at" ] }, { "name": "customer_profiles", "fields": [ "id", "user_id", "default_address_id", "preferred_language", "notes" ] }, { "name": "provider_profiles", "fields": [ "id", "user_id", "display_name", "bio", "experience_years", "service_radius_km", "kyc_status", "approval_status", "availability_status", "avg_rating", "total_jobs_completed" ] }, { "name": "addresses", "fields": [ "id", "user_id", "label", "address_line_1", "address_line_2", "landmark", "city", "state", "pincode", "latitude", "longitude" ] }, { "name": "zones", "fields": [ "id", "name", "city", "status" ] }, { "name": "provider_zones", "fields": [ "id", "provider_id", "zone_id" ] }, { "name": "service_categories", "fields": [ "id", "name", "slug", "status", "description", "sort_order" ] }, { "name": "service_types", "fields": [ "id", "category_id", "name", "slug", "description", "base_price_type", "status" ] }, { "name": "provider_skills", "fields": [ "id", "provider_id", "service_type_id" ] }, { "name": "bookings", "fields": [ "id", "customer_id", "provider_id", "category_id", "service_type_id", "address_id", "booking_date", "booking_time_slot", "status", "problem_description", "estimated_price", "final_price", "payment_status", "created_at" ] }, { "name": "booking_status_logs", "fields": [ "id", "booking_id", "status", "note", "created_by", "created_at" ] }, { "name": "payments", "fields": [ "id", "booking_id", "customer_id", "amount", "currency", "method", "gateway_reference", "payment_status", "paid_at" ] }, { "name": "provider_payouts", "fields": [ "id", "provider_id", "booking_id", "gross_amount", "platform_fee", "net_amount", "payout_status", "paid_at" ] }, { "name": "reviews", "fields": [ "id", "booking_id", "customer_id", "provider_id", "rating", "comment", "created_at" ] }, { "name": "support_tickets", "fields": [ "id", "user_id", "booking_id", "ticket_type", "subject", "message", "status", "priority", "created_at" ] }, { "name": "cms_sections", "fields": [ "id", "page_key", "section_key", "title", "content", "status" ] } ] }, "api_requirements": { "architecture": "REST API", "base_modules": [ "auth", "customers", "providers", "categories", "services", "bookings", "payments", "reviews", "support", "notifications", "admin" ], "sample_endpoints": [ "POST /auth/register", "POST /auth/login", "POST /auth/otp/send", "POST /auth/otp/verify", "GET /categories", "GET /services", "GET /providers", "GET /providers/:id", "POST /bookings", "GET /bookings/:id", "PATCH /bookings/:id/status", "POST /payments/create-order", "POST /reviews", "POST /support/tickets", "GET /admin/bookings", "GET /admin/providers", "PATCH /admin/providers/:id/approve" ] }, "recommended_tech_stack": { "frontend_web": [ "Next.js", "React", "TypeScript", "Tailwind CSS" ], "mobile_app": [ "Flutter" ], "backend": [ "Node.js", "NestJS or Express.js", "TypeScript" ], "database": [ "PostgreSQL" ], "orm": [ "Prisma" ], "auth": [ "JWT", "OTP login" ], "storage": [ "Cloudinary or S3" ], "notifications": [ "Firebase Cloud Messaging", "Twilio or MSG91", "Email service" ], "payments": [ "Razorpay or Stripe where applicable" ], "deployment": [ "Vercel for web frontend", "Railway or Render or AWS for backend", "Supabase or managed PostgreSQL", "Firebase for push notifications" ] }, "development_phases": [ { "phase": 1, "name": "Foundation", "goals": [ "Set up monorepo or workspace", "Create database schema", "Implement auth", "Build responsive website shell", "Build admin dashboard shell", "Build customer app shell", "Seed carpenter data" ] }, { "phase": 2, "name": "Core Marketplace Flow", "goals": [ "Implement service categories", "Implement carpenter listing and detail pages", "Build booking flow", "Build provider onboarding", "Build admin booking and provider management" ] }, { "phase": 3, "name": "Payments and Operations", "goals": [ "Integrate payment gateway", "Add notifications", "Add booking status tracking", "Add review and complaint workflows", "Add analytics dashboard" ] }, { "phase": 4, "name": "Production Readiness", "goals": [ "Testing and QA", "Performance optimization", "Security hardening", "Deployment", "Documentation", "Seed coming soon categories for future activation" ] } ], "non_functional_requirements": { "performance": [ "Fast initial page load", "Responsive interactions", "Optimized images and assets" ], "security": [ "Hashed passwords", "Secure tokens", "Input validation", "Rate limiting", "Role-based access control", "Audit logs for admin actions" ], "usability": [ "Simple navigation", "Accessible contrast", "Readable typography", "Touch-friendly mobile layout", "Bilingual-friendly content structure" ], "scalability": [ "Support future categories", "Support multiple NCR zones", "Support future provider growth", "Modular architecture" ] }, "testing_requirements": { "types": [ "unit testing", "integration testing", "API testing", "UI testing", "responsive testing", "basic accessibility testing" ], "critical_user_flows": [ "Customer signup/login", "Browse services", "Open carpenter detail", "Create booking", "Provider accepts booking", "Admin manages booking", "Payment success", "Review submission" ] }, "content_seed_data": { "initial_carpenters": [ { "name": "Ramesh Verma", "skills": [ "Furniture Repair", "Modular Work" ], "experience_years": 12, "area": "Rohini, Delhi", "rating": 4.8 }, { "name": "Suresh Yadav", "skills": [ "Door Fitting", "Window Repair" ], "experience_years": 8, "area": "Lajpat Nagar, Delhi", "rating": 4.6 }, { "name": "Vinod Prajapati", "skills": [ "Custom Woodwork", "Polishing" ], "experience_years": 15, "area": "Dwarka, Delhi", "rating": 4.9 }, { "name": "Mahesh Solanki", "skills": [ "Bed Table Repair", "Shelf Work" ], "experience_years": 6, "area": "Sector 62, Noida", "rating": 4.5 } ], "initial_carpenter_services": [ "Wooden Furniture Repair", "Door Fitting", "Window Repair", "Modular Shelf Work", "Bed and Table Repair", "Custom Woodwork", "Polishing and Finishing" ] }, "ui_guidelines": { "preserve_existing_ui_direction": true, "core_visual_language": "paper-card old-school local services catalog", "home_page_priority": "Carpenters must remain the only fully active category in launch phase", "coming_soon_logic": "All other categories must be visible but inactive with informative placeholder messaging", "cards": [ "paper-like background", "thin border", "soft shadow", "subtle rounded corners", "clear labels", "simple icons" ], "cta_language": [ "Book Carpenter", "Call Now", "See Work", "Coming Soon" ] }, "implementation_rules": { "must_build_real_project_structure": true, "must_generate_clean_reusable_code": true, "must_use_component_based_architecture": true, "must_create_clear_folder_structure": true, "must_include_environment_configuration_examples": true, "must_include_sample_seed_scripts": true, "must_include_api_docs": true, "must_include_setup_instructions": true, "must_include_readme": true, "must_make_project_production_ready": true }, "expected_output": { "codebase": [ "frontend web app", "mobile app", "backend server", "database schema", "admin dashboard" ], "documentation": [ "README", "setup guide", "API documentation", "database schema documentation", "deployment instructions" ], "quality_bar": "Build the project as a serious MVP that can be deployed, demonstrated, tested, and expanded into a startup product." } }

Comments (0)

No comments yet. Be the first!

📝

Requirements Not Generated Yet

The SRD will be automatically generated as you discuss your project with the Tech Lead Agent.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.