Sections
Hero, media, and landing sections with image/video media, CTAs, and lazy product rails.
Hero section
A full-width media banner with a call-to-action. This one uses video media with a poster.
import { HeroSection } from '@mediayard/agoratopia-ui/components/sections';
<HeroSection cta={{ label, href }} media={video_media} /> Media section
The standalone media frame used inside sections. Accepts image or video media, with an optional different media for mobile.
import { MediaSection } from '@mediayard/agoratopia-ui/components/sections';
<MediaSection media={image_media} /> Landing section
Brand logo, description, call-to-action, media, and a product rail. Products load lazily when the section scrolls into view, via the queryProductCardsByTag remote function, which simulates a 5 second connection delay - so you also get to see the loading skeletons.
The Scent of An Everlasting Summer.
import { LandingSection } from '@mediayard/agoratopia-ui/components/sections';
<LandingSection {logo} {description} {cta} {media} {tag} query={queryProductCardsByTag} />