From 302a14ff9b8ce8bbaeb9e4ead75aacb1f222a947 Mon Sep 17 00:00:00 2001
From: tharindugayanga <tharindug@xeptagon.com>
Date: Wed, 13 Nov 2024 15:50:08 +0530
Subject: [PATCH 1/6] Home Page content change

---
 web/src/Components/Footer/layout.footer.tsx  |   2 +-
 web/src/Components/Layout/infoLayout.tsx     |   2 +-
 web/src/Components/Sider/layout.sider.tsx    |   2 +-
 web/src/Components/logo/transparencyLogo.tsx |   6 +-
 web/src/Pages/Homepage/homepage.scss         | 225 +++++++-----
 web/src/Pages/Homepage/homepage.tsx          | 346 ++++++++++++++++++-
 web/src/locales/i18n/homepage/en.json        |  61 +++-
 web/src/locales/i18n/homepage/fr.json        |  61 +++-
 web/src/locales/i18n/homepage/sin.json       | 107 ++++--
 9 files changed, 698 insertions(+), 114 deletions(-)

diff --git a/web/src/Components/Footer/layout.footer.tsx b/web/src/Components/Footer/layout.footer.tsx
index 75dca17ac..452cec06b 100644
--- a/web/src/Components/Footer/layout.footer.tsx
+++ b/web/src/Components/Footer/layout.footer.tsx
@@ -17,7 +17,7 @@ const LayoutFooter = () => {
             </div>
             <div>
               <div style={{ display: 'flex' }}>
-                <div className="title">{'TRANSPARENCY'}</div>
+                <div className="title">{'NDC TRANSPARENCY'}</div>
                 <div className="title-sub">{'SYSTEM'}</div>
               </div>
               <div className="footer-country-name">
diff --git a/web/src/Components/Layout/infoLayout.tsx b/web/src/Components/Layout/infoLayout.tsx
index 815739337..03ca170ed 100644
--- a/web/src/Components/Layout/infoLayout.tsx
+++ b/web/src/Components/Layout/infoLayout.tsx
@@ -18,7 +18,7 @@ const InfoLayout = () => {
         </div>
         <div>
           <div style={{ display: 'flex' }}>
-            <div className="title">{'TRANSPARENCY'}</div>
+            <div className="title">{'NDC TRANSPARENCY'}</div>
             <div className="title-sub">{'SYSTEM'}</div>
           </div>
           <div className="country-name">{process.env.REACT_APP_COUNTRY_NAME || 'CountryX'}</div>
diff --git a/web/src/Components/Sider/layout.sider.tsx b/web/src/Components/Sider/layout.sider.tsx
index 97b40334b..fb16aa51d 100644
--- a/web/src/Components/Sider/layout.sider.tsx
+++ b/web/src/Components/Sider/layout.sider.tsx
@@ -84,7 +84,7 @@ const LayoutSider = (props: LayoutSiderProps) => {
           {!collapsed && (
             <div>
               <div style={{ display: 'flex' }}>
-                <div className="title">{collapsed ? '' : 'TRANSPARENCY'}</div>
+                <div className="title">{collapsed ? '' : 'NDC TRANSPARENCY'}</div>
                 <div className="title-sub">{collapsed ? '' : 'SYSTEM'}</div>
               </div>
               <div className="country-name">{process.env.REACT_APP_COUNTRY_NAME || 'CountryX'}</div>
diff --git a/web/src/Components/logo/transparencyLogo.tsx b/web/src/Components/logo/transparencyLogo.tsx
index b767e4a26..16344a536 100644
--- a/web/src/Components/logo/transparencyLogo.tsx
+++ b/web/src/Components/logo/transparencyLogo.tsx
@@ -21,10 +21,10 @@ const TransparencyLogo: React.FC = () => {
         </Col>
         <Col span={18} style={{ marginLeft: '20px' }}>
           <Row className="logo-text">
-            <Col span={14}>
-              <div className="bold-logo-title">{'TRANSPARENCY'}</div>
+            <Col span={18}>
+              <div className="bold-logo-title">{'NDC TRANSPARENCY'}</div>
             </Col>
-            <Col span={10}>
+            <Col span={6}>
               <div className="logo-title">{'SYSTEM'}</div>
             </Col>
             <Col span={24}>
diff --git a/web/src/Pages/Homepage/homepage.scss b/web/src/Pages/Homepage/homepage.scss
index a570a18f3..f7b91aa8f 100644
--- a/web/src/Pages/Homepage/homepage.scss
+++ b/web/src/Pages/Homepage/homepage.scss
@@ -1,11 +1,15 @@
 @import '../../Assets/Fonts/fonts.scss';
 @import '../../Styles/variables.scss';
 
+$max-pagewidth: 1600px;
+$title-color: #3a8ab5;
+
 .homepage-container {
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   background-color: $background-color;
+  background-color: $outside-background-color;
   scroll-behavior: smooth;
 
   .homepage-header-container {
@@ -30,10 +34,6 @@
       font-weight: 700;
       margin-right: 0.5rem;
       padding-left: 5px;
-
-      @media (max-width: 435px) {
-        font-size: 0.8rem;
-      }
     }
 
     .title-sub {
@@ -41,25 +41,16 @@
       font-family: 'MuseoSans';
       font-size: 1.2rem;
       color: $logo-text-color;
-
-      @media (max-width: 435px) {
-        font-size: 0.8rem;
-      }
     }
 
     .logo {
       height: 40px;
-      // width: 65px;
       padding-left: 2vw;
 
       img {
         object-fit: cover;
-        // height: auto;
-        // height: 100%;
-        // width: 100%;
         height: 40px;
-        width: 50px;
-        // padding-right: 5px;
+        width: 36px;
       }
     }
 
@@ -104,19 +95,6 @@
     }
   }
 
-  // .image-container {
-  //   background-image: linear-gradient(to bottom,
-  //       rgba(255, 255, 255, 0.3) 2%,
-  //       rgba(22, 177, 255, 0.1) 10%),
-  //     url('../../Assets/Images/factory.webp');
-  //   background-image: linear-gradient(to bottom,
-  //       rgba(255, 255, 255, 0.3) 2%,
-  //       rgba(22, 177, 255, 0.1) 40%),
-  //     image-set('../../Assets/Images/factory.png'type('image/png'),
-  //       '../../Assets/Images/factory.webp'type('image/webp'));
-  //   background-size: cover;
-  // }
-
     .image-container {
     background-image: linear-gradient(to bottom,
         rgba(255, 255, 255, 0.3) 2%,
@@ -188,8 +166,7 @@
 
     @-webkit-keyframes arrow
 
-    /*Safari and Chrome*/
-      {
+    /*Safari and Chrome*/ {
       0% {
         opacity: 0;
       }
@@ -223,7 +200,7 @@
     }
 
     .text-ctn {
-      margin-left: 2vw;
+      margin-left: 5vw;
       bottom: 50px;
       font-family: $secondary-font-family;
       font-size: 4rem;
@@ -242,6 +219,12 @@
       }
 
       @media (max-width: 579px) {
+        font-size: 2.2rem;
+        padding-top: 30vh;
+        text-align: left;
+      }
+
+      @media (max-width: 427px) {
         font-size: 2.2rem;
         padding-top: 30vh;
         text-align: center;
@@ -268,13 +251,13 @@
       }
 
       @media (max-width: 579px) {
-        text-align: center;
+        text-align: left;
         font-size: 1.2rem;
       }
 
-      @media (max-width: 380px) {
+      @media (max-width: 427px) {
         text-align: center;
-        font-size: 1rem;
+        font-size: 1.2rem;
       }
     }
   }
@@ -284,10 +267,12 @@
     height: fit-content;
     padding: 10px 60px 10px 60px;
     text-align: center;
-    margin-top: 5px;
+    margin: 5px auto;
+    max-width: $max-pagewidth;
 
     @media (max-width: $lg-size) {
       height: fit-content;
+      margin-top: 35px;
     }
 
     @media (max-width: 536px) {
@@ -295,31 +280,33 @@
     }
 
     .title {
-      font-size: 2rem;
+      font-size: 28px;
       font-weight: 700;
       font-family: $primary-font-family;
       color: $title-text-color;
-      text-align: center;
+      color: $title-color;
+      text-align: start;
       justify-content: center;
       text-transform: uppercase;
-      padding: 50px 50px 10px 50px;
+      padding: 50px 50px 0px 50px;
 
       @media (max-width: $lg-size) {
-        font-size: 2rem;
-        margin-top: 1rem;
+        font-size: 24px;
+        margin-top: 0rem;
+        padding-top: 15px;
         color: $title-text-color;
         line-height: 1.5em;
       }
     }
 
     .homepagebody {
-      text-align: center;
+      text-align: start;
       font-size: 0.875rem;
       font-weight: 400;
       font-family: $primary-font-family;
       color: $title-text-color;
       justify-content: center;
-      margin: 20px 60px 20px 60px;
+      margin: 20px 50px;
 
       @media (max-width: $lg-size) {
         font-size: 0.8rem;
@@ -328,26 +315,49 @@
         line-height: 1.5em;
       }
 
-      .homepagebody_aboutusline1 {
+      .homepagebody_text {
         font-size: 1.125rem;
-        margin-top: 1rem;
         color: $title-text-color;
+        margin-bottom: 10px;
+
+        &.list {
+          li {
+            margin: 10px 0px;
+          }
+
+          @media screen and (max-width: 767px) {
+            padding-left: 20px;
+          }
+        }
 
         @media (max-width: $lg-size) {
           font-size: 1rem;
-          margin-top: 1rem;
           color: $title-text-color;
           line-height: 1.5em;
         }
 
         @media (max-width: 1200px) {
-          margin-top: 3rem;
+          margin-top: 1rem;
         }
       }
 
       .homepagebody_aboutuslines {
         margin-top: 1rem;
         margin-bottom: 1rem;
+        justify-content: center;
+        align-items: center;
+        font-size: 1.125rem;
+
+        @media (max-width: $lg-size) {
+          font-size: 1rem;
+          margin-top: 1rem;
+          color: $title-text-color;
+          line-height: 1.5em;
+        }
+
+        @media (max-width: 1200px) {
+          margin-top: 3rem;
+        }
       }
 
       .homepagebody_logoaboutuslines {
@@ -360,7 +370,7 @@
         font-weight: 700;
         font-family: $primary-font-family;
         color: $title-text-color;
-        text-align: center;
+        text-align: start;
         justify-content: center;
         margin-top: 2rem;
       }
@@ -368,46 +378,50 @@
 
     .aboutus-card-main-container {
       display: flex;
-      max-height: 22rem;
+      height: 25rem;
       min-height: 20rem;
-      max-width: 25rem;
+      max-width: 26rem;
       justify-content: center;
       background: linear-gradient(to right, $gradient-background-start, $gradient-background-end);
       border-radius: 0.625rem;
-      padding: 40px 25px 25px 25px;
-      margin: 60px 40px 60px 40px;
+      padding: 26px 25px 25px 25px;
+      margin: 10px;
       text-align: center;
 
       @media (max-width: 1350px) {
-        height: 28rem;
-        max-width: 18rem;
-        padding: 30px 5px 25px 5px;
+        height: 21rem;
+        // max-width: 18rem;
+        padding: 38px 20px 25px 20px;
       }
 
       @media (max-width: 1050px) {
-        max-width: 18rem;
-        padding: 30px 5px 25px 5px;
+        // max-width: 18rem;
+        padding: 38px 20px 25px 20px;
       }
 
       @media (max-width: 986px) {
-        height: 28rem;
-        max-width: 18rem;
-        padding: 30px 5px 25px 5px;
+        // height: 21rem;
+        // max-width: 18rem;
+        padding: 27px 20px 25px 20px;
       }
 
       @media (max-width: 764px) {
-        margin-bottom: -10px;
+        padding: 25px 10px 25px 10px;
+        margin: 30px 0;
+        height: 22rem;
       }
 
       @media (max-width: 536px) {
-        padding: 40px 5px 25px 5px;
-        margin: 60px 0 60px 0;
+        padding: 25px 10px 25px 10px;
+        margin: 30px 0;
+        height: 22rem;
       }
     }
 
     .aboutus-card-main-container {
       @media (max-width: 1200px) {
         margin-bottom: 0;
+        max-width: 35rem;
       }
     }
 
@@ -444,16 +458,20 @@
 
       .aboutus-card-text {
         color: $dark-text-color;
-        line-height: 2;
+        font-size: 15px;
+        line-height: 24px;
+        padding-bottom: 10px;
+        // text-align: justify;
       }
 
       .aboutus-card-title {
+        font-size: 21px;
         font-weight: 700;
         display: flex;
         color: $dark-text-color;
-        line-height: 2;
+        line-height: 1.5;
         text-align: center;
-        margin-bottom: 10px;
+        margin-bottom: 20px;
         margin-top: 20px;
       }
     }
@@ -461,6 +479,12 @@
     .undplogocontainer {
       padding-top: 40px;
 
+      .gutter-row {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
       .align-to-end {
         @media (max-width: 767px) {
           display: flex;
@@ -480,19 +504,22 @@
       }
 
       .erbd {
-        width: 14.5rem;
+        width: 15.7rem;
+        // margin-top: 5px;
       }
 
       .undp {
         width: 4rem;
+        // margin-left: 20px;
       }
 
       .unfccc {
-        width: 7.5rem;
+        margin-top: 22px;
+        width: 6.5rem;
       }
 
       .ieta {
-        width: 14.5rem;
+        width: 14.8rem;
 
         @media (max-width: 876px) {
           width: 12rem;
@@ -508,7 +535,8 @@
       }
 
       .esa {
-        width: 14.5rem;
+        width: 15rem;
+        // margin-top: -5px;
 
         @media (max-width: 876px) {
           width: 11rem;
@@ -524,7 +552,8 @@
       }
 
       .wbank {
-        width: 7.5rem;
+        width: 9rem;
+        margin-top: -12px;
       }
     }
   }
@@ -539,7 +568,8 @@
 
   .homepage-image-content-container {
     background-color: $outside-background-color;
-    margin-top: 5px;
+    margin: 5px auto;
+    max-width: $max-pagewidth;
 
     @media (max-width: 767px) {
       padding-left: 0;
@@ -555,15 +585,16 @@
     }
 
     ul {
-      margin-top: 20px;
-      margin-bottom: 20px;
+      margin-top: 5px;
+      margin-bottom: 10px;
     }
 
     li {
-      line-height: 40px;
+      line-height: 25px;
+      margin-bottom: 10px;
 
       @media (max-width: 536px) {
-        line-height: 30px;
+        line-height: 20px;
       }
     }
 
@@ -572,6 +603,7 @@
       font-weight: 700;
       font-family: $primary-font-family;
       color: $title-text-color;
+      color: $title-color;
       text-align: left;
       justify-content: left;
       text-transform: uppercase;
@@ -579,8 +611,9 @@
       padding: 50px 50px 10px 0;
 
       @media (max-width: $lg-size) {
-        font-size: 2rem;
-        margin-top: 1rem;
+        font-size: 24px;
+        margin-top: 0rem;
+        padding-top: 15px;
         color: $title-text-color;
         line-height: 1.5em;
       }
@@ -602,6 +635,44 @@
       justify-content: left;
       margin: 20px 10px 20px 75px;
 
+      .homepage_accordian {
+        border-radius: 5px;
+        font-family: "Inter";
+        margin-bottom: 80px;
+
+        .homepage_collapsepanel {
+          border-radius: 5px !important;
+
+          .ant-collapse-header-text {
+            font-size: 18px;
+            font-weight: 700;
+            color: rgba(58, 53, 65, 0.8);
+          }
+
+          .collapsetext {
+            font-size: 16px;
+            padding: 0px 20px;
+            margin-bottom: 10px;
+          }
+        }
+
+        @media (max-width: $lg-size) {
+          .ant-collapse-header-text {
+            font-size: 16px;
+          }
+
+          .collapsetext {
+            font-size: 14px;
+
+            li{
+              strong{
+                margin-bottom: 5px;
+              }
+            }
+          }
+        }
+      }
+
       @media (max-width: $lg-size) {
         font-size: 0.8rem;
         margin-top: 1rem;
@@ -696,4 +767,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/web/src/Pages/Homepage/homepage.tsx b/web/src/Pages/Homepage/homepage.tsx
index 73cd50422..295182e52 100644
--- a/web/src/Pages/Homepage/homepage.tsx
+++ b/web/src/Pages/Homepage/homepage.tsx
@@ -1,11 +1,12 @@
-import { Button, Col, Row } from 'antd';
+import { Button, Col, Collapse, Row } from 'antd';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import i18next from 'i18next';
 import sliderLogo from '../../Assets/Images/mrvlogo.svg';
 import LayoutFooter from '../../Components/Footer/layout.footer';
 import './homepage.scss';
+import CollapsePanel from 'antd/lib/collapse/CollapsePanel';
 
 const Homepage = () => {
   const { t } = useTranslation(['common', 'homepage']);
@@ -50,7 +51,7 @@ const Homepage = () => {
                   </div>
                   <div>
                     <div style={{ display: 'flex' }}>
-                      <div className="title">{'TRANSPARENCY'}</div>
+                      <div className="title">{'NDC TRANSPARENCY'}</div>
                       <div className="title-sub">{'SYSTEM'}</div>
                     </div>
                     <div className="country-name">
@@ -312,6 +313,345 @@ const Homepage = () => {
           </div>
         </Col>
       </Row> */}
+
+      <Row gutter={[8, 8]}>
+        <Col md={24} lg={24} flex="auto">
+          <div className="homepage-content-containerwhite">
+            <div id="scrollhome" className="title">
+              {t('homepage:ourVisionTitle')}
+            </div>
+            <div className="homepagebody">
+              <div className="homepagebody_text">
+                {t('homepage:ourVisionContentStart')}
+                <strong> {t('homepage:ourVisionContentHighlight')} </strong>
+                {t('homepage:ourVisionContentEnd')}
+              </div>
+              <div className="homepagebody_text">{t('homepage:OurPlatformEnables')}</div>
+
+              <div className="aboutus_cards-container">
+                <Row gutter={[5, 5]} className="aboutus_card-row">
+                  <Col xxl={8} xl={8} md={24} className="aboutus_card-col">
+                    <div className="aboutus-card-main-container">
+                      <Col>
+                        <Row className="aboutus_card-row">
+                          <div className="aboutus-card-title">{t('homepage:governmentsTitle')}</div>
+                        </Row>
+                        <Row className="aboutus_card-row">
+                          <div className="aboutus-card-text">
+                            {t('homepage:governmentsBodyTxt1')}
+                          </div>
+                        </Row>
+                        <Row className="aboutus_card-row">
+                          <div className="aboutus-card-text">
+                            {t('homepage:governmentsBodyTxt2')}
+                          </div>
+                        </Row>
+                        <Row className="aboutus_card-row">
+                          <div className="aboutus-card-text">
+                            {t('homepage:governmentsBodyTxt3')}
+                          </div>
+                        </Row>
+                        <Row className="aboutus_card-row">
+                          <div className="aboutus-card-text">
+                            {t('homepage:governmentsBodyTxt4')}
+                          </div>
+                        </Row>
+                      </Col>
+                    </div>
+                  </Col>
+                  <Col xxl={8} xl={8} md={24} className="aboutus_card-col">
+                    <div className="aboutus-card-main-container">
+                      <Col>
+                        <Row className="aboutus_card-row">
+                          <div className="aboutus-card-title">
+                            {t('homepage:projectDevelopersTitle')}
+                          </div>
+                        </Row>
+                        <Row className="aboutus_card-row">
+                          <div className="aboutus-card-text">
+                            {t('homepage:projectDevelopersBodyTxt1')}
+                          </div>
+                        </Row>
+                        <Row className="aboutus_card-row">
+                          <div className="aboutus-card-text">
+                            {t('homepage:projectDevelopersBodyTxt2')}
+                          </div>
+                        </Row>
+                        <Row className="aboutus_card-row">
+                          <div className="aboutus-card-text">
+                            {t('homepage:projectDevelopersBodyTxt3')}
+                          </div>
+                        </Row>
+                      </Col>
+                    </div>
+                  </Col>
+                  <Col xxl={8} xl={8} md={24} className="aboutus_card-col">
+                    <div className="aboutus-card-main-container">
+                      <Col>
+                        <Row className="aboutus_card-row">
+                          <div className="aboutus-card-title">{t('homepage:certifiersTitle')}</div>
+                        </Row>
+                        <Row className="aboutus_card-row">
+                          <div className="aboutus-card-text">
+                            {t('homepage:certifiersBodyTxt1')}
+                          </div>
+                        </Row>
+                        <Row className="aboutus_card-row">
+                          <div className="aboutus-card-text">
+                            {t('homepage:certifiersBodyTxt2')}
+                          </div>
+                        </Row>
+                        <Row className="aboutus_card-row">
+                          <div className="aboutus-card-text">
+                            {t('homepage:certifiersBodyTxt3')}
+                          </div>
+                        </Row>
+                      </Col>
+                    </div>
+                  </Col>
+                  {/* <Col xxl={6} xl={6} md={12} className="aboutus_card-col">
+                    <div className="aboutus-card-main-container">
+                      <Col>
+                        <Row className="aboutus_card-row">
+                          <div>
+                            <CartCheck className="aboutusicon" color="#FFFF" size="60px" />
+                          </div>
+                        </Row>
+                        <Row className="aboutus_card-row">
+                          <div className="aboutus-card-title">{t('homepage:buyersTitle')}</div>
+                        </Row>
+                        <Row>
+                          <div className="aboutus-card-text">{t('homepage:buyersBody')}</div>
+                        </Row>
+                      </Col>
+                    </div>
+                  </Col> */}
+                </Row>
+              </div>
+              <div className="homepagebody_subtitle">{t('homepage:policyContextTitle')}</div>
+              <div className="homepagebody_text">{t('homepage:policyContextBody')}</div>
+              <div className="homepagebody_text">{t('homepage:policyContextBody2')}</div>
+              <div className="homepagebody_subtitle">{t('homepage:digitalPublicTitle')}</div>
+              <div className="homepagebody_text">
+                <Trans
+                  i18nKey="homepage:digitalPublicBody"
+                  components={{
+                    a0: (
+                      <a
+                        href="https://digitalpublicgoods.net/digital-public-goods/"
+                        target="_blank"
+                      />
+                    ),
+                    a1: (
+                      <a
+                        href="https://github.com/undp/national-climate-transparency"
+                        target="_blank"
+                      />
+                    ),
+                  }}
+                />
+              </div>
+              <div className="homepagebody_subtitle">{t('homepage:demoSiteTitle')}</div>
+              <div className="homepagebody_text">
+                <Trans
+                  i18nKey="homepage:demoSiteBody"
+                  components={{
+                    b: <strong />,
+                    ul: <ul className="homepagebody_text list" />,
+                    li: <li />,
+                    a: <a href="mailto:digital4planet@undp.org" target="_blank" />,
+                    a0: <a href="https://transparency-demo.carbreg.org/" target="_blank" />,
+                  }}
+                />
+              </div>
+              <div className="homepagebody_text">
+                <Trans
+                  i18nKey="homepage:demoSiteBody2"
+                  components={{
+                    a: (
+                      <a
+                        href="https://github.com/undp/national-climate-transparency"
+                        target="_blank"
+                      />
+                    ),
+                  }}
+                />
+              </div>
+            </div>
+            <div className="title">{t('homepage:HdiwTitle')}</div>
+            <div className="homepagebody">
+              <div className="homepagebody_text">{t('homepage:HdiwBody')}</div>
+              <ul className="homepagebody_text list">
+                <li>
+                  <strong>{t('homepage:feature1Title')}</strong>:{' '}
+                  {t('homepage:feature1Description')}
+                </li>
+                <li>
+                  <strong>{t('homepage:feature2Title')}</strong>:{' '}
+                  {t('homepage:feature2Description')}
+                </li>
+                <li>
+                  <strong>{t('homepage:feature3Title')}</strong>:{' '}
+                  {t('homepage:feature3Description')}
+                </li>
+                <li>
+                  <strong>{t('homepage:feature4Title')}</strong>:{' '}
+                  {t('homepage:feature4Description')}
+                </li>
+                <li>
+                  <strong>{t('homepage:feature5Title')}</strong>:{' '}
+                  {t('homepage:feature5Description')}
+                </li>
+              </ul>
+            </div>
+          </div>
+        </Col>
+      </Row>
+      <Row gutter={[8, 8]}>
+        <Col md={24} lg={24} flex="auto">
+          <div className="homepage-image-content-container">
+            <Row>
+              <Col className="eligicontent" flex={2} md={22} lg={23}>
+                <div className="title">{t('homepage:faqTitle')}</div>
+                <div className="homepagebody homepage_accordian_wrapper">
+                  <Collapse accordion defaultActiveKey={['1']} className="homepage_accordian">
+                    <CollapsePanel
+                      header={t('homepage:faqQ1')}
+                      key="1"
+                      className="homepage_collapsepanel"
+                    >
+                      <div className="collapsetext">{t('homepage:faqA1')}</div>
+                    </CollapsePanel>
+                    <CollapsePanel
+                      header={t('homepage:faqQ2')}
+                      key="2"
+                      className="homepage_collapsepanel"
+                    >
+                      <div className="collapsetext">
+                        <Trans
+                          i18nKey="homepage:faqA2"
+                          components={{
+                            ol: <ol />,
+                            li: <li />,
+                            b: <strong />,
+                          }}
+                        />
+                      </div>
+                    </CollapsePanel>
+                    <CollapsePanel
+                      header={t('homepage:faqQ3')}
+                      key="3"
+                      className="homepage_collapsepanel"
+                    >
+                      <div className="collapsetext">
+                        <Trans
+                          i18nKey="homepage:faqA3"
+                          components={{
+                            ul: <ul />,
+                            li: <li />,
+                            b: <strong />,
+                          }}
+                        />
+                      </div>
+                    </CollapsePanel>
+                    <CollapsePanel
+                      header={t('homepage:faqQ4')}
+                      key="4"
+                      className="homepage_collapsepanel"
+                    >
+                      <div className="collapsetext">
+                        <Trans
+                          i18nKey="homepage:faqA4"
+                          components={{
+                            ul: <ul />,
+                            li: <li />,
+                            b: <strong />,
+                          }}
+                        />
+                      </div>
+                    </CollapsePanel>
+                    <CollapsePanel
+                      header={t('homepage:faqQ5')}
+                      key="5"
+                      className="homepage_collapsepanel"
+                    >
+                      <div className="collapsetext">
+                        <Trans
+                          i18nKey="homepage:faqA5"
+                          components={{
+                            a: <a href="mailto:digital4planet@undp.org" target="_blank" />,
+                          }}
+                        />
+                      </div>
+                      <div className="collapsetext">{t('homepage:faqA5-2')}</div>
+                    </CollapsePanel>
+                    <CollapsePanel
+                      header={t('homepage:faqQ6')}
+                      key="6"
+                      className="homepage_collapsepanel"
+                    >
+                      <div className="collapsetext">
+                        <Trans
+                          i18nKey="homepage:faqA6"
+                          components={{
+                            ul: <ul />,
+                            li: <li />,
+                            b: <strong />,
+                          }}
+                        />
+                      </div>
+                      <div className="collapsetext">
+                        <Trans
+                          i18nKey="homepage:faqA6-2"
+                          components={{
+                            ul: <ul />,
+                            li: <li />,
+                            b: <strong />,
+                          }}
+                        />
+                      </div>
+                      <div className="collapsetext">
+                        <Trans
+                          i18nKey="homepage:faqA6-3"
+                          components={{
+                            b: <strong />,
+                          }}
+                        />
+                      </div>
+                    </CollapsePanel>
+                    <CollapsePanel
+                      header={t('homepage:faqQ7')}
+                      key="7"
+                      className="homepage_collapsepanel"
+                    >
+                      <div className="collapsetext">
+                        <Trans
+                          i18nKey="homepage:faqA7"
+                          components={{
+                            ul: <ul />,
+                            li: <li />,
+                            b: <strong />,
+                          }}
+                        />
+                      </div>
+                    </CollapsePanel>
+                  </Collapse>
+                </div>
+              </Col>
+              <Col flex={3} md={8} lg={8}>
+                {/* <ImgWithFallback
+                  className="forest-image"
+                  src={forestfall}
+                  fallbackSrc={forestfall}
+                  mediaType="image/webp"
+                  alt="forestry"
+                /> */}
+                {/* <img className="image" src={forest} alt="forest" /> */}
+              </Col>
+            </Row>
+          </div>
+        </Col>
+      </Row>
       <LayoutFooter />
     </div>
   );
diff --git a/web/src/locales/i18n/homepage/en.json b/web/src/locales/i18n/homepage/en.json
index 372b08afb..d126694c0 100644
--- a/web/src/locales/i18n/homepage/en.json
+++ b/web/src/locales/i18n/homepage/en.json
@@ -30,5 +30,64 @@
     "Help": "Help",
     "nationalNdc": "NATIONAL NDC",
     "transparency": "TRANSPARENCY",
-    "system": "SYSTEM"
+    "system": "SYSTEM",
+    "ourVisionTitle": "Our Vision",
+    "ourVisionContentStart": "UNDP has developed the",
+    "ourVisionContentHighlight": "open-source Digital Transparency System (DTS)",
+    "ourVisionContentEnd": "to help countries efficiently and securely compile and report information on climate change actions, progress, and support following the Paris Agreement’s Enhanced Transparency Framework (ETF). The DTS ensures transparency, quality, quick and easy access to national information, while facilitating coordination in data collection across governmental agencies. ",
+    "OurPlatformEnables": "Our platform enables:",
+    "governmentsTitle": "Streamlined national and ETF reporting",
+    "governmentsBodyTxt1": "Common system for use across all government departments",
+    "governmentsBodyTxt2": "View climate action progress and results from overview to detailed level",
+    "governmentsBodyTxt3": "Customizable national performance indicators",
+    "governmentsBodyTxt4": "Automatic reporting of essential ETF Common Tabular Formats ",
+    "projectDevelopersTitle": "Facilitate support needed for change",
+    "projectDevelopersBodyTxt1": "Gives an overview and details of financial, capacity building, and technical support ",
+    "projectDevelopersBodyTxt2": "Enables access to additional support by simplifying outreach to development partners ",
+    "projectDevelopersBodyTxt3": "Tracks progress and outcomes of past and current support",
+    "certifiersTitle": "Information Management, Coordination, and Efficiency",
+    "certifiersBodyTxt1": "Provides quick and easy access to information",
+    "certifiersBodyTxt2": "Enables government departments to enter sector-specific data directly, reducing the need for follow-up and manual information gathering",
+    "certifiersBodyTxt3": "Stores information securely for long-term access, ensuring it remains easily retrievable even when staff members change ",
+    "policyContextTitle": "Policy Context",
+    "policyContextBody": "The Paris Agreement, under the UNFCCC, aims to limit global warming to below 2°C, with efforts to keep it to 1.5°C by 2100. Article 13 establishes the Enhanced Transparency Framework (ETF) action and support that is meant to build mutual trust and confidence and to promote effective implementation of the Paris Agreement. Due to this nature, the ETF covers national information regarding mitigation, adaptation, and cross-cutting climate actions, plus the financial, technology, and capacity-building support needed and received for implementing climate actions.",
+    "policyContextBody2": "Due to the very large amount of national information in the context of the ETF, digital systems are essential for enabling countries to effectively and efficiently consolidate and report this information over time.",
+    "digitalPublicTitle": "A Digital Public Good ",
+    "digitalPublicBody": "In response to countries’ need for support to deploy similar reliable, interoperable digital systems, the UNDP has created the Digital Transparency System (DTS) as an open-source toolkit that follows the <a0>Digital Public Goods Standard</a0>. Countries can access the free source code and installation instructions from <a1>UNDP’s managed Github</a1> to customise DTS according to their national needs. This approach helps save time, reduce costs, and avoid duplicating effort and creating fragmented standards, applications, and tools, ultimately that may not work well with each other.",
+    "demoSiteTitle": "Demo Site",
+    "demoSiteBody": "This demonstration site maintained by UNDP showcases the core functionality of the <a0>Digital Transparency System (DTS)</a0> built on the source code. Governments and potential partners working with UNDP can:<ul><li>Request access to the demo site.</li><li>Request a live demonstration.</li><li>Customize and install as a sovereign system</li><li>Explore potential collaboration and support.</li></ul>For inquiries and to request a demo, please contact <b>UNDP Digital For Planet</b> at <a>digital4planet@undp.org</a>.",
+    "demoSiteBody2": "Additional technical details are available on <a>Github</a>.",
+    "HdiwTitle": "How does it work?",
+    "HdiwBody": "Every country has distinct climate change policies and planning, plus different processes and information governance structures for these. The Digital Transparency System (DTS) is customisable to allow for the distinct needs of the government while still reporting information following the guidance of the Enhanced Transparency Framework. The DTS demo site showcases how these elements come together in an easy-to-use software, allowing:",
+    "feature1Title": "Assigned users",
+    "feature1Description": "the DTS allows governments to assign users based on the entities they work for (e.g. government departments, education institutions, consultants…) and what information they should have access to (e.g. specific sectors…).",
+    "feature2Title": "Information structure",
+    "feature2Description": "The different modules in the DTS follow the information structure often used when countries plan and implement climate actions. This includes general information on broad climate actions and the more detailed information on sectoral programmes, projects, and activities that fall under each climate action.",
+    "feature3Title": "Validation",
+    "feature3Description": "To ensure quality control, governments can assign users to validate the information provided for each climate action, programme, project, activity and support before reporting.",
+    "feature4Title": "Standard reporting",
+    "feature4Description": "The information for climate action, programme, project, activity, and support is automatically consolidated and reported in the dashboard, using the Common Tabular Formats of the ETF.",
+    "feature5Title": "GHG Emissions Projections",
+    "feature5Description": "The DTS has a module to help governments project emissions in sectors and subsectors based on standard exponential modelling and/or by input modelling data from other software and models.",
+    "faqTitle": "Frequent Asked Questions: ",
+    "faqQ1": "What is the Digital Transparency System?",
+    "faqA1": "The primary purpose of the Digital Transparency System (DTS) is to allow government ministries, agencies, departments, and optional outside observers to easily track and report the progress and support (financing, technology transfer, and capacity build) of climate actions in your country over time.  With the DTS, important information can be saved by different users, stored long term, and accessed within seconds. Users can deep dive to find specific information when it is needed. Common Tabular Format tables under the Enhanced Transparency Framework are filled out automatically to expedite reporting to UNFCCC",
+    "faqQ2": "Is it easy to use the Digital Transparency System? ",
+    "faqA2": "The Digital Transparency System (DTS) is built with usability as a priority by using the standard information structure that governments and development partners use to define their: national climate actions, sectoral programmes, specific projects & activities, and financing of these.  The DTS allows users to easily input the 30+ types of information required for reporting under the Enhanced Transparency Framework, in addition to defining and tracking key sustainable development indicators defined by your government, AND by storing other important information so that others can access it within seconds.",
+    "faqQ3": "What value is gained from using the Digital Transparency System? ",
+    "faqA3": "The Digital Transparency System (DTS) helps governments optimise the management of information related to climate change actions and support across ministries, agencies, and departments.  It also allows for the option to easily share this information with parties outside government, such as UNFCCC, development partners, education institutions…etc.   The DTS can potentially save 1000s of person-hours of work due to important information being stored in a single digital location, having ease of access to this information, and by offering standard reporting of Enhanced Transparency Framework information.",
+    "faqQ4": "What types of customisations are possible with the Digital Transparency System?",
+    "faqA4": "The Digital Transparency System (DTS) is built as open-source software and, in principle, is highly customisable.  Where the basis open-source software allows for flexibility as well. Some of the most common areas of customisation and flexibility are: <ul><li><b>User Types:</b> The categories of users, roles, responsibilities and rights for each user type in the DTS.</li><li><b>Institutions, Partners and Sectors:</b> Governments can easily customise the list of national institutions and development partners applicable to the country.  In addition, to easily customise the sectors and sub-sectors that national actions address.</li><li><b>Verification of Information:</b> Defining which specific users have the right to verify the information input to the DTS.</li><li><b>Documentation:</b> Documentation (files) for individual climate actions, programmes, projects and activities can be uploaded into the DTS for later use and review.</li><li><b>Data Parameters:</b> Custom data parameters chosen by governments can be added.</li><li><b>Key Performance Indicators: </b> The Key Performance Indicators (KPIs) of climate actions, programmes, projects and activities are easily added in the DTS.  In addition, KPIs for sustainable development and ministerial planning can be added.</li><li><b>Reporting: </b> The DTS has a standard reporting module for many of the Common Tabular Formats (CTFs) of the Enhanced Transparency Framework; governments can choose to add more CTFs or customise reporting specifically for government needs.</li><li><b>API Integration: </b> Enabling automated data input/export through APIs to integrate with other local and national systems.</li><li><b>Data Hosting & Security: </b> Customizing data hosting locations, databases, and security protocols to meet the country’s unique requirements.</li></ul>",
+    "faqQ5": "Who can use the source code?",
+    "faqA5": "The Digital Transparency System source code is developed and maintained by UNDP and is licensed under the GNU Affero General Public License (AGPL-3.0), which permits free use, modification, and sharing of the software. We kindly ask users to inform us of your usage by contacting <a>digital4planet@undp.org</a> as this helps us track the tool’s impact and guide future improvements.",
+    "faqA5-2": "Under AGPL-3.0, any modifications to the code must be made publicly available by creating a new branch on GitHub. The software cannot be relicensed under more restrictive terms without adhering to the AGPL-3.0 guidelines.",
+    "faqQ6": "What resources are needed to deploy, use, and maintain the Digital Transparency System? ",
+    "faqA6": "<b>System hosting:</b> Countries are expected to host and maintain the software independently after installation. This means countries should plan on having human and financial resources to host the software and data. There are two main hosting options: <ul><li><b>Cloud Hosting:</b> Cloud hosting offers flexibility, reliability, and integrated security, typically with managed backup and maintenance features. These services generally require a recurring fee, often monthly or annual, which can vary based on usage, storage, and service level.</li><li><b>Local Hosting:</b> Countries can host the system on local servers to gain more direct control over data and security. Countries must manage all configuration, security, backup, and ongoing maintenance based on their local IT environment and security protocols.</li></ul>",
+    "faqA6-2": "<b>National Technical Experts:</b> Experience in implementing the Digital Transparency System (DTS) in countries shows that two types of national technical expertise are needed: <ul><li><b>National Transparency Expert:</b> An expert with deep knowledge of the climate change information and related national systems in the country (e.g. MRV, GHG Inventory, BURs/BTRs, sectoral information…).  This person would help find where to customise the DTS to meet national needs, assist with the information processes, conduct training and prepare related training materials for national stakeholders.</li><li><b>National IT Expert:</b> An expert who has good knowledge of open-source code and UX/UI, plus, experience with institutional IT systems in the country (especially environmental software).   This person would help customise the DTS to meet national needs, set up hosting, and conduct training.</li></ul>",
+    "faqA6-3": "<b>National Training:</b> Extensive training of selected national stakeholders is needed to implement the use of the DTS across government and selected partners.   This training typically includes workshops and online courses.",
+    
+    "faqQ7": "What support can UNDP provide?",
+    "faqA7": "The UNDP Digital for Planet team, through local UNDP country offices, can offer support in several areas (subject to discussion):<ul><li><b>Resources and Templates:</b> Access to template workplans, process flows, and other tools to assist in customising and configuring the DTS.</li><li><b>Training and International Expertise:</b> Support from experts in product management, IT, enhanced transparency, and policy to provide guidance, ensure quality assurance, and facilitate knowledge transfer.</li><li><b>Community of Practice:</b> Ongoing access to an international community of practice for support and collaboration of using climate change digital tools for enhanced transparency.</li></ul>",
+    "codeconduct": "Code of Conduct",
+    "help": "Help"
 }
diff --git a/web/src/locales/i18n/homepage/fr.json b/web/src/locales/i18n/homepage/fr.json
index e823005ed..c931ab882 100644
--- a/web/src/locales/i18n/homepage/fr.json
+++ b/web/src/locales/i18n/homepage/fr.json
@@ -26,5 +26,62 @@
   "Cookie": "Politique de Cookies",
   "codeconduct": "Code de Conduite",
   "terms": "Conditions d'Utilisation",
-  "privacy": "Politique de Confidentialité"
-}
\ No newline at end of file
+  "privacy": "Politique de Confidentialité",
+  "ourVisionTitle": "Notre Vision",
+  "ourVisionContentStart": "Le PNUD a développé le",
+  "ourVisionContentHighlight": "Système de Transparence Numérique (DTS) open-source",
+  "ourVisionContentEnd": "pour aider les pays à compiler et à rapporter efficacement et en toute sécurité des informations sur les actions climatiques, les progrès et le soutien conformément au Cadre de Transparence Renforcé (ETF) de l'Accord de Paris. Le DTS garantit la transparence, la qualité, un accès rapide et facile aux informations nationales, tout en facilitant la coordination de la collecte de données entre les agences gouvernementales.",
+  "OurPlatformEnables": "Notre plateforme permet :",
+  "governmentsTitle": "Rapports nationaux et ETF rationalisés",
+  "governmentsBodyTxt1": "Système commun utilisable par tous les départements gouvernementaux",
+  "governmentsBodyTxt2": "Voir les progrès et les résultats des actions climatiques du niveau global au niveau détaillé",
+  "governmentsBodyTxt3": "Indicateurs de performance nationale personnalisables",
+  "governmentsBodyTxt4": "Rapports automatiques des formats tabulaires communs essentiels de l'ETF",
+  "projectDevelopersTitle": "Faciliter le soutien nécessaire au changement",
+  "projectDevelopersBodyTxt1": "Donne une vue d'ensemble et des détails sur le soutien financier, le renforcement des capacités et le soutien technique",
+  "projectDevelopersBodyTxt2": "Permet d'accéder à un soutien supplémentaire en simplifiant le contact avec les partenaires de développement",
+  "projectDevelopersBodyTxt3": "Suit les progrès et les résultats des soutiens passés et actuels",
+  "certifiersTitle": "Gestion, coordination et efficacité de l'information",
+  "certifiersBodyTxt1": "Offre un accès rapide et facile aux informations",
+  "certifiersBodyTxt2": "Permet aux départements gouvernementaux d'entrer directement les données spécifiques aux secteurs, réduisant ainsi le besoin de suivi et de collecte manuelle d'informations",
+  "certifiersBodyTxt3": "Stocke les informations en toute sécurité pour un accès à long terme, garantissant qu'elles restent facilement récupérables même en cas de changement de personnel",
+  "policyContextTitle": "Contexte politique",
+  "policyContextBody": "L'Accord de Paris, dans le cadre de la CCNUCC, vise à limiter le réchauffement climatique en dessous de 2°C, avec des efforts pour le maintenir à 1,5°C d'ici 2100. L'article 13 établit le Cadre de Transparence Renforcé (ETF) pour les actions et le soutien, destiné à renforcer la confiance mutuelle et à promouvoir la mise en œuvre efficace de l'Accord de Paris. De par sa nature, l'ETF couvre les informations nationales concernant l'atténuation, l'adaptation et les actions climatiques transversales, ainsi que le soutien financier, technologique et de renforcement des capacités nécessaire et reçu pour mettre en œuvre les actions climatiques.",
+  "policyContextBody2": "En raison de la très grande quantité d'informations nationales dans le cadre de l'ETF, les systèmes numériques sont essentiels pour permettre aux pays de consolider et de rapporter efficacement et de manière efficiente ces informations au fil du temps.",
+  "digitalPublicTitle": "Un bien public numérique",
+  "digitalPublicBody": "En réponse au besoin des pays de déployer des systèmes numériques fiables et interopérables similaires, le PNUD a créé le Système de Transparence Numérique (DTS) comme un ensemble d'outils open-source qui respecte la <a0>Norme des Biens Publics Numériques</a0>. Les pays peuvent accéder au code source libre et aux instructions d'installation sur <a1>le GitHub géré par le PNUD</a1> pour personnaliser le DTS en fonction de leurs besoins nationaux. Cette approche permet de gagner du temps, de réduire les coûts et d'éviter la duplication d'efforts et la création de normes, d'applications et d'outils fragmentés qui pourraient ne pas fonctionner ensemble.",
+  "demoSiteTitle": "Site de démonstration",
+    "demoSiteBody": "Ce site de démonstration maintenu par le PNUD présente les fonctionnalités principales du <a0>Système de Transparence Numérique (DTS)</a0> basé sur le code source. Les gouvernements et partenaires potentiels travaillant avec le PNUD peuvent :<ul><li>Demander l'accès au site de démonstration.</li><li>Demander une démonstration en direct.</li><li>Personnaliser et installer en tant que système souverain</li><li>Explorer les possibilités de collaboration et de soutien.</li></ul>Pour toute demande d'information et de démonstration, veuillez contacter <b>PNUD Digital For Planet</b> à <a>digital4planet@undp.org</a>.",
+    "demoSiteBody2": "Des détails techniques supplémentaires sont disponibles sur <a>Github</a>.",
+    "HdiwTitle": "Comment ça marche ?",
+    "HdiwBody": "Chaque pays a des politiques et des plans distincts en matière de changement climatique, ainsi que des processus et des structures de gouvernance de l'information différents. Le Système de Transparence Numérique (DTS) est personnalisable pour répondre aux besoins spécifiques du gouvernement tout en respectant les exigences du Cadre de Transparence Renforcé. Le site de démonstration du DTS montre comment ces éléments s'intègrent dans un logiciel facile à utiliser, permettant :",
+    "feature1Title": "Utilisateurs assignés",
+    "feature1Description": "Le DTS permet aux gouvernements d'assigner des utilisateurs en fonction des entités pour lesquelles ils travaillent (par exemple, départements gouvernementaux, institutions éducatives, consultants...) et des informations auxquelles ils doivent avoir accès (par exemple, secteurs spécifiques...).",
+    "feature2Title": "Structure de l'information",
+    "feature2Description": "Les différents modules du DTS suivent la structure de l'information souvent utilisée lors de la planification et de la mise en œuvre des actions climatiques par les pays. Cela inclut des informations générales sur les actions climatiques globales et des informations plus détaillées sur les programmes, projets et activités sectoriels qui relèvent de chaque action climatique.",
+    "feature3Title": "Validation",
+    "feature3Description": "Pour assurer un contrôle de qualité, les gouvernements peuvent assigner des utilisateurs pour valider les informations fournies pour chaque action climatique, programme, projet, activité et soutien avant de les rapporter.",
+    "feature4Title": "Rapports standardisés",
+    "feature4Description": "Les informations sur les actions climatiques, les programmes, les projets, les activités et le soutien sont automatiquement consolidées et rapportées sur le tableau de bord, en utilisant les Formats Tabulaires Communs de l'ETF.",
+    "feature5Title": "Projections des émissions de GES",
+    "feature5Description": "Le DTS dispose d'un module permettant aux gouvernements de projeter les émissions dans les secteurs et sous-secteurs sur la base de modèles exponentiels standards et/ou en utilisant des données de modélisation provenant d'autres logiciels et modèles.",
+    "faqTitle": "Questions fréquemment posées :",
+    "faqQ1": "Qu'est-ce que le Système de Transparence Numérique ?",
+    "faqA1": "L'objectif principal du Système de Transparence Numérique (DTS) est de permettre aux ministères, agences, départements du gouvernement et, de manière optionnelle, à des observateurs externes de suivre et de rapporter facilement les progrès et le soutien (financement, transfert de technologie et renforcement des capacités) des actions climatiques dans votre pays au fil du temps. Avec le DTS, des informations importantes peuvent être sauvegardées par différents utilisateurs, stockées à long terme et accessibles en quelques secondes. Les utilisateurs peuvent approfondir leur recherche pour trouver des informations spécifiques lorsque cela est nécessaire. Les tableaux de Format Tabulaire Commun du Cadre de Transparence Renforcé sont automatiquement remplis pour accélérer les rapports à la CCNUCC.",
+    "faqQ2": "Le Système de Transparence Numérique est-il facile à utiliser ?",
+    "faqA2": "Le Système de Transparence Numérique (DTS) est conçu pour être facile à utiliser, en utilisant la structure d'information standard que les gouvernements et les partenaires de développement utilisent pour définir leurs : actions climatiques nationales, programmes sectoriels, projets et activités spécifiques, et leur financement. Le DTS permet aux utilisateurs de saisir facilement les 30+ types d'informations requis pour le rapport sous le Cadre de Transparence Renforcé, en plus de définir et de suivre les indicateurs clés de développement durable définis par votre gouvernement, ET en stockant d'autres informations importantes pour que d'autres puissent y accéder rapidement.",
+    "faqQ3": "Quelle valeur apporte le Système de Transparence Numérique ?",
+    "faqA3": "Le Système de Transparence Numérique (DTS) aide les gouvernements à optimiser la gestion de l'information relative aux actions climatiques et au soutien dans l'ensemble des ministères, agences et départements. Il permet également de partager facilement ces informations avec des parties extérieures au gouvernement, telles que la CCNUCC, des partenaires de développement, des institutions éducatives, etc. Le DTS peut potentiellement économiser des milliers d'heures de travail grâce à l'archivage d'informations importantes dans un seul emplacement numérique, à l'accès facile à ces informations et à la fourniture de rapports standardisés selon le Cadre de Transparence Renforcé.",
+    "faqQ4": "Quels types de personnalisations sont possibles avec le Système de Transparence Numérique ?",
+    "faqA4": "Le Système de Transparence Numérique (DTS) est conçu comme un logiciel open-source et, en principe, est hautement personnalisable. La base du logiciel open-source permet également une grande flexibilité. Les domaines de personnalisation et de flexibilité les plus courants incluent : <ul><li><b>Types d'utilisateurs :</b> Les catégories d'utilisateurs, les rôles, les responsabilités et les droits pour chaque type d'utilisateur dans le DTS.</li><li><b>Institutions, partenaires et secteurs :</b> Les gouvernements peuvent personnaliser facilement la liste des institutions nationales et des partenaires de développement applicables au pays. De même, il est facile de personnaliser les secteurs et sous-secteurs abordés par les actions nationales.</li><li><b>Vérification des informations :</b> Définir quels utilisateurs spécifiques ont le droit de vérifier les informations saisies dans le DTS.</li><li><b>Documentation :</b> La documentation (fichiers) pour les actions climatiques individuelles, les programmes, projets et activités peut être téléchargée dans le DTS pour une utilisation et un examen ultérieurs.</li><li><b>Paramètres de données :</b> Les paramètres de données personnalisés choisis par les gouvernements peuvent être ajoutés.</li><li><b>Indicateurs de performance clés :</b> Les indicateurs de performance clés (KPI) des actions climatiques, des programmes, des projets et des activités peuvent être facilement ajoutés dans le DTS. De plus, les KPI pour le développement durable et la planification ministérielle peuvent être ajoutés.</li><li><b>Rapports :</b> Le DTS dispose d'un module de rapport standard pour de nombreux Formats Tabulaires Communs (CTF) du Cadre de Transparence Renforcé ; les gouvernements peuvent choisir d'ajouter plus de CTF ou de personnaliser les rapports spécifiquement pour leurs besoins gouvernementaux.</li><li><b>Intégration API :</b> Permet l'entrée/sortie automatisée des données via des API pour intégrer d'autres systèmes locaux et nationaux.</li><li><b>Hébergement des données & sécurité :</b> Personnalisation des lieux d'hébergement des données, des bases de données et des protocoles de sécurité pour répondre aux besoins uniques du pays.</li></ul>",
+    "faqQ5": "Qui peut utiliser le code source ?",
+    "faqA5": "Le code source du Système de Transparence Numérique est développé et maintenu par le PNUD et est licencié sous la GNU Affero General Public License (AGPL-3.0), qui permet l'utilisation, la modification et le partage gratuits du logiciel. Nous demandons gentiment aux utilisateurs de nous informer de leur utilisation en contactant <a>digital4planet@undp.org</a> afin que nous puissions suivre l'impact de l'outil et orienter les futures améliorations.",
+    "faqA5-2": "Conformément à l'AGPL-3.0, toutes les modifications du code doivent être rendues publiques en créant une nouvelle branche sur GitHub. Le logiciel ne peut pas être re-licencié selon des termes plus restrictifs sans respecter les directives de l'AGPL-3.0.",
+    "faqQ6": "Quelles ressources sont nécessaires pour déployer, utiliser et maintenir le Système de Transparence Numérique ?",
+    "faqA6": "<b>Hébergement du système :</b> Les pays doivent prévoir l'hébergement et la maintenance du logiciel de manière autonome après l'installation. Cela signifie que les pays doivent planifier d'avoir des ressources humaines et financières pour héberger le logiciel et les données. Il existe deux principales options d'hébergement : <ul><li><b>Hébergement Cloud :</b> L'hébergement cloud offre flexibilité, fiabilité et sécurité intégrée, généralement avec des fonctions de sauvegarde et de maintenance gérées. Ces services nécessitent généralement des frais récurrents, souvent mensuels ou annuels, qui peuvent varier en fonction de l'utilisation, du stockage et du niveau de service.</li><li><b>Hébergement local :</b> Les pays peuvent héberger le système sur des serveurs locaux pour avoir un contrôle direct sur les données et la sécurité. Les pays doivent gérer toutes les configurations, la sécurité, les sauvegardes et la maintenance continue en fonction de leur environnement informatique local et des protocoles de sécurité.</li></ul>",
+    "faqA6-2": "<b>Experts techniques nationaux :</b> L'expérience de la mise en œuvre du Système de Transparence Numérique (DTS) dans les pays montre que deux types d'expertise technique nationale sont nécessaires : <ul><li><b>Expert national en transparence :</b> Un expert ayant une connaissance approfondie des informations sur le changement climatique et des systèmes nationaux connexes dans le pays (par exemple, MRV, Inventaire des GES, BURs/BTRs, informations sectorielles...). Cette personne aiderait à trouver où personnaliser le DTS pour répondre aux besoins nationaux, à aider aux processus d'information, à organiser des formations et à préparer du matériel de formation lié aux parties prenantes nationales.</li><li><b>Expert informatique national :</b> Un expert possédant une bonne connaissance du code open-source et de l'UX/UI, ainsi qu'une expérience avec les systèmes informatiques institutionnels du pays (en particulier les logiciels environnementaux). Cette personne aiderait à personnaliser le DTS pour répondre aux besoins nationaux, à configurer l'hébergement et à organiser des formations.</li></ul>",
+    "faqA6-3": "<b>Formation nationale :</b> Une formation approfondie des parties prenantes nationales sélectionnées est nécessaire pour mettre en œuvre l'utilisation du DTS dans l'ensemble du gouvernement et des partenaires sélectionnés. Cette formation comprend généralement des ateliers et des cours en ligne.",
+    "faqQ7": "Quel soutien le PNUD peut-il fournir ?",
+    "faqA7": "L'équipe Digital for Planet du PNUD, par l'intermédiaire des bureaux locaux du PNUD, peut offrir un soutien dans plusieurs domaines (sous réserve de discussion) :<ul><li><b>Ressources et Modèles :</b> Accès à des plans de travail modèles, des flux de processus et d'autres outils pour aider à la personnalisation et à la configuration du DTS.</li><li><b>Formation et Expertise Internationale :</b> Soutien d'experts en gestion de produit, informatique, transparence renforcée et politique pour fournir des orientations, garantir l'assurance qualité et faciliter le transfert de connaissances.</li><li><b>Communauté de Pratique :</b> Accès continu à une communauté internationale de pratique pour un soutien et une collaboration à l'utilisation des outils numériques pour le changement climatique, dans le cadre de la transparence renforcée.</li></ul>",
+    "help": "Aide"
+}
diff --git a/web/src/locales/i18n/homepage/sin.json b/web/src/locales/i18n/homepage/sin.json
index 2e4a57543..a5f06cad8 100644
--- a/web/src/locales/i18n/homepage/sin.json
+++ b/web/src/locales/i18n/homepage/sin.json
@@ -1,27 +1,84 @@
 {
-    "aboutustitle": "සත්‍යාපනයට අප සඳහා සරල ප්‍රදේශයක්.",
-    "aboutusline1": "අපේ දැක්ම තොරතුරු වෙන් බෝධි ප්‍රාදේශීය කාර්ය ගොඩනැගිල්ලේ.",
-    "aboutusline2": "ඔබට අපේ ජාතික බාරගත හැකි වෙළඳ ස්වභාවිකයක්.",
-    "aboutusline3": "ජාතික බාරගත හැකි ස්වභාගී කාලයකට වැඩිදුරටත් සුදුසු සමානයක්.",
-    "Keyfeatures": "ප්‍රධාන සීමාවන්",
-    "eligibilitybody": "ජාතික කාබනික රෙජිස්ටරි ජලය ජාතික පෙරදසුන් පෙළ පරිස්ථිතවයින් සිදු කළ යුතු අනුවාදයක් පිළිබඳ ස්ථාපන විශ්වාස.",
-    "lorem": "දෙමහරුවාසි වෙබ් අඩවිය",
-    "analytic": "සත්‍යාපනය සහ පලාපල්කරුවන්",
-    "analyticbody": "අපේ ජාතික ජලය මතුගමනට සහ මත්කුඩු ගනුදෙනුම් වැදගත් සත්‍යාපනය සහ පලාපල්කරුවන් ලබා ගැනීම, සෑම ගනුදෙනුමක් සුදුසු ලබා දෙනු ලබනු හැකි අතර ඔබට ක්රියාත්මක තහවුරු ලබා දුනුයි.",
-    "carboncal": "සම්පත් පිහිටුම",
-    "carboncalbody": "අපගේ සොයා ගැනීම් කළ හැකි ප්‍රභාණාධිපතියක් සමග, ඔබ සම්පත් ප්‍රභාණ කිරීම, විස්තර සම්පූර්ණ කිරීම, සහාය සහාය කිරීම් සපයා දියුණු හැකිය, දිනුම්පත් ගාස්තු ප්‍රවාහන පිටපත් ස්ථාපනයේ සුළු විය.",
-    "serialgen": "සම්පාදන මානවවාදය",
-    "serialgenbody": "අපේ ජාතික ජලය ගැනුණු මානවවාදය නොපෙන්වෙනු ඇත සහාය අර්ථය වෙනුවට සමානය කිරීම සහ ස්වභාවික අධ්‍යන ප්‍රතිපත්තියන් සදහා නිෂ්පාදනය කරගත හැකිය, ඔබට ඔබේ රටේ සම්මුඛ තත්වයට සහ ස්තාවයට සම්මුඛ ත",
-   "reslist2": "ලිපි 6.2 ආරම්භ වාර්තා ආකෘතිය.",
-    "reslist3": "සාමාන්‍ය තොරතුරු සැකසුම.",
-    "footertext1": "ජාතික ජලය රෙජිස්ටරි: මෙය දෙමළද. රටවල් එක් ටැග්ලයට එක්වීමට උදව් කළ හැකි වරදක් වෙනස් කරන්න.",
-    "antarctic": "රටකX",
-    "Cookie": "කුකී පොලීසිය",
-    "codeconduct": "සන්නිවේදන කේතය",
-    "terms": "භාවිත අන්තර්ගතය",
-    "privacy": "පෞද්ගලිකත්වය ප්‍රතිපාදනය",
-    "Help": "උදව්",
-    "nationalNdc": "ජාතික ජීවීෂන් කලාපය",
-    "transparency": "සත්‍යාපනය",
-    "system": "පද්ධතිය"
+  "aboutustitle": "සත්‍යාපනයට අප සඳහා සරල ප්‍රදේශයක්.",
+  "aboutusline1": "අපේ දැක්ම තොරතුරු වෙන් බෝධි ප්‍රාදේශීය කාර්ය ගොඩනැගිල්ලේ.",
+  "aboutusline2": "ඔබට අපේ ජාතික බාරගත හැකි වෙළඳ ස්වභාවිකයක්.",
+  "aboutusline3": "ජාතික බාරගත හැකි ස්වභාගී කාලයකට වැඩිදුරටත් සුදුසු සමානයක්.",
+  "Keyfeatures": "ප්‍රධාන සීමාවන්",
+  "eligibilitybody": "ජාතික කාබනික රෙජිස්ටරි ජලය ජාතික පෙරදසුන් පෙළ පරිස්ථිතවයින් සිදු කළ යුතු අනුවාදයක් පිළිබඳ ස්ථාපන විශ්වාස.",
+  "lorem": "දෙමහරුවාසි වෙබ් අඩවිය",
+  "analytic": "සත්‍යාපනය සහ පලාපල්කරුවන්",
+  "analyticbody": "අපේ ජාතික ජලය මතුගමනට සහ මත්කුඩු ගනුදෙනුම් වැදගත් සත්‍යාපනය සහ පලාපල්කරුවන් ලබා ගැනීම, සෑම ගනුදෙනුමක් සුදුසු ලබා දෙනු ලබනු හැකි අතර ඔබට ක්රියාත්මක තහවුරු ලබා දුනුයි.",
+  "carboncal": "සම්පත් පිහිටුම",
+  "carboncalbody": "අපගේ සොයා ගැනීම් කළ හැකි ප්‍රභාණාධිපතියක් සමග, ඔබ සම්පත් ප්‍රභාණ කිරීම, විස්තර සම්පූර්ණ කිරීම, සහාය සහාය කිරීම් සපයා දියුණු හැකිය, දිනුම්පත් ගාස්තු ප්‍රවාහන පිටපත් ස්ථාපනයේ සුළු විය.",
+  "serialgen": "සම්පාදන මානවවාදය",
+  "serialgenbody": "අපේ ජාතික ජලය ගැනුණු මානවවාදය නොපෙන්වෙනු ඇත සහාය අර්ථය වෙනුවට සමානය කිරීම සහ ස්වභාවික අධ්‍යන ප්‍රතිපත්තියන් සදහා නිෂ්පාදනය කරගත හැකිය, ඔබට ඔබේ රටේ සම්මුඛ තත්වයට සහ ස්තාවයට සම්මුඛ ත",
+  "reslist2": "ලිපි 6.2 ආරම්භ වාර්තා ආකෘතිය.",
+  "reslist3": "සාමාන්‍ය තොරතුරු සැකසුම.",
+  "footertext1": "ජාතික ජලය රෙජිස්ටරි: මෙය දෙමළද. රටවල් එක් ටැග්ලයට එක්වීමට උදව් කළ හැකි වරදක් වෙනස් කරන්න.",
+  "antarctic": "රටකX",
+  "Cookie": "කුකී පොලීසිය",
+  "codeconduct": "සන්නිවේදන කේතය",
+  "terms": "භාවිත අන්තර්ගතය",
+  "privacy": "පෞද්ගලිකත්වය ප්‍රතිපාදනය",
+  "Help": "උදව්",
+  "nationalNdc": "ජාතික ජීවීෂන් කලාපය",
+  "transparency": "සත්‍යාපනය",
+  "system": "පද්ධතිය",
+  "ourVisionTitle": "අපේ දැක්ම",
+  "ourVisionContentStart": "UNDP විසින් සංවර්ධනය කර ඇත",
+  "ourVisionContentHighlight": "විවෘත මූලාශ්‍ර ඩිජිටල් විවෘත පද්ධතිය (DTS)",
+  "ourVisionContentEnd": "රටවල් සඳහා කාලගුණික වෙනස්කම්, ප්‍රගතිය සහ සහාය පිළිබඳ තොරතුරු සකස් කිරීමේ, විශ්වාසනීයව වාර්තා කිරීමේ, සහ ආරක්ෂාකාරීව කාලගුණික කටයුතු සඳහා Paris ගිවිසුමේ වැඩි දියුණු විවෘත පද්ධති කර්ම වේදිකාවට අනුගතව ප්‍රවේශමෙන් සකස් කිරීම සහ විද්‍යාත්මකම ලබා දීමේ හැකියාව සපයයි. DTS යුක්තිය, ගුණාත්මකභාවය, ජාතික තොරතුරු වලට ඉක්මන් සහ පහසු ප්‍රවේශය සහ රජයේ ආයතන අතර දත්ත සංග්‍රහය සඳහා සමනවීභාවය ඉදිරිපත් කිරීම සලසයි.",
+  "OurPlatformEnables": "අපගේ වේදිකාව සපයයි:",
+  "governmentsTitle": "ජාතික සහ ETF වාර්තා streamline කිරීම",
+  "governmentsBodyTxt1": "සියලුම රාජ්‍ය දෙපාර්තමේන්තු මඟින් භාවිතා කළ හැකි පොදු පද්ධතිය",
+  "governmentsBodyTxt2": "කාලගුණ කටයුතු සාර්ථක වර්ධන සහ ප්‍රතිඵල එකතු කළ හැකි ආකාරයෙන් බලන්න",
+  "governmentsBodyTxt3": "අභිරුචි කළ හැකි ජාතික කාර්ය සාධනා දර්ශක",
+  "governmentsBodyTxt4": "අත්‍යවශ්‍ය ETF පොදු විෂය යුතුකමන් සවිස්තර වාර්තා කිරීම",
+  "projectDevelopersTitle": "අවශ්‍ය සහාය පහසු කිරීම",
+  "projectDevelopersBodyTxt1": "මුල්‍ය, කාර්මික සහාය සහ ඵලදායීකරණය සඳහා සාරාංශය සහ විස්තර සපයයි",
+  "projectDevelopersBodyTxt2": "සහයෝගිතා සහ අමතර සහාය සඳහා සංවර්ධන පක්ෂවලට පහසුවෙන් ප්‍රවේශය ලබා දේ",
+  "projectDevelopersBodyTxt3": "පැරණි සහ වර්තමාන සහාය, වර්ධනය සහ ප්‍රතිඵල සලකුණු කිරීම",
+  "certifiersTitle": "තොරතුරු කළමනාකරණය, සම්මතිය සහ කාර්යක්ෂමතාව",
+  "certifiersBodyTxt1": "තොරතුරු ඉක්මනින් සහ පහසුවෙන් ලබා ගත හැකි වේ",
+  "certifiersBodyTxt2": "රජයේ අංශ සඳහා, විශේෂ අංශ තොරතුරු හමුවට නිවැරදිව ඇතුළත් කිරීමට හැක",
+  "certifiersBodyTxt3": "තොරතුරු ආරක්ෂා කරමින් දිගු කාලයක් සඳහා ලබා ගැනීමට පහසු කිරීම, සේවකයින් වෙනස් වූ විටවත්",
+  "policyContextTitle": "ප්‍රතිපත්ති පසුබැසීම",
+  "policyContextBody": "පරිසර අනුමැතිය, UNFCCC යටතේ, 2°C ට පහළ වෙමින් ජාත්‍යන්තර උණුසුම් බව පාලනය කිරීමේ අරමුණ සහ 2100 වන විට 1.5°C දක්වා පවත්වන කටයුතු සම්බන්ධ වූ ප්‍රතිපත්ති පසුබැසීමක්. ETF, කාර්ය සාධනයක් සහ සහාය සමග ගුණාත්මක පරික්ෂාකරණය සහ විශ්වාසය වැඩිදියුණු කිරීමට.",
+  "policyContextBody2": "ETF මගින්, ජාතික තොරතුරු ප්‍රමාණාත්මක නිවැරදිම වාර්තා කරනු ඇත.",
+  "digitalPublicTitle": "ඩිජිටල් ජාතික සේවාවක්",
+  "digitalPublicBody": "රාජ්‍ය නවීනතාවට, <a0>ඩිජිටල් ජාතික මාර්ගෝපදේශය</a0> ලෙස UNDP නිර්මාණය කළ DTS එකක්, <a1>UNDP’s Github</a1> මඟින් ජාතික අවශ්‍යතා පරිදි සිදු කළ හැක.",
+  "demoSiteTitle": "ප්‍රදර්ශන අඩවිය",
+  "demoSiteBody": "UNDP විසින් පවත්වාගෙන යන මෙම ප්‍රදර්ශන අඩවිය <a0>ඩිජිටල් විවෘත පද්ධතිය (DTS)</a0> හි මූලික ක්‍රියාකාරීත්වය පෙන්වයි, මූලාශ්‍ර කේතය මත ගොඩනගා ඇත. UNDP සමඟ කටයුතු කරන රජයන් සහ හැකියාකරුහු පහත අන්තර්ක්‍රියාවන් සිදුකළ හැක:<ul><li>ප්‍රදර්ශන අඩවියට ප්‍රවේශය ඉල්ලා සිටීම.</li><li>සජීවී දර්ශනයක් ඉල්ලා සිටීම.</li><li>අභීජීව පද්ධතියක් ලෙස අභිරුචි කිරීම සහ ස්ථාපනය කිරීම.</li><li>සහයෝගය සහ සහාය සඳහා අවස්ථා විමර්ශනය කිරීම.</li></ul>අපගේ විමසීම් සඳහා සහ ප්‍රදර්ශනයක් ඉල්ලා සිටීමට <b>UNDP Digital For Planet</b> හී <a>digital4planet@undp.org</a> අමතන්න.",
+  "demoSiteBody2": "අමතර තාක්ෂණික විස්තර <a>Github</a> මඟින් ලබා ගත හැක.",
+  "HdiwTitle": "කෙසේ ක්‍රියාත්මක වේ?",
+  "HdiwBody": "සෑම රටකටම වෙනස් කාලගුණික ප්‍රතිපත්ති සහ සැලසුම්, මෙන්ම තොරතුරු කළමනාකරණ ආකාරවල විවිධත්වයක් ඇත. ඩිජිටල් විවෘත පද්ධතිය (DTS) රජයේ වියමනට අනුව නිවැරදිව අභිරුචිකරණය කළ හැකි අතර, වැඩිදියුණු කළ විවෘත පද්ධතියේ උපදෙස් අනුව තොරතුරු වාර්තා කිරීමට හැක. DTS ප්‍රදර්ශන අඩවිය මෙම මූලිකාංග පහසු පරිසරයක් තුළ එකට එක්ව ක්‍රියාකාරී කරවන්නේ කෙසේදැයි පෙන්වයි.",
+  "feature1Title": "පවරා ඇති පරිශීලකයින්",
+  "feature1Description": "DTS රජයන්ට පරිශීලකයින් පවරා හෝ නියම කළ හැකි අතර, එය ඔවුන් සේවය කරන ආයතන මත (උදාහරණයක් ලෙස, රාජ්‍ය දෙපාර්තමේන්තු, අධ්‍යාපන ආයතන, උපදේශකයෝ...) සහ ඔවුන්ට ප්‍රවේශය ලබා දිය යුතු තොරතුරු මත (උදාහරණයක් ලෙස, විශේෂිත අංශ...).",
+  "feature2Title": "තොරතුරු ව්‍යුහය",
+  "feature2Description": "DTS හි විවිධ මොඩියුල, රටවල් කාලගුණික කටයුතු සැලසුම් කිරීමේ සහ ක්‍රියාත්මක කිරීමේදී භාවිතා කරන තොරතුරු ව්‍යුහය පිළිපදිමින් නිර්මාණය කර ඇත. මෙය පුළුල් කාලගුණික කටයුතු පිළිබඳ සාමාන්‍ය තොරතුරු සහ සෑම කාලගුණික කටයුතුකටම අයත් අංශානුයෝජිත වැඩසටහන්, ව්‍යාපෘති, සහ ක්‍රියාකාරකම් පිළිබඳ විස්තර සහිත තොරතුරු ඇතුළත් කරයි.",
+  "feature3Title": "මූල්‍ය පරීක්ෂා",
+  "feature3Description": "තත්ත්ව පාලනය සහතික කිරීම සඳහා, රජයන්ට සෑම කාලගුණික කටයුත්තක්, වැඩසටහනක්, ව්‍යාපෘතියක්, ක්‍රියාකාරකමක්, සහ සහාය සඳහා ලබා දෙන තොරතුරු වාර්තා කිරීමට පෙර පරිශීලකයින් පවරා හෝ පරීක්ෂාකළ හැක.",
+  "feature4Title": "සාමාන්‍ය වාර්තාකරණය",
+  "feature4Description": "කාලගුණික කටයුතු, වැඩසටහන්, ව්‍යාපෘති, ක්‍රියාකාරකම්, සහ සහාය සඳහා අවශ්‍ය තොරතුරු ETF හි පොදු විෂය වගුවන් භාවිතා කරමින් ස්වයංක්‍රීයව එක් කිරීම් සහිතව වාර්තා වේ.",
+  "feature5Title": "GHG වායු උත්සර්ජන අනාවැකිය",
+  "feature5Description": "DTS හී රටවල් සඳහා සංග්‍රාමය අංශ සහ උප අංශ මත මට්ටම් පිළිබඳ විවිධ මාදිලියෙන් උත්සර්ජන අනාවැකිය සකස් කිරීමට විශේෂිත මොඩියුලක් ඇත, මූලාශ්‍ර තොරතුරු නිර්මාණය හෝ වෙනත් මෘදුකාංග වලින් දත්ත ඇතුළත් කිරීම හෝ.",
+  "faqTitle": "නිතර අසන ප්‍රශ්න:",
+  "faqQ1": "ඩිජිටල් විවෘත පද්ධතිය (DTS) මොනවාද?",
+  "faqA1": "ඩිජිටල් විවෘත පද්ධතිය (DTS) හි ප්‍රධාන අරමුණ වේ රජයේ අමාත්‍යාංශ, ආයතන, දෙපාර්තමේන්තු, සහ අමතර නිරීක්ෂකයින්ට ඔබේ රටේ කාලගුණ කටයුතු සම්බන්ධව සිදු කරන ප්‍රගතිය සහ සහාය (මුල්‍ය, තාක්ෂණික මාරුව, සහ සම්භාවනාවන්) පහසුවෙන් පසු විමසන, සටහන් කරන, සහ වාර්තා කරන හැකියාව ලබා දීම. DTS මගින්, විවිධ පරිශීලකයින්ට වැදගත් තොරතුරු සුරැකීම, දිගු කාලයක් සඳහා ගබඩා කිරීම, සහ විනාඩි කිහිපයකින් ප්‍රවේශය ලබා දීමේ හැකියාව සපයයි. පරිශීලකයින්ට අවශ්‍ය වූ විට විශේෂිත තොරතුරු සොයා බලන්න පුළුවන්. වැඩි දියුණු කළ විවෘත පද්ධතිය යටතේ පොදු විෂය වගුවා උපරිම වේගයෙන් UNFCCC වෙත වාර්තා කිරීම සඳහා ස්වයංක්‍රීයව පිරවීමට උපකාරී වේ.",
+  "faqQ2": "ඩිජිටල් විවෘත පද්ධතිය (DTS) භාවිතා කර පහසුද?",
+  "faqA2": "ඩිජිටල් විවෘත පද්ධතිය (DTS) භාවිතා කරන ලද විශේෂිත තොරතුරු ව්‍යුහය මඟින් රජයන් සහ සංවර්ධන හවුල්කරුවන් ජාතික කාලගුණ කටයුතු, අංශානුයෝජිත වැඩසටහන්, විශේෂිත ව්‍යාපෘති සහ ක්‍රියාකාරකම්, සහ ඒවායේ මුල්‍ය අභිරුචි කිරීමට අවශ්‍ය කළ විශේෂිත භාවිතය සහිතව ඉහළ සවිස්තරකරණයක් ලබා දේ. DTS මගින්, විශේෂිත වාර්තා සඳහා අවශ්‍ය තොරතුරු වර්ග 30+ පහසුවෙන් ඇතුළත් කර, ප්‍රමුඛම විධිමත් සංවර්ධන දර්ශක මැනීමේ හැකියාවද ලබා දේ.",
+  "faqQ3": "ඩිජිටල් විවෘත පද්ධතිය (DTS) භාවිතා කිරීමෙන් ලැබෙන වටිනාකම මොනවාද?",
+  "faqA3": "ඩිජිටල් විවෘත පද්ධතිය (DTS) රජයන්ට කාලගුණික කටයුතු සහ සහාය පිළිබඳ තොරතුරු කළමනාකරණය කිරීමට උපකාරී වේ. එය රජය පිටත පාර්ශවයන්, UNFCCC, සංවර්ධන හවුල්කරුවන්, අධ්‍යාපන ආයතන වැනි පාර්ශවයන් සමඟ මෙම තොරතුරු පහසුවෙන් බෙදා ගැනීමේ හැකියාව ද සපයයි. DTS එකම තොරතුරු ස්ථානයක් තුළ විශේෂිත තොරතුරු ගබඩා කිරීමේ, ඒවාට පහසුවෙන් ප්‍රවේශය ලබා ගැනීමේ, සහ විවිධ වාර්තාකරණය උපකාරය වන ලෙස සකස් කරයි.",
+  "faqQ4": "ඩිජිටල් විවෘත පද්ධතිය (DTS) සමඟ කළ හැකි අභිරුචිකරණයන් මොනවාද?",
+  "faqA4": "ඩිජිටල් විවෘත පද්ධතිය (DTS) විවෘත මූලාශ්‍ර මෘදුකාංගයක් ලෙස නිර්මාණය කර ඇති අතර, නිර්මාණය කිරීමේ සවිස්තරකරණය සහ විවිධකරණය සඳහා බහුල හැකියාවක් ඇත. ප්‍රධාන සාමාන්‍ය විවිධකරණ සහ විශේෂිත විවිධකරණ වංශාවලිය වන්නේ: <ul><li><b>පරිශීලක වර්ග:</b> පරිශීලකයින්, කාර්යභාර, සහ වගකීම් සඳහා DTS තුළ සවිස්තරකරණය කර ඇති කාණ්ඩ.</li><li><b>ආයතන, හවුල්කරුවන්, සහ අංශ:</b> රටවලට අදාළ ජාතික ආයතන, සංවර්ධන හවුල්කරුවන්, සහ අංශ ලේඛන සවිස්තරකරණය කළ හැක.</li><li><b>තොරතුරු සත්‍යාපනය:</b> DTS වෙත ඇතුළත් කරන තොරතුරු සත්‍යාපනය සඳහා අදාළ පරිශීලකයින් සවිස්තරකරණය කිරීම.</li><li><b>ලේඛන:</b> කාලගුණික ව්‍යාපෘති, වැඩසටහන්, සහ ක්‍රියාකාරකම් සඳහා තොරතුරු ගබඩා කිරීම.</li><li><b>දත්ත පරාමිතීන්:</b> රජයන්ට අවශ්‍ය විශේෂිත දත්ත පරාමිතීන් සවිස්තරකරණය කිරීම.</li><li><b>මූලික කාර්ය සාධන දර්ශක (KPIs):</b> DTS තුළ කාර්ය සාධන දර්ශක (KPIs) එකතු කිරීම.</li><li><b>වාර්තාකරණය:</b> ETF පොදු විෂය වගුවන් මගින් වාර්තා කිරීමේ පහසුව.</li><li><b>API ඒකාබද්ධකරණය:</b> ප්‍රාදේශීය සහ ජාතික පද්ධති සමඟ සම්බන්ධ කිරීමට API ඒකාබද්ධකරණය.</li><li><b>දත්ත සුරක්ෂිතතාව:</b> රටවල්ගේ විශේෂිත අවශ්‍යතාට අනුව දත්ත ගබඩා සහ සුරක්ෂිත කිරීම.</li></ul>",
+  "faqQ5": "මූලාශ්‍ර කේතය භාවිතා කළ හැක්කේ කවුද?",
+  "faqA5": "ඩිජිටල් විවෘත පද්ධතිය (DTS) මූලාශ්‍ර කේතය UNDP මඟින් සංවර්ධනය කර පවත්වාගෙන යන අතර, GNU Affero General Public License (AGPL-3.0) යටතේ බලපත්‍රයක් ඇත, මඟින් මෘදුකාංග නිදහස් භාවිත, සංස්කරණය, සහ බෙදාහැරීම සදහා අවසර දේ. ඔබේ භාවිතය පිළිබඳ අපට දැනුම් දීමට <a>digital4planet@undp.org</a> මඟින් අපව සම්බන්ධ කරගන්නා ලෙස කරුණාකර ඉල්ලා සිටින්න, මෙය මෙවලමේ බලපෑම පනවා හා මනා පිරිසක්ගේ ගැඹුරු මනාකරණය සඳහා උපකාරී වේ.",
+  "faqA5-2": "AGPL-3.0 යටතේ, මූලාශ්‍ර කේතයෙහි කිසිදු වෙනස්කම් GitHub හි නව ශාඛාවක් සෑදීම මඟින් පොදුවේ ලබා දිය යුතුය. මෙම මෘදුකාංගය, AGPL-3.0 මාර්ගෝපදේශයන්ට අනුගත නොවී විශේෂිත තීරු යටතේ නව බලපත්‍රයක් ලබා දිය නොහැක.",
+  "faqQ6": "ඩිජිටල් විවෘත පද්ධතිය (DTS) යොදා ගැනීම, භාවිතා කිරීම, සහ නඩත්තු කිරීම සඳහා අවශ්‍ය සම්පත් මොනවාද?",
+  "faqA6": "<b>පද්ධති සත්කාරකත්වය:</b> සම්පත් ගොඩනැගීමෙන් පසු රටවල් ස්වයංක්‍රීයව මෘදුකාංගය සහ දත්ත සුරක්ෂිත සහ නඩත්තු කර යුතුය. මෙයට මෘදුකාංගය සහ දත්ත සත්කාරකත්වය සඳහා මානව සහ මූල්‍ය සම්පත් සැලසුම් කරන අවශ්‍යතාවය ඇත. ප්‍රධාන වශයෙන් පද්ධති සත්කාරකත්වය සඳහා පහත පිලිවෙලින් වන විකල්ප දෙකක් ඇත:<ul><li><b>වලාකුළු සත්කාරකත්වය:</b> වලාකුළු සත්කාරකත්වය පරික්ෂාකරණය, ආරක්ෂාව, සහ පාරම්පරික ප්‍රතිසාධකයන් හමුවේ ස්වයංක්‍රීයව සුරැකීමේ පහසුකම්.</li><li><b>පෞද්ගලික සත්කාරකත්වය:</b> රටවල් දත්ත සහ ආරක්ෂාව ස්වයං සකස් කිරීම සඳහා පෞද්ගලික සත්කාරකතා පවත්වාගෙන යා හැක.</li></ul>",
+  "faqA6-2": "<b>ජාතික තාක්ෂණික විශේෂඥයින්:</b> රටවල DTS ක්‍රියාත්මක කිරීමේ පළපුරුද්ද මගින් ජාතික තාක්ෂණික විශේෂඥයන්ට අවශ්‍යම වශයෙන් හඳුනා ගැනීම පහසු කරයි: <ul><li><b>ජාතික විවෘත විශේෂඥයා:</b> කාලගුණික තොරතුරු සහ ජාතික පද්ධති පිළිබඳ ගැඹුරු දැනුමක් ඇති විශේෂඥයෙකු. මෙම පුද්ගලයා DTS නිවැරදිම ජාතික අවශ්‍යතා අනුව අභිරුචිකරණය සහ භාවිතය පවත්වන්න.</li><li><b>ජාතික තාක්ෂණ විශේෂඥයා:</b> විවෘත මූලාශ්‍ර කේතය සහ UX/UI පිළිබඳ විශේෂිත මැනවීම ඇති පුද්ගලයකු.</li></ul>",
+  "faqA6-3": "<b>ජාතික පුහුණු කිරීම:</b> ජාතික පාර්ශවයන් අතර DTS භාවිතය ආරම්භ කරනු සඳහා පුහුණුව ලබා දිය යුතුය. මෙය සම්මන්ත්‍රණාමය සහ මාර්ගගත පාඨමාලා ඇතුළත් වේ.",
+  "faqQ7": "UNDP මඟින් ලබා දිය හැකි සහයෝගය මොනවාද?",
+  "faqA7": "UNDP Digital for Planet කණ්ඩායම, ප්‍රදේශීය UNDP කාර්යාල හරහා පහත සදහන් කරුණු සහාය දිය හැක (සාකච්ඡා යටතේ):<ul><li><b>සම්පත් සහ මොඩල්:</b> ප්‍රමිතියක් සහිත මූලාශ්‍ර සැලසුම්, සහ DTS අභිරුචිකරණය සඳහා සහාය දිය හැක.</li><li><b>පුහුණු සහ ජාත්‍යන්තර විශේෂඥතාව:</b> නිෂ්පාදන කළමනාකරණය, තාක්ෂණික සහාය, සහ ප්‍රතිපත්ති සඳහා සහාය ලබා දිය හැක.</li><li><b>ප්‍රාතික ප්‍රවෘත්ති ආහාරය:</b> ජාත්‍යන්තර කණ්ඩායමක් සමඟ දිගුකාලීන සම්බන්ධතාවය සහ සහාය ලබා දිය හැක.</li></ul>",
+  "help": "උදව්"
 }

From a59116f6a51ef1f315b03cf30e62ded060b73c96 Mon Sep 17 00:00:00 2001
From: tharindugayanga <tharindug@xeptagon.com>
Date: Wed, 13 Nov 2024 16:18:36 +0530
Subject: [PATCH 2/6] Logo name change

---
 web/src/Components/Sider/layout.sider.scss | 4 ++--
 web/src/Components/Sider/layout.sider.tsx  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/Components/Sider/layout.sider.scss b/web/src/Components/Sider/layout.sider.scss
index 875c8f782..36b3d579e 100644
--- a/web/src/Components/Sider/layout.sider.scss
+++ b/web/src/Components/Sider/layout.sider.scss
@@ -48,7 +48,7 @@
 
       .title {
         font-family: 'MuseoSans';
-        font-size: 14px;
+        font-size: 15px;
         color: $logo-text-color;
         font-weight: 700;
         margin-right: 5px;
@@ -63,7 +63,7 @@
 
       .logo {
         height: 52px;
-        width: 80px;
+        width: 51px;
 
         img {
           object-fit: cover;
diff --git a/web/src/Components/Sider/layout.sider.tsx b/web/src/Components/Sider/layout.sider.tsx
index fb16aa51d..57152ae93 100644
--- a/web/src/Components/Sider/layout.sider.tsx
+++ b/web/src/Components/Sider/layout.sider.tsx
@@ -83,7 +83,7 @@ const LayoutSider = (props: LayoutSiderProps) => {
           </div>
           {!collapsed && (
             <div>
-              <div style={{ display: 'flex' }}>
+              <div style={{ display: 'flex', flexDirection: 'column' }}>
                 <div className="title">{collapsed ? '' : 'NDC TRANSPARENCY'}</div>
                 <div className="title-sub">{collapsed ? '' : 'SYSTEM'}</div>
               </div>

From 1ff2d9dd0affacd5b688d051052b3bc0b1f3e202 Mon Sep 17 00:00:00 2001
From: tharindugayanga <tharindug@xeptagon.com>
Date: Wed, 13 Nov 2024 16:48:32 +0530
Subject: [PATCH 3/6] header system name formatting change

---
 web/src/Components/Sider/layout.sider.scss | 42 ++++++++++++----------
 web/src/Components/Sider/layout.sider.tsx  | 12 ++++---
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/web/src/Components/Sider/layout.sider.scss b/web/src/Components/Sider/layout.sider.scss
index 36b3d579e..b8efed3c6 100644
--- a/web/src/Components/Sider/layout.sider.scss
+++ b/web/src/Components/Sider/layout.sider.scss
@@ -12,7 +12,7 @@
   .country-name {
     font-size: 0.65rem;
     color: $logo-text-color;
-    margin-top: -5px;
+    margin-top: -2px;
     font-family: 'MuseoSans';
   }
 
@@ -46,23 +46,29 @@
       padding-left: 20px;
       cursor: pointer;
 
-      .title {
-        font-family: 'MuseoSans';
-        font-size: 15px;
-        color: $logo-text-color;
-        font-weight: 700;
-        margin-right: 5px;
-      }
+      .sider-logo-system-name {
+        // display: flex;
+        // flex-direction: column;
+
+        .title {
+          font-family: 'MuseoSans';
+          font-size: 13px;
+          color: $logo-text-color;
+          font-weight: 700;
+          margin-right: 5px;
+        }
 
-      .title-sub {
-        font-weight: 100 !important;
-        font-family: 'MuseoSans';
-        font-size: 14px;
-        color: $logo-text-color;
+        .title-sub {
+          font-weight: 100 !important;
+          font-family: 'MuseoSans';
+          font-size: 12px;
+          color: $logo-text-color;
+          margin-top: -5px;
+        }
       }
 
       .logo {
-        height: 52px;
+        height: 60px;
         width: 51px;
 
         img {
@@ -76,7 +82,6 @@
     }
 
     .sider-menu-container {
-
       overflow-y: auto;
       max-height: 80vh;
       padding-top: 10px;
@@ -92,19 +97,18 @@
       &::-webkit-scrollbar {
         width: 8px;
       }
-      
+
       &::-webkit-scrollbar-track {
         background: #f0e9fd;
       }
-      
+
       &::-webkit-scrollbar-thumb {
         background: #d5d0dd;
       }
-      
+
       &::-webkit-scrollbar-thumb:hover {
         cursor: pointer;
       }
     }
-
   }
 }
diff --git a/web/src/Components/Sider/layout.sider.tsx b/web/src/Components/Sider/layout.sider.tsx
index 57152ae93..dc5193acb 100644
--- a/web/src/Components/Sider/layout.sider.tsx
+++ b/web/src/Components/Sider/layout.sider.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Menu, Layout, MenuProps } from 'antd';
+import { Menu, Layout, MenuProps, Row } from 'antd';
 import sliderLogo from '../../Assets/Images/mrvlogo.svg';
 import { useNavigate } from 'react-router-dom';
 import './layout.sider.scss';
@@ -83,9 +83,13 @@ const LayoutSider = (props: LayoutSiderProps) => {
           </div>
           {!collapsed && (
             <div>
-              <div style={{ display: 'flex', flexDirection: 'column' }}>
-                <div className="title">{collapsed ? '' : 'NDC TRANSPARENCY'}</div>
-                <div className="title-sub">{collapsed ? '' : 'SYSTEM'}</div>
+              <div className="sider-logo-system-name">
+                <Row>
+                  <div className="title">{collapsed ? '' : 'NDC TRANSPARENCY'}</div>
+                </Row>
+                <Row>
+                  <div className="title-sub">{collapsed ? '' : 'SYSTEM'}</div>
+                </Row>
               </div>
               <div className="country-name">{process.env.REACT_APP_COUNTRY_NAME || 'CountryX'}</div>
             </div>

From 267125783bdf970367a16682323a076896b3c908 Mon Sep 17 00:00:00 2001
From: tharindugayanga <tharindug@xeptagon.com>
Date: Thu, 14 Nov 2024 11:28:33 +0530
Subject: [PATCH 4/6] Home page content issue fixes

---
 web/src/Pages/Homepage/homepage.tsx   |  5 +++--
 web/src/locales/i18n/homepage/en.json | 11 ++++++-----
 web/src/locales/i18n/homepage/fr.json |  7 ++++---
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/web/src/Pages/Homepage/homepage.tsx b/web/src/Pages/Homepage/homepage.tsx
index 295182e52..6db6158ab 100644
--- a/web/src/Pages/Homepage/homepage.tsx
+++ b/web/src/Pages/Homepage/homepage.tsx
@@ -575,15 +575,16 @@ const Homepage = () => {
                       key="5"
                       className="homepage_collapsepanel"
                     >
+                      <div className="collapsetext">{t('homepage:faqA5')}</div>
                       <div className="collapsetext">
                         <Trans
-                          i18nKey="homepage:faqA5"
+                          i18nKey="homepage:faqA5-2"
                           components={{
                             a: <a href="mailto:digital4planet@undp.org" target="_blank" />,
                           }}
                         />
                       </div>
-                      <div className="collapsetext">{t('homepage:faqA5-2')}</div>
+                      <div className="collapsetext">{t('homepage:faqA5-3')}</div>
                     </CollapsePanel>
                     <CollapsePanel
                       header={t('homepage:faqQ6')}
diff --git a/web/src/locales/i18n/homepage/en.json b/web/src/locales/i18n/homepage/en.json
index d126694c0..ee280f278 100644
--- a/web/src/locales/i18n/homepage/en.json
+++ b/web/src/locales/i18n/homepage/en.json
@@ -53,10 +53,10 @@
     "policyContextBody": "The Paris Agreement, under the UNFCCC, aims to limit global warming to below 2°C, with efforts to keep it to 1.5°C by 2100. Article 13 establishes the Enhanced Transparency Framework (ETF) action and support that is meant to build mutual trust and confidence and to promote effective implementation of the Paris Agreement. Due to this nature, the ETF covers national information regarding mitigation, adaptation, and cross-cutting climate actions, plus the financial, technology, and capacity-building support needed and received for implementing climate actions.",
     "policyContextBody2": "Due to the very large amount of national information in the context of the ETF, digital systems are essential for enabling countries to effectively and efficiently consolidate and report this information over time.",
     "digitalPublicTitle": "A Digital Public Good ",
-    "digitalPublicBody": "In response to countries’ need for support to deploy similar reliable, interoperable digital systems, the UNDP has created the Digital Transparency System (DTS) as an open-source toolkit that follows the <a0>Digital Public Goods Standard</a0>. Countries can access the free source code and installation instructions from <a1>UNDP’s managed Github</a1> to customise DTS according to their national needs. This approach helps save time, reduce costs, and avoid duplicating effort and creating fragmented standards, applications, and tools, ultimately that may not work well with each other.",
+    "digitalPublicBody": "In response to countries’ need for support to deploy similar reliable, interoperable digital systems, the UNDP has created the Digital Transparency System (DTS) as an open-source toolkit that follows the <a0>Digital Public Goods Standard</a0>. Countries can access the free source code and installation instructions from <a1>UNDP’s managed GitHub</a1> to customise DTS according to their national needs. This approach helps save time, reduce costs, and avoid duplicating effort and creating fragmented standards, applications, and tools, ultimately that may not work well with each other.",
     "demoSiteTitle": "Demo Site",
-    "demoSiteBody": "This demonstration site maintained by UNDP showcases the core functionality of the <a0>Digital Transparency System (DTS)</a0> built on the source code. Governments and potential partners working with UNDP can:<ul><li>Request access to the demo site.</li><li>Request a live demonstration.</li><li>Customize and install as a sovereign system</li><li>Explore potential collaboration and support.</li></ul>For inquiries and to request a demo, please contact <b>UNDP Digital For Planet</b> at <a>digital4planet@undp.org</a>.",
-    "demoSiteBody2": "Additional technical details are available on <a>Github</a>.",
+    "demoSiteBody": "This demonstration site maintained by UNDP showcases the core functionality of the <a0>Digital Transparency System (DTS)</a0> built on the source code. Governments and potential partners working with UNDP can:<ul><li>Request access to the demo site.</li><li>Request a live demonstration.</li><li>Customize and install as a sovereign system.</li><li>Explore potential collaboration and support.</li></ul>For inquiries and to request a demo, please contact <b>UNDP Digital For Planet</b> at <a>digital4planet@undp.org</a>.",
+    "demoSiteBody2": "Additional technical details are available on <a>GitHub</a>.",
     "HdiwTitle": "How does it work?",
     "HdiwBody": "Every country has distinct climate change policies and planning, plus different processes and information governance structures for these. The Digital Transparency System (DTS) is customisable to allow for the distinct needs of the government while still reporting information following the guidance of the Enhanced Transparency Framework. The DTS demo site showcases how these elements come together in an easy-to-use software, allowing:",
     "feature1Title": "Assigned users",
@@ -79,8 +79,9 @@
     "faqQ4": "What types of customisations are possible with the Digital Transparency System?",
     "faqA4": "The Digital Transparency System (DTS) is built as open-source software and, in principle, is highly customisable.  Where the basis open-source software allows for flexibility as well. Some of the most common areas of customisation and flexibility are: <ul><li><b>User Types:</b> The categories of users, roles, responsibilities and rights for each user type in the DTS.</li><li><b>Institutions, Partners and Sectors:</b> Governments can easily customise the list of national institutions and development partners applicable to the country.  In addition, to easily customise the sectors and sub-sectors that national actions address.</li><li><b>Verification of Information:</b> Defining which specific users have the right to verify the information input to the DTS.</li><li><b>Documentation:</b> Documentation (files) for individual climate actions, programmes, projects and activities can be uploaded into the DTS for later use and review.</li><li><b>Data Parameters:</b> Custom data parameters chosen by governments can be added.</li><li><b>Key Performance Indicators: </b> The Key Performance Indicators (KPIs) of climate actions, programmes, projects and activities are easily added in the DTS.  In addition, KPIs for sustainable development and ministerial planning can be added.</li><li><b>Reporting: </b> The DTS has a standard reporting module for many of the Common Tabular Formats (CTFs) of the Enhanced Transparency Framework; governments can choose to add more CTFs or customise reporting specifically for government needs.</li><li><b>API Integration: </b> Enabling automated data input/export through APIs to integrate with other local and national systems.</li><li><b>Data Hosting & Security: </b> Customizing data hosting locations, databases, and security protocols to meet the country’s unique requirements.</li></ul>",
     "faqQ5": "Who can use the source code?",
-    "faqA5": "The Digital Transparency System source code is developed and maintained by UNDP and is licensed under the GNU Affero General Public License (AGPL-3.0), which permits free use, modification, and sharing of the software. We kindly ask users to inform us of your usage by contacting <a>digital4planet@undp.org</a> as this helps us track the tool’s impact and guide future improvements.",
-    "faqA5-2": "Under AGPL-3.0, any modifications to the code must be made publicly available by creating a new branch on GitHub. The software cannot be relicensed under more restrictive terms without adhering to the AGPL-3.0 guidelines.",
+    "faqA5": "The Digital Transparency System source code is developed and maintained by UNDP and is licensed under the GNU Affero General Public License (AGPL-3.0), which permits free use, modification, and sharing of the software.",
+    "faqA5-2": "We kindly ask users to inform us of your usage by contacting <a>digital4planet@undp.org</a> as this helps us track the tool’s impact and guide future improvements.",
+    "faqA5-3": "Under AGPL-3.0, any modifications to the code must be made publicly available by creating a new branch on GitHub. The software cannot be relicensed under more restrictive terms without adhering to the AGPL-3.0 guidelines.",
     "faqQ6": "What resources are needed to deploy, use, and maintain the Digital Transparency System? ",
     "faqA6": "<b>System hosting:</b> Countries are expected to host and maintain the software independently after installation. This means countries should plan on having human and financial resources to host the software and data. There are two main hosting options: <ul><li><b>Cloud Hosting:</b> Cloud hosting offers flexibility, reliability, and integrated security, typically with managed backup and maintenance features. These services generally require a recurring fee, often monthly or annual, which can vary based on usage, storage, and service level.</li><li><b>Local Hosting:</b> Countries can host the system on local servers to gain more direct control over data and security. Countries must manage all configuration, security, backup, and ongoing maintenance based on their local IT environment and security protocols.</li></ul>",
     "faqA6-2": "<b>National Technical Experts:</b> Experience in implementing the Digital Transparency System (DTS) in countries shows that two types of national technical expertise are needed: <ul><li><b>National Transparency Expert:</b> An expert with deep knowledge of the climate change information and related national systems in the country (e.g. MRV, GHG Inventory, BURs/BTRs, sectoral information…).  This person would help find where to customise the DTS to meet national needs, assist with the information processes, conduct training and prepare related training materials for national stakeholders.</li><li><b>National IT Expert:</b> An expert who has good knowledge of open-source code and UX/UI, plus, experience with institutional IT systems in the country (especially environmental software).   This person would help customise the DTS to meet national needs, set up hosting, and conduct training.</li></ul>",
diff --git a/web/src/locales/i18n/homepage/fr.json b/web/src/locales/i18n/homepage/fr.json
index c931ab882..719808913 100644
--- a/web/src/locales/i18n/homepage/fr.json
+++ b/web/src/locales/i18n/homepage/fr.json
@@ -52,7 +52,7 @@
   "digitalPublicBody": "En réponse au besoin des pays de déployer des systèmes numériques fiables et interopérables similaires, le PNUD a créé le Système de Transparence Numérique (DTS) comme un ensemble d'outils open-source qui respecte la <a0>Norme des Biens Publics Numériques</a0>. Les pays peuvent accéder au code source libre et aux instructions d'installation sur <a1>le GitHub géré par le PNUD</a1> pour personnaliser le DTS en fonction de leurs besoins nationaux. Cette approche permet de gagner du temps, de réduire les coûts et d'éviter la duplication d'efforts et la création de normes, d'applications et d'outils fragmentés qui pourraient ne pas fonctionner ensemble.",
   "demoSiteTitle": "Site de démonstration",
     "demoSiteBody": "Ce site de démonstration maintenu par le PNUD présente les fonctionnalités principales du <a0>Système de Transparence Numérique (DTS)</a0> basé sur le code source. Les gouvernements et partenaires potentiels travaillant avec le PNUD peuvent :<ul><li>Demander l'accès au site de démonstration.</li><li>Demander une démonstration en direct.</li><li>Personnaliser et installer en tant que système souverain</li><li>Explorer les possibilités de collaboration et de soutien.</li></ul>Pour toute demande d'information et de démonstration, veuillez contacter <b>PNUD Digital For Planet</b> à <a>digital4planet@undp.org</a>.",
-    "demoSiteBody2": "Des détails techniques supplémentaires sont disponibles sur <a>Github</a>.",
+    "demoSiteBody2": "Des détails techniques supplémentaires sont disponibles sur <a>GitHub</a>.",
     "HdiwTitle": "Comment ça marche ?",
     "HdiwBody": "Chaque pays a des politiques et des plans distincts en matière de changement climatique, ainsi que des processus et des structures de gouvernance de l'information différents. Le Système de Transparence Numérique (DTS) est personnalisable pour répondre aux besoins spécifiques du gouvernement tout en respectant les exigences du Cadre de Transparence Renforcé. Le site de démonstration du DTS montre comment ces éléments s'intègrent dans un logiciel facile à utiliser, permettant :",
     "feature1Title": "Utilisateurs assignés",
@@ -75,8 +75,9 @@
     "faqQ4": "Quels types de personnalisations sont possibles avec le Système de Transparence Numérique ?",
     "faqA4": "Le Système de Transparence Numérique (DTS) est conçu comme un logiciel open-source et, en principe, est hautement personnalisable. La base du logiciel open-source permet également une grande flexibilité. Les domaines de personnalisation et de flexibilité les plus courants incluent : <ul><li><b>Types d'utilisateurs :</b> Les catégories d'utilisateurs, les rôles, les responsabilités et les droits pour chaque type d'utilisateur dans le DTS.</li><li><b>Institutions, partenaires et secteurs :</b> Les gouvernements peuvent personnaliser facilement la liste des institutions nationales et des partenaires de développement applicables au pays. De même, il est facile de personnaliser les secteurs et sous-secteurs abordés par les actions nationales.</li><li><b>Vérification des informations :</b> Définir quels utilisateurs spécifiques ont le droit de vérifier les informations saisies dans le DTS.</li><li><b>Documentation :</b> La documentation (fichiers) pour les actions climatiques individuelles, les programmes, projets et activités peut être téléchargée dans le DTS pour une utilisation et un examen ultérieurs.</li><li><b>Paramètres de données :</b> Les paramètres de données personnalisés choisis par les gouvernements peuvent être ajoutés.</li><li><b>Indicateurs de performance clés :</b> Les indicateurs de performance clés (KPI) des actions climatiques, des programmes, des projets et des activités peuvent être facilement ajoutés dans le DTS. De plus, les KPI pour le développement durable et la planification ministérielle peuvent être ajoutés.</li><li><b>Rapports :</b> Le DTS dispose d'un module de rapport standard pour de nombreux Formats Tabulaires Communs (CTF) du Cadre de Transparence Renforcé ; les gouvernements peuvent choisir d'ajouter plus de CTF ou de personnaliser les rapports spécifiquement pour leurs besoins gouvernementaux.</li><li><b>Intégration API :</b> Permet l'entrée/sortie automatisée des données via des API pour intégrer d'autres systèmes locaux et nationaux.</li><li><b>Hébergement des données & sécurité :</b> Personnalisation des lieux d'hébergement des données, des bases de données et des protocoles de sécurité pour répondre aux besoins uniques du pays.</li></ul>",
     "faqQ5": "Qui peut utiliser le code source ?",
-    "faqA5": "Le code source du Système de Transparence Numérique est développé et maintenu par le PNUD et est licencié sous la GNU Affero General Public License (AGPL-3.0), qui permet l'utilisation, la modification et le partage gratuits du logiciel. Nous demandons gentiment aux utilisateurs de nous informer de leur utilisation en contactant <a>digital4planet@undp.org</a> afin que nous puissions suivre l'impact de l'outil et orienter les futures améliorations.",
-    "faqA5-2": "Conformément à l'AGPL-3.0, toutes les modifications du code doivent être rendues publiques en créant une nouvelle branche sur GitHub. Le logiciel ne peut pas être re-licencié selon des termes plus restrictifs sans respecter les directives de l'AGPL-3.0.",
+    "faqA5": "Le code source du Système de Transparence Numérique est développé et maintenu par le PNUD et est licencié sous la GNU Affero General Public License (AGPL-3.0), qui permet l'utilisation, la modification et le partage gratuits du logiciel.",
+    "faqA5-2": "Nous demandons gentiment aux utilisateurs de nous informer de leur utilisation en contactant <a>digital4planet@undp.org</a> afin que nous puissions suivre l'impact de l'outil et orienter les futures améliorations.",
+    "faqA5-3": "Conformément à l'AGPL-3.0, toutes les modifications du code doivent être rendues publiques en créant une nouvelle branche sur GitHub. Le logiciel ne peut pas être re-licencié selon des termes plus restrictifs sans respecter les directives de l'AGPL-3.0.",
     "faqQ6": "Quelles ressources sont nécessaires pour déployer, utiliser et maintenir le Système de Transparence Numérique ?",
     "faqA6": "<b>Hébergement du système :</b> Les pays doivent prévoir l'hébergement et la maintenance du logiciel de manière autonome après l'installation. Cela signifie que les pays doivent planifier d'avoir des ressources humaines et financières pour héberger le logiciel et les données. Il existe deux principales options d'hébergement : <ul><li><b>Hébergement Cloud :</b> L'hébergement cloud offre flexibilité, fiabilité et sécurité intégrée, généralement avec des fonctions de sauvegarde et de maintenance gérées. Ces services nécessitent généralement des frais récurrents, souvent mensuels ou annuels, qui peuvent varier en fonction de l'utilisation, du stockage et du niveau de service.</li><li><b>Hébergement local :</b> Les pays peuvent héberger le système sur des serveurs locaux pour avoir un contrôle direct sur les données et la sécurité. Les pays doivent gérer toutes les configurations, la sécurité, les sauvegardes et la maintenance continue en fonction de leur environnement informatique local et des protocoles de sécurité.</li></ul>",
     "faqA6-2": "<b>Experts techniques nationaux :</b> L'expérience de la mise en œuvre du Système de Transparence Numérique (DTS) dans les pays montre que deux types d'expertise technique nationale sont nécessaires : <ul><li><b>Expert national en transparence :</b> Un expert ayant une connaissance approfondie des informations sur le changement climatique et des systèmes nationaux connexes dans le pays (par exemple, MRV, Inventaire des GES, BURs/BTRs, informations sectorielles...). Cette personne aiderait à trouver où personnaliser le DTS pour répondre aux besoins nationaux, à aider aux processus d'information, à organiser des formations et à préparer du matériel de formation lié aux parties prenantes nationales.</li><li><b>Expert informatique national :</b> Un expert possédant une bonne connaissance du code open-source et de l'UX/UI, ainsi qu'une expérience avec les systèmes informatiques institutionnels du pays (en particulier les logiciels environnementaux). Cette personne aiderait à personnaliser le DTS pour répondre aux besoins nationaux, à configurer l'hébergement et à organiser des formations.</li></ul>",

From 9260461641cec117460e914ef2633018cfe4f4e8 Mon Sep 17 00:00:00 2001
From: tharindugayanga <tharindug@xeptagon.com>
Date: Thu, 14 Nov 2024 11:54:18 +0530
Subject: [PATCH 5/6] home page content fixes

---
 web/src/Pages/Homepage/homepage.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/Pages/Homepage/homepage.scss b/web/src/Pages/Homepage/homepage.scss
index f7b91aa8f..7fa106d84 100644
--- a/web/src/Pages/Homepage/homepage.scss
+++ b/web/src/Pages/Homepage/homepage.scss
@@ -599,7 +599,7 @@ $title-color: #3a8ab5;
     }
 
     .title {
-      font-size: 2rem;
+      font-size: 28px;
       font-weight: 700;
       font-family: $primary-font-family;
       color: $title-text-color;
@@ -608,7 +608,7 @@ $title-color: #3a8ab5;
       justify-content: left;
       text-transform: uppercase;
       margin-left: 4.5rem;
-      padding: 50px 50px 10px 0;
+      padding: 0 50px 10px 0;
 
       @media (max-width: $lg-size) {
         font-size: 24px;

From 3a0e2c104342d0311dfcc58f32fe469eda5f6ff5 Mon Sep 17 00:00:00 2001
From: tharindugayanga <tharindug@xeptagon.com>
Date: Thu, 14 Nov 2024 12:21:38 +0530
Subject: [PATCH 6/6] Home page content code refactor

---
 web/src/Pages/Homepage/homepage.tsx | 221 ----------------------------
 1 file changed, 221 deletions(-)

diff --git a/web/src/Pages/Homepage/homepage.tsx b/web/src/Pages/Homepage/homepage.tsx
index 6db6158ab..ad15d01af 100644
--- a/web/src/Pages/Homepage/homepage.tsx
+++ b/web/src/Pages/Homepage/homepage.tsx
@@ -93,227 +93,6 @@ const Homepage = () => {
           </div>
         </Col>
       </Row>
-      {/* <Row gutter={[8, 8]}>
-        <Col md={24} lg={24} flex="auto">
-          <div className="homepage-content-containerwhite">
-            <div id="scrollhome" className="title">
-              {t('homepage:aboutustitle')}
-            </div>
-            <div className="homepagebody">
-              <div className="homepagebody_aboutusline1">{t('homepage:aboutusline1')}</div>
-              <div className="homepagebody_subtitle">{t('homepage:Keyfeatures')}</div>
-
-              <div className="aboutus_cards-container">
-                <Row gutter={5} className="aboutus_card-row">
-                  <Col xxl={8} xl={8} md={12} className="aboutus_card-col">
-                    <div className="aboutus-card-main-container">
-                      <Col>
-                        <Row className="aboutus_card-row">
-                          <div>
-                            <BarChart color="#FFFF" size="80px" />
-                          </div>
-                        </Row>
-                        <Row className="aboutus_card-row">
-                          <div className="aboutus-card-title">{t('homepage:analytic')}</div>
-                        </Row>
-                        <Row>
-                          <div className="aboutus-card-text">{t('homepage:analyticbody')}</div>
-                        </Row>
-                      </Col>
-                    </div>
-                  </Col>
-                  <Col xxl={8} xl={8} md={12} className="aboutus_card-col">
-                    <div className="aboutus-card-main-container">
-                      <Col>
-                        <Row className="aboutus_card-row">
-                          <div>
-                            <Gem color="#FFFF" size="80px" />
-                          </div>
-                        </Row>
-                        <Row className="aboutus_card-row">
-                          <div className="aboutus-card-title">{t('homepage:carboncal')}</div>
-                        </Row>
-                        <Row>
-                          <div className="aboutus-card-text">{t('homepage:carboncalbody')}</div>
-                        </Row>
-                      </Col>
-                    </div>
-                  </Col>
-                  <Col xxl={8} xl={8} md={12} className="aboutus_card-col">
-                    <div className="aboutus-card-main-container">
-                      <Col>
-                        <Row className="aboutus_card-row">
-                          <div>
-                            <Calculator className="aboutusicon" color="#FFFF" size="80px" />
-                          </div>
-                        </Row>
-                        <Row className="aboutus_card-row">
-                          <div className="aboutus-card-title">{t('homepage:serialgen')}</div>
-                        </Row>
-                        <Row>
-                          <div className="aboutus-card-text">{t('homepage:serialgenbody')}</div>
-                        </Row>
-                      </Col>
-                    </div>
-                  </Col>
-                </Row>
-              </div>
-              <Row className="homepagebody_aboutusline1">{t('homepage:aboutusline2')}</Row>
-              <Row className="homepagebody_aboutusline1">{t('homepage:aboutusline3')}</Row>
-              <div className="homepagebody_aboutusline1">
-                Developed in Partnership with{' '}
-                <a
-                  href="https://www.theclimatewarehouse.org/work/digital-4-climate"
-                  target="_blank"
-                >
-                  Digital For Climate (D4C)
-                </a>
-                . D4C is a collaboration between the{' '}
-                <a href="https://www.ebrd.com/" target="_blank">
-                  European Bank for Reconstruction and Development (EBRD)
-                </a>
-                ,{' '}
-                <a href="https://www.undp.org/" target="_blank">
-                  United Nations Development Program (UNDP)
-                </a>
-                ,{' '}
-                <a href="https://www.unfccc.int/" target="_blank">
-                  United Nations Framework Convention on Climate Change (UNFCCC)
-                </a>
-                ,{' '}
-                <a href="https://www.ieta.org/" target="_blank">
-                  International Emissions Trading Association (IETA)
-                </a>
-                ,{' '}
-                <a href="https://www.esa.int/" target="_blank">
-                  European Space Agency (ESA)
-                </a>
-                , and{' '}
-                <a href="https://www.worldbank.org/" target="_blank">
-                  World Bank Group
-                </a>{' '}
-                that aims to coordinate respective workflows and create a modular and interoperable
-                end-to-end digital ecosystem for the carbon market. The overarching goal is to
-                support a transparent, high integrity global carbon market that can channel capital
-                for impactful climate action and low-carbon development.
-              </div>
-              <Row className="undplogocontainer">
-                <Col className="gutter-row" xl={5} md={8} sm={24} xs={24}>
-                  <ImgWithFallback
-                    className="erbd"
-                    src={EBRD}
-                    fallbackSrc={EBRDff}
-                    mediaType="image/webp"
-                    alt="EBRD"
-                  />
-                </Col>
-                <Col className="gutter-row align-to-end" xl={3} md={8} sm={12} xs={12}>
-                  <ImgWithFallback
-                    className="undp"
-                    src={undpLogo}
-                    fallbackSrc={undpLogo}
-                    mediaType="image/svg"
-                    alt="UNDP"
-                  />
-                </Col>
-                <Col className="gutter-row align-to-start" xl={3} md={8} sm={12} xs={12}>
-                  <ImgWithFallback
-                    className="unfccc"
-                    src={UNFCCC}
-                    fallbackSrc={UNFCCCff}
-                    mediaType="image/webp"
-                    alt="UNFCCC"
-                  />
-                </Col>
-                <Col className="gutter-row" xl={5} md={8} sm={24} xs={24}>
-                  <ImgWithFallback
-                    className="ieta"
-                    src={IETA}
-                    fallbackSrc={IETAff}
-                    mediaType="image/webp"
-                    alt="IETA"
-                  />
-                </Col>
-                <Col className="gutter-row" xl={5} md={8} sm={24} xs={24}>
-                  <ImgWithFallback
-                    className="esa"
-                    src={ESA}
-                    fallbackSrc={ESAff}
-                    mediaType="image/webp"
-                    alt="ESAFF"
-                  />
-                </Col>
-                <Col className="gutter-row" xl={3} md={8} sm={24} xs={24}>
-                  <ImgWithFallback
-                    className="wbank"
-                    src={WBANK}
-                    fallbackSrc={WBANKff}
-                    mediaType="image/webp"
-                    alt="WBANK"
-                  />
-                </Col>
-              </Row>
-            </div>
-          </div>
-        </Col>
-      </Row> */}
-      {/* <Row gutter={[8, 8]}>
-        <Col md={24} lg={24} flex="auto">
-          <div className="homepage-image-content-container">
-            <Row>
-              <Col className="eligicontent" flex={2} md={12} lg={12}>
-                <div className="title">{t('homepage:eligibility')}</div>
-                <div className="homepagebody">
-                  {t('homepage:eligibilitybody')}
-                  <ul>
-                    <li>{t('homepage:eliglist1')}</li>
-                    <li>{t('homepage:eliglist2')}</li>
-                    <li>{t('homepage:eliglist3')}</li>
-                    <li>{t('homepage:eliglist4')}</li>
-                  </ul>
-                </div>
-              </Col>
-              <Col flex={3} md={12} lg={12}>
-                <ImgWithFallback
-                  className="forest-image"
-                  src={forestfall}
-                  fallbackSrc={forestfall}
-                  mediaType="image/webp"
-                  alt="forestry"
-                />
-              </Col>
-            </Row>
-          </div>
-        </Col>
-      </Row> */}
-      {/* <Row gutter={[8, 8]}>
-        <Col md={24} lg={24} flex="auto">
-          <div className="homepage-resources-content-container">
-            <Row>
-              <Col className="resource-image-container" md={12} lg={12}>
-                <ImgWithFallback
-                  className="image"
-                  src={resources}
-                  fallbackSrc={resourcesfall}
-                  mediaType="image/webp"
-                  alt="resources"
-                />
-              </Col>
-              <Col md={12} lg={12}>
-                <div className="title">{t('homepage:resource')}</div>
-                <div className="homepagebody">
-                  <ul>
-                    <li>{t('homepage:reslist1')}</li>
-                    <li>{t('homepage:reslist2')}</li>
-                    <li>{t('homepage:reslist3')}</li>
-                  </ul>
-                </div>
-              </Col>
-            </Row>
-          </div>
-        </Col>
-      </Row> */}
-
       <Row gutter={[8, 8]}>
         <Col md={24} lg={24} flex="auto">
           <div className="homepage-content-containerwhite">