53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { Surface, Section, Container, Stack, Button, TextLink, Text } from 'ciphercell-homepage';
|
|
|
|
export const Primary = () => (
|
|
<Surface>
|
|
<Section spacing="tight">
|
|
<Container>
|
|
<Stack gap={5} align="start">
|
|
<Button href="/contact">Talk to us</Button>
|
|
</Stack>
|
|
</Container>
|
|
</Section>
|
|
</Surface>
|
|
);
|
|
|
|
export const WithSecondary = () => (
|
|
<Surface>
|
|
<Section spacing="tight">
|
|
<Container>
|
|
<Stack gap={4} align="start">
|
|
<Button href="/cipherverifier">Explore CipherVerifier</Button>
|
|
<TextLink href="/method">Explore the method</TextLink>
|
|
<Text size="small" muted>A second action is a link, never a second button.</Text>
|
|
</Stack>
|
|
</Container>
|
|
</Section>
|
|
</Surface>
|
|
);
|
|
|
|
export const Small = () => (
|
|
<Surface>
|
|
<Section spacing="tight">
|
|
<Container>
|
|
<Stack gap={5} align="start">
|
|
<Button size="small">Copy the report</Button>
|
|
</Stack>
|
|
</Container>
|
|
</Section>
|
|
</Surface>
|
|
);
|
|
|
|
export const OnNight = () => (
|
|
<Surface tone="night">
|
|
<Section spacing="tight">
|
|
<Container>
|
|
<Stack gap={4} align="start">
|
|
<Button href="/contact">Talk to us</Button>
|
|
<Text size="small" muted>On a night surface the button inverts itself.</Text>
|
|
</Stack>
|
|
</Container>
|
|
</Section>
|
|
</Surface>
|
|
);
|