docs: update templates

packages/docs/src/components/docs/components/Template.tsx

@@ -0,0 +1,66 @@
+import Box from '@mui/material/Box';
+import Image from 'next/image';
+import Link from 'next/link';
+
+interface TemplateProps {
+  image: string;
+  title: string;
+  url: string;
+}
+
+const Template = ({ image, title, url }: TemplateProps) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: '8px',
+      }}
+    >
+      <Box
+        component={Link}
+        href={url}
+        target="_blank"
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: '8px',
+        }}
+      >
+        <Box
+          sx={{
+            width: '120px',
+            height: '120px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <Image width={120} height={120} src={image} alt={title} />
+        </Box>
+        <Box component="h5" style={{ marginTop: 0, marginBottom: 0 }}>
+          {title}
+        </Box>
+      </Box>
+      <Box>
+        <Link
+          href={`https://app.netlify.com/start/deploy?repository=${url}&amp;stack=cms`}
+          target="_blank"
+        >
+          <Image
+            width={146}
+            height={32}
+            src="https://www.netlify.com/img/deploy/button.svg"
+            alt="Deploy to Netlify"
+          />
+        </Link>
+      </Box>
+    </Box>
+  );
+};
+
+export default Template;

packages/docs/src/components/docs/components/Templates.tsx

@@ -0,0 +1,24 @@
+import Box from '@mui/material/Box';
+
+import type { ReactNode } from 'react';
+
+interface TemplatesProps {
+  children: ReactNode;
+}
+
+const Templates = ({ children }: TemplatesProps) => {
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+        gap: '24px',
+        marginBottom: '16px',
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default Templates;