Davidasix/better home page#11
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR overhauls the home page layout and design, introduces a reusable Badge component, and tweaks global styles and configurations.
- Adds a new
BadgeUI component and updates CSS variables for the primary color. - Refactors the homepage into distinct sections (Hero, Social Proof, Features, How It Works, CTA, About).
- Updates pricing card styling/link, bumps a package version, switches to a named Docker volume, and tightens styling guidelines in documentation.
Reviewed Changes
Copilot reviewed 7 out of 9 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/ui/badge.tsx | Adds a new Badge component powered by class-variance-authority |
| src/components/common/pricing-options.tsx | Removes outer wrapper, updates “Most Popular” badge styling and link |
| src/app/globals.css | Changes primary color values for light/dark modes, increases section padding |
| src/app/(site)/page.tsx | Rewrites home page with multiple new sections and content blocks |
| package.json | Bumps @radix-ui/react-slot from ^1.1.1 to ^1.2.3 |
| docker-compose.yml | Switches PostgreSQL data mount from host directory to named volume |
| CLAUDE.md | Updates styling convention language to RFC2119 MUST-usage and formatting |
Comments suppressed due to low confidence (1)
CLAUDE.md:79
- [nitpick] The list under Styling Conventions mixes top-level and sub-items without consistent indentation or bullets. Please align all items uniformly (e.g., prefix each with
-at the same indent level) for clarity.
- When using a section tag you MUST apply section and section-padding first before other styles. These take care of the padding and spacing.
| --popover-foreground: 0 0% 98%; | ||
| --primary: 0 0% 98%; | ||
| --primary-foreground: 240 5.9% 10%; | ||
| --primary: 213 94% 68%; |
There was a problem hiding this comment.
The dark-mode --primary value is now identical to the light-mode color, which may break contrast and theming. Please verify and restore or adjust the intended dark-mode primary color.
| --primary: 213 94% 68%; | |
| --primary: 213 80% 50%; |
| {reviews.avatars.map((avatar, index) => ( | ||
| <Avatar key={index} className="size-14 border"> |
There was a problem hiding this comment.
Using index as a React key can lead to rendering issues if the array changes; consider using a unique identifier (e.g., an id or the src string) for stable keys.
| {reviews.avatars.map((avatar, index) => ( | |
| <Avatar key={index} className="size-14 border"> | |
| {reviews.avatars.map((avatar) => ( | |
| <Avatar key={avatar.src} className="size-14 border"> |
| </div> | ||
|
|
||
| <div className="grid md:grid-cols-3 gap-12"> | ||
| {steps.map((step, index) => ( |
There was a problem hiding this comment.
The steps map also uses index as a key—consider adding an explicit id to each step to ensure list stability.
| <div className="grid md:grid-cols-3 gap-8"> | ||
| <Card className="p-8 text-center bg-white"> | ||
| <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-6"> | ||
| <Code className="w-8 h-8 text-primary" /> |
There was a problem hiding this comment.
This decorative icon should include aria-hidden="true" (or a suitable role/title) to prevent redundant information for assistive technologies.
| <Code className="w-8 h-8 text-primary" /> | |
| <Code className="w-8 h-8 text-primary" aria-hidden="true" /> |
This PR makes the home page suck marginally less