Preview

Open in new tab

Landing page pack

One finished landing page, not just isolated sections.

The landing page example strings the catalog together into a working page flow teams can copy as a starter.

Hero + stats

Launch-first intro with proof immediately below.

Feature narrative

Editorial feature section with supporting cards.

Proof + CTA

Testimonials, logo cloud, and a closing CTA band.

Built from: Hero, feature, testimonial, stat, logo cloud, and CTA sections.
Designed for: Product launches, acquisition pages, and campaign pages.

Use this page example as the base for a product launch or campaign site.

Variants

Launch story

Campaign landing page with hero, feature, proof, and CTA flow.

Product overview

Homepage-style landing page for a core product area.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Badge, Button, Card, Container, DescriptionList, Grid, Heading, Separator, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Landing page pack</Badge>
    <Heading level={1}>One finished landing page, not just isolated sections.</Heading>
    <Text as="p">The landing page example strings the catalog together into a working page flow teams can copy as a starter.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open landing page</Button>
        <Button variant="outline">Use hero blocks</Button>
    </Stack>
    <Separator />
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Hero + stats</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Launch-first intro with proof immediately below.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Feature narrative</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Editorial feature section with supporting cards.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Proof + CTA</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Testimonials, logo cloud, and a closing CTA band.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built from</DescriptionList.Term>
        <DescriptionList.Description>Hero, feature, testimonial, stat, logo cloud, and CTA sections.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Designed for</DescriptionList.Term>
        <DescriptionList.Description>Product launches, acquisition pages, and campaign pages.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Card.Root>
      <Card.Content>
        <Text as="p">Use this page example as the base for a product launch or campaign site.</Text>
      </Card.Content>
    </Card.Root>
  </Stack>
</Container>

DRYui

Landing Page Example