Initial commit 🚀

.design-sync/previews/Grid.tsx

@@ -0,0 +1,53 @@
+import { Surface, Section, Container, Grid, Col, Stack, Heading, Text, TextLink } from 'ciphercell-homepage';
+
+export const Asymmetric = () => (
+  <Surface>
+    <Section spacing="tight">
+      <Container>
+        <Grid>
+          <Col span={7}>
+            <Heading>Security is built in,<br />not bolted on.</Heading>
+          </Col>
+          <Col span={4} start={9}>
+            <Stack gap={5} align="start">
+              <Text measure>
+                We model real adversaries and build zero trust into the architecture rather than
+                around it.
+              </Text>
+              <TextLink href="/about">About CipherCell</TextLink>
+            </Stack>
+          </Col>
+        </Grid>
+      </Container>
+    </Section>
+  </Surface>
+);
+
+export const Thirds = () => (
+  <Surface>
+    <Section spacing="tight">
+      <Container>
+        <Grid>
+          <Col span={4}>
+            <Stack gap={3}>
+              <Heading level={3}>Private 5G</Heading>
+              <Text size="small" muted>Open interfaces, many vendors.</Text>
+            </Stack>
+          </Col>
+          <Col span={4}>
+            <Stack gap={3}>
+              <Heading level={3}>Critical networks</Heading>
+              <Text size="small" muted>Where a breach stops production.</Text>
+            </Stack>
+          </Col>
+          <Col span={4}>
+            <Stack gap={3}>
+              <Heading level={3}>Cloud-native</Heading>
+              <Text size="small" muted>Security that runs as code.</Text>
+            </Stack>
+          </Col>
+        </Grid>
+      </Container>
+    </Section>
+  </Surface>
+);