diff --git a/public/img/adidas-real-deal-damien-lillard-hirere-black1-blapur-1x1.jpg b/public/img/adidas-real-deal-damien-lillard-hirere-black1-blapur-1x1.jpg deleted file mode 100644 index ff20532..0000000 Binary files a/public/img/adidas-real-deal-damien-lillard-hirere-black1-blapur-1x1.jpg and /dev/null differ diff --git a/public/img/adidas-real-deal-damien-lillard-hirere-black1-blapur.png b/public/img/adidas-real-deal-damien-lillard-hirere-black1-blapur.png deleted file mode 100644 index 2aecfc3..0000000 Binary files a/public/img/adidas-real-deal-damien-lillard-hirere-black1-blapur.png and /dev/null differ diff --git a/public/img/app-icon.png b/public/img/app-icon.png deleted file mode 100644 index 4f500de..0000000 Binary files a/public/img/app-icon.png and /dev/null differ diff --git a/public/img/apple-icon-white.png b/public/img/apple-icon-white.png deleted file mode 100644 index 4506205..0000000 Binary files a/public/img/apple-icon-white.png and /dev/null differ diff --git a/public/img/apple-icon.png b/public/img/apple-icon.png deleted file mode 100644 index 4129456..0000000 Binary files a/public/img/apple-icon.png and /dev/null differ diff --git a/public/img/apple-watch-2.png b/public/img/apple-watch-2.png deleted file mode 100644 index b88d108..0000000 Binary files a/public/img/apple-watch-2.png and /dev/null differ diff --git a/public/img/bosco-shots-ZoEdO0G0xmI-unsplash.png b/public/img/bosco-shots-ZoEdO0G0xmI-unsplash.png deleted file mode 100644 index 4bd3a28..0000000 Binary files a/public/img/bosco-shots-ZoEdO0G0xmI-unsplash.png and /dev/null differ diff --git a/public/img/browser-white.png b/public/img/browser-white.png deleted file mode 100644 index 81b6103..0000000 Binary files a/public/img/browser-white.png and /dev/null differ diff --git a/public/img/browser.png b/public/img/browser.png deleted file mode 100644 index c974fc0..0000000 Binary files a/public/img/browser.png and /dev/null differ diff --git a/public/img/catalog/avatars/beverage-can-presenter-avatar.png b/public/img/catalog/avatars/beverage-can-presenter-avatar.png new file mode 100644 index 0000000..7a86458 Binary files /dev/null and b/public/img/catalog/avatars/beverage-can-presenter-avatar.png differ diff --git a/public/img/catalog/avatars/headphones-presenter-avatar.png b/public/img/catalog/avatars/headphones-presenter-avatar.png new file mode 100644 index 0000000..1859430 Binary files /dev/null and b/public/img/catalog/avatars/headphones-presenter-avatar.png differ diff --git a/public/img/catalog/avatars/skincare-presenter-avatar.png b/public/img/catalog/avatars/skincare-presenter-avatar.png new file mode 100644 index 0000000..bd2064b Binary files /dev/null and b/public/img/catalog/avatars/skincare-presenter-avatar.png differ diff --git a/public/img/catalog/avatars/sneaker-presenter-avatar.png b/public/img/catalog/avatars/sneaker-presenter-avatar.png new file mode 100644 index 0000000..2603916 Binary files /dev/null and b/public/img/catalog/avatars/sneaker-presenter-avatar.png differ diff --git a/public/img/catalog/avatars/speaker-presenter-avatar.png b/public/img/catalog/avatars/speaker-presenter-avatar.png new file mode 100644 index 0000000..1bee12b Binary files /dev/null and b/public/img/catalog/avatars/speaker-presenter-avatar.png differ diff --git a/public/img/catalog/avatars/travel-mug-presenter-avatar.png b/public/img/catalog/avatars/travel-mug-presenter-avatar.png new file mode 100644 index 0000000..7f94534 Binary files /dev/null and b/public/img/catalog/avatars/travel-mug-presenter-avatar.png differ diff --git a/public/img/catalog/backgrounds/gradient-orbs.png b/public/img/catalog/backgrounds/gradient-orbs.png new file mode 100644 index 0000000..48a157b Binary files /dev/null and b/public/img/catalog/backgrounds/gradient-orbs.png differ diff --git a/public/img/catalog/backgrounds/gradient-ribbons.png b/public/img/catalog/backgrounds/gradient-ribbons.png new file mode 100644 index 0000000..0f05e55 Binary files /dev/null and b/public/img/catalog/backgrounds/gradient-ribbons.png differ diff --git a/public/img/catalog/backgrounds/gradient-waves.png b/public/img/catalog/backgrounds/gradient-waves.png new file mode 100644 index 0000000..953d8f3 Binary files /dev/null and b/public/img/catalog/backgrounds/gradient-waves.png differ diff --git a/public/img/apple.png b/public/img/catalog/brands/apple.png similarity index 100% rename from public/img/apple.png rename to public/img/catalog/brands/apple.png diff --git a/public/img/bose.png b/public/img/catalog/brands/bose.png similarity index 100% rename from public/img/bose.png rename to public/img/catalog/brands/bose.png diff --git a/public/img/coca-cola.png b/public/img/catalog/brands/coca-cola.png similarity index 100% rename from public/img/coca-cola.png rename to public/img/catalog/brands/coca-cola.png diff --git a/public/img/facebook.png b/public/img/catalog/brands/facebook.png similarity index 100% rename from public/img/facebook.png rename to public/img/catalog/brands/facebook.png diff --git a/public/img/google.png b/public/img/catalog/brands/google.png similarity index 100% rename from public/img/google.png rename to public/img/catalog/brands/google.png diff --git a/public/img/microsoft.png b/public/img/catalog/brands/microsoft.png similarity index 100% rename from public/img/microsoft.png rename to public/img/catalog/brands/microsoft.png diff --git a/public/img/spotify.png b/public/img/catalog/brands/spotify.png similarity index 100% rename from public/img/spotify.png rename to public/img/catalog/brands/spotify.png diff --git a/public/img/xbox.png b/public/img/catalog/brands/xbox.png similarity index 100% rename from public/img/xbox.png rename to public/img/catalog/brands/xbox.png diff --git a/public/img/catalog/devices/gamepad.png b/public/img/catalog/devices/gamepad.png new file mode 100644 index 0000000..051592e Binary files /dev/null and b/public/img/catalog/devices/gamepad.png differ diff --git a/public/img/catalog/devices/gaming-mouse.png b/public/img/catalog/devices/gaming-mouse.png new file mode 100644 index 0000000..ff48b32 Binary files /dev/null and b/public/img/catalog/devices/gaming-mouse.png differ diff --git a/public/img/catalog/devices/handheld-console.png b/public/img/catalog/devices/handheld-console.png new file mode 100644 index 0000000..6be1516 Binary files /dev/null and b/public/img/catalog/devices/handheld-console.png differ diff --git a/public/img/catalog/devices/mechanical-keyboard.png b/public/img/catalog/devices/mechanical-keyboard.png new file mode 100644 index 0000000..de72de6 Binary files /dev/null and b/public/img/catalog/devices/mechanical-keyboard.png differ diff --git a/public/img/catalog/devices/mini-pc.png b/public/img/catalog/devices/mini-pc.png new file mode 100644 index 0000000..0d495dc Binary files /dev/null and b/public/img/catalog/devices/mini-pc.png differ diff --git a/public/img/catalog/devices/usb-microphone.png b/public/img/catalog/devices/usb-microphone.png new file mode 100644 index 0000000..a2f7982 Binary files /dev/null and b/public/img/catalog/devices/usb-microphone.png differ diff --git a/public/img/catalog/devices/vr-headset-kit.png b/public/img/catalog/devices/vr-headset-kit.png new file mode 100644 index 0000000..a5de4d4 Binary files /dev/null and b/public/img/catalog/devices/vr-headset-kit.png differ diff --git a/public/img/catalog/devices/webcam.png b/public/img/catalog/devices/webcam.png new file mode 100644 index 0000000..2b41c43 Binary files /dev/null and b/public/img/catalog/devices/webcam.png differ diff --git a/public/img/catalog/fashion-travel/bomber-jacket.png b/public/img/catalog/fashion-travel/bomber-jacket.png new file mode 100644 index 0000000..f2cc5fe Binary files /dev/null and b/public/img/catalog/fashion-travel/bomber-jacket.png differ diff --git a/public/img/catalog/fashion-travel/carry-on-suitcase.png b/public/img/catalog/fashion-travel/carry-on-suitcase.png new file mode 100644 index 0000000..477a75e Binary files /dev/null and b/public/img/catalog/fashion-travel/carry-on-suitcase.png differ diff --git a/public/img/catalog/fashion-travel/check-in-suitcase.png b/public/img/catalog/fashion-travel/check-in-suitcase.png new file mode 100644 index 0000000..ddea588 Binary files /dev/null and b/public/img/catalog/fashion-travel/check-in-suitcase.png differ diff --git a/public/img/catalog/fashion-travel/city-backpack.png b/public/img/catalog/fashion-travel/city-backpack.png new file mode 100644 index 0000000..d38a38f Binary files /dev/null and b/public/img/catalog/fashion-travel/city-backpack.png differ diff --git a/public/img/catalog/fashion-travel/puffer-jacket.png b/public/img/catalog/fashion-travel/puffer-jacket.png new file mode 100644 index 0000000..d4ef368 Binary files /dev/null and b/public/img/catalog/fashion-travel/puffer-jacket.png differ diff --git a/public/img/catalog/fashion-travel/tote-bag.png b/public/img/catalog/fashion-travel/tote-bag.png new file mode 100644 index 0000000..1a42a67 Binary files /dev/null and b/public/img/catalog/fashion-travel/tote-bag.png differ diff --git a/public/img/catalog/fashion-travel/trench-coat.png b/public/img/catalog/fashion-travel/trench-coat.png new file mode 100644 index 0000000..f8ab846 Binary files /dev/null and b/public/img/catalog/fashion-travel/trench-coat.png differ diff --git a/public/img/catalog/fashion-travel/weekend-duffel.png b/public/img/catalog/fashion-travel/weekend-duffel.png new file mode 100644 index 0000000..1506ac0 Binary files /dev/null and b/public/img/catalog/fashion-travel/weekend-duffel.png differ diff --git a/public/img/catalog/presenters/beverage-can-presenter.png b/public/img/catalog/presenters/beverage-can-presenter.png new file mode 100644 index 0000000..ef11cdc Binary files /dev/null and b/public/img/catalog/presenters/beverage-can-presenter.png differ diff --git a/public/img/catalog/presenters/headphones-presenter.png b/public/img/catalog/presenters/headphones-presenter.png new file mode 100644 index 0000000..2159821 Binary files /dev/null and b/public/img/catalog/presenters/headphones-presenter.png differ diff --git a/public/img/catalog/presenters/skincare-presenter.png b/public/img/catalog/presenters/skincare-presenter.png new file mode 100644 index 0000000..8ce75bc Binary files /dev/null and b/public/img/catalog/presenters/skincare-presenter.png differ diff --git a/public/img/catalog/presenters/sneaker-presenter.png b/public/img/catalog/presenters/sneaker-presenter.png new file mode 100644 index 0000000..37a1772 Binary files /dev/null and b/public/img/catalog/presenters/sneaker-presenter.png differ diff --git a/public/img/catalog/presenters/speaker-presenter.png b/public/img/catalog/presenters/speaker-presenter.png new file mode 100644 index 0000000..68883a4 Binary files /dev/null and b/public/img/catalog/presenters/speaker-presenter.png differ diff --git a/public/img/catalog/presenters/travel-mug-presenter.png b/public/img/catalog/presenters/travel-mug-presenter.png new file mode 100644 index 0000000..b286cb0 Binary files /dev/null and b/public/img/catalog/presenters/travel-mug-presenter.png differ diff --git a/public/img/catalog/products/beverage-can.png b/public/img/catalog/products/beverage-can.png new file mode 100644 index 0000000..9dcc50a Binary files /dev/null and b/public/img/catalog/products/beverage-can.png differ diff --git a/public/img/catalog/products/headphones.png b/public/img/catalog/products/headphones.png new file mode 100644 index 0000000..9215cce Binary files /dev/null and b/public/img/catalog/products/headphones.png differ diff --git a/public/img/catalog/products/skincare-bottle.png b/public/img/catalog/products/skincare-bottle.png new file mode 100644 index 0000000..e5f8817 Binary files /dev/null and b/public/img/catalog/products/skincare-bottle.png differ diff --git a/public/img/catalog/products/sneaker.png b/public/img/catalog/products/sneaker.png new file mode 100644 index 0000000..2c63a1f Binary files /dev/null and b/public/img/catalog/products/sneaker.png differ diff --git a/public/img/catalog/products/travel-mug.png b/public/img/catalog/products/travel-mug.png new file mode 100644 index 0000000..41ee6d0 Binary files /dev/null and b/public/img/catalog/products/travel-mug.png differ diff --git a/public/img/catalog/products/wireless-speaker.png b/public/img/catalog/products/wireless-speaker.png new file mode 100644 index 0000000..be13a01 Binary files /dev/null and b/public/img/catalog/products/wireless-speaker.png differ diff --git a/public/img/coffee-white.png b/public/img/coffee-white.png deleted file mode 100644 index f2d2e70..0000000 Binary files a/public/img/coffee-white.png and /dev/null differ diff --git a/public/img/coffee.png b/public/img/coffee.png deleted file mode 100644 index 72a319e..0000000 Binary files a/public/img/coffee.png and /dev/null differ diff --git a/public/img/components/content-1.png b/public/img/components/content-1.png index 8043f48..c794eb4 100644 Binary files a/public/img/components/content-1.png and b/public/img/components/content-1.png differ diff --git a/public/img/components/content-10.png b/public/img/components/content-10.png new file mode 100644 index 0000000..0ce2118 Binary files /dev/null and b/public/img/components/content-10.png differ diff --git a/public/img/components/content-11.png b/public/img/components/content-11.png new file mode 100644 index 0000000..d777258 Binary files /dev/null and b/public/img/components/content-11.png differ diff --git a/public/img/components/content-12.png b/public/img/components/content-12.png new file mode 100644 index 0000000..fe80b95 Binary files /dev/null and b/public/img/components/content-12.png differ diff --git a/public/img/components/content-13.png b/public/img/components/content-13.png new file mode 100644 index 0000000..9525f8b Binary files /dev/null and b/public/img/components/content-13.png differ diff --git a/public/img/components/content-14.png b/public/img/components/content-14.png new file mode 100644 index 0000000..56e341e Binary files /dev/null and b/public/img/components/content-14.png differ diff --git a/public/img/components/content-15.png b/public/img/components/content-15.png new file mode 100644 index 0000000..86467d5 Binary files /dev/null and b/public/img/components/content-15.png differ diff --git a/public/img/components/content-16.png b/public/img/components/content-16.png new file mode 100644 index 0000000..178be81 Binary files /dev/null and b/public/img/components/content-16.png differ diff --git a/public/img/components/content-2.png b/public/img/components/content-2.png index d62aef1..ef1bfe1 100644 Binary files a/public/img/components/content-2.png and b/public/img/components/content-2.png differ diff --git a/public/img/components/content-3.png b/public/img/components/content-3.png index 3a6b763..9c8d9c6 100644 Binary files a/public/img/components/content-3.png and b/public/img/components/content-3.png differ diff --git a/public/img/components/content-4.png b/public/img/components/content-4.png index a970896..86af8b3 100644 Binary files a/public/img/components/content-4.png and b/public/img/components/content-4.png differ diff --git a/public/img/components/content-5.png b/public/img/components/content-5.png index ff2da48..9b53b20 100644 Binary files a/public/img/components/content-5.png and b/public/img/components/content-5.png differ diff --git a/public/img/components/content-6.png b/public/img/components/content-6.png index 1f02e25..86cd325 100644 Binary files a/public/img/components/content-6.png and b/public/img/components/content-6.png differ diff --git a/public/img/components/content-7.png b/public/img/components/content-7.png index 58af1fa..a3055d3 100644 Binary files a/public/img/components/content-7.png and b/public/img/components/content-7.png differ diff --git a/public/img/components/content-8.png b/public/img/components/content-8.png index 59b324e..c3d1deb 100644 Binary files a/public/img/components/content-8.png and b/public/img/components/content-8.png differ diff --git a/public/img/components/content-9.png b/public/img/components/content-9.png index 166923e..5295a7c 100644 Binary files a/public/img/components/content-9.png and b/public/img/components/content-9.png differ diff --git a/public/img/components/cta-1.png b/public/img/components/cta-1.png index aafc972..2fc096d 100644 Binary files a/public/img/components/cta-1.png and b/public/img/components/cta-1.png differ diff --git a/public/img/components/cta-10.png b/public/img/components/cta-10.png new file mode 100644 index 0000000..5d16ec6 Binary files /dev/null and b/public/img/components/cta-10.png differ diff --git a/public/img/components/cta-11.png b/public/img/components/cta-11.png new file mode 100644 index 0000000..47867c3 Binary files /dev/null and b/public/img/components/cta-11.png differ diff --git a/public/img/components/cta-12.png b/public/img/components/cta-12.png new file mode 100644 index 0000000..a0f5d63 Binary files /dev/null and b/public/img/components/cta-12.png differ diff --git a/public/img/components/cta-2.png b/public/img/components/cta-2.png index 2a8bae8..6fbd1b2 100644 Binary files a/public/img/components/cta-2.png and b/public/img/components/cta-2.png differ diff --git a/public/img/components/cta-3.png b/public/img/components/cta-3.png index 7b913eb..dca59fc 100644 Binary files a/public/img/components/cta-3.png and b/public/img/components/cta-3.png differ diff --git a/public/img/components/cta-4.png b/public/img/components/cta-4.png index cb6f391..8e784dd 100644 Binary files a/public/img/components/cta-4.png and b/public/img/components/cta-4.png differ diff --git a/public/img/components/cta-5.png b/public/img/components/cta-5.png index e91e112..aded49f 100644 Binary files a/public/img/components/cta-5.png and b/public/img/components/cta-5.png differ diff --git a/public/img/components/cta-6.png b/public/img/components/cta-6.png index 213235d..566b2e9 100644 Binary files a/public/img/components/cta-6.png and b/public/img/components/cta-6.png differ diff --git a/public/img/components/cta-7.png b/public/img/components/cta-7.png new file mode 100644 index 0000000..84722d7 Binary files /dev/null and b/public/img/components/cta-7.png differ diff --git a/public/img/components/cta-8.png b/public/img/components/cta-8.png new file mode 100644 index 0000000..4d3233b Binary files /dev/null and b/public/img/components/cta-8.png differ diff --git a/public/img/components/cta-9.png b/public/img/components/cta-9.png new file mode 100644 index 0000000..009fd61 Binary files /dev/null and b/public/img/components/cta-9.png differ diff --git a/public/img/components/ecommerce-1.png b/public/img/components/ecommerce-1.png index 0acc79e..c49d6dd 100644 Binary files a/public/img/components/ecommerce-1.png and b/public/img/components/ecommerce-1.png differ diff --git a/public/img/components/ecommerce-2.png b/public/img/components/ecommerce-2.png index 0dfee00..dd5eff3 100644 Binary files a/public/img/components/ecommerce-2.png and b/public/img/components/ecommerce-2.png differ diff --git a/public/img/components/ecommerce-3.png b/public/img/components/ecommerce-3.png index a8acaf1..b22e671 100644 Binary files a/public/img/components/ecommerce-3.png and b/public/img/components/ecommerce-3.png differ diff --git a/public/img/components/ecommerce-4.png b/public/img/components/ecommerce-4.png index caed2df..3bce5da 100644 Binary files a/public/img/components/ecommerce-4.png and b/public/img/components/ecommerce-4.png differ diff --git a/public/img/components/ecommerce-5.png b/public/img/components/ecommerce-5.png index a2141b5..fb0ffa4 100644 Binary files a/public/img/components/ecommerce-5.png and b/public/img/components/ecommerce-5.png differ diff --git a/public/img/components/ecommerce-6.png b/public/img/components/ecommerce-6.png new file mode 100644 index 0000000..71ac773 Binary files /dev/null and b/public/img/components/ecommerce-6.png differ diff --git a/public/img/components/ecommerce-7.png b/public/img/components/ecommerce-7.png new file mode 100644 index 0000000..40c6b23 Binary files /dev/null and b/public/img/components/ecommerce-7.png differ diff --git a/public/img/components/feature-1.png b/public/img/components/feature-1.png index 1e55ead..a0547f0 100644 Binary files a/public/img/components/feature-1.png and b/public/img/components/feature-1.png differ diff --git a/public/img/components/feature-2.png b/public/img/components/feature-2.png index 21e9670..3e61469 100644 Binary files a/public/img/components/feature-2.png and b/public/img/components/feature-2.png differ diff --git a/public/img/components/feature-3.png b/public/img/components/feature-3.png index de02a50..f3f2d95 100644 Binary files a/public/img/components/feature-3.png and b/public/img/components/feature-3.png differ diff --git a/public/img/components/feature-4.png b/public/img/components/feature-4.png index 619cfdb..0c37a98 100644 Binary files a/public/img/components/feature-4.png and b/public/img/components/feature-4.png differ diff --git a/public/img/components/feature-5.png b/public/img/components/feature-5.png index d2fc5bc..236afad 100644 Binary files a/public/img/components/feature-5.png and b/public/img/components/feature-5.png differ diff --git a/public/img/components/feature-6.png b/public/img/components/feature-6.png index ca24fde..aa7a572 100644 Binary files a/public/img/components/feature-6.png and b/public/img/components/feature-6.png differ diff --git a/public/img/components/feature-7.png b/public/img/components/feature-7.png new file mode 100644 index 0000000..374e355 Binary files /dev/null and b/public/img/components/feature-7.png differ diff --git a/public/img/components/feature-8.png b/public/img/components/feature-8.png new file mode 100644 index 0000000..e955372 Binary files /dev/null and b/public/img/components/feature-8.png differ diff --git a/public/img/components/footer-1-dark.png b/public/img/components/footer-1-dark.png index ab82a0f..aa1502a 100644 Binary files a/public/img/components/footer-1-dark.png and b/public/img/components/footer-1-dark.png differ diff --git a/public/img/components/footer-1-light.png b/public/img/components/footer-1-light.png index f30b598..0e323df 100644 Binary files a/public/img/components/footer-1-light.png and b/public/img/components/footer-1-light.png differ diff --git a/public/img/components/footer-2-dark.png b/public/img/components/footer-2-dark.png index 6951fbc..380cdba 100644 Binary files a/public/img/components/footer-2-dark.png and b/public/img/components/footer-2-dark.png differ diff --git a/public/img/components/footer-2-light.png b/public/img/components/footer-2-light.png index 4527c47..8c38fdc 100644 Binary files a/public/img/components/footer-2-light.png and b/public/img/components/footer-2-light.png differ diff --git a/public/img/components/footer-3-dark.png b/public/img/components/footer-3-dark.png index 1bb18f9..390f396 100644 Binary files a/public/img/components/footer-3-dark.png and b/public/img/components/footer-3-dark.png differ diff --git a/public/img/components/footer-3-light.png b/public/img/components/footer-3-light.png index 9e56223..fc83691 100644 Binary files a/public/img/components/footer-3-light.png and b/public/img/components/footer-3-light.png differ diff --git a/public/img/components/footer-4-dark.png b/public/img/components/footer-4-dark.png index e146c03..75a6e92 100644 Binary files a/public/img/components/footer-4-dark.png and b/public/img/components/footer-4-dark.png differ diff --git a/public/img/components/footer-4-light.png b/public/img/components/footer-4-light.png index 1448b19..69ef1c7 100644 Binary files a/public/img/components/footer-4-light.png and b/public/img/components/footer-4-light.png differ diff --git a/public/img/components/header-1.png b/public/img/components/header-1.png index b13fd05..61abe4c 100644 Binary files a/public/img/components/header-1.png and b/public/img/components/header-1.png differ diff --git a/public/img/components/header-10.png b/public/img/components/header-10.png new file mode 100644 index 0000000..8f2a53c Binary files /dev/null and b/public/img/components/header-10.png differ diff --git a/public/img/components/header-2.png b/public/img/components/header-2.png index 9eca4ca..3b3a375 100644 Binary files a/public/img/components/header-2.png and b/public/img/components/header-2.png differ diff --git a/public/img/components/header-3.png b/public/img/components/header-3.png index 276d3b2..f123120 100644 Binary files a/public/img/components/header-3.png and b/public/img/components/header-3.png differ diff --git a/public/img/components/header-4.png b/public/img/components/header-4.png index 30fa389..86f0ce2 100644 Binary files a/public/img/components/header-4.png and b/public/img/components/header-4.png differ diff --git a/public/img/components/header-5.png b/public/img/components/header-5.png index c970898..5ec8f39 100644 Binary files a/public/img/components/header-5.png and b/public/img/components/header-5.png differ diff --git a/public/img/components/header-6.png b/public/img/components/header-6.png index e6684e3..143aa6a 100644 Binary files a/public/img/components/header-6.png and b/public/img/components/header-6.png differ diff --git a/public/img/components/header-7.png b/public/img/components/header-7.png new file mode 100644 index 0000000..4275586 Binary files /dev/null and b/public/img/components/header-7.png differ diff --git a/public/img/components/header-8.png b/public/img/components/header-8.png new file mode 100644 index 0000000..cf886d2 Binary files /dev/null and b/public/img/components/header-8.png differ diff --git a/public/img/components/header-9.png b/public/img/components/header-9.png new file mode 100644 index 0000000..772e35d Binary files /dev/null and b/public/img/components/header-9.png differ diff --git a/public/img/components/menu-1-dark.jpg b/public/img/components/menu-1-dark.jpg deleted file mode 100644 index 56a0657..0000000 Binary files a/public/img/components/menu-1-dark.jpg and /dev/null differ diff --git a/public/img/components/menu-1-dark.png b/public/img/components/menu-1-dark.png index d58be7e..f7f1dbf 100644 Binary files a/public/img/components/menu-1-dark.png and b/public/img/components/menu-1-dark.png differ diff --git a/public/img/components/menu-1-light.jpg b/public/img/components/menu-1-light.jpg deleted file mode 100644 index bb53115..0000000 Binary files a/public/img/components/menu-1-light.jpg and /dev/null differ diff --git a/public/img/components/menu-1-light.png b/public/img/components/menu-1-light.png index c101fa7..3c030d9 100644 Binary files a/public/img/components/menu-1-light.png and b/public/img/components/menu-1-light.png differ diff --git a/public/img/components/menu-2-dark.jpg b/public/img/components/menu-2-dark.jpg deleted file mode 100644 index b3ae8e4..0000000 Binary files a/public/img/components/menu-2-dark.jpg and /dev/null differ diff --git a/public/img/components/menu-2-dark.png b/public/img/components/menu-2-dark.png index 39750eb..329c7d4 100644 Binary files a/public/img/components/menu-2-dark.png and b/public/img/components/menu-2-dark.png differ diff --git a/public/img/components/menu-2-light.jpg b/public/img/components/menu-2-light.jpg deleted file mode 100644 index 6051fee..0000000 Binary files a/public/img/components/menu-2-light.jpg and /dev/null differ diff --git a/public/img/components/menu-2-light.png b/public/img/components/menu-2-light.png index a9cdfb8..2d89ffa 100644 Binary files a/public/img/components/menu-2-light.png and b/public/img/components/menu-2-light.png differ diff --git a/public/img/components/menu-3-dark.png b/public/img/components/menu-3-dark.png index b15493b..67204ef 100644 Binary files a/public/img/components/menu-3-dark.png and b/public/img/components/menu-3-dark.png differ diff --git a/public/img/components/menu-3-light.png b/public/img/components/menu-3-light.png index 038e724..e9b3787 100644 Binary files a/public/img/components/menu-3-light.png and b/public/img/components/menu-3-light.png differ diff --git a/public/img/components/menu-4-dark.jpg b/public/img/components/menu-4-dark.jpg deleted file mode 100644 index f9e838a..0000000 Binary files a/public/img/components/menu-4-dark.jpg and /dev/null differ diff --git a/public/img/components/menu-4-dark.png b/public/img/components/menu-4-dark.png index 86e3bd0..0c0d00c 100644 Binary files a/public/img/components/menu-4-dark.png and b/public/img/components/menu-4-dark.png differ diff --git a/public/img/components/menu-4-light.jpg b/public/img/components/menu-4-light.jpg deleted file mode 100644 index 41d3e1c..0000000 Binary files a/public/img/components/menu-4-light.jpg and /dev/null differ diff --git a/public/img/components/menu-4-light.png b/public/img/components/menu-4-light.png index ccb553b..433e9f7 100644 Binary files a/public/img/components/menu-4-light.png and b/public/img/components/menu-4-light.png differ diff --git a/public/img/components/menu-5-dark.jpg b/public/img/components/menu-5-dark.jpg deleted file mode 100644 index c1ab034..0000000 Binary files a/public/img/components/menu-5-dark.jpg and /dev/null differ diff --git a/public/img/components/menu-5-dark.png b/public/img/components/menu-5-dark.png deleted file mode 100644 index bff6c5b..0000000 Binary files a/public/img/components/menu-5-dark.png and /dev/null differ diff --git a/public/img/components/menu-5-light.jpg b/public/img/components/menu-5-light.jpg deleted file mode 100644 index c5ab1dd..0000000 Binary files a/public/img/components/menu-5-light.jpg and /dev/null differ diff --git a/public/img/components/menu-5-light.png b/public/img/components/menu-5-light.png deleted file mode 100644 index eb3f0da..0000000 Binary files a/public/img/components/menu-5-light.png and /dev/null differ diff --git a/public/img/components/transactional-1.png b/public/img/components/transactional-1.png new file mode 100644 index 0000000..54db1b8 Binary files /dev/null and b/public/img/components/transactional-1.png differ diff --git a/public/img/components/transactional-2.png b/public/img/components/transactional-2.png new file mode 100644 index 0000000..c3c648a Binary files /dev/null and b/public/img/components/transactional-2.png differ diff --git a/public/img/components/transactional-3.png b/public/img/components/transactional-3.png new file mode 100644 index 0000000..1a62cab Binary files /dev/null and b/public/img/components/transactional-3.png differ diff --git a/public/img/components/transactional-4.png b/public/img/components/transactional-4.png new file mode 100644 index 0000000..b4b8eb2 Binary files /dev/null and b/public/img/components/transactional-4.png differ diff --git a/public/img/components/transactional-5.png b/public/img/components/transactional-5.png new file mode 100644 index 0000000..5a3f1f6 Binary files /dev/null and b/public/img/components/transactional-5.png differ diff --git a/public/img/components/transactional-6.png b/public/img/components/transactional-6.png new file mode 100644 index 0000000..fc66304 Binary files /dev/null and b/public/img/components/transactional-6.png differ diff --git a/public/img/components/transactional-7.png b/public/img/components/transactional-7.png new file mode 100644 index 0000000..ce9f1f8 Binary files /dev/null and b/public/img/components/transactional-7.png differ diff --git a/public/img/components/transactional-8.png b/public/img/components/transactional-8.png new file mode 100644 index 0000000..8311acf Binary files /dev/null and b/public/img/components/transactional-8.png differ diff --git a/public/img/components/transactional-9.png b/public/img/components/transactional-9.png new file mode 100644 index 0000000..efcd91e Binary files /dev/null and b/public/img/components/transactional-9.png differ diff --git a/public/img/development-white.png b/public/img/development-white.png deleted file mode 100644 index 157d194..0000000 Binary files a/public/img/development-white.png and /dev/null differ diff --git a/public/img/development.png b/public/img/development.png deleted file mode 100644 index 0c6ea2f..0000000 Binary files a/public/img/development.png and /dev/null differ diff --git a/public/img/diesel-watch-1x1.jpg b/public/img/diesel-watch-1x1.jpg deleted file mode 100644 index de6c8e2..0000000 Binary files a/public/img/diesel-watch-1x1.jpg and /dev/null differ diff --git a/public/img/game-controller-white.png b/public/img/game-controller-white.png deleted file mode 100644 index 3862565..0000000 Binary files a/public/img/game-controller-white.png and /dev/null differ diff --git a/public/img/game-controller.png b/public/img/game-controller.png deleted file mode 100644 index f9da3ee..0000000 Binary files a/public/img/game-controller.png and /dev/null differ diff --git a/public/img/iphone-angle.jpg b/public/img/iphone-angle.jpg deleted file mode 100644 index 5724812..0000000 Binary files a/public/img/iphone-angle.jpg and /dev/null differ diff --git a/public/img/ipod-white.png b/public/img/ipod-white.png deleted file mode 100644 index a09fe5d..0000000 Binary files a/public/img/ipod-white.png and /dev/null differ diff --git a/public/img/ipod.png b/public/img/ipod.png deleted file mode 100644 index 0ca2a5c..0000000 Binary files a/public/img/ipod.png and /dev/null differ diff --git a/public/img/jack-finnigan-rriAI0nhcbc-unsplash.jpg b/public/img/jack-finnigan-rriAI0nhcbc-unsplash.jpg deleted file mode 100644 index eae781a..0000000 Binary files a/public/img/jack-finnigan-rriAI0nhcbc-unsplash.jpg and /dev/null differ diff --git a/public/img/jefferson-santos-9SoCnyQmkzI-unsplash.jpg b/public/img/jefferson-santos-9SoCnyQmkzI-unsplash.jpg deleted file mode 100644 index bf22c33..0000000 Binary files a/public/img/jefferson-santos-9SoCnyQmkzI-unsplash.jpg and /dev/null differ diff --git a/public/img/johannes-andersson-v5gGwubKzEA-unsplash.jpg b/public/img/johannes-andersson-v5gGwubKzEA-unsplash.jpg deleted file mode 100644 index e929a1a..0000000 Binary files a/public/img/johannes-andersson-v5gGwubKzEA-unsplash.jpg and /dev/null differ diff --git a/public/img/josh-nuttall-pIwu5XNvXpk-unsplash.png b/public/img/josh-nuttall-pIwu5XNvXpk-unsplash.png deleted file mode 100644 index 7e0bc53..0000000 Binary files a/public/img/josh-nuttall-pIwu5XNvXpk-unsplash.png and /dev/null differ diff --git a/public/img/juja-han-HU-uL54pfQI-unsplash.jpg b/public/img/juja-han-HU-uL54pfQI-unsplash.jpg deleted file mode 100644 index 6b0490c..0000000 Binary files a/public/img/juja-han-HU-uL54pfQI-unsplash.jpg and /dev/null differ diff --git a/public/img/mbp-13-space.png b/public/img/mbp-13-space.png deleted file mode 100644 index c38d370..0000000 Binary files a/public/img/mbp-13-space.png and /dev/null differ diff --git a/public/img/photo-1482424917728-d82d29662023.jpeg b/public/img/photo-1482424917728-d82d29662023.jpeg deleted file mode 100644 index 4d0869d..0000000 Binary files a/public/img/photo-1482424917728-d82d29662023.jpeg and /dev/null differ diff --git a/public/img/play-button-white.png b/public/img/play-button-white.png deleted file mode 100644 index de2e745..0000000 Binary files a/public/img/play-button-white.png and /dev/null differ diff --git a/public/img/ruslan-bardash-4kTbAMRAHtQ-unsplash.png b/public/img/ruslan-bardash-4kTbAMRAHtQ-unsplash.png deleted file mode 100644 index 81e5c3d..0000000 Binary files a/public/img/ruslan-bardash-4kTbAMRAHtQ-unsplash.png and /dev/null differ diff --git a/public/img/service-white.png b/public/img/service-white.png deleted file mode 100644 index 5801aa1..0000000 Binary files a/public/img/service-white.png and /dev/null differ diff --git a/public/img/service.png b/public/img/service.png deleted file mode 100644 index 411be29..0000000 Binary files a/public/img/service.png and /dev/null differ diff --git a/public/img/simon-migaj-Yui5vfKHuzs-unsplash.jpg b/public/img/simon-migaj-Yui5vfKHuzs-unsplash.jpg deleted file mode 100644 index 89e75d8..0000000 Binary files a/public/img/simon-migaj-Yui5vfKHuzs-unsplash.jpg and /dev/null differ diff --git a/public/img/dnd-icon.svg b/public/img/system/editor/dnd-icon.svg similarity index 100% rename from public/img/dnd-icon.svg rename to public/img/system/editor/dnd-icon.svg diff --git a/public/img/logo-black.png b/public/img/system/logos/logo-black.png similarity index 100% rename from public/img/logo-black.png rename to public/img/system/logos/logo-black.png diff --git a/public/img/logo-white.png b/public/img/system/logos/logo-white.png similarity index 100% rename from public/img/logo-white.png rename to public/img/system/logos/logo-white.png diff --git a/public/img/footer-facebook-black.png b/public/img/system/social/footer/footer-facebook-black.png similarity index 100% rename from public/img/footer-facebook-black.png rename to public/img/system/social/footer/footer-facebook-black.png diff --git a/public/img/footer-facebook-white.png b/public/img/system/social/footer/footer-facebook-white.png similarity index 100% rename from public/img/footer-facebook-white.png rename to public/img/system/social/footer/footer-facebook-white.png diff --git a/public/img/footer-instagram-black.png b/public/img/system/social/footer/footer-instagram-black.png similarity index 100% rename from public/img/footer-instagram-black.png rename to public/img/system/social/footer/footer-instagram-black.png diff --git a/public/img/footer-instagram-white.png b/public/img/system/social/footer/footer-instagram-white.png similarity index 100% rename from public/img/footer-instagram-white.png rename to public/img/system/social/footer/footer-instagram-white.png diff --git a/public/img/footer-twitter-black.png b/public/img/system/social/footer/footer-twitter-black.png similarity index 100% rename from public/img/footer-twitter-black.png rename to public/img/system/social/footer/footer-twitter-black.png diff --git a/public/img/footer-twitter-white.png b/public/img/system/social/footer/footer-twitter-white.png similarity index 100% rename from public/img/footer-twitter-white.png rename to public/img/system/social/footer/footer-twitter-white.png diff --git a/public/img/facebook-black.png b/public/img/system/social/menu/facebook-black.png similarity index 100% rename from public/img/facebook-black.png rename to public/img/system/social/menu/facebook-black.png diff --git a/public/img/facebook-white.png b/public/img/system/social/menu/facebook-white.png similarity index 100% rename from public/img/facebook-white.png rename to public/img/system/social/menu/facebook-white.png diff --git a/public/img/instagram-black.png b/public/img/system/social/menu/instagram-black.png similarity index 100% rename from public/img/instagram-black.png rename to public/img/system/social/menu/instagram-black.png diff --git a/public/img/instagram-white.png b/public/img/system/social/menu/instagram-white.png similarity index 100% rename from public/img/instagram-white.png rename to public/img/system/social/menu/instagram-white.png diff --git a/public/img/twitter-x-black.png b/public/img/system/social/menu/twitter-x-black.png similarity index 100% rename from public/img/twitter-x-black.png rename to public/img/system/social/menu/twitter-x-black.png diff --git a/public/img/twitter-x-white.png b/public/img/system/social/menu/twitter-x-white.png similarity index 100% rename from public/img/twitter-x-white.png rename to public/img/system/social/menu/twitter-x-white.png diff --git a/public/img/app-store.png b/public/img/system/stores/app-store.png similarity index 100% rename from public/img/app-store.png rename to public/img/system/stores/app-store.png diff --git a/public/img/google-play.png b/public/img/system/stores/google-play.png similarity index 100% rename from public/img/google-play.png rename to public/img/system/stores/google-play.png diff --git a/public/img/t-shirt-1.png b/public/img/t-shirt-1.png deleted file mode 100644 index e54bd83..0000000 Binary files a/public/img/t-shirt-1.png and /dev/null differ diff --git a/public/img/t-shirt-2.png b/public/img/t-shirt-2.png deleted file mode 100644 index 95a5c72..0000000 Binary files a/public/img/t-shirt-2.png and /dev/null differ diff --git a/public/img/t-shirt-4.png b/public/img/t-shirt-4.png deleted file mode 100644 index 18875ba..0000000 Binary files a/public/img/t-shirt-4.png and /dev/null differ diff --git a/public/img/tamara-bellis-Mn1Uopx7if8-unsplash.jpg b/public/img/tamara-bellis-Mn1Uopx7if8-unsplash.jpg deleted file mode 100644 index a2a5b82..0000000 Binary files a/public/img/tamara-bellis-Mn1Uopx7if8-unsplash.jpg and /dev/null differ diff --git a/public/img/test-white.png b/public/img/test-white.png deleted file mode 100644 index c42bb83..0000000 Binary files a/public/img/test-white.png and /dev/null differ diff --git a/public/img/test.png b/public/img/test.png deleted file mode 100644 index 93aa503..0000000 Binary files a/public/img/test.png and /dev/null differ diff --git a/public/img/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg b/public/img/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg deleted file mode 100644 index 44d90b9..0000000 Binary files a/public/img/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg and /dev/null differ diff --git a/src/entities/block/block-factory.ts b/src/entities/block/block-factory.ts index 0e90717..4c9a537 100644 --- a/src/entities/block/block-factory.ts +++ b/src/entities/block/block-factory.ts @@ -92,7 +92,7 @@ export function createImageAtom(): ImageAtom { return { id: nanoid(8), type: 'image', - src: '/img/logo-black.png', + src: '/img/system/logos/logo-black.png', link: 'https://example.com', alt: 'Image', width: 120, diff --git a/src/entities/template/types.ts b/src/entities/template/types.ts index 21b62b2..999af6a 100644 --- a/src/entities/template/types.ts +++ b/src/entities/template/types.ts @@ -149,6 +149,7 @@ export type ComponentType | 'footer' | 'header' | 'menu' + | 'transactional' export interface CanvasBlockInstance { id: string diff --git a/src/features/editor/model/state.ts b/src/features/editor/model/state.ts index 868469e..53787df 100644 --- a/src/features/editor/model/state.ts +++ b/src/features/editor/model/state.ts @@ -9,6 +9,7 @@ import { footer, header, menu, + transactional, } from '@/features/email-preview/catalog/load-blocks' export const library = shallowRef([ @@ -18,6 +19,7 @@ export const library = shallowRef([ { name: 'Feature', components: feature }, { name: 'Call to Action', components: cta }, { name: 'E-Commerce', components: ecommerce }, + { name: 'Transactional', components: transactional }, { name: 'Footer', components: footer }, ]) diff --git a/src/features/editor/model/tools.ts b/src/features/editor/model/tools.ts index 865a03c..1f56f0a 100644 --- a/src/features/editor/model/tools.ts +++ b/src/features/editor/model/tools.ts @@ -20,7 +20,7 @@ export const DEFAULT_MENU_IMAGE_ITEM = { type: 'image' as const, name: 'Icon', link: 'https://example', - url: '/img/facebook-black.png', + url: '/img/system/social/menu/facebook-black.png', width: 16, height: 16, alt: 'Icon', diff --git a/src/features/email-preview/catalog/blocks/content1.json b/src/features/email-preview/catalog/blocks/content1.json index 4660d76..71e80f4 100644 --- a/src/features/email-preview/catalog/blocks/content1.json +++ b/src/features/email-preview/catalog/blocks/content1.json @@ -5,30 +5,32 @@ "type": "content", "preview": "img/components/content-1.png", "block": { - "id": "G86LJihh", + "id": "lIQcolOZ", "label": "Content 1", "settings": { "spacing": { "padding": [ - 30, - 24, - 30, - 24 + 44, + 44, + 40, + 44 ] }, - "backgroundColor": "#FFFFFF" + "backgroundColor": "#FFF9F3" }, "rows": [ { - "id": "ZF7fxSqh", + "id": "ZpCshJt0", "settings": { "spacing": {}, "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, "gap": 0 }, "cells": [ { - "id": "Z69ew8wD", + "id": "h6CJDQ5x", "settings": { "spacing": {}, "backgroundColor": "transparent", @@ -37,22 +39,42 @@ }, "atoms": [ { - "id": "8Br6p3rY", + "id": "h7acjiWh", "type": "text", - "value": "

12 July '19

Is There a Perfect Time of
Day to Meditate?

", - "color": "#111111", + "value": "

EDITOR'S NOTE / 01

The useful part starts before the big idea.

A text-first opening for a point of view, announcement or thoughtful introduction.

", + "color": "#1F1712", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "SXzqGnaq", + "type": "divider", + "color": "#FFD9B8", + "height": 1, + "spacing": { "padding": [ 0, 0, 0, 0 + ], + "margin": [ + 18, + 0, + 18, + 0 ] } } @@ -62,31 +84,79 @@ ] }, { - "id": "8pyLw4IG", + "id": "GPNQ8JtY", "settings": { "spacing": {}, "backgroundColor": "transparent", - "gap": 0 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 28 }, "cells": [ { - "id": "WrsH1hiL", + "id": "h37960CJ", "settings": { "spacing": {}, "backgroundColor": "transparent", - "link": "https://example.com", "verticalAlign": "top", "horizontalAlign": "left", - "borderRadius": 5, - "backgroundImage": { - "url": "img/simon-migaj-Yui5vfKHuzs-unsplash.jpg", - "position": "center", - "repeat": "no-repeat", - "size": "cover" - }, - "height": 200 + "width": 50 + }, + "atoms": [ + { + "id": "F__w2E_S", + "type": "text", + "value": "

Start with context

Explain what changed and why the reader should care now.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "-T6-tRyr", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 50 }, - "atoms": [], + "atoms": [ + { + "id": "9QyWJNb_", + "type": "text", + "value": "

End with direction

Give the next section a clear promise instead of another headline.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], "rows": [] } ] diff --git a/src/features/email-preview/catalog/blocks/content10.json b/src/features/email-preview/catalog/blocks/content10.json new file mode 100644 index 0000000..da5f175 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/content10.json @@ -0,0 +1,169 @@ +{ + "version": 2, + "name": "content10", + "label": "Content 10", + "type": "content", + "preview": "img/components/content-10.png", + "block": { + "id": "fe-VHQ4t", + "label": "Content 10", + "settings": { + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#FFFFFF" + }, + "rows": [ + { + "id": "d4bGOO3V", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "f_Ia-58K", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, + "atoms": [ + { + "id": "QRJHnOME", + "type": "text", + "value": "

TWO PERSPECTIVES

What changed after the first week.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "cPW19YcT", + "settings": { + "spacing": { + "padding": [ + 18, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 + }, + "cells": [ + { + "id": "kAZN277F", + "settings": { + "spacing": { + "padding": [ + 22, + 20, + 22, + 20 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 16, + "width": 50 + }, + "atoms": [ + { + "id": "TMYC-8cT", + "type": "text", + "value": "

“

We stopped explaining the interface and started discussing the work.

Maya Chen · Product lead

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "P-EpauiY", + "settings": { + "spacing": { + "padding": [ + 22, + 20, + 22, + 20 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 16, + "width": 50 + }, + "atoms": [ + { + "id": "5I6UAJuf", + "type": "text", + "value": "

“

The handoff became shorter because the structure already carried intent.

Noah Ellis · Design director

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/content11.json b/src/features/email-preview/catalog/blocks/content11.json new file mode 100644 index 0000000..d0908c7 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/content11.json @@ -0,0 +1,558 @@ +{ + "version": 2, + "name": "content11", + "label": "Content 11", + "type": "content", + "preview": "img/components/content-11.png", + "block": { + "id": "xavgXl5T", + "label": "Content 11", + "settings": { + "spacing": { + "padding": [ + 38, + 34, + 34, + 34 + ] + }, + "backgroundColor": "#1F1712" + }, + "rows": [ + { + "id": "2NtI3tYh", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "hMMvYCls", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, + "atoms": [ + { + "id": "ETpBmbTv", + "type": "text", + "value": "

Our Clients

We’re trusted by well-known companies,
and here are some of them.

", + "color": "#ffffff", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "bPwHSCJ7", + "settings": { + "spacing": { + "padding": [ + 26, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 12 + }, + "cells": [ + { + "id": "zPiOnflC", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 50 + }, + "atoms": [], + "rows": [ + { + "id": "RpriisxG", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": false, + "gap": 12 + }, + "cells": [ + { + "id": "ufEei7uR", + "settings": { + "spacing": { + "padding": [ + 10, + 8, + 10, + 8 + ] + }, + "backgroundColor": "#302E2C", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 50, + "height": 78 + }, + "atoms": [ + { + "id": "r02J_c1b", + "type": "image", + "src": "img/catalog/brands/apple.png", + "link": "https://card.email/read", + "alt": "Apple", + "width": 102, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "WkcXz0eO", + "settings": { + "spacing": { + "padding": [ + 10, + 8, + 10, + 8 + ] + }, + "backgroundColor": "#302E2C", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 50, + "height": 78 + }, + "atoms": [ + { + "id": "FyjwVw8A", + "type": "image", + "src": "img/catalog/brands/google.png", + "link": "https://card.email/read", + "alt": "Google", + "width": 102, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + }, + { + "id": "W4sin8TS", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 50 + }, + "atoms": [], + "rows": [ + { + "id": "gO4ByaD3", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": false, + "gap": 12 + }, + "cells": [ + { + "id": "fBztCwqY", + "settings": { + "spacing": { + "padding": [ + 10, + 8, + 10, + 8 + ] + }, + "backgroundColor": "#302E2C", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 50, + "height": 78 + }, + "atoms": [ + { + "id": "Jn3X2XmW", + "type": "image", + "src": "img/catalog/brands/xbox.png", + "link": "https://card.email/read", + "alt": "Xbox", + "width": 102, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "WZewx3dU", + "settings": { + "spacing": { + "padding": [ + 10, + 8, + 10, + 8 + ] + }, + "backgroundColor": "#302E2C", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 50, + "height": 78 + }, + "atoms": [ + { + "id": "2EVvGFPu", + "type": "image", + "src": "img/catalog/brands/spotify.png", + "link": "https://card.email/read", + "alt": "Spotify", + "width": 102, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } + ] + }, + { + "id": "9Fp7Ok19", + "settings": { + "spacing": { + "padding": [ + 10, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 12 + }, + "cells": [ + { + "id": "IDWb7s8Y", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 50 + }, + "atoms": [], + "rows": [ + { + "id": "lj4_w8JL", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": false, + "gap": 12 + }, + "cells": [ + { + "id": "3TeXSTo7", + "settings": { + "spacing": { + "padding": [ + 10, + 8, + 10, + 8 + ] + }, + "backgroundColor": "#302E2C", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 50, + "height": 78 + }, + "atoms": [ + { + "id": "2lVgUszr", + "type": "image", + "src": "img/catalog/brands/bose.png", + "link": "https://card.email/read", + "alt": "Bose", + "width": 102, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "MWIWxAGH", + "settings": { + "spacing": { + "padding": [ + 10, + 8, + 10, + 8 + ] + }, + "backgroundColor": "#302E2C", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 50, + "height": 78 + }, + "atoms": [ + { + "id": "gFwYZHnT", + "type": "image", + "src": "img/catalog/brands/microsoft.png", + "link": "https://card.email/read", + "alt": "Microsoft", + "width": 102, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + }, + { + "id": "icCzwyR_", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 50 + }, + "atoms": [], + "rows": [ + { + "id": "vrxmRFnO", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": false, + "gap": 12 + }, + "cells": [ + { + "id": "I2IefO8t", + "settings": { + "spacing": { + "padding": [ + 10, + 8, + 10, + 8 + ] + }, + "backgroundColor": "#302E2C", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 50, + "height": 78 + }, + "atoms": [ + { + "id": "UyEfWapf", + "type": "image", + "src": "img/catalog/brands/coca-cola.png", + "link": "https://card.email/read", + "alt": "Coca-Cola", + "width": 102, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "j_oHWCyQ", + "settings": { + "spacing": { + "padding": [ + 10, + 8, + 10, + 8 + ] + }, + "backgroundColor": "#302E2C", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 50, + "height": 78 + }, + "atoms": [ + { + "id": "CzIPwC1c", + "type": "image", + "src": "img/catalog/brands/facebook.png", + "link": "https://card.email/read", + "alt": "Facebook", + "width": 102, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/content12.json b/src/features/email-preview/catalog/blocks/content12.json new file mode 100644 index 0000000..55944ad --- /dev/null +++ b/src/features/email-preview/catalog/blocks/content12.json @@ -0,0 +1,260 @@ +{ + "version": 2, + "name": "content12", + "label": "Content 12", + "type": "content", + "preview": "img/components/content-12.png", + "block": { + "id": "SJ7vI9VZ", + "label": "Content 12", + "settings": { + "spacing": { + "padding": [ + 34, + 34, + 34, + 34 + ] + }, + "backgroundColor": "#FFF9F3" + }, + "rows": [ + { + "id": "pfie8xfS", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "7aWW5g1g", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left" + }, + "atoms": [ + { + "id": "bjUKZoxb", + "type": "text", + "value": "

FIELD INTERVIEW / 04

The demonstration that changed the conversation.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "802cbyGw", + "type": "divider", + "color": "#FFD9B8", + "height": 1, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 18, + 0, + 18, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "MOX6lrX3", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 + }, + "cells": [ + { + "id": "eBuYkccN", + "settings": { + "spacing": { + "padding": [ + 16, + 10, + 0, + 10 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "bottom", + "horizontalAlign": "center", + "borderRadius": 18, + "width": 28, + "backgroundImage": { + "url": "img/catalog/backgrounds/gradient-ribbons.png", + "repeat": "no-repeat", + "size": "cover", + "position": "right" + } + }, + "atoms": [ + { + "id": "9hbB8hrl", + "type": "image", + "src": "img/catalog/presenters/beverage-can-presenter.png", + "link": "https://card.email/read", + "alt": "Presenter demonstrating an orange beverage can", + "width": 165, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + -3, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "TlK1hEhK", + "settings": { + "spacing": { + "padding": [ + 8, + 8, + 8, + 8 + ] + }, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 48 + }, + "atoms": [ + { + "id": "sLzuaCZI", + "type": "text", + "value": "

Start with the object, then explain the choice.

Maya placed the can in view before describing the redesign. That small sequence gave the audience something concrete to inspect while the reasoning unfolded.

The result felt less like a pitch and more like a useful working note.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "LvDfmDtF", + "type": "button", + "text": "Read the interview", + "link": "https://card.email/read", + "backgroundColor": "#1F1712", + "color": "#FFFFFF", + "fontSize": 14, + "borderRadius": 10, + "padding": [ + 12, + 18, + 12, + 18 + ], + "spacing": { + "padding": [ + 12, + 18, + 12, + 18 + ], + "margin": [ + 16, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "UYVMAKH-", + "settings": { + "spacing": { + "padding": [ + 20, + 16, + 20, + 16 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", + "horizontalAlign": "left", + "borderRadius": 16, + "width": 24 + }, + "atoms": [ + { + "id": "e6MnQrQX", + "type": "text", + "value": "

KEY DETAIL

Show first.
Explain second.

A compact takeaway separated from the main narrative.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/content13.json b/src/features/email-preview/catalog/blocks/content13.json new file mode 100644 index 0000000..754fe94 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/content13.json @@ -0,0 +1,186 @@ +{ + "version": 2, + "name": "content13", + "label": "Content 13", + "type": "content", + "preview": "img/components/content-13.png", + "block": { + "id": "yDCSCRee", + "label": "Content 13", + "settings": { + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#FFF3E6" + }, + "rows": [ + { + "id": "W4lRcvf1", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "lzH9WY1c", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left" + }, + "atoms": [ + { + "id": "OM92n8zu", + "type": "text", + "value": "

THE QUARTER IN THREE NUMBERS

A compact data story, not a dashboard.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "usMIhi5p", + "settings": { + "spacing": { + "padding": [ + 20, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 20 + }, + "cells": [ + { + "id": "n2VP5WNC", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 33 + }, + "atoms": [ + { + "id": "XzLaYl1L", + "type": "text", + "value": "

42%

Faster first draft

Measured from brief to review-ready structure.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "ElCBbTUt", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 33 + }, + "atoms": [ + { + "id": "xZVvqweg", + "type": "text", + "value": "

3.1×

More reuse

Teams started from proven patterns instead of blank pages.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "IftQ944L", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 33 + }, + "atoms": [ + { + "id": "Ko73sYfm", + "type": "text", + "value": "

18h

Saved weekly

A clear number with one sentence of useful context.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/content14.json b/src/features/email-preview/catalog/blocks/content14.json new file mode 100644 index 0000000..13b8762 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/content14.json @@ -0,0 +1,111 @@ +{ + "version": 2, + "name": "content14", + "label": "Content 14", + "type": "content", + "preview": "img/components/content-14.png", + "block": { + "id": "O1f3kmxF", + "label": "Content 14", + "settings": { + "spacing": { + "padding": [ + 44, + 58, + 42, + 58 + ] + }, + "backgroundColor": "#FFF9F3" + }, + "rows": [ + { + "id": "feCk_nWV", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "SXGk1c77", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center" + }, + "atoms": [ + { + "id": "bbg6_Yki", + "type": "text", + "value": "

“

The strongest improvement was not a new feature. It was finally having a starting point the whole team understood.

", + "color": "#7A6558", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "l-vQiJ27", + "type": "image", + "src": "img/catalog/avatars/beverage-can-presenter-avatar.png", + "link": "https://card.email/authors", + "alt": "Portrait of customer Alex Morgan", + "width": 104, + "borderRadius": 999, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "kRYtW9Ix", + "type": "text", + "value": "

Alex Morgan
Customer experience lead

", + "color": "#1F1712", + "spacing": { + "padding": [ + 18, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/content15.json b/src/features/email-preview/catalog/blocks/content15.json new file mode 100644 index 0000000..cc65c93 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/content15.json @@ -0,0 +1,169 @@ +{ + "version": 2, + "name": "content15", + "label": "Content 15", + "type": "content", + "preview": "img/components/content-15.png", + "block": { + "id": "eatvXX3r", + "label": "Content 15", + "settings": { + "spacing": { + "padding": [ + 38, + 40, + 38, + 40 + ] + }, + "backgroundColor": "#FFF9F3" + }, + "rows": [ + { + "id": "o2iPxn99", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "3THdWSGL", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left" + }, + "atoms": [ + { + "id": "WdjplyFy", + "type": "text", + "value": "

FROM THE EDITOR

The detail worth carrying into the next draft.

An editorial opening with a visible author, useful for columns, newsletters and expert commentary.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "uHqgNoF1", + "type": "divider", + "color": "#FFD9B8", + "height": 1, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 18, + 0, + 18, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "spzJpGdt", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 18 + }, + "cells": [ + { + "id": "jqY1XPLE", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "width": 22 + }, + "atoms": [ + { + "id": "qvjTzrBM", + "type": "image", + "src": "img/catalog/avatars/headphones-presenter-avatar.png", + "link": "https://card.email/authors", + "alt": "Portrait of editorial author Amir Cole", + "width": 96, + "borderRadius": 999, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "CQL0cXka", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 78 + }, + "atoms": [ + { + "id": "AsVEse-7", + "type": "text", + "value": "

Amir Cole
EDITOR · PRODUCT & CULTURE

Writes about the small choices that make products easier to understand and remember.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/content16.json b/src/features/email-preview/catalog/blocks/content16.json new file mode 100644 index 0000000..164a956 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/content16.json @@ -0,0 +1,606 @@ +{ + "version": 2, + "name": "content16", + "label": "Content 16", + "type": "content", + "preview": "img/components/content-16.png", + "block": { + "id": "IfWQl45_", + "label": "Content 16", + "settings": { + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#FFFFFF" + }, + "rows": [ + { + "id": "CzyZfPKb", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "T0AUOc55", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, + "atoms": [ + { + "id": "q1xBYVqH", + "type": "text", + "value": "

THREE NOTES FROM THE FIELD

Different teams. One clear shift.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "ijPQn1tV", + "settings": { + "spacing": { + "padding": [ + 18, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 14 + }, + "cells": [ + { + "id": "KUdgrglf", + "settings": { + "spacing": { + "padding": [ + 22, + 14, + 22, + 14 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "top", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 33 + }, + "atoms": [], + "rows": [ + { + "id": "pQF53yZv", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "pmRud9SM", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "height": 82 + }, + "atoms": [ + { + "id": "h7-tyyeL", + "type": "image", + "src": "img/catalog/avatars/travel-mug-presenter-avatar.png", + "link": "https://card.email/authors", + "alt": "Portrait of customer Maya Chen", + "width": 82, + "borderRadius": 999, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "Ez31EPEW", + "settings": { + "spacing": { + "padding": [ + 14, + 4, + 0, + 4 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "k36KSHkq", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center", + "height": 120 + }, + "atoms": [ + { + "id": "XjqKLJpg", + "type": "text", + "value": "

“We found the right starting point in minutes.”

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "Fjl8-AAI", + "settings": { + "spacing": { + "padding": [ + 10, + 4, + 0, + 4 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "7HXiRLma", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center", + "height": 44 + }, + "atoms": [ + { + "id": "epajs8JX", + "type": "text", + "value": "

Maya Chen
Product lead

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + }, + { + "id": "4THYRoOv", + "settings": { + "spacing": { + "padding": [ + 22, + 14, + 22, + 14 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "top", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 33 + }, + "atoms": [], + "rows": [ + { + "id": "45urrIm4", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "JwBcZWvx", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "height": 82 + }, + "atoms": [ + { + "id": "Tdi45gT5", + "type": "image", + "src": "img/catalog/avatars/skincare-presenter-avatar.png", + "link": "https://card.email/authors", + "alt": "Portrait of customer Sofia Reed", + "width": 82, + "borderRadius": 999, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "Aqcfk_hH", + "settings": { + "spacing": { + "padding": [ + 14, + 4, + 0, + 4 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "DwUDF68C", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center", + "height": 120 + }, + "atoms": [ + { + "id": "4fvjDeNC", + "type": "text", + "value": "

“The structure made the feedback much sharper.”

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "bTsy5EF3", + "settings": { + "spacing": { + "padding": [ + 10, + 4, + 0, + 4 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "U6hFvksR", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center", + "height": 44 + }, + "atoms": [ + { + "id": "umOzAdWE", + "type": "text", + "value": "

Sofia Reed
Brand director

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + }, + { + "id": "86oOfOe1", + "settings": { + "spacing": { + "padding": [ + 22, + 14, + 22, + 14 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "top", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 33 + }, + "atoms": [], + "rows": [ + { + "id": "h4CfywXN", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "lE9bJw-5", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "height": 82 + }, + "atoms": [ + { + "id": "MFjuGIuT", + "type": "image", + "src": "img/catalog/avatars/speaker-presenter-avatar.png", + "link": "https://card.email/authors", + "alt": "Portrait of customer Daniel Brooks", + "width": 82, + "borderRadius": 999, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "Vj8LYWIp", + "settings": { + "spacing": { + "padding": [ + 14, + 4, + 0, + 4 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "PsnVj-8s", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center", + "height": 120 + }, + "atoms": [ + { + "id": "5p0td6Xn", + "type": "text", + "value": "

“Our first review finally stayed on the message.”

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "6Nq97y2F", + "settings": { + "spacing": { + "padding": [ + 10, + 4, + 0, + 4 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "NAydTdMp", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center", + "height": 44 + }, + "atoms": [ + { + "id": "Q3o6n-Xa", + "type": "text", + "value": "

Daniel Brooks
Creative lead

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/content2.json b/src/features/email-preview/catalog/blocks/content2.json index 4c05f9d..ba8ed36 100644 --- a/src/features/email-preview/catalog/blocks/content2.json +++ b/src/features/email-preview/catalog/blocks/content2.json @@ -5,122 +5,126 @@ "type": "content", "preview": "img/components/content-2.png", "block": { - "id": "hsA4vpdM", + "id": "mLprKZs0", "label": "Content 2", "settings": { "spacing": { "padding": [ - 30, - 24, - 30, - 24 + 36, + 34, + 36, + 34 ] }, - "backgroundColor": "#FFFFFF" + "backgroundColor": "#FFF3E6" }, "rows": [ { - "id": "s-xJMRet", + "id": "Yh8qfM6W", "settings": { - "spacing": { - "padding": [ - 0, - 0, - 12, - 0 - ] - }, + "spacing": {}, "backgroundColor": "transparent", - "gap": 20 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 26 }, "cells": [ { - "id": "wUhoZZ7R", + "id": "-QOjnT4l", "settings": { "spacing": {}, "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 44 }, "atoms": [ { - "id": "i6ZZ65s-", + "id": "hlfy2pKz", "type": "text", - "value": "

12 July '19

How Music Affects
Your Productivity

", - "color": "#111111", + "value": "

FIELD STORY

Pack less. Notice more.

A wide editorial feature for product stories, travel notes and campaign narratives.

", + "color": "#1F1712", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, 0 ] } - } - ], - "rows": [ + }, { - "id": "7ZHGpCa-", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "hiddenOnMobile": false, - "collapseOnMobile": true, - "gap": 0 - }, - "cells": [ - { - "id": "04wBdNwk", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "hiddenOnMobile": false, - "verticalAlign": "top", - "horizontalAlign": "left", - "borderRadius": 5, - "backgroundImage": { - "url": "img/juja-han-HU-uL54pfQI-unsplash.jpg", - "repeat": "no-repeat", - "size": "cover", - "position": "center" - }, - "height": 200 - }, - "atoms": [], - "rows": [] - } - ] + "id": "MsaQl6oM", + "type": "button", + "text": "Read the field notes", + "link": "https://card.email/read", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 14, + "borderRadius": 10, + "padding": [ + 12, + 18, + 12, + 18 + ], + "spacing": { + "padding": [ + 12, + 18, + 12, + 18 + ], + "margin": [ + 16, + 0, + 0, + 0 + ] + } } - ] + ], + "rows": [] }, { - "id": "yPslkSrr", + "id": "gmmMQXL3", "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" + "spacing": { + "padding": [ + 18, + 20, + 18, + 20 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 18, + "width": 56 }, "atoms": [ { - "id": "A0X_Pkap", - "type": "text", - "value": "

12 July '19

Background Music for
Coding

", - "color": "#111111", + "id": "CNgnWMkL", + "type": "image", + "src": "img/catalog/fashion-travel/weekend-duffel.png", + "link": "https://card.email/read", + "alt": "Orange weekend duffel bag", + "width": 260, "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, @@ -129,40 +133,7 @@ } } ], - "rows": [ - { - "id": "0xol4F9Y", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "hiddenOnMobile": false, - "collapseOnMobile": true, - "gap": 0 - }, - "cells": [ - { - "id": "dGlGDtYb", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "hiddenOnMobile": false, - "verticalAlign": "top", - "horizontalAlign": "left", - "borderRadius": 5, - "backgroundImage": { - "url": "img/jefferson-santos-9SoCnyQmkzI-unsplash.jpg", - "repeat": "no-repeat", - "size": "cover", - "position": "center" - }, - "height": 200 - }, - "atoms": [], - "rows": [] - } - ] - } - ] + "rows": [] } ] } diff --git a/src/features/email-preview/catalog/blocks/content3.json b/src/features/email-preview/catalog/blocks/content3.json index 052b304..de6fd1f 100644 --- a/src/features/email-preview/catalog/blocks/content3.json +++ b/src/features/email-preview/catalog/blocks/content3.json @@ -5,77 +5,63 @@ "type": "content", "preview": "img/components/content-3.png", "block": { - "id": "Y-l_sN0P", + "id": "B4QucMUg", "label": "Content 3", "settings": { "spacing": { "padding": [ - 30, - 24, - 30, - 24 + 34, + 32, + 34, + 32 ] }, "backgroundColor": "#FFFFFF" }, "rows": [ { - "id": "CxNo2oav", + "id": "S8Z_PNkR", "settings": { - "spacing": { - "padding": [ - 0, - 0, - 20, - 0 - ] - }, + "spacing": {}, "backgroundColor": "transparent", - "gap": 20 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 24 }, "cells": [ { - "id": "RBcuqX0I", + "id": "7vwOV2vJ", "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "link": "https://example.com", - "verticalAlign": "top", - "horizontalAlign": "left", - "borderRadius": 5, - "backgroundImage": { - "url": "img/juja-han-HU-uL54pfQI-unsplash.jpg", - "position": "center", - "repeat": "no-repeat", - "size": "cover" + "spacing": { + "padding": [ + 24, + 18, + 24, + 18 + ] }, - "height": 200 - }, - "atoms": [], - "rows": [] - }, - { - "id": "C_VBBePm", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 18, + "width": 42 }, "atoms": [ { - "id": "anBpWMOH", - "type": "text", - "value": "

12 July '19

How Music Affects
Your Productivity

Music is regarded as one of the triumphs of human creativity.

", - "color": "#111111", + "id": "irhC7Rig", + "type": "image", + "src": "img/catalog/fashion-travel/city-backpack.png", + "link": "https://card.email/read", + "alt": "Orange city backpack", + "width": 230, "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, @@ -85,60 +71,68 @@ } ], "rows": [] - } - ] - }, - { - "id": "0eUsz-AK", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "gap": 20 - }, - "cells": [ - { - "id": "6hKIFLCF", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "link": "https://example.com", - "verticalAlign": "top", - "horizontalAlign": "left", - "borderRadius": 5, - "backgroundImage": { - "url": "img/jefferson-santos-9SoCnyQmkzI-unsplash.jpg", - "position": "center", - "repeat": "no-repeat", - "size": "cover" - }, - "height": 200 - }, - "atoms": [], - "rows": [] }, { - "id": "MjdhJ_Pg", + "id": "lzxTfUaw", "settings": { - "spacing": {}, + "spacing": { + "padding": [ + 14, + 0, + 14, + 6 + ] + }, "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 58 }, "atoms": [ { - "id": "v4d-eeYA", + "id": "vfWePPfl", "type": "text", - "value": "

12 July '19

Background Music for
Coding

Do you guys use background music while coding?

", - "color": "#111111", + "value": "

CITY NOTES

The everyday carry became the everyday system.

Use a media-left story when the object opens the narrative and the copy explains the meaning.

", + "color": "#1F1712", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ + 0, + 0, 0, + 0 + ] + } + }, + { + "id": "rBFV3ZBA", + "type": "button", + "text": "Continue reading", + "link": "https://card.email/read", + "backgroundColor": "#1F1712", + "color": "#FFFFFF", + "fontSize": 14, + "borderRadius": 10, + "padding": [ + 12, + 18, + 12, + 18 + ], + "spacing": { + "padding": [ + 12, + 18, + 12, + 18 + ], + "margin": [ + 16, 0, 0, 0 diff --git a/src/features/email-preview/catalog/blocks/content4.json b/src/features/email-preview/catalog/blocks/content4.json index a06b14f..d196f45 100644 --- a/src/features/email-preview/catalog/blocks/content4.json +++ b/src/features/email-preview/catalog/blocks/content4.json @@ -5,54 +5,137 @@ "type": "content", "preview": "img/components/content-4.png", "block": { - "id": "jN5SB2zN", + "id": "2cB1gEQ2", "label": "Content 4", "settings": { "spacing": { "padding": [ - 30, - 24, - 30, - 24 + 34, + 32, + 34, + 32 ] }, - "backgroundColor": "#FFFFFF" + "backgroundColor": "#FFF3E6" }, "rows": [ { - "id": "5BP440-0", + "id": "lxTeHiV-", "settings": { "spacing": {}, "backgroundColor": "transparent", - "gap": 0 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 24 }, "cells": [ { - "id": "nLkabrop", + "id": "b31ru39m", "settings": { - "spacing": {}, + "spacing": { + "padding": [ + 14, + 6, + 14, + 0 + ] + }, "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 58 }, "atoms": [ { - "id": "LPIY0s03", + "id": "RHZkxc3v", "type": "text", - "value": "

12 July '19

How to Stick to Your Fitness Habits the Easy
Way, According to Science

Staying in shape is mostly about program compliance: it’s not about having
the best fitness program, but about having one that’s good enough, and
making sure you actually stick to it.

", - "color": "#111111", + "value": "

BEHIND THE SETUP

Small tools can change the rhythm of a room.

A mirrored article start for reviews, interviews and product-led editorial.

", + "color": "#1F1712", "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], "margin": [ 0, 0, 0, 0 + ] + } + }, + { + "id": "_kO98m3H", + "type": "button", + "text": "See the setup", + "link": "https://card.email/read", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 14, + "borderRadius": 10, + "padding": [ + 12, + 18, + 12, + 18 + ], + "spacing": { + "padding": [ + 12, + 18, + 12, + 18 ], + "margin": [ + 16, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "ERpnkH7d", + "settings": { + "spacing": { + "padding": [ + 24, + 18, + 24, + 18 + ] + }, + "backgroundColor": "#FFFFFF", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 18, + "width": 42 + }, + "atoms": [ + { + "id": "mO-3-790", + "type": "image", + "src": "img/catalog/devices/webcam.png", + "link": "https://card.email/read", + "alt": "Compact orange webcam", + "width": 220, + "spacing": { "padding": [ 0, 0, 0, 0 + ], + "margin": [ + 0, + 0, + 0, + 0 ] } } diff --git a/src/features/email-preview/catalog/blocks/content5.json b/src/features/email-preview/catalog/blocks/content5.json index cf083d9..5f5c4ef 100644 --- a/src/features/email-preview/catalog/blocks/content5.json +++ b/src/features/email-preview/catalog/blocks/content5.json @@ -5,147 +5,389 @@ "type": "content", "preview": "img/components/content-5.png", "block": { - "id": "eW5rLGt-", + "id": "4XWNAyXA", "label": "Content 5", "settings": { "spacing": { "padding": [ - 30, - 24, - 30, - 24 + 34, + 32, + 34, + 32 ] }, "backgroundColor": "#FFFFFF" }, "rows": [ { - "id": "RjPPeG_t", + "id": "Nvq44R5M", "settings": { "spacing": {}, "backgroundColor": "transparent", - "gap": 0 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 14 }, "cells": [ { - "id": "lZmFT7WY", + "id": "usMv9SyO", "settings": { - "spacing": {}, - "backgroundColor": "transparent", + "spacing": { + "padding": [ + 20, + 12, + 20, + 12 + ] + }, + "backgroundColor": "#FFF3E6", "verticalAlign": "top", - "horizontalAlign": "left" + "horizontalAlign": "center", + "borderRadius": 16, + "width": 33 }, - "atoms": [ + "atoms": [], + "rows": [ { - "id": "zZV9jI9D", - "type": "text", - "value": "

Staying in shape is mostly about program compliance: it’s not about having
the best fitness program, but about having one that’s good enough, and
making sure you actually stick to it.

", - "color": "#9FA3A7", - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 0, - 0, - 0, - 0 - ] - } + "id": "36AF1xyD", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "Xt7EMhma", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "height": 135 + }, + "atoms": [ + { + "id": "oXjspwGA", + "type": "image", + "src": "img/catalog/products/travel-mug.png", + "link": "https://card.email/read", + "alt": "Orange travel mug", + "width": 110, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "GLTIWDbp", + "settings": { + "spacing": { + "padding": [ + 14, + 4, + 0, + 4 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "Gz5c1LsM", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center", + "height": 118 + }, + "atoms": [ + { + "id": "CDVXqxUj", + "type": "text", + "value": "

A better daily
ritual

Three minutes on the object that quietly improved the morning.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] } - ], - "rows": [] - } - ] - }, - { - "id": "HmdD1jRU", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ + ] + }, { - "id": "-V7CbHS2", + "id": "8YWo9p7i", "settings": { - "spacing": {}, - "backgroundColor": "transparent", + "spacing": { + "padding": [ + 20, + 12, + 20, + 12 + ] + }, + "backgroundColor": "#FFD9B8", "verticalAlign": "top", - "horizontalAlign": "center" + "horizontalAlign": "center", + "borderRadius": 16, + "width": 33 }, - "atoms": [ + "atoms": [], + "rows": [ + { + "id": "JSCRQp2h", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "Zt0_lTkx", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "height": 135 + }, + "atoms": [ + { + "id": "x4t9OjZa", + "type": "image", + "src": "img/catalog/devices/gamepad.png", + "link": "https://card.email/read", + "alt": "Orange game controller", + "width": 150, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, { - "id": "j1Vs_B1g", - "type": "image", - "src": "img/jack-finnigan-rriAI0nhcbc-unsplash.jpg", - "link": "https://example.com", - "alt": "Mike Brown", - "width": 80, - "borderRadius": 60, - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 0, - 0, - 0, - 0 - ] + "id": "vIf5SPH_", + "settings": { + "spacing": { + "padding": [ + 14, + 4, + 0, + 4 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 }, - "height": 80 + "cells": [ + { + "id": "v9d-Rtof", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center", + "height": 118 + }, + "atoms": [ + { + "id": "4RoalX-C", + "type": "text", + "value": "

Play without
friction

What good controls teach us about clear interaction.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] } - ], - "rows": [] - } - ] - }, - { - "id": "XRce3YDh", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ + ] + }, { - "id": "5NCa7527", + "id": "PRW2TeY5", "settings": { - "spacing": {}, - "backgroundColor": "transparent", + "spacing": { + "padding": [ + 20, + 12, + 20, + 12 + ] + }, + "backgroundColor": "#FFF3E6", "verticalAlign": "top", - "horizontalAlign": "left" + "horizontalAlign": "center", + "borderRadius": 16, + "width": 33 }, - "atoms": [ + "atoms": [], + "rows": [ { - "id": "8yRMYgmg", - "type": "text", - "value": "

Mike Brown
Fitness Trainer

", - "color": "#111111", - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 0, - 0, - 0, - 0 - ] - } + "id": "gkp3G06v", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "Gn4Ac8ac", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "height": 135 + }, + "atoms": [ + { + "id": "WTACQUmp", + "type": "image", + "src": "img/catalog/fashion-travel/tote-bag.png", + "link": "https://card.email/read", + "alt": "Orange tote bag", + "width": 130, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "hsp4ZrxP", + "settings": { + "spacing": { + "padding": [ + 14, + 4, + 0, + 4 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "65ULv0th", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center", + "height": 118 + }, + "atoms": [ + { + "id": "-GOgtYo1", + "type": "text", + "value": "

Carry only the
useful

A short guide to editing the everyday kit.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] } - ], - "rows": [] + ] } ] } diff --git a/src/features/email-preview/catalog/blocks/content6.json b/src/features/email-preview/catalog/blocks/content6.json index 78377bb..ee42ca6 100644 --- a/src/features/email-preview/catalog/blocks/content6.json +++ b/src/features/email-preview/catalog/blocks/content6.json @@ -5,180 +5,67 @@ "type": "content", "preview": "img/components/content-6.png", "block": { - "id": "_VuBU5Ok", + "id": "0BtImnxw", "label": "Content 6", "settings": { "spacing": { "padding": [ - 30, - 24, - 30, - 24 + 34, + 32, + 34, + 32 ] }, - "backgroundColor": "#222222" + "backgroundColor": "#FFF9F3" }, "rows": [ { - "id": "91Xhe9XI", + "id": "4Ya07umV", "settings": { - "spacing": { - "padding": [ - 0, - 0, - 8, - 0 - ] - }, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ - { - "id": "l4vNf_3m", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" - }, - "atoms": [ - { - "id": "dxqR7xeW", - "type": "text", - "value": "

Our Clients

We’re trusted by well-known companies,
and here are some of them.

", - "color": "#FFFFFF", - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 0, - 0, - 0, - 0 - ] - } - } - ], - "rows": [] - } - ] - }, - { - "id": "dUwYZLMR", - "settings": { - "spacing": { - "padding": [ - 0, - 0, - 10, - 0 - ] - }, + "spacing": {}, "backgroundColor": "transparent", - "gap": 6 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 }, "cells": [ { - "id": "0R_k7rTS", + "id": "Xau2ClOn", "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" + "spacing": { + "padding": [ + 18, + 12, + 18, + 12 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 50 }, "atoms": [ { - "id": "ERNK-MLw", + "id": "x438dJl8", "type": "image", - "src": "img/apple.png", - "link": "https://www.apple.com", - "alt": "Apple", - "width": 110, + "src": "img/catalog/devices/mechanical-keyboard.png", + "link": "https://card.email/read", + "alt": "Orange mechanical keyboard", + "width": 150, "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], "padding": [ 0, 0, 0, 0 - ] - } - } - ], - "rows": [] - }, - { - "id": "Oz7MTJ9c", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" - }, - "atoms": [ - { - "id": "Y4NL5ugO", - "type": "image", - "src": "img/google.png", - "link": "https://www.google.com", - "alt": "Google", - "width": 110, - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 ], - "padding": [ - 0, - 0, - 0, - 0 - ] - } - } - ], - "rows": [] - }, - { - "id": "sg5QKSMC", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" - }, - "atoms": [ - { - "id": "k9cXV_X3", - "type": "image", - "src": "img/xbox.png", - "link": "https://www.xbox.com", - "alt": "Xbox", - "width": 110, - "spacing": { "margin": [ 0, 0, 0, 0 - ], - "padding": [ - 0, - 0, - 0, - 0 ] } } @@ -186,29 +73,28 @@ "rows": [] }, { - "id": "BBMgAv9o", + "id": "UqhhrqCs", "settings": { "spacing": {}, "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 50 }, "atoms": [ { - "id": "0khoCDWy", - "type": "image", - "src": "img/spotify.png", - "link": "https://www.spotify.com", - "alt": "Spotify", - "width": 110, + "id": "dwPYQxnq", + "type": "text", + "value": "

01 / INPUT

Make the frequent action feel obvious.

A compact lesson with one concrete example.

", + "color": "#1F1712", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, @@ -222,109 +108,49 @@ ] }, { - "id": "ph0hpxR2", + "id": "O52N-mQt", "settings": { - "spacing": {}, + "spacing": { + "padding": [ + 16, + 0, + 0, + 0 + ] + }, "backgroundColor": "transparent", - "gap": 6 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 }, "cells": [ { - "id": "56oDVp2W", + "id": "KC83LHUD", "settings": { "spacing": {}, "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 50 }, "atoms": [ { - "id": "3qEJZobA", - "type": "image", - "src": "img/bose.png", - "link": "https://www.bose.com", - "alt": "Bose", - "width": 110, + "id": "JQRpFzd9", + "type": "text", + "value": "

02 / FOCUS

Remove one choice before adding another.

A second card that changes rhythm, not just media.

", + "color": "#1F1712", "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], "padding": [ 0, 0, 0, 0 - ] - } - } - ], - "rows": [] - }, - { - "id": "kqwGqJxt", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" - }, - "atoms": [ - { - "id": "Xc9LeU91", - "type": "image", - "src": "img/microsoft.png", - "link": "https://www.microsoft.com", - "alt": "Microsoft", - "width": 110, - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 ], - "padding": [ - 0, - 0, - 0, - 0 - ] - } - } - ], - "rows": [] - }, - { - "id": "QHM_DT9V", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" - }, - "atoms": [ - { - "id": "usPiXU6a", - "type": "image", - "src": "img/coca-cola.png", - "link": "https://www.coca-cola.com", - "alt": "Coca-Cola", - "width": 110, - "spacing": { "margin": [ 0, 0, 0, 0 - ], - "padding": [ - 0, - 0, - 0, - 0 ] } } @@ -332,29 +158,38 @@ "rows": [] }, { - "id": "h95NNJSV", + "id": "C_rZRav0", "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" + "spacing": { + "padding": [ + 18, + 12, + 18, + 12 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 50 }, "atoms": [ { - "id": "Rco-8VLA", + "id": "sE-ARzi6", "type": "image", - "src": "img/facebook.png", - "link": "https://www.facebook.com", - "alt": "Facebook", - "width": 110, + "src": "img/catalog/devices/gaming-mouse.png", + "link": "https://card.email/read", + "alt": "Orange gaming mouse", + "width": 145, "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, diff --git a/src/features/email-preview/catalog/blocks/content7.json b/src/features/email-preview/catalog/blocks/content7.json index 9249746..33bfdd5 100644 --- a/src/features/email-preview/catalog/blocks/content7.json +++ b/src/features/email-preview/catalog/blocks/content7.json @@ -5,37 +5,32 @@ "type": "content", "preview": "img/components/content-7.png", "block": { - "id": "fsFNaNTV", + "id": "4eyZc_uR", "label": "Content 7", "settings": { "spacing": { "padding": [ - 30, - 24, - 30, - 24 + 34, + 32, + 34, + 32 ] }, "backgroundColor": "#FFFFFF" }, "rows": [ { - "id": "HzD-rrsU", + "id": "GA9wLfH_", "settings": { - "spacing": { - "padding": [ - 0, - 0, - 20, - 0 - ] - }, + "spacing": {}, "backgroundColor": "transparent", - "gap": 20 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 }, "cells": [ { - "id": "pk0AmWCO", + "id": "f0lEZ8uM", "settings": { "spacing": {}, "backgroundColor": "transparent", @@ -44,18 +39,18 @@ }, "atoms": [ { - "id": "_4YhF2Jn", + "id": "BiP9yJb7", "type": "text", - "value": "

12 July '19

How Music Affects
Your Productivity

Music is regarded as one of the triumphs of human creativity.

", - "color": "#111111", + "value": "

A SIMPLE PROCESS

From rough thought to useful draft.

", + "color": "#1F1712", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, @@ -65,59 +60,57 @@ } ], "rows": [] - }, - { - "id": "73wUlmJu", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "link": "https://example.com", - "verticalAlign": "top", - "horizontalAlign": "left", - "borderRadius": 5, - "backgroundImage": { - "url": "img/juja-han-HU-uL54pfQI-unsplash.jpg", - "position": "center", - "repeat": "no-repeat", - "size": "cover" - }, - "height": 200 - }, - "atoms": [], - "rows": [] } ] }, { - "id": "mY7szVgg", + "id": "1_W5gh_S", "settings": { - "spacing": {}, + "spacing": { + "padding": [ + 18, + 0, + 0, + 0 + ] + }, "backgroundColor": "transparent", - "gap": 20 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 14 }, "cells": [ { - "id": "v9MMIqVk", + "id": "HzAuxeeN", "settings": { - "spacing": {}, - "backgroundColor": "transparent", + "spacing": { + "padding": [ + 22, + 18, + 22, + 18 + ] + }, + "backgroundColor": "#FFF3E6", "verticalAlign": "top", - "horizontalAlign": "left" + "horizontalAlign": "left", + "borderRadius": 16, + "width": 33 }, "atoms": [ { - "id": "yrxGoyZX", + "id": "trfDWQ5D", "type": "text", - "value": "

12 July '19

Background Music for
Coding

Do you guys use background music while coding?

", - "color": "#111111", + "value": "

01

Frame it

Write the real question before searching for the answer.

", + "color": "#1F1712", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, @@ -129,23 +122,85 @@ "rows": [] }, { - "id": "8VfCXwmo", + "id": "4piDPUUK", "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "link": "https://example.com", + "spacing": { + "padding": [ + 22, + 18, + 22, + 18 + ] + }, + "backgroundColor": "#FFD9B8", "verticalAlign": "top", "horizontalAlign": "left", - "borderRadius": 5, - "backgroundImage": { - "url": "img/jefferson-santos-9SoCnyQmkzI-unsplash.jpg", - "position": "center", - "repeat": "no-repeat", - "size": "cover" + "borderRadius": 16, + "width": 33 + }, + "atoms": [ + { + "id": "-WC2btDJ", + "type": "text", + "value": "

02

Shape it

Choose a clear order and remove the duplicate moves.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "CafRzuBt", + "settings": { + "spacing": { + "padding": [ + 22, + 18, + 22, + 18 + ] }, - "height": 200 + "backgroundColor": "#FFF3E6", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 16, + "width": 33 }, - "atoms": [], + "atoms": [ + { + "id": "bRmm9rD8", + "type": "text", + "value": "

03

Share it

End with a next step the reader can actually take.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], "rows": [] } ] diff --git a/src/features/email-preview/catalog/blocks/content8.json b/src/features/email-preview/catalog/blocks/content8.json index dab5852..9f3604c 100644 --- a/src/features/email-preview/catalog/blocks/content8.json +++ b/src/features/email-preview/catalog/blocks/content8.json @@ -5,119 +5,136 @@ "type": "content", "preview": "img/components/content-8.png", "block": { - "id": "pZTbKD3n", + "id": "IuR5_OHg", "label": "Content 8", "settings": { "spacing": { "padding": [ - 30, - 24, - 30, - 24 + 34, + 32, + 34, + 32 ] }, - "backgroundColor": "#FFFFFF" + "backgroundColor": "#FFF3E6" }, "rows": [ { - "id": "bqAiH89k", + "id": "qVA-FWAj", "settings": { - "spacing": { - "padding": [ - 0, - 0, - 20, - 0 - ] - }, + "spacing": {}, "backgroundColor": "transparent", - "gap": 20 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 24 }, "cells": [ { - "id": "8GBmD2St", + "id": "w0AT4TBC", "settings": { "spacing": {}, "backgroundColor": "transparent", - "link": "https://example.com", - "verticalAlign": "top", + "verticalAlign": "middle", "horizontalAlign": "left", - "borderRadius": 5, - "backgroundImage": { - "url": "img/juja-han-HU-uL54pfQI-unsplash.jpg", - "position": "center", - "repeat": "no-repeat", - "size": "cover" - }, - "height": 200 - }, - "atoms": [], - "rows": [] - }, - { - "id": "A_Y0OUdR", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" + "width": 60 }, "atoms": [ { - "id": "OD3QnWtJ", + "id": "7v_ir1ty", "type": "text", - "value": "

12 July '19

How Music Affects
Your Productivity

Music is regarded as one of the triumphs of human creativity.

", - "color": "#111111", + "value": "

PACKING CHECKLIST

Five decisions before the door closes.

", + "color": "#1F1712", "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], "margin": [ 0, 0, 0, 0 + ] + } + }, + { + "id": "0hzFeZWU", + "type": "divider", + "color": "#FFD9B8", + "height": 1, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 ], + "margin": [ + 18, + 0, + 18, + 0 + ] + } + }, + { + "id": "E-_oBgGj", + "type": "text", + "value": "

✓ Keep one layer within reach

✓ Separate work from charging

✓ Leave room for the return trip

✓ Put the fragile piece in the center

✓ Photograph the final arrangement

", + "color": "#5A2B0A", + "spacing": { "padding": [ 0, 0, 0, 0 + ], + "margin": [ + 0, + 0, + 0, + 0 ] } } ], "rows": [] - } - ] - }, - { - "id": "-gwgrLyo", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "gap": 20 - }, - "cells": [ + }, { - "id": "RluJbUw3", + "id": "Nywddyq7", "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" + "spacing": { + "padding": [ + 20, + 12, + 0, + 12 + ] + }, + "backgroundColor": "#FF6B00", + "verticalAlign": "bottom", + "horizontalAlign": "center", + "borderRadius": 18, + "width": 40 }, "atoms": [ { - "id": "rcVVzeQc", - "type": "text", - "value": "

12 July '19

Background Music for
Coding

Do you guys use background music while coding?

", - "color": "#111111", + "id": "DSjLoABi", + "type": "image", + "src": "img/catalog/fashion-travel/carry-on-suitcase.png", + "link": "https://card.email/read", + "alt": "Orange carry-on suitcase", + "width": 210, "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, @@ -127,26 +144,6 @@ } ], "rows": [] - }, - { - "id": "8sGBp2tE", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "link": "https://example.com", - "verticalAlign": "top", - "horizontalAlign": "left", - "borderRadius": 5, - "backgroundImage": { - "url": "img/jefferson-santos-9SoCnyQmkzI-unsplash.jpg", - "position": "center", - "repeat": "no-repeat", - "size": "cover" - }, - "height": 200 - }, - "atoms": [], - "rows": [] } ] } diff --git a/src/features/email-preview/catalog/blocks/content9.json b/src/features/email-preview/catalog/blocks/content9.json index 61ccbec..62741b4 100644 --- a/src/features/email-preview/catalog/blocks/content9.json +++ b/src/features/email-preview/catalog/blocks/content9.json @@ -5,223 +5,66 @@ "type": "content", "preview": "img/components/content-9.png", "block": { - "id": "byw0gxx5", + "id": "IhfajeWJ", "label": "Content 9", "settings": { "spacing": { "padding": [ - 30, - 24, - 30, - 24 + 34, + 32, + 34, + 32 ] }, - "backgroundColor": "#FFFFFF" + "backgroundColor": "#FFF9F3" }, "rows": [ { - "id": "o9Bxcepy", + "id": "nOPor4b2", "settings": { - "spacing": { - "padding": [ - 0, - 0, - 8, - 0 - ] - }, - "backgroundColor": "transparent", - "gap": 20 - }, - "cells": [ - { - "id": "wMzQc_Yg", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" - }, - "atoms": [ - { - "id": "I_p8z3pD", - "type": "text", - "value": "

Staying in shape is mostly about program compliance: it’s not about having the best fitness program, but about having one that’s good enough, and making sure you actually stick to it.

", - "color": "#111111", - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 0, - 0, - 0, - 0 - ] - } - } - ], - "rows": [] - }, - { - "id": "HgMwKzqC", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" - }, - "atoms": [ - { - "id": "Kph63160", - "type": "text", - "value": "

There’s a common saying that willpower is like a muscle: it gets stronger when you use it. The truth is more complex. There’s mixed evidence for how much people can really improve their self-control.

", - "color": "#111111", - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 0, - 0, - 0, - 0 - ] - } - } - ], - "rows": [] - } - ] - }, - { - "id": "BSIKtOha", - "settings": { - "spacing": { - "padding": [ - 0, - 0, - 8, - 0 - ] - }, + "spacing": {}, "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, "gap": 20 }, "cells": [ { - "id": "BdLQk58x", + "id": "2wt_qp9C", "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" + "spacing": { + "padding": [ + 16, + 8, + 0, + 8 + ] + }, + "backgroundColor": "#FF6B00", + "verticalAlign": "bottom", + "horizontalAlign": "center", + "borderRadius": 18, + "width": 38 }, "atoms": [ { - "id": "HUml9vPF", + "id": "K28m_4W8", "type": "image", - "src": "img/jack-finnigan-rriAI0nhcbc-unsplash.jpg", - "link": "https://example.com", - "alt": "Mike Brown", - "width": 80, - "borderRadius": 60, + "src": "img/catalog/presenters/skincare-presenter.png", + "link": "https://card.email/read", + "alt": "Presenter holding an orange skincare bottle", + "width": 205, "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], "padding": [ 0, 0, 0, 0 - ] - }, - "height": 80 - } - ], - "rows": [] - }, - { - "id": "rM9nzREo", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" - }, - "atoms": [ - { - "id": "XOx4MGbD", - "type": "image", - "src": "img/tamara-bellis-Mn1Uopx7if8-unsplash.jpg", - "link": "https://example.com", - "alt": "Lina Muller", - "width": 80, - "borderRadius": 60, - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 ], - "padding": [ - 0, - 0, - 0, - 0 - ] - }, - "height": 80 - } - ], - "rows": [] - } - ] - }, - { - "id": "FM8vTM7T", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "gap": 20 - }, - "cells": [ - { - "id": "6RlaH1aK", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" - }, - "atoms": [ - { - "id": "E40VmNJF", - "type": "text", - "value": "

Mike Brown
Fitness Trainer

", - "color": "#111111", - "spacing": { "margin": [ 0, 0, - 0, - 0 - ], - "padding": [ - 0, - 0, - 0, + -4, 0 ] } @@ -230,27 +73,35 @@ "rows": [] }, { - "id": "onDISXbL", + "id": "bOeDwo-M", "settings": { - "spacing": {}, + "spacing": { + "padding": [ + 18, + 4, + 18, + 8 + ] + }, "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 62 }, "atoms": [ { - "id": "EOF-u46_", + "id": "hahnW7Uy", "type": "text", - "value": "

Lina Muller
Bloger

", - "color": "#111111", + "value": "

“

The message finally sounds like the people who made it.

A single testimonial with enough space for a real point of view.

Amelia Reed
Brand director, North Studio

", + "color": "#1F1712", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, diff --git a/src/features/email-preview/catalog/blocks/cta-1.json b/src/features/email-preview/catalog/blocks/cta-1.json index 7c16d9f..a79f6ad 100644 --- a/src/features/email-preview/catalog/blocks/cta-1.json +++ b/src/features/email-preview/catalog/blocks/cta-1.json @@ -5,58 +5,63 @@ "type": "cta", "preview": "img/components/cta-1.png", "block": { - "id": "PC8OjbZy", + "id": "fqhMP-RM", "label": "CTA 1", "settings": { "spacing": { "padding": [ - 30, - 24, - 0, - 24 + 18, + 22, + 18, + 22 ] }, - "backgroundColor": "#222" + "backgroundColor": "#FFF3E6" }, "rows": [ { - "id": "Jei3t7RM", + "id": "R1uVLKOV", "settings": { - "spacing": { - "padding": [ - 0, - 0, - 0, - 0 - ] - }, + "spacing": {}, "backgroundColor": "transparent", - "gap": 0, - "collapseOnMobile": true + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 }, "cells": [ { - "id": "c30bKTgY", + "id": "OPlWUBxC", "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" + "spacing": { + "padding": [ + 10, + 8, + 10, + 8 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 20 }, "atoms": [ { - "id": "VMFQ_DW0", - "type": "text", - "value": "

New series

Unheard of Power.

With our latest model of laptop,
you'll get the most amazing features
in your professional work.

", - "color": "#ffffff", + "id": "mC7J3Pn3", + "type": "image", + "src": "img/catalog/products/travel-mug.png", + "link": "https://card.email/catalog", + "alt": "Orange insulated travel mug", + "width": 92, "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, @@ -66,109 +71,55 @@ } ], "rows": [] - } - ] - }, - { - "id": "UON3FLuL", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "hiddenOnMobile": false, - "collapseOnMobile": true, - "gap": 0 - }, - "cells": [ + }, { - "id": "aLdfxtXA", + "id": "EFteAx_c", "settings": { - "spacing": { - "padding": [ - 20, - 0, - 0, - 0 - ] - }, + "spacing": {}, "backgroundColor": "transparent", - "hiddenOnMobile": false, - "verticalAlign": "top", - "horizontalAlign": "center" + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 48 }, "atoms": [ { - "id": "uSpg_gKB", - "type": "button", - "text": "By Now", - "link": "https://example.com", - "backgroundColor": "#4F46E5", - "color": "#FFFFFF", - "fontSize": 16, - "borderRadius": 4, - "padding": [ - 12, - 24, - 12, - 24 - ], + "id": "pCyXMyDz", + "type": "text", + "value": "

READY TO SHIP

Travel mug · Sand
Keeps the next cup close.

", + "color": "#1F1712", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ - 12, - 24, - 12, - 24 + "margin": [ + 0, + 0, + 0, + 0 ] } } ], "rows": [] - } - ] - }, - { - "id": "vBcPLw-h", - "settings": { - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 20, - 0, - 0, - 0 - ] }, - "backgroundColor": "transparent", - "gap": 0, - "collapseOnMobile": true - }, - "cells": [ { - "id": "IV4vFfkq", + "id": "g9N4F1cJ", "settings": { "spacing": {}, "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center", - "borderRadius": 0 + "verticalAlign": "middle", + "horizontalAlign": "right", + "width": 32 }, "atoms": [ { - "id": "Vc_jNqy8", - "type": "image", - "src": "img/mbp-13-space.png", - "link": "https://example.com", - "alt": "Some alt", + "id": "6sHma63z", + "type": "text", + "value": "

$28

", + "color": "#1F1712", "spacing": { "padding": [ 0, @@ -179,7 +130,37 @@ "margin": [ 0, 0, - -3, + 0, + 0 + ] + } + }, + { + "id": "ErHj_IAL", + "type": "button", + "text": "Add to cart", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 6, + 0, + 0, 0 ] } @@ -191,4 +172,4 @@ } ] } -} \ No newline at end of file +} diff --git a/src/features/email-preview/catalog/blocks/cta-10.json b/src/features/email-preview/catalog/blocks/cta-10.json new file mode 100644 index 0000000..293225a --- /dev/null +++ b/src/features/email-preview/catalog/blocks/cta-10.json @@ -0,0 +1,145 @@ +{ + "version": 2, + "name": "cta-10", + "label": "CTA 10", + "type": "cta", + "preview": "img/components/cta-10.png", + "block": { + "id": "NZX9QvXr", + "label": "CTA 10", + "settings": { + "spacing": { + "padding": [ + 18, + 22, + 18, + 22 + ] + }, + "backgroundColor": "#1F1712" + }, + "rows": [ + { + "id": "Fq-nMg0C", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 12 + }, + "cells": [ + { + "id": "bOBsX08W", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "width": 14 + }, + "atoms": [ + { + "id": "7jMLgLOa", + "type": "text", + "value": "

SEP
24

", + "color": "#FFFFFF", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "k_2Q9JK6", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 61 + }, + "atoms": [ + { + "id": "mjGqHLSN", + "type": "text", + "value": "

Workshop starts at 10:00.
12 seats remain · calendar invite included

", + "color": "#FFFFFF", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "Ct8umbxS", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "right", + "width": 25 + }, + "atoms": [ + { + "id": "3tJayKJE", + "type": "button", + "text": "Register", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/cta-11.json b/src/features/email-preview/catalog/blocks/cta-11.json new file mode 100644 index 0000000..f77bb89 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/cta-11.json @@ -0,0 +1,118 @@ +{ + "version": 2, + "name": "cta-11", + "label": "CTA 11", + "type": "cta", + "preview": "img/components/cta-11.png", + "block": { + "id": "wKuMaCvH", + "label": "CTA 11", + "settings": { + "spacing": { + "padding": [ + 38, + 54, + 38, + 54 + ] + }, + "backgroundColor": "#FFF3E6" + }, + "rows": [ + { + "id": "fDORtH0K", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "868pWqUt", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center" + }, + "atoms": [ + { + "id": "6HbFijHe", + "type": "text", + "value": "

THE WEEKLY CIRCLE

Good ideas get better in company.

Join makers sharing useful work, honest notes and fresh references.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "nwGZlm0N", + "type": "divider", + "color": "#FFD9B8", + "height": 1, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 18, + 0, + 18, + 0 + ] + } + }, + { + "id": "YA2fm2ye", + "type": "button", + "text": "Join the community", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/cta-12.json b/src/features/email-preview/catalog/blocks/cta-12.json new file mode 100644 index 0000000..5796210 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/cta-12.json @@ -0,0 +1,133 @@ +{ + "version": 2, + "name": "cta-12", + "label": "CTA 12", + "type": "cta", + "preview": "img/components/cta-12.png", + "block": { + "id": "pG8jYpIG", + "label": "CTA 12", + "settings": { + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#1F1712" + }, + "rows": [ + { + "id": "fNd2e9HK", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 22 + }, + "cells": [ + { + "id": "HojzZ1Fr", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 68 + }, + "atoms": [ + { + "id": "XVSupRAC", + "type": "text", + "value": "

FREE FIELD GUIDE / PDF

A practical checklist for the next campaign.

A resource-first block that works without decorative imagery.

", + "color": "#FFFFFF", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "C7oDDCnS", + "settings": { + "spacing": {}, + "backgroundColor": "#FFFFFF", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 32 + }, + "atoms": [ + { + "id": "L1-mShjH", + "type": "text", + "value": "

18

ACTIONABLE PAGES

", + "color": "#1F1712", + "spacing": { + "padding": [ + 18, + 12, + 0, + 12 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "VGUC756S", + "type": "button", + "text": "Download guide", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 12, + 12, + 18, + 12 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/cta-2.json b/src/features/email-preview/catalog/blocks/cta-2.json index 25619ee..71e7354 100644 --- a/src/features/email-preview/catalog/blocks/cta-2.json +++ b/src/features/email-preview/catalog/blocks/cta-2.json @@ -5,109 +5,45 @@ "type": "cta", "preview": "img/components/cta-2.png", "block": { - "id": "cajcM2yk", + "id": "TNr6K-87", "label": "CTA 2", "settings": { "spacing": { "padding": [ - 30, 24, - 0, - 24 + 28, + 24, + 28 ] }, - "backgroundColor": "#ffffff" + "backgroundColor": "#FF6B00" }, "rows": [ { - "id": "p13qp213", + "id": "EZVpDfmD", "settings": { - "spacing": { - "padding": [ - 0, - 0, - 0, - 0 - ] - }, + "spacing": {}, "backgroundColor": "transparent", - "gap": 0, - "collapseOnMobile": true + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 20 }, "cells": [ { - "id": "UkZ4bt2N", + "id": "ob8kMMpt", "settings": { "spacing": {}, "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 68 }, "atoms": [ { - "id": "LXZu7iaI", + "id": "sMKaQTzi", "type": "text", - "value": "

New series

Ultra Black Edition

", - "color": "#000000", - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 0, - 0, - 0, - 0 - ] - } - } - ], - "rows": [] - } - ] - }, - { - "id": "D5IbZb2l", - "settings": { - "spacing": { - "padding": [ - 20, - 0, - 0, - 0 - ] - }, - "backgroundColor": "transparent", - "gap": 0, - "collapseOnMobile": true - }, - "cells": [ - { - "id": "3AexSn18", - "settings": { - "spacing": { - "padding": [ - 0, - 0, - 0, - 0 - ] - }, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center", - "borderRadius": 0 - }, - "atoms": [ - { - "id": "vB-Rwrql", - "type": "image", - "src": "img/diesel-watch-1x1.jpg", - "link": "https://example.com", - "alt": "Some alt", + "value": "

Ready to make the next send count?

A compact prompt for one high-priority action.

", + "color": "#1F1712", "spacing": { "padding": [ 0, @@ -125,82 +61,43 @@ } ], "rows": [] - } - ] - }, - { - "id": "tL7pyU1u", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "hiddenOnMobile": false, - "collapseOnMobile": true, - "gap": 0 - }, - "cells": [ + }, { - "id": "UKaAReLP", + "id": "XL3DT41V", "settings": { - "spacing": { - "padding": [ - 0, - 0, - 30, - 0 - ] - }, + "spacing": {}, "backgroundColor": "transparent", - "hiddenOnMobile": false, - "verticalAlign": "top", - "horizontalAlign": "center" + "verticalAlign": "middle", + "horizontalAlign": "right", + "width": 32 }, "atoms": [ { - "id": "tVnwrrkE", - "type": "text", - "value": "

With our latest model of watch,
you'll get the most amazing features
for your everyday workout.

", - "color": "#111827", - "spacing": { - "padding": [ - 0, - 0, - 0, - 0 - ], - "margin": [ - 0, - 0, - 0, - 0 - ] - } - }, - { - "id": "g1BUUYbe", + "id": "OZAbBBTE", "type": "button", - "text": "By Now", - "link": "https://example.com", - "backgroundColor": "#4F46E5", + "text": "Start now", + "link": "https://card.email/start", + "backgroundColor": "#1F1712", "color": "#FFFFFF", - "fontSize": 16, - "borderRadius": 4, + "fontSize": 15, + "borderRadius": 10, "padding": [ - 12, - 24, - 12, - 24 + 13, + 20, + 13, + 20 ], "spacing": { "padding": [ - 12, - 24, - 12, - 24 + 13, + 20, + 13, + 20 ], "margin": [ - 30, 0, - 30, + 0, + 0, 0 ] } @@ -212,4 +109,4 @@ } ] } -} \ No newline at end of file +} diff --git a/src/features/email-preview/catalog/blocks/cta-3.json b/src/features/email-preview/catalog/blocks/cta-3.json index e99047e..5b09597 100644 --- a/src/features/email-preview/catalog/blocks/cta-3.json +++ b/src/features/email-preview/catalog/blocks/cta-3.json @@ -5,65 +5,52 @@ "type": "cta", "preview": "img/components/cta-3.png", "block": { - "id": "reAedTLK", + "id": "YQxg4bES", "label": "CTA 3", "settings": { "spacing": { "padding": [ - 30, - 24, - 0, - 24 + 20, + 22, + 20, + 22 ] }, - "backgroundColor": "#ffffff" + "backgroundColor": "#FFD9B8" }, "rows": [ { - "id": "ZT-tsz1E", + "id": "L92K6o4e", "settings": { - "spacing": { - "padding": [ - 20, - 0, - 0, - 0 - ] - }, + "spacing": {}, "backgroundColor": "transparent", - "gap": 0, - "collapseOnMobile": true + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 }, "cells": [ { - "id": "nrhxQPd7", + "id": "kb9uH45T", "settings": { - "spacing": { - "padding": [ - 0, - 0, - 0, - 0 - ] - }, - "backgroundColor": "transparent", - "verticalAlign": "top", + "spacing": {}, + "backgroundColor": "#1F1712", + "verticalAlign": "middle", "horizontalAlign": "center", - "borderRadius": 0 + "borderRadius": 14, + "width": 18 }, "atoms": [ { - "id": "nYVGGNr5", - "type": "image", - "src": "img/adidas-real-deal-damien-lillard-hirere-black1-blapur.png", - "link": "https://example.com", - "alt": "Some alt", + "id": "IYjxIqzS", + "type": "text", + "value": "

07
LEFT TODAY

", + "color": "#FFFFFF", "spacing": { "padding": [ - 0, - 0, - 0, - 0 + 14, + 8, + 14, + 8 ], "margin": [ 0, @@ -75,41 +62,22 @@ } ], "rows": [] - } - ] - }, - { - "id": "nXujubXY", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "hiddenOnMobile": false, - "collapseOnMobile": true, - "gap": 0 - }, - "cells": [ + }, { - "id": "kbYmXTrr", + "id": "kts3l7e_", "settings": { - "spacing": { - "padding": [ - 0, - 0, - 30, - 0 - ] - }, + "spacing": {}, "backgroundColor": "transparent", - "hiddenOnMobile": false, - "verticalAlign": "top", - "horizontalAlign": "center" + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 57 }, "atoms": [ { - "id": "A8JWkFOh", + "id": "YC4Yo_-d", "type": "text", - "value": "

Impossible is Nothing

Changing the game isn't easy and before long,
haters came out of the woodwork.

", - "color": "#111827", + "value": "

Almost gone, not forgotten.

Get one short availability reminder before the batch closes.

", + "color": "#1F1712", "spacing": { "padding": [ 0, @@ -124,33 +92,46 @@ 0 ] } - }, + } + ], + "rows": [] + }, + { + "id": "rPCP6PRG", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "right", + "width": 25 + }, + "atoms": [ { - "id": "0jAA0rod", + "id": "ZgRYVo3F", "type": "button", - "text": "By Now", - "link": "https://example.com", - "backgroundColor": "#4F46E5", + "text": "Remind me", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", "color": "#FFFFFF", - "fontSize": 16, - "borderRadius": 4, + "fontSize": 15, + "borderRadius": 10, "padding": [ - 12, - 24, - 12, - 24 + 13, + 20, + 13, + 20 ], "spacing": { "padding": [ - 12, - 24, - 12, - 24 + 13, + 20, + 13, + 20 ], "margin": [ - 30, 0, - 20, + 0, + 0, 0 ] } @@ -162,4 +143,4 @@ } ] } -} \ No newline at end of file +} diff --git a/src/features/email-preview/catalog/blocks/cta-4.json b/src/features/email-preview/catalog/blocks/cta-4.json index 1a0e83e..82bf0e9 100644 --- a/src/features/email-preview/catalog/blocks/cta-4.json +++ b/src/features/email-preview/catalog/blocks/cta-4.json @@ -5,103 +5,106 @@ "type": "cta", "preview": "img/components/cta-4.png", "block": { - "id": "ClmBKojY", + "id": "zajaCYcH", "label": "CTA 4", "settings": { "spacing": { "padding": [ - 30, - 24, - 40, - 24 + 18, + 20, + 18, + 20 ] }, - "backgroundColor": "#FFFFFF" + "backgroundColor": "#1F1712" }, "rows": [ { - "id": "zxNj8oXT", + "id": "z791n21w", "settings": { - "spacing": { - "padding": [ - 0, - 0, - 0, - 0 - ] - }, + "spacing": {}, "backgroundColor": "transparent", - "gap": 0 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 12 }, "cells": [ { - "id": "ZlwrhDY4", + "id": "3brKq_6K", "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", + "spacing": { + "padding": [ + 12, + 8, + 12, + 8 + ] + }, + "backgroundColor": "#FF6B00", + "verticalAlign": "middle", "horizontalAlign": "center", - "borderRadius": 0 + "borderRadius": 14, + "width": 20 }, "atoms": [ { - "id": "NJyiCnVv", + "id": "jcr7-5Vv", "type": "image", - "src": "img/app-icon.png", - "link": "https://example.com", - "alt": "Image", - "width": 100, + "src": "img/catalog/products/headphones.png", + "link": "https://card.email/catalog", + "alt": "Orange over-ear headphones", + "width": 105, "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, 0 ] - }, - "height": 100 + } } ], "rows": [] - } - ] - }, - { - "id": "VqoC5LzN", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ + }, { - "id": "dnPChd18", + "id": "r-trAGvU", "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" + "spacing": { + "padding": [ + 12, + 8, + 12, + 8 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 20 }, "atoms": [ { - "id": "DDHGlbdz", - "type": "text", - "value": "

The Circle

GPS tracker for running and fitness.
Unique features used by professional athletes
are now also available for beginners!

", - "color": "#000000", + "id": "FD66wBZG", + "type": "image", + "src": "img/catalog/fashion-travel/tote-bag.png", + "link": "https://card.email/catalog", + "alt": "Orange tote bag", + "width": 105, "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, @@ -111,84 +114,68 @@ } ], "rows": [] - } - ] - }, - { - "id": "U6Xz1BQb", - "settings": { - "spacing": { - "padding": [ - 22, - 0, - 0, - 0 - ] }, - "backgroundColor": "transparent", - "gap": 12, - "collapseOnMobile": false - }, - "cells": [ { - "id": "Re3-2NB4", + "id": "1QvMEXrN", "settings": { - "spacing": {}, + "spacing": { + "padding": [ + 10, + 4, + 10, + 10 + ] + }, "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "right" + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 60 }, "atoms": [ { - "id": "pIgqlo4I", - "type": "image", - "src": "img/app-store.png", - "link": "https://example.com", - "alt": "Download on the App Store", - "width": 150, + "id": "eh-2vEfK", + "type": "text", + "value": "

THE EDIT

Two useful things. One short list.

", + "color": "#FFFFFF", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, 0 ] } - } - ], - "rows": [] - }, - { - "id": "sgNuIkmG", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" - }, - "atoms": [ + }, { - "id": "jWQPxf_r", - "type": "image", - "src": "img/google-play.png", - "link": "https://example.com", - "alt": "Get it on Google Play", - "width": 150, + "id": "IdFctHx3", + "type": "button", + "text": "Browse the edit", + "link": "https://card.email/start", + "backgroundColor": "#FFFFFF", + "color": "#1F1712", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], "padding": [ - 0, + 13, + 20, + 13, + 20 + ], + "margin": [ + 10, 0, 0, 0 @@ -202,4 +189,4 @@ } ] } -} \ No newline at end of file +} diff --git a/src/features/email-preview/catalog/blocks/cta-5.json b/src/features/email-preview/catalog/blocks/cta-5.json index 74269e0..4776bfa 100644 --- a/src/features/email-preview/catalog/blocks/cta-5.json +++ b/src/features/email-preview/catalog/blocks/cta-5.json @@ -3,67 +3,58 @@ "name": "cta-5", "label": "CTA 5", "type": "cta", - "preview": "img/components/cta-6.png", + "preview": "img/components/cta-5.png", "block": { - "id": "CfqOE--_", + "id": "kuCQ4FSZ", "label": "CTA 5", "settings": { "spacing": { "padding": [ - 30, - 35, - 30, - 35 + 20, + 22, + 20, + 22 ] }, - "backgroundColor": "#FFFFFF", - "backgroundImage": { - "url": "public/img/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg", - "repeat": "no-repeat", - "size": "cover", - "position": "center" - } + "backgroundColor": "#FFFFFF" }, "rows": [ { - "id": "moJYR8se", + "id": "KOQrfTEs", "settings": { "spacing": {}, "backgroundColor": "transparent", "hiddenOnMobile": false, "collapseOnMobile": true, - "gap": 0, - "backgroundImage": { - "url": "", - "repeat": "no-repeat", - "size": "cover", - "position": "center" - } + "gap": 14 }, "cells": [ { - "id": "yy7-eOFT", + "id": "rVXN7OJK", "settings": { "spacing": {}, "backgroundColor": "transparent", - "hiddenOnMobile": false, - "verticalAlign": "top", - "horizontalAlign": "left" + "verticalAlign": "middle", + "horizontalAlign": "center", + "width": 18 }, "atoms": [ { - "id": "QOLbPV9p", - "type": "text", - "value": "

New series

Overtaking the Down

", - "color": "#ffffff", + "id": "5xqvujCw", + "type": "image", + "src": "img/catalog/avatars/speaker-presenter-avatar.png", + "link": "https://card.email/catalog", + "alt": "Portrait of live session host Maya Chen", + "width": 78, + "borderRadius": 999, "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, @@ -73,59 +64,30 @@ } ], "rows": [] - } - ] - }, - { - "id": "ur9Hw5vX", - "settings": { - "spacing": { - "padding": [ - 110, - 0, - 110, - 0 - ] }, - "backgroundColor": "transparent", - "hiddenOnMobile": false, - "collapseOnMobile": true, - "gap": 0 - }, - "cells": [ { - "id": "4ndRSSHg", + "id": "-EamFrRq", "settings": { - "spacing": { - "padding": [ - 0, - 0, - 0, - 0 - ] - }, + "spacing": {}, "backgroundColor": "transparent", - "hiddenOnMobile": false, - "verticalAlign": "top", - "horizontalAlign": "center" + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 57 }, "atoms": [ { - "id": "JK1375MM", - "type": "image", - "src": "img/play-button-white.png", - "link": "https://example.com", - "alt": "Image", - "width": 56, - "borderRadius": 0, + "id": "BNwrrlq7", + "type": "text", + "value": "

OFFICE HOURS · 20 MIN

Bring one question. Leave with a next step.
Hosted by Maya Chen · Thursday at 14:00

", + "color": "#1F1712", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, @@ -135,48 +97,40 @@ } ], "rows": [] - } - ] - }, - { - "id": "OetbOi9C", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "hiddenOnMobile": false, - "collapseOnMobile": true, - "gap": 0, - "backgroundImage": { - "url": "", - "repeat": "no-repeat", - "size": "cover", - "position": "center" - } - }, - "cells": [ + }, { - "id": "iIRmA5-6", + "id": "vckkjYo4", "settings": { "spacing": {}, "backgroundColor": "transparent", - "hiddenOnMobile": false, - "verticalAlign": "top", - "horizontalAlign": "left" + "verticalAlign": "middle", + "horizontalAlign": "right", + "width": 25 }, "atoms": [ { - "id": "-10jd10k", - "type": "text", - "value": "

Single available on all platforms.
Creative Label © 2019

", - "color": "#ffffff", + "id": "rDbZF-WK", + "type": "button", + "text": "Save a seat", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ 0, 0, 0, @@ -191,4 +145,4 @@ } ] } -} \ No newline at end of file +} diff --git a/src/features/email-preview/catalog/blocks/cta-6.json b/src/features/email-preview/catalog/blocks/cta-6.json new file mode 100644 index 0000000..77a887f --- /dev/null +++ b/src/features/email-preview/catalog/blocks/cta-6.json @@ -0,0 +1,198 @@ +{ + "version": 2, + "name": "cta-6", + "label": "CTA 6", + "type": "cta", + "preview": "img/components/cta-6.png", + "block": { + "id": "ZrdI44Vu", + "label": "CTA 6", + "settings": { + "spacing": { + "padding": [ + 18, + 20, + 18, + 20 + ] + }, + "backgroundColor": "#FFFFFF" + }, + "rows": [ + { + "id": "jWS0YPSq", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 10 + }, + "cells": [ + { + "id": "VUzPYp9g", + "settings": { + "spacing": { + "padding": [ + 10, + 8, + 10, + 8 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 18 + }, + "atoms": [ + { + "id": "dNk-hbxo", + "type": "image", + "src": "img/catalog/devices/mini-pc.png", + "link": "https://card.email/catalog", + "alt": "Compact orange desktop computer", + "width": 78, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "086eJrTW", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 46 + }, + "atoms": [ + { + "id": "IZlpqRps", + "type": "text", + "value": "

DESKTOP APP · 4.2

Keep the workspace one click away.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "meiD4u4I", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "width": 18 + }, + "atoms": [ + { + "id": "S3hXsFlB", + "type": "button", + "text": "macOS", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "nVMVYKT3", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "width": 18 + }, + "atoms": [ + { + "id": "tORguqoq", + "type": "button", + "text": "Windows", + "link": "https://card.email/start", + "backgroundColor": "#FFD9B8", + "color": "#1F1712", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/cta-7.json b/src/features/email-preview/catalog/blocks/cta-7.json new file mode 100644 index 0000000..7393915 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/cta-7.json @@ -0,0 +1,171 @@ +{ + "version": 2, + "name": "cta-7", + "label": "CTA 7", + "type": "cta", + "preview": "img/components/cta-7.png", + "block": { + "id": "5YjBBPVU", + "label": "CTA 7", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ] + }, + "backgroundColor": "#1F1712" + }, + "rows": [ + { + "id": "HkeIh_cb", + "settings": { + "spacing": { + "padding": [ + 32, + 0, + 32, + 21 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 22 + }, + "cells": [ + { + "id": "oxzLWVog", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "backgroundImage": { + "url": "img/catalog/backgrounds/gradient-ribbons.png", + "repeat": "no-repeat", + "size": "cover", + "position": "center" + }, + "width": 46, + "height": 250 + }, + "atoms": [ + { + "id": "pKAr_VcY", + "type": "button", + "text": "▶ Play 2:14", + "link": "https://card.email/start", + "backgroundColor": "#FFFFFF", + "color": "#1F1712", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "6ctLZdmI", + "settings": { + "spacing": { + "padding": [ + 24, + 18, + 24, + 18 + ] + }, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 54 + }, + "atoms": [ + { + "id": "KmDA4bNP", + "type": "text", + "value": "

2 MINUTE STORY

See how the pieces come together.

A media-led CTA for demos and customer stories.

", + "color": "#FFFFFF", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "yIfrAXSr", + "type": "button", + "text": "Watch the film", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 18, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/cta-8.json b/src/features/email-preview/catalog/blocks/cta-8.json new file mode 100644 index 0000000..8e27dca --- /dev/null +++ b/src/features/email-preview/catalog/blocks/cta-8.json @@ -0,0 +1,155 @@ +{ + "version": 2, + "name": "cta-8", + "label": "CTA 8", + "type": "cta", + "preview": "img/components/cta-8.png", + "block": { + "id": "dcPg6jDA", + "label": "CTA 8", + "settings": { + "spacing": { + "padding": [ + 30, + 30, + 30, + 30 + ] + }, + "backgroundColor": "#FFFFFF" + }, + "rows": [ + { + "id": "sybHZlCz", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 12 + }, + "cells": [ + { + "id": "cyVwmngw", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 52 + }, + "atoms": [ + { + "id": "jwa-b8We", + "type": "text", + "value": "

Choose how you want to begin.

Two clear paths without turning the block into a full landing page.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "IKeDNocG", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "width": 19 + }, + "atoms": [ + { + "id": "dpM9KlW0", + "type": "button", + "text": "Start free", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "dfcZt74p", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "width": 25 + }, + "atoms": [ + { + "id": "GglarEDw", + "type": "button", + "text": "Book a demo", + "link": "https://card.email/start", + "backgroundColor": "#FFF3E6", + "color": "#1F1712", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/cta-9.json b/src/features/email-preview/catalog/blocks/cta-9.json new file mode 100644 index 0000000..aeac6e4 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/cta-9.json @@ -0,0 +1,145 @@ +{ + "version": 2, + "name": "cta-9", + "label": "CTA 9", + "type": "cta", + "preview": "img/components/cta-9.png", + "block": { + "id": "DdflOtXy", + "label": "CTA 9", + "settings": { + "spacing": { + "padding": [ + 24, + 26, + 0, + 26 + ] + }, + "backgroundColor": "#FFFFFF" + }, + "rows": [ + { + "id": "GxT6wjo4", + "settings": { + "spacing": {}, + "backgroundColor": "", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "ZA7skW0o", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "backgroundImage": { + "url": "", + "repeat": "no-repeat", + "size": "unset", + "position": "center" + } + }, + "atoms": [ + { + "id": "RT1qrGOJ", + "type": "image", + "src": "img/catalog/fashion-travel/puffer-jacket.png", + "link": "https://card.email/catalog", + "alt": "Orange puffer jacket", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "-7--loFQ", + "settings": { + "spacing": { + "padding": [ + 16, + 18, + 32, + 18 + ] + }, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 50 + }, + "atoms": [ + { + "id": "tBb48pb4", + "type": "text", + "value": "

48 HOURS ONLY

Take 20% off the layer everyone wants.

Use code WARM20

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "BKOyvtyT", + "type": "button", + "text": "Apply the offer", + "link": "https://card.email/start", + "backgroundColor": "#1F1712", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 18, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/ecommerce1.json b/src/features/email-preview/catalog/blocks/ecommerce1.json index 9acc85f..62baaff 100644 --- a/src/features/email-preview/catalog/blocks/ecommerce1.json +++ b/src/features/email-preview/catalog/blocks/ecommerce1.json @@ -5,36 +5,58 @@ "type": "ecommerce", "preview": "img/components/ecommerce-1.png", "block": { - "id": "E1BlockA", + "id": "BWpy2clH", "label": "E-Commerce 1", "settings": { - "spacing": { "padding": [30, 35, 30, 35] }, + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, "backgroundColor": "#FFFFFF" }, "rows": [ { - "id": "E1TopRow", + "id": "m-6kUTXR", "settings": { "spacing": {}, "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, "gap": 0 }, "cells": [ { - "id": "E1TopCel", + "id": "99ud85lR", "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", - "horizontalAlign": "right" + "horizontalAlign": "left" }, "atoms": [ { - "id": "E1TopTxt", + "id": "QPcoKmxv", "type": "text", - "value": "

See all ➝

", - "color": "#000000", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "value": "

THE DESK EDIT

One featured upgrade, three useful additions.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -42,96 +64,363 @@ ] }, { - "id": "E1ImgRow", + "id": "FEdUsrgi", "settings": { - "spacing": { "padding": [0, 0, 20, 0] }, + "spacing": { + "padding": [ + 18, + 0, + 0, + 0 + ] + }, "backgroundColor": "transparent", - "gap": 0 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 14 }, "cells": [ { - "id": "E1ImgCel", + "id": "5OI-y1pr", "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" + "spacing": { + "padding": [ + 22, + 18, + 22, + 18 + ] + }, + "backgroundColor": "#1F1712", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 18, + "width": 50 }, "atoms": [ { - "id": "E1ImgAtm", + "id": "c-uVbdO2", "type": "image", - "src": "img/t-shirt-1.png", - "link": "https://example.com", - "alt": "Extended Shirt", - "width": 530, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] - }, - { - "id": "E1TxtRow", - "settings": { - "spacing": { "padding": [0, 0, 20, 0] }, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ - { - "id": "E1TxtCel", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" - }, - "atoms": [ + "src": "img/catalog/products/headphones.png", + "link": "https://card.email/features", + "alt": "Orange over-ear headphones", + "width": 210, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, { - "id": "E1CopyAA", + "id": "dh9WWP4B", "type": "text", - "value": "

New series

Extended Shirt

Hip Hop Basic Longline T-Shirt.

$24.99

", - "color": "#000000", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "value": "

FEATURED

Focus Headphones

Soft ear cups · wireless · 32h battery

$159

", + "color": "#FFFFFF", + "spacing": { + "padding": [ + 14, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "ZqTK_oUx", + "type": "button", + "text": "Add to setup", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 18, + 0, + 0, + 0 + ] + } } ], "rows": [] - } - ] - }, - { - "id": "E1CtaRow", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ + }, { - "id": "E1CtaCel", + "id": "esKeNXHH", "settings": { - "spacing": {}, - "backgroundColor": "transparent", + "spacing": { + "padding": [ + 10, + 10, + 10, + 10 + ] + }, + "backgroundColor": "#FFF3E6", "verticalAlign": "top", - "horizontalAlign": "center" + "horizontalAlign": "left", + "borderRadius": 18, + "width": 50 }, - "atoms": [ + "atoms": [], + "rows": [ { - "id": "E1Button", - "type": "button", - "text": "Buy Now", - "link": "https://example.com", - "backgroundColor": "#409EFF", - "color": "#FFFFFF", - "fontSize": 16, - "borderRadius": 3, - "padding": [12, 20, 12, 20], - "spacing": { "margin": [0, 0, 0, 0], "padding": [12, 20, 12, 20] } + "id": "M0_KQaN7", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 10 + }, + "cells": [ + { + "id": "U3f8jDAv", + "settings": { + "spacing": { + "padding": [ + 16, + 10, + 16, + 10 + ] + }, + "backgroundColor": "#FFF9F3", + "verticalAlign": "top", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 50 + }, + "atoms": [ + { + "id": "huamfjRJ", + "type": "image", + "src": "img/catalog/devices/webcam.png", + "link": "https://card.email/features", + "alt": "Compact orange webcam", + "width": 112, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "y8cp7u3B", + "type": "text", + "value": "

Desk Camera
4K · auto framing
$89

", + "color": "#1F1712", + "spacing": { + "padding": [ + 10, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "aED7QA_-", + "settings": { + "spacing": { + "padding": [ + 16, + 10, + 16, + 10 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "top", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 50 + }, + "atoms": [ + { + "id": "5ZsCucmZ", + "type": "image", + "src": "img/catalog/fashion-travel/city-backpack.png", + "link": "https://card.email/features", + "alt": "Orange city backpack", + "width": 112, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "04Wq2EwR", + "type": "text", + "value": "

City
Pack
16 L · laptop sleeve
$74

", + "color": "#1F1712", + "spacing": { + "padding": [ + 10, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "uJ2vQF4g", + "settings": { + "spacing": { + "padding": [ + 10, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 10 + }, + "cells": [ + { + "id": "l15gcHmN", + "settings": { + "spacing": { + "padding": [ + 16, + 12, + 16, + 12 + ] + }, + "backgroundColor": "#FFFFFF", + "verticalAlign": "middle", + "horizontalAlign": "left", + "borderRadius": 14, + "width": 60 + }, + "atoms": [ + { + "id": "FrdZJNZt", + "type": "text", + "value": "

COMPLETE THE DESK

Studio Microphone

USB-C · cardioid · desk stand

$109

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "-hi6cpng", + "type": "button", + "text": "Add microphone", + "link": "https://card.email/start", + "backgroundColor": "#1F1712", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 10, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] } - ], - "rows": [] + ] } ] } diff --git a/src/features/email-preview/catalog/blocks/ecommerce2.json b/src/features/email-preview/catalog/blocks/ecommerce2.json index fba9532..d724b2b 100644 --- a/src/features/email-preview/catalog/blocks/ecommerce2.json +++ b/src/features/email-preview/catalog/blocks/ecommerce2.json @@ -5,136 +5,179 @@ "type": "ecommerce", "preview": "img/components/ecommerce-2.png", "block": { - "id": "E2BlockA", + "id": "pijeOrf4", "label": "E-Commerce 2", "settings": { - "spacing": { "padding": [30, 35, 40, 35] }, - "backgroundColor": "#FFFFFF", - "backgroundImage": { - "url": "img/photo-1482424917728-d82d29662023.jpeg", - "repeat": "no-repeat", - "size": "cover", - "position": "center" - } + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#FFF9F3" }, "rows": [ { - "id": "E2TopRow", + "id": "P7NXssCz", "settings": { "spacing": {}, "backgroundColor": "transparent", - "gap": 0 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 22 }, "cells": [ { - "id": "E2TopCel", + "id": "vlC2iMnx", "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "right" + "spacing": { + "padding": [ + 28, + 18, + 28, + 18 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 20, + "width": 48 }, "atoms": [ { - "id": "E2TopTxt", - "type": "text", - "value": "

See all ➝

", - "color": "#FFFFFF", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] - }, - { - "id": "E2ImgRow", - "settings": { - "spacing": { "padding": [0, 0, 20, 0] }, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ - { - "id": "E2ImgCel", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" - }, - "atoms": [ - { - "id": "E2ImgAtm", + "id": "w1pLk6HC", "type": "image", - "src": "img/t-shirt-4.png", - "link": "https://example.com", - "alt": "Smoke Edition", - "width": 530, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "src": "img/catalog/fashion-travel/check-in-suitcase.png", + "link": "https://card.email/features", + "alt": "Orange hard-shell check-in suitcase", + "width": 280, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] - } - ] - }, - { - "id": "E2TxtRow", - "settings": { - "spacing": { "padding": [0, 0, 20, 0] }, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ + }, { - "id": "E2TxtCel", + "id": "Ar7hMoi7", "settings": { - "spacing": {}, + "spacing": { + "padding": [ + 18, + 8, + 18, + 18 + ] + }, "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 52 }, "atoms": [ { - "id": "E2CopyAA", + "id": "AdUv8E3G", "type": "text", - "value": "

New series

Smoke Edition

Hip Hop Basic Longline T-Shirt.

$34.99

", - "color": "#FFFFFF", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] - }, - { - "id": "E2CtaRow", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ - { - "id": "E2CtaCel", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" - }, - "atoms": [ + "value": "

CHECK-IN / 72 L

The long-week suitcase.

Hard shell · quiet wheels · compression divider

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "8HChozU3", + "type": "divider", + "color": "#FFD9B8", + "height": 1, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 16, + 0, + 16, + 0 + ] + } + }, { - "id": "E2Button", + "id": "NsQhjZxf", + "type": "text", + "value": "

Sand / Orange
$189 FREE SHIPPING

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "LNx_EYfF", "type": "button", - "text": "Buy Now", - "link": "https://example.com", - "backgroundColor": "#FFFFFF", - "color": "#000000", - "fontSize": 16, - "borderRadius": 3, - "padding": [12, 20, 12, 20], - "spacing": { "margin": [0, 0, 0, 0], "padding": [12, 20, 12, 20] } + "text": "Choose this case", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 18, + 0, + 0, + 0 + ] + } } ], "rows": [] diff --git a/src/features/email-preview/catalog/blocks/ecommerce3.json b/src/features/email-preview/catalog/blocks/ecommerce3.json index a2aeb17..678e191 100644 --- a/src/features/email-preview/catalog/blocks/ecommerce3.json +++ b/src/features/email-preview/catalog/blocks/ecommerce3.json @@ -5,36 +5,58 @@ "type": "ecommerce", "preview": "img/components/ecommerce-3.png", "block": { - "id": "E3BlockA", + "id": "IO7uy1Gl", "label": "E-Commerce 3", "settings": { - "spacing": { "padding": [30, 35, 40, 35] }, + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, "backgroundColor": "#FFFFFF" }, "rows": [ { - "id": "E3TopRow", + "id": "WmrsjL-C", "settings": { - "spacing": { "padding": [0, 0, 20, 0] }, + "spacing": {}, "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, "gap": 0 }, "cells": [ { - "id": "E3TopCel", + "id": "RCaKklkI", "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", - "horizontalAlign": "right" + "horizontalAlign": "center" }, "atoms": [ { - "id": "E3TopTxt", + "id": "iIdp_GCJ", "type": "text", - "value": "

See all ➝

", - "color": "#000000", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "value": "

NEW THIS WEEK

Three arrivals, three different jobs.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -42,93 +64,639 @@ ] }, { - "id": "E3ProdRw", + "id": "o9pf4CDG", "settings": { - "spacing": {}, + "spacing": { + "padding": [ + 18, + 0, + 0, + 0 + ] + }, "backgroundColor": "transparent", + "hiddenOnMobile": false, "collapseOnMobile": true, - "gap": 40 + "gap": 14 }, "cells": [ { - "id": "E3ProdA1", + "id": "wCKOv4_w", "settings": { - "spacing": {}, - "backgroundColor": "transparent", + "spacing": { + "padding": [ + 10, + 10, + 10, + 10 + ] + }, + "backgroundColor": "#FFF3E6", "verticalAlign": "top", - "horizontalAlign": "center" + "horizontalAlign": "left", + "borderRadius": 16, + "width": 33 }, - "atoms": [ + "atoms": [], + "rows": [ { - "id": "E3Image1", - "type": "image", - "src": "img/t-shirt-1.png", - "link": "https://example.com", - "alt": "Extended Shirt", - "width": 245, - "spacing": { "margin": [0, 0, 20, 0], "padding": [0, 0, 0, 0] } + "id": "LmYC92pC", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "7R7G2U6G", + "settings": { + "spacing": { + "padding": [ + 16, + 10, + 16, + 10 + ] + }, + "backgroundColor": "#FFFFFF", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "height": 190 + }, + "atoms": [ + { + "id": "oyMqgRM_", + "type": "image", + "src": "img/catalog/fashion-travel/bomber-jacket.png", + "link": "https://card.email/features", + "alt": "Orange bomber jacket", + "width": 165, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] }, { - "id": "E3CopyA1", - "type": "text", - "value": "

New series

Extended Shirt

Hip Hop Basic Longline T-Shirt.

$24.99

", - "color": "#000000", - "spacing": { "margin": [0, 0, 20, 0], "padding": [0, 0, 0, 0] } + "id": "HC0wEqpU", + "settings": { + "spacing": { + "padding": [ + 10, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "BsKklpz3", + "settings": { + "spacing": { + "padding": [ + 14, + 10, + 14, + 10 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "height": 160 + }, + "atoms": [ + { + "id": "VxBLBM01", + "type": "text", + "value": "

Transit Bomber

Lightweight shell

$128

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] }, { - "id": "E3BtnA01", - "type": "button", - "text": "Buy Now", - "link": "https://example.com", - "backgroundColor": "#409EFF", - "color": "#FFFFFF", - "fontSize": 16, - "borderRadius": 3, - "padding": [12, 20, 12, 20], - "spacing": { "margin": [0, 0, 0, 0], "padding": [12, 20, 12, 20] } + "id": "0FUYtIzf", + "settings": { + "spacing": { + "padding": [ + 10, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "EnRmVHpQ", + "settings": { + "spacing": { + "padding": [ + 10, + 8, + 10, + 8 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "height": 68 + }, + "atoms": [ + { + "id": "lWm1fpIg", + "type": "button", + "text": "View jacket", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] } - ], - "rows": [] + ] }, { - "id": "E3ProdB2", + "id": "98IkYbJY", "settings": { - "spacing": {}, - "backgroundColor": "transparent", + "spacing": { + "padding": [ + 10, + 10, + 10, + 10 + ] + }, + "backgroundColor": "#FFD9B8", "verticalAlign": "top", - "horizontalAlign": "center" + "horizontalAlign": "left", + "borderRadius": 16, + "width": 33 }, - "atoms": [ + "atoms": [], + "rows": [ { - "id": "E3Image2", - "type": "image", - "src": "img/t-shirt-2.png", - "link": "https://example.com", - "alt": "Extended Shirt", - "width": 245, - "spacing": { "margin": [0, 0, 20, 0], "padding": [0, 0, 0, 0] } + "id": "1k4ANX-g", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "j2zXA3bq", + "settings": { + "spacing": { + "padding": [ + 16, + 10, + 16, + 10 + ] + }, + "backgroundColor": "#FFFFFF", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "height": 190 + }, + "atoms": [ + { + "id": "qcwDuT7B", + "type": "image", + "src": "img/catalog/devices/handheld-console.png", + "link": "https://card.email/features", + "alt": "Orange handheld game console", + "width": 165, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] }, { - "id": "E3CopyB2", - "type": "text", - "value": "

New series

Extended Shirt

Hip Hop Basic Longline T-Shirt.

$24.99

", - "color": "#000000", - "spacing": { "margin": [0, 0, 20, 0], "padding": [0, 0, 0, 0] } + "id": "yY4PlNH8", + "settings": { + "spacing": { + "padding": [ + 10, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "Y13qOLWT", + "settings": { + "spacing": { + "padding": [ + 14, + 10, + 14, + 10 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "height": 160 + }, + "atoms": [ + { + "id": "BQj8ihmS", + "type": "text", + "value": "

Pocket Console

256 GB · OLED

$249

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] }, { - "id": "E3BtnB02", - "type": "button", - "text": "Buy Now", - "link": "https://example.com", - "backgroundColor": "#409EFF", - "color": "#FFFFFF", - "fontSize": 16, - "borderRadius": 3, - "padding": [12, 20, 12, 20], - "spacing": { "margin": [0, 0, 0, 0], "padding": [12, 20, 12, 20] } + "id": "5Ny0GoaN", + "settings": { + "spacing": { + "padding": [ + 10, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "ctVPURHm", + "settings": { + "spacing": { + "padding": [ + 10, + 8, + 10, + 8 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "height": 68 + }, + "atoms": [ + { + "id": "MvSx77Ej", + "type": "button", + "text": "View console", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] } - ], - "rows": [] + ] + }, + { + "id": "-P4ERd_x", + "settings": { + "spacing": { + "padding": [ + 10, + 10, + 10, + 10 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 16, + "width": 33 + }, + "atoms": [], + "rows": [ + { + "id": "3hFw24hn", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "G8dR4GOV", + "settings": { + "spacing": { + "padding": [ + 16, + 10, + 16, + 10 + ] + }, + "backgroundColor": "#FFFFFF", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "height": 190 + }, + "atoms": [ + { + "id": "vwefrL4K", + "type": "image", + "src": "img/catalog/products/skincare-bottle.png", + "link": "https://card.email/features", + "alt": "Orange skincare pump bottle", + "width": 135, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "v1ymOP1A", + "settings": { + "spacing": { + "padding": [ + 10, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "wlGGkwTB", + "settings": { + "spacing": { + "padding": [ + 14, + 10, + 14, + 10 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "height": 160 + }, + "atoms": [ + { + "id": "ildOMnJC", + "type": "text", + "value": "

Daily Skincare

50 ml · fragrance free

$42

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "58V4glS3", + "settings": { + "spacing": { + "padding": [ + 10, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "EcGNuiWu", + "settings": { + "spacing": { + "padding": [ + 10, + 8, + 10, + 8 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "height": 68 + }, + "atoms": [ + { + "id": "a8Payt2f", + "type": "button", + "text": "View serum", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] } ] } diff --git a/src/features/email-preview/catalog/blocks/ecommerce4.json b/src/features/email-preview/catalog/blocks/ecommerce4.json index 35a4642..d9525bb 100644 --- a/src/features/email-preview/catalog/blocks/ecommerce4.json +++ b/src/features/email-preview/catalog/blocks/ecommerce4.json @@ -5,72 +5,340 @@ "type": "ecommerce", "preview": "img/components/ecommerce-4.png", "block": { - "id": "E4BlockA", + "id": "XCNgGRyu", "label": "E-Commerce 4", "settings": { - "spacing": { "padding": [30, 35, 25, 35] }, - "backgroundColor": "#FFFFFF" + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#FFF9F3" }, "rows": [ { - "id": "E4ProdRw", + "id": "FKWX3mCK", "settings": { "spacing": {}, "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 + }, + "cells": [ + { + "id": "FSjWzVY0", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "width": 18 + }, + "atoms": [ + { + "id": "01wa3S7E", + "type": "image", + "src": "img/catalog/avatars/sneaker-presenter-avatar.png", + "link": "https://card.email/features", + "alt": "Portrait of collection curator Lena Park", + "width": 94, + "borderRadius": 999, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "crNJJIbn", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 82 + }, + "atoms": [ + { + "id": "ULzXEh65", + "type": "text", + "value": "

LENA’S WEEKEND PICKS

Two small upgrades I keep recommending.

Curated by Lena Park · product editor

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "aXY6SoIl", + "settings": { + "spacing": { + "padding": [ + 20, + 0, + 14, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, "collapseOnMobile": true, "gap": 18 }, "cells": [ { - "id": "E4ImgCel", + "id": "sa1UDqk_", + "settings": { + "spacing": { + "padding": [ + 18, + 12, + 18, + 12 + ] + }, + "backgroundColor": "#FF6B00", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 34, + "height": 150 + }, + "atoms": [ + { + "id": "KZN4JpOJ", + "type": "image", + "src": "img/catalog/products/sneaker.png", + "link": "https://card.email/features", + "alt": "Orange and cream lifestyle sneaker", + "width": 180, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "LgHsKh1T", "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 66 + }, + "atoms": [ + { + "id": "aRGaoXZO", + "type": "text", + "value": "

Weekend Pair

Soft landing · everyday sole

$89

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "wFHjLpL6", + "type": "button", + "text": "Shop the pair", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 18, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "wXieO2an", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 18 + }, + "cells": [ + { + "id": "tJBsUpUW", + "settings": { + "spacing": { + "padding": [ + 18, + 12, + 18, + 12 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", "horizontalAlign": "center", - "width": 48 + "borderRadius": 16, + "width": 34, + "height": 150 }, "atoms": [ { - "id": "E4Image1", + "id": "Qp4ljJeV", "type": "image", - "src": "img/diesel-watch-1x1.jpg", - "link": "https://example.com", - "alt": "Diesel DZ4507", - "width": 247, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "src": "img/catalog/products/beverage-can.png", + "link": "https://card.email/features", + "alt": "Orange sparkling beverage can", + "width": 96, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] }, { - "id": "E4TxtCel", + "id": "11YNQlrS", "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", - "width": 52 + "width": 66 }, "atoms": [ { - "id": "E4CopyA1", + "id": "y57T2Wkb", "type": "text", - "value": "

New series

Diesel DZ4507

Diesel Men's DZ4507 Chrono.

$137.99

", - "color": "#000000", - "spacing": { "margin": [0, 0, 20, 0], "padding": [0, 0, 0, 0] } + "value": "

Citrus Six-Pack

Dry finish · low sugar

$18

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } }, { - "id": "E4Button", + "id": "9RC_0NgS", "type": "button", - "text": "Buy Now", - "link": "https://example.com", - "backgroundColor": "#409EFF", + "text": "Add the pack", + "link": "https://card.email/start", + "backgroundColor": "#1F1712", "color": "#FFFFFF", - "fontSize": 16, - "borderRadius": 3, - "padding": [12, 20, 12, 20], - "spacing": { "margin": [0, 0, 0, 0], "padding": [12, 20, 12, 20] } + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 18, + 0, + 0, + 0 + ] + } } ], "rows": [] diff --git a/src/features/email-preview/catalog/blocks/ecommerce5.json b/src/features/email-preview/catalog/blocks/ecommerce5.json index 5c61898..5a8d59a 100644 --- a/src/features/email-preview/catalog/blocks/ecommerce5.json +++ b/src/features/email-preview/catalog/blocks/ecommerce5.json @@ -5,72 +5,263 @@ "type": "ecommerce", "preview": "img/components/ecommerce-5.png", "block": { - "id": "E5BlockA", + "id": "F4hgBdSH", "label": "E-Commerce 5", "settings": { - "spacing": { "padding": [30, 35, 10, 35] }, + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, "backgroundColor": "#FFFFFF" }, "rows": [ { - "id": "E5ProdRw", + "id": "5Iuml7WX", "settings": { "spacing": {}, "backgroundColor": "transparent", + "hiddenOnMobile": false, "collapseOnMobile": true, - "gap": 18 + "gap": 0 }, "cells": [ { - "id": "E5TxtCel", + "id": "7FY7vzBU", "settings": { "spacing": {}, "backgroundColor": "transparent", - "verticalAlign": "middle", - "horizontalAlign": "left", - "width": 52 + "verticalAlign": "top", + "horizontalAlign": "center" + }, + "atoms": [ + { + "id": "DzK_Pze9", + "type": "text", + "value": "

SIDE BY SIDE

Choose the sound that fits the room.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "_nnsBU-6", + "settings": { + "spacing": { + "padding": [ + 18, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 + }, + "cells": [ + { + "id": "866ZNxhA", + "settings": { + "spacing": { + "padding": [ + 24, + 18, + 24, + 18 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "top", + "horizontalAlign": "center", + "borderRadius": 18, + "width": 50 }, "atoms": [ { - "id": "E5CopyA1", + "id": "ZBtYrfDy", + "type": "image", + "src": "img/catalog/products/headphones.png", + "link": "https://card.email/features", + "alt": "Orange over-ear headphones", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + }, + "height": 150 + }, + { + "id": "RQDhG_ub", "type": "text", - "value": "

New series

Basketball Shoes

Men's High-Top Basketball Shoes.

$749.99

", - "color": "#000000", - "spacing": { "margin": [0, 0, 20, 0], "padding": [0, 0, 0, 0] } + "value": "

Focus Headphones

Private listening
32-hour battery
Fold-flat design

$159

", + "color": "#1F1712", + "spacing": { + "padding": [ + 12, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } }, { - "id": "E5Button", + "id": "0CwAnutE", "type": "button", - "text": "Buy Now", - "link": "https://example.com", - "backgroundColor": "#409EFF", + "text": "Choose headphones", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", "color": "#FFFFFF", - "fontSize": 16, - "borderRadius": 3, - "padding": [12, 20, 12, 20], - "spacing": { "margin": [0, 0, 0, 0], "padding": [12, 20, 12, 20] } + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 18, + 0, + 0, + 0 + ] + } } ], "rows": [] }, { - "id": "E5ImgCel", + "id": "osIcxXhD", "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "middle", + "spacing": { + "padding": [ + 24, + 18, + 24, + 18 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "top", "horizontalAlign": "center", - "width": 48 + "borderRadius": 18, + "width": 50 }, "atoms": [ { - "id": "E5Image1", + "id": "KECX4VY-", "type": "image", - "src": "img/adidas-real-deal-damien-lillard-hirere-black1-blapur-1x1.jpg", - "link": "https://example.com", - "alt": "Basketball Shoes", - "height": 244, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "src": "img/catalog/products/wireless-speaker.png", + "link": "https://card.email/features", + "alt": "Orange wireless speaker", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + }, + "height": 150 + }, + { + "id": "DqeHT-Wb", + "type": "text", + "value": "

Room Speaker

Shared listening
18-hour battery
Room-filling sound

$119

", + "color": "#1F1712", + "spacing": { + "padding": [ + 12, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "dm0Aa1hU", + "type": "button", + "text": "Choose speaker", + "link": "https://card.email/start", + "backgroundColor": "#1F1712", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 18, + 0, + 0, + 0 + ] + } } ], "rows": [] diff --git a/src/features/email-preview/catalog/blocks/ecommerce6.json b/src/features/email-preview/catalog/blocks/ecommerce6.json new file mode 100644 index 0000000..a6906b1 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/ecommerce6.json @@ -0,0 +1,286 @@ +{ + "version": 2, + "name": "ecommerce6", + "label": "E-Commerce 6", + "type": "ecommerce", + "preview": "img/components/ecommerce-6.png", + "block": { + "id": "0WZ0IJgP", + "label": "E-Commerce 6", + "settings": { + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#FFF9F3" + }, + "rows": [ + { + "id": "tGn8hMTN", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "D2VVxHSD", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left" + }, + "atoms": [ + { + "id": "m7EZZkv6", + "type": "text", + "value": "

THE WEEKEND KIT

Three pieces. One lighter departure.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "5DWJ3UZj", + "settings": { + "spacing": { + "padding": [ + 18, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 12 + }, + "cells": [ + { + "id": "_XpNrqOZ", + "settings": { + "spacing": { + "padding": [ + 18, + 8, + 18, + 8 + ] + }, + "backgroundColor": "#FF6B00", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 20 + }, + "atoms": [ + { + "id": "dltZDY0n", + "type": "image", + "src": "img/catalog/fashion-travel/carry-on-suitcase.png", + "link": "https://card.email/features", + "alt": "Orange carry-on suitcase", + "width": 145, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "hqPaykYb", + "settings": { + "spacing": { + "padding": [ + 18, + 8, + 18, + 8 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 20 + }, + "atoms": [ + { + "id": "ZgTnP1TC", + "type": "image", + "src": "img/catalog/fashion-travel/weekend-duffel.png", + "link": "https://card.email/features", + "alt": "Orange weekend duffel bag", + "width": 145, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "mEZXcBnD", + "settings": { + "spacing": { + "padding": [ + 18, + 8, + 18, + 8 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 20 + }, + "atoms": [ + { + "id": "ZPM7q_9F", + "type": "image", + "src": "img/catalog/fashion-travel/tote-bag.png", + "link": "https://card.email/features", + "alt": "Orange tote bag", + "width": 145, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "6DCXe4ky", + "settings": { + "spacing": { + "padding": [ + 10, + 0, + 10, + 10 + ] + }, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 40 + }, + "atoms": [ + { + "id": "KTq5wxOY", + "type": "text", + "value": "

SAVE $42 AS A SET

Carry-on + duffel + tote

Sand / Orange · ships together

$248 $290

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "amQc5NUe", + "type": "button", + "text": "Add the kit", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 18, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/ecommerce7.json b/src/features/email-preview/catalog/blocks/ecommerce7.json new file mode 100644 index 0000000..ceefdda --- /dev/null +++ b/src/features/email-preview/catalog/blocks/ecommerce7.json @@ -0,0 +1,478 @@ +{ + "version": 2, + "name": "ecommerce7", + "label": "E-Commerce 7", + "type": "ecommerce", + "preview": "img/components/ecommerce-7.png", + "block": { + "id": "nsh72tBb", + "label": "E-Commerce 7", + "settings": { + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#FFFFFF" + }, + "rows": [ + { + "id": "EFACfcdd", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "V9IdjzRE", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left" + }, + "atoms": [ + { + "id": "bQp82CHO", + "type": "text", + "value": "

SHOP BY USE

Start with the part of the day.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "13ooRlZO", + "settings": { + "spacing": { + "padding": [ + 18, + 0, + 14, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 14 + }, + "cells": [ + { + "id": "PmHOM7v1", + "settings": { + "spacing": { + "padding": [ + 14, + 10, + 14, + 10 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 24, + "height": 108 + }, + "atoms": [ + { + "id": "zTkbBE0o", + "type": "image", + "src": "img/catalog/devices/mechanical-keyboard.png", + "link": "https://card.email/features", + "alt": "Orange mechanical keyboard", + "width": 120, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "2MjuR9VU", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 56 + }, + "atoms": [ + { + "id": "HPDhBJ4B", + "type": "text", + "value": "

Desk
Keyboards, cameras and focus tools · 12 items

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "9ctBL8TD", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "right", + "width": 20 + }, + "atoms": [ + { + "id": "0To58vcZ", + "type": "button", + "text": "Browse desk", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "QKUcFH5S", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 14, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 14 + }, + "cells": [ + { + "id": "uJPtDgRv", + "settings": { + "spacing": { + "padding": [ + 14, + 10, + 14, + 10 + ] + }, + "backgroundColor": "#FF6B00", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 24, + "height": 108 + }, + "atoms": [ + { + "id": "s51Gqc5a", + "type": "image", + "src": "img/catalog/fashion-travel/trench-coat.png", + "link": "https://card.email/features", + "alt": "Orange trench coat", + "width": 72, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "RxqQRhyc", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 56 + }, + "atoms": [ + { + "id": "dL7dKIhG", + "type": "text", + "value": "

Between plans
Layers, bags and travel pieces · 18 items

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "ixgONRIC", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "right", + "width": 20 + }, + "atoms": [ + { + "id": "A4v7gjYo", + "type": "button", + "text": "Browse travel", + "link": "https://card.email/start", + "backgroundColor": "#1F1712", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "WGT7Zbtx", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 14 + }, + "cells": [ + { + "id": "PoyY-QjG", + "settings": { + "spacing": { + "padding": [ + 14, + 10, + 14, + 10 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 24, + "height": 108 + }, + "atoms": [ + { + "id": "pS6b5QWm", + "type": "image", + "src": "img/catalog/fashion-travel/puffer-jacket.png", + "link": "https://card.email/features", + "alt": "Orange puffer jacket", + "width": 120, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "rpv29C9o", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 56 + }, + "atoms": [ + { + "id": "w8CwvCPk", + "type": "text", + "value": "

Everyday
Simple upgrades for repeat use · 9 items

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "Ao-7RsWk", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "right", + "width": 20 + }, + "atoms": [ + { + "id": "NLDn7SPK", + "type": "button", + "text": "Browse daily", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/feature1.json b/src/features/email-preview/catalog/blocks/feature1.json index 9d627a7..5386fa8 100644 --- a/src/features/email-preview/catalog/blocks/feature1.json +++ b/src/features/email-preview/catalog/blocks/feature1.json @@ -5,23 +5,32 @@ "type": "feature", "preview": "img/components/feature-1.png", "block": { - "id": "F1BlockA", + "id": "HLhHOciq", "label": "Feature 1", "settings": { - "spacing": { "padding": [28, 34, 32, 34] }, + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, "backgroundColor": "#FFFFFF" }, "rows": [ { - "id": "F1TitleA", + "id": "fo93eHkQ", "settings": { - "spacing": { "padding": [0, 0, 24, 0] }, + "spacing": {}, "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, "gap": 0 }, "cells": [ { - "id": "F1HeadAA", + "id": "7iIWkqzG", "settings": { "spacing": {}, "backgroundColor": "transparent", @@ -30,11 +39,24 @@ }, "atoms": [ { - "id": "F1TextAA", + "id": "fVWhVxNR", "type": "text", - "value": "

Features

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "value": "

THREE USEFUL OUTCOMES

A system that earns its place.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -42,94 +64,141 @@ ] }, { - "id": "F1ItemsA", + "id": "VSkVlALD", "settings": { - "spacing": {}, + "spacing": { + "padding": [ + 20, + 0, + 0, + 0 + ] + }, "backgroundColor": "transparent", + "hiddenOnMobile": false, "collapseOnMobile": true, - "gap": 22 + "gap": 14 }, "cells": [ { - "id": "F1CellAA", + "id": "-Shr1JdF", "settings": { - "spacing": {}, - "backgroundColor": "transparent", + "spacing": { + "padding": [ + 22, + 18, + 22, + 18 + ] + }, + "backgroundColor": "#FFF3E6", "verticalAlign": "top", - "horizontalAlign": "center" + "horizontalAlign": "left", + "borderRadius": 16, + "width": 33 }, "atoms": [ { - "id": "F1ImageA", - "type": "image", - "src": "img/browser.png", - "link": "https://example.com", - "alt": "Components", - "height": 70, - "spacing": { "margin": [0, 0, 8, 0], "padding": [0, 0, 0, 0] } - }, - { - "id": "F1CopyAA", + "id": "trwygxB6", "type": "text", - "value": "

Components

Pre-designed components from which you can quickly create beautiful email templates.

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "value": "

FAST

Start with structure.

Move from blank page to a useful first draft without rebuilding the basics.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] }, { - "id": "F1CellBB", + "id": "aEax8H6H", "settings": { - "spacing": {}, - "backgroundColor": "transparent", + "spacing": { + "padding": [ + 22, + 18, + 22, + 18 + ] + }, + "backgroundColor": "#FFD9B8", "verticalAlign": "top", - "horizontalAlign": "center" + "horizontalAlign": "left", + "borderRadius": 16, + "width": 33 }, "atoms": [ { - "id": "F1ImageB", - "type": "image", - "src": "img/development.png", - "link": "https://example.com", - "alt": "ESP Ready", - "height": 70, - "spacing": { "margin": [0, 0, 8, 0], "padding": [0, 0, 0, 0] } - }, - { - "id": "F1CopyBB", + "id": "3u9tdgZQ", "type": "text", - "value": "

ESP Ready

Pre-designed components from which you can quickly create beautiful email templates.

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "value": "

CLEAR

Edit with intent.

Keep hierarchy visible while content, media and actions continue to change.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] }, { - "id": "F1CellCC", + "id": "kheJU0Zf", "settings": { - "spacing": {}, - "backgroundColor": "transparent", + "spacing": { + "padding": [ + 22, + 18, + 22, + 18 + ] + }, + "backgroundColor": "#FFF3E6", "verticalAlign": "top", - "horizontalAlign": "center" + "horizontalAlign": "left", + "borderRadius": 16, + "width": 33 }, "atoms": [ { - "id": "F1ImageC", - "type": "image", - "src": "img/test.png", - "link": "https://example.com", - "alt": "Performance", - "height": 70, - "spacing": { "margin": [0, 0, 8, 0], "padding": [0, 0, 0, 0] } - }, - { - "id": "F1CopyCC", + "id": "wNEQeATe", "type": "text", - "value": "

Performance

Pre-designed components from which you can quickly create beautiful email templates.

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "value": "

SAFE

Send predictably.

Reuse email-safe patterns instead of discovering layout limits at export time.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] diff --git a/src/features/email-preview/catalog/blocks/feature2.json b/src/features/email-preview/catalog/blocks/feature2.json index 035dbf9..6d648e8 100644 --- a/src/features/email-preview/catalog/blocks/feature2.json +++ b/src/features/email-preview/catalog/blocks/feature2.json @@ -5,110 +5,330 @@ "type": "feature", "preview": "img/components/feature-2.png", "block": { - "id": "F2BlockA", + "id": "gowX8n3c", "label": "Feature 2", "settings": { - "spacing": { "padding": [34, 42, 34, 42] }, - "backgroundColor": "#222222" + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#FFF9F3" }, "rows": [ { - "id": "F2ItemsA", + "id": "Y4Z_dApv", "settings": { "spacing": {}, "backgroundColor": "transparent", + "hiddenOnMobile": false, "collapseOnMobile": true, - "gap": 18 + "gap": 0 }, "cells": [ { - "id": "F2CellAA", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "-nMIN6CS", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left" + }, "atoms": [ { - "id": "F2ImageA", - "type": "image", - "src": "img/coffee-white.png", - "link": "https://example.com", - "alt": "Coffee", - "height": 50, - "spacing": { "margin": [0, 0, 12, 0], "padding": [0, 0, 0, 0] } + "id": "PinD_6Z_", + "type": "text", + "value": "

BUILT INTO THE WORKFLOW

Follow the work, not the chrome.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "oI_vsY1d", + "settings": { + "spacing": { + "padding": [ + 18, + 0, + 16, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 + }, + "cells": [ + { + "id": "9AePWZLn", + "settings": { + "spacing": { + "padding": [ + 16, + 8, + 16, + 8 + ] }, + "backgroundColor": "#FF6B00", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 14 + }, + "atoms": [ { - "id": "F2CopyAA", + "id": "6amALi6n", "type": "text", - "value": "

78

Cups of Coffee

", + "value": "

01

", "color": "#FFFFFF", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] }, { - "id": "F2CellBB", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "lgxumroX", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 86 + }, "atoms": [ { - "id": "F2ImageB", - "type": "image", - "src": "img/ipod-white.png", - "link": "https://example.com", - "alt": "Music", - "height": 50, - "spacing": { "margin": [0, 0, 12, 0], "padding": [0, 0, 0, 0] } + "id": "uFmY7N8b", + "type": "text", + "value": "

Choose a proven starting point.

Begin from a reusable block instead of a finished campaign theme.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "wmKMO1Xd", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 16, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 + }, + "cells": [ + { + "id": "TBbbwZq9", + "settings": { + "spacing": { + "padding": [ + 16, + 8, + 16, + 8 + ] }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 14 + }, + "atoms": [ { - "id": "F2CopyBB", + "id": "nNgd2jrB", "type": "text", - "value": "

459

Songs Listened

", - "color": "#FFFFFF", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "value": "

02

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] }, { - "id": "F2CellCC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "gtfxESOy", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 86 + }, "atoms": [ { - "id": "F2ImageC", - "type": "image", - "src": "img/apple-icon-white.png", - "link": "https://example.com", - "alt": "Skipped meals", - "height": 50, - "spacing": { "margin": [0, 0, 12, 0], "padding": [0, 0, 0, 0] } + "id": "rBYNjlS4", + "type": "text", + "value": "

Refine the useful layer.

Change copy, media and hierarchy while the email-safe structure stays visible.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "s-L-DQZE", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 + }, + "cells": [ + { + "id": "cUXFBYwJ", + "settings": { + "spacing": { + "padding": [ + 16, + 8, + 16, + 8 + ] }, + "backgroundColor": "#1F1712", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 14 + }, + "atoms": [ { - "id": "F2CopyCC", + "id": "rz99e6-n", "type": "text", - "value": "

05

Skipped Meals

", + "value": "

03

", "color": "#FFFFFF", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] }, { - "id": "F2CellDD", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "Q8Ffox-C", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 86 + }, "atoms": [ { - "id": "F2ImageD", - "type": "image", - "src": "img/game-controller-white.png", - "link": "https://example.com", - "alt": "Gaming", - "height": 50, - "spacing": { "margin": [0, 0, 12, 0], "padding": [0, 0, 0, 0] } - }, - { - "id": "F2CopyDD", + "id": "0Xb5Uo9r", "type": "text", - "value": "

10

Hours Gaming

", - "color": "#FFFFFF", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "value": "

Export what you reviewed.

Carry the same structure from editor preview into JSON and final HTML.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] diff --git a/src/features/email-preview/catalog/blocks/feature3.json b/src/features/email-preview/catalog/blocks/feature3.json index 5f0ff25..a9cb41b 100644 --- a/src/features/email-preview/catalog/blocks/feature3.json +++ b/src/features/email-preview/catalog/blocks/feature3.json @@ -5,115 +5,210 @@ "type": "feature", "preview": "img/components/feature-3.png", "block": { - "id": "F3BlockA", + "id": "t38K19L9", "label": "Feature 3", "settings": { - "spacing": { "padding": [28, 36, 44, 36] }, + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, "backgroundColor": "#FFFFFF" }, "rows": [ { - "id": "F3TitleA", + "id": "iicPedu4", "settings": { - "spacing": { "padding": [0, 0, 32, 0] }, + "spacing": {}, "backgroundColor": "transparent", - "gap": 0 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 }, "cells": [ { - "id": "F3HeadAA", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "85K6LHxB", + "settings": { + "spacing": { + "padding": [ + 28, + 16, + 28, + 16 + ] + }, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 18, + "backgroundImage": { + "url": "img/catalog/backgrounds/gradient-ribbons.png", + "repeat": "no-repeat", + "size": "cover", + "position": "center" + }, + "width": 48 + }, "atoms": [ { - "id": "F3TextAA", - "type": "text", - "value": "

Our Plan & Pricing

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "id": "zuB8-I3P", + "type": "image", + "src": "img/catalog/devices/vr-headset-kit.png", + "link": "https://card.email/features", + "alt": "Orange virtual reality headset kit", + "width": 245, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] - } - ] - }, - { - "id": "F3PlansA", - "settings": { "spacing": {}, "backgroundColor": "transparent", "collapseOnMobile": true, "gap": 34 }, - "cells": [ + }, { - "id": "F3CellAA", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "xlF46-Jv", + "settings": { + "spacing": {}, + "backgroundColor": "#1F1712", + "verticalAlign": "middle", + "horizontalAlign": "left", + "borderRadius": 16, + "width": 52 + }, "atoms": [ { - "id": "F3CopyAA", + "id": "NlZ9_EtI", "type": "text", - "value": "

Shared
Hosting

Starts at

$0.99 / mo

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 20, 0] } - }, - { - "id": "F3BtnA01", - "type": "button", - "text": "View Plans", - "link": "https://example.com", - "backgroundColor": "#409EFF", + "value": "

01 / SYSTEM

Structure before styling.

Rows, cells and atoms stay explicit while the visual layer changes.

", "color": "#FFFFFF", - "fontSize": 14, - "borderRadius": 3, - "padding": [12, 20, 12, 20], - "spacing": { "margin": [0, 0, 0, 0], "padding": [12, 20, 12, 20] } + "spacing": { + "padding": [ + 20, + 18, + 20, + 18 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] + } + ] + }, + { + "id": "0R9kX9Qn", + "settings": { + "spacing": { + "padding": [ + 16, + 0, + 0, + 0 + ] }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 + }, + "cells": [ { - "id": "F3CellBB", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "BYuRWVKV", + "settings": { + "spacing": { + "padding": [ + 20, + 18, + 20, + 18 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 16, + "width": 50 + }, "atoms": [ { - "id": "F3CopyBB", + "id": "zgfcMbAG", "type": "text", - "value": "

VPS
Hosting

Starts at

$1.99 / mo

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 20, 0] } - }, - { - "id": "F3BtnB01", - "type": "button", - "text": "View Plans", - "link": "https://example.com", - "backgroundColor": "#409EFF", - "color": "#FFFFFF", - "fontSize": 14, - "borderRadius": 3, - "padding": [12, 20, 12, 20], - "spacing": { "margin": [0, 0, 0, 0], "padding": [12, 20, 12, 20] } + "value": "

02 / CONTROL

Tune the hierarchy.

Adjust spacing, alignment and emphasis without hiding the underlying tree.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] }, { - "id": "F3CellCC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "WfRdlUPM", + "settings": { + "spacing": { + "padding": [ + 20, + 18, + 20, + 18 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 16, + "width": 50 + }, "atoms": [ { - "id": "F3CopyCC", + "id": "N15GSkl_", "type": "text", - "value": "

Dedicated
Hosting

Starts at

$2.99 / mo

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 20, 0] } - }, - { - "id": "F3BtnC01", - "type": "button", - "text": "View Plans", - "link": "https://example.com", - "backgroundColor": "#409EFF", - "color": "#FFFFFF", - "fontSize": 14, - "borderRadius": 3, - "padding": [12, 20, 12, 20], - "spacing": { "margin": [0, 0, 0, 0], "padding": [12, 20, 12, 20] } + "value": "

03 / OUTPUT

Keep the contract.

Preview, persistence and export work from the same versioned structure.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] diff --git a/src/features/email-preview/catalog/blocks/feature4.json b/src/features/email-preview/catalog/blocks/feature4.json index 8586192..d643b98 100644 --- a/src/features/email-preview/catalog/blocks/feature4.json +++ b/src/features/email-preview/catalog/blocks/feature4.json @@ -5,298 +5,232 @@ "type": "feature", "preview": "img/components/feature-4.png", "block": { - "id": "F4BlockA", + "id": "WZEhqA9T", "label": "Feature 4", "settings": { - "spacing": { "padding": [28, 34, 34, 34] }, - "backgroundColor": "#222222" + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#FFF9F3" }, "rows": [ { - "id": "F4IntroA", + "id": "2-pNbsM8", "settings": { - "spacing": { "padding": [0, 0, 30, 0] }, + "spacing": {}, "backgroundColor": "transparent", - "gap": 0 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 20 }, "cells": [ { - "id": "F4IntroC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, + "id": "mApIYfyD", + "settings": { + "spacing": { + "padding": [ + 10, + 12, + 10, + 0 + ] + }, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 62 + }, "atoms": [ { - "id": "F4IntroT", + "id": "af-jXkbc", "type": "text", - "value": "

Features

Our app was made for creators like you. We build our APIs to be simple to use, powerful in production, and endlessly scalable.

", - "color": "#FFFFFF", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] - }, - { - "id": "F4Grid1A", - "settings": { "spacing": { "padding": [0, 0, 26, 0] }, "backgroundColor": "transparent", "collapseOnMobile": true, "gap": 28 }, - "cells": [ - { - "id": "F4ItemAA", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [], - "rows": [ + "value": "

GUIDED BY THE MESSAGE

Three rules the editor keeps visible.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, { - "id": "F4HeadAA", - "settings": { "spacing": { "padding": [0, 0, 14, 0] }, "backgroundColor": "transparent", "collapseOnMobile": false, "gap": 10 }, - "cells": [ - { - "id": "F4IconAA", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 16 }, - "atoms": [ - { - "id": "F4ImageA", - "type": "image", - "src": "img/browser-white.png", - "link": "https://example.com", - "alt": "Components", - "height": 36, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - }, - { - "id": "F4NameAA", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 84 }, - "atoms": [ - { - "id": "F4TitleA", - "type": "text", - "value": "

Components

", - "color": "#FFFFFF", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] + "id": "zNC1Guet", + "type": "divider", + "color": "#FFD9B8", + "height": 1, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 16, + 0, + 16, + 0 + ] + } }, { - "id": "F4DescAA", - "settings": { "spacing": {}, "backgroundColor": "transparent", "gap": 0 }, - "cells": [ - { - "id": "F4DescAC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [ - { - "id": "F4CopyAA", - "type": "text", - "value": "

Pre-designed components from which you can quickly create beautiful email templates.

", - "color": "#D1D5DB", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] - } - ] - }, - { - "id": "F4ItemBB", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [], - "rows": [ + "id": "upvtlwC-", + "type": "text", + "value": "

Hierarchy stays explicit
The selected block, row, cell and atom remain understandable.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, { - "id": "F4HeadBB", - "settings": { "spacing": { "padding": [0, 0, 14, 0] }, "backgroundColor": "transparent", "collapseOnMobile": false, "gap": 10 }, - "cells": [ - { - "id": "F4IconBB", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 16 }, - "atoms": [ - { - "id": "F4ImageB", - "type": "image", - "src": "img/development-white.png", - "link": "https://example.com", - "alt": "ESP Ready", - "height": 36, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - }, - { - "id": "F4NameBB", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 84 }, - "atoms": [ - { - "id": "F4TitleB", - "type": "text", - "value": "

ESP Ready

", - "color": "#FFFFFF", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] + "id": "kAEgnww6", + "type": "divider", + "color": "#FFD9B8", + "height": 1, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 16, + 0, + 16, + 0 + ] + } }, { - "id": "F4DescBB", - "settings": { "spacing": {}, "backgroundColor": "transparent", "gap": 0 }, - "cells": [ - { - "id": "F4DescBC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [ - { - "id": "F4CopyBB", - "type": "text", - "value": "

Pre-designed components from which you can quickly create beautiful email templates.

", - "color": "#D1D5DB", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] - } - ] - } - ] - }, - { - "id": "F4Grid2A", - "settings": { "spacing": {}, "backgroundColor": "transparent", "collapseOnMobile": true, "gap": 28 }, - "cells": [ - { - "id": "F4ItemCC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [], - "rows": [ + "id": "GjvwIYa6", + "type": "text", + "value": "

Changes stay local
Edit the useful layer without rebuilding the surrounding email.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, { - "id": "F4HeadCC", - "settings": { "spacing": { "padding": [0, 0, 14, 0] }, "backgroundColor": "transparent", "collapseOnMobile": false, "gap": 10 }, - "cells": [ - { - "id": "F4IconCC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 16 }, - "atoms": [ - { - "id": "F4ImageC", - "type": "image", - "src": "img/test-white.png", - "link": "https://example.com", - "alt": "Performance", - "height": 36, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - }, - { - "id": "F4NameCC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 84 }, - "atoms": [ - { - "id": "F4TitleC", - "type": "text", - "value": "

Performance

", - "color": "#FFFFFF", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] + "id": "42L7UyhD", + "type": "divider", + "color": "#FFD9B8", + "height": 1, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 16, + 0, + 16, + 0 + ] + } }, { - "id": "F4DescCC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "gap": 0 }, - "cells": [ - { - "id": "F4DescCD", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [ - { - "id": "F4CopyCC", - "type": "text", - "value": "

Pre-designed components from which you can quickly create beautiful email templates.

", - "color": "#D1D5DB", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] + "id": "O0qkaElV", + "type": "text", + "value": "

Output stays predictable
The reviewed structure is the structure that gets exported.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } - ] + ], + "rows": [] }, { - "id": "F4ItemDD", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [], - "rows": [ - { - "id": "F4HeadDD", - "settings": { "spacing": { "padding": [0, 0, 14, 0] }, "backgroundColor": "transparent", "collapseOnMobile": false, "gap": 10 }, - "cells": [ - { - "id": "F4IconDD", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 16 }, - "atoms": [ - { - "id": "F4ImageD", - "type": "image", - "src": "img/service-white.png", - "link": "https://example.com", - "alt": "Service", - "height": 36, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - }, - { - "id": "F4NameDD", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 84 }, - "atoms": [ - { - "id": "F4TitleD", - "type": "text", - "value": "

Service

", - "color": "#FFFFFF", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } + "id": "pdW0aJQi", + "settings": { + "spacing": { + "padding": [ + 20, + 8, + 0, + 8 ] }, + "backgroundColor": "#FF6B00", + "verticalAlign": "bottom", + "horizontalAlign": "center", + "borderRadius": 18, + "width": 38 + }, + "atoms": [ { - "id": "F4DescDD", - "settings": { "spacing": {}, "backgroundColor": "transparent", "gap": 0 }, - "cells": [ - { - "id": "F4DescDC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [ - { - "id": "F4CopyDD", - "type": "text", - "value": "

Pre-designed components from which you can quickly create beautiful email templates.

", - "color": "#D1D5DB", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] + "id": "JXfTAJYI", + "type": "image", + "src": "img/catalog/presenters/skincare-presenter.png", + "link": "https://card.email/features", + "alt": "Presenter indicating a set of product capabilities", + "width": 245, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } - ] + ], + "rows": [] } ] } diff --git a/src/features/email-preview/catalog/blocks/feature5.json b/src/features/email-preview/catalog/blocks/feature5.json index 89ef891..204f0f3 100644 --- a/src/features/email-preview/catalog/blocks/feature5.json +++ b/src/features/email-preview/catalog/blocks/feature5.json @@ -5,31 +5,58 @@ "type": "feature", "preview": "img/components/feature-5.png", "block": { - "id": "F5BlockA", + "id": "haM7x2Z5", "label": "Feature 5", "settings": { - "spacing": { "padding": [28, 34, 34, 34] }, + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, "backgroundColor": "#FFFFFF" }, "rows": [ { - "id": "F5IntroA", + "id": "2fDoFgGi", "settings": { - "spacing": { "padding": [0, 0, 30, 0] }, + "spacing": {}, "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, "gap": 0 }, "cells": [ { - "id": "F5IntroC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "rf0UFQ-I", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F5IntroT", + "id": "zm56tK7v", "type": "text", - "value": "

Features

Our app was made for creators like you. We build our APIs to be simple to use, powerful in production, and endlessly scalable.

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "value": "

BEFORE / AFTER

Replace guesswork with visible structure.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -37,266 +64,103 @@ ] }, { - "id": "F5Grid1A", - "settings": { "spacing": { "padding": [0, 0, 26, 0] }, "backgroundColor": "transparent", "collapseOnMobile": true, "gap": 28 }, - "cells": [ - { - "id": "F5ItemAA", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [], - "rows": [ - { - "id": "F5HeadAA", - "settings": { "spacing": { "padding": [0, 0, 14, 0] }, "backgroundColor": "transparent", "collapseOnMobile": false, "gap": 10 }, - "cells": [ - { - "id": "F5IconAA", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 16 }, - "atoms": [ - { - "id": "F5ImageA", - "type": "image", - "src": "img/browser.png", - "link": "https://example.com", - "alt": "Components", - "height": 36, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - }, - { - "id": "F5NameAA", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 84 }, - "atoms": [ - { - "id": "F5TitleA", - "type": "text", - "value": "

Components

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] - }, - { - "id": "F5DescAA", - "settings": { "spacing": {}, "backgroundColor": "transparent", "gap": 0 }, - "cells": [ - { - "id": "F5DescAC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [ - { - "id": "F5CopyAA", - "type": "text", - "value": "

Pre-designed components from which you can quickly create beautiful email templates.

", - "color": "#9FA3A7", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] - } + "id": "v06AvquA", + "settings": { + "spacing": { + "padding": [ + 20, + 0, + 0, + 0 ] }, - { - "id": "F5ItemBB", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [], - "rows": [ - { - "id": "F5HeadBB", - "settings": { "spacing": { "padding": [0, 0, 14, 0] }, "backgroundColor": "transparent", "collapseOnMobile": false, "gap": 10 }, - "cells": [ - { - "id": "F5IconBB", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 16 }, - "atoms": [ - { - "id": "F5ImageB", - "type": "image", - "src": "img/development.png", - "link": "https://example.com", - "alt": "ESP Ready", - "height": 36, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - }, - { - "id": "F5NameBB", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 84 }, - "atoms": [ - { - "id": "F5TitleB", - "type": "text", - "value": "

ESP Ready

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] - }, - { - "id": "F5DescBB", - "settings": { "spacing": {}, "backgroundColor": "transparent", "gap": 0 }, - "cells": [ - { - "id": "F5DescBC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [ - { - "id": "F5CopyBB", - "type": "text", - "value": "

Pre-designed components from which you can quickly create beautiful email templates.

", - "color": "#9FA3A7", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] - } - ] - } - ] - }, - { - "id": "F5Grid2A", - "settings": { "spacing": {}, "backgroundColor": "transparent", "collapseOnMobile": true, "gap": 28 }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 + }, "cells": [ { - "id": "F5ItemCC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [], - "rows": [ - { - "id": "F5HeadCC", - "settings": { "spacing": { "padding": [0, 0, 14, 0] }, "backgroundColor": "transparent", "collapseOnMobile": false, "gap": 10 }, - "cells": [ - { - "id": "F5IconCC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 16 }, - "atoms": [ - { - "id": "F5ImageC", - "type": "image", - "src": "img/test.png", - "link": "https://example.com", - "alt": "Performance", - "height": 36, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - }, - { - "id": "F5NameCC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 84 }, - "atoms": [ - { - "id": "F5TitleC", - "type": "text", - "value": "

Performance

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } + "id": "uSS2rHI7", + "settings": { + "spacing": { + "padding": [ + 26, + 22, + 26, + 22 ] }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 18, + "width": 50 + }, + "atoms": [ { - "id": "F5DescCC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "gap": 0 }, - "cells": [ - { - "id": "F5DescCD", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [ - { - "id": "F5CopyCC", - "type": "text", - "value": "

Pre-designed components from which you can quickly create beautiful email templates.

", - "color": "#9FA3A7", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] + "id": "6OB5WFT7", + "type": "text", + "value": "

WITHOUT A SYSTEM

Every send starts over.

× Rebuild common sections
× Find hierarchy by trial
× Discover limits at export

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } - ] + ], + "rows": [] }, { - "id": "F5ItemDD", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [], - "rows": [ - { - "id": "F5HeadDD", - "settings": { "spacing": { "padding": [0, 0, 14, 0] }, "backgroundColor": "transparent", "collapseOnMobile": false, "gap": 10 }, - "cells": [ - { - "id": "F5IconDD", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 16 }, - "atoms": [ - { - "id": "F5ImageD", - "type": "image", - "src": "img/service.png", - "link": "https://example.com", - "alt": "Service", - "height": 36, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - }, - { - "id": "F5NameDD", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", "horizontalAlign": "left", "width": 84 }, - "atoms": [ - { - "id": "F5TitleD", - "type": "text", - "value": "

Service

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } + "id": "JRpvoDe7", + "settings": { + "spacing": { + "padding": [ + 26, + 22, + 26, + 22 ] }, + "backgroundColor": "#FF6B00", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 18, + "width": 50 + }, + "atoms": [ { - "id": "F5DescDD", - "settings": { "spacing": {}, "backgroundColor": "transparent", "gap": 0 }, - "cells": [ - { - "id": "F5DescDC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left" }, - "atoms": [ - { - "id": "F5CopyDD", - "type": "text", - "value": "

Pre-designed components from which you can quickly create beautiful email templates.

", - "color": "#9FA3A7", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] + "id": "3msE1Ei7", + "type": "text", + "value": "

WITH A SYSTEM

Each send starts ahead.

✓ Reuse proven sections
✓ Edit a visible hierarchy
✓ Export the reviewed structure

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } - ] + ], + "rows": [] } ] } diff --git a/src/features/email-preview/catalog/blocks/feature6.json b/src/features/email-preview/catalog/blocks/feature6.json index 2785fc1..9ef750a 100644 --- a/src/features/email-preview/catalog/blocks/feature6.json +++ b/src/features/email-preview/catalog/blocks/feature6.json @@ -5,31 +5,58 @@ "type": "feature", "preview": "img/components/feature-6.png", "block": { - "id": "F6BlockA", + "id": "b79UkJ0X", "label": "Feature 6", "settings": { - "spacing": { "padding": [28, 42, 30, 42] }, - "backgroundColor": "#FFFFFF" + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#FFF9F3" }, "rows": [ { - "id": "F6TitleA", + "id": "U-hxCv-t", "settings": { - "spacing": { "padding": [0, 0, 28, 0] }, + "spacing": {}, "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, "gap": 0 }, "cells": [ { - "id": "F6HeadAA", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "2FOCjGBm", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left" + }, "atoms": [ { - "id": "F6TextAA", + "id": "XtwCHrMd", "type": "text", - "value": "

Features

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "value": "

CAPABILITY MAP

Four parts, one editing model.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -37,127 +64,201 @@ ] }, { - "id": "F6ItemsA", + "id": "82zg_6Lo", "settings": { - "spacing": { "padding": [0, 0, 28, 0] }, + "spacing": { + "padding": [ + 18, + 0, + 0, + 0 + ] + }, "backgroundColor": "transparent", + "hiddenOnMobile": false, "collapseOnMobile": true, - "gap": 18 + "gap": 16 }, "cells": [ { - "id": "F6CellAA", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, - "atoms": [ - { - "id": "F6ImageA", - "type": "image", - "src": "img/coffee.png", - "link": "https://example.com", - "alt": "Coffee", - "height": 50, - "spacing": { "margin": [0, 0, 10, 0], "padding": [0, 0, 0, 0] } + "id": "RHGII4l6", + "settings": { + "spacing": { + "padding": [ + 20, + 18, + 20, + 18 + ] }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 16, + "width": 50 + }, + "atoms": [ { - "id": "F6CopyAA", + "id": "MWIwIzdG", "type": "text", - "value": "

78

Cups of Coffee

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "value": "

COMPOSE

Reusable block library

Start from a useful position rather than a completed campaign.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] }, { - "id": "F6CellBB", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, - "atoms": [ - { - "id": "F6ImageB", - "type": "image", - "src": "img/ipod.png", - "link": "https://example.com", - "alt": "Music", - "height": 50, - "spacing": { "margin": [0, 0, 10, 0], "padding": [0, 0, 0, 0] } + "id": "uVIj88Mv", + "settings": { + "spacing": { + "padding": [ + 20, + 18, + 20, + 18 + ] }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 16, + "width": 50 + }, + "atoms": [ { - "id": "F6CopyBB", + "id": "HpBN9vJV", "type": "text", - "value": "

459

Songs Listened

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "value": "

REFINE

Explicit content tree

Move from block to atom without losing the surrounding structure.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] + } + ] + }, + { + "id": "ynlsycj1", + "settings": { + "spacing": { + "padding": [ + 16, + 0, + 0, + 0 + ] }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 + }, + "cells": [ { - "id": "F6CellCC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, - "atoms": [ - { - "id": "F6ImageC", - "type": "image", - "src": "img/apple-icon.png", - "link": "https://example.com", - "alt": "Skipped meals", - "height": 50, - "spacing": { "margin": [0, 0, 10, 0], "padding": [0, 0, 0, 0] } + "id": "k92EnpCz", + "settings": { + "spacing": { + "padding": [ + 20, + 18, + 20, + 18 + ] }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 16, + "width": 50 + }, + "atoms": [ { - "id": "F6CopyCC", + "id": "AGjqRs6M", "type": "text", - "value": "

05

Skipped Meals

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "value": "

REVIEW

Desktop and mobile preview

Check hierarchy and stacking before the message leaves the editor.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] }, { - "id": "F6CellDD", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, - "atoms": [ - { - "id": "F6ImageD", - "type": "image", - "src": "img/game-controller.png", - "link": "https://example.com", - "alt": "Gaming", - "height": 50, - "spacing": { "margin": [0, 0, 10, 0], "padding": [0, 0, 0, 0] } + "id": "a9XFijt6", + "settings": { + "spacing": { + "padding": [ + 20, + 18, + 20, + 18 + ] }, - { - "id": "F6CopyDD", - "type": "text", - "value": "

10

Hours Gaming

", - "color": "#111111", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } - } - ], - "rows": [] - } - ] - }, - { - "id": "F6Action", - "settings": { "spacing": {}, "backgroundColor": "transparent", "gap": 0 }, - "cells": [ - { - "id": "F6Button", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 16, + "width": 50 + }, "atoms": [ { - "id": "F6BtnAtm", - "type": "button", - "text": "Download", - "link": "https://example.com", - "backgroundColor": "#409EFF", - "color": "#FFFFFF", - "fontSize": 14, - "borderRadius": 3, - "padding": [12, 20, 12, 20], - "spacing": { "margin": [0, 0, 0, 0], "padding": [12, 20, 12, 20] } + "id": "AThJ6Cr_", + "type": "text", + "value": "

DELIVER

JSON and HTML output

Keep the versioned source and the email-ready result connected.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] diff --git a/src/features/email-preview/catalog/blocks/feature7.json b/src/features/email-preview/catalog/blocks/feature7.json new file mode 100644 index 0000000..3411557 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/feature7.json @@ -0,0 +1,273 @@ +{ + "version": 2, + "name": "feature7", + "label": "Feature 7", + "type": "feature", + "preview": "img/components/feature-7.png", + "block": { + "id": "94Uqah1u", + "label": "Feature 7", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 28, + 0 + ] + }, + "backgroundColor": "#FFFFFF" + }, + "rows": [ + { + "id": "DHHtUKZl", + "settings": { + "spacing": { + "padding": [ + 32, + 32, + 32, + 32 + ] + }, + "backgroundColor": "#1F1712", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 + }, + "cells": [ + { + "id": "AZQ4iZ_G", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 24, + 0 + ] + }, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 62 + }, + "atoms": [ + { + "id": "PfVfez8T", + "type": "text", + "value": "

FEATURE SPOTLIGHT

The tree stays visible while the message changes.

A focused capability with enough context to explain why it matters.

", + "color": "#FFFFFF", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "wDtgpfcV", + "type": "button", + "text": "See the editor", + "link": "https://card.email/start", + "backgroundColor": "#FFFFFF", + "color": "#1F1712", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 18, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "mdFDfTtt", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ] + }, + "backgroundColor": "#FF6B00", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 18, + "width": 38 + }, + "atoms": [ + { + "id": "mu7prwhQ", + "type": "image", + "src": "img/catalog/devices/mechanical-keyboard.png", + "link": "https://card.email/features", + "alt": "Orange mechanical keyboard", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "1XusRo4M", + "settings": { + "spacing": { + "padding": [ + 22, + 32, + 0, + 32 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 18 + }, + "cells": [ + { + "id": "1c5x_w1L", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 33 + }, + "atoms": [ + { + "id": "pPDzrwdI", + "type": "text", + "value": "

Select precisely
Block, row, cell or atom.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "ZlYguK3B", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 33 + }, + "atoms": [ + { + "id": "_5AcZGDd", + "type": "text", + "value": "

Edit locally
Change only the intended layer.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "uVXcE1ZS", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 33 + }, + "atoms": [ + { + "id": "Dg1KJr_S", + "type": "text", + "value": "

Review clearly
Keep the whole email in context.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/feature8.json b/src/features/email-preview/catalog/blocks/feature8.json new file mode 100644 index 0000000..fdbaf8b --- /dev/null +++ b/src/features/email-preview/catalog/blocks/feature8.json @@ -0,0 +1,168 @@ +{ + "version": 2, + "name": "feature8", + "label": "Feature 8", + "type": "feature", + "preview": "img/components/feature-8.png", + "block": { + "id": "n4yYZlWY", + "label": "Feature 8", + "settings": { + "spacing": { + "padding": [ + 28, + 24, + 28, + 24 + ] + }, + "backgroundColor": "#FFF3E6" + }, + "rows": [ + { + "id": "OOm3r2OA", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 14 + }, + "cells": [ + { + "id": "iqKOKPun", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "width": 25 + }, + "atoms": [ + { + "id": "-B9mThms", + "type": "text", + "value": "

BL

Block library
Useful starts

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "udRweIKD", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "width": 25 + }, + "atoms": [ + { + "id": "4ZA182Yo", + "type": "text", + "value": "

TR

Visible tree
Explicit layers

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "9uzt7kGO", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "width": 25 + }, + "atoms": [ + { + "id": "DHl9GyMB", + "type": "text", + "value": "

PV

Live preview
Desktop + mobile

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "gz4N5MUQ", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "width": 25 + }, + "atoms": [ + { + "id": "gQY-3ufY", + "type": "text", + "value": "

EX

Safe export
JSON + HTML

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/footer1-dark.json b/src/features/email-preview/catalog/blocks/footer1-dark.json index e4f5d97..9d8c5b3 100644 --- a/src/features/email-preview/catalog/blocks/footer1-dark.json +++ b/src/features/email-preview/catalog/blocks/footer1-dark.json @@ -8,7 +8,14 @@ "id": "F1DBlock", "label": "Footer 1", "settings": { - "spacing": { "padding": [30, 35, 30, 35] }, + "spacing": { + "padding": [ + 30, + 35, + 30, + 35 + ] + }, "backgroundColor": "#222222" }, "rows": [ @@ -17,7 +24,8 @@ "settings": { "spacing": {}, "backgroundColor": "transparent", - "gap": 0 + "gap": 0, + "collapseOnMobile": true }, "cells": [ { @@ -32,9 +40,22 @@ { "id": "F1DAddrA", "type": "text", - "value": "

500 Howard Street
San Francisco, CA 94105

", + "value": "

500 Howard Street
San Francisco, CA 94105

", "color": "#AAAAAA", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -44,9 +65,17 @@ { "id": "F1DMenuR", "settings": { - "spacing": { "padding": [2, 0, 0, 0] }, + "spacing": { + "padding": [ + 2, + 0, + 0, + 0 + ] + }, "backgroundColor": "transparent", - "gap": 0 + "gap": 0, + "collapseOnMobile": true }, "cells": [ { @@ -64,11 +93,42 @@ "itemType": "text", "gap": 20, "items": [ - { "type": "text", "text": "Update preferences", "link": "https://example.com", "color": "#FFFFFF", "fontSize": 14 }, - { "type": "text", "text": "Unsubscribe", "link": "https://example.com", "color": "#FFFFFF", "fontSize": 14 }, - { "type": "text", "text": "Policies", "link": "https://example.com", "color": "#FFFFFF", "fontSize": 14 } + { + "type": "text", + "text": "Update preferences", + "link": "https://example.com", + "color": "#FFFFFF", + "fontSize": 14 + }, + { + "type": "text", + "text": "Unsubscribe", + "link": "https://example.com", + "color": "#FFFFFF", + "fontSize": 14 + }, + { + "type": "text", + "text": "Policies", + "link": "https://example.com", + "color": "#FFFFFF", + "fontSize": 14 + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] diff --git a/src/features/email-preview/catalog/blocks/footer1-light.json b/src/features/email-preview/catalog/blocks/footer1-light.json index c10dee0..17a96e0 100644 --- a/src/features/email-preview/catalog/blocks/footer1-light.json +++ b/src/features/email-preview/catalog/blocks/footer1-light.json @@ -8,24 +8,54 @@ "id": "F1LBlock", "label": "Footer 5", "settings": { - "spacing": { "padding": [30, 35, 30, 35] }, + "spacing": { + "padding": [ + 30, + 35, + 30, + 35 + ] + }, "backgroundColor": "#FFFFFF" }, "rows": [ { "id": "F1LAddrR", - "settings": { "spacing": {}, "backgroundColor": "transparent", "gap": 0 }, + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { "id": "F1LAddrC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { "id": "F1LAddrA", "type": "text", - "value": "

500 Howard Street
San Francisco, CA 94105

", + "value": "

500 Howard Street
San Francisco, CA 94105

", "color": "#AAAAAA", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -34,11 +64,28 @@ }, { "id": "F1LMenuR", - "settings": { "spacing": { "padding": [2, 0, 0, 0] }, "backgroundColor": "transparent", "gap": 0 }, + "settings": { + "spacing": { + "padding": [ + 2, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { "id": "F1LMenuC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { "id": "F1LMenuA", @@ -46,11 +93,42 @@ "itemType": "text", "gap": 20, "items": [ - { "type": "text", "text": "Update preferences", "link": "https://example.com", "color": "#222222", "fontSize": 14 }, - { "type": "text", "text": "Unsubscribe", "link": "https://example.com", "color": "#222222", "fontSize": 14 }, - { "type": "text", "text": "Policies", "link": "https://example.com", "color": "#222222", "fontSize": 14 } + { + "type": "text", + "text": "Update preferences", + "link": "https://example.com", + "color": "#222222", + "fontSize": 14 + }, + { + "type": "text", + "text": "Unsubscribe", + "link": "https://example.com", + "color": "#222222", + "fontSize": 14 + }, + { + "type": "text", + "text": "Policies", + "link": "https://example.com", + "color": "#222222", + "fontSize": 14 + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] diff --git a/src/features/email-preview/catalog/blocks/footer2-dark.json b/src/features/email-preview/catalog/blocks/footer2-dark.json index 9f657b7..0c98bdf 100644 --- a/src/features/email-preview/catalog/blocks/footer2-dark.json +++ b/src/features/email-preview/catalog/blocks/footer2-dark.json @@ -5,23 +5,38 @@ "type": "footer", "preview": "img/components/footer-2-dark.png", "block": { - "id": "F2DBlock", + "id": "Hkdx4ySm", "label": "Footer 2", "settings": { - "spacing": { "padding": [30, 35, 30, 35] }, + "spacing": { + "padding": [ + 30, + 35, + 30, + 35 + ] + }, "backgroundColor": "#222222" }, "rows": [ { - "id": "F2DSocRw", + "id": "TyaYiJM5", "settings": { - "spacing": { "padding": [0, 0, 25, 0] }, + "spacing": { + "padding": [ + 0, + 0, + 25, + 0 + ] + }, "backgroundColor": "transparent", - "gap": 0 + "gap": 0, + "collapseOnMobile": true }, "cells": [ { - "id": "F2DSocCl", + "id": "1EzePIwO", "settings": { "spacing": {}, "backgroundColor": "transparent", @@ -30,16 +45,50 @@ }, "atoms": [ { - "id": "F2DSocAt", + "id": "bBEW7SlM", "type": "menu", "itemType": "image", "gap": 20, "items": [ - { "type": "image", "name": "Facebook", "link": "https://example.com", "url": "img/footer-facebook-white.png", "width": 16, "alt": "Facebook" }, - { "type": "image", "name": "Twitter", "link": "https://example.com", "url": "img/footer-twitter-white.png", "width": 16, "alt": "Twitter" }, - { "type": "image", "name": "Instagram", "link": "https://example.com", "url": "img/footer-instagram-white.png", "width": 16, "alt": "Instagram" } + { + "type": "image", + "name": "Facebook", + "link": "https://example.com", + "url": "img/system/social/footer/footer-facebook-white.png", + "width": 16, + "alt": "Facebook" + }, + { + "type": "image", + "name": "Twitter", + "link": "https://example.com", + "url": "img/system/social/menu/twitter-x-white.png", + "width": 16, + "alt": "Twitter" + }, + { + "type": "image", + "name": "Instagram", + "link": "https://example.com", + "url": "img/system/social/footer/footer-instagram-white.png", + "width": 16, + "alt": "Instagram" + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -47,7 +96,7 @@ ] }, { - "id": "F2DMainR", + "id": "PrPnm4eO", "settings": { "spacing": {}, "backgroundColor": "transparent", @@ -56,7 +105,7 @@ }, "cells": [ { - "id": "F2DLogoC", + "id": "5pbABSfc", "settings": { "spacing": {}, "backgroundColor": "transparent", @@ -66,21 +115,41 @@ }, "atoms": [ { - "id": "F2DLogoA", + "id": "o6dvm6r_", "type": "image", - "src": "img/logo-white.png", + "src": "img/system/logos/logo-white.png", "link": "https://example.com", "alt": "MySigMail", "width": 110, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] }, { - "id": "F2DInfoC", + "id": "pl_hzwwV", "settings": { - "spacing": { "padding": [0, 0, 0, 30] }, + "spacing": { + "padding": [ + 0, + 0, + 0, + 30 + ] + }, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left", @@ -88,23 +157,67 @@ }, "atoms": [ { - "id": "F2DInfoA", + "id": "VZ179NCb", "type": "text", - "value": "

500 Howard Street San Francisco, CA 94105
hello@example.com

", + "value": "

500 Howard Street San Francisco, CA 94105
hello@example.com

", "color": "#AAAAAA", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } }, { - "id": "F2DMenuA", + "id": "eDCSkkbh", "type": "menu", "itemType": "text", "gap": 20, "items": [ - { "type": "text", "text": "Update preferences", "link": "https://example.com", "color": "#FFFFFF", "fontSize": 14 }, - { "type": "text", "text": "Unsubscribe", "link": "https://example.com", "color": "#FFFFFF", "fontSize": 14 }, - { "type": "text", "text": "Policies", "link": "https://example.com", "color": "#FFFFFF", "fontSize": 14 } + { + "type": "text", + "text": "Update preferences", + "link": "https://example.com", + "color": "#FFFFFF", + "fontSize": 14 + }, + { + "type": "text", + "text": "Unsubscribe", + "link": "https://example.com", + "color": "#FFFFFF", + "fontSize": 14 + }, + { + "type": "text", + "text": "Policies", + "link": "https://example.com", + "color": "#FFFFFF", + "fontSize": 14 + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [2, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 2, + 0, + 0, + 0 + ] + } } ], "rows": [] diff --git a/src/features/email-preview/catalog/blocks/footer2-light.json b/src/features/email-preview/catalog/blocks/footer2-light.json index 69673a3..80daf93 100644 --- a/src/features/email-preview/catalog/blocks/footer2-light.json +++ b/src/features/email-preview/catalog/blocks/footer2-light.json @@ -5,32 +5,90 @@ "type": "footer", "preview": "img/components/footer-2-light.png", "block": { - "id": "F2LBlock", + "id": "qv65MHbb", "label": "Footer 6", "settings": { - "spacing": { "padding": [30, 35, 30, 35] }, + "spacing": { + "padding": [ + 30, + 35, + 30, + 35 + ] + }, "backgroundColor": "#FFFFFF" }, "rows": [ { - "id": "F2LSocRw", - "settings": { "spacing": { "padding": [0, 0, 25, 0] }, "backgroundColor": "transparent", "gap": 0 }, + "id": "KkATgT7H", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 25, + 0 + ] + }, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F2LSocCl", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "LTFVhWFh", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F2LSocAt", + "id": "GMFX2xT6", "type": "menu", "itemType": "image", "gap": 20, "items": [ - { "type": "image", "name": "Facebook", "link": "https://example.com", "url": "img/footer-facebook-black.png", "width": 16, "alt": "Facebook" }, - { "type": "image", "name": "Twitter", "link": "https://example.com", "url": "img/footer-twitter-black.png", "width": 16, "alt": "Twitter" }, - { "type": "image", "name": "Instagram", "link": "https://example.com", "url": "img/footer-instagram-black.png", "width": 16, "alt": "Instagram" } + { + "type": "image", + "name": "Facebook", + "link": "https://example.com", + "url": "img/system/social/footer/footer-facebook-black.png", + "width": 16, + "alt": "Facebook" + }, + { + "type": "image", + "name": "Twitter", + "link": "https://example.com", + "url": "img/system/social/menu/twitter-x-black.png", + "width": 16, + "alt": "Twitter" + }, + { + "type": "image", + "name": "Instagram", + "link": "https://example.com", + "url": "img/system/social/footer/footer-instagram-black.png", + "width": 16, + "alt": "Instagram" + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -38,47 +96,128 @@ ] }, { - "id": "F2LMainR", - "settings": { "spacing": {}, "backgroundColor": "transparent", "gap": 0, "collapseOnMobile": true }, + "id": "LHZzRzMq", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F2LLogoC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left", "width": 21 }, + "id": "ntTDWFeo", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 21 + }, "atoms": [ { - "id": "F2LLogoA", + "id": "ZTs4GyI_", "type": "image", - "src": "img/logo-black.png", + "src": "img/system/logos/logo-black.png", "link": "https://example.com", "alt": "MySigMail", "width": 110, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] }, { - "id": "F2LInfoC", - "settings": { "spacing": { "padding": [0, 0, 0, 30] }, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "left", "width": 79 }, + "id": "yt5IBZqh", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 0, + 30 + ] + }, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 79 + }, "atoms": [ { - "id": "F2LInfoA", + "id": "fhipuLNA", "type": "text", - "value": "

500 Howard Street San Francisco, CA 94105
hello@example.com

", + "value": "

500 Howard Street San Francisco, CA 94105
hello@example.com

", "color": "#AAAAAA", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } }, { - "id": "F2LMenuA", + "id": "4VJ56yUA", "type": "menu", "itemType": "text", "gap": 20, "items": [ - { "type": "text", "text": "Update preferences", "link": "https://example.com", "color": "#222222", "fontSize": 14 }, - { "type": "text", "text": "Unsubscribe", "link": "https://example.com", "color": "#222222", "fontSize": 14 }, - { "type": "text", "text": "Policies", "link": "https://example.com", "color": "#222222", "fontSize": 14 } + { + "type": "text", + "text": "Update preferences", + "link": "https://example.com", + "color": "#222222", + "fontSize": 14 + }, + { + "type": "text", + "text": "Unsubscribe", + "link": "https://example.com", + "color": "#222222", + "fontSize": 14 + }, + { + "type": "text", + "text": "Policies", + "link": "https://example.com", + "color": "#222222", + "fontSize": 14 + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [2, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 2, + 0, + 0, + 0 + ] + } } ], "rows": [] diff --git a/src/features/email-preview/catalog/blocks/footer3-dark.json b/src/features/email-preview/catalog/blocks/footer3-dark.json index 3977646..2563541 100644 --- a/src/features/email-preview/catalog/blocks/footer3-dark.json +++ b/src/features/email-preview/catalog/blocks/footer3-dark.json @@ -5,32 +5,90 @@ "type": "footer", "preview": "img/components/footer-3-dark.png", "block": { - "id": "F3DBlock", + "id": "6uSDbFPK", "label": "Footer 3", "settings": { - "spacing": { "padding": [30, 35, 30, 35] }, + "spacing": { + "padding": [ + 30, + 35, + 30, + 35 + ] + }, "backgroundColor": "#222222" }, "rows": [ { - "id": "F3DSocRw", - "settings": { "spacing": { "padding": [0, 0, 25, 0] }, "backgroundColor": "transparent", "gap": 0 }, + "id": "IlVD0ier", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 25, + 0 + ] + }, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F3DSocCl", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "qwycv-1H", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F3DSocAt", + "id": "j4AicnQd", "type": "menu", "itemType": "image", "gap": 20, "items": [ - { "type": "image", "name": "Facebook", "link": "https://example.com", "url": "img/footer-facebook-white.png", "width": 16, "alt": "Facebook" }, - { "type": "image", "name": "Twitter", "link": "https://example.com", "url": "img/footer-twitter-white.png", "width": 16, "alt": "Twitter" }, - { "type": "image", "name": "Instagram", "link": "https://example.com", "url": "img/footer-instagram-white.png", "width": 16, "alt": "Instagram" } + { + "type": "image", + "name": "Facebook", + "link": "https://example.com", + "url": "img/system/social/footer/footer-facebook-white.png", + "width": 16, + "alt": "Facebook" + }, + { + "type": "image", + "name": "Twitter", + "link": "https://example.com", + "url": "img/system/social/menu/twitter-x-white.png", + "width": 16, + "alt": "Twitter" + }, + { + "type": "image", + "name": "Instagram", + "link": "https://example.com", + "url": "img/system/social/footer/footer-instagram-white.png", + "width": 16, + "alt": "Instagram" + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -38,21 +96,51 @@ ] }, { - "id": "F3DLogoR", - "settings": { "spacing": { "padding": [0, 0, 20, 0] }, "backgroundColor": "transparent", "gap": 0 }, + "id": "bOtTuCN9", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 20, + 0 + ] + }, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F3DLogoC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "NLtSzxTt", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F3DLogoA", + "id": "V-q163_V", "type": "image", - "src": "img/logo-white.png", + "src": "img/system/logos/logo-white.png", "link": "https://example.com", "alt": "MySigMail", "width": 110, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -60,19 +148,42 @@ ] }, { - "id": "F3DInfoR", - "settings": { "spacing": {}, "backgroundColor": "transparent", "gap": 0 }, + "id": "gnVF0Ep0", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F3DInfoC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "4OrgJi4V", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F3DInfoA", + "id": "4Wgc0GIV", "type": "text", - "value": "

500 Howard Street San Francisco, CA 94105
hello@example.com

", + "value": "

500 Howard Street San Francisco, CA 94105
hello@example.com

", "color": "#AAAAAA", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -80,24 +191,72 @@ ] }, { - "id": "F3DMenuR", - "settings": { "spacing": { "padding": [2, 0, 0, 0] }, "backgroundColor": "transparent", "gap": 0 }, + "id": "-61Kl_jL", + "settings": { + "spacing": { + "padding": [ + 2, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F3DMenuC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "AX-aayl3", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F3DMenuA", + "id": "Gsk0b4-m", "type": "menu", "itemType": "text", "gap": 20, "items": [ - { "type": "text", "text": "Update preferences", "link": "https://example.com", "color": "#FFFFFF", "fontSize": 14 }, - { "type": "text", "text": "Unsubscribe", "link": "https://example.com", "color": "#FFFFFF", "fontSize": 14 }, - { "type": "text", "text": "Policies", "link": "https://example.com", "color": "#FFFFFF", "fontSize": 14 } + { + "type": "text", + "text": "Update preferences", + "link": "https://example.com", + "color": "#FFFFFF", + "fontSize": 14 + }, + { + "type": "text", + "text": "Unsubscribe", + "link": "https://example.com", + "color": "#FFFFFF", + "fontSize": 14 + }, + { + "type": "text", + "text": "Policies", + "link": "https://example.com", + "color": "#FFFFFF", + "fontSize": 14 + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] diff --git a/src/features/email-preview/catalog/blocks/footer3-light.json b/src/features/email-preview/catalog/blocks/footer3-light.json index 402dcf3..c7dd828 100644 --- a/src/features/email-preview/catalog/blocks/footer3-light.json +++ b/src/features/email-preview/catalog/blocks/footer3-light.json @@ -5,32 +5,90 @@ "type": "footer", "preview": "img/components/footer-3-light.png", "block": { - "id": "F3LBlock", + "id": "aWD21pnj", "label": "Footer 7", "settings": { - "spacing": { "padding": [30, 35, 30, 35] }, + "spacing": { + "padding": [ + 30, + 35, + 30, + 35 + ] + }, "backgroundColor": "#FFFFFF" }, "rows": [ { - "id": "F3LSocRw", - "settings": { "spacing": { "padding": [0, 0, 25, 0] }, "backgroundColor": "transparent", "gap": 0 }, + "id": "1SDO-JGZ", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 25, + 0 + ] + }, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F3LSocCl", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "3w26r5Ff", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F3LSocAt", + "id": "zRvGhTSW", "type": "menu", "itemType": "image", "gap": 20, "items": [ - { "type": "image", "name": "Facebook", "link": "https://example.com", "url": "img/footer-facebook-black.png", "width": 16, "alt": "Facebook" }, - { "type": "image", "name": "Twitter", "link": "https://example.com", "url": "img/footer-twitter-black.png", "width": 16, "alt": "Twitter" }, - { "type": "image", "name": "Instagram", "link": "https://example.com", "url": "img/footer-instagram-black.png", "width": 16, "alt": "Instagram" } + { + "type": "image", + "name": "Facebook", + "link": "https://example.com", + "url": "img/system/social/footer/footer-facebook-black.png", + "width": 16, + "alt": "Facebook" + }, + { + "type": "image", + "name": "Twitter", + "link": "https://example.com", + "url": "img/system/social/menu/twitter-x-black.png", + "width": 16, + "alt": "Twitter" + }, + { + "type": "image", + "name": "Instagram", + "link": "https://example.com", + "url": "img/system/social/footer/footer-instagram-black.png", + "width": 16, + "alt": "Instagram" + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -38,21 +96,51 @@ ] }, { - "id": "F3LLogoR", - "settings": { "spacing": { "padding": [0, 0, 20, 0] }, "backgroundColor": "transparent", "gap": 0 }, + "id": "9g4pOGxK", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 20, + 0 + ] + }, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F3LLogoC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "3UEzpWF0", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F3LLogoA", + "id": "BNPRcoLx", "type": "image", - "src": "img/logo-black.png", + "src": "img/system/logos/logo-black.png", "link": "https://example.com", "alt": "MySigMail", "width": 110, - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -60,19 +148,42 @@ ] }, { - "id": "F3LInfoR", - "settings": { "spacing": {}, "backgroundColor": "transparent", "gap": 0 }, + "id": "17FXKogV", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F3LInfoC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "e87oEFit", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F3LInfoA", + "id": "ZYePtmR0", "type": "text", - "value": "

500 Howard Street San Francisco, CA 94105
hello@example.com

", + "value": "

500 Howard Street San Francisco, CA 94105
hello@example.com

", "color": "#AAAAAA", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -80,24 +191,72 @@ ] }, { - "id": "F3LMenuR", - "settings": { "spacing": { "padding": [2, 0, 0, 0] }, "backgroundColor": "transparent", "gap": 0 }, + "id": "-mfdF_lV", + "settings": { + "spacing": { + "padding": [ + 2, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F3LMenuC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "9u6-zCy6", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F3LMenuA", + "id": "cxkPLV04", "type": "menu", "itemType": "text", "gap": 20, "items": [ - { "type": "text", "text": "Update preferences", "link": "https://example.com", "color": "#222222", "fontSize": 14 }, - { "type": "text", "text": "Unsubscribe", "link": "https://example.com", "color": "#222222", "fontSize": 14 }, - { "type": "text", "text": "Policies", "link": "https://example.com", "color": "#222222", "fontSize": 14 } + { + "type": "text", + "text": "Update preferences", + "link": "https://example.com", + "color": "#222222", + "fontSize": 14 + }, + { + "type": "text", + "text": "Unsubscribe", + "link": "https://example.com", + "color": "#222222", + "fontSize": 14 + }, + { + "type": "text", + "text": "Policies", + "link": "https://example.com", + "color": "#222222", + "fontSize": 14 + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] diff --git a/src/features/email-preview/catalog/blocks/footer4-dark.json b/src/features/email-preview/catalog/blocks/footer4-dark.json index 837ece2..682be8c 100644 --- a/src/features/email-preview/catalog/blocks/footer4-dark.json +++ b/src/features/email-preview/catalog/blocks/footer4-dark.json @@ -5,32 +5,90 @@ "type": "footer", "preview": "img/components/footer-4-dark.png", "block": { - "id": "F4DBlock", + "id": "moO4o1IA", "label": "Footer 4", "settings": { - "spacing": { "padding": [30, 35, 30, 35] }, + "spacing": { + "padding": [ + 30, + 35, + 30, + 35 + ] + }, "backgroundColor": "#222222" }, "rows": [ { - "id": "F4DSocRw", - "settings": { "spacing": { "padding": [0, 0, 25, 0] }, "backgroundColor": "transparent", "gap": 0 }, + "id": "Q93k4Md9", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 25, + 0 + ] + }, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F4DSocCl", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "mjykxDYu", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F4DSocAt", + "id": "dz4wsK0H", "type": "menu", "itemType": "image", "gap": 20, "items": [ - { "type": "image", "name": "Facebook", "link": "https://example.com", "url": "img/footer-facebook-white.png", "width": 16, "alt": "Facebook" }, - { "type": "image", "name": "Twitter", "link": "https://example.com", "url": "img/footer-twitter-white.png", "width": 16, "alt": "Twitter" }, - { "type": "image", "name": "Instagram", "link": "https://example.com", "url": "img/footer-instagram-white.png", "width": 16, "alt": "Instagram" } + { + "type": "image", + "name": "Facebook", + "link": "https://example.com", + "url": "img/system/social/footer/footer-facebook-white.png", + "width": 16, + "alt": "Facebook" + }, + { + "type": "image", + "name": "Twitter", + "link": "https://example.com", + "url": "img/system/social/menu/twitter-x-white.png", + "width": 16, + "alt": "Twitter" + }, + { + "type": "image", + "name": "Instagram", + "link": "https://example.com", + "url": "img/system/social/footer/footer-instagram-white.png", + "width": 16, + "alt": "Instagram" + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -38,19 +96,42 @@ ] }, { - "id": "F4DInfoR", - "settings": { "spacing": {}, "backgroundColor": "transparent", "gap": 0 }, + "id": "g1IqSDkX", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F4DInfoC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "7TuhGpEB", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F4DInfoA", + "id": "OmC7c7EO", "type": "text", - "value": "

500 Howard Street San Francisco, CA 94105
hello@example.com

", + "value": "

500 Howard Street San Francisco, CA 94105
hello@example.com

", "color": "#AAAAAA", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -58,23 +139,67 @@ ] }, { - "id": "F4DAppsR", - "settings": { "spacing": { "padding": [0, 0, 20, 0] }, "backgroundColor": "transparent", "gap": 0 }, + "id": "EChGDNL7", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 20, + 0 + ] + }, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F4DAppsC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "Ft6EtJk5", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F4DAppsA", + "id": "vNCmTGfR", "type": "menu", "itemType": "image", "gap": 12, "items": [ - { "type": "image", "name": "App Store", "link": "https://example.com", "url": "img/app-store.png", "width": 150, "alt": "Download on the App Store" }, - { "type": "image", "name": "Google Play", "link": "https://example.com", "url": "img/google-play.png", "width": 150, "alt": "Get it on Google Play" } + { + "type": "image", + "name": "App Store", + "link": "https://example.com", + "url": "img/system/stores/app-store.png", + "width": 150, + "alt": "Download on the App Store" + }, + { + "type": "image", + "name": "Google Play", + "link": "https://example.com", + "url": "img/system/stores/google-play.png", + "width": 150, + "alt": "Get it on Google Play" + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -82,24 +207,72 @@ ] }, { - "id": "F4DMenuR", - "settings": { "spacing": { "padding": [2, 0, 0, 0] }, "backgroundColor": "transparent", "gap": 0 }, + "id": "vjPpHzLT", + "settings": { + "spacing": { + "padding": [ + 2, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F4DMenuC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "FX3Kgmrq", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F4DMenuA", + "id": "h0m8688w", "type": "menu", "itemType": "text", "gap": 20, "items": [ - { "type": "text", "text": "Update preferences", "link": "https://example.com", "color": "#FFFFFF", "fontSize": 14 }, - { "type": "text", "text": "Unsubscribe", "link": "https://example.com", "color": "#FFFFFF", "fontSize": 14 }, - { "type": "text", "text": "Policies", "link": "https://example.com", "color": "#FFFFFF", "fontSize": 14 } + { + "type": "text", + "text": "Update preferences", + "link": "https://example.com", + "color": "#FFFFFF", + "fontSize": 14 + }, + { + "type": "text", + "text": "Unsubscribe", + "link": "https://example.com", + "color": "#FFFFFF", + "fontSize": 14 + }, + { + "type": "text", + "text": "Policies", + "link": "https://example.com", + "color": "#FFFFFF", + "fontSize": 14 + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] diff --git a/src/features/email-preview/catalog/blocks/footer4-light.json b/src/features/email-preview/catalog/blocks/footer4-light.json index 4f9cfac..619955b 100644 --- a/src/features/email-preview/catalog/blocks/footer4-light.json +++ b/src/features/email-preview/catalog/blocks/footer4-light.json @@ -5,32 +5,90 @@ "type": "footer", "preview": "img/components/footer-4-light.png", "block": { - "id": "F4LBlock", + "id": "SQXsS8kL", "label": "Footer 8", "settings": { - "spacing": { "padding": [30, 35, 30, 35] }, + "spacing": { + "padding": [ + 30, + 35, + 30, + 35 + ] + }, "backgroundColor": "#FFFFFF" }, "rows": [ { - "id": "F4LSocRw", - "settings": { "spacing": { "padding": [0, 0, 25, 0] }, "backgroundColor": "transparent", "gap": 0 }, + "id": "OBAe4Nw9", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 25, + 0 + ] + }, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F4LSocCl", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "wsQW1hU1", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F4LSocAt", + "id": "V9a2S2MB", "type": "menu", "itemType": "image", "gap": 20, "items": [ - { "type": "image", "name": "Facebook", "link": "https://example.com", "url": "img/footer-facebook-black.png", "width": 16, "alt": "Facebook" }, - { "type": "image", "name": "Twitter", "link": "https://example.com", "url": "img/footer-twitter-black.png", "width": 16, "alt": "Twitter" }, - { "type": "image", "name": "Instagram", "link": "https://example.com", "url": "img/footer-instagram-black.png", "width": 16, "alt": "Instagram" } + { + "type": "image", + "name": "Facebook", + "link": "https://example.com", + "url": "img/system/social/footer/footer-facebook-black.png", + "width": 16, + "alt": "Facebook" + }, + { + "type": "image", + "name": "Twitter", + "link": "https://example.com", + "url": "img/system/social/menu/twitter-x-black.png", + "width": 16, + "alt": "Twitter" + }, + { + "type": "image", + "name": "Instagram", + "link": "https://example.com", + "url": "img/system/social/footer/footer-instagram-black.png", + "width": 16, + "alt": "Instagram" + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -38,19 +96,42 @@ ] }, { - "id": "F4LInfoR", - "settings": { "spacing": {}, "backgroundColor": "transparent", "gap": 0 }, + "id": "v9JoiKmp", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F4LInfoC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "S87X7giX", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F4LInfoA", + "id": "tzjWvWr0", "type": "text", - "value": "

500 Howard Street San Francisco, CA 94105
hello@example.com

", + "value": "

500 Howard Street San Francisco, CA 94105
hello@example.com

", "color": "#AAAAAA", - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -58,23 +139,67 @@ ] }, { - "id": "F4LAppsR", - "settings": { "spacing": { "padding": [0, 0, 20, 0] }, "backgroundColor": "transparent", "gap": 0 }, + "id": "ouIPvMn4", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 20, + 0 + ] + }, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F4LAppsC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "EsXMoV_T", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F4LAppsA", + "id": "gL3epoU7", "type": "menu", "itemType": "image", "gap": 12, "items": [ - { "type": "image", "name": "App Store", "link": "https://example.com", "url": "img/app-store.png", "width": 150, "alt": "Download on the App Store" }, - { "type": "image", "name": "Google Play", "link": "https://example.com", "url": "img/google-play.png", "width": 150, "alt": "Get it on Google Play" } + { + "type": "image", + "name": "App Store", + "link": "https://example.com", + "url": "img/system/stores/app-store.png", + "width": 150, + "alt": "Download on the App Store" + }, + { + "type": "image", + "name": "Google Play", + "link": "https://example.com", + "url": "img/system/stores/google-play.png", + "width": 150, + "alt": "Get it on Google Play" + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] @@ -82,24 +207,72 @@ ] }, { - "id": "F4LMenuR", - "settings": { "spacing": { "padding": [2, 0, 0, 0] }, "backgroundColor": "transparent", "gap": 0 }, + "id": "OCL5SFN2", + "settings": { + "spacing": { + "padding": [ + 2, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "gap": 0, + "collapseOnMobile": true + }, "cells": [ { - "id": "F4LMenuC", - "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", "horizontalAlign": "center" }, + "id": "3iEUMAXV", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, "atoms": [ { - "id": "F4LMenuA", + "id": "8CK-LC3x", "type": "menu", "itemType": "text", "gap": 20, "items": [ - { "type": "text", "text": "Update preferences", "link": "https://example.com", "color": "#222222", "fontSize": 14 }, - { "type": "text", "text": "Unsubscribe", "link": "https://example.com", "color": "#222222", "fontSize": 14 }, - { "type": "text", "text": "Policies", "link": "https://example.com", "color": "#222222", "fontSize": 14 } + { + "type": "text", + "text": "Update preferences", + "link": "https://example.com", + "color": "#222222", + "fontSize": 14 + }, + { + "type": "text", + "text": "Unsubscribe", + "link": "https://example.com", + "color": "#222222", + "fontSize": 14 + }, + { + "type": "text", + "text": "Policies", + "link": "https://example.com", + "color": "#222222", + "fontSize": 14 + } ], - "spacing": { "margin": [0, 0, 0, 0], "padding": [0, 0, 0, 0] } + "spacing": { + "margin": [ + 0, + 0, + 0, + 0 + ], + "padding": [ + 0, + 0, + 0, + 0 + ] + } } ], "rows": [] diff --git a/src/features/email-preview/catalog/blocks/header1.json b/src/features/email-preview/catalog/blocks/header1.json index f0fffb1..7ba50c1 100644 --- a/src/features/email-preview/catalog/blocks/header1.json +++ b/src/features/email-preview/catalog/blocks/header1.json @@ -5,116 +5,117 @@ "type": "header", "preview": "img/components/header-1.png", "block": { - "id": "6DN_P3qn", + "id": "2jcVlRIf", "label": "Header 1", "settings": { "spacing": { "padding": [ - 30, - 24, - 30, - 24 + 38, + 38, + 40, + 38 ] }, - "backgroundColor": "#222222", - "backgroundImage": { - "url": "img/josh-nuttall-pIwu5XNvXpk-unsplash.png", - "position": "center", - "repeat": "no-repeat", - "size": "cover" - } + "backgroundColor": "#FF6B00" }, "rows": [ { - "id": "4Z0_blTK", + "id": "qdxscp9v", "settings": { "spacing": {}, "backgroundColor": "transparent", - "gap": 0, - "collapseOnMobile": false + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 }, "cells": [ { - "id": "vH6ZPCfA", + "id": "cm4dmB7O", "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", - "horizontalAlign": "left", - "width": 35 + "horizontalAlign": "left" }, "atoms": [ { - "id": "1IZTwp4U", - "type": "image", - "src": "img/logo-white.png", - "link": "https://example.com", - "alt": "Some alt", - "width": 110, + "id": "ddaBopcy", + "type": "text", + "value": "

INDEPENDENT NOTES ON USEFUL THINGS

FIELD / NOTES

", + "color": "#1F1712", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "3hcmSkIL", + "type": "divider", + "color": "#5A2B0A", + "height": 1, + "spacing": { "padding": [ 0, 0, 0, 0 + ], + "margin": [ + 14, + 0, + 14, + 0 ] } } ], "rows": [] - }, + } + ] + }, + { + "id": "M4zhuhfA", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 28 + }, + "cells": [ { - "id": "PZ4Vy4nP", + "id": "DgAZnEcT", "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", - "horizontalAlign": "right", - "width": 65 + "horizontalAlign": "left", + "width": 28 }, "atoms": [ { - "id": "Z8hmmq35", - "type": "menu", - "itemType": "text", - "gap": 10, - "items": [ - { - "type": "text", - "text": "Specs", - "link": "https://example", - "color": "#FFFFFF", - "fontSize": 16 - }, - { - "type": "text", - "text": "Feature", - "link": "https://example", - "color": "#FFFFFF", - "fontSize": 16 - }, - { - "type": "text", - "text": "Price", - "link": "https://example", - "color": "#FFFFFF", - "fontSize": 16 - } - ], + "id": "qJfNrUJ3", + "type": "text", + "value": "

Issue 08
SEPTEMBER · 6 MIN READ

", + "color": "#1F1712", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, @@ -124,39 +125,30 @@ } ], "rows": [] - } - ] - }, - { - "id": "TpH2kxgf", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ + }, { - "id": "0j9-jlqg", + "id": "PABMo7UZ", "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "top", - "horizontalAlign": "left" + "horizontalAlign": "left", + "width": 72 }, "atoms": [ { - "id": "Opsftvnv", + "id": "Dr82ex7P", "type": "text", - "value": "

Unleash Freedom

Discover the Unmatched Thrill with Our New Bicycle

", - "color": "#FFFFFF", + "value": "

A clearer way to choose what stays.

Stories about products, habits and the small decisions that shape everyday work.

", + "color": "#1F1712", "spacing": { - "margin": [ - 50, + "padding": [ + 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, diff --git a/src/features/email-preview/catalog/blocks/header10.json b/src/features/email-preview/catalog/blocks/header10.json new file mode 100644 index 0000000..12d26c0 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/header10.json @@ -0,0 +1,192 @@ +{ + "version": 2, + "name": "header10", + "label": "Header 10", + "type": "header", + "preview": "img/components/header-10.png", + "block": { + "id": "hC2Kuvs8", + "label": "Header 10", + "settings": { + "spacing": { + "padding": [ + 36, + 34, + 36, + 34 + ] + }, + "backgroundColor": "#FFF9F3" + }, + "rows": [ + { + "id": "b3EXz1GT", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 14 + }, + "cells": [ + { + "id": "brlO_5bk", + "settings": { + "spacing": { + "padding": [ + 12, + 12, + 12, + 0 + ] + }, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 50 + }, + "atoms": [ + { + "id": "rl3vEwAz", + "type": "text", + "value": "

THE EVERYDAY EDIT

Three objects worth making room for.

A collection-led opening with one promise and a visible range, not three competing cards.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "AdCGM8rW", + "type": "button", + "text": "Explore the collection", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 18, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "SJXCsvdZ", + "settings": { + "spacing": { + "padding": [ + 20, + 10, + 20, + 10 + ] + }, + "backgroundColor": "#FF6B00", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 18, + "width": 25 + }, + "atoms": [ + { + "id": "NjwiNBsP", + "type": "image", + "src": "img/catalog/fashion-travel/bomber-jacket.png", + "link": "https://card.email/start", + "alt": "Orange bomber jacket", + "width": 185, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "x4z0k8h2", + "settings": { + "spacing": { + "padding": [ + 20, + 10, + 20, + 10 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 18, + "width": 25 + }, + "atoms": [ + { + "id": "sCStaqOr", + "type": "image", + "src": "img/catalog/products/skincare-bottle.png", + "link": "https://card.email/start", + "alt": "Orange skincare bottle", + "width": 165, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/header2.json b/src/features/email-preview/catalog/blocks/header2.json index 01d6a12..44f1316 100644 --- a/src/features/email-preview/catalog/blocks/header2.json +++ b/src/features/email-preview/catalog/blocks/header2.json @@ -5,122 +5,84 @@ "type": "header", "preview": "img/components/header-2.png", "block": { - "id": "i7EZWaz_", + "id": "uUuCemff", "label": "Header 2", "settings": { "spacing": { "padding": [ - 30, - 24, - 30, - 24 + 38, + 34, + 38, + 34 ] }, - "backgroundColor": "#FFFFFF" + "backgroundColor": "#FFF9F3" }, "rows": [ { - "id": "zwKU4xXR", + "id": "6EaleFeR", "settings": { - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 0, - 0, - 20, - 0 - ] - }, + "spacing": {}, "backgroundColor": "transparent", - "gap": 0, - "collapseOnMobile": false + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 24 }, "cells": [ { - "id": "9TZJB3I4", + "id": "xhMJGIrB", "settings": { "spacing": {}, "backgroundColor": "transparent", "verticalAlign": "middle", - "horizontalAlign": "left" + "horizontalAlign": "left", + "width": 56 }, "atoms": [ { - "id": "K93zo_lL", - "type": "image", - "src": "img/logo-black.png", - "link": "https://example.com", - "alt": "Some alt", - "width": 110, + "id": "3Hij89zy", + "type": "text", + "value": "

ROOM-FILLING SOUND

Small speaker. Serious presence.

A classic media-right hero for a focused product launch.

", + "color": "#1F1712", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, 0 ] } - } - ], - "rows": [] - }, - { - "id": "ZM9AnqHF", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "middle", - "horizontalAlign": "right" - }, - "atoms": [ + }, { - "id": "rXgLiCox", - "type": "menu", - "itemType": "text", - "gap": 10, - "items": [ - { - "type": "text", - "text": "Specs", - "link": "https://example", - "color": "#222222", - "fontSize": 16 - }, - { - "type": "text", - "text": "Feature", - "link": "https://example", - "color": "#222222", - "fontSize": 16 - }, - { - "type": "text", - "text": "Price", - "link": "https://example", - "color": "#222222", - "fontSize": 16 - } + "id": "en1yAtxk", + "type": "button", + "text": "Meet the speaker", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 ], "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], "padding": [ - 0, + 13, + 20, + 13, + 20 + ], + "margin": [ + 18, 0, 0, 0 @@ -129,63 +91,44 @@ } ], "rows": [] - } - ] - }, - { - "id": "qDMeZHpB", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ + }, { - "id": "OnhbA2Qc", + "id": "LvQoP4jg", "settings": { "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], "padding": [ - 140, - 0, - 20, - 0 + 24, + 16, + 24, + 16 ] }, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left", - "borderRadius": 5, - "backgroundImage": { - "url": "img/ruslan-bardash-4kTbAMRAHtQ-unsplash.png", - "position": "top", - "repeat": "no-repeat", - "size": "cover" - } + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 20, + "width": 44 }, "atoms": [ { - "id": "J0q5U-8L", - "type": "text", - "value": "

New Stool

Simplicity. Practicality. Naturality

", - "color": "#FFFFFF", + "id": "E1acDCTp", + "type": "image", + "src": "img/catalog/products/wireless-speaker.png", + "link": "https://card.email/start", + "alt": "Orange wireless speaker", + "width": 240, "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, - 20, 0, - 20 + 0, + 0 ] } } diff --git a/src/features/email-preview/catalog/blocks/header3.json b/src/features/email-preview/catalog/blocks/header3.json index c8fbead..5125d9e 100644 --- a/src/features/email-preview/catalog/blocks/header3.json +++ b/src/features/email-preview/catalog/blocks/header3.json @@ -5,52 +5,63 @@ "type": "header", "preview": "img/components/header-3.png", "block": { - "id": "V6kmYqpc", + "id": "6Fm_DfDc", "label": "Header 3", "settings": { "spacing": { "padding": [ - 30, - 24, - 30, - 24 + 34, + 32, + 34, + 32 ] }, "backgroundColor": "#FFFFFF" }, "rows": [ { - "id": "3rjKzpvh", + "id": "5GdT_0hx", "settings": { "spacing": {}, "backgroundColor": "transparent", - "gap": 0 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 24 }, "cells": [ { - "id": "PoxORDe5", + "id": "j2LEl9U9", "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" + "spacing": { + "padding": [ + 24, + 14, + 0, + 14 + ] + }, + "backgroundColor": "#FF6B00", + "verticalAlign": "bottom", + "horizontalAlign": "center", + "borderRadius": 20, + "width": 42 }, "atoms": [ { - "id": "VVNACvL4", + "id": "f7G-pNNq", "type": "image", - "src": "img/logo-black.png", - "link": "https://example.com", - "alt": "Some alt", - "width": 110, + "src": "img/catalog/fashion-travel/trench-coat.png", + "link": "https://card.email/start", + "alt": "Orange trench coat", + "width": 235, "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, @@ -60,106 +71,71 @@ } ], "rows": [] - } - ] - }, - { - "id": "drhDfOKc", - "settings": { - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 30, - 0, - 0, - 0 - ] }, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ { - "id": "Z01Ha05A", + "id": "i-RCdLNg", "settings": { "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], "padding": [ - 45, - 0, - 16, - 0 + 18, + 4, + 18, + 8 ] }, "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center", - "borderRadius": 5, - "backgroundImage": { - "url": "img/bosco-shots-ZoEdO0G0xmI-unsplash.png", - "position": "top", - "repeat": "no-repeat", - "size": "cover" - } + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 58 }, "atoms": [ { - "id": "b5mEhn7E", + "id": "GcUqSejt", "type": "text", - "value": "

Don't Lose
Yourself.

New album

", - "color": "#FFFFFF", + "value": "

THE LIGHT LAYER

Built for the weather between plans.

A media-left opening with room for a concise product promise.

", + "color": "#1F1712", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, - 20, 0, - 20 + 0, + 0 ] } }, { - "id": "lzGKovcX", + "id": "NYZi5Zhe", "type": "button", - "text": "Download", - "link": "https://example.com", - "backgroundColor": "#3494FB", + "text": "Explore the layer", + "link": "https://card.email/start", + "backgroundColor": "#1F1712", "color": "#FFFFFF", - "fontSize": 14, - "borderRadius": 5, + "fontSize": 15, + "borderRadius": 10, "padding": [ - 12, - 24, - 12, - 24 + 13, + 20, + 13, + 20 ], "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], "margin": [ - 40, + 18, + 0, 0, - 40, 0 - ], - "padding": [ - 12, - 24, - 12, - 24 ] } } diff --git a/src/features/email-preview/catalog/blocks/header4.json b/src/features/email-preview/catalog/blocks/header4.json index 61844e3..275d0c3 100644 --- a/src/features/email-preview/catalog/blocks/header4.json +++ b/src/features/email-preview/catalog/blocks/header4.json @@ -5,206 +5,108 @@ "type": "header", "preview": "img/components/header-4.png", "block": { - "id": "seGFZ6_t", + "id": "LK8mHtBy", "label": "Header 4", "settings": { "spacing": { "padding": [ - 30, - 24, - 30, - 24 + 38, + 38, + 40, + 38 ] }, "backgroundColor": "#FFFFFF" }, "rows": [ { - "id": "zyCfGxRB", + "id": "oyEZdYns", "settings": { "spacing": {}, "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, "gap": 0 }, "cells": [ { - "id": "wnDpSVGS", + "id": "q-Q9qTJb", "settings": { "spacing": {}, "backgroundColor": "transparent", - "verticalAlign": "top", + "verticalAlign": "middle", "horizontalAlign": "center" }, "atoms": [ { - "id": "IDYXbflg", - "type": "image", - "src": "img/logo-black.png", - "link": "https://example.com", - "alt": "Some alt", - "width": 110, + "id": "3KBRQAq_", + "type": "text", + "value": "

THE WEEKEND PAIR

Move light. Land softly.

A centered product-first hero with one clear destination.

", + "color": "#1F1712", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, 0 ] } - } - ], - "rows": [] - } - ] - }, - { - "id": "_UhhkuIn", - "settings": { - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 20, - 0, - 0, - 0 - ] - }, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ - { - "id": "aVTlKflM", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "link": "https://example.com", - "verticalAlign": "top", - "horizontalAlign": "left", - "borderRadius": 5, - "backgroundImage": { - "url": "img/johannes-andersson-v5gGwubKzEA-unsplash.jpg", - "position": "center", - "repeat": "no-repeat", - "size": "cover" }, - "height": 296 - }, - "atoms": [], - "rows": [] - } - ] - }, - { - "id": "h9ScPS5t", - "settings": { - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 10, - 0, - 0, - 0 - ] - }, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ - { - "id": "gmjRlHwU", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" - }, - "atoms": [ { - "id": "P0Zoiz9o", - "type": "text", - "value": "

Surfing Season '19

There's Change
In The Air.
Can You Feel It?

", - "color": "#222222", + "id": "s47El-fP", + "type": "image", + "src": "img/catalog/products/sneaker.png", + "link": "https://card.email/start", + "alt": "Orange and cream lifestyle sneaker", + "width": 310, "spacing": { - "margin": [ - 0, + "padding": [ + 16, 0, 0, 0 ], - "padding": [ + "margin": [ 0, 0, 0, 0 ] } - } - ], - "rows": [] - } - ] - }, - { - "id": "0gJc4pGE", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ - { - "id": "rTklwPB5", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" - }, - "atoms": [ + }, { - "id": "UeIbZ12e", + "id": "tq4kP3MU", "type": "button", - "text": "Take Part", - "link": "https://example.com", - "backgroundColor": "#4A98ED", + "text": "Shop the pair", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", "color": "#FFFFFF", - "fontSize": 14, - "borderRadius": 5, + "fontSize": 15, + "borderRadius": 10, "padding": [ - 12, - 24, - 12, - 24 + 13, + 20, + 13, + 20 ], "spacing": { - "margin": [ + "padding": [ + 13, 20, + 13, + 20 + ], + "margin": [ + 18, 0, 0, 0 - ], - "padding": [ - 12, - 24, - 12, - 24 ] } } diff --git a/src/features/email-preview/catalog/blocks/header5.json b/src/features/email-preview/catalog/blocks/header5.json index a0758fa..cc17bba 100644 --- a/src/features/email-preview/catalog/blocks/header5.json +++ b/src/features/email-preview/catalog/blocks/header5.json @@ -5,276 +5,116 @@ "type": "header", "preview": "img/components/header-5.png", "block": { - "id": "T5Ql3ahD", + "id": "BVRu8cGf", "label": "Header 5", "settings": { "spacing": { "padding": [ 30, - 24, 30, - 24 + 30, + 30 ] }, - "backgroundColor": "#FFFFFF" + "backgroundColor": "#C94F00", + "backgroundImage": { + "url": "img/catalog/backgrounds/gradient-ribbons.png", + "repeat": "no-repeat", + "size": "cover", + "position": "center" + } }, "rows": [ { - "id": "irs6yIz2", + "id": "mEaZHGrn", "settings": { "spacing": {}, "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ - { - "id": "YirUX4he", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" - }, - "atoms": [ - { - "id": "tQqy-gXB", - "type": "image", - "src": "img/logo-black.png", - "link": "https://example.com", - "alt": "Some alt", - "width": 110, - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 0, - 0, - 0, - 0 - ] - } - } - ], - "rows": [] - } - ] - }, - { - "id": "QkzRyi9-", - "settings": { - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 30, - 0, - 0, - 0 - ] - }, - "backgroundColor": "transparent", - "gap": 0 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0, + "height": 360 }, "cells": [ { - "id": "sJmhsqgg", + "id": "_sgwdxe_", "settings": { "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" + "backgroundColor": "#1F1712", + "hiddenOnMobile": false, + "verticalAlign": "middle", + "horizontalAlign": "left", + "borderRadius": 20, + "width": 100 }, "atoms": [ { - "id": "EfzE8mkW", + "id": "BbeNVD6u", "type": "text", - "value": "

New series

The loop by loop.

", - "color": "#000000", + "value": "

01 / OPENING FRAME

A NEW WAY THROUGH

Make the first impression feel inevitable.

A focused opening with one clear promise and a direct next step.

", + "color": "#FFFFFF", "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], "padding": [ + 30, + 34, 0, - 0, - 0, - 0 - ] - } - } - ], - "rows": [] - } - ] - }, - { - "id": "jvHj4RVL", - "settings": { - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 20, - 0, - 0, - 0 - ] - }, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ - { - "id": "iVO9qCtj", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center", - "borderRadius": 0 - }, - "atoms": [ - { - "id": "4GLDF3rG", - "type": "image", - "src": "img/apple-watch-2.png", - "link": "https://example.com", - "alt": "Some alt", - "width": 450, - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 + 34 ], - "padding": [ + "margin": [ 0, 0, 0, 0 ] } - } - ], - "rows": [] - } - ] - }, - { - "id": "Z8_HVWFC", - "settings": { - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 20, - 0, - 0, - 0 - ] - }, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ - { - "id": "a27jNZU9", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" - }, - "atoms": [ + }, { - "id": "X_MPrbKC", - "type": "text", - "value": "

With our latest model of watch,
you'll get the most amazing features
for your everyday workout.

", - "color": "#A9ADB3", + "id": "L5n0teA1", + "type": "divider", + "color": "#FF6B00", + "height": 2, "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ - 0, - 0, + "margin": [ + 20, + 34, 0, - 0 + 34 ] } - } - ], - "rows": [] - } - ] - }, - { - "id": "htmAmBD-", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ - { - "id": "9cnka4Ns", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" - }, - "atoms": [ + }, { - "id": "6_5udpLz", + "id": "Vwg9ETr9", "type": "button", - "text": "Take Yours", - "link": "https://example.com", - "backgroundColor": "#4A98ED", - "color": "#FFFFFF", - "fontSize": 14, - "borderRadius": 5, + "text": "Enter the story", + "link": "https://card.email/start", + "backgroundColor": "#FFFFFF", + "color": "#1F1712", + "fontSize": 15, + "borderRadius": 10, "padding": [ - 12, - 24, - 12, - 24 + 13, + 20, + 13, + 20 ], "spacing": { - "margin": [ - 20, - 0, + "padding": [ + 13, 20, - 0 + 13, + 20 ], - "padding": [ - 12, - 24, - 12, - 24 + "margin": [ + 22, + 34, + 30, + 34 ] } } diff --git a/src/features/email-preview/catalog/blocks/header6.json b/src/features/email-preview/catalog/blocks/header6.json index 47fffec..d518087 100644 --- a/src/features/email-preview/catalog/blocks/header6.json +++ b/src/features/email-preview/catalog/blocks/header6.json @@ -5,297 +5,97 @@ "type": "header", "preview": "img/components/header-6.png", "block": { - "id": "6unI9hVd", + "id": "-M_20RSW", "label": "Header 6", "settings": { "spacing": { "padding": [ + 28, 30, - 24, - 40, - 24 + 0, + 30 ] }, - "backgroundColor": "#FFFFFF" + "backgroundColor": "#FF6B00", + "backgroundImage": { + "url": "img/catalog/backgrounds/gradient-orbs.png", + "repeat": "no-repeat", + "size": "unset", + "position": "bottom" + } }, "rows": [ { - "id": "-MtdTXoZ", + "id": "PolQCZef", "settings": { "spacing": {}, "backgroundColor": "transparent", - "gap": 0 + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 }, "cells": [ { - "id": "81r5PHTp", + "id": "pRxJ4Few", "settings": { - "spacing": {}, + "spacing": { + "padding": [ + 0, + 8, + 26, + 0 + ] + }, "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center" + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 58 }, "atoms": [ { - "id": "Jw0ckwPT", - "type": "image", - "src": "img/logo-black.png", - "link": "https://example.com", - "alt": "MySigMail", - "width": 128, + "id": "CzYxqrlH", + "type": "text", + "value": "

LIVE DEMO / THURSDAY

Hear the difference before we name it.

The presenter demonstrates the product and points attention toward the launch message.

", + "color": "#1F1712", "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], "padding": [ 0, 0, 0, 0 - ] - } - } - ], - "rows": [] - } - ] - }, - { - "id": "ePYBmZDG", - "settings": { - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 36, - 0, - 0, - 0 - ] - }, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ - { - "id": "cIMJWUjn", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "center", - "borderRadius": 0 - }, - "atoms": [ - { - "id": "GfRd4BmC", - "type": "image", - "src": "img/app-icon.png", - "link": "https://example.com", - "alt": "Image", - "width": 100, - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 ], - "padding": [ - 0, - 0, - 0, - 0 - ] - }, - "height": 100 - } - ], - "rows": [] - } - ] - }, - { - "id": "vvZmSpC0", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ - { - "id": "hHAIHouO", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" - }, - "atoms": [ - { - "id": "-vpAJ0nR", - "type": "text", - "value": "

Brand new

The Circle.

", - "color": "#000000", - "spacing": { "margin": [ 0, 0, 0, 0 - ], - "padding": [ - 0, - 0, - 0, - 0 ] } - } - ], - "rows": [] - } - ] - }, - { - "id": "b-kxUHul", - "settings": { - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 24, - 0, - 0, - 0 - ] - }, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ - { - "id": "qyec1Df_", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "link": "https://example.com", - "verticalAlign": "top", - "horizontalAlign": "left", - "borderRadius": 0, - "backgroundImage": { - "url": "img/iphone-angle.jpg", - "position": "center", - "repeat": "no-repeat", - "size": "contain" }, - "height": 185 - }, - "atoms": [], - "rows": [] - } - ] - }, - { - "id": "S8nNzZA7", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "gap": 0 - }, - "cells": [ - { - "id": "e-fBbBkS", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" - }, - "atoms": [ { - "id": "GxTuyh58", - "type": "text", - "value": "

GPS tracker for running and fitness.
Unique features used by professional athletes
are now also available for beginners!

", - "color": "#9FA3A7", + "id": "FuuSpqrJ", + "type": "button", + "text": "Reserve a place", + "link": "https://card.email/start", + "backgroundColor": "#1F1712", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], "padding": [ - 0, - 0, - 0, - 0 - ] - } - } - ], - "rows": [] - } - ] - }, - { - "id": "yCwFG4cw", - "settings": { - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 - ], - "padding": [ - 22, - 0, - 22, - 0 - ] - }, - "backgroundColor": "transparent", - "gap": 12, - "collapseOnMobile": false - }, - "cells": [ - { - "id": "FpGl-_pu", - "settings": { - "spacing": {}, - "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "right" - }, - "atoms": [ - { - "id": "iQZvYueN", - "type": "image", - "src": "img/app-store.png", - "link": "https://example.com", - "alt": "Download on the App Store", - "width": 150, - "spacing": { - "margin": [ - 0, - 0, - 0, - 0 + 13, + 20, + 13, + 20 ], - "padding": [ - 0, + "margin": [ + 18, 0, 0, 0 @@ -306,32 +106,32 @@ "rows": [] }, { - "id": "E0XTdmZa", + "id": "d5mk868D", "settings": { "spacing": {}, "backgroundColor": "transparent", - "verticalAlign": "top", - "horizontalAlign": "left" + "verticalAlign": "bottom", + "horizontalAlign": "center", + "width": 42 }, "atoms": [ { - "id": "rez-j_UV", + "id": "LA_0qSkx", "type": "image", - "src": "img/google-play.png", - "link": "https://example.com", - "alt": "Get it on Google Play", - "width": 150, + "src": "img/catalog/presenters/speaker-presenter.png", + "link": "https://card.email/start", + "alt": "Presenter demonstrating an orange wireless speaker", "spacing": { - "margin": [ + "padding": [ 0, 0, 0, 0 ], - "padding": [ - 0, + "margin": [ 0, 0, + -3, 0 ] } diff --git a/src/features/email-preview/catalog/blocks/header7.json b/src/features/email-preview/catalog/blocks/header7.json new file mode 100644 index 0000000..2c28e14 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/header7.json @@ -0,0 +1,210 @@ +{ + "version": 2, + "name": "header7", + "label": "Header 7", + "type": "header", + "preview": "img/components/header-7.png", + "block": { + "id": "FiXHQBpf", + "label": "Header 7", + "settings": { + "spacing": { + "padding": [ + 38, + 38, + 34, + 38 + ] + }, + "backgroundColor": "#FFF9F3" + }, + "rows": [ + { + "id": "UAiYnURD", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "t3I8aEVE", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left" + }, + "atoms": [ + { + "id": "yjTzXq8X", + "type": "text", + "value": "

FIELD NOTES / ISSUE 08

What we choose to carry.

An editorial issue header with a visible author and a wide visual chapter marker.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "knh5Q25U", + "settings": { + "spacing": { + "padding": [ + 18, + 0, + 18, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "DhXGtuPT", + "settings": { + "spacing": { + "padding": [ + 20, + 20, + 20, + 20 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 20 + }, + "atoms": [ + { + "id": "S3OiIN42", + "type": "image", + "src": "img/catalog/fashion-travel/weekend-duffel.png", + "link": "https://card.email/start", + "alt": "Orange weekend duffel bag", + "width": 260, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "Mzhhut9d", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 12 + }, + "cells": [ + { + "id": "qvJnpVs6", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "center", + "width": 18 + }, + "atoms": [ + { + "id": "Gh7Ggzky", + "type": "image", + "src": "img/catalog/avatars/travel-mug-presenter-avatar.png", + "link": "https://card.email/authors", + "alt": "Portrait of issue editor Maya Chen", + "width": 66, + "borderRadius": 999, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "hvLtvww0", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 82 + }, + "atoms": [ + { + "id": "x5D2zIH7", + "type": "text", + "value": "

Maya Chen
Editor · objects, travel and everyday systems

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/header8.json b/src/features/email-preview/catalog/blocks/header8.json new file mode 100644 index 0000000..cf26b94 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/header8.json @@ -0,0 +1,152 @@ +{ + "version": 2, + "name": "header8", + "label": "Header 8", + "type": "header", + "preview": "img/components/header-8.png", + "block": { + "id": "YLF_2Jtg", + "label": "Header 8", + "settings": { + "spacing": { + "padding": [ + 32, + 30, + 32, + 30 + ] + }, + "backgroundColor": "#FF6B00", + "backgroundImage": { + "url": "img/catalog/backgrounds/gradient-waves.png", + "repeat": "no-repeat", + "size": "cover", + "position": "center" + } + }, + "rows": [ + { + "id": "6V328O37", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 + }, + "cells": [ + { + "id": "PG-_tCx7", + "settings": { + "spacing": {}, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 18, + "width": 24 + }, + "atoms": [ + { + "id": "5o7auu5x", + "type": "text", + "value": "

24

SEPTEMBER

", + "color": "#1F1712", + "spacing": { + "padding": [ + 18, + 10, + 18, + 10 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "qPdmksuh", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 52 + }, + "atoms": [ + { + "id": "DLK75x6A", + "type": "text", + "value": "

ONLINE WORKSHOP · 10:00

Design the first screen together.

Date, topic and registration action stay visible at a glance.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "nhSeUSgm", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "right", + "width": 24 + }, + "atoms": [ + { + "id": "Um9lTZi3", + "type": "button", + "text": "Register", + "link": "https://card.email/start", + "backgroundColor": "#1F1712", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/header9.json b/src/features/email-preview/catalog/blocks/header9.json new file mode 100644 index 0000000..b58f4fb --- /dev/null +++ b/src/features/email-preview/catalog/blocks/header9.json @@ -0,0 +1,172 @@ +{ + "version": 2, + "name": "header9", + "label": "Header 9", + "type": "header", + "preview": "img/components/header-9.png", + "block": { + "id": "jeN-RW3c", + "label": "Header 9", + "settings": { + "spacing": { + "padding": [ + 38, + 34, + 38, + 34 + ] + }, + "backgroundColor": "#FFFFFF" + }, + "rows": [ + { + "id": "jyz0sG5d", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 24 + }, + "cells": [ + { + "id": "4226IQZK", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 58 + }, + "atoms": [ + { + "id": "k131YWQ-", + "type": "text", + "value": "

PLAY ANYWHERE

A whole library in both hands.

A device introduction with direct platform actions and no decorative app chrome.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "-kG4axiQ", + "type": "button", + "text": "Download for macOS", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 18, + 0, + 0, + 0 + ] + } + }, + { + "id": "ox-hI32C", + "type": "button", + "text": "Get it for Windows", + "link": "https://card.email/start", + "backgroundColor": "#FFD9B8", + "color": "#1F1712", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 10, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "Crwaih_5", + "settings": { + "spacing": { + "padding": [ + 24, + 14, + 24, + 14 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 20, + "width": 42 + }, + "atoms": [ + { + "id": "qX3wGNkN", + "type": "image", + "src": "img/catalog/devices/handheld-console.png", + "link": "https://card.email/start", + "alt": "Orange handheld gaming console", + "width": 245, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/menu1-dark.json b/src/features/email-preview/catalog/blocks/menu1-dark.json index 448c874..1222615 100644 --- a/src/features/email-preview/catalog/blocks/menu1-dark.json +++ b/src/features/email-preview/catalog/blocks/menu1-dark.json @@ -3,7 +3,7 @@ "name": "menu1-dark", "label": "Menu 1", "type": "menu", - "preview": "img/components/menu-1-dark.jpg", + "preview": "img/components/menu-1-dark.png", "block": { "id": "rt373vVg", "label": "Menu 1", @@ -40,7 +40,7 @@ { "id": "y-04l5NF", "type": "image", - "src": "img/logo-white.png", + "src": "img/system/logos/logo-white.png", "link": "https://example.com", "alt": "Some alt", "width": 110, diff --git a/src/features/email-preview/catalog/blocks/menu1-light.json b/src/features/email-preview/catalog/blocks/menu1-light.json index 49566bf..02557ea 100644 --- a/src/features/email-preview/catalog/blocks/menu1-light.json +++ b/src/features/email-preview/catalog/blocks/menu1-light.json @@ -3,7 +3,7 @@ "name": "menu1-light", "label": "Menu 5", "type": "menu", - "preview": "img/components/menu-1-light.jpg", + "preview": "img/components/menu-1-light.png", "block": { "id": "AfZMqZ1Q", "label": "Menu 5", @@ -40,7 +40,7 @@ { "id": "lpea8BRF", "type": "image", - "src": "img/logo-black.png", + "src": "img/system/logos/logo-black.png", "link": "https://example.com", "alt": "Some alt", "width": 110, diff --git a/src/features/email-preview/catalog/blocks/menu2-dark.json b/src/features/email-preview/catalog/blocks/menu2-dark.json index 749d6e4..c3782e6 100644 --- a/src/features/email-preview/catalog/blocks/menu2-dark.json +++ b/src/features/email-preview/catalog/blocks/menu2-dark.json @@ -3,7 +3,7 @@ "name": "menu2-dark", "label": "Menu 2", "type": "menu", - "preview": "img/components/menu-2-dark.jpg", + "preview": "img/components/menu-2-dark.png", "block": { "id": "SDoNSytC", "label": "Menu 2", @@ -40,7 +40,7 @@ { "id": "_PjP-5Dz", "type": "image", - "src": "img/logo-white.png", + "src": "img/system/logos/logo-white.png", "link": "https://example.com", "alt": "Some alt", "width": 110, diff --git a/src/features/email-preview/catalog/blocks/menu2-light.json b/src/features/email-preview/catalog/blocks/menu2-light.json index ac2f838..5cf0244 100644 --- a/src/features/email-preview/catalog/blocks/menu2-light.json +++ b/src/features/email-preview/catalog/blocks/menu2-light.json @@ -3,7 +3,7 @@ "name": "menu2-light", "label": "Menu 6", "type": "menu", - "preview": "img/components/menu-2-light.jpg", + "preview": "img/components/menu-2-light.png", "block": { "id": "1XXB6dUF", "label": "Menu 6", @@ -40,7 +40,7 @@ { "id": "tdZNb30u", "type": "image", - "src": "img/logo-black.png", + "src": "img/system/logos/logo-black.png", "link": "https://example.com", "alt": "Some alt", "width": 110, diff --git a/src/features/email-preview/catalog/blocks/menu3-dark.json b/src/features/email-preview/catalog/blocks/menu3-dark.json index 3cf1fe5..d9e1dc2 100644 --- a/src/features/email-preview/catalog/blocks/menu3-dark.json +++ b/src/features/email-preview/catalog/blocks/menu3-dark.json @@ -40,7 +40,7 @@ { "id": "idSRsagR", "type": "image", - "src": "img/logo-white.png", + "src": "img/system/logos/logo-white.png", "link": "https://example.com", "alt": "Some alt", "width": 110, @@ -81,7 +81,7 @@ "type": "image", "name": "Facebook", "link": "https://example", - "url": "img/facebook-white.png", + "url": "img/system/social/menu/facebook-white.png", "width": 16, "height": 16, "alt": "Some alt" @@ -90,7 +90,7 @@ "type": "image", "name": "Twitter", "link": "https://example", - "url": "img/twitter-x-white.png", + "url": "img/system/social/menu/twitter-x-white.png", "width": 16, "height": 16, "alt": "Some alt" @@ -99,7 +99,7 @@ "type": "image", "name": "Instagram", "link": "https://example", - "url": "img/instagram-white.png", + "url": "img/system/social/menu/instagram-white.png", "width": 16, "height": 16, "alt": "Some alt" diff --git a/src/features/email-preview/catalog/blocks/menu3-light.json b/src/features/email-preview/catalog/blocks/menu3-light.json index b2fcc38..0b0b03c 100644 --- a/src/features/email-preview/catalog/blocks/menu3-light.json +++ b/src/features/email-preview/catalog/blocks/menu3-light.json @@ -40,7 +40,7 @@ { "id": "eisxsScc", "type": "image", - "src": "img/logo-black.png", + "src": "img/system/logos/logo-black.png", "link": "https://example.com", "alt": "Some alt", "width": 110, @@ -81,7 +81,7 @@ "type": "image", "name": "Facebook", "link": "https://example", - "url": "img/facebook-black.png", + "url": "img/system/social/menu/facebook-black.png", "width": 16, "height": 16, "alt": "Some alt" @@ -90,7 +90,7 @@ "type": "image", "name": "Twitter", "link": "https://example", - "url": "img/twitter-x-black.png", + "url": "img/system/social/menu/twitter-x-black.png", "width": 16, "height": 16, "alt": "Some alt" @@ -99,7 +99,7 @@ "type": "image", "name": "Instagram", "link": "https://example", - "url": "img/instagram-black.png", + "url": "img/system/social/menu/instagram-black.png", "width": 16, "height": 16, "alt": "Some alt" diff --git a/src/features/email-preview/catalog/blocks/menu4-dark.json b/src/features/email-preview/catalog/blocks/menu4-dark.json index 0f027ce..1ffd122 100644 --- a/src/features/email-preview/catalog/blocks/menu4-dark.json +++ b/src/features/email-preview/catalog/blocks/menu4-dark.json @@ -40,7 +40,7 @@ { "id": "px5Xydnv", "type": "image", - "src": "img/logo-white.png", + "src": "img/system/logos/logo-white.png", "link": "https://example.com", "alt": "Some alt", "width": 110, diff --git a/src/features/email-preview/catalog/blocks/menu4-light.json b/src/features/email-preview/catalog/blocks/menu4-light.json index c7beab4..bfcd1f9 100644 --- a/src/features/email-preview/catalog/blocks/menu4-light.json +++ b/src/features/email-preview/catalog/blocks/menu4-light.json @@ -40,7 +40,7 @@ { "id": "z3fG6yQX", "type": "image", - "src": "img/logo-black.png", + "src": "img/system/logos/logo-black.png", "link": "https://example.com", "alt": "Some alt", "width": 110, diff --git a/src/features/email-preview/catalog/blocks/transactional1.json b/src/features/email-preview/catalog/blocks/transactional1.json new file mode 100644 index 0000000..7266614 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/transactional1.json @@ -0,0 +1,249 @@ +{ + "version": 2, + "name": "transactional1", + "label": "Transactional 1", + "type": "transactional", + "preview": "img/components/transactional-1.png", + "block": { + "id": "mQbitGSG", + "label": "Transactional 1", + "settings": { + "spacing": { + "padding": [ + 36, + 34, + 36, + 34 + ] + }, + "backgroundColor": "#FFFFFF" + }, + "rows": [ + { + "id": "JeShgrpN", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 18 + }, + "cells": [ + { + "id": "IEhVTLWc", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 64 + }, + "atoms": [ + { + "id": "LvYO-BY-", + "type": "text", + "value": "

ORDER #CARD-2048

Thanks, Maya. Your order is confirmed.

We’ve received your payment and will send tracking as soon as the package leaves our studio.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "YKqVypMC", + "settings": { + "spacing": { + "padding": [ + 20, + 14, + 20, + 14 + ] + }, + "backgroundColor": "#FF6B00", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 36 + }, + "atoms": [ + { + "id": "lhq1W0Ia", + "type": "text", + "value": "

CONFIRMED

$159.00

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "471A10R1", + "settings": { + "spacing": { + "padding": [ + 22, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 + }, + "cells": [ + { + "id": "IVDkvMGq", + "settings": { + "spacing": { + "padding": [ + 14, + 10, + 14, + 10 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 30, + "height": 128 + }, + "atoms": [ + { + "id": "BuygKcLR", + "type": "image", + "src": "img/catalog/products/headphones.png", + "link": "https://card.email/features", + "alt": "Orange over-ear headphones", + "width": 130, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "gow4Noxy", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 42 + }, + "atoms": [ + { + "id": "IP8FFa3_", + "type": "text", + "value": "

Focus Headphones

Sand / Orange · Qty 1

$159.00

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "lV-Uc3Zv", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "right", + "width": 28 + }, + "atoms": [ + { + "id": "aYQ3lRrc", + "type": "button", + "text": "View order", + "link": "https://card.email/start", + "backgroundColor": "#1F1712", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/transactional2.json b/src/features/email-preview/catalog/blocks/transactional2.json new file mode 100644 index 0000000..aaa322f --- /dev/null +++ b/src/features/email-preview/catalog/blocks/transactional2.json @@ -0,0 +1,561 @@ +{ + "version": 2, + "name": "transactional2", + "label": "Transactional 2", + "type": "transactional", + "preview": "img/components/transactional-2.png", + "block": { + "id": "UQs6XGi0", + "label": "Transactional 2", + "settings": { + "spacing": { + "padding": [ + 36, + 36, + 36, + 36 + ] + }, + "backgroundColor": "#ffffff" + }, + "rows": [ + { + "id": "_vD8CrBd", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 18 + }, + "cells": [ + { + "id": "fsDivMDb", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 58 + }, + "atoms": [ + { + "id": "Cs9YGMsV", + "type": "text", + "value": "

RECEIPT / 04 AUG 2026

Payment received.

Receipt #RC-7391 · Visa ending in 2048

", + "color": "#000000", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "LsdqSTjf", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "right", + "width": 42 + }, + "atoms": [ + { + "id": "T5e456GX", + "type": "text", + "value": "

TOTAL PAID
$248.00

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "BXflTfyM", + "settings": { + "spacing": { + "padding": [ + 22, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 20 + }, + "cells": [ + { + "id": "MWsEpTYV", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 66 + }, + "atoms": [], + "rows": [ + { + "id": "1J0Ycj0v", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": false, + "gap": 0 + }, + "cells": [ + { + "id": "ulwrNbiq", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 48 + }, + "atoms": [ + { + "id": "wOHYaMMb", + "type": "text", + "value": "

Weekend kit

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "lzipYUIN", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "right", + "width": 52 + }, + "atoms": [ + { + "id": "Jucyvz7J", + "type": "text", + "value": "

$228.00

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "-I6KAQD-", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": false, + "gap": 0 + }, + "cells": [ + { + "id": "sLHbxCjg", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 48 + }, + "atoms": [ + { + "id": "9O8uFIJk", + "type": "text", + "value": "

Shipping

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "iZ0indnG", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "right", + "width": 52 + }, + "atoms": [ + { + "id": "hHHcv-iZ", + "type": "text", + "value": "

$12.00

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "XnO4A6Ir", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": false, + "gap": 0 + }, + "cells": [ + { + "id": "uZ0GUzGY", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 48 + }, + "atoms": [ + { + "id": "0FrdbBqH", + "type": "text", + "value": "

Tax

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "eZx4fGSY", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "right", + "width": 52 + }, + "atoms": [ + { + "id": "tPdHw2ow", + "type": "text", + "value": "

$8.00

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "qGdMxx_L", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "9caBef2A", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left" + }, + "atoms": [ + { + "id": "ksNY5FHr", + "type": "divider", + "color": "#d6d6d6", + "height": 1, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 6, + 0, + 6, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "kIymtvh0", + "settings": { + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": false, + "gap": 0 + }, + "cells": [ + { + "id": "Ze0g4NGI", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 48 + }, + "atoms": [ + { + "id": "dLc-148S", + "type": "text", + "value": "

Total

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "4olHNMlU", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "right", + "width": 52 + }, + "atoms": [ + { + "id": "WiJOCsLz", + "type": "text", + "value": "

$248.00

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + }, + { + "id": "8Gjh80VV", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "bottom", + "horizontalAlign": "right", + "width": 34 + }, + "atoms": [ + { + "id": "Rw8PR51E", + "type": "button", + "text": "Download receipt", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/transactional3.json b/src/features/email-preview/catalog/blocks/transactional3.json new file mode 100644 index 0000000..4e85ef6 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/transactional3.json @@ -0,0 +1,318 @@ +{ + "version": 2, + "name": "transactional3", + "label": "Transactional 3", + "type": "transactional", + "preview": "img/components/transactional-3.png", + "block": { + "id": "MHiaUJi4", + "label": "Transactional 3", + "settings": { + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#ffffff" + }, + "rows": [ + { + "id": "LY_6kB2S", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 18 + }, + "cells": [ + { + "id": "5A343CoG", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 68 + }, + "atoms": [ + { + "id": "68pFlYxU", + "type": "text", + "value": "

TRACKING #OR-592-184

Your package is on the move.

Estimated delivery: Thursday, 6 August

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "EiOcOWBy", + "settings": { + "spacing": { + "padding": [ + 14, + 8, + 14, + 8 + ] + }, + "backgroundColor": "#ffffff", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 32 + }, + "atoms": [ + { + "id": "GZrVRcqa", + "type": "image", + "src": "img/catalog/fashion-travel/carry-on-suitcase.png", + "link": "https://card.email/features", + "alt": "Orange carry-on suitcase", + "width": 120, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "diEGcZRp", + "settings": { + "spacing": { + "padding": [ + 20, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": false, + "gap": 12 + }, + "cells": [ + { + "id": "HoIz8FFe", + "settings": { + "spacing": { + "padding": [ + 14, + 10, + 14, + 10 + ] + }, + "backgroundColor": "#ffffff", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 33, + "height": 112 + }, + "atoms": [ + { + "id": "U4PSDoft", + "type": "text", + "value": "

01

Confirmed

4 Aug · 09:12

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "VI1yP628", + "settings": { + "spacing": { + "padding": [ + 14, + 10, + 14, + 10 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 33, + "height": 112 + }, + "atoms": [ + { + "id": "-KhaQaFA", + "type": "text", + "value": "

02

In transit

5 Aug · 14:40

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "DXV9gGmp", + "settings": { + "spacing": { + "padding": [ + 14, + 10, + 14, + 10 + ] + }, + "backgroundColor": "#ffffff", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 33, + "height": 112 + }, + "atoms": [ + { + "id": "knn3c3UQ", + "type": "text", + "value": "

03

Delivered

Expected 6 Aug

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "4-KXzCpS", + "settings": { + "spacing": { + "padding": [ + 18, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "cw51Gnr9", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, + "atoms": [ + { + "id": "bQJVMfco", + "type": "button", + "text": "Track package", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/transactional4.json b/src/features/email-preview/catalog/blocks/transactional4.json new file mode 100644 index 0000000..a9ad693 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/transactional4.json @@ -0,0 +1,263 @@ +{ + "version": 2, + "name": "transactional4", + "label": "Transactional 4", + "type": "transactional", + "preview": "img/components/transactional-4.png", + "block": { + "id": "GGZq21Hb", + "label": "Transactional 4", + "settings": { + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#FFFFFF" + }, + "rows": [ + { + "id": "Wg8aLf-t", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 18 + }, + "cells": [ + { + "id": "Z0WscH6i", + "settings": { + "spacing": { + "padding": [ + 22, + 14, + 22, + 14 + ] + }, + "backgroundColor": "#FF6B00", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 18, + "width": 42 + }, + "atoms": [ + { + "id": "A3SBy0xb", + "type": "image", + "src": "img/catalog/products/travel-mug.png", + "link": "https://card.email/features", + "alt": "Orange travel mug", + "width": 190, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "hzK2IAIb", + "settings": { + "spacing": { + "padding": [ + 8, + 0, + 8, + 18 + ] + }, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 58 + }, + "atoms": [], + "rows": [ + { + "id": "05f3GlT0", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "TgvUrHzc", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left" + }, + "atoms": [ + { + "id": "XioyX_R-", + "type": "text", + "value": "

DELIVERED TODAY

Your order has arrived.

Left at the front desk at 14:32.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "HYbFFEdM", + "settings": { + "spacing": { + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "547iV5cN", + "settings": { + "spacing": { + "padding": [ + 16, + 16, + 16, + 16 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 14 + }, + "atoms": [ + { + "id": "wbX8l5Dv", + "type": "text", + "value": "

DELIVERY ADDRESS
18 Market Street
Brooklyn, NY 11201

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "e0L1S_Yf", + "settings": { + "spacing": { + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "bB5u0eqW", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left" + }, + "atoms": [ + { + "id": "t7IgiGn4", + "type": "button", + "text": "Report an issue", + "link": "https://card.email/start", + "backgroundColor": "#1F1712", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/transactional5.json b/src/features/email-preview/catalog/blocks/transactional5.json new file mode 100644 index 0000000..01ba763 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/transactional5.json @@ -0,0 +1,175 @@ +{ + "version": 2, + "name": "transactional5", + "label": "Transactional 5", + "type": "transactional", + "preview": "img/components/transactional-5.png", + "block": { + "id": "H9nf7gSp", + "label": "Transactional 5", + "settings": { + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#FFF9F3" + }, + "rows": [ + { + "id": "Vd3ib6J2", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 + }, + "cells": [ + { + "id": "geLXjHJ_", + "settings": { + "spacing": {}, + "backgroundColor": "#FF6B00", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 18, + "width": 25, + "height": 138 + }, + "atoms": [ + { + "id": "iAIbf0lw", + "type": "text", + "value": "

24
SEPTEMBER

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "Q6zG6fM5", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 51 + }, + "atoms": [ + { + "id": "wrXDHKIF", + "type": "text", + "value": "

BOOKING CONFIRMED

Product systems workshop

Thursday · 10:00–11:30 AM
Online · Room opens 15 minutes early

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "-upL7OLY", + "settings": { + "spacing": { + "padding": [ + 16, + 12, + 16, + 12 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 16, + "width": 24 + }, + "atoms": [ + { + "id": "U6_VGmuF", + "type": "text", + "value": "

BOOKING ID
WS-4821

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + }, + { + "id": "l5MqKRKI", + "type": "button", + "text": "Add to calendar", + "link": "https://card.email/start", + "backgroundColor": "#1F1712", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 12, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/transactional6.json b/src/features/email-preview/catalog/blocks/transactional6.json new file mode 100644 index 0000000..1b28390 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/transactional6.json @@ -0,0 +1,180 @@ +{ + "version": 2, + "name": "transactional6", + "label": "Transactional 6", + "type": "transactional", + "preview": "img/components/transactional-6.png", + "block": { + "id": "UGvna04-", + "label": "Transactional 6", + "settings": { + "spacing": { + "padding": [ + 42, + 58, + 38, + 58 + ] + }, + "backgroundColor": "#1F1712" + }, + "rows": [ + { + "id": "x_iwuted", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "NmDaSbkh", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, + "atoms": [ + { + "id": "FaXd6YW5", + "type": "text", + "value": "

SECURITY REQUEST

Reset your password.

We received a request to update the password for maya@example.com. This link expires in 30 minutes.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "sZGafOyv", + "settings": { + "spacing": { + "padding": [ + 22, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "sTnCQkDs", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, + "atoms": [ + { + "id": "jen7UgoI", + "type": "button", + "text": "Choose a new password", + "link": "https://card.email/start", + "backgroundColor": "#FF6B00", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "JihRDryg", + "settings": { + "spacing": { + "padding": [ + 18, + 26, + 0, + 26 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "HzYVj7D0", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, + "atoms": [ + { + "id": "g7sUPOE8", + "type": "text", + "value": "

If you didn’t request this, you can safely ignore this message. Your password will stay unchanged.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/transactional7.json b/src/features/email-preview/catalog/blocks/transactional7.json new file mode 100644 index 0000000..c236ed6 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/transactional7.json @@ -0,0 +1,348 @@ +{ + "version": 2, + "name": "transactional7", + "label": "Transactional 7", + "type": "transactional", + "preview": "img/components/transactional-7.png", + "block": { + "id": "EcYj_EM1", + "label": "Transactional 7", + "settings": { + "spacing": { + "padding": [ + 40, + 44, + 36, + 44 + ] + }, + "backgroundColor": "#FFFFFF" + }, + "rows": [ + { + "id": "LOx9Otg8", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "t6KUHSzA", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, + "atoms": [ + { + "id": "fr1cojSg", + "type": "text", + "value": "

VERIFY YOUR EMAIL

Enter this one-time code.

Use it to finish signing in. The code expires in 10 minutes.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "dvWa0ylT", + "settings": { + "spacing": { + "padding": [ + 22, + 30, + 0, + 30 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": false, + "gap": 10 + }, + "cells": [ + { + "id": "tsmCUQG9", + "settings": { + "spacing": {}, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 12, + "width": 16, + "height": 62 + }, + "atoms": [ + { + "id": "3UEPYWWR", + "type": "text", + "value": "

4

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "cCYKJIUX", + "settings": { + "spacing": {}, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 12, + "width": 16, + "height": 62 + }, + "atoms": [ + { + "id": "DpZ143Qw", + "type": "text", + "value": "

8

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "XdU9Brs0", + "settings": { + "spacing": {}, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 12, + "width": 16, + "height": 62 + }, + "atoms": [ + { + "id": "pLbZnrRT", + "type": "text", + "value": "

2

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "nFXIZ_v_", + "settings": { + "spacing": {}, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 12, + "width": 16, + "height": 62 + }, + "atoms": [ + { + "id": "YuTvJ15W", + "type": "text", + "value": "

9

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "eRzgeBDk", + "settings": { + "spacing": {}, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 12, + "width": 16, + "height": 62 + }, + "atoms": [ + { + "id": "ovhagGe9", + "type": "text", + "value": "

1

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "w-8M5bvU", + "settings": { + "spacing": {}, + "backgroundColor": "#FFF3E6", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 12, + "width": 16, + "height": 62 + }, + "atoms": [ + { + "id": "BSUJjwmI", + "type": "text", + "value": "

6

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "v3P4xbl4", + "settings": { + "spacing": { + "padding": [ + 18, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "wYm0reU3", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "center" + }, + "atoms": [ + { + "id": "VAH7jbNz", + "type": "text", + "value": "

Never share this code with anyone, including support.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/transactional8.json b/src/features/email-preview/catalog/blocks/transactional8.json new file mode 100644 index 0000000..0b279a4 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/transactional8.json @@ -0,0 +1,441 @@ +{ + "version": 2, + "name": "transactional8", + "label": "Transactional 8", + "type": "transactional", + "preview": "img/components/transactional-8.png", + "block": { + "id": "H92wG6Jl", + "label": "Transactional 8", + "settings": { + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#FFF9F3" + }, + "rows": [ + { + "id": "i2fnY2UC", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 18 + }, + "cells": [ + { + "id": "kXBedgEX", + "settings": { + "spacing": {}, + "backgroundColor": "#FF6B00", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 0, + "width": 7, + "height": 72 + }, + "atoms": [ + { + "id": "pSqq6Gis", + "type": "text", + "value": "

!

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "Eplgh30e", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left" + }, + "atoms": [ + { + "id": "F1qoqtVq", + "type": "text", + "value": "

PAYMENT NEEDS ATTENTION

We couldn’t renew your plan.

Your workspace remains active until 12 August.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "7DXcEC7_", + "settings": { + "spacing": { + "padding": [ + 20, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 18 + }, + "cells": [ + { + "id": "QIuz6w2q", + "settings": { + "spacing": { + "padding": [ + 14, + 16, + 14, + 16 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 14, + "width": 62 + }, + "atoms": [], + "rows": [ + { + "id": "f66Jj0w5", + "settings": { + "spacing": { + "padding": [ + 5, + 0, + 5, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": false, + "gap": 0 + }, + "cells": [ + { + "id": "BlMW5TyL", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 48 + }, + "atoms": [ + { + "id": "a5p6Dedq", + "type": "text", + "value": "

Card

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "WNEOyk5X", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "right", + "width": 52 + }, + "atoms": [ + { + "id": "uryO6D3K", + "type": "text", + "value": "

Visa ···· 2048

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "PSmCG4W9", + "settings": { + "spacing": { + "padding": [ + 5, + 0, + 5, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": false, + "gap": 0 + }, + "cells": [ + { + "id": "W9ZCCci9", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 48 + }, + "atoms": [ + { + "id": "WfjwF-UR", + "type": "text", + "value": "

Amount due

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "2G0gaulH", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "right", + "width": 52 + }, + "atoms": [ + { + "id": "_KcdbAHM", + "type": "text", + "value": "

$24.00

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "2olcZGxG", + "settings": { + "spacing": { + "padding": [ + 5, + 0, + 5, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": false, + "gap": 0 + }, + "cells": [ + { + "id": "hUJJ2pKd", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left", + "width": 48 + }, + "atoms": [ + { + "id": "4Br8l3Dn", + "type": "text", + "value": "

Next attempt

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "CWwLB1qe", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "right", + "width": 52 + }, + "atoms": [ + { + "id": "HebCqYZb", + "type": "text", + "value": "

8 August

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + }, + { + "id": "TokMXe7H", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "right", + "width": 38 + }, + "atoms": [ + { + "id": "iUzNL0qf", + "type": "button", + "text": "Update payment", + "link": "https://card.email/start", + "backgroundColor": "#1F1712", + "color": "#FFFFFF", + "fontSize": 15, + "borderRadius": 10, + "padding": [ + 13, + 20, + 13, + 20 + ], + "spacing": { + "padding": [ + 13, + 20, + 13, + 20 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/blocks/transactional9.json b/src/features/email-preview/catalog/blocks/transactional9.json new file mode 100644 index 0000000..930c904 --- /dev/null +++ b/src/features/email-preview/catalog/blocks/transactional9.json @@ -0,0 +1,339 @@ +{ + "version": 2, + "name": "transactional9", + "label": "Transactional 9", + "type": "transactional", + "preview": "img/components/transactional-9.png", + "block": { + "id": "KCKU0N2m", + "label": "Transactional 9", + "settings": { + "spacing": { + "padding": [ + 34, + 32, + 34, + 32 + ] + }, + "backgroundColor": "#FFFFFF" + }, + "rows": [ + { + "id": "UEZhowDz", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 0 + }, + "cells": [ + { + "id": "efg8-N75", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "top", + "horizontalAlign": "left" + }, + "atoms": [ + { + "id": "bJvyc6F-", + "type": "text", + "value": "

REFUND ISSUED

$89.00 is on its way back.

Most banks post refunds within 3–5 business days.

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "zE3vkL4g", + "settings": { + "spacing": { + "padding": [ + 20, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": true, + "gap": 16 + }, + "cells": [ + { + "id": "BG3EaUIo", + "settings": { + "spacing": { + "padding": [ + 14, + 10, + 14, + 10 + ] + }, + "backgroundColor": "#FFD9B8", + "verticalAlign": "middle", + "horizontalAlign": "center", + "borderRadius": 14, + "width": 27, + "height": 118 + }, + "atoms": [ + { + "id": "thvvagrp", + "type": "image", + "src": "img/catalog/products/sneaker.png", + "link": "https://card.email/features", + "alt": "Orange and cream lifestyle sneaker", + "width": 125, + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "z3qj6OpI", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "left", + "width": 43 + }, + "atoms": [ + { + "id": "oTXgwVfG", + "type": "text", + "value": "

Weekend Pair

Return #RT-1184
Refund to Visa ···· 2048

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "IwPRXNyu", + "settings": { + "spacing": {}, + "backgroundColor": "transparent", + "verticalAlign": "middle", + "horizontalAlign": "right", + "width": 30 + }, + "atoms": [ + { + "id": "pT0gK2A_", + "type": "text", + "value": "

REFUND TOTAL
$89.00

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + }, + { + "id": "98cMi9Nr", + "settings": { + "spacing": { + "padding": [ + 18, + 0, + 0, + 0 + ] + }, + "backgroundColor": "transparent", + "hiddenOnMobile": false, + "collapseOnMobile": false, + "gap": 10 + }, + "cells": [ + { + "id": "obm00nWV", + "settings": { + "spacing": { + "padding": [ + 12, + 8, + 12, + 8 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 12, + "width": 33 + }, + "atoms": [ + { + "id": "3wiPltcU", + "type": "text", + "value": "

01 · APPROVED

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "jMMZB5qg", + "settings": { + "spacing": { + "padding": [ + 12, + 8, + 12, + 8 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 12, + "width": 33 + }, + "atoms": [ + { + "id": "KJ0xkUbH", + "type": "text", + "value": "

02 · SENT

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + }, + { + "id": "hC05sTBk", + "settings": { + "spacing": { + "padding": [ + 12, + 8, + 12, + 8 + ] + }, + "backgroundColor": "#FFF3E6", + "verticalAlign": "top", + "horizontalAlign": "left", + "borderRadius": 12, + "width": 33 + }, + "atoms": [ + { + "id": "3SWicpYf", + "type": "text", + "value": "

03 · BANK POSTING

", + "color": "#1F1712", + "spacing": { + "padding": [ + 0, + 0, + 0, + 0 + ], + "margin": [ + 0, + 0, + 0, + 0 + ] + } + } + ], + "rows": [] + } + ] + } + ] + } +} diff --git a/src/features/email-preview/catalog/load-blocks.ts b/src/features/email-preview/catalog/load-blocks.ts index 07f6e4b..cdf8dcd 100644 --- a/src/features/email-preview/catalog/load-blocks.ts +++ b/src/features/email-preview/catalog/load-blocks.ts @@ -21,11 +21,80 @@ const BLOCK_ORDER: Record = { 'menu3-light', 'menu4-light', ], - header: [], - content: [], - feature: [], - cta: [], - ecommerce: [], + transactional: [ + 'transactional1', + 'transactional2', + 'transactional3', + 'transactional4', + 'transactional5', + 'transactional6', + 'transactional7', + 'transactional8', + 'transactional9', + ], + header: [ + 'header1', + 'header2', + 'header3', + 'header4', + 'header5', + 'header6', + 'header7', + 'header8', + 'header9', + 'header10', + ], + content: [ + 'content1', + 'content2', + 'content3', + 'content4', + 'content5', + 'content6', + 'content7', + 'content8', + 'content9', + 'content10', + 'content11', + 'content12', + 'content13', + 'content14', + 'content15', + 'content16', + ], + feature: [ + 'feature1', + 'feature2', + 'feature3', + 'feature4', + 'feature5', + 'feature6', + 'feature7', + 'feature8', + ], + cta: [ + 'cta-1', + 'cta-2', + 'cta-3', + 'cta-4', + 'cta-5', + 'cta-6', + 'cta-7', + 'cta-8', + 'cta-9', + 'cta-10', + 'cta-11', + 'cta-12', + ], + ecommerce: [ + 'ecommerce1', + 'ecommerce2', + 'ecommerce3', + 'ecommerce4', + 'ecommerce5', + 'ecommerce6', + 'ecommerce7', + ], footer: [ 'footer1-dark', 'footer2-dark', @@ -85,3 +154,4 @@ export const feature = loadBlocksByType('feature') export const cta = loadBlocksByType('cta') export const ecommerce = loadBlocksByType('ecommerce') export const footer = loadBlocksByType('footer') +export const transactional = loadBlocksByType('transactional') diff --git a/src/features/email-preview/constants.ts b/src/features/email-preview/constants.ts index f487a87..98846b8 100644 --- a/src/features/email-preview/constants.ts +++ b/src/features/email-preview/constants.ts @@ -15,6 +15,7 @@ export const EMAIL_RESPONSIVE_CSS = ` display: block !important; width: 100% !important; max-width: 100% !important; + box-sizing: border-box !important; } td.e-col-gap-mobile-collapse { @@ -27,7 +28,8 @@ export const EMAIL_RESPONSIVE_CSS = ` line-height: 0 !important; } - .e-mobile-hidden { + .e-mobile-hidden, + td.e-mobile-hidden { display: none !important; max-height: 0 !important; overflow: hidden !important; diff --git a/src/shared/assets/css/preview.css b/src/shared/assets/css/preview.css index 226cd01..369b1e3 100644 --- a/src/shared/assets/css/preview.css +++ b/src/shared/assets/css/preview.css @@ -194,7 +194,7 @@ a { align-items: center; justify-content: center; content: ''; - background-image: url('/img/dnd-icon.svg'); + background-image: url('/img/system/editor/dnd-icon.svg'); background-position: center center; background-repeat: no-repeat; } @@ -232,6 +232,7 @@ a { display: block !important; width: 100% !important; max-width: 100% !important; + box-sizing: border-box !important; } .p-preview-mobile td.e-col-gap-mobile-collapse { @@ -244,7 +245,8 @@ a { line-height: 0 !important; } -.p-preview-mobile .e-mobile-hidden { +.p-preview-mobile .e-mobile-hidden, +.p-preview-mobile td.e-mobile-hidden { display: none !important; max-height: 0 !important; overflow: hidden !important;