Bento onboarding splash screen

[Twixes]

Problem

I've watched 3 people onboard to PH Code in person with the current splash screen below – which is already better than before, but still each person broadly went past this without much understanding. Just results in our points - including the self-driving angle - landing weakly in the product itself (whereas posthog.com/code actually seems quite clear).

I feel very much this comes down to the intro being this raw list - it doesn't have anchor points for scanning.

Changes

Screenshots tell a thousand words, so proposing we turn this into a bento-like splash screen. Crucially, screenshots coming in a follow-up (I'll need you guys to add some in @PostHog/team-code). Here, setting the stage with the sleek layout.

(also, tweaked the headline at the top so the font is exactly aligned with the logo)

[greptile-apps]

Prompt To Fix All With AI

Fix the following 2 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 2
apps/code/src/renderer/features/onboarding/components/FeatureBentoCard.tsx:35
Double space in class string when `active` is false. The template literal concatenates an empty string for the inactive case and then the `className` prop, producing `"feature-bento-card  col-span-4"` (two spaces). While browsers normalise this, the project rule asks us to avoid double spaces from conditional string concatenation.

```suggestion
      className={`feature-bento-card${active ? " feature-bento-card--active" : ""} ${className}`}
```

### Issue 2 of 2
apps/code/src/renderer/features/onboarding/components/FeatureBentoCard.tsx:46-54
The `Flex` wrapper around the icon only ever contains a single child (`div.feature-bento-card__icon`), so `gap="2"` and `direction="column"` are superfluous — they have no visible effect. Following the simplicity rule of "no superfluous parts", these props can be dropped.

```suggestion
        <Flex
          align="center"
          justify="center"
          className="relative z-10 text-(--gray-9)"
        >
          <div className="feature-bento-card__icon">{icon}</div>
        </Flex>
```

_{Reviews (1): Last reviewed commit: "Hide placeholder label" | Re-trigger Greptile}

[adboio]

SEXYYYYYY

[greptile-apps]

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
apps/code/src/renderer/features/onboarding/components/FeatureBentoCard.tsx:46-50
The `text-(--gray-9)` class on the `Flex` wrapper is dead code — it sets `color: var(--gray-9)` on the container, but the child `div.feature-bento-card__icon` immediately overrides it with `color: var(--gray-12)` (and on hover/active, `color: var(--accent-11)`). The icon SVG inherits from the `div`, so `--gray-9` is never actually applied. Removing it satisfies the "no superfluous parts" simplicity rule.

```suggestion
        <Flex
          align="center"
          justify="center"
          className="relative z-10"
        >
```

_{Reviews (2): Last reviewed commit: "Update apps/code/src/renderer/features/o..." | Re-trigger Greptile}

[greptile-apps]

Want your agent to iterate on Greptile's feedback? Try greploops.