Hero Section UI

A responsive hero section built with React, TypeScript, semantic HTML and CSS.

Preview

Desktop Preview

Tablet Preview

Mobile Preview

Features

• Responsive hero section with side image on wider screens
• Stacked mobile and tablet layout with desktop 5/7 grid columns
• Component-based structure with colocated styles
• Data-driven rendering through typed props
• Optimized WebP hero image asset
• Lazy-loaded hero image with asynchronous decoding
• Primary and secondary buttons with hover, active, focus and disabled states
• Credits attribution extracted into a dedicated component
• Unit and integration tests with React Testing Library and Vitest
• GitHub Pages deployment workflow with lint, test and build gates
• ESLint rule requiring explicit file extensions in relative imports

Implementation Details

• Hero content data is stored in heroContent.ts and passed into components through props
• Shared hero data types live alongside the hero content data
• The hero image uses width: 100% and height: auto to preserve its original aspect ratio
• The hero image is decorative and uses an empty alt value
• Desktop layout uses a 12-column CSS grid with 5 columns for content and 7 columns for the image
• The hero content has a 96px desktop offset from the left edge of the hero card
• Mobile and tablet layouts stack content and image vertically
• Buttons remain in one row across supported viewport widths
• Buttons include :hover, :active, :focus-visible and :disabled styles
• Component styles are colocated with their components
• GitHub Actions runs linting and tests before building and deploying the app

Edge Cases

• Long hero headings should wrap instead of overflowing the layout
• Button labels should remain readable without forcing the button row to wrap
• The hero image should resize without distortion on mobile and tablet viewports
• Decorative hero images should not be announced as meaningful content by screen readers
• Tests should fail when required component props are missing or renamed
• Relative imports without explicit file extensions should fail linting

Tech Stack

• React
• TypeScript
• Vite
• CSS3
• Vitest
• React Testing Library
• ESLint
• GitHub Actions

Getting Started

Clone and run the project:

git clone https://github.com/wildchopper/hero-section-simple.git
cd hero-section-simple
npm install
npm run dev

Run tests:

npm run test:run

Run lint:

npm run lint

Build for production:

npm run build