PageLanding Pro

Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.

Landing page. Slots: hero, logos, features, proof, pricing, cta, footer.

Jump to API reference

Import

Vue
import { UiPageLanding } from '@ziyarago/ui-pro/vue'

Default

Hero slot
Logo strip slot
Features slot
Social proof slot
Pricing teaser slot
Call to action slot
Footer slot
Vue
<UiPageLanding>
  <template #hero>Hero slot</template>
  <template #logos>Logo strip slot</template>
  <template #features>Features slot</template>
  <template #proof>Social proof slot</template>
  <template #pricing>Pricing teaser slot</template>
  <template #cta>Call to action slot</template>
  <template #footer>Footer slot</template>
</UiPageLanding>

API reference

Landing template: hero, logo strip, features, social proof, pricing teaser, call to action and footer. Used without the app shell.

Slots

Vue: named slots. React: a prop with the same name; default is children.

heroHero block; HeroBanner, Card, Button.
logosPartner row; Chip or Text.
featuresFeature cards; Card, IconTile.
proofNumbers and quotes; StatStrip, Card, Avatar.
pricingPlan cards; PricingCard.
ctaClosing block; Card variant="gradient", Button.
footerPage footer; Footer.

Notes

  • Landing does not use the app shell: render it on its own page. Blocks stack in one column; each block may use its own grid and wraps on narrow screens.