Lakeside Features

A full-viewport features section anchored by a warm alpine lake backdrop. The block pairs a refined display serif headline with a four item benefits list on the left and a self contained inline SVG dashboard mockup on the right, so visitors can scan the product story without leaving the first scroll.

Best for

Use this block as the features section of a planning, analytics, project management, or team productivity landing page where the surrounding content already feels editorial and aspirational.

Layout and behavior

The background image is rendered as a decorative full-bleed img with a soft warm veil so dark text and the white dashboard card stay readable over the sky. On wide desktop the layout splits into a two column grid: the four benefit rows live in the left column and the inline SVG dashboard mockup sits in the right column. On tablet and mobile the grid collapses into a single column so the headline, supporting copy, benefits, and mockup stack cleanly.

Accessibility

The background image and dashboard mockup are decorative (aria-hidden). The benefits list uses semantic ul and li markup with lucide icons that are decorative siblings of the text content.

Included UI

• Decorative full-bleed background image
• Eyebrow label, headline, and supporting copy
• Four item benefits list with icon badges
• Lightweight decorative SVG dashboard mockup

Customize

Replace /lakeside-features-background.png with your own hosted image path if needed. Edit the features array to swap icons, titles, and descriptions.

Dependencies

Requires lucide-react.