Section Components

All section components live in src/components/sections/. Each renders a full-page section and accepts typed props — no hardcoded strings inside.

Import and use in any .astro page:

---
import Hero from "../components/sections/Hero.astro";
import PricingCards from "../components/sections/PricingCards.astro";
---

<Hero
  headline="Build your business online"
  sub="Fast websites that rank on Google."
  ctas={[{ label: "Get started", href: "/contact/", primary: true }]}
/>

---

Hero

{
  headline: string;
  sub: string;
  ctas: { label: string; href: string; primary?: boolean }[];
  badge?: string;       // optional eyebrow badge text above headline
  variant?: "centered" | "split" | "fullscreen";  // defaults to theme.layout.hero
}

variant defaults to whatever is set in theme.layout.hero. Override per-page by passing it explicitly.

---

ServicesGrid

{
  headline: string;
  sub: string;
  services: {
    icon: string;       // inline SVG string
    title: string;
    desc: string;
    bullets?: string[];
    href?: string;
  }[];
}

---

PricingCards

{
  headline: string;
  sub: string;
  plans: {
    name: string;
    price: string;        // e.g. "₹24,999"
    usdPrice?: string;    // e.g. "$299" — shown if showUsd=true
    period: string;       // e.g. "one-time" or "/month"
    features: string[];
    cta: string;          // button label
    href?: string;        // if set, renders a link instead of checkout button
    highlight?: boolean;  // adds "Most popular" badge
    tagline?: string;     // small text under price
  }[];
  showUsd?: boolean;    // toggle USD pricing column
  oneTime?: boolean;    // changes CTA behaviour
  ctaBase?: string;     // base path for checkout, e.g. "/checkout"
}

When site.cashfree is false, CTA buttons link to /contact/ instead of checkout.

---

FAQ

{
  headline?: string;
  questions: { q: string; a: string }[];
  injectSchema?: boolean;  // set true to add a FAQPage JSON-LD <script> tag
}

Set injectSchema={true} on service pages. Only one FAQPage schema per page — don’t set it on pages that already have FAQPage schema from elsewhere.

---

ProcessSteps

{
  headline: string;
  sub?: string;
  steps: {
    n: string;    // step number, e.g. "01"
    title: string;
    desc: string;
  }[];
  variant?: "grid" | "list";
}

---

ComparisonTable

{
  headline: string;
  sub?: string;
  columns: {
    key: string;
    label: string;
    highlight?: boolean;  // adds green accent styling to this column
  }[];
  rows: {
    feature: string;
    [key: string]: string;  // one key per column, matching column.key
  }[];
}

Renders a full-width table on desktop, stacked cards on mobile.

---

CtaBanner

{
  headline: string;
  sub: string;
  cta: { label: string; href: string };
}

Used at the bottom of most pages as a section-ending call to action.

---

StatsBar

{
  stats: { value: string; label: string }[];
}

Renders a horizontal row of stats. Typically 4 stats in a 2×2 or 4-column grid.

---

ClientsBar

{
  headline?: string;
  clients: { name: string; url?: string }[];
}

Social proof bar of client names/logos. If url is provided the name becomes a link.

---

TeamGrid

{
  headline?: string;
  sub?: string;
  members: {
    initials: string;   // shown as avatar if no photo
    name: string;
    role: string;
    bio: string;
    links?: {
      linkedin?: string;
      instagram?: string;
      email?: string;
      cal?: string;     // cal.com booking URL
    };
  }[];
}

---

WhoWeHelp

{
  headline: string;
  sub?: string;
  segments: {
    icon: string;   // inline SVG string
    label: string;
    desc: string;
  }[];
}

---

Nav & Footer

Nav.astro and Footer.astro read directly from src/config/site.ts — no props needed. Pass active to highlight the current nav item:

<Nav active="blog" />

Valid active values: "home", "services", "blog", "about", "contact".