CTA on profile when user has no devices

app/views/layouts/application.html.erb

@@ -1,6 +1,6 @@
 <% content_for :container do %>
-  <div class="container mx-2 mx-md-auto w-auto w-md-100 mt-2 md-md-5 g-0">
-    <div class="bg-white w-100 px-4 pb-5 pt-4 border border-thick">
+  <%= render layout: "ui/shared/container" do %>
+    <%= render layout: "ui/shared/box" do %>
       <% if @title %>
         <header>
           <h1 class="mb-4"><%= @title %></h1>
@@ -9,7 +9,7 @@
       <main>
         <%= yield %>
       </main>
-    </div>
-  </div>
-<% end  %>
+    <% end %>
+  <% end %>
+<% end %>
 <%= render "layouts/base" %>

app/views/ui/shared/_box.html.erb

@@ -0,0 +1,3 @@
+  <div class="bg-white w-100 border border-thick <%= "p-3 pb-5 p-md-3 pb-md-5" unless local_assigns[:no_padding] %>">
+    <%= yield %>
+  </div>

app/views/ui/shared/_container.html.erb

@@ -0,0 +1,3 @@
+<div class="container mx-2 mx-md-auto w-auto w-md-100 mt-0 mt-md-2 md-md-5 g-0">
+  <%= yield %>
+</div>

app/views/ui/users/_no_device_cta.html.erb

@@ -0,0 +1,8 @@
+
+<h2><%= t :no_device_cta_heading %></h2>
+<p><%= t :no_device_cta_blurb %></p>
+<div class="mx-auto w-lg-75 w-100">
+  <%= image_tag "smartcitizen-2-2-kit.gif", class: "w-100" %>
+  <a class="btn btn-primary mb-2 w-100" href="<%= t :no_device_kit_link_url %>"><%= t :no_device_kit_link_text %></a>
+  <a class="btn btn-secondary w-100" href="<%= t :no_device_onboarding_link_url %>"><%= t :no_device_onboarding_link_text %></a>
+</div>

app/views/ui/users/show.html.erb

@@ -1,7 +1,7 @@
-<div class="user-profile-header bg-black text-white mx-2 mb-2 rounded-4">
+<div class="user-profile-header bg-black text-white mx-2 mb-2 rounded-4 mb-md-5">
   <div class="container mx-2 mx-sm-auto w-auto w-sm-100 my-3 px-sm-3 g-0">
     <header class="row">
-      <div class="col-12 col-sm-6 col-md-3 col-lg-2 px-3 px-sm-0">
+      <div class="col-12 col-sm-6 col-md-3 col-lg-2 px-3 px-sm-0 pe-md-3">
         <div class="circular-image-crop">
           <%= image_tag(
             @user.profile_picture.present? ? @user.profile_picture : "default_avatar.svg",
@@ -47,3 +47,12 @@
     </header>
   </div>
 </div>
+<div class="container g-0 px-2">
+  <div class="row">
+    <div class="col-12 col-lg-10 offset-lg-2">
+      <%= render layout: "ui/shared/box" do %>
+        <%= render partial: "no_device_cta" %>
+      <% end %>
+    </div>
+  </div>
+</div>

config/locales/views/users/en.yml

@@ -33,3 +33,9 @@ en:
   post_delete_user_blurb_html: "If you have deleted your account in error, please contact <a href='mailto:[email protected]'>Smart Citizen support<a> as soon as possible. After 24 hours, your account and all devices will be deleted permanently."
   post_delete_user_cta: "Return to the homepage"
   post_delete_user_cta_link: "https://smartcitizen.me"
+  no_device_cta_heading: "You don't yet have any devices!"
+  no_device_cta_blurb: "Order a SmartCitizen kit to start sensing, or connect one you already have."
+  no_device_kit_link_url: "https://smartcitizen.me#get-your-kit"
+  no_device_kit_link_text: "Get your kit"
+  no_device_onboarding_link_url: "https://start.smartcitizen.me/wizard/landing?lang=eng"
+  no_device_onboarding_link_text: "Connect an existing kit"