refactoring: Minor tweaks of homepage based on user feedback

app/assets/stylesheets/tpi/pages/banks-index.scss

@@ -3,20 +3,38 @@
 .banks-index-page {
   &__info {
     background-color: $blue;
-    padding: 40px 0;
+    padding: 40px 0 30px 0;
     border-bottom: 1px solid #FFFFFF1F;
 
+    strong {
+      color: $white;
+    }
+
     .title {
       color: $white;
       font-size: $size-4;
       font-family: $font-family-bold;
-      margin-bottom: 25px;
+      margin-bottom: 20px;
     }
 
     .description {
       color: $white;
       font-size: $size-6;
       font-family: $font-family-regular;
+      margin-bottom: 10px
+    }
+
+    ol {
+      color: $white;
+      padding-left: 20px;
+
+      li {
+        padding: 10px 0;
+      }
+
+      li::marker {
+        font-weight: bold;
+      }
     }
   }
 

app/assets/stylesheets/tpi/pages/home.scss

@@ -302,7 +302,7 @@
       .images {
         display: flex;
         gap: 20px;
-        margin-top: 10px;
+        margin: 10px 0;
       }
 
       .info {
@@ -371,6 +371,11 @@
       padding-bottom: $size-4;
     }
 
+    .content {
+      text-align: justify;
+      text-justify: inter-word;
+    }
+
     a {
       color: $white;
     }

app/controllers/tpi/home_controller.rb

@@ -20,6 +20,8 @@ def index
             page&.contents&.find_by(code: 'supporters_without_logo')&.text.to_i,
           total_market_cap: page&.contents&.find_by(code: 'total_market_cap')&.text || '-',
           combined_aum: page&.contents&.find_by(code: 'combined_aum')&.text || '-',
+          corporate_management_quality: page&.contents&.find_by(code: 'corporate_management_quality')&.text || '-',
+          corporate_carbon_performance: page&.contents&.find_by(code: 'corporate_carbon_performance')&.text || '-',
           sectors_count: TPISector.with_companies.count,
           ascor_countries: ASCOR::Country.count,
           banks: Bank.count

app/javascript/components/tpi/Navbar.js

@@ -113,7 +113,7 @@ function renderMenuItem(menuItem, index) {
 }
 
 const NavbarComponent = ({ items, openSearchMode }) => {
-  const [tpi, publications, about, faq, newsletter, search] = items;
+  const [tpi, publications, about, newsletter, search] = items;
   const [isOpen, setIsOpen] = useState(false);
   return (
     <div className="navbar" role="navigation" aria-label="main navigation">
@@ -188,15 +188,6 @@ const NavbarComponent = ({ items, openSearchMode }) => {
                 {about.content && about.content.map((menuItem, i) => renderMenuItem(menuItem, i))}
               </div>
             </div>
-
-            <a
-              href={faq.path}
-              className={classnames('navbar-item', {
-                'is-active': faq.active
-              })}
-            >
-              {faq.entry}
-            </a>
           </div>
 
           <div className="navbar-end">

app/views/layouts/tpi/_footer.html.erb

@@ -11,18 +11,18 @@
           <a href="mailto:[email protected]" class="footer-link">Contact Us</a>
         </button>
         <div>
-          <a href="/use-of-the-centre-s-data" class="link is-large">Use of the Centre's data</a>
+          <a href="/use-of-the-centre-s-data" class="link is-large" target="_blank">Use of the Centre's data</a>
         </div>
         <div>
-          <a href="https://www.lse.ac.uk/lse-information/terms-of-use" class="link is-large is-hidden-touch">LSE Terms of use</a>
-          <a href="https://www.lse.ac.uk/lse-information/terms-of-use" class="link is-large is-hidden-desktop">Terms of use</a>
+          <a href="https://www.lse.ac.uk/lse-information/terms-of-use" class="link is-large is-hidden-touch" target="_blank">LSE Terms of use</a>
+          <a href="https://www.lse.ac.uk/lse-information/terms-of-use" class="link is-large is-hidden-desktop" target="_blank">Terms of use</a>
         </div>
         <div>
-          <a href="https://www.lse.ac.uk/lse-information/privacy-policy" class="link is-large is-hidden-touch">LSE Privacy policy</a>
-          <a href="https://www.lse.ac.uk/lse-information/privacy-policy" class="link is-large is-hidden-desktop">Privacy policy</a>
+          <a href="https://www.lse.ac.uk/lse-information/privacy-policy" class="link is-large is-hidden-touch" target="_blank">LSE Privacy policy</a>
+          <a href="https://www.lse.ac.uk/lse-information/privacy-policy" class="link is-large is-hidden-desktop" target="_blank">Privacy policy</a>
         </div>
         <div>
-          <a href="https://www.lse.ac.uk/lse-information/cookies" class="link is-large">Cookies</a>
+          <a href="https://www.lse.ac.uk/lse-information/cookies" class="link is-large" target="_blank">Cookies</a>
         </div>
       </div>
       <div class="column footer__copyright">Copyright © <%= Time.now.year %></div>

app/views/layouts/tpi/_header.html.erb

@@ -49,11 +49,6 @@
       ].compact,
       active: active_menu_page?(@about_pages_paths)
     },
-    {
-      entry: "Use of the Centre's data",
-      path: '/use-of-the-centre-s-data',
-      active: active_menu_page?('/use-of-the-centre-s-data')
-    },
     {
       entry: 'Newsletter',
       path: tpi_newsletter_path,

app/views/layouts/tpi/_hosted_by.html.erb

@@ -4,17 +4,17 @@
   <div class="partners">
     <a href="http://www.lse.ac.uk/">
       <img
-        src="<%= asset_path 'tpi/partners/lse.png' %>"
+        src="<%= asset_path 'tpi/partners/lse-bigger.png' %>"
         alt="The London School of Economics and Political Sciences"
         class="partners__lse"
         />
     </a>
     <a href="http://www.lse.ac.uk/GranthamInstitute/">
       <img
-        src="<%= asset_path 'tpi/partners/grantham.png' %>"
+        src="<%= asset_path 'tpi/partners/grantham-bigger.png' %>"
         alt="Grantham Research Institute on Climate Change and the Environment"
         class="partners__grantham"
         />
     </a>
   </div>
-</div>
+</div>

app/views/tpi/banks/index.html.erb

@@ -4,8 +4,16 @@
 <div class="banks-index-page">
   <div class="banks-index-page__info">
     <div class="container">
-      <div class="title">Banking Tool purpose</div>
-      <p class="description">Lorem ipsum dolor sit amet consectetur. Rutrum aliquam duis pharetra viverra sed. Pharetra aliquam vel ullamcorper et erat nibh aliquam. Adipiscing eu maecenas at accumsan nulla augue aliquet. Ullamcorper scelerisque a nunc tellus sed mi pellentesque.</p>
+      <div class="title">Introduction</div>
+      <p class="description">The banking project at the TPI Centre seeks to evaluate and compare the level of progress that banks are making in the transition to a low-carbon economy. This year, the TPI Centre assessed 26 major international banks, 10 US super-regional banks, and 2 custodian banks on two elements:</p>
+      <ol>
+        <li>
+          <strong>Net Zero Banking Assessment Framework (NZBAF)</strong>, a granular framework evaluating banks on 72 sub-indicators across ten areas, such as their decarbonisation strategy, climate governance, or exposure and emissions disclosure.
+        </li>
+        <li>
+          <strong>Carbon Performance</strong>, an in-depth quantitative assessment of which sectors and business activities are covered by banks’ decarbonisation targets over different timeframes and their level of alignment with low carbon benchmarks (1.5°C, Below&nbsp;2°C, International and National Pledges).
+        </li>
+      </ol>
     </div>
   </div>
   <div class="dropdown-selector-wrapper">

app/views/tpi/home/index.html.erb

@@ -11,7 +11,7 @@
         </p>
       </div>
       <div>
-        <%= link_to 'TPI Ltd', '/supporters', class: 'button is-primary button__hero' %>
+        <%= link_to 'TPI Ltd', '/tpi-ltd', class: 'button is-primary button__hero' %>
         <p class="tpi-home__hero__title__description content">
           Click above to learn more about our history and investor network
         </p>
@@ -84,20 +84,20 @@
             <div class="stat-box__icon"><%= image_tag 'tpi/home/corporate-management-quality.png' %></div>
             <div class="stat-box__content">
               <div class="stat-box__number">Corporate:<br />Management<br />Quality</div>
-              <div class="stat-box__title">TODO</div>
+              <div class="stat-box__title"><%= @home_content[:stats][:corporate_management_quality] %></div>
             </div>
           </div>
 
           <div class="stat-box">
             <div class="stat-box__icon"><%= image_tag 'tpi/home/corporate-carbon-performance.png' %></div>
             <div class="stat-box__content">
               <div class="stat-box__number">Corporate:<br />Carbon<br />Performance</div>
-              <div class="stat-box__title">TODO</div>
+              <div class="stat-box__title"><%= @home_content[:stats][:corporate_carbon_performance] %></div>
             </div>
           </div>
 
           <div class="stat-box">
-            <div class="stat-box__icon"><%= image_tag 'tpi/home/location.svg' %></div>
+            <div class="stat-box__icon"><%= image_tag 'tpi/home/ascor.png' %></div>
             <div class="stat-box__content">
               <div class="stat-box__number">Sovereigns:<br />ASCOR</div>
               <div class="stat-box__title"><%= @home_content[:stats][:ascor_countries] %></div>
@@ -122,7 +122,7 @@
           <%= render 'sector_cluster_stat', cluster: @sector_clusters['energy'], icon: 'tpi/home/energy.png' %>
           <%= render 'sector_cluster_stat', cluster: @sector_clusters['transport'], icon: 'tpi/home/transport.png' %>
           <%= render 'sector_cluster_stat', cluster: @sector_clusters['industry'], icon: 'tpi/home/industry.png' %>
-          <%= render 'sector_cluster_stat', cluster: @sector_clusters['food'], icon: 'tpi/home/food.png' %>
+          <%= render 'sector_cluster_stat', cluster: @sector_clusters['consumer-goods'], icon: 'tpi/home/food.png' %>
         </div>
       </div>
     </div>
@@ -141,7 +141,6 @@
           <li>Be part of a global investor community</li>
           <li>Better inform your investment research</li>
           <li>Show your commitment to the low carbon economy</li>
-          <li>Zero cost</li>
         </ul>
       </div>
       <br />
@@ -208,7 +207,7 @@
       <div class="subtitle">The TPI Centre also receives support towards ASCOR from</div>
       <div class="images">
         <img src="<%= asset_path 'tpi/funders/laudes-foundation.png' %>" />
-        <img src="<%= asset_path 'tpi/funders/climateworks.png' %>" />>
+        <img src="<%= asset_path 'tpi/funders/climateworks.png' %>" />
       </div>
       <br />
       <div class="info">If you would like to discuss funding the TPI Centre's work, please <a href="mailto:[email protected]" class="footer-link">Contact Us</a></div>
@@ -220,14 +219,14 @@
   <div class="container">
     <div class="columns" >
       <div class="column is-5 subscribe__logo is-hidden-touch">
-        <img src="<%= asset_path 'newsletter_background/newsletter img@2x.png' %>" alt="tpi newsletter logo">
+        <img src="<%= asset_path 'newsletter_background/newsletter_img_new.png' %>" alt="tpi newsletter logo">
       </div>
 
       <div class="column is-5-desktop subscribe__container">
         <h2 class="is-size-4 is-hidden-touch">Subscribe to the Newsletter</h2>
         <div class="subscribe-title is-hidden-desktop">
           <div>Subscribe to the TPI newsletter</div>
-          <img src="<%= asset_path 'newsletter_background/newsletter img@2x.png' %>" alt="tpi newsletter logo">
+          <img src="<%= asset_path 'newsletter_background/newsletter_img_new.png' %>" alt="tpi newsletter logo">
         </div>
 
         <p class="content">