diff --git a/app/assets/images/icons/arrow-right.svg b/app/assets/images/icons/arrow-right.svg new file mode 100644 index 0000000000..bfc67b8efe --- /dev/null +++ b/app/assets/images/icons/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/icons/info.svg b/app/assets/images/icons/info.svg new file mode 100644 index 0000000000..6d7465512e --- /dev/null +++ b/app/assets/images/icons/info.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/stylesheets/base/_variables.scss b/app/assets/stylesheets/base/_variables.scss index 50d9ee84b6..8a164b5461 100644 --- a/app/assets/stylesheets/base/_variables.scss +++ b/app/assets/stylesheets/base/_variables.scss @@ -15,6 +15,7 @@ $gray-3: #999; $gray-4: #ddd; $gray-5: #f3f3f3; $hero-green: #4dd1aa; +$info-color: #ebf3ff; $landing-purple-border: #6a5b7d; $landing-purple: #341642; $light-brown: #eddaa5; @@ -63,7 +64,7 @@ $topic-backgrounds: ( rails: #ffecee, testing: #e5fdf4, vim: #e1f5ff, - workflow: #fcf5c8 + workflow: #fcf5c8, ); $topic-colors: ( analytics: #a5c236, @@ -77,11 +78,12 @@ $topic-colors: ( rails: #d5414d, testing: #34d096, vim: #2192cf, - workflow: #f4bc15 + workflow: #f4bc15, ); // Font families -$sans-serif: "proxima-nova-1", "proxima-nova-2", "museo-sans-1", "museo-sans-2", helvetica neue, sans-serif; +$sans-serif: "proxima-nova-1", "proxima-nova-2", "museo-sans-1", "museo-sans-2", + helvetica neue, sans-serif; $serif: "adelle-1", "adelle-2", $font-stack-helvetica; // Font weights diff --git a/app/assets/stylesheets/marketing.scss b/app/assets/stylesheets/marketing.scss index b02d1ea93e..cf6395bab5 100644 --- a/app/assets/stylesheets/marketing.scss +++ b/app/assets/stylesheets/marketing.scss @@ -49,6 +49,7 @@ @import "marketing/components/page-content"; @import "marketing/components/page-section"; @import "marketing/components/page-split"; +@import "marketing/components/persistent-toast"; @import "marketing/components/person"; @import "marketing/components/selling-point"; @import "marketing/components/testimonial-heading"; diff --git a/app/assets/stylesheets/marketing/components/_persistent-toast.scss b/app/assets/stylesheets/marketing/components/_persistent-toast.scss new file mode 100644 index 0000000000..cb63894d5b --- /dev/null +++ b/app/assets/stylesheets/marketing/components/_persistent-toast.scss @@ -0,0 +1,78 @@ +.persistent-toast { + align-items: stretch; + background: $info-color; + border-radius: 16px; + bottom: $base-spacing; + box-shadow: 0 12px 12px -6px rgba($black, 0.3), 0 0 1px 0 rgba($black, 0.4); + display: flex; + left: 50%; + max-width: 30rem; + overflow: hidden; + position: fixed; + transform: translateX(-50%); + width: 90vw; + z-index: 999; +} + +.icon-container { + align-items: center; + color: #2639c8; + display: flex; + justify-content: center; + padding: $small-spacing; +} + +.toast-content { + color: #2639c8; + flex: 1; + height: 100%; + padding: $small-spacing; +} + +.toast-cta-container { + display: flex; + flex-direction: column; + justify-content: space-between; + + a, + button { + align-items: center; + background: $info-color; + border: solid 1px $search-snippet-border; + border-right: 0; + color: #2639c8; + display: flex; + flex: 1; + font-family: $strong-font-family; + font-size: 1.25rem; + gap: $small-spacing; + margin-left: -1px; + margin-top: -1px; + padding: $small-spacing $base-spacing; + transition: $fast-transition; + + &:first-child { + border-top: 0; + } + + &:last-child { + border-bottom: 0; + } + + &:hover { + background: $upcase-blue; + color: $white; + } + } +} + +@media screen and (min-width: $small-screen) { + .persistent-toast { + transform: translateX(0); + left: $base-spacing; + } + .toast-content, + .icon-container { + padding: $base-spacing; + } +} diff --git a/app/views/layouts/marketing.html.erb b/app/views/layouts/marketing.html.erb index d91c747201..98abe8c069 100644 --- a/app/views/layouts/marketing.html.erb +++ b/app/views/layouts/marketing.html.erb @@ -26,6 +26,7 @@ <%= render "shared/flashes" %> <%= render "layouts/header" %> + <%= render "shared/persistent_toast" %> <%= yield %> <%= render "layouts/footer" %> diff --git a/app/views/shared/_persistent_toast.html.erb b/app/views/shared/_persistent_toast.html.erb new file mode 100644 index 0000000000..d4d91f23cb --- /dev/null +++ b/app/views/shared/_persistent_toast.html.erb @@ -0,0 +1,19 @@ +<% if ActiveModel::Type::Boolean.new.serialize(ENV["ENABLE_MARKETING_REDESIGN"]) %> +
+
+ <%= inline_svg_tag "icons/info.svg" %> +
+

+ <%= t(".content_html")%> +

+
+ <%= link_to({controller: "/marketing_redesign/home", action: :show}) do %> + <%= t(".cta_go")%> + <%= inline_svg_tag "icons/arrow-right.svg" %> + <% end %> + +
+
+<% end %> diff --git a/config/locales/en.yml b/config/locales/en.yml index 902352ac31..2d3e792469 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -117,7 +117,6 @@ en: complete-welcome: Dismiss this page (for now) headline: Read this to write better code. post-welcome-message: All content unlocked. Enjoy! - practice: decks: decks-list-title: decks @@ -179,6 +178,10 @@ en: multi_user: Team Membership single_user: Join Upcase upcase: Upcase + persistent_toast: + content_html: Looking to level up a team?
Check out Upcase for Teams. + cta_go: Go + cta_dismiss: Dismiss content_meta_description: "Explore thoughtbot's video tutorials, exercises, and forum discussions on %{name}" show: