Home page styling updates:

- Update copy
- Update menu description section

styles/core/_variables.scss

@@ -17,6 +17,7 @@ $usa-banner-height: 2.8rem;
 $sidenav-expanded-width: 25rem;
 $sidenav-collapsed-width: 10rem;
 $max-panel-width: 80rem;
+$home-pg-icon-width: 6rem;
 
 /*
  * USWDS Variables

styles/elements/_icons.scss

@@ -94,4 +94,19 @@
   &--primary {
     @include icon-color($color-primary);
   }
+
+  &--home-pg-badge {
+    @include icon-size(27);
+    @include icon-color($color-white);
+
+    background-color: $color-primary;
+    height: $home-pg-icon-width;
+    width: $home-pg-icon-width;
+    border-radius: 100%;
+    display: inline-flex;
+
+    svg {
+      margin: auto;
+    }
+  }
 }

styles/sections/_home.scss

@@ -2,48 +2,23 @@
   .sticky-cta {
     margin: -1.6rem -1.6rem 0 -1.6rem;
   }
-}
 
-.about-cloud {
+  &__content {
-  margin: 4rem auto;
+    margin: 4rem auto;
-  max-width: 900px;
+    max-width: 900px;
-}
 
-.your-project {
+    &--descriptions {
-  margin-top: 3rem;
+      .col {
-  padding: 3rem;
+        margin-left: $home-pg-icon-width;
-  background-color: $color-gray-lightest;
+        padding: ($gap * 2) ($gap * 4);
+        position: relative;
 
-  h2 {
+        .icon--home-pg-badge {
-    margin-top: 0;
+          position: absolute;
-  }
+          left: -$home-pg-icon-width;
-
+          top: $gap * 3;
-  .links {
-    justify-content: flex-start;
-
-    .icon-link {
-      padding: $gap ($gap * 4);
-
-      &:first-child {
-        padding-left: 0;
-      }
-
-      &:last-child {
-        padding-right: 0;
-      }
-
-      &:hover {
-        background-color: transparent;
-        color: $color-gray-dark;
-
-        .svg * {
-          fill: $color-gray-dark;
         }
       }
-
-      &.active:hover {
-        color: $color-blue;
-      }
     }
   }
 }
@@ -112,8 +87,3 @@
     }
   }
 }
-
-#jedi-heirarchy {
-  max-width: 65rem;
-  margin-top: $gap * 8;
-}

templates/home.html

@@ -1,8 +1,7 @@
 {% extends "base.html" %}
 
-{% from "components/sticky_cta.html" import StickyCTA %}
 {% from "components/icon.html" import Icon %}
-{% from "components/semi_collapsible_text.html" import SemiCollapsibleText %}
+{% from "components/sticky_cta.html" import StickyCTA %}
 
 {% block content %}
 
@@ -13,80 +12,50 @@
      {% set sticky_header = "home.get_started" | translate  %}
   {% endif %}
 
-  <div class="about-cloud">
+  <div class="home__content">
     {% include "fragments/flash.html" %}
 
     <h1>{{ "home.head" | translate }}</h1>
+    <h3>Set up a Portfolio</h3>
+    <h4>New Portfolios will be visible in the left side bar of this page. </h4>
+    <p>All TOs associated to a specific Application or set of related Applications will be entered at the Portfolio level. Funding is applied and managed at the Portfolio level as well.</p>
+    <hr>
 
-    {{ SemiCollapsibleText(first_half=("home.about_cloud.part1"|translate), second_half=("home.about_cloud.part2"|translate)) }}
+    <div class="home__content--descriptions">
-
+      <div class="row">
-    <div class="your-project">
+        <div class="col col--half col--pad">
-      <h2 class="h3">{{ "home.your_project" | translate }}</h2>
+          {{ Icon('funding', classes="icon--home-pg-badge") }}
-      <p>{{ "home.your_project_descrip" | translate }}</p>
+          <h4>{{ "navigation.portfolio_navigation.breadcrumbs.funding" | translate }}</h4>
-
+          <p>
-      <hr>
+            {{ "home.funding_descrip" | translate }}
-
+          </p>
-      {% macro Link(icon, text, section, default=False) %}
-      {% if default %}
-        <div v-bind:class='{"icon-link": true, active: selectedSection === "{{ section }}" || selectedSection === null}' v-on:click="toggleSection('{{ section }}')">
-      {% else %}
-        <div v-bind:class='{"icon-link": true, active: selectedSection === "{{ section }}"}' v-on:click="toggleSection('{{ section }}')">
-      {% endif %}
-          <div class="col">
-            <div class='icon-link--icon'>{{ Icon(icon) }}</div>
-            <div class='icon-link--name'>{{ text }}</div>
-          </div>
         </div>
-      {% endmacro %}
+        <div class="col col--half col--pad">
-
+          {{ Icon('chart-pie', classes="icon--home-pg-badge") }}
-      <toggler inline-template v-bind:initial-selected-section="'funding'">
+          <h4>{{ "navigation.portfolio_navigation.breadcrumbs.reports" | translate }}</h4>
-        <div>
+          <p>
-          <div class="portfolio-header">
+            {{ "home.reports_descrip" | translate }}
-            <div class="links row">
+          </p>
-              {{ Link(
-              icon='funding',
-              section='funding',
-              text='navigation.portfolio_navigation.breadcrumbs.funding' | translate,
-              default=True
-              ) }}
-              {{ Link(
-              icon='applications',
-              section='applications',
-              text='navigation.portfolio_navigation.breadcrumbs.applications' | translate,
-              ) }}
-              {{ Link(
-              icon='chart-pie',
-              section='reports',
-              text='navigation.portfolio_navigation.breadcrumbs.reports' | translate,
-              ) }}
-              {{ Link(
-              icon='cog',
-              section='admin',
-              text='navigation.portfolio_navigation.breadcrumbs.admin' | translate,
-              ) }}
-            </div>
-          </div>
-          {% macro Description(section, default=False) %}
-          {% if default %}
-            <p v-show="selectedSection === '{{ section }}' || selectedSection === null">
-          {% else %}
-            <p v-show="selectedSection === '{{ section }}'">
-          {% endif %}
-              <strong>
-                {{ "navigation.portfolio_navigation.breadcrumbs.%s" | format(section) | translate }}
-              </strong>
-              {{ "home.%s_descrip" | format(section) | translate }}
-            </p>
-          {% endmacro %}
-          <div class="project-section-descriptions">
-            {{ Description('funding', default=True) }}
-            {{ Description('applications') }}
-            {{ Description('reports') }}
-            {{ Description('admin') }}
-          </div>
         </div>
-      </toggler>
+      </div>
+      <div class="row">
+        <div class="col col--half col--pad">
+          {{ Icon('applications', classes="icon--home-pg-badge") }}
+          <h4>{{ "navigation.portfolio_navigation.breadcrumbs.applications" | translate }}</h4>
+          <p>
+            {{ "home.applications_descrip" | translate }}
+          </p>
+        </div>
+        <div class="col col--half col--pad">
+          {{ Icon('cog', classes="icon--home-pg-badge") }}
+          <h4>{{ "navigation.portfolio_navigation.breadcrumbs.admin" | translate }}</h4>
+          <p>
+            {{ "home.admin_descrip" | translate }}
+          </p>
+        </div>
+      </div>
     </div>
+
     <a href="{{ url_for("portfolios.new_portfolio_step_1") }}" class="usa-button-primary">
       {{ "home.add_portfolio_button_text" | translate }}
     </a>

translations.yaml

@@ -22,13 +22,13 @@ home:
   add_portfolio_button_text: Add New Portfolio
   new_portfolio: New Portfolio
   get_started: Get Started
-  head: About Cloud Services
+  head: JEDI Cloud Services
   your_project: Your Project
   your_project_descrip: Your portfolio is where all task orders pertaining to a specific project or set of related projects live. In JEDI, every task order in your portfolio has four components.
-  funding_descrip: is information about all approved task orders associated to your portfolio.
+  funding_descrip: The Task Orders section allows you to enter, manage, and edit awarded TOs associated to a specific Portfolio.
-  applications_descrip: ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+  applications_descrip: The Applications section allows you to easily create and define new Applications within a Portfolio, as well as manage user permissions and Environments.
-  reports_descrip: enim ad minim veniam, quis nostrud exercitation ullamco
+  reports_descrip: The Reports section allows you to view and monitor funding usage within a specific Portfolio.
-  admin_descrip: aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+  admin_descrip: Within the Settings section, you can manage your Portfolio name and description, as well as add, edit, and delete Portfolio managers.
 ccpo:
   users_title: CCPO Users
   add_user: Add new CCPO user