@@ -0,0 +1,52 @@
+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>
+);