Monument · Multi-page application
40 lines · 3 pages · Frontend only
View code v1-multipage-apps-0033
Create page home containing home_nav, hero with viewport fill, background white, padding 28 pixels, gap 24 pixels.
Create navigation home_nav containing home_brand, about_link, contact_link with direction horizontal, distribution between, alignment center.
Create heading home_brand displaying "Monument" with font size 22 pixels, font weight 800, text color #0f766e.
Create button about_link displaying "About" with background transparent, text color #0f172a, padding 10 pixels.
When about_link is clicked, navigate to about.
Create button contact_link displaying "Contact" with background #0f766e, text color white, padding 10 pixels, border radius 8 pixels.
When contact_link is clicked, navigate to contact.
Create section hero containing hero_title, hero_copy, hero_action with alignment center, distribution center, gap 16 pixels, minimum height 560 pixels.
Create heading hero_title displaying "Build a clearer path forward 33" with font size 48 pixels, text alignment center, maximum width 760 pixels.
Create text hero_copy displaying "Strategy, design, and delivery for ambitious teams." with font size 18 pixels, text alignment center.
Create button hero_action displaying "Meet the studio" with background #0f766e, text color white, padding 13 pixels, border radius 9 pixels.
When hero_action is clicked, navigate to about.
Create page about containing about_title, about_copy, values, about_back with viewport fill, background #f8fafc, padding 36 pixels, gap 24 pixels.
Create heading about_title displaying "About Monument" with font size 38 pixels.
Create text about_copy displaying "We combine research, systems thinking, and careful execution." with font size 18 pixels, maximum width 720 pixels.
Create container values containing value_one, value_two, value_three with layout grid, grid columns 3, gap 16 pixels.
Create card value_one containing value_one_title, value_one_copy with padding 20 pixels, background white, gap 8 pixels.
Create heading value_one_title displaying "Clarity" with font size 20 pixels.
Create text value_one_copy displaying "Make the important thing obvious.".
Create card value_two containing value_two_title, value_two_copy with padding 20 pixels, background white, gap 8 pixels.
Create heading value_two_title displaying "Care" with font size 20 pixels.
Create text value_two_copy displaying "Sweat details users can feel.".
Create card value_three containing value_three_title, value_three_copy with padding 20 pixels, background white, gap 8 pixels.
Create heading value_three_title displaying "Momentum" with font size 20 pixels.
Create text value_three_copy displaying "Turn decisions into working outcomes.".
Create button about_back displaying "Back home" with background #0f766e, text color white, padding 10 pixels.
When about_back is clicked, navigate to home.
Create page contact containing contact_title, contact_form, contact_back with viewport fill, background #0f172a, text color white, padding 36 pixels, gap 20 pixels.
Create heading contact_title displaying "Start conversation 33" with font size 38 pixels, text color white.
Create form contact_form containing email_input, message_input, send_button with direction vertical, gap 12 pixels, maximum width 640 pixels.
Create input email_input with placeholder "Email address".
email_input input type is email.
email_input is required.
Create textarea message_input with placeholder "Tell us about the project".
message_input is required.
Create button send_button displaying "Send inquiry" with background #0f766e, text color white, padding 12 pixels.
send_button submits form.
Create button contact_back displaying "Back home" with background transparent, text color white, padding 10 pixels.
When contact_back is clicked, navigate to home.
On screens below 720 pixels, values grid columns is 1.