Arc Market 77 · Product storefront
28 lines · 1 page · Frontend only
View code v1-commerce-0077
Create page shop containing header, product_grid, cart_bar with viewport fill, background #f8fafc, padding 26 pixels, gap 22 pixels.
Create container header containing shop_title, shop_copy with gap 8 pixels.
Create heading shop_title displaying "Arc Market 77" with font size 34 pixels, font weight 800.
Create text shop_copy displaying "Objects selected for useful, beautiful everyday living." with text color #64748b.
Create container product_grid containing product_one, product_two, product_three with layout grid, grid columns 3, gap 18 pixels.
Create card product_one containing product_one_name, product_one_price, add_one with padding 22 pixels, gap 10 pixels, background white, border radius 12 pixels.
Create heading product_one_name displaying "Studio chair" with font size 20 pixels.
Create text product_one_price displaying "$44" with text color #047857, font weight 700.
Create button add_one displaying "Add to cart" with background #047857, text color white, padding 10 pixels, border radius 8 pixels.
Create card product_two containing product_two_name, product_two_price, add_two with padding 22 pixels, gap 10 pixels, background white, border radius 12 pixels.
Create heading product_two_name displaying "Ceramic lamp" with font size 20 pixels.
Create text product_two_price displaying "$44" with text color #047857, font weight 700.
Create button add_two displaying "Add to cart" with background #047857, text color white, padding 10 pixels, border radius 8 pixels.
Create card product_three containing product_three_name, product_three_price, add_three with padding 22 pixels, gap 10 pixels, background white, border radius 12 pixels.
Create heading product_three_name displaying "Leather folio" with font size 20 pixels.
Create text product_three_price displaying "$44" with text color #047857, font weight 700.
Create button add_three displaying "Add to cart" with background #047857, text color white, padding 10 pixels, border radius 8 pixels.
Create container cart_bar containing cart_label, cart_count, clear_cart with direction horizontal, alignment center, distribution between, padding 18 pixels, background #0f172a, text color white, border radius 12 pixels.
Create text cart_label displaying "Cart" with text color white.
Create heading cart_count with text color white, font size 24 pixels.
Create state cart with value 0.
cart_count displays state cart.
When add_one is clicked, increase cart by 1.
When add_two is clicked, increase cart by 1.
When add_three is clicked, increase cart by 1.
Create button clear_cart displaying "Clear" with background transparent, text color white, padding 8 pixels.
When clear_cart is clicked, set cart to 0.
On screens below 760 pixels, product_grid grid columns is 1.