Homepage Gateway Voyage

File: sections/homepage-gateway-voyage.liquid

Templates: index.json

Description

Homepage Gateway Voyage

Split-screen homepage section with a cosmic illustration on the left and text content on the right. The left panel contains an auto-advancing slideshow of 4 content blocks with vertical slide transitions, left/right arrow navigation, and a subtle progress bar showing time until next advance.

Features:

• Left panel: full-height background image with overlay slideshow
• 4 overlay content blocks with vertical slide-up/down transitions
• Blurred preview of non-active slides
• Auto-advances every 6 seconds, pauses on hover
• Left/right arrow buttons for manual navigation
• Progress bar at bottom of left panel shows auto-advance countdown
• Content 1 (right panel): headline, subheadline, description, two CTAs
• Right panel entrance animations via Intersection Observer
• Mobile (<=1024px): stacks vertically

Settings:

• background_image (image_picker) — Cosmic background image for left panel
• headline (text) — Content 1 headline
• subheadline (text) — Content 1 subheadline
• description (richtext) — Content 1 description
• cta_1_text / cta_1_link — Button 1
• cta_2_text / cta_2_link — Button 2
• description_2_regular, description_2_emphasis — Content 2 fields
• description_3_regular, description_3_emphasis — Content 3 fields
• description_4_part1, description_4_emphasis, description_4_part2 — Content 4
• description_5_part1, description_5_emphasis, description_5_part2 — Content 5

Snippets Used:

• section-heading, button

Tailwind Status: None (all styling via inline BEM CSS)

Settings

ID	Type	Label	Default	Info
background_image	image_picker	Cosmic Background Image		Upload the cosmic illustration with planet, glowing ring, and human figure
headline	text	Headline	GATEWAY VOYAGE
subheadline	text	Subheadline	YOUR JOURNEY BEYOND THE PHYSICAL BEGINS HERE
description	richtext	Description	<p>Gateway Voyage Virtual is the most accessible way to experience Monroe’s proven methods, guided by the voice of our founder, Robert A. Monroe. This immersive program introduces expanded states of consciousness through Monroe Sound Science — helping you move beyond the five senses while staying fully aware and grounded.</p>
“	header
cta_1_text	text	Button 1 Text	In-Person
cta_1_link	url	Button 1 Link
“	header
cta_2_text	text	Button 2 Text	Virtual
cta_2_link	url	Button 2 Link
“	header
description_2_regular	text	Slide 1 - Regular Text	Deepen self-awareness
description_2_emphasis	text	Slide 1 - Emphasized Text	and experience your multidimensional nature.
show_separator	checkbox	Show Separator Line (Slide 1)	true
“	header
description_3_regular	text	Slide 2 - Regular Text	Maintain full consciousness in expanded states, bringing back
description_3_emphasis	text	Slide 2 - Emphasized Text	insights and guidance.
show_separator_3	checkbox	Show Separator Line (Slide 2)	true
“	header
description_4_part1	text	Slide 3 - Part 1 (Regular)	Strengthen your
description_4_emphasis	text	Slide 3 - Emphasized Text	intuitive and perceptual abilities
description_4_part2	text	Slide 3 - Part 2 (Regular)	to navigate life with greater clarity.
show_separator_4	checkbox	Show Separator Line (Slide 3)	true
“	header
description_5_part1	text	Slide 4 - Part 1 (Regular)	Reclaim a sense of
description_5_emphasis	text	Slide 4 - Emphasized Text	purpose and presence
description_5_part2	text	Slide 4 - Part 2 (Regular)	that permeates your everyday reality.
show_separator_5	checkbox	Show Separator Line (Slide 4)	true

Presets

• Homepage Gateway Voyage

Usage

This section can be added via the Shopify theme editor.

{% section 'homepage-gateway-voyage' %}