<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Badge, Button, Card, Container, DescriptionList, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Review surfaces</Badge>
    <Heading level={1}>Treat reviews as part of the conversion flow, not just a feed.</Heading>
    <Text as="p">Review blocks package star, author, use-case, and trust framing for ecommerce surfaces.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open reviews</Button>
        <Button variant="outline">Use with product page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">4.9/5</Badge>
            <Heading level={3}>Review grid</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Best for lower-page proof sections.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Review feed</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Longer reviews with more context.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Highlighted review</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Premium proof placement for flagship products.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>