Kolors Landing Page

byKusum Lama

Build a brand-new, standalone landing page for Kolors Healthcare's Weight Loss Programs (Tamil Nadu). This is a paid-traffic landing page — the audience is people who just clicked a Google ad, not organic browsers. The page must feel premium, trustworthy, and locally relevant to Tamil Nadu, and must move a visitor toward one action: filling out the lead form. Reference: current live page is kolorshealthcare.com/weight-loss-programs-tamilnadu-vme. Do not scrape or copy that page — build fresh, using the spec below, which is a redesign brief already approved for this rebuild. # Tech requirements - Single responsive HTML page (semantic HTML5), CSS (can be a separate stylesheet or Tailwind — your call, but keep it clean and maintainable), and vanilla JS only where needed (form validation, FAQ accordion, any simple interactions). No framework build step required — this should run by just opening index.html or a simple static server. - Mobile-first responsive. A large share of this traffic is mobile (Google Search ads, India). Test and screenshot at both 375px and 1440px widths. - Fast-loading: no heavy unoptimized images, no unnecessary libraries. - Accessible: real alt text, sufficient color contrast, proper heading hierarchy, keyboard-navigable form and FAQ accordion. - Use Antigravity's built-in browser to visually verify the page after building — screenshot every section, check for overlap, overflow, and spacing issues before calling it done, at both mobile and desktop widths. # Brand palette (do not deviate) - Navy #1B1745 — top bar, headings - Gold #FFC93C — price & offer highlights only - Teal (softened) #1F6F5C / #4FB3A2 — hero background & icon accents (this replaces an older, darker #14403A / #1E7268 teal — use the lighter version everywhere for a premium feel, not clinical-dark) - White #FFFFFF — base background for all non-hero sections - Keep teal and navy reserved for the hero section and top bar only — don't let them bleed into content sections, which should stay white to match the "Why Choose Kolors" and other content blocks. # Page structure — build sections in this exact order ## 1. Top bar Navy background, unchanged from current branding. Logo/name left, phone or CTA right. ## 2. Hero section - Softened teal background (#1F6F5C / #4FB3A2 accents). - Punchy, short headline (not a full sentence — a hook). Subtext trimmed to one line max. - Price and offer messaging front and center in gold — this is the one thing on the page that was already converting, so make it prominent, don't bury it. - A real client photo placeholder beside the offer, with a name + city caption underneath (e.g. "Priya, Coimbatore") — not a full testimonial, just a face + name + city for authenticity. - Primary CTA button, high contrast, above the fold. ## 3. Proof strip (new placement — this is the #1 fix) A dedicated, visible strip immediately after the hero (not buried lower on the page) surfacing: 20+ years, 10L+ clients, 1500+ dietitians. Treat this as its own visual band — icons or large numbers with small labels, not a paragraph. ## 4. Accreditation badge strip A row of badge-style visual elements (not a sentence): FDA Approved, NABH Accredited, ISO 9001:2015, Govt. Registered, Data Privacy. Each should look like an earned certification mark (icon + label in a bordered/circular badge), not plain text. Use clearly-labeled placeholder badge icons — mark them in an HTML comment as PLACEHOLDER — REPLACE WITH REAL ACCREDITATION LOGOS so they're unmistakable to swap out. Never imply a certification Kolors doesn't actually hold. ## 5. Client results Title: "Real Results From Real Clients." Grid/row of result callouts, each in the format: "-14 kgs in 5 months — Coimbatore" (a number + timeframe + city). Include a spread of Tamil Nadu cities (Coimbatore, Madurai, Chennai, Trichy, Salem, etc.) so different regional visitors see local relevance. Use placeholder numbers/cities marked for replacement with real client data. ## 6. Reviews A bold aggregate line above the testimonial cards: "4.6 ★ rated by 2,000+ Google reviews" (mark clearly as PLACEHOLDER — replace with real Google rating/count before launch). Testimonial cards below, standard quote-card format. ## 7. Why Choose Kolors White background (not grey). Four reasons, each with its own icon and a large faint ranking number (01, 02, 03, 04) behind or beside it, so it reads as four ranked points rather than four identical blocks. Use the existing four claims: FDA-approved equipment, 20+ years experience, 1500+ certified dietitians, [4th — use a reasonable placeholder claim like "Customized plans for every body type" if the exact 4th point isn't specified]. ## 8. Meet the Experts (new section) Placed directly after "Why Choose Kolors." Four profile cards: photo, name, role, years of experience, qualification. This turns the "1500+ certified dietitians" claim into verifiable faces. Use clearly-marked placeholder names/photos/credentials — instruct in a comment that these must be swapped for the real team before launch. ## 9. How It Works (new section) Placed right before the FAQ. Four numbered steps, presented as a horizontal (desktop) / vertical (mobile) process flow with icons: 1. Free Consultation → 2. Body Assessment → 3. Custom Plan → 4. Track & Adjust. Purpose: remove uncertainty about what happens after the visitor converts. ## 10. FAQ Accordion component. Keep existing FAQ structure/questions, and add one new question: "Is this safe if I have thyroid, PCOS or diabetes?" with a reassuring, medically-sensible placeholder answer (something like: consultations are tailored by certified dietitians who review existing conditions before designing a plan — do not make specific medical claims). ## 11. Lead form / final CTA This is the second priority fix. Do NOT use a generic "Request a call back" label. The form and its surrounding copy should promise something specific and concrete right where the visitor hands over their phone number — e.g. "Get your free body assessment & custom plan — Coimbatore team calls you back within 30 minutes" (adapt wording, but it must be a specific, locally-relevant promise, not a vague generic CTA). Fields: name, phone, city/branch (dropdown of Tamil Nadu branches), submit button in gold on navy or teal background for contrast. ## 12. Footer Standard footer — branches list, contact info, social links, legal. # Local relevance requirement (fix #3 from the brief) Throughout the page, make sure something visibly matches what a Tamil Nadu searcher typed into Google — city names in results, city/branch selector in the form, and ideally the hero or proof strip referencing Tamil Nadu explicitly. This affects both conversion and Google Ads Quality Score, so don't treat it as cosmetic. # Placeholder asset handling Real client photos, team profiles, accreditation logos, and the actual Google rating/review count will be supplied separately and swapped in later. For now: - Use tasteful, clearly-labeled placeholder images (solid color avatar blocks or a placeholder image service are fine — do not use real stock photography that could be mistaken for genuine client/team photos). - Wrap every placeholder image/text with an HTML comment flag, e.g. <!-- PLACEHOLDER: replace with real client photo --> or <!-- PLACEHOLDER: replace with real review count -->, so they're trivial to find and replace later. - Do not invent or imply certifications, ratings, or credentials as if they were real. # QA checklist before declaring done - Screenshot every section at 375px and 1440px widths; check for text overflow, overlap, and cramped spacing. - Confirm the proof strip and badge strip are visually prominent, not buried. - Confirm the CTA/form copy is specific, not generic. - Confirm teal/navy/gold usage matches the palette section above exactly — no stray colors. - Confirm every placeholder is clearly flagged in code comments. - Confirm the page works and looks correct with JS disabled for core content (progressive enhancement for FAQ accordion, etc.). # Deliverable A working static site (index.html + styles + any JS/assets in a clean folder structure) that I can preview locally and hand off for real-asset integration.