Services first
Landing page examplesA text-only page that leads with the work, prices it, answers the usual questions and takes the enquiry.
standard
header, navbar, brand, links, sticky, hero, centered, features, grid, pricing, tiers, cards, faq, questions, accordion, objections, lead, quote, booking, form, footer, columns, contact
bash
npm create nersh@latest my-site -- --site https://nertia.ai/components/page-landing/page-services-first/site.jsonInstall the sections
bash
npx shadcn@latest add https://ner.sh/r/header-brand-links.json
npx shadcn@latest add https://ner.sh/r/hero-centered.json
npx shadcn@latest add https://ner.sh/r/features-grid-3.json
npx shadcn@latest add https://ner.sh/r/pricing-three-tier.json
npx shadcn@latest add https://ner.sh/r/faq-accordion.json
npx shadcn@latest add https://ner.sh/r/lead-form-split.json
npx shadcn@latest add https://ner.sh/r/footer-columns.jsonRecipe
This is the item in site.json form.
npm create nersh@latest my-site -- --site https://nertia.ai/components/page-landing/page-services-first/site.json scaffolds a project from it.json
{
"slug": "page-services-first",
"mode": "builder",
"status": "draft",
"skinId": "zinc",
"composition": {
"id": "page-services-first",
"sections": [
{
"id": "layout-section",
"instanceId": "header-band-r1",
"layout": "stack",
"children": [
{
"id": "layout-container",
"instanceId": "header-row-r1",
"layout": "cluster",
"align": "center",
"justify": "between",
"children": [
{
"id": "layout-column",
"instanceId": "header-brand-col-r1",
"children": [
{
"id": "block-brand",
"instanceId": "header-brand-r1"
}
]
},
{
"id": "layout-column",
"instanceId": "header-nav-col-r1",
"children": [
{
"id": "block-nav",
"instanceId": "header-nav-r1"
}
]
}
]
}
],
"component": "header-brand-links@1"
},
{
"id": "layout-section",
"instanceId": "hero-r2",
"layout": "centered",
"children": [
{
"id": "layout-container",
"instanceId": "hero-body-r2",
"layout": "stack",
"children": [
{
"id": "block-heading",
"instanceId": "hero-heading-r2"
},
{
"id": "block-text",
"instanceId": "hero-sub-r2"
},
{
"id": "block-button",
"instanceId": "hero-cta-r2"
}
]
}
],
"component": "hero-centered@1"
},
{
"id": "layout-section",
"instanceId": "features-r3",
"children": [
{
"id": "layout-container",
"instanceId": "features-intro-r3",
"layout": "stack",
"children": [
{
"id": "block-heading",
"instanceId": "features-heading-r3"
},
{
"id": "block-text",
"instanceId": "features-sub-r3"
}
]
},
{
"id": "layout-container",
"instanceId": "features-grid-r3",
"layout": "grid-3",
"children": [
{
"id": "block-card",
"instanceId": "feature-1-r3"
},
{
"id": "block-card",
"instanceId": "feature-2-r3"
},
{
"id": "block-card",
"instanceId": "feature-3-r3"
}
]
}
],
"component": "features-grid-3@1"
},
{
"id": "layout-section",
"instanceId": "pricing-band-r4",
"layout": "stack",
"children": [
{
"id": "layout-container",
"instanceId": "pricing-intro-r4",
"layout": "stack",
"children": [
{
"id": "block-heading",
"instanceId": "pricing-heading-r4"
},
{
"id": "block-text",
"instanceId": "pricing-sub-r4"
}
]
},
{
"id": "layout-container",
"instanceId": "pricing-row-r4",
"layout": "grid-3",
"children": [
{
"id": "layout-column",
"instanceId": "tier-1-col-r4",
"span": 4,
"spanAt": {
"lg": 4
},
"children": [
{
"id": "block-card",
"instanceId": "tier-1-card-r4",
"children": [
{
"id": "block-text",
"instanceId": "tier-1-name-r4"
},
{
"id": "block-text",
"instanceId": "tier-1-price-r4"
},
{
"id": "block-text",
"instanceId": "tier-1-desc-r4"
},
{
"id": "block-list",
"instanceId": "tier-1-list-r4"
},
{
"id": "block-button",
"instanceId": "tier-1-cta-r4"
}
]
}
]
},
{
"id": "layout-column",
"instanceId": "tier-2-col-r4",
"span": 4,
"spanAt": {
"lg": 4
},
"children": [
{
"id": "block-card",
"instanceId": "tier-2-card-r4",
"children": [
{
"id": "block-badge",
"instanceId": "tier-2-badge-r4"
},
{
"id": "block-text",
"instanceId": "tier-2-name-r4"
},
{
"id": "block-text",
"instanceId": "tier-2-price-r4"
},
{
"id": "block-text",
"instanceId": "tier-2-desc-r4"
},
{
"id": "block-list",
"instanceId": "tier-2-list-r4"
},
{
"id": "block-button",
"instanceId": "tier-2-cta-r4"
}
]
}
]
},
{
"id": "layout-column",
"instanceId": "tier-3-col-r4",
"span": 4,
"spanAt": {
"lg": 4
},
"children": [
{
"id": "block-card",
"instanceId": "tier-3-card-r4",
"children": [
{
"id": "block-text",
"instanceId": "tier-3-name-r4"
},
{
"id": "block-text",
"instanceId": "tier-3-price-r4"
},
{
"id": "block-text",
"instanceId": "tier-3-desc-r4"
},
{
"id": "block-list",
"instanceId": "tier-3-list-r4"
},
{
"id": "block-button",
"instanceId": "tier-3-cta-r4"
}
]
}
]
}
]
}
],
"component": "pricing-three-tier@2"
},
{
"id": "layout-section",
"instanceId": "faq-band-r5",
"layout": "centered",
"children": [
{
"id": "layout-container",
"instanceId": "faq-intro-r5",
"layout": "stack",
"children": [
{
"id": "block-heading",
"instanceId": "faq-heading-r5"
},
{
"id": "block-text",
"instanceId": "faq-sub-r5"
}
]
},
{
"id": "layout-container",
"instanceId": "faq-list-r5",
"layout": "stack",
"children": [
{
"id": "block-accordion",
"instanceId": "faq-accordion-r5"
}
]
}
],
"component": "faq-accordion@1"
},
{
"id": "layout-section",
"instanceId": "lead-band-r6",
"layout": "stack",
"children": [
{
"id": "layout-container",
"instanceId": "lead-intro-r6",
"layout": "stack",
"children": [
{
"id": "layout-column",
"instanceId": "lead-intro-col-r6",
"children": [
{
"id": "block-heading",
"instanceId": "lead-heading-r6"
},
{
"id": "block-text",
"instanceId": "lead-sub-r6"
}
]
}
]
},
{
"id": "layout-container",
"instanceId": "lead-row-r6",
"layout": "split-60-40",
"children": [
{
"id": "layout-column",
"instanceId": "lead-form-col-r6",
"span": 7,
"children": [
{
"id": "block-form",
"instanceId": "lead-form-r6",
"children": [
{
"id": "block-input",
"instanceId": "lead-name-r6"
},
{
"id": "block-input",
"instanceId": "lead-phone-r6"
},
{
"id": "block-input",
"instanceId": "lead-email-r6"
},
{
"id": "block-textarea",
"instanceId": "lead-notes-r6"
}
]
}
]
},
{
"id": "layout-column",
"instanceId": "lead-book-col-r6",
"span": 5,
"children": [
{
"id": "block-embed",
"instanceId": "lead-booking-r6"
}
]
}
]
}
],
"component": "lead-form-split@1"
},
{
"id": "layout-section",
"instanceId": "footer-band-r7",
"fullBleed": true,
"children": [
{
"id": "layout-container",
"instanceId": "footer-grid-r7",
"layout": "grid-3",
"children": [
{
"id": "layout-column",
"instanceId": "footer-brand-col-r7",
"span": 4,
"children": [
{
"id": "block-brand",
"instanceId": "footer-brand-r7"
}
]
},
{
"id": "layout-column",
"instanceId": "footer-links-col-r7",
"span": 4,
"children": [
{
"id": "block-link-group",
"instanceId": "footer-links-r7"
}
]
},
{
"id": "layout-column",
"instanceId": "footer-contact-col-r7",
"span": 4,
"children": [
{
"id": "block-link-group",
"instanceId": "footer-contact-r7"
},
{
"id": "block-text",
"instanceId": "footer-hours-r7"
},
{
"id": "block-link-group",
"instanceId": "footer-social-links-r7"
}
]
}
]
}
],
"component": "footer-columns@1"
}
]
},
"copy": {
"header-band-r1.coverImage": "",
"header-band-r1.coverStyle": "",
"header-band-r1.coverScrim": "",
"header-band-r1.anchor": "",
"header-band-r1.navLabel": "",
"header-band-r1.navHref": "",
"header-band-r1.navSkip": "true",
"header-band-r1.landmark": "header",
"header-band-r1.tone": "default",
"header-band-r1.gutter": "",
"header-band-r1.shape": "",
"header-band-r1.padding": "compact",
"header-band-r1.sticky": "true",
"header-band-r1.reveal": "",
"header-band-r1.dismissible": "",
"header-band-r1.width": "",
"header-band-r1.gradient": "",
"header-row-r1.align": "",
"header-row-r1.phone": "row",
"header-brand-col-r1.pad": "",
"header-brand-col-r1.sticky": "",
"header-brand-r1.wordmark": "Your Company",
"header-brand-r1.wordmarkAccent": "",
"header-brand-r1.logoImage": "",
"header-brand-r1.tagline": "",
"header-brand-r1.href": "#",
"header-nav-col-r1.pad": "",
"header-nav-col-r1.sticky": "",
"header-nav-r1.links": "[{\"label\":\"Home\",\"href\":\"#\"},{\"label\":\"About\",\"href\":\"#about\"},{\"label\":\"Services\",\"href\":\"#services\"},{\"label\":\"Contact\",\"href\":\"#contact\"}]",
"header-nav-r1.ctaLabel": "Get started",
"header-nav-r1.ctaHref": "#contact",
"header-nav-r1.ctaTone": "",
"header-nav-r1.ctaIcon": "",
"header-nav-r1.phoneMenu": "",
"header-nav-r1.align": "end",
"hero-r2.coverImage": "",
"hero-r2.coverStyle": "",
"hero-r2.coverScrim": "",
"hero-r2.anchor": "",
"hero-r2.navLabel": "",
"hero-r2.navHref": "",
"hero-r2.navSkip": "",
"hero-r2.landmark": "",
"hero-r2.tone": "",
"hero-r2.gutter": "",
"hero-r2.shape": "",
"hero-r2.padding": "",
"hero-r2.sticky": "",
"hero-r2.reveal": "",
"hero-r2.dismissible": "",
"hero-r2.width": "",
"hero-r2.gradient": "",
"hero-body-r2.align": "",
"hero-body-r2.phone": "",
"hero-heading-r2.text": "A headline that says what you do",
"hero-heading-r2.level": "h1",
"hero-sub-r2.text": "One sentence on who this is for and why it matters.",
"hero-sub-r2.textStyle": "",
"hero-cta-r2.label": "Get started",
"hero-cta-r2.href": "#",
"hero-cta-r2.variant": "",
"hero-cta-r2.size": "",
"hero-cta-r2.tone": "",
"hero-cta-r2.width": "",
"hero-cta-r2.icon": "",
"hero-cta-r2.iconOnly": "",
"features-r3.coverImage": "",
"features-r3.coverStyle": "",
"features-r3.coverScrim": "",
"features-r3.anchor": "",
"features-r3.navLabel": "",
"features-r3.navHref": "",
"features-r3.navSkip": "",
"features-r3.landmark": "",
"features-r3.tone": "",
"features-r3.gutter": "",
"features-r3.shape": "",
"features-r3.padding": "",
"features-r3.sticky": "",
"features-r3.reveal": "",
"features-r3.dismissible": "",
"features-r3.width": "",
"features-r3.gradient": "",
"features-intro-r3.align": "center",
"features-intro-r3.phone": "",
"features-heading-r3.text": "Features",
"features-heading-r3.level": "",
"features-sub-r3.text": "One sentence that introduces this section.",
"features-sub-r3.textStyle": "",
"features-grid-r3.align": "",
"features-grid-r3.phone": "",
"feature-1-r3.title": "Feature one",
"feature-1-r3.body": "A sentence about this feature.",
"feature-1-r3.href": "",
"feature-1-r3.emphasis": "",
"feature-1-r3.density": "",
"feature-1-r3.align": "center",
"feature-1-r3.icon": "",
"feature-2-r3.title": "Feature two",
"feature-2-r3.body": "A sentence about this feature.",
"feature-2-r3.href": "",
"feature-2-r3.emphasis": "",
"feature-2-r3.density": "",
"feature-2-r3.align": "center",
"feature-2-r3.icon": "",
"feature-3-r3.title": "Feature three",
"feature-3-r3.body": "A sentence about this feature.",
"feature-3-r3.href": "",
"feature-3-r3.emphasis": "",
"feature-3-r3.density": "",
"feature-3-r3.align": "center",
"feature-3-r3.icon": "",
"pricing-band-r4.coverImage": "",
"pricing-band-r4.coverStyle": "",
"pricing-band-r4.coverScrim": "",
"pricing-band-r4.anchor": "",
"pricing-band-r4.navLabel": "",
"pricing-band-r4.navHref": "",
"pricing-band-r4.navSkip": "",
"pricing-band-r4.landmark": "",
"pricing-band-r4.tone": "",
"pricing-band-r4.gutter": "",
"pricing-band-r4.shape": "",
"pricing-band-r4.padding": "",
"pricing-band-r4.sticky": "",
"pricing-band-r4.reveal": "",
"pricing-band-r4.dismissible": "",
"pricing-band-r4.width": "",
"pricing-band-r4.gradient": "",
"pricing-intro-r4.align": "center",
"pricing-intro-r4.phone": "",
"pricing-heading-r4.text": "Pricing",
"pricing-heading-r4.level": "h2",
"pricing-sub-r4.text": "One sentence that introduces this section.",
"pricing-sub-r4.textStyle": "",
"pricing-row-r4.align": "",
"pricing-row-r4.phone": "",
"tier-1-col-r4.pad": "",
"tier-1-col-r4.sticky": "",
"tier-1-card-r4.title": "",
"tier-1-card-r4.body": "",
"tier-1-card-r4.href": "",
"tier-1-card-r4.emphasis": "",
"tier-1-card-r4.density": "",
"tier-1-card-r4.align": "center",
"tier-1-card-r4.icon": "",
"tier-1-name-r4.text": "Starter",
"tier-1-name-r4.textStyle": "eyebrow",
"tier-1-price-r4.text": "$0/mo",
"tier-1-price-r4.textStyle": "stat",
"tier-1-desc-r4.text": "A sentence about who this plan is for.",
"tier-1-desc-r4.textStyle": "note",
"tier-1-list-r4.items": "A feature line\nA feature line\nA feature line",
"tier-1-list-r4.marker": "check",
"tier-1-list-r4.size": "sm",
"tier-1-list-r4.markerImage": "",
"tier-1-cta-r4.label": "Choose Starter",
"tier-1-cta-r4.href": "#",
"tier-1-cta-r4.variant": "outline",
"tier-1-cta-r4.size": "",
"tier-1-cta-r4.tone": "",
"tier-1-cta-r4.width": "full",
"tier-1-cta-r4.icon": "",
"tier-1-cta-r4.iconOnly": "",
"tier-2-col-r4.pad": "",
"tier-2-col-r4.sticky": "",
"tier-2-card-r4.title": "",
"tier-2-card-r4.body": "",
"tier-2-card-r4.href": "",
"tier-2-card-r4.emphasis": "true",
"tier-2-card-r4.density": "",
"tier-2-card-r4.align": "center",
"tier-2-card-r4.icon": "",
"tier-2-badge-r4.text": "Most popular",
"tier-2-badge-r4.href": "",
"tier-2-badge-r4.style": "",
"tier-2-badge-r4.placement": "edge",
"tier-2-name-r4.text": "Standard",
"tier-2-name-r4.textStyle": "eyebrow",
"tier-2-price-r4.text": "$29/mo",
"tier-2-price-r4.textStyle": "stat",
"tier-2-desc-r4.text": "A sentence about who this plan is for.",
"tier-2-desc-r4.textStyle": "note",
"tier-2-list-r4.items": "A feature line\nA feature line\nA feature line",
"tier-2-list-r4.marker": "check",
"tier-2-list-r4.size": "sm",
"tier-2-list-r4.markerImage": "",
"tier-2-cta-r4.label": "Choose Standard",
"tier-2-cta-r4.href": "#",
"tier-2-cta-r4.variant": "solid",
"tier-2-cta-r4.size": "",
"tier-2-cta-r4.tone": "",
"tier-2-cta-r4.width": "full",
"tier-2-cta-r4.icon": "",
"tier-2-cta-r4.iconOnly": "",
"tier-3-col-r4.pad": "",
"tier-3-col-r4.sticky": "",
"tier-3-card-r4.title": "",
"tier-3-card-r4.body": "",
"tier-3-card-r4.href": "",
"tier-3-card-r4.emphasis": "",
"tier-3-card-r4.density": "",
"tier-3-card-r4.align": "center",
"tier-3-card-r4.icon": "",
"tier-3-name-r4.text": "Plus",
"tier-3-name-r4.textStyle": "eyebrow",
"tier-3-price-r4.text": "$79/mo",
"tier-3-price-r4.textStyle": "stat",
"tier-3-desc-r4.text": "A sentence about who this plan is for.",
"tier-3-desc-r4.textStyle": "note",
"tier-3-list-r4.items": "A feature line\nA feature line\nA feature line",
"tier-3-list-r4.marker": "check",
"tier-3-list-r4.size": "sm",
"tier-3-list-r4.markerImage": "",
"tier-3-cta-r4.label": "Choose Plus",
"tier-3-cta-r4.href": "#",
"tier-3-cta-r4.variant": "outline",
"tier-3-cta-r4.size": "",
"tier-3-cta-r4.tone": "",
"tier-3-cta-r4.width": "full",
"tier-3-cta-r4.icon": "",
"tier-3-cta-r4.iconOnly": "",
"faq-band-r5.coverImage": "",
"faq-band-r5.coverStyle": "",
"faq-band-r5.coverScrim": "",
"faq-band-r5.anchor": "",
"faq-band-r5.navLabel": "",
"faq-band-r5.navHref": "",
"faq-band-r5.navSkip": "",
"faq-band-r5.landmark": "",
"faq-band-r5.tone": "",
"faq-band-r5.gutter": "",
"faq-band-r5.shape": "",
"faq-band-r5.padding": "",
"faq-band-r5.sticky": "",
"faq-band-r5.reveal": "",
"faq-band-r5.dismissible": "",
"faq-band-r5.width": "",
"faq-band-r5.gradient": "",
"faq-intro-r5.align": "center",
"faq-intro-r5.phone": "",
"faq-heading-r5.text": "Frequently asked questions",
"faq-heading-r5.level": "h2",
"faq-sub-r5.text": "One sentence that introduces this section.",
"faq-sub-r5.textStyle": "",
"faq-list-r5.align": "",
"faq-list-r5.phone": "",
"faq-accordion-r5.items": "[{\"question\":\"A common question?\",\"answer\":\"A short, direct answer.\"},{\"question\":\"A common question?\",\"answer\":\"A short, direct answer.\"},{\"question\":\"A common question?\",\"answer\":\"A short, direct answer.\"},{\"question\":\"A common question?\",\"answer\":\"A short, direct answer.\"},{\"question\":\"A common question?\",\"answer\":\"A short, direct answer.\"}]",
"faq-accordion-r5.multiple": "",
"lead-band-r6.coverImage": "",
"lead-band-r6.coverStyle": "",
"lead-band-r6.coverScrim": "",
"lead-band-r6.anchor": "contact",
"lead-band-r6.navLabel": "",
"lead-band-r6.navHref": "",
"lead-band-r6.navSkip": "",
"lead-band-r6.landmark": "",
"lead-band-r6.tone": "",
"lead-band-r6.gutter": "",
"lead-band-r6.shape": "",
"lead-band-r6.padding": "",
"lead-band-r6.sticky": "",
"lead-band-r6.reveal": "",
"lead-band-r6.dismissible": "",
"lead-band-r6.width": "",
"lead-band-r6.gradient": "",
"lead-intro-r6.align": "center",
"lead-intro-r6.phone": "",
"lead-intro-col-r6.pad": "",
"lead-intro-col-r6.sticky": "",
"lead-heading-r6.text": "Get in touch",
"lead-heading-r6.level": "h2",
"lead-sub-r6.text": "One sentence on what happens after someone writes in.",
"lead-sub-r6.textStyle": "",
"lead-row-r6.align": "",
"lead-row-r6.phone": "",
"lead-form-col-r6.pad": "",
"lead-form-col-r6.sticky": "",
"lead-form-r6.submitLabel": "Send",
"lead-form-r6.email": "",
"lead-form-r6.successMessage": "Thanks. We will be in touch soon.",
"lead-name-r6.label": "Name",
"lead-name-r6.name": "name",
"lead-name-r6.inputType": "text",
"lead-name-r6.placeholder": "",
"lead-name-r6.required": "true",
"lead-phone-r6.label": "Phone",
"lead-phone-r6.name": "phone",
"lead-phone-r6.inputType": "tel",
"lead-phone-r6.placeholder": "(555) 555-5555",
"lead-phone-r6.required": "",
"lead-email-r6.label": "Email",
"lead-email-r6.name": "email",
"lead-email-r6.inputType": "email",
"lead-email-r6.placeholder": "",
"lead-email-r6.required": "true",
"lead-notes-r6.label": "What do you need?",
"lead-notes-r6.name": "notes",
"lead-notes-r6.placeholder": "",
"lead-notes-r6.required": "false",
"lead-book-col-r6.pad": "",
"lead-book-col-r6.sticky": "",
"lead-booking-r6.url": "",
"lead-booking-r6.title": "Book a time",
"lead-booking-r6.kind": "",
"footer-band-r7.coverImage": "",
"footer-band-r7.coverStyle": "",
"footer-band-r7.coverScrim": "",
"footer-band-r7.anchor": "",
"footer-band-r7.navLabel": "",
"footer-band-r7.navHref": "",
"footer-band-r7.navSkip": "true",
"footer-band-r7.landmark": "footer",
"footer-band-r7.tone": "muted",
"footer-band-r7.gutter": "",
"footer-band-r7.shape": "",
"footer-band-r7.padding": "",
"footer-band-r7.sticky": "",
"footer-band-r7.reveal": "",
"footer-band-r7.dismissible": "",
"footer-band-r7.width": "",
"footer-band-r7.gradient": "",
"footer-grid-r7.align": "",
"footer-grid-r7.phone": "",
"footer-brand-col-r7.pad": "",
"footer-brand-col-r7.sticky": "",
"footer-brand-r7.wordmark": "Your Company",
"footer-brand-r7.wordmarkAccent": "",
"footer-brand-r7.logoImage": "",
"footer-brand-r7.tagline": "A one-line description of what you do.",
"footer-brand-r7.href": "#",
"footer-links-col-r7.pad": "",
"footer-links-col-r7.sticky": "",
"footer-links-r7.title": "Company",
"footer-links-r7.links": "[{\"label\":\"Home\",\"href\":\"#\"},{\"label\":\"About\",\"href\":\"#about\"},{\"label\":\"Services\",\"href\":\"#services\"},{\"label\":\"Contact\",\"href\":\"#contact\"}]",
"footer-links-r7.direction": "",
"footer-links-r7.icons": "",
"footer-contact-col-r7.pad": "",
"footer-contact-col-r7.sticky": "",
"footer-contact-r7.title": "Contact",
"footer-contact-r7.links": "[{\"label\":\"(555) 555-0100\",\"href\":\"tel:+15555550100\"},{\"label\":\"hello@yourcompany.com\",\"href\":\"mailto:hello@yourcompany.com\"}]",
"footer-contact-r7.direction": "",
"footer-contact-r7.icons": "",
"footer-hours-r7.text": "City, ST",
"footer-hours-r7.textStyle": "note",
"footer-social-links-r7.title": "",
"footer-social-links-r7.links": "",
"footer-social-links-r7.direction": "row",
"footer-social-links-r7.icons": "social"
}
}
Files
Brand left, links right
src/patterns/header-brand-links.site.json
json
{
"slug": "header-brand-links",
"mode": "builder",
"status": "draft",
"skinId": "zinc",
"composition": {
"id": "header-brand-links",
"sections": [
{
"id": "layout-section",
"instanceId": "header-band-r1",
"layout": "stack",
"children": [
{
"id": "layout-container",
"instanceId": "header-row-r1",
"layout": "cluster",
"align": "center",
"justify": "between",
"children": [
{
"id": "layout-column",
"instanceId": "header-brand-col-r1",
"children": [
{
"id": "block-brand",
"instanceId": "header-brand-r1"
}
]
},
{
"id": "layout-column",
"instanceId": "header-nav-col-r1",
"children": [
{
"id": "block-nav",
"instanceId": "header-nav-r1"
}
]
}
]
}
],
"component": "header-brand-links@1"
}
]
},
"copy": {
"header-band-r1.coverImage": "",
"header-band-r1.coverStyle": "",
"header-band-r1.coverScrim": "",
"header-band-r1.anchor": "",
"header-band-r1.navLabel": "",
"header-band-r1.navHref": "",
"header-band-r1.navSkip": "true",
"header-band-r1.landmark": "header",
"header-band-r1.tone": "default",
"header-band-r1.gutter": "",
"header-band-r1.shape": "",
"header-band-r1.padding": "compact",
"header-band-r1.sticky": "true",
"header-band-r1.reveal": "",
"header-band-r1.dismissible": "",
"header-band-r1.width": "",
"header-band-r1.gradient": "",
"header-row-r1.align": "",
"header-row-r1.phone": "row",
"header-brand-col-r1.pad": "",
"header-brand-col-r1.sticky": "",
"header-brand-r1.wordmark": "Your Company",
"header-brand-r1.wordmarkAccent": "",
"header-brand-r1.logoImage": "",
"header-brand-r1.tagline": "",
"header-brand-r1.href": "#",
"header-nav-col-r1.pad": "",
"header-nav-col-r1.sticky": "",
"header-nav-r1.links": "[{\"label\":\"Home\",\"href\":\"#\"},{\"label\":\"About\",\"href\":\"#about\"},{\"label\":\"Services\",\"href\":\"#services\"},{\"label\":\"Contact\",\"href\":\"#contact\"}]",
"header-nav-r1.ctaLabel": "Get started",
"header-nav-r1.ctaHref": "#contact",
"header-nav-r1.ctaTone": "",
"header-nav-r1.ctaIcon": "",
"header-nav-r1.phoneMenu": "",
"header-nav-r1.align": "end"
},
"ds": {}
}
src/patterns/header-brand-links.registry.ts
ts
import type { SectionRegistry } from '@nersh/render';
import { Component as BlockBrand } from '@/sections/block-brand/Component';
import { Component as BlockNav } from '@/sections/block-nav/Component';
import { Component as LayoutColumn } from '@/sections/layout-column/Component';
import { Component as LayoutContainer } from '@/sections/layout-container/Component';
import { Component as LayoutSection } from '@/sections/layout-section/Component';
export const registry: SectionRegistry = {
'block-brand': BlockBrand,
'block-nav': BlockNav,
'layout-column': LayoutColumn,
'layout-container': LayoutContainer,
'layout-section': LayoutSection,
};
src/patterns/HeaderBrandLinks.tsx
tsx
"use client";
import { SiteRenderer } from "@nersh/render";
import { registry } from "./header-brand-links.registry";
import siteJson from "./header-brand-links.site.json";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const site = siteJson as any;
export default function HeaderBrandLinks() {
return <SiteRenderer site={site} registry={registry} />;
}
Centered
src/patterns/hero-centered.site.json
json
{
"slug": "hero-centered",
"mode": "builder",
"status": "draft",
"skinId": "zinc",
"composition": {
"id": "hero-centered",
"sections": [
{
"id": "layout-section",
"instanceId": "hero-r1",
"layout": "centered",
"children": [
{
"id": "layout-container",
"instanceId": "hero-body-r1",
"layout": "stack",
"children": [
{
"id": "block-heading",
"instanceId": "hero-heading-r1"
},
{
"id": "block-text",
"instanceId": "hero-sub-r1"
},
{
"id": "block-button",
"instanceId": "hero-cta-r1"
}
]
}
],
"component": "hero-centered@1"
}
]
},
"copy": {
"hero-r1.coverImage": "",
"hero-r1.coverStyle": "",
"hero-r1.coverScrim": "",
"hero-r1.anchor": "",
"hero-r1.navLabel": "",
"hero-r1.navHref": "",
"hero-r1.navSkip": "",
"hero-r1.landmark": "",
"hero-r1.tone": "",
"hero-r1.gutter": "",
"hero-r1.shape": "",
"hero-r1.padding": "",
"hero-r1.sticky": "",
"hero-r1.reveal": "",
"hero-r1.dismissible": "",
"hero-r1.width": "",
"hero-r1.gradient": "",
"hero-body-r1.align": "",
"hero-body-r1.phone": "",
"hero-heading-r1.text": "A headline that says what you do",
"hero-heading-r1.level": "h1",
"hero-sub-r1.text": "One sentence on who this is for and why it matters.",
"hero-sub-r1.textStyle": "",
"hero-cta-r1.label": "Get started",
"hero-cta-r1.href": "#",
"hero-cta-r1.variant": "",
"hero-cta-r1.size": "",
"hero-cta-r1.tone": "",
"hero-cta-r1.width": "",
"hero-cta-r1.icon": "",
"hero-cta-r1.iconOnly": ""
},
"ds": {}
}
src/patterns/hero-centered.registry.ts
ts
import type { SectionRegistry } from '@nersh/render';
import { Component as BlockButton } from '@/sections/block-button/Component';
import { Component as BlockHeading } from '@/sections/block-heading/Component';
import { Component as BlockText } from '@/sections/block-text/Component';
import { Component as LayoutContainer } from '@/sections/layout-container/Component';
import { Component as LayoutSection } from '@/sections/layout-section/Component';
export const registry: SectionRegistry = {
'block-button': BlockButton,
'block-heading': BlockHeading,
'block-text': BlockText,
'layout-container': LayoutContainer,
'layout-section': LayoutSection,
};
src/patterns/HeroCentered.tsx
tsx
"use client";
import { SiteRenderer } from "@nersh/render";
import { registry } from "./hero-centered.registry";
import siteJson from "./hero-centered.site.json";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const site = siteJson as any;
export default function HeroCentered() {
return <SiteRenderer site={site} registry={registry} />;
}
Three cards
src/patterns/features-grid-3.site.json
json
{
"slug": "features-grid-3",
"mode": "builder",
"status": "draft",
"skinId": "zinc",
"composition": {
"id": "features-grid-3",
"sections": [
{
"id": "layout-section",
"instanceId": "features-r1",
"children": [
{
"id": "layout-container",
"instanceId": "features-intro-r1",
"layout": "stack",
"children": [
{
"id": "block-heading",
"instanceId": "features-heading-r1"
},
{
"id": "block-text",
"instanceId": "features-sub-r1"
}
]
},
{
"id": "layout-container",
"instanceId": "features-grid-r1",
"layout": "grid-3",
"children": [
{
"id": "block-card",
"instanceId": "feature-1-r1"
},
{
"id": "block-card",
"instanceId": "feature-2-r1"
},
{
"id": "block-card",
"instanceId": "feature-3-r1"
}
]
}
],
"component": "features-grid-3@1"
}
]
},
"copy": {
"features-r1.coverImage": "",
"features-r1.coverStyle": "",
"features-r1.coverScrim": "",
"features-r1.anchor": "",
"features-r1.navLabel": "",
"features-r1.navHref": "",
"features-r1.navSkip": "",
"features-r1.landmark": "",
"features-r1.tone": "",
"features-r1.gutter": "",
"features-r1.shape": "",
"features-r1.padding": "",
"features-r1.sticky": "",
"features-r1.reveal": "",
"features-r1.dismissible": "",
"features-r1.width": "",
"features-r1.gradient": "",
"features-intro-r1.align": "center",
"features-intro-r1.phone": "",
"features-heading-r1.text": "Features",
"features-heading-r1.level": "",
"features-sub-r1.text": "One sentence that introduces this section.",
"features-sub-r1.textStyle": "",
"features-grid-r1.align": "",
"features-grid-r1.phone": "",
"feature-1-r1.title": "Feature one",
"feature-1-r1.body": "A sentence about this feature.",
"feature-1-r1.href": "",
"feature-1-r1.emphasis": "",
"feature-1-r1.density": "",
"feature-1-r1.align": "center",
"feature-1-r1.icon": "",
"feature-2-r1.title": "Feature two",
"feature-2-r1.body": "A sentence about this feature.",
"feature-2-r1.href": "",
"feature-2-r1.emphasis": "",
"feature-2-r1.density": "",
"feature-2-r1.align": "center",
"feature-2-r1.icon": "",
"feature-3-r1.title": "Feature three",
"feature-3-r1.body": "A sentence about this feature.",
"feature-3-r1.href": "",
"feature-3-r1.emphasis": "",
"feature-3-r1.density": "",
"feature-3-r1.align": "center",
"feature-3-r1.icon": ""
},
"ds": {}
}
src/patterns/features-grid-3.registry.ts
ts
import type { SectionRegistry } from '@nersh/render';
import { Component as BlockCard } from '@/sections/block-card/Component';
import { Component as BlockHeading } from '@/sections/block-heading/Component';
import { Component as BlockText } from '@/sections/block-text/Component';
import { Component as LayoutContainer } from '@/sections/layout-container/Component';
import { Component as LayoutSection } from '@/sections/layout-section/Component';
export const registry: SectionRegistry = {
'block-card': BlockCard,
'block-heading': BlockHeading,
'block-text': BlockText,
'layout-container': LayoutContainer,
'layout-section': LayoutSection,
};
src/patterns/FeaturesGrid3.tsx
tsx
"use client";
import { SiteRenderer } from "@nersh/render";
import { registry } from "./features-grid-3.registry";
import siteJson from "./features-grid-3.site.json";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const site = siteJson as any;
export default function FeaturesGrid3() {
return <SiteRenderer site={site} registry={registry} />;
}
Three tiers, middle highlighted
src/patterns/pricing-three-tier.site.json
json
{
"slug": "pricing-three-tier",
"mode": "builder",
"status": "draft",
"skinId": "zinc",
"composition": {
"id": "pricing-three-tier",
"sections": [
{
"id": "layout-section",
"instanceId": "pricing-band-r1",
"layout": "stack",
"children": [
{
"id": "layout-container",
"instanceId": "pricing-intro-r1",
"layout": "stack",
"children": [
{
"id": "block-heading",
"instanceId": "pricing-heading-r1"
},
{
"id": "block-text",
"instanceId": "pricing-sub-r1"
}
]
},
{
"id": "layout-container",
"instanceId": "pricing-row-r1",
"layout": "grid-3",
"children": [
{
"id": "layout-column",
"instanceId": "tier-1-col-r1",
"span": 4,
"spanAt": {
"lg": 4
},
"children": [
{
"id": "block-card",
"instanceId": "tier-1-card-r1",
"children": [
{
"id": "block-text",
"instanceId": "tier-1-name-r1"
},
{
"id": "block-text",
"instanceId": "tier-1-price-r1"
},
{
"id": "block-text",
"instanceId": "tier-1-desc-r1"
},
{
"id": "block-list",
"instanceId": "tier-1-list-r1"
},
{
"id": "block-button",
"instanceId": "tier-1-cta-r1"
}
]
}
]
},
{
"id": "layout-column",
"instanceId": "tier-2-col-r1",
"span": 4,
"spanAt": {
"lg": 4
},
"children": [
{
"id": "block-card",
"instanceId": "tier-2-card-r1",
"children": [
{
"id": "block-badge",
"instanceId": "tier-2-badge-r1"
},
{
"id": "block-text",
"instanceId": "tier-2-name-r1"
},
{
"id": "block-text",
"instanceId": "tier-2-price-r1"
},
{
"id": "block-text",
"instanceId": "tier-2-desc-r1"
},
{
"id": "block-list",
"instanceId": "tier-2-list-r1"
},
{
"id": "block-button",
"instanceId": "tier-2-cta-r1"
}
]
}
]
},
{
"id": "layout-column",
"instanceId": "tier-3-col-r1",
"span": 4,
"spanAt": {
"lg": 4
},
"children": [
{
"id": "block-card",
"instanceId": "tier-3-card-r1",
"children": [
{
"id": "block-text",
"instanceId": "tier-3-name-r1"
},
{
"id": "block-text",
"instanceId": "tier-3-price-r1"
},
{
"id": "block-text",
"instanceId": "tier-3-desc-r1"
},
{
"id": "block-list",
"instanceId": "tier-3-list-r1"
},
{
"id": "block-button",
"instanceId": "tier-3-cta-r1"
}
]
}
]
}
]
}
],
"component": "pricing-three-tier@2"
}
]
},
"copy": {
"pricing-band-r1.coverImage": "",
"pricing-band-r1.coverStyle": "",
"pricing-band-r1.coverScrim": "",
"pricing-band-r1.anchor": "",
"pricing-band-r1.navLabel": "",
"pricing-band-r1.navHref": "",
"pricing-band-r1.navSkip": "",
"pricing-band-r1.landmark": "",
"pricing-band-r1.tone": "",
"pricing-band-r1.gutter": "",
"pricing-band-r1.shape": "",
"pricing-band-r1.padding": "",
"pricing-band-r1.sticky": "",
"pricing-band-r1.reveal": "",
"pricing-band-r1.dismissible": "",
"pricing-band-r1.width": "",
"pricing-band-r1.gradient": "",
"pricing-intro-r1.align": "center",
"pricing-intro-r1.phone": "",
"pricing-heading-r1.text": "Pricing",
"pricing-heading-r1.level": "h2",
"pricing-sub-r1.text": "One sentence that introduces this section.",
"pricing-sub-r1.textStyle": "",
"pricing-row-r1.align": "",
"pricing-row-r1.phone": "",
"tier-1-col-r1.pad": "",
"tier-1-col-r1.sticky": "",
"tier-1-card-r1.title": "",
"tier-1-card-r1.body": "",
"tier-1-card-r1.href": "",
"tier-1-card-r1.emphasis": "",
"tier-1-card-r1.density": "",
"tier-1-card-r1.align": "center",
"tier-1-card-r1.icon": "",
"tier-1-name-r1.text": "Starter",
"tier-1-name-r1.textStyle": "eyebrow",
"tier-1-price-r1.text": "$0/mo",
"tier-1-price-r1.textStyle": "stat",
"tier-1-desc-r1.text": "A sentence about who this plan is for.",
"tier-1-desc-r1.textStyle": "note",
"tier-1-list-r1.items": "A feature line\nA feature line\nA feature line",
"tier-1-list-r1.marker": "check",
"tier-1-list-r1.size": "sm",
"tier-1-list-r1.markerImage": "",
"tier-1-cta-r1.label": "Choose Starter",
"tier-1-cta-r1.href": "#",
"tier-1-cta-r1.variant": "outline",
"tier-1-cta-r1.size": "",
"tier-1-cta-r1.tone": "",
"tier-1-cta-r1.width": "full",
"tier-1-cta-r1.icon": "",
"tier-1-cta-r1.iconOnly": "",
"tier-2-col-r1.pad": "",
"tier-2-col-r1.sticky": "",
"tier-2-card-r1.title": "",
"tier-2-card-r1.body": "",
"tier-2-card-r1.href": "",
"tier-2-card-r1.emphasis": "true",
"tier-2-card-r1.density": "",
"tier-2-card-r1.align": "center",
"tier-2-card-r1.icon": "",
"tier-2-badge-r1.text": "Most popular",
"tier-2-badge-r1.href": "",
"tier-2-badge-r1.style": "",
"tier-2-badge-r1.placement": "edge",
"tier-2-name-r1.text": "Standard",
"tier-2-name-r1.textStyle": "eyebrow",
"tier-2-price-r1.text": "$29/mo",
"tier-2-price-r1.textStyle": "stat",
"tier-2-desc-r1.text": "A sentence about who this plan is for.",
"tier-2-desc-r1.textStyle": "note",
"tier-2-list-r1.items": "A feature line\nA feature line\nA feature line",
"tier-2-list-r1.marker": "check",
"tier-2-list-r1.size": "sm",
"tier-2-list-r1.markerImage": "",
"tier-2-cta-r1.label": "Choose Standard",
"tier-2-cta-r1.href": "#",
"tier-2-cta-r1.variant": "solid",
"tier-2-cta-r1.size": "",
"tier-2-cta-r1.tone": "",
"tier-2-cta-r1.width": "full",
"tier-2-cta-r1.icon": "",
"tier-2-cta-r1.iconOnly": "",
"tier-3-col-r1.pad": "",
"tier-3-col-r1.sticky": "",
"tier-3-card-r1.title": "",
"tier-3-card-r1.body": "",
"tier-3-card-r1.href": "",
"tier-3-card-r1.emphasis": "",
"tier-3-card-r1.density": "",
"tier-3-card-r1.align": "center",
"tier-3-card-r1.icon": "",
"tier-3-name-r1.text": "Plus",
"tier-3-name-r1.textStyle": "eyebrow",
"tier-3-price-r1.text": "$79/mo",
"tier-3-price-r1.textStyle": "stat",
"tier-3-desc-r1.text": "A sentence about who this plan is for.",
"tier-3-desc-r1.textStyle": "note",
"tier-3-list-r1.items": "A feature line\nA feature line\nA feature line",
"tier-3-list-r1.marker": "check",
"tier-3-list-r1.size": "sm",
"tier-3-list-r1.markerImage": "",
"tier-3-cta-r1.label": "Choose Plus",
"tier-3-cta-r1.href": "#",
"tier-3-cta-r1.variant": "outline",
"tier-3-cta-r1.size": "",
"tier-3-cta-r1.tone": "",
"tier-3-cta-r1.width": "full",
"tier-3-cta-r1.icon": "",
"tier-3-cta-r1.iconOnly": ""
},
"ds": {}
}
src/patterns/pricing-three-tier.registry.ts
ts
import type { SectionRegistry } from '@nersh/render';
import { Component as BlockBadge } from '@/sections/block-badge/Component';
import { Component as BlockButton } from '@/sections/block-button/Component';
import { Component as BlockCard } from '@/sections/block-card/Component';
import { Component as BlockHeading } from '@/sections/block-heading/Component';
import { Component as BlockList } from '@/sections/block-list/Component';
import { Component as BlockText } from '@/sections/block-text/Component';
import { Component as LayoutColumn } from '@/sections/layout-column/Component';
import { Component as LayoutContainer } from '@/sections/layout-container/Component';
import { Component as LayoutSection } from '@/sections/layout-section/Component';
export const registry: SectionRegistry = {
'block-badge': BlockBadge,
'block-button': BlockButton,
'block-card': BlockCard,
'block-heading': BlockHeading,
'block-list': BlockList,
'block-text': BlockText,
'layout-column': LayoutColumn,
'layout-container': LayoutContainer,
'layout-section': LayoutSection,
};
src/patterns/PricingThreeTier.tsx
tsx
"use client";
import { SiteRenderer } from "@nersh/render";
import { registry } from "./pricing-three-tier.registry";
import siteJson from "./pricing-three-tier.site.json";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const site = siteJson as any;
export default function PricingThreeTier() {
return <SiteRenderer site={site} registry={registry} />;
}
Accordion
src/patterns/faq-accordion.site.json
json
{
"slug": "faq-accordion",
"mode": "builder",
"status": "draft",
"skinId": "zinc",
"composition": {
"id": "faq-accordion",
"sections": [
{
"id": "layout-section",
"instanceId": "faq-band-r1",
"layout": "centered",
"children": [
{
"id": "layout-container",
"instanceId": "faq-intro-r1",
"layout": "stack",
"children": [
{
"id": "block-heading",
"instanceId": "faq-heading-r1"
},
{
"id": "block-text",
"instanceId": "faq-sub-r1"
}
]
},
{
"id": "layout-container",
"instanceId": "faq-list-r1",
"layout": "stack",
"children": [
{
"id": "block-accordion",
"instanceId": "faq-accordion-r1"
}
]
}
],
"component": "faq-accordion@1"
}
]
},
"copy": {
"faq-band-r1.coverImage": "",
"faq-band-r1.coverStyle": "",
"faq-band-r1.coverScrim": "",
"faq-band-r1.anchor": "",
"faq-band-r1.navLabel": "",
"faq-band-r1.navHref": "",
"faq-band-r1.navSkip": "",
"faq-band-r1.landmark": "",
"faq-band-r1.tone": "",
"faq-band-r1.gutter": "",
"faq-band-r1.shape": "",
"faq-band-r1.padding": "",
"faq-band-r1.sticky": "",
"faq-band-r1.reveal": "",
"faq-band-r1.dismissible": "",
"faq-band-r1.width": "",
"faq-band-r1.gradient": "",
"faq-intro-r1.align": "center",
"faq-intro-r1.phone": "",
"faq-heading-r1.text": "Frequently asked questions",
"faq-heading-r1.level": "h2",
"faq-sub-r1.text": "One sentence that introduces this section.",
"faq-sub-r1.textStyle": "",
"faq-list-r1.align": "",
"faq-list-r1.phone": "",
"faq-accordion-r1.items": "[{\"question\":\"A common question?\",\"answer\":\"A short, direct answer.\"},{\"question\":\"A common question?\",\"answer\":\"A short, direct answer.\"},{\"question\":\"A common question?\",\"answer\":\"A short, direct answer.\"},{\"question\":\"A common question?\",\"answer\":\"A short, direct answer.\"},{\"question\":\"A common question?\",\"answer\":\"A short, direct answer.\"}]",
"faq-accordion-r1.multiple": ""
},
"ds": {}
}
src/patterns/faq-accordion.registry.ts
ts
import type { SectionRegistry } from '@nersh/render';
import { Component as BlockAccordion } from '@/sections/block-accordion/Component';
import { Component as BlockHeading } from '@/sections/block-heading/Component';
import { Component as BlockText } from '@/sections/block-text/Component';
import { Component as LayoutContainer } from '@/sections/layout-container/Component';
import { Component as LayoutSection } from '@/sections/layout-section/Component';
export const registry: SectionRegistry = {
'block-accordion': BlockAccordion,
'block-heading': BlockHeading,
'block-text': BlockText,
'layout-container': LayoutContainer,
'layout-section': LayoutSection,
};
src/patterns/FaqAccordion.tsx
tsx
"use client";
import { SiteRenderer } from "@nersh/render";
import { registry } from "./faq-accordion.registry";
import siteJson from "./faq-accordion.site.json";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const site = siteJson as any;
export default function FaqAccordion() {
return <SiteRenderer site={site} registry={registry} />;
}
Form beside booking
src/patterns/lead-form-split.site.json
json
{
"slug": "lead-form-split",
"mode": "builder",
"status": "draft",
"skinId": "zinc",
"composition": {
"id": "lead-form-split",
"sections": [
{
"id": "layout-section",
"instanceId": "lead-band-r1",
"layout": "stack",
"children": [
{
"id": "layout-container",
"instanceId": "lead-intro-r1",
"layout": "stack",
"children": [
{
"id": "layout-column",
"instanceId": "lead-intro-col-r1",
"children": [
{
"id": "block-heading",
"instanceId": "lead-heading-r1"
},
{
"id": "block-text",
"instanceId": "lead-sub-r1"
}
]
}
]
},
{
"id": "layout-container",
"instanceId": "lead-row-r1",
"layout": "split-60-40",
"children": [
{
"id": "layout-column",
"instanceId": "lead-form-col-r1",
"span": 7,
"children": [
{
"id": "block-form",
"instanceId": "lead-form-r1",
"children": [
{
"id": "block-input",
"instanceId": "lead-name-r1"
},
{
"id": "block-input",
"instanceId": "lead-phone-r1"
},
{
"id": "block-input",
"instanceId": "lead-email-r1"
},
{
"id": "block-textarea",
"instanceId": "lead-notes-r1"
}
]
}
]
},
{
"id": "layout-column",
"instanceId": "lead-book-col-r1",
"span": 5,
"children": [
{
"id": "block-embed",
"instanceId": "lead-booking-r1"
}
]
}
]
}
],
"component": "lead-form-split@1"
}
]
},
"copy": {
"lead-band-r1.coverImage": "",
"lead-band-r1.coverStyle": "",
"lead-band-r1.coverScrim": "",
"lead-band-r1.anchor": "contact",
"lead-band-r1.navLabel": "",
"lead-band-r1.navHref": "",
"lead-band-r1.navSkip": "",
"lead-band-r1.landmark": "",
"lead-band-r1.tone": "",
"lead-band-r1.gutter": "",
"lead-band-r1.shape": "",
"lead-band-r1.padding": "",
"lead-band-r1.sticky": "",
"lead-band-r1.reveal": "",
"lead-band-r1.dismissible": "",
"lead-band-r1.width": "",
"lead-band-r1.gradient": "",
"lead-intro-r1.align": "center",
"lead-intro-r1.phone": "",
"lead-intro-col-r1.pad": "",
"lead-intro-col-r1.sticky": "",
"lead-heading-r1.text": "Get in touch",
"lead-heading-r1.level": "h2",
"lead-sub-r1.text": "One sentence on what happens after someone writes in.",
"lead-sub-r1.textStyle": "",
"lead-row-r1.align": "",
"lead-row-r1.phone": "",
"lead-form-col-r1.pad": "",
"lead-form-col-r1.sticky": "",
"lead-form-r1.submitLabel": "Send",
"lead-form-r1.email": "",
"lead-form-r1.successMessage": "Thanks. We will be in touch soon.",
"lead-name-r1.label": "Name",
"lead-name-r1.name": "name",
"lead-name-r1.inputType": "text",
"lead-name-r1.placeholder": "",
"lead-name-r1.required": "true",
"lead-phone-r1.label": "Phone",
"lead-phone-r1.name": "phone",
"lead-phone-r1.inputType": "tel",
"lead-phone-r1.placeholder": "(555) 555-5555",
"lead-phone-r1.required": "",
"lead-email-r1.label": "Email",
"lead-email-r1.name": "email",
"lead-email-r1.inputType": "email",
"lead-email-r1.placeholder": "",
"lead-email-r1.required": "true",
"lead-notes-r1.label": "What do you need?",
"lead-notes-r1.name": "notes",
"lead-notes-r1.placeholder": "",
"lead-notes-r1.required": "false",
"lead-book-col-r1.pad": "",
"lead-book-col-r1.sticky": "",
"lead-booking-r1.url": "",
"lead-booking-r1.title": "Book a time",
"lead-booking-r1.kind": ""
},
"ds": {}
}
src/patterns/lead-form-split.registry.ts
ts
import type { SectionRegistry } from '@nersh/render';
import { Component as BlockEmbed } from '@/sections/block-embed/Component';
import { Component as BlockForm } from '@/sections/block-form/Component';
import { Component as BlockHeading } from '@/sections/block-heading/Component';
import { Component as BlockInput } from '@/sections/block-input/Component';
import { Component as BlockText } from '@/sections/block-text/Component';
import { Component as BlockTextarea } from '@/sections/block-textarea/Component';
import { Component as LayoutColumn } from '@/sections/layout-column/Component';
import { Component as LayoutContainer } from '@/sections/layout-container/Component';
import { Component as LayoutSection } from '@/sections/layout-section/Component';
export const registry: SectionRegistry = {
'block-embed': BlockEmbed,
'block-form': BlockForm,
'block-heading': BlockHeading,
'block-input': BlockInput,
'block-text': BlockText,
'block-textarea': BlockTextarea,
'layout-column': LayoutColumn,
'layout-container': LayoutContainer,
'layout-section': LayoutSection,
};
src/patterns/LeadFormSplit.tsx
tsx
"use client";
import { SiteRenderer } from "@nersh/render";
import { registry } from "./lead-form-split.registry";
import siteJson from "./lead-form-split.site.json";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const site = siteJson as any;
export default function LeadFormSplit() {
return <SiteRenderer site={site} registry={registry} />;
}
Three columns
src/patterns/footer-columns.site.json
json
{
"slug": "footer-columns",
"mode": "builder",
"status": "draft",
"skinId": "zinc",
"composition": {
"id": "footer-columns",
"sections": [
{
"id": "layout-section",
"instanceId": "footer-band-r1",
"fullBleed": true,
"children": [
{
"id": "layout-container",
"instanceId": "footer-grid-r1",
"layout": "grid-3",
"children": [
{
"id": "layout-column",
"instanceId": "footer-brand-col-r1",
"span": 4,
"children": [
{
"id": "block-brand",
"instanceId": "footer-brand-r1"
}
]
},
{
"id": "layout-column",
"instanceId": "footer-links-col-r1",
"span": 4,
"children": [
{
"id": "block-link-group",
"instanceId": "footer-links-r1"
}
]
},
{
"id": "layout-column",
"instanceId": "footer-contact-col-r1",
"span": 4,
"children": [
{
"id": "block-link-group",
"instanceId": "footer-contact-r1"
},
{
"id": "block-text",
"instanceId": "footer-hours-r1"
},
{
"id": "block-link-group",
"instanceId": "footer-social-links-r1"
}
]
}
]
}
],
"component": "footer-columns@1"
}
]
},
"copy": {
"footer-band-r1.coverImage": "",
"footer-band-r1.coverStyle": "",
"footer-band-r1.coverScrim": "",
"footer-band-r1.anchor": "",
"footer-band-r1.navLabel": "",
"footer-band-r1.navHref": "",
"footer-band-r1.navSkip": "true",
"footer-band-r1.landmark": "footer",
"footer-band-r1.tone": "muted",
"footer-band-r1.gutter": "",
"footer-band-r1.shape": "",
"footer-band-r1.padding": "",
"footer-band-r1.sticky": "",
"footer-band-r1.reveal": "",
"footer-band-r1.dismissible": "",
"footer-band-r1.width": "",
"footer-band-r1.gradient": "",
"footer-grid-r1.align": "",
"footer-grid-r1.phone": "",
"footer-brand-col-r1.pad": "",
"footer-brand-col-r1.sticky": "",
"footer-brand-r1.wordmark": "Your Company",
"footer-brand-r1.wordmarkAccent": "",
"footer-brand-r1.logoImage": "",
"footer-brand-r1.tagline": "A one-line description of what you do.",
"footer-brand-r1.href": "#",
"footer-links-col-r1.pad": "",
"footer-links-col-r1.sticky": "",
"footer-links-r1.title": "Company",
"footer-links-r1.links": "[{\"label\":\"Home\",\"href\":\"#\"},{\"label\":\"About\",\"href\":\"#about\"},{\"label\":\"Services\",\"href\":\"#services\"},{\"label\":\"Contact\",\"href\":\"#contact\"}]",
"footer-links-r1.direction": "",
"footer-links-r1.icons": "",
"footer-contact-col-r1.pad": "",
"footer-contact-col-r1.sticky": "",
"footer-contact-r1.title": "Contact",
"footer-contact-r1.links": "[{\"label\":\"(555) 555-0100\",\"href\":\"tel:+15555550100\"},{\"label\":\"hello@yourcompany.com\",\"href\":\"mailto:hello@yourcompany.com\"}]",
"footer-contact-r1.direction": "",
"footer-contact-r1.icons": "",
"footer-hours-r1.text": "City, ST",
"footer-hours-r1.textStyle": "note",
"footer-social-links-r1.title": "",
"footer-social-links-r1.links": "",
"footer-social-links-r1.direction": "row",
"footer-social-links-r1.icons": "social"
},
"ds": {}
}
src/patterns/footer-columns.registry.ts
ts
import type { SectionRegistry } from '@nersh/render';
import { Component as BlockBrand } from '@/sections/block-brand/Component';
import { Component as BlockLinkGroup } from '@/sections/block-link-group/Component';
import { Component as BlockText } from '@/sections/block-text/Component';
import { Component as LayoutColumn } from '@/sections/layout-column/Component';
import { Component as LayoutContainer } from '@/sections/layout-container/Component';
import { Component as LayoutSection } from '@/sections/layout-section/Component';
export const registry: SectionRegistry = {
'block-brand': BlockBrand,
'block-link-group': BlockLinkGroup,
'block-text': BlockText,
'layout-column': LayoutColumn,
'layout-container': LayoutContainer,
'layout-section': LayoutSection,
};
src/patterns/FooterColumns.tsx
tsx
"use client";
import { SiteRenderer } from "@nersh/render";
import { registry } from "./footer-columns.registry";
import siteJson from "./footer-columns.site.json";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const site = siteJson as any;
export default function FooterColumns() {
return <SiteRenderer site={site} registry={registry} />;
}
