Skip to content

LANGUAGE V1 · FROZEN REFERENCE

Example library

2,000 results · Page 85 of 167

multipage-apps

Forma · Multi-page application

40 lines · 3 pages · Frontend only

FormsInteractionsResponsive
View code v1-multipage-apps-0009
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 "Forma" with font size 22 pixels, font weight 800, text color #0369a1.
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 #0369a1, 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 9" 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 #0369a1, 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 Forma" 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 #0369a1, 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 9" 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 #0369a1, 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.
multipage-apps

Morrow · Multi-page application

40 lines · 3 pages · Frontend only

FormsInteractionsResponsive
View code v1-multipage-apps-0010
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 "Morrow" with font size 22 pixels, font weight 800, text color #4f46e5.
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 #4f46e5, 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 10" 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 #4f46e5, 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 Morrow" 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 #4f46e5, 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 10" 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 #4f46e5, 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.
multipage-apps

Halcyon · Multi-page application

40 lines · 3 pages · Frontend only

FormsInteractionsResponsive
View code v1-multipage-apps-0011
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 "Halcyon" with font size 22 pixels, font weight 800, text color #7c3aed.
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 #7c3aed, 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 11" 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 #7c3aed, 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 Halcyon" 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 #7c3aed, 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 11" 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 #7c3aed, 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.
multipage-apps

Orbit · Multi-page application

40 lines · 3 pages · Frontend only

FormsInteractionsResponsive
View code v1-multipage-apps-0012
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 "Orbit" with font size 22 pixels, font weight 800, text color #2563eb.
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 #2563eb, 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 12" 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 #2563eb, 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 Orbit" 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 #2563eb, 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 12" 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 #2563eb, 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.
multipage-apps

Monument · Multi-page application

40 lines · 3 pages · Frontend only

FormsInteractionsResponsive
View code v1-multipage-apps-0013
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 13" 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 13" 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.
multipage-apps

Kindred · Multi-page application

40 lines · 3 pages · Frontend only

FormsInteractionsResponsive
View code v1-multipage-apps-0014
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 "Kindred" with font size 22 pixels, font weight 800, text color #be123c.
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 #be123c, 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 14" 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 #be123c, 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 Kindred" 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 #be123c, 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 14" 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 #be123c, 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.
multipage-apps

Juniper · Multi-page application

40 lines · 3 pages · Frontend only

FormsInteractionsResponsive
View code v1-multipage-apps-0015
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 "Juniper" with font size 22 pixels, font weight 800, text color #b45309.
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 #b45309, 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 15" 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 #b45309, 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 Juniper" 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 #b45309, 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 15" 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 #b45309, 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.
multipage-apps

Solace · Multi-page application

40 lines · 3 pages · Frontend only

FormsInteractionsResponsive
View code v1-multipage-apps-0016
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 "Solace" with font size 22 pixels, font weight 800, text color #4338ca.
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 #4338ca, 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 16" 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 #4338ca, 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 Solace" 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 #4338ca, 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 16" 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 #4338ca, 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.
multipage-apps

Arc · Multi-page application

40 lines · 3 pages · Frontend only

FormsInteractionsResponsive
View code v1-multipage-apps-0017
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 "Arc" with font size 22 pixels, font weight 800, text color #047857.
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 #047857, 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 17" 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 #047857, 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 Arc" 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 #047857, 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 17" 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 #047857, 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.
multipage-apps

Vesper · Multi-page application

40 lines · 3 pages · Frontend only

FormsInteractionsResponsive
View code v1-multipage-apps-0018
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 "Vesper" with font size 22 pixels, font weight 800, text color #c026d3.
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 #c026d3, 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 18" 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 #c026d3, 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 Vesper" 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 #c026d3, 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 18" 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 #c026d3, 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.
multipage-apps

Fieldwork · Multi-page application

40 lines · 3 pages · Frontend only

FormsInteractionsResponsive
View code v1-multipage-apps-0019
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 "Fieldwork" with font size 22 pixels, font weight 800, text color #0369a1.
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 #0369a1, 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 19" 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 #0369a1, 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 Fieldwork" 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 #0369a1, 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 19" 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 #0369a1, 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.
multipage-apps

Ember · Multi-page application

40 lines · 3 pages · Frontend only

FormsInteractionsResponsive
View code v1-multipage-apps-0020
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 "Ember" with font size 22 pixels, font weight 800, text color #4f46e5.
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 #4f46e5, 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 20" 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 #4f46e5, 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 Ember" 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 #4f46e5, 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 20" 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 #4f46e5, 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.