Preview

Agency starter

A studio-ready starter for services, case studies, and contact conversion.

This starter leans into feature sections, testimonials, team blocks, and contact routing.

Service framing

Explain offers with feature and content sections.

Case-study row

Promote wins, proof, and selected work.

Contact conversion

Split CTA and contact sections for buyers and partners.

Included patterns

• Services section

• Case studies

• Testimonials

• Contact routing

Variants

Case-study agency

Services plus case studies and testimonial proof.

Boutique studio

Sharper typography and tighter service framing.

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, Fieldset, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Agency starter</Badge>
    <Heading level={1}>A studio-ready starter for services, case studies, and contact conversion.</Heading>
    <Text as="p">This starter leans into feature sections, testimonials, team blocks, and contact routing.</Text>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Service framing</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Explain offers with feature and content sections.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Case-study row</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Promote wins, proof, and selected work.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Contact conversion</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Split CTA and contact sections for buyers and partners.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Services section</Text>
        <Text as="p">• Case studies</Text>
        <Text as="p">• Testimonials</Text>
        <Text as="p">• Contact routing</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open starter</Button>
        <Button variant="outline">See testimonials</Button>
    </Stack>
  </Stack>
</Container>

DRYui

Agency Starter