Reusable PageHero Component

[kOaDT]

Objective

Extract the repeated hero banner (gradient, title, subtitle) into a shared PageHero component and use it on About, Contact, News, and Terms to remove duplication.

Current State

The same hero markup is duplicated on four pages:

• About (app/about/page.tsx): title "About This Project", subtitle "Understanding the purpose..."
• Contact (app/contact/page.tsx): title "Get in Touch", subtitle "Connect through GitHub repository"
• News (app/news/page.tsx): title "News", subtitle "Latest updates and announcements"
• Terms (app/terms/page.tsx): title "Terms of Service", subtitle "Important information about the use of this application"

Shared structure: a <section> with gradient (bg-gradient-to-br from-primary-500 via-primary-600 to-secondary-600), border, container, centered content, <h1> and <p> with fixed Tailwind classes. Only the title and subtitle text differ.

Target State

• New component: app/components/PageHero.tsx with props title: string and subtitle: string, rendering the same section layout and styles.
• Pages: About, Contact, News, and Terms each use <PageHero title="..." subtitle="..." /> instead of the inline hero block.
• No visual or responsive change; only structure and DRY improvement.

Scope

• Create: app/components/PageHero.tsx
• Update: app/about/page.tsx, app/contact/page.tsx, app/news/page.tsx, app/terms/page.tsx

Acceptance Criteria

1. PageHero accepts title and subtitle and renders the existing hero section (gradient, typography, spacing).
2. All four pages import and use PageHero with their current title and subtitle text.
3. No duplicate hero markup remains in those four page files.