@@ -0,0 +1,45 @@
+import { Surface, Section, Container, Stack, Heading, Text, Button } from 'ciphercell-homepage';
+
+export const Default = () => (
+  <Surface>
+    <Section spacing="tight">
+      <Container>
+        <Stack gap={5}>
+          <Heading>Four stages. One method.</Heading>
+          <Text measure>
+            Threat analysis, engineering, verification and monitoring, applied to your software as
+            one continuous method rather than four separate projects.
+          </Text>
+        </Stack>
+      </Container>
+    </Section>
+  </Surface>
+);
+
+export const Tight = () => (
+  <Surface>
+    <Section spacing="tight">
+      <Container>
+        <Stack gap={2}>
+          <Text size="small" muted>Threat analysis</Text>
+          <Text size="small">Threat model</Text>
+          <Text size="small">Attack paths</Text>
+          <Text size="small">CI/CD integration</Text>
+        </Stack>
+      </Container>
+    </Section>
+  </Surface>
+);
+
+export const AlignStart = () => (
+  <Surface>
+    <Section spacing="tight">
+      <Container>
+        <Stack gap={5} align="start">
+          <Text measure muted>A button should keep its natural width.</Text>
+          <Button href="/contact">Talk to us</Button>
+        </Stack>
+      </Container>
+    </Section>
+  </Surface>
+);