Skip to main content

Composite demo

Storefront Demo

Live acheteur experience assembled from real design-system patterns. Source of truth: packages/design-system/docs/composites/storefront-demo.ts.

Showing populated featured-events
#navbarpattern: topnavcategory: organisms

Sticky top nav, 64px tall.

#heropattern: herosearchcategory: molecules

Discover live events near you

Tickets from local producers. Secure checkout. Instant wallet delivery.

Full-width hero, 480px tall, centered headline + subhead + inline search.

#category-filterpattern: categoryfiltercategory: molecules

Horizontal scrolling chip strip. 7 categories.

#featured-eventspattern: eventcardpubliccategory: molecules

4-column responsive grid (1 / 2 / 4 cols).

#value-propspattern: valuepropsstripcategory: molecules
  • Secure payment

    Encrypted checkout with multiple payment options.

  • Instant tickets

    Receive your tickets immediately after purchase.

  • Mobile wallet

    Store tickets in your phone for easy access.

  • Refund guarantee

    Full refund if an event is cancelled.

ValuePropsStrip molecule — 4 trust-signal items.

#newsletterpattern: newslettercategory: molecules

Get the next 5 events in your inbox

Weekly picks from local producers. No spam.

Email capture band, brand.700 bg.

#footerpattern: footercategory: organisms

4 columns: Discover, Producers, Support, Legal.

Storefront Demo — ePassLive Design System