Common Components

Page Hero

Hero section for page headers with optional label and accent text

Quick Preview

About Us

Building the future together.

Installation

// Copy the PageHero component from
src/components/common/PageHero.tsx

Usage

import { PageHero } from '@/components/common/PageHero'

export default function AboutPage() {
  return (
    <PageHero
      label="About Us"
      title="Building the future of"
      titleAccent="web development."
      description="We create amazing digital experiences"
    />
  )
}

Examples

Light Theme (Default)

Teal background with centered content

About Us

Building the future of web development.

We create amazing digital experiences

Dark Theme

Black background with white text

Get in touch today.

Without Label

Hero without the small label

Welcome to our platform.

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a common component named Page Hero in React/Next.js.
Goal: recreate the same overall UI and behavior as the Page Hero reference from a component gallery.
What it needs to communicate: Hero section for page headers with optional label and accent text.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Design the component so it can be dropped into landing and application pages without refactoring.
- Preserve clear content hierarchy and comfortable spacing.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- label: string — Small label text above title
- title: string — required — Main heading text
- titleAccent: string — Accented part of the title (teal color)
- description: string — Subheading text
- dark: boolean — Use dark theme (black background)

Reference usage patterns:
- Light Theme

```tsx
<PageHero
  label="About Us"
  title="Building the future of"
  titleAccent="web development."
  description="We create amazing digital experiences"
/>
```

- Dark Theme

```tsx
<PageHero
  title="Get in touch"
  titleAccent="today."
  dark
/>
```

Feature expectations:
- Two color schemes (light teal / dark black)
- Optional label with uppercase styling
- Title with optional accent color
- Centered layout
- Responsive padding

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`label`	`string`	-	Small label text above title
`title`*	`string`	-	Main heading text
`titleAccent`	`string`	-	Accented part of the title (teal color)
`description`	`string`	-	Subheading text
`dark`	`boolean`	-	Use dark theme (black background)

Features

✓Two color schemes (light teal / dark black)
✓Optional label with uppercase styling
✓Title with optional accent color
✓Centered layout
✓Responsive padding

← Back to Common Components