Audit the content model
Confirm the page schema, supported blocks, and any referenced documents that the homepage will need.
Content-heavy pages, still easy to manage.
A live homepage rebuilt to exercise the Sanity schema.
This first slide demonstrates the overlay hero, rotating background images, multi-button CTAs, and rich text copy inside the hero itself.
It is intentionally written like a reference section so future editors can see how much can be configured from Sanity without changing React components.
Mix long-form copy, media, and conversion points.
Left-image hero example
Left-image heroes are useful when the visual supports the message but should not overpower the copy.
This variation gives space for explanation, reinforces the design system, and points visitors deeper into the site structure.
Search, browse, and explore from the first screen.
Right-image hero with site search enabled
The final slide shows the opposite layout and turns on the hero search bar to demonstrate discovery-focused content patterns.
That makes this page useful both as a sales surface and as a living catalogue of supported homepage configurations.
What This Homepage Demonstrates
A schema reference, not just a splash page.
This homepage intentionally combines many supported block types into one editable canvas. That makes it a practical example page for future builds, QA, and content onboarding.
Editors can swap copy, imagery, CTA destinations, and section order directly in Sanity while the frontend keeps rendering everything through the existing page and block queries.
- Three hero variants are shown in one block: overlay, left image, and right image.
- Portable text is used for headings, paragraphs, lists, quotes, and linked copy.
- Cards, accordions, image blocks, carousels, video embeds, stats, timelines, logos, forms, modules, and nested sections all appear below.
- The goal is not minimalism. The goal is to expose the full shape of the content model in a way the team can reuse.
The CMS layer for these examples is powered by Sanity Content Lake, so every section on this page is live structured content rather than hardcoded markup.
Use this page as a working library of patterns now, then prune it into a sharper production homepage later.
Feature Card Matrix
Dense Portable Text
Portable text is where editors can go long: narrative copy, bullets, quotes, and structured emphasis all live in the same field.
That makes it easy to ship educational homepages, not just brief marketing blurbs.
Reusable Section Shells
Every section is wrapped in the same empty-block shell, which means backdrops, padding, layout, spacing, and heading behavior stay consistent.
That shell is also nestable, so teams can create inner panels without introducing new schema types.
Media + Video
Image blocks, carousels, and video embeds can all sit beside text-heavy copy to break up long pages without sacrificing editorial depth.
This is useful for service explainers, case studies, and campaign landing pages.
Forms + Submission Storage
The page includes a live form block tied to an existing form document, plus a module example that surfaces its saved submissions back on the homepage.
That makes this page a working demonstration of both capture and display.
Module-style Feeds
Module macros are usually used for structured collections, but this example also shows how they can expose saved submission entries from a form document.
The same component can present that data in multiple layouts, including grids and carousels.
Media Layout Examples
Three columns, three content modes.
This section intentionally combines long-form copy, a standalone image block, and a playable video embed inside a single grid. That helps editors understand how mixed media behaves inside the shared section shell.
- Column one holds editorial explanation and ordered information.
- Column two shows an image block with caption and alt text.
- Column three embeds a public video URL with a styled preview state.
The point is to show how dense a homepage can become while still staying modular and structured.
Video embed example using a public YouTube URL.
Nested Section Example
Nested blocks let you create reusable inner panels without inventing a brand-new top-level schema every time.
The inner example below has its own heading, padding, backdrop, and block stack. That makes it useful for comparison panels, editorial callouts, FAQ clusters, or campaign-specific inserts inside a broader page.
Nested Comparison Panel
This inner section is still built from the same schema.
It is useful when the page needs a sub-story with its own visual container, but the content team should still stay inside the existing landing page builder.
Because it is still structured content, you can reorder or replace the nested elements without rewriting the renderer.
When should a section be nested?
Nest when a group of elements needs its own backdrop or heading but still belongs inside a larger parent narrative.
Why not create a new schema for every use case?
Reusable shells keep the editing experience simpler and reduce frontend complexity when the existing composition model already covers the need.
What belongs inside nested blocks?
Text, accordions, cards, media, forms, and other existing content blocks can all be grouped into a smaller reusable panel.
Common Homepage Questions
Why rebuild the homepage to be this content heavy?
Because a dense reference page makes it easier to see every supported block type and choose patterns for future pages without guessing.
Is this meant to stay as the public homepage forever?
Not necessarily. It can serve as a content and QA reference first, then be trimmed into a more focused marketing page once the preferred patterns are established.
Are the links and forms on this page real?
Yes. The CTAs point at live page documents and the form block references an existing form document already stored in Sanity.
Can editors reorder these sections later?
Yes. The landing page content field is an ordered array of section shells, so editors can add, remove, or rearrange sections in Sanity.
Does this page include reusable examples for designers and developers?
That is the main purpose. It gives everyone a shared reference for layout, copy density, media usage, and conversion patterns.
Can module feeds appear on a homepage too?
Yes. This rebuild includes module macro examples that surface saved submission data from the existing form document in multiple layouts.
Gallery, Motion, and Marquee Examples
Visual blocks help break up long editorial sections without abandoning structure.
Below, the image carousel and logo marquee are used as pure presentation examples. They are useful for case study imagery, partner logos, campaign art, or supporting proof points.
Example logo marquee
Metrics and Outcome Examples
Stats blocks work well when the homepage needs a quick layer of proof between long-form sections.
These numbers are demo content, but they show how prefixes, suffixes, decimal values, and different column counts render inside the current component.
Animated metrics example
<0Weeks to a first usable launch
0+Homepage content patterns shown here
0xHero configurations in one block
0.0%Structured through Sanity content
Process Timeline Variations
The steps block supports both horizontal and vertical presentation styles.
Showing both on one page gives the team a quick reference for when to use a more editorial alternating timeline versus a straightforward stacked process.
Horizontal process example
1
2
Assemble the reference layout
Choose sections that demonstrate breadth rather than minimalism so the page becomes a real pattern library.
Load content through the API
Use the Sanity mutation endpoint to patch the live document instead of hardcoding examples in source files.
3
4
Trim later with confidence
Once the team has approved the preferred patterns, remove extra sections and keep the strongest combinations.
Vertical process example
1
Narrative intro
Open with a clear explanation of why the page exists and what visitors can do next.
2
Supporting proof
Layer in cards, stats, FAQs, and media so the page earns attention instead of demanding it.
3
Conversion path
Provide a live form, strong CTAs, and any supporting submission or module feeds.
4
Reference value
Keep enough configuration variety on the page that it remains useful for editors and developers after launch.
Live Form Example
This form block references the existing Contact us form document already stored in Sanity.
Leaving a live form example on the homepage gives the team a quick way to test rendering, field ordering, styling, and saved submission behavior after future schema changes.
Contact us
Page 1 of 3
Module Feed Examples
The module macro examples below reuse saved submission entries from the same form document in two different layouts.
That gives the homepage a real example of content being captured in one place and surfaced again elsewhere through a structured module component.
input: Aaron
selectField: Value4
checkbox: true
textArea: Yes
dateRangeElement: [object Object]
dateElement: 2026-04-14
input: y
selectField: Value1
textArea: g
checkbox: true
dateElement: 2026-04-14
input: yes
selectField: Value2
checkbox: true
textArea: e
dateElement: 2026-03-30
Closing Call To Action
Keep this page as a working content library, then simplify it when the preferred patterns are clear.
Right now the homepage is doing a useful job: proving that the schema, the live Sanity data, and the existing renderers can support a very broad range of editorial and conversion scenarios.
Turn the reference page into a production homepage later
When the team is ready, the same section system can be narrowed into a tighter public-facing story without throwing away the content model or the examples you used to get there.