Funnel Chart

"use client"
import FunnelChart from "@/components/vritti/funnel-chart"

const data = [
  { label: "Visitors", value: 10000, color: "hsl(217, 91%, 60%)" },
  { label: "Sign-ups", value: 4200, color: "hsl(217, 91%, 65%)" },
  { label: "Active", value: 2100, color: "hsl(217, 91%, 70%)" },
  { label: "Paid", value: 850, color: "hsl(217, 91%, 75%)" },
  { label: "Retained", value: 380, color: "hsl(217, 91%, 80%)" },
]

export function FunnelChartDemo() {
  return (
    <div className="flex h-full w-full max-w-sm mx-auto items-center justify-center p-4">
      <FunnelChart data={data} showValues showLabels showPercentage />
    </div>
  )
}

"use client"
import FunnelChart from "@/components/vritti/funnel-chart"

// Real 2024 e-commerce conversion benchmarks (source: smartinsights / invespcro)
// Overall CVR ~1.89%; add-to-cart rate ~7.5%; cart abandonment ~70%
const data = [
  { label: "Visitors",      value: 10000, color: "var(--chart-1)" },
  { label: "Product Views", value:  4200, color: "var(--chart-2)" },
  { label: "Add to Cart",   value:   750, color: "var(--chart-3)" },
  { label: "Checkout",      value:   215, color: "var(--chart-4)" },
  { label: "Purchase",      value:   189, color: "hsl(217 91% 75%)" },
]

export function FunnelChartEcommerceDemo() {
  return (
    <div className="flex h-full w-full max-w-lg mx-auto items-center justify-center p-4">
      <FunnelChart
        data={data}
        orientation="vertical"
        showValues
        showLabels
        showPercentage
        layers={4}
        formatValue={(v) =>
          v >= 1000 ? `${(v / 1000).toFixed(1)}k` : String(v)
        }
      />
    </div>
  )
}

"use client"
import FunnelChart from "@/components/vritti/funnel-chart"

const data = [
  {
    label: "Awareness",
    value: 8000,
    gradient: [
      { offset: "0%", color: "hsl(280, 87%, 65%)" },
      { offset: "100%", color: "hsl(217, 91%, 60%)" },
    ],
  },
  {
    label: "Interest",
    value: 3500,
    gradient: [
      { offset: "0%", color: "hsl(280, 87%, 65%)" },
      { offset: "100%", color: "hsl(217, 91%, 60%)" },
    ],
  },
  {
    label: "Decision",
    value: 1200,
    gradient: [
      { offset: "0%", color: "hsl(280, 87%, 65%)" },
      { offset: "100%", color: "hsl(217, 91%, 60%)" },
    ],
  },
  {
    label: "Action",
    value: 400,
    gradient: [
      { offset: "0%", color: "hsl(280, 87%, 65%)" },
      { offset: "100%", color: "hsl(217, 91%, 60%)" },
    ],
  },
]

export function FunnelChartGradientDemo() {
  return (
    <div className="flex h-full w-full max-w-sm mx-auto items-center justify-center p-4">
      <FunnelChart data={data} showValues showLabels layers={3} />
    </div>
  )
}

"use client"
import FunnelChart from "@/components/vritti/funnel-chart"

// Real B2B SaaS marketing funnel benchmarks (source: firstpagesage / userpilot)
// 2% visitor-to-signup CVR; 30% signup-to-activation; 21% trial-to-paid
const data = [
  { label: "Impressions", value: 50000, color: "var(--chart-1)" },
  { label: "Clicks",      value:  1000, color: "var(--chart-2)" },
  { label: "Sign-ups",    value:   500, color: "var(--chart-3)" },
  { label: "Activated",   value:   150, color: "var(--chart-4)" },
  { label: "Paid",        value:    32, color: "hsl(280 87% 65%)" },
]

export function FunnelChartSaaSDemo() {
  return (
    <div className="flex h-full w-full max-w-sm mx-auto items-center justify-center p-4">
      <FunnelChart
        data={data}
        orientation="horizontal"
        showValues
        showLabels
        showPercentage
        layers={3}
        formatValue={(v) =>
          v >= 1000 ? `${(v / 1000).toFixed(0)}k` : String(v)
        }
      />
    </div>
  )
}