import { Surface, Section, Container, Grid, Col, Stack, Heading, Text } from 'ciphercell-homepage';

export const Offset = () => (
  <Surface>
    <Section spacing="tight">
      <Container>
        <Grid>
          <Col span={8}>
            <Heading>Four stages. One method.</Heading>
          </Col>
          <Col span={5} start={8}>
            <Text measure>
              Threat analysis, engineering, verification and monitoring run alongside your development.
            </Text>
          </Col>
        </Grid>
      </Container>
    </Section>
  </Surface>
);

export const FullWidth = () => (
  <Surface>
    <Section spacing="tight">
      <Container>
        <Grid>
          <Col>
            <Stack gap={4}>
              <Heading level={3}>A block across all twelve columns.</Heading>
              <Text muted>Twelve is the default, so span may be left out.</Text>
            </Stack>
          </Col>
        </Grid>
      </Container>
    </Section>
  </Surface>
);