unify card styles

[felixkrrr]

Disclaimer: Experimental PR review

Greptile Summary

This PR unifies hover card styles across the home page by replacing the older box-custom-hover pseudo-element pattern with corner-box-hover-stripes (diagonal stripe background on hover) and propagating the new hoverStripes prop through CornerBox usages in DeveloperTools, FeaturedCustomers, and Integrations. A z-index: 20 fix in style.css ensures corner brackets remain visible above the stripe overlay on hover.

Confidence Score: 4/5

Safe to merge; all changes are purely presentational with one minor transition-class conflict in chip-card.tsx.

No logic or data changes. One P2 finding in chip-card.tsx where conflicting Tailwind transition utilities could cause one animation to silently override the other, but it won't break any functionality.

components/ui/chip-card.tsx — conflicting transition utility classes

Important Files Changed

Filename	Overview
components/home/DeveloperTools.tsx	Adds hoverStripes prop to three CornerBox cards — straightforward adoption of the unified hover style.
components/home/FeaturedCustomers.tsx	Adds hoverStripes prop to the outer CornerBox — no logic changes, clean update.
components/home/Integrations.tsx	Applies corner-box-hover-stripes classes directly to integration group divs that don't use CornerBox, consistent with the existing raw-div pattern in this file.
components/ui/chip-card.tsx	Replaces box-custom-hover with corner-box-hover-stripes transition-[background] duration-180 ease-out, but the resulting baseClassName now contains two conflicting Tailwind transition-* declarations.
style.css	Adds z-index: 20 to .corner-box-corners--hover::before so corner brackets render above the stripe background on hover — intentional and correct.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User hovers card] --> B{Component type}
    B -->|CornerBox with hoverStripes| C[corner-box-hover-stripes:hover\nstripe background applied]
    B -->|Raw div with class| D[corner-box-hover-stripes:hover\nstripe background applied]
    B -->|ChipCard| E[corner-box-hover-stripes:hover\nstripe background applied]
    C --> F[corner-box-corners--hover::before\nopacity 0→1, z-index 20\nCorner brackets appear]
    D --> G[No corner brackets\nStripe only]
    E --> H[corner-box-corners--hover\nCorner brackets + stripe]

Loading

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
components/ui/chip-card.tsx:66-73
**Conflicting `transition-*` utilities**

`transition-[background] duration-180 ease-out` and `transition-colors duration-120 cursor-pointer` both set `transition-property` on the same element. In Tailwind, only one wins in the generated stylesheet, so either the background-stripe animation (180ms) or the border/color transitions (120ms) will silently be dropped. Consider merging them into a single transition declaration or using a combined arbitrary value like `transition-[color,background-color,border-color,background] duration-150 ease-out` to cover all animated properties.

```suggestion
      "corner-box-hover-stripes transition-[color,background-color,border-color,background] duration-150 ease-out cursor-pointer",
      "relative group inline-flex items-center",
      "border border-line-structure bg-surface-bg rounded-[2px]",
```

_{Reviews (1): Last reviewed commit: "unify card styles" | Re-trigger Greptile}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
langfuse-docs	Ready	Preview, Comment	Apr 30, 2026 7:56pm

[github-actions]

@claude review