marketing/DSHeroSection

DSHeroSection

marketing

since 0.1.0

Full-width landing page hero with an announcement badge, headline, subheadline, CTA buttons, and a social proof row.

iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+

Purpose

First above-the-fold section of a marketing or app landing page.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Props

Prop	Type	Default	Description
eyebrow	String?	nil	Small announcement label above the headline.
headlinereq	String	—	Main heading.
subheadlinereq	String	—	Supporting copy.
primaryCTAreq	(label: String, action: () -> Void)	—	Primary button.
secondaryCTA	(label: String, action: () -> Void)?	nil	Secondary button.
socialProof	String?	nil	Trust line under the buttons (e.g. "Used by 2,000+ teams").
badgeIcon	String?	nil	SF Symbol shown in the eyebrow badge.

Examples

App landing hero

Hero section for a productivity app.

swift

DSHeroSection(
    eyebrow: "Now in public beta",
    headline: "Build faster with SwiftDS",
    subheadline: "60+ SwiftUI components with a unified design token system.",
    primaryCTA: (label: "Get started free", action: { navigate(.signup) }),
    secondaryCTA: (label: "View documentation", action: { navigate(.docs) }),
    socialProof: "Used by 2,000+ developers",
    badgeIcon: "sparkles"
)

Related Components

FeatureCard PricingCard