Refactor: Introduce SectionHeader and update UI styles

[Nebulazer123]

This pull request introduces a new SectionHeader component to standardize page and section headings. It also includes various UI styling and copy updates across the application.

New SectionHeader Component

• A new reusable component has been created at src/app/dashboard/components/SectionHeader.tsx.
• This component accepts label, title, and description props to render a consistent header format.

Component Refactoring

• The CashflowTab, OverviewTab, and RecurringTab components have been updated to use the new SectionHeader component, removing the previous inline header elements.
• The layout of these tabs is now wrapped in a div with space-y-6 for better spacing.

UI and Styling Updates

• Dashboard Page (/dashboard):

  • The main content area containing the tabs is now wrapped in a styled container with a border and shadow.
  • The page header now includes a "Demo view only" badge and updated descriptive text.

• Home Page (/):

  • The "How this demo works" section now uses a styled label and has an updated title and description.
  • The container for this section now has a shadow-md.
  • The step cards have new hover and focus styles, featuring an emerald color highlight.

Content Changes

• The titles and descriptions for the "step cards" on the home page have been updated to be more concise and impactful.

🔗 Edit in Builder.io

👀 Preview LinkTo clone this PR locally use the Github CLI with command gh pr checkout 2

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
money-map	Error			Nov 30, 2025 0:05am

[builder-io-integration]

You can tag me at @builderio-bot for anything you want me to fix or change