Service 2 - Service detail page with photo hero

Basic

A single-column service page with a full-width background photo hero and dark overlay, followed by introduction and prose content sections with headings and a service list.

Shadcn Service 2 block

Component data

ID
service2
Access
basic
Created
Sep 26, 2025
Type
block
Libraries
Radix UI, Base UI, React Aria
Figma

Service 2 block design & features

Service2 is a single-column service detail block. It starts with a full-width hero section that uses a background photo with a semi-transparent black overlay for text readability, displaying a centered white heading. Below the hero is an introduction with a left-aligned subheading and paragraph, followed by a prose content section containing multiple headings, paragraphs, and a bulleted service list.

The hero has a minimum height of 500px with the photo set as a cover background. The overlay is 50% black opacity. The prose sections use a constrained max-width for comfortable reading and support dark mode via prose-invert. Spacing between sections is handled with vertical padding. No additional UI components beyond basic HTML elements.

This follows the same structure as a basic service detail page but differentiates itself with the photographic hero. The dark overlay technique gives it a slightly more polished look compared to a plain muted background. Low complexity with no interactive elements.