Homepage Proven Method

File: sections/homepage-proven-method.liquid

Templates: index.json

Description

Homepage Proven Method

Full-viewport homepage section explaining the Monroe Institute’s methodology, featuring a headline, description, an animated SVG brainwave illustration, and a two-column feature breakdown. Scroll-triggered SVG path drawing on viewport entry.

Features:

• Centered headline, subheadline, and rich text description
• Animated SVG brainwave paths that draw from right to left on viewport entry
• Two-column feature grid with configurable text alignment
• Responsive layout (stacks to single column on mobile)

Settings:

• headline (text) — Main headline, default “A PROVEN METHOD”
• subheadline (text) — Subheadline text
• description (richtext) — Description paragraph

Blocks:

• feature: A feature column with the following settings:
  • title (text) — Feature title
  • description (textarea) — Feature description
  • text_alignment (select) — Left, center, or right alignment

Snippets Used: None

Dependencies:

• Inline CSS for clamp-based typography and SVG styling
• Inline JavaScript for SVG path draw animation and Intersection Observer

Tailwind Status: Partial Layout uses Tailwind utilities (flex, grid, max-w-container-lg, font-gotham, text-mi-green, text-mi-black). Typography sizing and SVG styling use custom CSS in an inline style block.

Settings

ID	Type	Label	Default	Info
headline	text	Main Headline	A PROVEN METHOD
subheadline	text	Subheadline	TO ACCESS ALTERED STATES SAFELY AND RELIABLY
description	richtext	Description	<p>For over five decades, the Monroe Institute has refined a proven method for expanding human consciousness, combining precise audio technology with a structured, research-based process for personal transformation.</p>

Blocks

Feature

• Type: feature

ID	Type	Label	Default
title	text	Feature Title	Neural Entrainment
description	textarea	Feature Description	Our proprietary Monroe Sound Science uses binaural and multi-layered frequencies to gently synchronize brainwaves, guiding you into deeper, expanded states of awareness.
text_alignment	select	Text Alignment	left

Presets

• Homepage Proven Method

Usage

This section can be added via the Shopify theme editor.

{% section 'homepage-proven-method' %}