Nuxt 4 base project
Hybrid.
Parallax meets Grid — one markdown file per locale, all the design in the page's stylesheet.
Scroll
01 — Grid inside parallax
Left Column
This content lives inside a GridCell with size="6,4" — 6 columns on desktop, 4 on mobile. The grid system handles responsive sizing automatically.
Right Column
Both columns sit inside a GridContainer, which is itself an MDC block. The gutter and centering come from the grid mixins — no custom CSS needed.
On authoring
Grid layout and parallax effects in one file, authored entirely in markdown.
— This Markdown File
02 — Horizontal scroll
Two-Column Panel
This is a parallax section that scrolls horizontally — and its content respects the grid system. The wide prop removes the max-width constraint.
Grid Inside Parallax
Each column aligns to the same grid as the rest of the page. Resize the window to see responsive behavior inside the horizontal scroll.
04 — Panoramic #background · 01 / 03
The background pans
Slide 1 — left column content sits on top of the panning background.
04 — Panoramic #background · 02 / 03
The grid still holds
Slide 2 — right column; the panorama keeps sliding under the text.
04 — Panoramic #background · 03 / 03
One video, three slides
Slide 3 — centered block as the panorama reaches its right edge.
The end
That's the hybrid
Parallax sections with grid layouts, horizontal scrolling, and quotes — all authored in one markdown file per locale.