Refactor homepage into feature modules

[luke0408]

Summary

• reorganized the homepage hero and feature presentation into a feature-based module structure
• extracted feature metadata, reusable cards, and scoped styling to follow the documented architecture guidelines
• fixed a missing JSX type import so the shared color mode toggle passes strict TypeScript checks

Testing

• npm run typecheck

---

https://chatgpt.com/codex/tasks/task_e_68d93f7c5f248330a5b4c1b0fa5ac3e0

Summary by CodeRabbit

• New Features

  • Introduced a new homepage hero with title, subtitle, and a prominent call-to-action.
  • Added a redesigned feature section displaying highlights as cards with icons and descriptions.

• Refactor

  • Rebuilt the homepage using modular components for a cleaner structure and easier updates.
  • Centralized feature content to ensure consistency across the homepage.

[coderabbitai]

Walkthrough

Removed the legacy HomepageFeatures component. Introduced a typed homepage feature system with dedicated components (hero, feature section, feature card), centralized constants, and re-exports. Updated the homepage page to use the new components and constants. Added a type-only JSX import in ColorModeToggle.

Changes

Cohort / File(s)	Summary of edits
Legacy component removal src/components/HomepageFeatures/index.tsx	Deleted the old HomepageFeatures implementation, including FeatureItem, Feature subcomponent, and default export.
Homepage feature domain: types & constants src/features/homepage/types/homepage-feature.ts, src/features/homepage/constants/homepage-features.tsx	Added HomepageFeature interface and HOMEPAGE_FEATURES constant array with SVG Icons and JSX descriptions.
Homepage UI components src/features/homepage/components/homepage-hero/homepage-hero.tsx, src/features/homepage/components/homepage-feature-section/homepage-feature-section.tsx, src/features/homepage/components/homepage-feature-card/homepage-feature-card.tsx	Added new components: hero header, feature section mapping HOMEPAGE_FEATURES, and individual feature card rendering with Heading, Icon, and description.
Homepage module exports src/features/homepage/index.ts	Re-exported HomepageHero and HomepageFeatureSection.
Page integration src/pages/index.tsx	Replaced legacy markup with HomepageHero and HomepageFeatureSection; centralized constants; adjusted Layout props and imports.
Type-only augmentation src/theme/ColorModeToggle/index.tsx	Added type-only JSX import; no runtime changes.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User
  participant P as Home Page (/)
  participant Hero as HomepageHero
  participant Section as HomepageFeatureSection
  participant Cards as HomepageFeatureCard*
  participant Router as Router

  U->>P: Navigate to /
  P->>Hero: Render with { title, subtitle, callToAction }
  P->>Section: Render feature section
  Section->>Cards: Map HOMEPAGE_FEATURES to cards
  Note over Cards: Each card shows Icon, title, description

  U->>Hero: Click CTA button
  Hero->>Router: navigate(callToAction.href)
  Router-->>U: Show target docs page

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

I hopped through code where features grew,
Old grids gone, and shiny cards anew.
A hero banner waves “this way!”
CTA paths for docs’ buffet.
With types and constants neatly spun—
The homepage hums; my sprint is done. 🐇✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title “Refactor homepage into feature modules” clearly summarizes the primary objective of this pull request, which reorganizes the homepage code into modular feature components. It is concise, specific, and directly related to the main architectural change without including extraneous details. The phrasing makes it immediately apparent to reviewers what the key update entails.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch codex/refactor-src-code-based-on-rules

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d1f04ea and 28e5e78.

📒 Files selected for processing (9)

• src/components/HomepageFeatures/index.tsx (0 hunks)
• src/features/homepage/components/homepage-feature-card/homepage-feature-card.tsx (1 hunks)
• src/features/homepage/components/homepage-feature-section/homepage-feature-section.tsx (1 hunks)
• src/features/homepage/components/homepage-hero/homepage-hero.tsx (1 hunks)
• src/features/homepage/constants/homepage-features.tsx (1 hunks)
• src/features/homepage/index.ts (1 hunks)
• src/features/homepage/types/homepage-feature.ts (1 hunks)
• src/pages/index.tsx (1 hunks)
• src/theme/ColorModeToggle/index.tsx (1 hunks)

💤 Files with no reviewable changes (1)

• src/components/HomepageFeatures/index.tsx

🧰 Additional context used

🧬 Code graph analysis (5)

src/features/homepage/constants/homepage-features.tsx (1)

src/features/homepage/types/homepage-feature.ts (1)

• HomepageFeature (3-7)

src/features/homepage/components/homepage-hero/homepage-hero.tsx (1)

src/features/homepage/index.ts (1)

• HomepageHero (1-1)

src/features/homepage/components/homepage-feature-section/homepage-feature-section.tsx (2)

src/features/homepage/constants/homepage-features.tsx (1)

• HOMEPAGE_FEATURES (7-38)

src/features/homepage/components/homepage-feature-card/homepage-feature-card.tsx (1)

• HomepageFeatureCard (12-26)

src/pages/index.tsx (2)

src/features/homepage/components/homepage-hero/homepage-hero.tsx (1)

• HomepageHero (17-33)

src/features/homepage/components/homepage-feature-section/homepage-feature-section.tsx (1)

• HomepageFeatureSection (7-19)

src/features/homepage/components/homepage-feature-card/homepage-feature-card.tsx (1)

src/features/homepage/types/homepage-feature.ts (1)

• HomepageFeature (3-7)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Test deployment

🔇 Additional comments (8)

src/theme/ColorModeToggle/index.tsx (1)

2-2: Type-only JSX import keeps runtime clean

Thanks for pulling JSX in as a type-only import—solves the strict TS check without bundling React twice.

src/features/homepage/components/homepage-hero/homepage-hero.tsx (1)

17-33: Hero extraction matches the feature-module goal

The dedicated HomepageHero with typed props and scoped styles reads clean and slots neatly into the new module layout.

src/features/homepage/components/homepage-feature-section/homepage-feature-section.tsx (1)

7-18: Feature section composition looks solid

Mapping the readonly feature metadata through the card component keeps the section declarative and easy to extend.

src/features/homepage/constants/homepage-features.tsx (1)

7-38: Typed feature config looks solid

The const-asserted metadata array matches the new HomepageFeature contract cleanly and keeps the feature content co-located with the asset imports. Nicely done.

src/features/homepage/index.ts (1)

1-2: Barrel export keeps consumers tidy

These re-exports give the homepage consumers a single import surface and line up with the new feature-module layout. Looks good.

src/features/homepage/types/homepage-feature.ts (1)

3-7: Interface captures the component contract well

The readonly props and SVG component typing fit the card/section usage perfectly—no issues here.

src/pages/index.tsx (1)

5-24: Homepage composition refactor reads cleaner

Pulling the CTA strings into module-level constants and delegating to HomepageHero/HomepageFeatureSection keeps the page component focused on wire-up. Looks great.

src/features/homepage/components/homepage-feature-card/homepage-feature-card.tsx (1)

12-25: Card component aligns with the feature type

The destructure, column layout, and SVG styling reuse make this a straightforward, reusable card—no concerns from my side.

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

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 and usage tips.}