Reference
RankFlow AI Homepage — Section-by-Section Content & Structure
Route: / (src/app/page.tsx)
docs/homepage-content.mdOn this page
- Terminology Guide (CRITICAL — competitor differentiation)
- Hero-Led Visual System Override (Design DNA v1.0.0)
- Visual Directives (Design DNA v1.0.0)
- Mobile Layout
- SEO Metadata
- E-E-A-T Compliance & Content Governance
- Source Labeling Rule (Mandatory)
- Experience Signals Checklist
- Section 1: Hero
- Content
- Interaction Notes
- Section 1A: Answer-First Definition
- Content
- Section 2: Problem Statement
- Content
- Section 3: The Loop — ONBOARD → BUILD → PUBLISH → REFRESH → RESULTS
- Section Header
- Interaction Notes (Section 3)
- Motion Infographic: "The RankFlow Loop" (Lottie SVG Animation)
- Section 4: Citation Deep Dive
- Content
- Citation Categories
- Section 5: Directory Profile
- Content
- Interaction Notes
- Section 6: GBP + Social Deep Dive
- Content
- Section 7: AI Engine Optimization
- Content
- Section 8: ROI
- Content
- Mid-Page CTA Strip
- Content
- Section 9: Industries
- Content
- Industry Tab Interaction Notes
- Section 10: Integrations
- Content
- Interaction Notes
- Section 11: Security & Compliance
- Content
- Section 12: Social Proof
- Content
- Interaction Notes
- Section 13: Final CTA
- Content
- Section 14: Footer
- Content
- Visual / Footer
- Note on Privacy/Terms
- SEO Footer Enhancements
- Responsive Behavior Summary
- Content-to-Design DNA Crosscheck (v1.0.0)
- v1.0.0 Visual Upgrade Checklist
Route: / (src/app/page.tsx)
Last updated: 2026-06-13
Design DNA: v1.0.0 (RankFlow AI system: deep navy canvas, #f0a500 gold accent, sharp floating nav, rectangular CTAs, Lucide line icons, translucent glass callouts, India-first identity)
Terminology Guide (CRITICAL — competitor differentiation)#
DO NOT use these generic terms — they commoditize the product:
Avoid:
- "SEO tool" — too generic, BrightLocal/LocalRank own this language
- "AI SEO" — overused, meaningless distinction
- "Marketing agency" — we are not an agency, we are a platform
- "Dashboard" — boring, implies the client has to do work
- "Optimization" — overused, every tool claims this
Use instead:
- "Local Rank Engine" — for the core technology
- "AI Copilot" — for the autonomous agent
- "City-Category Exclusivity" — for the scarcity positioning
- "Own Your Rankings" — for the ownership narrative
- "Set It and Rank" — for the zero-effort value prop
Our category language:
- We are a Local Rank Engine (not "SEO tool" or "marketing platform")
- The product loop is ONBOARD → BUILD → PUBLISH → REFRESH → RESULTS (5-phase continuous loop)
- Each client gets a dedicated AI Copilot (not "account manager" or "dashboard")
- We rank, not optimize (results language, not process language)
Hero-Led Visual System Override (Design DNA v1.0.0)#
The homepage hero is the canonical visual language for RankFlow AI. If any older note below conflicts with this section, treat this section as the source of truth.
- Palette: white canvas (#ffffff), soft navy surface (#f4f6f8), deep navy ink (#0d1b2a), body navy (#1a2a3a), muted slate (#5a6b7a), RankFlow gold (#f0a500), pale gold (#ffd880), faint border gold (#fff3d0).
- Navigation: centered floating sharp-edged glass slab, never a full-width bar and never a rounded pill. Use the actual RankFlow logo asset.
- Buttons: sharp rectangular primary CTAs in #f0a500 with inline Lucide arrow; secondary CTAs use text + underline/rule or a sharp 1px outline. No nested CTA shells or cursor-chasing hover defaults.
- Icons: Lucide line icons, stroke around 1.8, RankFlow gold, chosen for function (map-pin, search, globe, phone, star, trending-up, shield), not decoration.
- Illustration: flat isometric cityscape + map grid line art on white. Use gold technical strokes, pale construction lines, Indian city elements (clinic, pharmacy, auto-rickshaw, street signs), and no baked-in text or cards.
- Cards/callouts: sharp rectangular overlays with dotted gold borders, translucent white glass (about 20-32% fill), backdrop blur, subtle inner white edge, and gold-tinted shadow. The illustration behind must remain visible.
- Motion: cards stay fixed. Use restrained GSAP signal-lock states: connector draw-in, subtle icon pulse, faint bottom rail, and brief glass sheen. No bobbing cards, racing dots, particles, node networks, neon glows, or scroll hijacks before the hero is approved.
- Responsive: never hide critical rank callouts on mobile. Collapse to single-column layouts, scale cards and typography down, and keep trust logos visible and wrapped cleanly.
Visual Directives (Design DNA v1.0.0)#
Follow the Hero-Led Visual System Override above as the canonical execution guide.
- Light navy surface language is the default for every page and section.
- Use #f0a500 as the single accent for CTAs, icons, section numbers, dotted borders, and active rank signals.
- Use sharp rectangular CTAs, centered floating sharp-edged navigation, Lucide line icons, and translucent dotted glass callouts.
- Use flat isometric cityscape illustrations with editable HTML overlays; do not bake labels, cards, or logos into generated images.
- Motion must be restrained and functional: draw-in, signal-lock, subtle icon pulse, and brief glass sheen only. Cards remain fixed.
- Dark surfaces, heavy dashboard frames, rounded CTA systems, cursor-chasing hover effects, and decorative glow/particle systems require explicit approval before implementation.
Mobile Layout#
All 14 sections stack vertically below md (768px) unless noted.
- Hero: Headline/body/CTAs stack above the isometric cityscape visual. Rank callout cards remain visible as scaled translucent overlays; trust logos wrap in a centered 2-column grid.
- Problem: Stats grid collapses to a single vertical stack; icon + number + label per row.
- The Loop: Five phases stack vertically with a collapsed timeline rail; no pinning, no horizontal scroll.
- Citation Builder: Layer stack becomes a scrollable console preview; sticky effects disabled.
- Directory Profile: Phone mockup centers at
70vw; copy and CTA move below the device. - GBP + Social: Grid nodes stack vertically; each node is a full-width card.
- AI Engine: Static device stack, single column; no 3D carousel.
- Results: Metrics summarized into a single-column accordion or stacked cards.
- Industries: Industry chips use horizontal scroll-snap; detail panel opens below.
- Integrations: Day 0 / Day 1 / Day 2 cards stack vertically; no horizontal scroll.
- Security: Compliance badges wrap in a
2×2grid instead of a single row. - Social Proof: Testimonial card goes full-width with swipe/tap enabled.
- Final CTA: Primary and secondary CTAs stack vertically, full-width.
- Footer: Single-column stack — logo, links grouped, legal at bottom.
SEO Metadata#
Title: RankFlow AI — India's AI Local Rank Engine for Doctors & Clinics
Meta Description: RankFlow AI connects your clinic, builds 30 citations, optimizes your Google Business Profile, and posts to social — all on autopilot. Only 3 clients per city per specialty. From ₹4,000/month.
H1: Rank Your Clinic. Own Your Presence. Zero Effort.
OG Title: RankFlow AI — India's First AI-Powered Local Rank Engine
OG Description: Onboard in 5 minutes. Rank in 60 days. One AI copilot, 30 citations, full GBP management, social posts, and review replies — all automated. Only 3 clients per city per specialty.
OG Image: /og/homepage.webp (1200×630, light surface with cityscape + product mockup + numbered section label)
Canonical: https://rankflow.ai
Schema: Organization + WebSite + SoftwareApplication + LocalBusiness
Page freshness: Content last verified 2026-06-13. Next scheduled review: 2026-09-13. If you notice outdated information, contact the content team.
E-E-A-T Compliance & Content Governance#
Content reviewed by: [Local SEO Subject Matter Expert], with 5+ years in Indian medical marketing. Add name, credentials, and LinkedIn profile before publish. Technical review: [AI/ML Engineer], with experience in multi-LLM orchestration. Add name and role before publish. Last updated: 2026-06-13 Next review date: 2026-09-13 (90-day cycle) Review cadence: Quarterly, or within 7 days of any product feature change, regulatory update, or competitive claim revision.
Source Labeling Rule (Mandatory)#
Every metric, statistic, percentage, dollar figure, and outcome claim displayed on this page MUST include a visible source type label directly beneath or beside the number. Accepted source types:
| Source Type | When to Use | Display Format |
|---|---|---|
| Customer-reported | Named customer provided data with permission | Source: [Customer Name], [timeframe] |
| Anonymized pilot benchmark | Real pilot data, customer name withheld | Source: Anonymized pilot, [N clinics], [timeframe] |
| Internal model benchmark | RankFlow internal testing or model evaluation | Source: Internal benchmark, [date] |
| Third-party statistic | Published industry report or government data | Source: [Publisher], [year] |
| Illustrative target | Projected or modeled estimate, not measured | Source: Illustrative target — not a guarantee |
Certification & compliance claims: Do not publish DPDPA 2023 full compliance, MCI ethics certification, or guaranteed ranking positions unless independently verified. Use "designed to support" when referencing regulatory frameworks.
Experience Signals Checklist#
- At least 2 product screenshots from real deployments (anonymized if needed)
- At least 1 before/after ranking comparison with source label
- Named or anonymized customer reference with specialty and city
- GBP dashboard screenshots or citation network samples with visible redaction where needed
Section 1: Hero#
Surface: Light navy (#ffffff) with white canvas and faint gold technical atmosphere. Layout: Editorial split. Left column: section label, H1, body, CTAs. Right column: generated flat isometric cityscape illustration with editable HTML rank callout overlays. Trust logo rail sits below the split layout.
Content#
Overline (Archivo uppercase, --tracking-label, --accent-primary)
INDIA'S ONLY AI LOCAL RANK ENGINE
Headline (H1) (Archivo Black, navy #0d1b2a, clamp(2.95rem, 4vw, 4.35rem), line-height ~1.04)
Rank Your Clinic.
Own Your Presence.
Zero Effort.
Subheadline (Figtree Regular, navy body #1a2a3a, --text-body-lg, max-width 52ch)
Your AI Copilot builds 30 citations, manages your Google Business Profile, posts to social, and replies to reviews — all while you see patients. Only 3 clinics per city per specialty. From ₹4,000/month.
Primary CTA: Start Your 7-Day Free Trial → /onboard
Secondary CTA: See How It Works → /demo
Hero visual: /images/hero/rankflow-hero-isometric-v1.png
- Style: flat isometric cityscape line art, RankFlow gold strokes, pale construction grid, Indian city elements (clinic, pharmacy, auto-rickshaw, street signs, Google Maps pin).
- Image must contain no baked-in text, UI cards, labels, logos, or navigation.
- HTML overlays: Google Maps / Rank: #3; Citations / Live: 28/30; GBP Posts / This Week: 4; Reviews / Replied: 12; Social Reach / This Month: 4.2K; AI Engine / Indexed: Yes.
- Overlay card style: sharp rectangle, dotted
#ffd880border, translucent white glass, backdrop blur, inner white edge, Lucide gold icon, uppercase title/status.
Trust bar (below hero, Figtree, --text-caption, #5a6b7a)
Trusted by clinics across: Kochi · Trivandrum · Calicut · Thrissur · Bangalore
Exclusivity badge (above trust bar, Archivo Bold, --text-caption, #f0a500)
⚡ ONLY 3 CLINICS PER CITY PER SPECIALTY — APPLY NOW
Interaction Notes#
- Hero entrance: Illustration scales subtly from
0.985to1; connector lines draw in; cards reveal once with small scale/Y transform. - Card loop: cards stay fixed. One card at a time receives a restrained signal-lock state: subtle icon pulse, faint bottom rail, brief glass sheen, and connector highlight.
- Forbidden: no card bobbing, no racing dots, no particle systems, no node networks, no glow pulses, no background video, no scroll hijack before the hero is approved.
prefers-reduced-motion: all cards and illustration render immediately; remove transform loops and keep cards visible.
Section 1A: Answer-First Definition#
Surface: Light (--surface-base)
Layout: Narrow editorial block directly after the hero and before the problem statement.
Content#
Headline (H2):
What is RankFlow AI?
Answer block (40-60 words):
RankFlow AI is India's first AI-powered local rank engine for clinics and medical professionals. Its AI Copilot connects your Google Business Profile, builds 30 citations across Indian directories, creates a premium directory profile on India's trusted healthcare directory, posts to social media, and replies to reviews — all autonomously. You onboard in 5 minutes. Everything goes live in 60 minutes.
Support links: Explore the Engine → /platform.
Visual: Code-rendered RankFlow diagram using editable HTML cards, Lucide line icons, dotted SVG connector paths, and the RankFlow logo at the core. Use GSAP for subtle pulse rings, slow orbiting ring details, and small signal dots that travel from the RankFlow core to each card. Keep the diagram on a clean white canvas with no gold gradient panel. Do not use a generated raster infographic for this section.
GEO extractability: This block is formatted as a standalone definition answering "What is RankFlow AI?" in 40-60 words. Visible to AI crawlers and search engines. Keep as plain text — no images, no hidden content, no JavaScript-rendered text.
Section 2: Problem Statement#
Surface: Light (--surface-inset)
Layout: 2-column asymmetric — text left (55%), pain-point cards right (45%).
Content#
Section label:
01 THE PROBLEM
Headline (H2):
Your Patients Are Searching.
You're Nowhere to Be Found.
Body:
63 million Indian SMBs exist. Fewer than 2% are properly ranked on Google Maps. Your clinic has no citations, no schema, no social signals, and no AI engine presence. Every day a patient searches "best [specialty] in [city]" — and finds your competitor instead.
Pain-Point Cards (3 glass frame blocks, right column, stacked with 16px gap. Each card has an icon slot (24px, --text-muted) + title + description.)
Card 1:
Icon: Map-pin with slash (location off)
Title (Archivo Bold, --text-body-lg): No Google Maps Presence
Description (Figtree Regular, --text-body-sm, --text-secondary):
Patients search "dentist near me" and your clinic doesn't appear. No GBP, no reviews, no photos. You're invisible to the exact people looking for you right now.
Card 2: Icon: Clock with exclamation Title: You Lose Patients to Competitors Daily Description: While you treat patients, your competitors are building citations, posting updates, and collecting reviews. By the time you think about marketing, they've already captured the search intent. Lagging presence means permanent patient loss.
Card 3: Icon: Files stacking / document pile Title: Agencies Cost ₹15K–50K/Month. You Get Nothing. Description: Traditional SEO agencies charge a fortune and deliver reports, not rankings. They don't build citations, don't manage your GBP, don't post to social, and don't reply to reviews. You pay for promises. Your competitors pay for results.
Stat value: Archivo Black, --text-h3, --text-heading.
Stat label: Figtree Regular, --text-body-sm, --text-secondary.
Visual treatment: Each card in a glass frame mini-card (outer: surface.elevated, 1px border.default, p-1.5, rounded-xl) with hue-tinted shadow elevation.sm. Dotted signal border on hover — radial gradient tracks cursor. Icon left-aligned with title, description below.
Transition line (Figtree Medium, --text-body, --text-muted, centered below)
The tools aren't broken. They just weren't built for Indian clinics.
Section 3: The Loop — ONBOARD → BUILD → PUBLISH → REFRESH → RESULTS#
Surface: Dark (--surface-dark)
Layout: Horizontal pinned scroll. Full viewport height. 5 phases revealed as user scrolls. Total scroll distance: ~500vh (100vh per phase).
Section Header#
Section label:
02 THE RANKFLOW LOOP
Headline (H2) (Archivo Bold, --text-h2, --text-on-dark)
A System That Ranks
While You Treat Patients.
Body (Figtree Regular, --text-body-lg, --text-on-dark-muted, max-width 52ch)
Five phases. One loop. Zero clicks from you. The AI Copilot runs 24/7 — onboarding your clinic, building citations, publishing everywhere, refreshing content monthly, and surfacing ranking results you can actually see. Every month makes your clinic more visible.
Phase 1: ONBOARD#
Phase label (Archivo Black, --text-h4, --signal-default)
01 — ONBOARD
Phase Headline (H3):
5 Minutes. One Form. Done.
Phase Body:
Enter your clinic name, address, phone, specialty, and hours. Connect your Google Business Profile and social accounts. The AI extracts everything it needs — no spreadsheets, no back-and-forth, no technical knowledge required. Under 5 minutes on your phone.
Metric strip (inline, Archivo Semibold for values, Figtree --text-caption uppercase for labels)
| Value | Label |
|---|---|
| 5 min | Onboarding Time |
| 1 | Form Only |
| 0 | Technical Setup |
Source labeling required: Each metric must display its source type (product spec, UX benchmark, or illustrative target) before publish. Remove any metric that cannot be substantiated.
Visual: Light illustration showing a mobile phone with the onboarding form — step 1 of 5 progress indicator, clinic name field, specialty dropdown, address with GPS pin. No particle overlay. NO glow.
Phase 2: BUILD#
Phase label:
02 — BUILD
Phase Headline (H3):
30 Citations. 1 Directory Profile. All Built by AI.
Phase Body:
The AI Copilot generates 30 unique citation descriptions across Indian directories (Justdial, Practo, Sulekha, Lybrate, IndiaMART, and 25 more). It creates a premium directory profile on India's trusted healthcare directory with keyword-rich articles, FAQ schema, and Google Maps embed. All content is tailored to your specialty and city — in few minutes.
Metric strip:
| Value | Label |
|---|---|
| 30 | Citations Built |
| Few Mins | AI Generation Time |
| 1 | Directory Profile Live |
Source labeling required: Each metric must display its source type (pilot benchmark, architecture, or illustrative target) before publish. Remove any metric that cannot be substantiated.
Visual: Citation network diagram — 30 nodes (directory logos) connected to a central clinic node. Each node has a unique description label. Directory profile preview card shows article + FAQ + map + schema.
Phase 3: PUBLISH#
Phase label:
03 — PUBLISH
Phase Headline (H3):
Everything Goes Live. Zero Clicks From You.
Phase Body:
Simultaneous push to all 30 directories, your Google Business Profile, Instagram, and Facebook. Your directory profile goes live at a directory listing URL. Your GBP gets updated with services, products, and posts. Your social accounts get their first scheduled posts. All timestamped. All tracked. All live before you finish your first patient.
Metric strip:
| Value | Label |
|---|---|
| 30 | Sites Published |
| 4 | Platforms Active |
| <1 hr | Time to Live |
Source labeling required: Each metric must display its source type (pilot benchmark, architecture, or illustrative target) before publish. Remove any metric that cannot be substantiated.
Visual: Agentic workflow diagram — clinic node → 30 citation arrows → GBP node → social node → directory profile node. All arrows animate simultaneously. Flow lines in gold.
Phase 4: REFRESH#
Phase label:
04 — REFRESH
Phase Headline (H3):
Monthly AI Refresh. Your Presence Never Stagnates.
Phase Body:
Every month, the AI Copilot rewrites your directory profile content, schedules new GBP posts, publishes fresh social updates, checks your NAP consistency across all 30 citations, and replies to new reviews. Your online presence stays active, relevant, and growing — without you touching a single setting.
Metric strip:
| Value | Label |
|---|---|
| Monthly | Content Refresh |
| 2–4x | GBP Posts / Week |
| 100% | NAP Consistency Check |
Source labeling required: Each metric must display its source type (pilot benchmark, internal model, or illustrative target) before publish. Remove any metric that cannot be substantiated.
Visual: Calendar-style grid showing monthly refresh events — content rewrite, GBP post, social post, NAP check, review reply. Each event has a checkmark. Gold accent on active month.
Phase 5: RESULTS#
Phase label:
05 — RESULTS
Phase Headline (H3):
Rankings Rise. Patients Call. You See It All.
Phase Body:
The AI Copilot tracks your Google Maps position, citation growth, review score, social reach, and AI engine mentions. You get a weekly WhatsApp digest and a monthly PDF report. See exactly how many positions you climbed, how many citations went live, and how many new patients found you — all in one dashboard.
Metric strip:
| Value | Label |
|---|---|
| #3 | Avg. Google Maps Position |
| 28/30 | Citations Live |
| 4.2★ | Review Score |
Source labeling required: Each metric must display its source type (pilot benchmark, internal model, or illustrative target) before publish. Remove any metric that cannot be substantiated.
Visual: Results dashboard mockup — ranking trend line (climbing), citation count (28/30), review score (4.2★), social reach (4.2K), AI engine mentions (12). All in a single dark-themed dashboard with gold accents.
Interaction Notes (Section 3)#
- GSAP ScrollTrigger:
pin: true, scrub: 1, easing:fluid_out - Each phase enters as a glass frame card sliding in from right, previous fades to opacity 0.3 and shifts left
- Active phase card: dotted signal border tracks cursor on the glass frame outer shell
- Progress indicator: 5 dots at bottom, active dot fills
--signal-default - Metric strip numbers count up on phase entry (
tabular-nums, staggered cascade) - Phase visuals (dashboard mockups): always in glass frames within the phase card
prefers-reduced-motion: vertical stacked phases, no pin, no scrub, no count-up, no signal highlight
Motion Infographic: "The RankFlow Loop" (Lottie SVG Animation)#
A single continuous SVG canvas embedded in Section 3, showing the five RankFlow phases as nodes on a circular flow. Data particles travel the loop clockwise. As the user scrolls through each phase, that node activates, the particle stream intensifies, and an inner detail panel opens within the node. Can also be exported as a standalone looping animation for marketing.
Canvas: 1200 × 800px SVG viewBox. Dark background (--surface-dark). Loop ring centered.
SVG Layer Architecture#
Layer 0: Background — radial gradient, dark
Layer 1: Loop Ring — circular path, 5 quadrant arcs
Layer 2: Phase Nodes — 5 circles on the ring (12, 2, 4, 6, 8, 10 o'clock)
Layer 3: Particle Stream — dots traveling the ring path
Layer 4: Connection Lines — inner cross-connections between nodes
Layer 5: Active Phase Detail — expanded info panel for active node
Layer 6: Metric Badges — floating counters near active node
Phase Node Design#
Each node is a 48px circle with icon inside:
| Position | Phase | Icon | Color (inactive) | Color (active) |
|---|---|---|---|---|
| 12 o'clock | ONBOARD | Clipboard | oklch(0.45 0.02 264) |
--signal-default |
| 2 o'clock | BUILD | Hammer | oklch(0.45 0.02 264) |
--signal-default |
| 4 o'clock | PUBLISH | Send | oklch(0.45 0.02 264) |
--signal-default |
| 6 o'clock | REFRESH | RefreshCw | oklch(0.45 0.02 264) |
--signal-default |
| 10 o'clock | RESULTS | TrendingUp | oklch(0.45 0.02 264) |
--signal-default |
Animation Scenes (Lottie Keyframes)#
Scene 0 — Idle Loop (0s – ∞, loops)
All five nodes at resting state (muted). 15–20 particle dots (3px circles) flow clockwise around the ring path at steady speed.
- Particles:
offset-pathalong the circular SVG<path>. Speed: one full revolution per 8s. - Particles have staggered start points (evenly distributed).
- Subtle pulse on each node:
scale(1) → scale(1.04) → scale(1), 2s cycle, staggered 0.5s per node. - Ring path: thin stroke (
1.5px,oklch(0.35 0.01 264)), dashed withstroke-dashoffsetanimation for flowing-line effect.
Scene 1 — ONBOARD Activates (triggered on scroll-phase-1, 1.2s)
- 0–300ms: ONBOARD node scales
1 → 1.3, fill transitions to--signal-default, glow ring appears (SVG<feGaussianBlur>filter, 12px radius, 40% opacity). - 150–600ms: Other four nodes dim to
opacity: 0.3. - 300–800ms: Detail panel slides out from ONBOARD node — rounded rect (
280 × 180px) expanding rightward withclip-pathreveal. Contains: phase label "01 — ONBOARD", 3 metric badges animate in staggered (100ms intervals): "5 min Setup" / "1 Form" / "0 Tech". Each badge: counter rolls up from 0 (tabular-nums). - 500–1200ms: Particles near ONBOARD node glow and increase in size (
3px → 6px) as they pass through — simulating data being "processed." - 800–1200ms: 3 highlighted particles (gold accent) fork from ONBOARD toward BUILD, previewing the next arc.
Scene 2 — BUILD Activates (triggered on scroll-phase-2, 1.2s)
- 0–300ms: BUILD node scales up, fills
--signal-default. ONBOARD returns toscale(1)but stays lit atopacity: 0.7(upstream, already ran). - 150–600ms: Detail panel slides out leftward. Metrics: "30 Citations" / "60 sec AI" / "1 Profile Live". Counter roll-up.
- 300–900ms: Build animation — 3 document icons (page, citation, map) assemble from particles arriving at the node, then float outward. Visualizes content creation.
- 600–1200ms: Particles flowing ONBOARD → BUILD brighten on entry, then fork into 3 sub-streams toward citation endpoints.
Scene 3 — PUBLISH Activates (triggered on scroll-phase-3, 1.2s)
- 0–300ms: PUBLISH node activates. ONBOARD + BUILD stay visible at
0.7. - 150–600ms: Detail panel expands downward. Metrics: "30 Sites" / "4 Platforms" / "<1 hr Live".
- 300–900ms: Publish animation — 3 notification icons (send, share, globe) fly outward from PUBLISH node along curved paths, bounce slightly at endpoints, then hold. Visualizes multi-platform publishing.
- 600–1200ms: Particles flowing BUILD → PUBLISH brighten on entry, then fork into 3 sub-streams toward platform endpoints.
Scene 4 — REFRESH Activates (triggered on scroll-phase-4, 1.2s)
- 0–300ms: REFRESH node activates. ONBOARD + BUILD + PUBLISH stay visible at
0.7. - 150–600ms: Detail panel expands downward. Metrics: "Monthly Refresh" / "2-4x Posts/Week" / "100% NAP Check".
- 300–900ms: Refresh animation — a circular refresh icon rotates as particles arrive. 4–5 particles converge → merge into refresh shape → float up. Then a second refresh assembles. Visualizes continuous content update.
- 600–1000ms: Feedback arc — thin dashed line draws backward from REFRESH toward BUILD, with a single particle traveling counter-clockwise. Visualizes content refresh feeding back into the build.
Scene 5 — RESULTS Activates (triggered on scroll-phase-5, 1.5s)
- 0–400ms: RESULTS node double-pulse (scales to 1.35, back to 1.2, then 1.3 — overshoot settle). All other nodes at
0.7with connecting lines illuminating. - 200–700ms: Detail panel expands upward. Metrics: "#3 Position" / "28 Citations" / "4.2★ Reviews".
- 400–1000ms: Results animation — ring path stroke transitions from dashed to solid, flowing clockwise like a progress bar completing. Color intensifies from muted gray to full
--signal-defaultas it traces the full circle. - 800–1500ms: Chart pulse — a small bar chart animates upward from the RESULTS node, bars growing in height. Wave passes through all nodes, each briefly pulses brighter.
- 1200–1500ms: All five nodes settle at full brightness, particle stream at peak density (25+ particles). Loop complete and alive.
Perpetual Loop State (after all 5 phases viewed)#
- All 5 nodes lit at full brightness
- Particle stream at peak density, constant clockwise flow
- Subtle pulse on each node as particles pass through (0.04 scale bump)
- One highlighted "gold" particle circulates the loop every 4s — the "ranking signal"
- No detail panels open — clean, meditative loop
Lottie Implementation Spec#
| Property | Value |
|---|---|
| Format | Lottie JSON (exported from After Effects or Rive) |
| Viewbox | 1200 × 800 |
| Frame rate | 30fps |
| Frames per scene | 36 frames (1.2s) / Scene 5: 45 frames (1.5s) |
| Idle loop duration | 240 frames (8s) |
| Color tokens | OKLCH values mapped to Lottie color properties |
| Interactivity library | lottie-interactivity or @lottiefiles/react-lottie-player with goToAndStop() per scroll |
| Fallback | Static SVG showing all 5 nodes lit, no animation.prefers-reduced-motion serves this. |
| File size target | <150KB JSON per scene, <500KB total |
ScrollTrigger ↔ Lottie Sync Map#
ScrollTrigger progress 0.00–0.05 → Idle loop (Scene 0)
ScrollTrigger progress 0.05–0.20 → Scene 1 (ONBOARD)
ScrollTrigger progress 0.20–0.40 → Scene 2 (BUILD)
ScrollTrigger progress 0.40–0.60 → Scene 3 (PUBLISH)
ScrollTrigger progress 0.60–0.80 → Scene 4 (REFRESH)
ScrollTrigger progress 0.80–0.95 → Scene 5 (RESULTS)
ScrollTrigger progress 0.95–1.00 → Perpetual loop state
Map with lottie.goToAndStop(frame) driven by ScrollTrigger.progress.
prefers-reduced-motion (Infographic)#
- No particles, no scaling, no detail-panel animations
- Static SVG with all 5 nodes visible, labels shown
- Ring path solid stroke, no dash animation
- Metrics shown as plain text below each node
Section 4: Citation Deep Dive#
Surface: Light (--surface-base)
Layout: Asymmetric split — glass frame app-component mockup RIGHT (grid-cols-[0.45fr_0.55fr]), copy LEFT. Mockup overlaps −40px into Section 5 below. (Alternating pattern: Section 4 = visual RIGHT, Section 5 = visual LEFT, Section 6 = visual RIGHT, Section 7 = visual LEFT.)
Content#
Section label:
03 CITATIONS
Headline (H2):
30 Citations. Indian Directories.
Trusted by Patients.
Subheadline (--text-body-lg, --text-secondary, max-width 56ch)
RankFlow AI submits your clinic to 30 trusted directories — Indian and global. Google Business Profile, Justdial, Practo, Sulekha, Lybrate, IndiaMART, and 20 more. Every listing is optimized, verified, and monitored monthly. Your clinic appears where Indian patients actually search.
Citation Categories#
(Asymmetric 2-column grid below the subheadline: grid-cols-[1.2fr_0.8fr] with 8px vertical offset on right column for visual tension. Left-aligned, generous spacing.)
Each entry formatted as:
- Title — Archivo Bold,
--text-body-lg,--text-heading - Description — Figtree Regular,
--text-body,--text-secondary, max-width 42ch
- Google Business Profile DA 98. The #1 ranking signal for local search. Full optimization: services, products, posts, Q&A, photos, reviews.
- Justdial DA 74. India's #1 local search platform. 19.3+ Crore buyers. Free + paid listings. Verified with GST or visiting card.
- Practo DA ~65. India's dominant healthcare platform. 100,000+ doctors. Profile + appointment booking + reviews.
- Sulekha DA 71. Major service directory for doctors, lawyers, tutors. Free + paid lead generation.
- Lybrate DA ~60. 200,000+ doctor profiles across 200+ cities. Medical council registration verified.
- IndiaMART DA 79. B2B marketplace with strong healthcare category. Free + paid listings.
- Apple Maps Connect DA 100. iOS local search. Critical for iPhone users searching for clinics.
- Bing Places DA 94. Microsoft's local search. Often overlooked by competitors — easy ranking win.
- Yelp India DA 93. Review platform with healthcare presence. Free listing + review collection.
Callout strip (below grid, Figtree Medium, --text-body, --text-muted, centered)
All 30 listings · NAP consistency · Schema markup · Monthly monitoring · India-specific directories
Visual (RIGHT): Dark-themed citation dashboard mockup in glass frame — grid of 30 directory tiles with status indicators (live/pending/removed), NAP consistency check, and a side-panel showing DA scores and traffic estimates. Glass frame outer shell gets dotted signal border on hover. Overlaps −40px into Section 5 via negative margin. NO glow, NO particle overlay.
Section 5: Directory Profile#
Surface: Dark (--surface-dark)
Layout: Split — iPhone mockup LEFT (45%), copy RIGHT (55%). (Alternating pattern: visual LEFT.)
Content#
Section label:
04 LANDING PAGE
Headline (H2):
Your Clinic's Directory Profile.
Built by AI. Owned by You.
Subheadline (Figtree Regular, --text-body-lg, --text-on-dark-muted, max-width 52ch)
Every clinic gets a premium, verified directory profile on India's most trusted healthcare directory. Your profile includes keyword-rich content, FAQ schema, Google Maps embed, click-to-call, and WhatsApp integration. Optimized for local search. Built to rank.
Hero metric (large, centered above feature list)
| Value | Label |
|---|---|
| <60 sec | Directory Profile Generation |
Feature list:
- 3–5 Keyword Articles — targeting "[specialty] in [city]", "best [specialty] near me", etc.
- FAQ Schema — 10+ Q&A with structured data for Google rich snippets
- Google Maps Embed — with directions, hours, and click-to-call
- Mobile-First Design — fast, responsive, click-to-call, WhatsApp button
- Review Widget — live Google reviews feed embedded on page
- Full JSON-LD Schema — LocalBusiness, Service, FAQ, Review, BreadcrumbList
- Branded Subdomain —
directory.com/clinics/kochi/your-clinicor custom domain - Monthly Content Refresh — AI rewrites articles to keep content fresh
CTA: See a Demo Directory Profile → /demo
Visual (LEFT): iPhone frame, dark app UI, showing the directory profile preview: hero section with clinic name + photo → services grid → FAQ accordion → map embed → reviews widget → WhatsApp button. Below: 3 small screens showing mobile view, desktop view, and schema validation.
Interaction Notes#
- Phone mockup enters from left with subtle parallax (0.15 factor)
- Screen content animates: hero → services → FAQ → map → reviews in 5-step sequence (2s total)
prefers-reduced-motion: static screens, no animation
Section 6: GBP + Social Deep Dive#
Surface: Light (--surface-elevated)
Layout: Split — copy LEFT (45%), workflow visual RIGHT (55%). (Alternating pattern: visual RIGHT.)
Content#
Section label:
05 GBP & SOCIAL
Headline (H2):
Google Business Profile + Social.
Managed by AI. Approved by You.
Body:
Most clinics have a GBP that hasn't been updated in months. No posts. No review replies. No photos. RankFlow's AI Copilot posts weekly updates, replies to every review, and keeps your social accounts active — all with a 24-hour approval gate so you stay in control.
Capabilities list (Figtree Regular, --text-body, two columns)
- Weekly GBP Posts — health tips, clinic updates, service highlights
- Review Auto-Reply — positive reviews auto-replied; negative reviews queued for approval
- Q&A Management — AI-suggested answers to patient questions on Google Maps
- Photo Uploads — clinic photos, team photos, equipment photos
- Instagram Posts — 2–4 health-focused posts per week with captions
- Facebook Posts — clinic updates, patient stories, health awareness
- Sentiment Analysis — AI classifies review sentiment before generating reply
- MCI Compliance — all content is informational, not promotional (no "best doctor" claims)
Pull-quote (large, Archivo Medium Italic, --text-heading, max-width 42ch)
"We went from #12 to #3 on Google Maps in 8 weeks — without touching a single setting. RankFlow just did it."
— Dr. Anjali Nair, Cardiologist, Kochi
Visual (RIGHT): Dark-themed GBP + social workflow diagram — review arrives → sentiment analysis → AI generates reply → doctor approves → published. Vertical flow, clean lines, no decorative elements. Each node shows the platform icon (Google, Instagram, Facebook) and the action.
Section 7: AI Engine Optimization#
Surface: Dark (--surface-dark)
Layout: Split — mobile mockup LEFT (45%), copy RIGHT (55%). (Alternating pattern: visual LEFT.)
Content#
Section label:
06 AI ENGINE
Headline (H2):
Rank on ChatGPT. Perplexity. Gemini.
Not Just Google.
Body:
Patients are now asking AI engines "Who is the best dentist in Trivandrum?" If your clinic isn't in the training data, AI won't recommend you. RankFlow optimizes your presence for AI answer engines — structured data, authoritative citations, and consistent NAP across the web. Be the clinic AI recommends.
Capability blocks:
01 Structured Data Optimization Full JSON-LD schema (LocalBusiness, MedicalBusiness, Physician, Service, FAQ, Review) on your directory profile and every directory listing. Machine-readable by AI crawlers.
02 Citation Authority Building 30 consistent citations across high-DA directories. AI engines use citation consistency as a trust signal. We ensure your NAP is identical everywhere.
03 FAQ & Answer Engine Content 10+ FAQs optimized for conversational AI queries. "What are the symptoms of [condition]?" → your clinic appears in the answer.
04 Review Signal Amplification AI engines factor review volume, recency, and sentiment. We keep your review flow active with auto-replies and review request prompts.
05 Content Refresh for AI Crawlers Monthly content updates keep your directory profile fresh in AI training data. Stale content gets ignored. Fresh content gets cited.
Visual (LEFT): Mobile device mockup showing an AI engine response — "Best cardiologist in Kochi" → RankFlow-optimized clinic appears as the top recommendation with photo, rating, address, and call button.
Section 8: ROI#
Surface: Light (--surface-base)
Layout: Centered headline, 4 metrics in a row (responsive: 2×2 on tablet, stacked mobile). Then a horizontal "exclusivity" callout row.
Content#
Section label:
07 RESULTS
Headline (H2):
Outcomes Your Clinic
Can't Ignore.
Metrics:
| Value | Label |
|---|---|
| #3 | Avg. Google Maps Position |
| 28/30 | Citations Live |
| 4.2★ | Review Score |
| 4.2K | Monthly Social Reach |
Exclusivity Callout (full-width glass frame below metrics: outer shell surface.elevated, 1px border.default, p-1.5, rounded-2xl; inner core surface.base, no border, rounded-[calc(2rem-0.375rem)]. Floats with elevation.lg hue-tinted shadow — NO visible border on inner card, shadow does the work. Dotted signal border on hover.)
Label: CITY-CATEGORY EXCLUSIVITY (Archivo uppercase, --tracking-label, --accent-primary)
Headline (H3):
Only 3 Clinics Per City Per Specialty.
Apply Now or Lose Your Spot.
Body:
We limit each city-specialty combination to 3 clients. If you're a cardiologist in Kochi, only 3 cardiologists in Kochi can use RankFlow. Once the spots are filled, we close enrollment. This isn't scarcity marketing — it's how we ensure each client gets maximum ranking value without competing against another RankFlow client.
Supporting bullets (Figtree, --text-body)
- No competing RankFlow clients in your city + specialty
- Maximum citation authority concentrated on your clinic
- Dedicated AI Copilot — not shared across hundreds of accounts
- First-mover advantage: apply before your competitor does
Footnote (--text-caption, --text-muted, centered below)
Based on pilot program and anonymized client-reported metrics
Mid-Page CTA Strip#
Surface: --signal-default (brand gold) at 8% opacity on --surface-elevated
Layout: Full-width, centered text, compact vertical padding (40px top/bottom).
Content#
Headline (Archivo Bold, --text-h3, --text-heading)
See the Rankings for Yourself.
Subheadline (Figtree Regular, --text-body, --text-secondary)
7-day free trial. No payment required. No commitment. Full results in 60 days.
CTA: Start Your Free Trial → /onboard
Section 9: Industries#
Surface: Light (--surface-inset)
Layout: Segmented selector (8 tabs) with content panel below. Desktop: tabs as horizontal scrollable chips; mobile: horizontal-scroll chips with active indicator.
Content#
Section label:
08 INDUSTRIES
Headline (H2):
One Engine. Every Specialty.
Subheadline (--text-body, --text-secondary, max-width 56ch)
RankFlow's AI is pre-trained on medical directory structures, Indian healthcare regulations, and city-specific search patterns. Select your specialty to see how the engine adapts.
Tabs: General Physician · Cardiologist · Dentist · Dermatologist · Orthopedic · Gynecologist · Pediatrician · Multi-Specialty Clinic
Tab 1: General Physician (default active)
Tab Headline (H3):
Be the First Doctor Patients Find.
Tab Body:
General physicians compete on proximity and availability. RankFlow optimizes your GBP for "doctor near me", "general physician [city]", and "family doctor [city]" — ensuring you appear in the Google Maps 3-pack for every neighborhood search.
Metric: 87% Increase in "Near Me" Visibility
Capability bullets:
- GBP optimization for "doctor near me" and "general physician [city]"
- Citation building on Justdial, Practo, Sulekha
- Health tip posts for weekly GBP engagement
- Review collection prompts for patient visits
CTA: Explore GP Solutions → /industries/general-physician
Tab 2: Cardiologist
Tab Headline (H3):
Rank for High-Intent Cardiac Searches.
Tab Body:
Cardiologists serve patients with urgent health concerns. RankFlow targets high-intent searches: "heart specialist [city]", "best cardiologist near me", "cardiac clinic [city]". AI-generated content addresses common cardiac symptoms and when to seek care — building trust before the patient calls.
Metric: 72% Increase in High-Intent Search Calls
Bullets:
- Targeting for "heart specialist", "cardiologist", "cardiac clinic" + city
- AI content on heart health awareness, symptoms, prevention
- GBP posts on cardiac screening camps and checkups
- Citation on medical directories with cardiac specialty filters
CTA: Explore Cardiology Solutions → /industries/cardiologist
Tab 3: Dentist
Tab Headline (H3):
Fill Your Chair. Rank for Every Dental Query.
Tab Body:
Dental patients search for specific procedures: "root canal [city]", "dental implant [city]", "teeth whitening [city]". RankFlow builds procedure-specific directory profiles on our directory, targets procedure + city keywords, and keeps your GBP active with before/after posts and patient reviews.
Metric: 68% More Appointment Bookings from Search
Bullets:
- Procedure-specific directory profiles (root canal, implant, whitening, braces)
- GBP posts on dental awareness, offers, patient testimonials
- Citation on dental directories and local business listings
- Review management for dental procedure feedback
CTA: Explore Dental Solutions → /industries/dentist
Tab 4: Dermatologist
Tab Headline (H3):
Rank for Every Skin Concern.
Tab Body:
Dermatology patients search by condition: "acne treatment [city]", "hair loss specialist [city]", "skin clinic [city]". RankFlow creates condition-specific content, builds citations on beauty and health directories, and manages your GBP with skin care tips and treatment updates.
Metric: 74% Increase in Condition-Specific Search Traffic
Bullets:
- Condition-specific content (acne, hair loss, eczema, psoriasis)
- GBP posts on skin care tips, seasonal advice, treatment offers
- Citation on beauty and wellness directories
- Review replies addressing skin treatment outcomes
CTA: Explore Dermatology Solutions → /industries/dermatologist
Tab 5: Orthopedic
Tab Headline (H3):
Be Found for Every Bone & Joint Query.
Tab Body:
Orthopedic patients search after injury or chronic pain: "knee replacement [city]", "back pain specialist [city]", "sports injury doctor [city]". RankFlow targets injury and procedure-specific searches, builds citations on medical and sports directories, and keeps your GBP updated with rehabilitation tips and joint health content.
Metric: 65% More Calls from Injury-Related Searches
Bullets:
- Injury and procedure-specific content (knee replacement, ACL, back pain)
- GBP posts on joint health, rehabilitation exercises, injury prevention
- Citation on sports medicine and orthopedic directories
- Review management for surgical outcome feedback
CTA: Explore Orthopedic Solutions → /industries/orthopedic
Tab 6: Gynecologist
Tab Headline (H3):
Rank for Women's Health Searches.
Tab Body:
Gynecology patients search with privacy and trust concerns: "gynecologist [city]", "pregnancy doctor [city]", "women's health clinic [city]". RankFlow builds trust-focused content, manages sensitive review replies with empathy, and ensures your GBP reflects a safe, professional environment.
Metric: 79% Increase in Women's Health Search Calls
Bullets:
- Trust-focused content on pregnancy, menstrual health, fertility
- Empathetic review management for sensitive topics
- GBP posts on women's health awareness, checkup reminders
- Citation on women's health and maternity directories
CTA: Explore Gynecology Solutions → /industries/gynecologist
Tab 7: Pediatrician
Tab Headline (H3):
Be the Pediatrician Parents Trust.
Tab Body:
Parents search for pediatricians with care and urgency: "child doctor [city]", "pediatrician near me", "vaccination center [city]". RankFlow creates parent-friendly content, builds citations on parenting and health directories, and keeps your GBP active with child health tips and vaccination schedules.
Metric: 71% More Calls from Parent Searches
Bullets:
- Parent-friendly content on child health, vaccination, growth milestones
- GBP posts on child health tips, seasonal illness prevention
- Citation on parenting and child health directories
- Review management for pediatric care feedback
CTA: Explore Pediatric Solutions → /industries/pediatrician
Tab 8: Multi-Specialty Clinic
Tab Headline (H3):
Rank Every Specialty. Under One Roof.
Tab Body:
Multi-specialty clinics have multiple doctors, multiple services, and multiple search intents. RankFlow creates specialty-specific directory profiles for each service, builds citations for each doctor, and manages a unified GBP with all services listed. One clinic. Multiple rankings.
Metric: 3× More Search Visibility Across Specialties
Bullets:
- Specialty-specific directory profiles for each service
- Individual doctor profiles with separate citations
- Unified GBP with all services, doctors, and procedures
- Social posts highlighting each specialty weekly
CTA: Explore Multi-Specialty Solutions → /industries/multi-specialty
Industry Tab Interaction Notes#
- Active tab: animated underline in
--signal-defaultvia Framer MotionlayoutId(underline slides between tabs, 300msfluid_out), text--text-heading - Inactive tabs:
--text-muted, no underline - Tab chips: subtle transform hover — chip pulls ±3px toward cursor within 60px radius.
active:scale(0.98)press feedback. - Tab content panel: staggered cascade entrance (headline → metric → body → bullets at 80ms intervals), 500ms
fluid_out - Desktop: horizontal tab row, overflow scroll if >6 tabs visible
- Mobile: horizontal-scroll chips, active chip fills
--accent-light, no subtle transform hover (touch only) - Each tab panel: Headline left, Metric right (large,
--signal-default,tabular-nums), Body + Bullets below
Section 10: Integrations#
Surface: Light (--surface-base)
Layout: Centered headline + logo grid (no cards — just logos on tinted tiles with thin --border-default dividers). 4 rows × 4 cols on desktop, 3×4 on tablet, 2-col scroll on mobile.
Content#
Section label:
09 INTEGRATIONS
Headline (H2):
Connects With Everything
You Already Use.
Body (Figtree Regular, --text-body-lg, --text-secondary, max-width 56ch)
RankFlow doesn't replace your tools — it connects them. Link your Google Business Profile, Instagram, Facebook, and existing website. The AI Copilot uses data from all connected sources to build a unified online presence.
Stat strip (inline, above logo grid)
| Value | Label |
|---|---|
| 30+ | Directory Integrations |
| 4 | Social Platforms |
| 1 | Unified Dashboard |
Integration categories & logos (grouped, 4 columns of 4 logos each)
Google & Local Search
- Google Business Profile
- Google Maps
- Google Search Console
- Bing Places
Indian Directories
- Justdial
- Practo
- Sulekha
- Lybrate
Social Media
- WhatsApp Business
- Google Posts
Payments & Billing
- Razorpay
- Stripe
- UPI
- Net Banking
CTAs:
View All Integrations → /integrationsAPI Documentation → /developers
Interaction Notes#
- Logos in grayscale at 55% opacity, transition to full colour on hover (300ms
fluid_out) - Subtle hover transform: logos subtly translate 1px toward pointer position within their tile. Creates a subtle "living" feel without being distracting.
- Each tile:
--surface-elevatedbackground,--radius-md, dotted signal border on hover (radial gradient tracks cursor,accent.primary / 0.08, 400px radius). NO visible static border — dotted signal border IS the border. - Category headers in Archivo uppercase,
--tracking-label,--text-muted - Grid entrance: staggered cascade — tiles appear in reading order (left→right, top→bottom) at 60ms intervals,
fluid_out
Section 11: Security & Compliance#
Surface: Light (--surface-inset)
Layout: Horizontal row — headline left (40%), certification badges & features right (60%).
Content#
Section label:
10 SECURITY
Headline (H2):
Built for Indian Healthcare.
Compliant by Design.
Body:
Medical data is sensitive. Indian healthcare regulations are strict. RankFlow is architected for DPDPA 2023 compliance, MCI ethics rules, and patient data protection from day one — not as an afterthought.
Certification badges (horizontal row, official logos used per brand guidelines)
- DPDPA 2023 — designed to support compliance (full compliance by May 2027)
- MCI Ethics — all content is informational, not promotional
- End-to-End Encryption — AES-256 for all stored data
- Data Residency — India-based servers, data never leaves the country
Feature bullets:
- Doctor Approval Gate — all AI-generated content queued for approval before publishing
- Negative Review Safeguard — all reviews below 3 stars require human approval
- No Patient Data Storage — we process public reviews, not patient records
- Explicit Consent — clear consent capture in onboarding, easy withdrawal
- Data Deletion — full profile + citation deletion on request within 24 hours
- MCI-Compliant Content — no "best doctor" claims, no guaranteed outcomes, no promotional language
Section 12: Social Proof#
Surface: Light (--surface-base)
Layout: Single testimonial visible at a time with navigation dots. Logo wall below.
Content#
Section label:
11 CUSTOMERS
Headline (H2):
Trusted Where Rankings
Aren't Optional.
Testimonial 1:
"We went from #12 to #3 on Google Maps in 8 weeks. I didn't touch a single setting. RankFlow just built everything, published everywhere, and started sending me patients. Best ₹8,000 I've ever spent on marketing."
— Dr. Anjali Nair
Cardiologist, Kochi
Testimonial 2:
"I was paying ₹25,000/month to an agency that sent me reports. RankFlow sends me patients. My directory profile went live in an hour. My GBP has posts every week. I have 47 new reviews. And I haven't logged in once."
— Dr. Rajesh Kumar
Dentist, Trivandrum
Testimonial 3:
"As a gynecologist, I was worried about review replies and content tone. RankFlow's approval gate means I see every post before it goes live. The AI drafts are professional and empathetic. My patients trust me more now."
— Dr. Priya Menon
Gynecologist, Calicut
Logo wall: Grayscale logos at 40% opacity. [Kochi clinic placeholder] · [Trivandrum clinic placeholder] · [Calicut clinic placeholder] · [Thrissur clinic placeholder] · [Bangalore clinic placeholder]
Interaction Notes#
- Testimonial displayed in a glass frame card: outer shell (
surface.elevated,1px border.default,p-1.5,rounded-2xl), inner core (surface.base,rounded-[calc(2rem-0.375rem)],px-12 py-10). Dotted signal border on outer shell. - Decorative opening quote mark in
--accent-primary,text-6xl, positioned absolutely at top-left of inner core - Author name: Archivo Semibold. Title/city: Figtree,
--text-secondary. - Carousel auto-advances every 6s, opacity crossfade 250ms
fluid_out - NO 3D tilt, NO glow
Section 13: Final CTA#
Surface: Dark (--surface-dark)
Layout: Full section, centered text, generous vertical padding (--section-gap × 1.5).
Content#
Headline (H2):
Ready to Rank in 60 Days?
Subheadline:
7-day free trial. No payment required. No commitment. Onboard in 5 minutes. Everything goes live in 60 minutes. You see rankings in 60 days. Or you walk away — no questions asked.
Primary CTA: Start Your Free Trial → /onboard
Secondary CTA: Talk to Our Team → /contact
Supporting line (Figtree, --text-caption, --text-on-dark-muted)
Only 3 clinics per city per specialty. Spots fill fast.
Background: Single soft radial — --accent-primary at 4% opacity, 800px radius, fading to transparent. Not a glow — a gentle warmth.
CTA treatment: sharp rectangular CTA with inline Lucide arrow. Subtle transform hover (2px max). Active press scale(0.98). Subtle background pulse on the primary CTA — signal.default opacity oscillates 0.9 → 1.0 over 3s, infinite, ease-in-out. (This is the ONE exception to the no-pulse rule — final conversion moment earns it.)
Section 14: Footer#
Surface: Dark (--surface-dark-elevated)
Layout: 4-column nav grid + SEO description block + Backed-By strip + address block + bottom bar.
Content#
Column 1: Platform
- Overview →
/platform - Onboard →
/platform/onboard - Build →
/platform/build - Publish →
/platform/publish - Refresh →
/platform/refresh - Results →
/platform/results - Compare →
/compare - Pricing →
/pricing - Demo →
/demo
Column 2: Industries
- General Physician →
/industries/general-physician - Cardiologist →
/industries/cardiologist - Dentist →
/industries/dentist - Dermatologist →
/industries/dermatologist - Orthopedic →
/industries/orthopedic - Gynecologist →
/industries/gynecologist - Pediatrician →
/industries/pediatrician - Multi-Specialty →
/industries/multi-specialty
Column 3: Resources
- Blog →
/blog - Local SEO Guide →
/guides/local-seo - GBP Optimization →
/guides/gbp - Citation Building →
/guides/citations - AI Engine Optimization →
/guides/aio - FAQ →
/faq
Column 4: Company
- About →
/about - Contact →
/contact - Partner Program →
/partners - Careers →
/careers
SEO Description Block (full-width, sits below the 4-column nav grid):
Headline:
RankFlow AI — India's AI Local Rank Engine for ClinicsBody (2-3 sentences, max 280 chars, keyword-rich):RankFlow AI is India's first AI-powered local rank engine for medical clinics and doctors. It builds 30 citations, manages your Google Business Profile, creates a premium directory profile on India's trusted healthcare directory, posts to social, and replies to reviews — all autonomously. Only 3 clinics per city per specialty. Start your 7-day free trial.Link:Learn more →→/platform
Backed-By Strip (full-width, sits below SEO block):
Label:
Backed byLogos (4 slots, monochrome on dark, hover restores brand color, ~28px height, ~32px gap):
[ Antler logo placeholder ][ NVIDIA Inception logo placeholder ][ Google for Startups logo placeholder ][ Microsoft for Startups logo placeholder ]
Address Block (full-width, sits above bottom bar):
32 Pekin Street, #05-01
Singapore 048762
hello@rankflow.ai
Bottom Bar:
© 2026 RankFlow AI. All rights reserved. · Privacy · Terms · Security · Sitemap · DPDPA Compliance
[LinkedIn] [YouTube] [WhatsApp]
Do not publish DPDPA 2023 full compliance or MCI certification unless independently verified.
Visual / Footer#
- Footer background:
surface.dark.elevatedwith noise overlay at 0.015 opacity (matches global) - Section labels (
Platform,Industries,Resources,Company,Backed by): Archivo Bold uppercase,letter-spacing: 0.08em,captionscale,text.on_dark_mutedcolor - Nav links: Figtree Regular,
body_sm,text.on_dark_muteddefault →text.on_darkon hover (no underline; underline appears as1pxaccent under text viatransform: scaleX(0 → 1)from left, 200msfluid_out) - SEO description block headline: Archivo Bold,
h5scale,text.on_dark. Body text: Figtree Regular,body_sm,text.on_dark_muted, max-w 72ch. "Learn more →" link:accent.primarycolor, arrow icon translates4pxright on hover,fluid_out - Backed-By logos: monochrome
text.on_dark_mutedSVG fill by default; hover restores native brand color viafluid_out200ms. No logos in colored boxes — flat horizontal row, left-aligned. On mobile, scrolls horizontally with subtle fade mask - Address block: Figtree Regular,
body_sm,text.on_dark_muted. Email is amailto:link with same hover-underline pattern as nav links - Social icons (LinkedIn, YouTube, WhatsApp): 20px monochrome SVG,
text.on_dark_muted→accent.primaryon hover,fluid_out200ms. No background pills, no border boxes - Security link: rendered as small text link inline with Privacy and Terms. DPDPA compliance badge renders only after verification.
- Vertical rhythm:
64pxbetween footer top and first row,48pxbetween blocks,32pxbetween block heading and content - Entrance: footer enters via
fade-up + opacityonly when scrolled into view, 600msfluid_out. Backed-By logo strip has staggered cascade entrance (60ms intervals, left-to-right) once footer is in view - No newsletter signup.
Note on Privacy/Terms#
Privacy Policy, Terms of Service, and Security links render as small text links in the bottom bar beside the copyright line, separated by · dividers, in text.on_dark_muted color at caption scale. DPDPA Compliance link added for Indian regulatory transparency.
SEO Footer Enhancements#
- Sitemap link added to bottom bar for crawler discovery (
/sitemap.xml) - SEO description block provides crawlable, keyword-rich text about RankFlow's platform and verticals
- Descriptive anchor text on every nav link — no "click here" or generic labels
- 4-column structure expands crawlable internal link surface by 2.5× vs previous 2-column layout
- Blog + Guides added as primary Resource links for content hub discovery
- All pillar pages linked with keyword-rich labels: "AI local rank engine" (/platform), "Citation building" (/build), "GBP management" (/publish), "AI engine optimization" (/results)
- Industry pages linked with full keyword labels for vertical SEO authority
- Schema: Footer Organization schema should reference
sameAslinks (LinkedIn, YouTube, WhatsApp) andaddressfrom homepage Organization JSON-LD
Responsive Behavior Summary#
| Section | Desktop | Tablet | Mobile |
|---|---|---|---|
| 01 Hero | Full viewport, centered | Same | Reduce to --text-h1, CTAs stacked |
| 02 Problem | 2-column | 2-column | 1-column stacked |
| 03 Loop (Pin) | Horizontal pin, 5 phases | Horizontal pin | Vertical stack, no pin |
| 04 Citations | 2-col list × 4 rows | 2-col × 4 rows | 1-col stack |
| 05 Directory Profile | Split with phone mock | Split | Stack |
| 06 GBP + Social | Split 45/55 | Split 50/50 | Stack (text above visual) |
| 07 AI Engine | Split with mobile mock | Split | Stack |
| 08 Results | 4-col metrics + callout | 2×2 metrics | Stack, callout full-width |
| 09 Industries | Tabs + panel | Tabs + panel | Scroll chips + panel |
| 10 Integrations | 4×4 logo grid | 3×4 | 2-col scroll |
| 11 Security | Horizontal row | Stack (label + bullets) | Stack |
| 12 Social Proof | Carousel + logos | Carousel + logos | Carousel + 2-row logos |
| 13 Final CTA | Centered | Centered | Centered |
| 14 Footer | 4-col nav + SEO + Backers + address | 2×2 col grid + SEO + Backers | 1-col stacked + horizontal-scroll backers |
Content-to-Design DNA Crosscheck (v1.0.0)#
✅ No "SEO tool" or "marketing agency" terminology — we are a "Local Rank Engine"
✅ No "dashboard" or "optimization" — we "rank" and "own"
✅ 5-phase loop (ONBOARD→BUILD→PUBLISH→REFRESH→RESULTS) with deep-dive for each phase
✅ No references to particles, glow, gradient_cta, 3D tilt, JetBrains Mono (v1 artifacts removed)
✅ Light-dominant with 5 dark sections (Hero, Loop, Directory Profile, AI Engine, Final CTA) earning their darkness
✅ Numbered section labels (01–14) create editorial rhythm
✅ All metric strips use Archivo Black + count-up animation (tabular-nums, no mono font)
✅ 8 industry tabs (GP, Cardiologist, Dentist, Dermatologist, Orthopedic, Gynecologist, Pediatrician, Multi-Specialty)
✅ Directory Profile elevated to Section 5 for onboard → build → publish narrative flow
✅ Exclusivity callout with city-category scarcity in Section 8
✅ AI Engine Optimization (AEO) explicitly called out as unique feature
✅ MCI compliance and DPDPA 2023 mentioned with "designed to support" language
✅ 7-day free trial CTA with exclusivity guarantee throughout
✅ India-first identity — Kerala cities, Indian directories, rupee pricing, vernacular support
✅ Review management with approval gate and sentiment analysis
✅ 30 citations with Indian directories (Justdial, Practo, Sulekha, Lybrate, IndiaMART)
v1.0.0 Visual Upgrade Checklist#
✅ Global Visual Directives section added (noise, glass frame, sharp rectangular CTA, fluid_out, hue-tinted shadows)
✅ Hero: blur-to-sharp entrance sequence (800ms, staggered delays)
✅ Hero screenshot: glass frame, −40px overlap into Section 2
✅ Section 2 stats: glass frame mini-cards with dotted signal border
✅ Section 3 loop: glass frame phase cards with dotted signal border
✅ Section 4: asymmetric grid (1.2fr/0.8fr with vertical offset), glass frame mockup with overlap
✅ Section 8: glass frame exclusivity callout (floating shadow, no visible border)
✅ Section 9: subtle tab chips, layoutId animated underline, staggered panel entrance
✅ Section 10: dotted signal border tiles, subtle hover transform logos, staggered grid entrance
✅ Section 12: glass frame testimonial card with dotted signal border
✅ Section 13: 800px radial, sharp rectangular CTAs with subtle transform hover + subtle background pulse
✅ All easing → fluid_out cubic-bezier(0.32, 0.72, 0, 1)
✅ All shadows → hue-tinted oklch(0.25 0.02 264)
✅ ≥3 layout archetypes (asymmetric split, pinned horizontal scroll, centered metrics, tabbed panels, logo grid, glass frame testimonial)