← All blocks

Centered hero with a bleeding product screen

hero · centered-screen-bleed · hero-centered-screen

npx shadcn@latest add @plus-ui/hero-centered-screen

Default content

{
  "eyebrow": {
    "label": "New: retention cohorts in real time",
    "href": "#"
  },
  "title": "See which features keep customers coming back",
  "description": "Tessaly turns raw product events into retention, activation and revenue views your whole team can read — no SQL, no spreadsheets, no waiting on the data team.",
  "actions": [
    {
      "label": "Start a 14-day trial",
      "href": "#",
      "variant": "primary"
    },
    {
      "label": "Book a walkthrough",
      "href": "#",
      "variant": "secondary"
    }
  ],
  "proof": {
    "label": "Trusted by product teams at",
    "brands": [
      "ostrelo",
      "pellora",
      "brindlebay",
      "mosswell"
    ]
  },
  "media": {
    "kind": "screen",
    "screen": {
      "product": "Tessaly",
      "nav": [
        "Overview",
        "Retention",
        "Funnels",
        "Revenue",
        "Segments"
      ],
      "activeNav": 1,
      "title": "Retention · last 12 weeks",
      "kpis": [
        {
          "label": "Week-4 retention",
          "value": "46.2%",
          "delta": "+3.8 pts"
        },
        {
          "label": "Active accounts",
          "value": "12,480",
          "delta": "+9.1%"
        },
        {
          "label": "Expansion MRR",
          "value": "$48.2k",
          "delta": "+12.4%"
        }
      ],
      "chart": {
        "title": "Weekly active accounts",
        "points": [
          38,
          42,
          40,
          47,
          51,
          49,
          56,
          60,
          58,
          66,
          71,
          78
        ],
        "labels": [
          "Jul",
          "Aug",
          "Sep",
          "Oct"
        ]
      },
      "rows": [
        {
          "name": "Shared dashboards",
          "detail": "Used by 68% of retained accounts",
          "value": "+18%",
          "status": "positive"
        },
        {
          "name": "Slack digests",
          "detail": "Opened weekly by 4,210 users",
          "value": "+11%",
          "status": "positive"
        },
        {
          "name": "CSV exports",
          "detail": "Flat since the API launch",
          "value": "0%",
          "status": "neutral"
        }
      ]
    }
  }
}