Initial react editor website template

app/contact/editor/page.tsx

@@ -0,0 +1,6 @@
+import PageEditor from '@/components/page-editor';
+import page from '../page.json';
+
+export default function ContactEditorPage() {
+  return <PageEditor pagePath="app/contact/page.json" page={page} />;
+}

app/contact/page.json

@@ -0,0 +1,29 @@
+{
+  "root": {
+    "props": {
+      "title": "Contact — Your Company",
+      "description": "Tell us what you are working on and how we can help.",
+      "ogImage": ""
+    }
+  },
+  "content": [
+    { "type": "header", "props": { "id": "header" }, "synced": true },
+    {
+      "type": "contact-form",
+      "props": {
+        "id": "contact-form",
+        "heading": "Let’s make something meaningful.",
+        "description": "Tell us what you are working on, where you are stuck, or what you want to make possible.",
+        "email": "hello@example.com",
+        "location": "New York, NY",
+        "nameLabel": "Name",
+        "emailLabel": "Email",
+        "companyLabel": "Company",
+        "messageLabel": "How can we help?",
+        "submitLabel": "Send message",
+        "successMessage": "Thanks — we will be in touch soon."
+      }
+    },
+    { "type": "footer", "props": { "id": "footer" }, "synced": true }
+  ]
+}

app/contact/page.tsx

@@ -0,0 +1,9 @@
+import PageRender from '@/components/page-render';
+import { pageMetadata } from '@/lib/page-metadata';
+import page from './page.json';
+
+export const metadata = pageMetadata(page, { path: '/contact' });
+
+export default function ContactPage() {
+  return <PageRender page={page} />;
+}