RankFlow AI SEO-Optimized Directory Profile — Master Build Plan

Project: RankFlow AI Homepage (Route: /)
Version: 1.0.0 — Production Build Plan
Date: 2026-06-13
Design DNA: RankFlow AI System (Deep Navy Canvas, #f0a500 Gold Accent, Sharp Floating Nav, Lucide Icons, Translucent Glass, India-First Identity)
Skills Applied: creating-landing-pages (hero-first, section expansion) + design-taste-frontend (premium UI, anti-symmetric, anti-generic)

---

1. Hero-First Architecture (50% of Build Effort)#

Rule from creating-landing-pages: The hero section sets colors, typography, and spacing for the rest of the site. Spend 50% of effort here.

Layout: Asymmetric Editorial Split (Design Variance: 8)#

Typography (Anti-Generic Override)#

Infographic: Hero Isometric Cityscape Visual#

Asset Type: Generated image (PNG) + HTML overlay cards
Dimensions: 1200 × 900 (responsive via srcset)
Style: Flat isometric cityscape line art — Indian city elements (clinic, pharmacy, auto-rickshaw, street signs, Google Maps pin). No baked text, no UI cards, no logos in image.

HTML Overlay Cards (6):

Card Style: Sharp rectangle, dotted #ffd880 border, translucent white glass (bg-white/25), backdrop-blur-md, inner white edge (border-t-white/40), Lucide gold icon, uppercase title/status in Archivo.

Animation:

• Entrance: Illustration scales 0.985 → 1 (800ms), connector lines draw in (SVG stroke-dashoffset), cards reveal with staggered scale(0.95) + translateY(12px) → scale(1) + translateY(0)
• Loop: One card at a time receives signal-lock state — subtle icon pulse (scale 1.04, 2s cycle), faint bottom rail (#f0a500 at 8% opacity), brief glass sheen (white gradient sweep, 1.5s)
• GSAP: gsap.timeline() with staggerChildren: 0.12, ease: "power2.out"
• Forbidden: No card bobbing, no racing dots, no particle systems, no node networks, no neon glow, no background video, no scroll hijack
• prefers-reduced-motion: Cards render immediately, all transforms removed, signal loops disabled

---

2. Section-by-Section Infographic & Layout Plan#

Section 1A: Answer-First Definition (GEO-Optimized Block)#

Layout: Narrow editorial block, centered, max-width 56ch, directly below hero.
Purpose: AI search engine extractability — answers "What is RankFlow AI?" in 40-60 words for LLM/GEO crawlers.

Infographic: Code-Rendered RankFlow Diagram

• Type: SVG + HTML (NOT a raster image)
• Architecture:
  • Central node: RankFlow logo (48px)
  • 5 orbiting cards: Onboard, Build, Publish, Refresh, Results
  • Dotted SVG connector paths from each card to central logo
  • GSAP: Subtle pulse rings on central node (scale 1 → 1.06, 3s, infinite, ease-in-out)
  • Slow orbiting ring details (rotate 360°, 60s, linear)
  • Small signal dots traveling from central logo to each card (offset-path along SVG path, staggered, 4s each)
• Background: Clean white canvas — no gold gradient panel
• GEO: Plain text answer visible as crawlable HTML, no JS-rendered text, no images, no hidden content

---

Section 2: Problem Statement#

Layout: Asymmetric 2-column (55% text / 45% cards), below md stacks to single column.
Surface: --surface-inset (#f4f6f8 light navy)

Infographic: 3 Pain-Point Glass Frame Cards
Card Style: Glass frame mini-card

• Outer: surface.elevated, 1px border #fff3d0, p-6, rounded-xl
• Shadow: elevation.sm — hue-tinted (oklch(0.25 0.02 264) / 0.08)
• Dotted signal border on hover: radial gradient tracks cursor (#f0a500 / 0.08, 400px radius)
• Icon left (24px, #5a6b7a), title + description below

Transition Line: "The tools aren't broken. They just weren't built for Indian clinics." — centered, #5a6b7a, Figtree Medium.

---

Section 3: The RankFlow Loop — ONBOARD → BUILD → PUBLISH → REFRESH → RESULTS#

Layout: Full-viewport horizontal pinned scroll. Total scroll distance: ~500vh (100vh per phase).
Surface: Dark (#0d1b2a — earns its darkness as the product's core loop)

Infographic: "The RankFlow Loop" — Lottie SVG Animation (The Page's Signature Visual)

Canvas: 1200 × 800px SVG viewBox. Dark background (#0d1b2a).

SVG Layer Architecture:

Layer 0: Background — radial gradient (dark center to darker edges)
Layer 1: Loop Ring — circular path, 5 quadrant arcs
Layer 2: Phase Nodes — 5 circles (48px) on the ring at 12, 2, 4, 6, 10 o'clock
Layer 3: Particle Stream — 15-20 dots (3px) traveling clockwise along ring path
Layer 4: Connection Lines — inner cross-connections between nodes
Layer 5: Active Phase Detail — expanded info panel (280 × 180px) for active node
Layer 6: Metric Badges — floating counters near active node with tabular-nums

Phase Nodes:

Animation Scenes (Lottie Keyframes):

Lottie Spec:

• Format: Lottie JSON (After Effects or Rive export)
• Frame rate: 30fps
• File size: <500KB total, <150KB per scene
• Interactivity: lottie-interactivity with goToAndStop() synced to ScrollTrigger progress
• Fallback: Static SVG with all 5 nodes lit, prefers-reduced-motion serves this

GSAP ScrollTrigger Sync:

progress 0.00–0.05 → Idle loop (Scene 0)
progress 0.05–0.20 → Scene 1 (ONBOARD)
progress 0.20–0.40 → Scene 2 (BUILD)
progress 0.40–0.60 → Scene 3 (PUBLISH)
progress 0.60–0.80 → Scene 4 (REFRESH)
progress 0.80–0.95 → Scene 5 (RESULTS)
progress 0.95–1.00 → Perpetual loop (Scene 6)

Phase Cards (Within Scroll):

• Each phase enters as a glass frame card sliding in from right
• Previous phase fades to opacity: 0.3 and shifts left
• Active phase card: dotted signal border tracks cursor on outer shell
• Progress indicator: 5 dots at bottom, active fills #f0a500
• Metric strip numbers count up on phase entry (tabular-nums, staggered cascade)

Phase Dashboard Mockups (Inside Each Card):

• ONBOARD: Mobile phone with onboarding form — step 1 of 5, clinic name, specialty, address, GPS pin
• BUILD: Directory submission diagram — 30 nodes with unique descriptions, directory profile preview
• PUBLISH: Multi-platform publish animation — 30 arrows from center to directory nodes + social icons
• REFRESH: Calendar grid showing monthly events — content rewrite, GBP post, social post, NAP check
• RESULTS: Dark dashboard with ranking trend line (climbing), citation count, review score, social reach

---

Section 4: Citation Deep Dive#

Layout: Asymmetric split — grid-cols-[0.45fr_0.55fr] (copy LEFT, visual RIGHT). Mockup overlaps -40px into Section 5.
Surface: Light (#ffffff)

Infographic 1: Trusted Directories Callout (Full-Width Banner)

• Style: surface.elevated, rounded-lg, thin border #f0a500
• Label: TRUSTED DIRECTORIES (Archivo uppercase, #f0a500)
• H3 + body + 5 bullet points about directory coverage and verification

Infographic 2: 9 Citation Categories Grid

• Layout: grid-cols-[1.2fr_0.8fr] with 8px vertical offset on right column (visual tension)
• Each entry: Title (Archivo Bold) + Description (Figtree Regular, max-width 42ch)
• 9 items: Google Business Profile, Justdial, Practo, Sulekha, Lybrate, IndiaMART, Apple Maps, Bing Places, Yelp India

Infographic 3: Citation Dashboard Mockup (RIGHT)

• Dark-themed dashboard in glass frame
• Grid of 30 directory tiles with status indicators (live/pending/removed)
• Side-panel showing DA scores and traffic estimates
• Glass frame outer shell: dotted signal border on hover
• Overlaps -40px into Section 5 via negative margin
• NO glow, NO particle overlay — strictly functional UI mockup

---

Section 5: Directory Profile#

Layout: Split — 45% directory profile preview LEFT / 55% copy RIGHT. Alternating pattern.
Surface: Dark (#0d1b2a)

Infographic: Directory Profile Preview Mockup

• Device: iPhone 15 frame (CSS or SVG, NOT raster)
• Dark app UI inside frame
• Screen 1 (Main): Landing page preview — hero with clinic name + photo → services grid → FAQ accordion → map embed → reviews widget → WhatsApp button
• Screens 2-4 (Below main): 3 small screens showing mobile view, desktop view, schema validation
• Animation: Phone enters from left with subtle parallax (0.15 factor). Screen content animates 5-step sequence (hero → services → FAQ → map → reviews, 2s total)
• prefers-reduced-motion: Static screens, no animation

Hero Metric: <60 sec — Directory Profile Generation (Archivo Black, clamp(3rem, 5vw, 5rem), #f0a500)

---

Section 6: GBP + Social Deep Dive#

Layout: Split — 45% copy LEFT / 55% workflow visual RIGHT. Alternating pattern.
Surface: Light (#f4f6f8)

Infographic: GBP + Social Workflow Diagram (RIGHT)

• Dark-themed vertical flow diagram
• Nodes: Review arrives → Sentiment analysis → AI generates reply → Doctor approves → Published
• Clean connecting lines (1.5px, #f0a500 at 60% opacity)
• No decorative elements, no glow, no particles
• Each node: Lucide icon + label in glass frame mini-card
• Platform icons: Google, Instagram, Facebook
• Arrow connectors between nodes with subtle draw-in animation on scroll

Pull Quote: Glass frame card with large italic text + attribution. Decorative opening quote mark in #f0a500, text-6xl, positioned absolutely top-left.

---

Section 7: AI Engine Optimization#

Layout: Split — 45% mobile mockup LEFT / 55% copy RIGHT. Alternating pattern.
Surface: Dark (#0d1b2a)

Infographic: Mobile Device Mockup (LEFT)

• Mobile device showing AI engine response
• Query: "Best cardiologist in Kochi"
• Response: RankFlow-optimized clinic appears as top recommendation with photo, rating, address, call button
• Static device (no 3D carousel — forbidden per design DNA)
• Single column, clean layout

---

Section 8: ROI#

Layout: Centered headline, 4 metrics in a row. Then horizontal exclusivity callout row.
Surface: Light (#ffffff)

Infographic 1: Metrics Row

• 4 metrics: #3 / 28/30 / 4.2★ / 4.2K
• Style: Archivo Black for values, Figtree uppercase for labels
• Count-up animation on scroll entry (tabular-nums, staggered 100ms)
• Responsive: 4-col → 2×2 → stacked

Infographic 2: Exclusivity Callout (Glass Frame)

• Outer shell: surface.elevated, 1px border #fff3d0, p-1.5, rounded-2xl
• Inner core: surface.base, rounded-[calc(2rem-0.375rem)], no visible border
• Floats with elevation.lg hue-tinted shadow (shadow does the work, no visible border on inner card)
• Dotted signal border on hover
• Label: CITY-CATEGORY EXCLUSIVITY (Archivo uppercase, #f0a500)
• H3 + body + 4 bullets
• Footnote: "Based on pilot program and anonymized client-reported metrics"

---

Section 9: Industries#

Layout: Segmented selector (8 tabs) with content panel below.
Surface: Light (#f4f6f8)

Infographic: Tabbed Industry Panel

• Tabs: 8 horizontal chips (GP, Cardiologist, Dentist, Dermatologist, Orthopedic, Gynecologist, Pediatrician, Multi-Specialty)
• Active tab: animated underline in #f0a500 via Framer Motion layoutId (slides between tabs, 300ms, cubic-bezier(0.32, 0.72, 0, 1))
• Inactive: #5a6b7a, no underline
• Tab chips: subtle transform hover — chip pulls ±3px toward cursor within 60px radius. active:scale(0.98) press feedback.
• Content Panel: Per tab — Headline left, Metric right (large, #f0a500, tabular-nums), Body + Bullets below
• Panel entrance: staggered cascade (headline → metric → body → bullets at 80ms intervals)
• Mobile: horizontal-scroll chips, active chip fills #fff3d0, no subtle hover (touch only)

---

Section 10: Integrations#

Layout: Centered headline + logo grid (no cards). 4 rows × 4 cols desktop.
Surface: Light (#ffffff)

Infographic: Logo Grid

• 16 logos grouped in 4 categories: Google & Local Search, Indian Directories, Social Media, Payments
• Each logo on tinted tile (#f4f6f8 background, rounded-md)
• Logos in grayscale at 55% opacity, transition to full color on hover (300ms cubic-bezier(0.32, 0.72, 0, 1))
• Subtle hover transform: logo translates 1px toward pointer within tile
• Tile: dotted signal border on hover (radial gradient tracks cursor, #f0a500 / 0.08, 400px radius)
• NO visible static border — dotted signal border IS the border
• Grid entrance: staggered cascade, 60ms intervals, reading order

---

Section 11: Security & Compliance#

Layout: Horizontal row — headline left (40%), certification badges + features right (60%).
Surface: Light (#f4f6f8)

Infographic: Compliance Badge Row

• 4 badges: DPDPA 2023, MCI Ethics, End-to-End Encryption, Data Residency (India)
• Badge style: Glass frame mini-card, icon + label + status
• NO unverified claims — DPDPA uses "designed to support" language until full certification
• Feature bullets: 6 items with Lucide icons (Doctor Approval Gate, Negative Review Safeguard, No Patient Data Storage, Explicit Consent, Data Deletion, MCI-Compliant Content)

---

Section 12: Social Proof#

Layout: Single testimonial carousel + logo wall below.
Surface: Light (#ffffff)

Infographic: Testimonial Card (Glass Frame)

• Outer shell: surface.elevated, 1px border #fff3d0, 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: #f0a500, text-6xl, absolute top-left of inner core
• Author: Archivo Semibold. Title/city: Figtree, #5a6b7a
• Carousel auto-advances every 6s, opacity crossfade 250ms
• NO 3D tilt, NO glow

Logo Wall: Grayscale logos at 40% opacity. Kerala cities + Bangalore.

---

Section 13: Final CTA#

Layout: Full section, centered, generous vertical padding (section-gap × 1.5).
Surface: Dark (#0d1b2a)

Infographic: Background Radial

• Single soft radial: #f0a500 at 4% opacity, 800px radius, fading to transparent
• NOT a glow — gentle warmth only

CTA Treatment:

• Sharp rectangular primary CTA with inline Lucide arrow
• Subtle transform hover: 2px max translate
• Active press: scale(0.98)
• Subtle background pulse on primary CTA: #f0a500 opacity oscillates 0.9 → 1.0 over 3s, infinite, ease-in-out (the ONE exception to the no-pulse rule — final conversion moment)

---

Section 14: Footer#

Layout: 4-column nav grid + SEO description block + Backed-By strip + address block + bottom bar.
Surface: Dark elevated (#0a1224 with noise overlay at 0.015 opacity)

Infographic Elements:

• 4-column nav: Platform, Industries, Resources, Company — expands crawlable internal link surface by 2.5×
• SEO Description Block: Full-width keyword-rich paragraph (max 280 chars) + "Learn more →" link
• Backed-By Strip: 4 logos (Antler, NVIDIA Inception, Google for Startups, Microsoft for Startups) — monochrome on dark, hover restores brand color
• Address Block: Physical address + email (mailto: link)
• Bottom Bar: Copyright + Privacy · Terms · Security · Sitemap · DPDPA Compliance + LinkedIn + YouTube + WhatsApp icons

---

3. Complete SEO & Schema Plan#

3.1 Page Metadata#

<title>RankFlow AI — India's AI Local Rank Engine for Doctors & Clinics</title>
<meta name="description" content="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.">
<link rel="canonical" href="https://rankflow.ai">

<!-- Open Graph -->
<meta property="og:title" content="RankFlow AI — India's First AI-Powered Local Rank Engine">
<meta property="og:description" content="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.">
<meta property="og:image" content="https://rankflow.ai/og/homepage.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:type" content="website">
<meta property="og:url" content="https://rankflow.ai">

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="RankFlow AI — India's First AI-Powered Local Rank Engine">
<meta name="twitter:description" content="Onboard in 5 minutes. Rank in 60 days. One AI copilot, 30 citations, full GBP management, social posts, and review replies — all automated.">
<meta name="twitter:image" content="https://rankflow.ai/og/homepage.webp">

<!-- Viewport & Mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f0a500">
<meta name="robots" content="index, follow, max-image-preview:large">

3.2 JSON-LD Schema (Structured Data)#

Schema 1: Organization

{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "RankFlow AI",
  "url": "https://rankflow.ai",
  "logo": "https://rankflow.ai/logo.svg",
  "description": "RankFlow AI is India's first AI-powered local rank engine for medical clinics and doctors.",
  "sameAs": [
    "https://www.linkedin.com/company/rankflow-ai",
    "https://www.youtube.com/@rankflowai",
    "https://wa.me/918000000000"
  ],
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "32 Pekin Street, #05-01",
    "addressLocality": "Singapore",
    "postalCode": "048762",
    "addressCountry": "SG"
  }
}

Schema 2: SoftwareApplication

{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "RankFlow AI Local Rank Engine",
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "Web, iOS, Android",
  "offers": {
    "@type": "Offer",
    "price": "4000",
    "priceCurrency": "INR",
    "priceValidUntil": "2026-12-31",
    "description": "From ₹4,000/month. 7-day free trial available."
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "15"
  },
  "featureList": [
    "30 citation building across Indian directories",
    "Google Business Profile optimization",
    "AI-generated directory profile with schema",
    "Social media automation (Instagram, Facebook)",
    "Review management with auto-reply",
    "AI engine optimization for ChatGPT, Perplexity, Gemini"
  ]
}

Schema 3: WebSite (with Sitelinks Searchbox)

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "RankFlow AI",
  "url": "https://rankflow.ai",
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "https://rankflow.ai/search?q={search_term_string}"
    },
    "query-input": "required name=search_term_string"
  }
}

Schema 4: FAQPage

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is RankFlow AI?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "RankFlow AI is India's first AI-powered local rank engine for medical clinics and doctors. It builds 30 citations across Indian directories, manages your Google Business Profile, creates an SEO-optimized directory profile, posts to social media, and replies to reviews — all autonomously. You onboard in 5 minutes. Everything goes live in 60 minutes."
      }
    },
    {
      "@type": "Question",
      "name": "How much does RankFlow AI cost?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "RankFlow AI starts at ₹4,000/month for the Starter plan. The Standard plan is ₹8,000/month, Premium is ₹15,000/month, and Enterprise is ₹25,000+/month. All plans include a 7-day free trial with no payment required."
      }
    },
    {
      "@type": "Question",
      "name": "How long does it take to see results with RankFlow AI?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Most clients see their Google Maps position improve within 30-60 days. Your directory profile goes live in 60 minutes, citations are built within 24 hours, and GBP posts start immediately. Full ranking results typically appear within 60-90 days."
      }
    },
    {
      "@type": "Question",
      "name": "Is RankFlow AI compliant with MCI ethics rules?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes. RankFlow AI is designed to support MCI ethics compliance. All AI-generated content is informational, not promotional. We do not make 'best doctor' claims, guarantee cures, or use promotional language. All review replies and social posts are queued for doctor approval before publishing."
      }
    }
  ]
}

Schema 5: Review (for each testimonial)

{
  "@context": "https://schema.org",
  "@type": "Review",
  "itemReviewed": {
    "@type": "SoftwareApplication",
    "name": "RankFlow AI Local Rank Engine"
  },
  "author": {
    "@type": "Person",
    "name": "Dr. Anjali Nair",
    "jobTitle": "Cardiologist",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Kochi",
      "addressCountry": "IN"
    }
  },
  "reviewBody": "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.",
  "reviewRating": {
    "@type": "Rating",
    "ratingValue": "5",
    "bestRating": "5"
  }
}

Schema 6: BreadcrumbList

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://rankflow.ai"
    }
  ]
}

Schema 7: LocalBusiness (for the company itself, if applicable)

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "RankFlow AI",
  "image": "https://rankflow.ai/logo.svg",
  "url": "https://rankflow.ai",
  "telephone": "+91-800-000-0000",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "32 Pekin Street, #05-01",
    "addressLocality": "Singapore",
    "postalCode": "048762",
    "addressCountry": "SG"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": "1.2839",
    "longitude": "103.8467"
  },
  "openingHoursSpecification": {
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
    "opens": "09:00",
    "closes": "18:00"
  }
}

3.3 H1-H6 Heading Hierarchy#

3.4 EEAT Implementation Checklist#

Experience:

• 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 directory listing samples with visible redaction where needed

Expertise:

• Content reviewed by Local SEO Subject Matter Expert (5+ years in Indian medical marketing)
• Technical review by AI/ML Engineer (multi-LLM orchestration experience)
• Author bios with credentials and LinkedIn profiles in footer or about page
• Local SEO-specific terminology used correctly ("citations," "NAP," "GBP," "schema," "DA")

Authoritativeness:

• Named customer testimonials: Dr. Anjali Nair (Kochi), Dr. Rajesh Kumar (Trivandrum), Dr. Priya Menon (Calicut)
• Backed-by logos: Antler, NVIDIA Inception, Google for Startups, Microsoft for Startups
• Industry-specific depth: 8 medical specialty tabs with detailed use cases
• Integration ecosystem: 30+ directory integrations, 4 social platforms

Trustworthiness:

• Source labeling on ALL metrics (see table below)
• Review cadence: Quarterly (last updated 2026-06-13, next review 2026-09-13)
• Reviewer names and credentials visible
• No unverified compliance claims (DPDPA 2023 uses "designed to support" until full certification)
• MCI ethics compliance: "informational, not promotional" language
• Privacy Policy, Terms of Service, Security, DPDPA Compliance links in footer
• Physical address and contact email in footer
• Sitemap link for crawler discovery
• Exclusivity guarantee: "Only 3 clinics per city per specialty" — verified and enforceable

Source Labeling (Mandatory on All Metrics):

3.5 GEO / AI Search Optimization#

Answer-First Block (Section 1A):

• Plain text, no images, no hidden content, no JS-rendered text
• Directly answers "What is RankFlow AI?" in 40-60 words
• Formatted as standalone definition, visible to AI crawlers

FAQ Schema: Covers "What is RankFlow AI?", "How much does it cost?", "How long to see results?", "Is it MCI compliant?"

Terminology Consistency:

• "Local Rank Engine" (not "SEO tool" or "marketing platform")
• "AI Copilot" (not "dashboard" or "account manager")
• "Own Your Rankings" (not "optimization" or "management")
• "City-Category Exclusivity" (not "limited slots" or "scarcity")
• "Set It and Rank" (not "automated workflow" or "AI pipeline")

Content Freshness:

• Last updated: 2026-06-13
• Next review: 2026-09-13 (90-day cycle)
• Review within 7 days of product feature change, regulatory update, or competitive claim revision

---

4. Design Token Mapping#

Color Palette (Single-Accent System)#

Typography Scale#

Easing & Motion#

Spacing & Layout#

---

5. Animation & Motion Plan#

Global Entrance Pattern (Per Section)#

Sequence: Label → Headline → Body → CTAs/Visuals → Supporting elements
Delay: 100ms between each element
Animation: translateY(20px) + opacity(0.01) → translateY(0) + opacity(1)
Duration: 600ms
Easing: cubic-bezier(0.32, 0.72, 0, 1)
Fill mode: both

Why: animation-fill-mode: both applies styles before AND after animation. Avoiding opacity: 0 prevents flash of invisible content.

Section-Specific Animations#

Magnetic & Physics Effects (Where MOTION_INTENSITY > 5)#

Hardware Acceleration Rules#

• Animate ONLY: transform and opacity
• Never animate: top, left, width, height, margin, padding
• Use will-change: transform sparingly, only on actively animating elements
• Isolate perpetual motion in microscopic Client Components with React.memo
• Noise/grain filter: Fixed pseudo-element, pointer-events-none, never on scroll containers

---

6. Responsive Architecture#

Breakpoint Strategy#

Section-by-Section Responsive Behavior#

Mobile-Specific Guardrails#

• Never hide critical rank callouts on mobile — they remain visible as scaled translucent overlays
• Never use h-screen for hero — use min-h-[100dvh] to prevent iOS Safari layout jumping
• Pinned sections disabled below md — no scroll hijack, no horizontal scroll, no 3D carousel
• Touch-only interactions on mobile — no subtle cursor-tracking hover effects
• Max-width containers: max-w-[1400px] mx-auto with px-4 (mobile) / px-12 (desktop)

---

7. Asset Production Checklist#

Image Assets (To Generate)#

Animation Assets (To Produce)#

---

8. Component Inventory#

shadcn/ui Components (To Install)#

Custom Components (To Build)#

---

9. Performance & Accessibility Checklist#

Performance#

• Hero image: <img loading="eager"> with srcset for responsive sizes
• All other images: loading="lazy" by default
• Lottie JSON: Lazy-loaded, <500KB total, scene splitting if needed
• GSAP: Tree-shake unused plugins, import only ScrollTrigger, gsap
• Fonts: Preload Archivo Black and Figtree. Use font-display: swap
• CSS: Tailwind purges unused styles. Custom CSS in globals.css only
• No h-screen — use min-h-[100dvh] for all full-height sections
• Noise/grain: Fixed pseudo-element, pointer-events-none, never on scroll containers

Accessibility (WCAG 2.1 AA)#

• Color contrast: All text meets 4.5:1 ratio (heading) and 3:1 for large text
• Focus states: Visible outline: 2px solid #f0a500 on all interactive elements
• prefers-reduced-motion: All animations disabled, content visible immediately
• Alt text: All images have descriptive alt text (no decorative image alt)
• Semantic HTML: Proper heading hierarchy, landmark regions (<main>, <section>, <nav>, <footer>)
• ARIA labels: Icon-only buttons, carousel controls, tab panels
• Keyboard navigation: All tabs, carousel, CTAs fully keyboard accessible
• Screen reader: Metric source labels read aloud, decorative elements hidden (aria-hidden="true")
• Form labels: All inputs have associated labels (future onboarding forms)
• Language: lang="en" with ml, hi, ta support for i18n

Core Web Vitals Targets#

---

10. Build Execution Order#

Phase 1: Foundation (Day 1–2)#

1. Initialize Next.js project with Tailwind, shadcn/ui
2. Install dependencies: gsap, framer-motion, lottie-react, lucide-react
3. Configure design tokens in tailwind.config.ts (colors, fonts, spacing, easing)
4. Set up Google Fonts: Archivo (400, 600, 700, 900), Figtree (400, 500, 600)
5. Create global styles: globals.css with CSS variables, noise, base typography
6. Build reusable components: FloatingNav, GlassCard, SignalBorder, MetricCounter

Phase 2: Hero + Definition (Day 3–4)#

7. Build FloatingNav — centered sharp glass slab, mobile hamburger
8. Generate hero isometric cityscape illustration (PNG, 1200×900, no text)
9. Build HeroSection — asymmetric split, HTML overlay cards, exclusivity badge, trust bar
10. Build AnswerFirstSection — GEO-optimized text + RankFlow SVG diagram
11. Implement hero entrance animations (GSAP timeline, staggered reveals)
12. Test prefers-reduced-motion fallback

Phase 3: Core Loop (Day 5–7)#

13. Build RankFlowLoop section — GSAP ScrollTrigger pinned scroll, 5 phases
14. Create Lottie "RankFlow Loop" animation (6 scenes + idle)
15. Implement Lottie ↔ ScrollTrigger sync (goToAndStop per progress)
16. Build 5 phase cards with metric strips and dashboard mockups
17. Implement metric count-up animations
18. Test reduced-motion: vertical stack, no pin, no scrub

Phase 4: Deep Dives (Day 8–10)#

19. Build CitationSection — asymmetric split, 9-category grid, dashboard mockup
20. Build LandingPageSection — profile preview, parallax, screen sequence
21. Build GBPSocialSection — workflow diagram, pull quote card
22. Build AIEngineSection — mobile device mockup, capability blocks
23. Build ResultsSection — metrics row, exclusivity callout
24. Test all sections on mobile (stack, no pin, scaled visuals)

Phase 5: Supporting Sections (Day 11–12)#

25. Build IndustriesSection — 8 tabs, Framer Motion layoutId, panel cascade
26. Build IntegrationsSection — logo grid, staggered entrance, hover transforms
27. Build SecuritySection — compliance badges, feature bullets
28. Build SocialProofSection — testimonial carousel, logo wall
29. Build FinalCTASection — centered, radial background, pulsing CTA
30. Build Footer — 4-column nav, SEO block, backers, address, bottom bar

Phase 6: SEO & Polish (Day 13–14)#

31. Implement all JSON-LD schema (Organization, SoftwareApplication, WebSite, FAQPage, Review, BreadcrumbList, LocalBusiness)
32. Add all meta tags, Open Graph, Twitter Cards, canonical, viewport
33. Implement EEAT signals: reviewer names, source labels, last-updated, review cadence
34. Add source labels to ALL metrics (inline beneath each number)
35. Verify heading hierarchy (H1 → H2 → H3)
36. Add prefers-reduced-motion support across all sections
37. Run accessibility audit (keyboard nav, focus states, screen reader)
38. Performance audit: Core Web Vitals, image optimization, font loading
39. Add lang="en" with i18n infrastructure for ml, hi, ta

Phase 7: Launch (Day 15)#

40. Deploy to staging, verify all animations, test responsive breakpoints
41. Content review: verify all copy matches homepage-content.md
42. Local SEO SME review + technical review sign-off
43. Deploy to production
44. Submit sitemap to Google Search Console, request indexing
45. Set up Google Analytics 4 + GTM events for CTA clicks, trial starts

---

11. Risk & Quality Checklist#

Content Risks#

• NO "SEO tool" or "marketing agency" terminology anywhere — we are a "Local Rank Engine"
• NO unverified compliance claims — DPDPA 2023 uses "designed to support" until full certification
• NO guaranteed ranking promises — Use "expected trajectory" or "illustrative target" language
• ALL metrics have source labels — Remove any unsubstantiated claim before publish
• Customer quotes verified — Dr. Anjali Nair, Dr. Rajesh Kumar, Dr. Priya Menon are approved and accurate
• MCI ethics compliance — All content is "informational, not promotional" — no "best doctor" claims
• Exclusivity claim verified — "Only 3 clinics per city per specialty" must be enforceable and true
• NO mention of owned citation network — The 20–50 owned sites are a competitive moat and must never appear in public-facing content, marketing, or client communications. Use "trusted directories" or "30 citations" only.

Design Risks#

• NO dark surfaces without approval — Only 5 sections earn darkness (Hero, Loop, Directory Profile, AI Engine, Final CTA)
• NO rounded CTAs — Sharp rectangular only
• NO particles, glow, neon, 3D tilt — Restrained motion only (draw-in, signal-lock, pulse, glass sheen)
• NO card bobbing or racing dots — Cards stay fixed
• NO scroll hijack before hero approved — Pinned scroll only in Loop section
• NO baked text in images — All labels in HTML overlays

Technical Risks#

• NO h-screen — Use min-h-[100dvh] for all full-height sections
• NO useState for magnetic/continuous animations — Use Framer Motion useMotionValue outside render cycle
• NO GSAP + Framer Motion in same component — Isolate GSAP to scroll/pinned sections only
• NO heavy perpetual animations on scroll containers — Fixed pseudo-element for noise only
• Dependency check — Verify gsap, framer-motion, lottie-react in package.json before import
• i18n readiness — UI labels must support ml, hi, ta from Day 1

SEO Risks#

• Canonical tag — https://rankflow.ai (no trailing slash conflict)
• OG image — 1200×630, <1MB, absolute URL
• Schema validation — Test all JSON-LD in Google Rich Results Test
• Internal links — All footer links use descriptive anchor text (no "click here")
• Hreflang — Add when multi-language support goes live
• Robots meta — index, follow on homepage, noindex on /onboard form (post-submission)
• LocalBusiness schema — Must include address, geo, telephone, openingHours

---

12. Post-Launch Monitoring#

SEO Monitoring (Weekly)#

• Google Search Console: impressions, clicks, CTR, average position
• Index coverage: ensure all sections indexed, no "Crawled — currently not indexed"
• Core Web Vitals: LCP, INP, CLS reports
• Schema validation: rich results appearance in SERP
• AI search visibility: Perplexity, ChatGPT, Gemini citations for "best [specialty] in [city]"
• Local pack rankings: Track Google Maps 3-pack appearances for target keywords

Content Freshness (Quarterly)#

• Review date: 2026-09-13 (90 days from last update)
• Update metrics with new pilot data from Kerala beta clients
• Refresh customer testimonials if new quotes available
• Verify integration list accuracy (30+ directories, 4 social platforms)
• Check DPDPA 2023 compliance status (full compliance target: May 2027)
• Update "last updated" and "next review" dates in footer
• Verify exclusivity claim accuracy (spot count per city per specialty)

---

Summary#

This plan produces a hero-first, premium, anti-generic directory profile that:

1. Follows the SAFVR homepage-content.md template exactly — 14 sections, all copy, all metrics, all layouts, all interaction notes, all SEO schema, all EEAT signals
2. Is adapted for RankFlow AI — India's first AI-powered local rank engine for medical clinics, with city-category exclusivity, MCI compliance, and India-first identity
3. Applies the directory profile skill's hero-first workflow — 50% effort on hero, consistent design system, section expansion
4. Enforces the design-taste-frontend's premium standards — Anti-symmetric, anti-center, anti-Inter, anti-card-overuse, liquid glass, spring physics, hardware acceleration
5. Is fully SEO-optimized — 7 JSON-LD schemas, EEAT signals, GEO extractability, heading hierarchy, meta tags, Open Graph, source labels, LocalBusiness schema
6. Has a complete infographic plan — Every section has a visual asset: generated images, SVG diagrams, Lottie animations, CSS mockups, dashboard previews
7. Is production-ready — 15-day build timeline, component inventory, asset checklist, performance targets, accessibility compliance, risk mitigations, India-specific considerations (i18n, DPDPA, MCI, rupee pricing)

Next step: Proceed to asset generation (hero isometric illustration, Lottie animation, dashboard mockups) and component development (starting with FloatingNav, GlassCard, HeroSection).