Service 4 block design & features
Service4 is a service detail block with a two-thirds/one-third column layout built with shadcn/ui. The hero section uses a muted background and displays a service icon alongside a large heading. The main content column contains prose sections with headings, paragraphs, and a list of six services each paired with a Lucide icon rendered in primary color. The sidebar column holds a sticky card listing tool expertise with small logos for Adobe, Figma, and Sketch.
The sidebar uses a muted semi-transparent background and becomes sticky at a top offset of 8 units on larger screens. Services in the content area are displayed as icon-text pairs using flex layout rather than a traditional bulleted list. The hero centers its icon and heading horizontally with a flex container. Dark mode is supported through prose-invert.
The layout provides a more structured presentation than a plain single-column service page by keeping supplementary information always visible in the sidebar. The icon-annotated service list adds visual interest. Moderate complexity from the multi-column layout and sticky positioning.
On mobile the sidebar appears below the content area and the grid collapses to a single column.