Block Content
If an image is added as a header background, the styles automatically change to white with dark overlay. View the child page for the fallback header style.
Content built in Gutenberg is accessed through the WordPress REST API and displayed using Next.js’s hybrid rendering strategy. Static sections are generated during build, while interactive elements and live embeds take advantage of Incremental Static Regeneration to keep pages fresh without requiring full rebuilds.
- Data is delivered as JSON and mapped into React components for flexible rendering.
- Images are served through
next/image, giving you automatic optimization with responsive resizing, lazy loading, and smart placeholders. - Styling is handled block by block with scoped Tailwind utility classes or CSS-in-JS, ensuring lightweight output and instant style application.
Visit a Child Page
The site’s routing reflects the CMS page hierarchy: parent entries become primary routes, while child pages are automatically nested beneath them. Next.js handles the mapping, ensuring clean, predictable URLs.
Add an image to enhance this section
Flexible, Reusable, and Performance-Focused Content
Gutenberg block patterns—like hero banners, feature grids, or testimonial sliders—are transformed into modular React components. Add a block in the editor, and Next.js automatically renders it with the right properties.
Why it matters: Editors enjoy a drag-and-drop, visual workflow, while developers deliver lean, reusable components that follow DRY principles.
- Heading blocks map to semantic
<h1>–<h6>elements with responsive typography. - Paragraph blocks handle styled text, inline links, and markdown-like formatting.
- List blocks output proper
<ul>/<ol>markup with Tailwind-based spacing and hierarchy. - Media blocks leverage
next/imagefor adaptive resizing, lazy-loading, and automatic format conversion (WebP, AVIF).
Advanced CTA Components
Call-to-action blocks can go beyond simple buttons—supporting icons, background video, and even conditional logic tied to user location. Behind the scenes, React components integrate with A/B testing frameworks or personalization data to adapt in real time.
- Iconography powered by
react-iconsor inline SVGs imported with SVGR. - Dynamic styling that adjusts to user preferences, such as dark mode or high-contrast accessibility.
This is a Complex CTA Block
This is what we call ... headless.
Featured Highlight Blocks
Use a Featured block to showcase a product or service with a hero image, headline, and short description. In Next.js, these sections are prerendered at build time, delivering fast-loading hero areas that grab attention immediately.
Graceful and sophisticated fallbacks
Pure CSS and SVG fallbacks for a more professional development experience.
Add an image to enhance this section