Redesign homepage and improve code display components

[LGLabGreg]

Summary

This PR significantly redesigns the documentation homepage and refactors code display components for improved visual consistency and user experience. The changes include a modernized hero section with QR code showcase, restructured feature cards, and unified code block styling across the application.

Key Changes

Homepage Redesign (page.tsx)

• Moved features array outside component to module level
• Replaced Card-based layout with custom grid design featuring bordered sections
• Added new "Optimized for AI" section with interactive link to llms.txt documentation
• Introduced FeatureIcon component for consistent icon rendering with styled containers
• Updated feature icons to use component references instead of JSX elements
• Enhanced visual hierarchy with improved spacing and typography

New Components

• HeroShowcase (hero-showcase.tsx): New component displaying four customizable QR code examples with different styling options
• CopyButton (copy-button.tsx): Extracted copy-to-clipboard functionality into reusable component used across code blocks and hero section

Hero Section Enhancement (hero.tsx)

• Added decorative grid background pattern
• Included GitHub badge with open source/MIT license information
• Integrated install command display with copy button
• Added HeroShowcase component to display QR code examples
• Improved typography and spacing with better visual balance

Code Display Refactoring

• CodeBlock: Refactored to support multiple command tabs with active state management, improved styling with dark theme
• CodeEditor: Updated to use Prism's oneDark theme, improved line number styling, better syntax highlighting
• Both components now use the new CopyButton component

Sidebar Navigation (page-sidebar.tsx)

• Simplified structure using SidebarGroupLabel and SidebarGroupContent
• Removed nested menu structure for cleaner organization
• Updated button styling and interaction patterns

Design System Updates (globals.css)

• Added --brand color variable (cyan/teal accent color)
• Updated color palette with improved contrast and consistency
• Added font feature settings for better typography rendering
• Updated selection color to use brand color with transparency
• Refined sidebar and component color values

Typography Updates (typography.tsx)

• Adjusted heading sizes and weights for better hierarchy
• Updated paragraph color to use text-foreground/85 for improved readability
• Refined inline code styling with better borders and padding

Header & Navigation

• Added backdrop blur effect to header for modern appearance
• Updated GitHub button styling with improved accessibility
• Refined sidebar trigger styling

Table Styling (table.tsx)

• Added rounded borders and improved spacing
• Enhanced header styling with muted background

Installation Page

• Updated CodeBlock usage to support new multi-command tab interface

Implementation Details

• Feature icons now use component references for better tree-shaking and flexibility
• Copy button functionality centralized in reusable component
• Code blocks support tabbed interface for multiple package managers
• Hero section includes interactive QR code showcase with multiple styling examples
• Improved color consistency across the application with new brand color variable
• Enhanced visual feedback with hover states and transitions

https://claude.ai/code/session_012nGqg4nTWCSMMVT3cJ9HXo

[vercel]

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

Project	Deployment	Actions	Updated
reactqrcode-com	Ready	Preview	Oct 1, 2026 7:29pm UTC

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 1 minute.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Advanced

Run ID: 69da3af3-7765-4208-b4be-0086266084d2

📥 Commits

Reviewing files that changed from the base of the PR and between c653ef9 and b6315d9.

📒 Files selected for processing (21)

• apps/docs/next-env.d.ts
• apps/docs/src/app/globals.css
• apps/docs/src/app/installation/page.tsx
• apps/docs/src/app/layout.tsx
• apps/docs/src/app/page.tsx
• apps/docs/src/components/api-table.tsx
• apps/docs/src/components/code-block.tsx
• apps/docs/src/components/code-editor.tsx
• apps/docs/src/components/copy-button.tsx
• apps/docs/src/components/hero-showcase.tsx
• apps/docs/src/components/hero.tsx
• apps/docs/src/components/logo.tsx
• apps/docs/src/components/page-header.tsx
• apps/docs/src/components/page-heading.tsx
• apps/docs/src/components/page-sidebar-button.tsx
• apps/docs/src/components/page-sidebar.tsx
• apps/docs/src/components/page-skeleton.tsx
• apps/docs/src/components/props-table.tsx
• apps/docs/src/components/ui/example-tabs.tsx
• apps/docs/src/components/ui/table.tsx
• apps/docs/src/components/ui/typography.tsx

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}