Service 5 block design & features
Service5 is a service detail block with a two-thirds/one-third grid layout. The content column opens with a service icon inside a muted rounded container, followed by a large heading and introductory paragraph. Below that is a prose area with multiple headings, paragraphs, and a bulleted list. The sidebar contains two stacked cards in muted backgrounds: an expertise section listing three design tools with logos and descriptions, and a related services section with four linked items each showing an icon, title, and short description.
Related service links in the sidebar use a hover transition that shifts text and icon color to primary while applying a background highlight. Tool icons are rendered at a small fixed size. The service icon in the main column uses a muted padded container. The prose content is unrestricted in width within its column and supports dark mode via inversion. Built with Shadcn UI spacing and color conventions.
The combination of detailed prose content with two informational sidebar widgets creates a reference-style page with good scannability. The related services section encourages further navigation. Moderate to high complexity with multiple distinct sections and interactive hover states in the sidebar.
On mobile the content and sidebar stack vertically with the sidebar appearing after the main content.