Skyline Features

A full-viewport features section anchored by a soft sunset sky with hot air balloons drifting above clouds. The block pairs a refined sans-serif headline that emphasizes in one place with a small uppercase eyebrow, a centered supporting line, three benefits on each side of a self contained inline SVG dashboard mockup, and a top navigation bar.

Best for

Use this block as the features section of an analytics, team productivity, or workflow automation 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 soft top and bottom gradient overlays so the headline and white dashboard card stay readable over the sky. Navigation keeps the Skyline brand at left, primary product links centered on wide desktop, and a Get Started CTA on the right. On narrower screens, the full nav collapses into a shadcn Sheet side menu so the header never crowds or overflows. On wide desktop the body splits into a three column grid with three benefits at left, the SVG mockup in the center, and three more benefits at right. On tablet and mobile the grid collapses into a single column so the mockup, then both feature columns stack cleanly.

Accessibility

The background image and dashboard mockup are decorative (aria-hidden). Dropdown nav and mobile sheet links use shadcn/Radix primitives with accessible anchor semantics via asChild. The benefits use semantic ul and li markup with lucide icons that are decorative siblings of the text content.

Included UI

• Decorative full-bleed background image
• Top navigation with Skyline wordmark, dropdown menus, and a Get Started CTA
• Mobile sheet navigation
• Eyebrow label, headline, and supporting copy
• Six item benefits grid with colored icon badges
• Lightweight decorative SVG dashboard mockup

Customize

Replace /skyline-features-background.png with your own hosted image path if needed. Edit the leftFeatures and rightFeatures arrays to swap icons, titles, descriptions, and badge colors. Tune the brand navy by editing the #1f2552 accents.

Dependencies

Requires lucide-react plus button, dropdown-menu, and sheet from the shadcn registry.