re ordered home page cards and updated text

components/homepage/casecomment.js

@@ -7,11 +7,18 @@ export default function CaseComment() {
     const router = useRouter();
     const { locale } = router;
     return (
-        <div className="card" id="casescomment-card">
+        <div id="casescomment-card">
-            <div className="card-body">
+            <div className="card-body card-body govuk-!-padding-top-0">
                 <h3 className="heading-small card-heading">
                     {t("home:casescomment-card-title")}
                 </h3>
+
+                <p className="gouk-body-s">
+                    {t("home:casescomment-card-paragraph-three")}
+                </p>
+                <p className="gouk-body-s">
+                    {t("home:casescomment-card-paragraph-four")}
+                </p>
                 <p className="govuk-body-s">
                     {t("home:casescomment-card-paragraph-one")}{" "}
                     <a
@@ -24,6 +31,15 @@ export default function CaseComment() {
                 <p className="govuk-body-s">
                     {t("home:casescomment-card-paragraph-two")}
                 </p>
+                <h3 className="heading-small card-heading">
+                    {t("home:watch-case-card-title")}
+                </h3>
+                <p className="govuk-body-s">
+                    {t("home:watch-case-paragraph-one")}
+                </p>
+                {/* <p className="govuk-body-s">
+                    {t("home:casescomment-card-paragraph-two")}
+                </p> */}
             </div>
         </div>
     );

components/homepage/casesearch.js

@@ -4,6 +4,7 @@ import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, reduxForm, SubmissionError } from "redux-form";
 import { sendGAEvent } from "@next/third-parties/google";
+import Dns from "./dns";
 
 const required = (errorMsg) => (value) =>
     value || typeof value === "number" ? undefined : errorMsg;
@@ -175,6 +176,7 @@ let CaseSearch = (props) => {
                         </Link>
                     </div>
                 </form>
+                <Dns />
             </div>
         </>
     );

components/homepage/dns.js

@@ -15,7 +15,7 @@ export default function Dns() {
     //         : setShowSpinnerState(true);
     // };
     return (
-        <div className="card" id="dns-card">
+        <div id="dns-card">
             <div className="card-body">
                 <h3 className="heading-small card-heading">
                     {t("home:dns-card-title")}

components/homepage/login.js

@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import { parseCookies } from "nookies";
 import { setLoggedInUserId } from "../../store/accountDetails/action";
 import { signOut, useSession } from "next-auth/react";
+import CaseComment from "./casecomment";
 
 const required = (errorMsg) => (value) =>
     value || typeof value === "number" ? undefined : errorMsg;
@@ -71,11 +72,17 @@ let Login = (props) => {
         <>
             <div className="card" id="login-card">
                 <div className="card-body active">
+                    <h3 className="heading-mid card-heading">
+                        {t("home:signin-benefits-title")}
+                    </h3>
+                    <p className="govuk-body-s">
+                        {t("home:signin-benefits-paragraph")}
+                    </p>
                     <h3 className="heading-small card-heading">
                         {/* {t("home:login-card-title")} */}
                         {t("home:login-card-title-temp")}
                     </h3>{" "}
-                    <div className="govuk-form-group govuk-!-margin-top-4">
+                    {/* <div className="govuk-form-group govuk-!-margin-top-4">
                         <div className="govuk-body">
                             {session && "Signed in as " + session.user?.email}
                         </div>
@@ -107,15 +114,14 @@ let Login = (props) => {
                                 Magic Link Sign Out
                             </button>
                         )}
-                    </div>
+                    </div> */}
                     <p className="govuk-body-s">
                         {t("home:login-comingsoon-temp-1")}{" "}
                     </p>
-                    <p className="govuk-body-s">
+                    {/* <p className="govuk-body-s">
                         {t("home:login-comingsoon-temp-1a")}{" "}
-                    </p>
+                    </p> */}
                     <div className="govuk-form-group govuk-!-margin-top-4">
-                        <hr className="govuk-!-margin-bottom-4" />
                         <p className="govuk-body-s">
                             {t("home:login-comingsoon-temp-2")}
                         </p>
@@ -172,19 +178,9 @@ let Login = (props) => {
                                 </a>
                             </li>
                         </ul>
-                        <br />
-
-                        <p className="govuk-body-s">
-                            {t("home:login-comingsoon-email-link-label")}{" "}
-                            <a
-                                href={"mailto:" + t("home:login-contact-email")}
-                                className="govuk-link--no-underline"
-                            >
-                                {t("home:login-contact-email")}
-                            </a>
-                        </p>
                     </div>
                 </div>
+                <CaseComment />
             </div>
         </>
     );

components/main.js

@@ -34,8 +34,8 @@ const MainHome = (props) => {
                                 <Login session={session} siteurl={siteurl} />
                             </>
                         )}{" "}
-                        <CaseComment />
+                        {/* <CaseComment /> */}
-                        <Dns />
+                        {/* <Dns /> */}
                     </div>
                 </div>
             </div>

locales/cy/home.json

@@ -1,6 +1,6 @@
 {
-    "login-card-title-temp": "Apeliadau neu geisiadau newydd",
+    "login-card-title-temp": "Cyflwyno apêl newydd",
-    "login-comingsoon-temp-1": "Mae'r gwasanaeth hwn yn cael ei ddatblygu i gefnogi apeliadau a cheisiadau ar-lein.",
+    "login-comingsoon-temp-1": "Mae'r gwasanaeth hwn yn cael ei ddatblygu i gefnogi apeliadau a cheisiadau ar-lein. Gallwch chi godi apeliadau cynllunio ar hyn o bryd.",
     "login-comingsoon-temp-1a": "Ar hyn o bryd, gallwch gyflwyno Apeliadau Cynllunio a78, Apeliadau Cydsyniad Adeilad Rhestredig ac Ardal Gadwraeth, Apeliadau Deiliaid Tai a Mân Apeliadau Masnachol - HAS/CAS, Apeliadau Hysbysebion a Barnu'n Annilys.",
     "login-comingsoon-temp-2": "Wrth i ni ddatblygu’r gwasanaeth ar-lein, dewch o hyd i:",
     "login-comingsoon-forms-link-1": "https://llyw.cymru/ffurflenni-apelio",
@@ -32,8 +32,8 @@
     "casesearch-card-advanced-link": "Chwiliad uwch",
     "casesearch-search-validation-required": "Angenrheidiol",
     "casesearch-search-validation-minlength": "Rhaid iddo gynnwys 4 nod neu fwy",
-    "casescomment-card-title": "Rhowch sylwadau ar apêl",
+    "casescomment-card-title": "Sylw ar apêl neu gais",
-    "casescomment-card-paragraph-one": "Rhowch sylwadau ar apêl (ac eithrio apêl deiliaid tai neu fasnachol) drwy e-bostio ",
+    "casescomment-card-paragraph-one": "Fel arall, gallwch wneud sylwadau ar apêl (ac eithrio apêl gan ddeiliad tŷ neu apêl fasnachol) drwy e-bostio ",
     "casescomment-card-paragraph-two": "Ni all partïon â buddiant wneud sylwadau ar apeliadau deiliaid tai a masnachol yn ystod y cam apelio. Bydd unrhyw sylwadau a wnaed yn ystod y cam ymgeisio yn cael eu darparu gan yr awdurdod cynllunio lleol a'u hystyried gan yr Arolygydd.",
     "inspectorate-card-visit-label": "Ymweld â'r Arolygiaeth Gynllunio",
     "inspectorate-card-visit-link": "Hafan",
@@ -46,5 +46,11 @@
     "uploading-files-progress-label": "Wrthi'n llwytho i fyny...",
     "uploading-files-label": "Wrthi'n uwchlwytho {{number}} ffeil",
     "completed-uploading-files-label": "{{number}} ffeil wedi'u huwchlwytho",
-    "remove-this-file-label": "Tynnu'r ffeil hon"
+    "remove-this-file-label": "Tynnu'r ffeil hon",
+    "watch-case-card-title": "Gwylio achos",
+    "watch-case-paragraph-one": "Os oes gennych ddiddordeb mewn achos, dewiswch ei wylio o'ch dangosfwrdd.",
+    "casescomment-card-paragraph-three": "Gallwch wneud sylwadau ar apeliadau a cheisiadau yn ystod y cyfnod cynrychioli neu gyflwyno datganiadau achos neu'r Holiadur LPA.",
+    "casescomment-card-paragraph-four": "Cyfeiriwch at y dyddiadau cau ar gyfer cynrychioli achosion unigol ar gyfer datganiadau a sylwadau.",
+    "signin-benefits-title": "Buddion mewngofnodi",
+    "signin-benefits-paragraph": "Mae cofrestru ar y porth Gwaith Achos Cynllunio yn caniatáu ichi:"
 }

locales/en/home.json

@@ -1,6 +1,6 @@
 {
-    "login-card-title-temp": "New appeals or applications",
+    "login-card-title-temp": "Submit a new appeal",
-    "login-comingsoon-temp-1": "This service is being developed to support online appeals and applications.",
+    "login-comingsoon-temp-1": "This service is being developed to support online appeals and applications. You can currently raise planning appeals.",
     "login-comingsoon-temp-1a": "You can currently raise Planning Appeals s78.",
     "login-comingsoon-temp-2": "While we develop the online service, find:",
     "login-comingsoon-forms-link-1": "https://gov.wales/planning-appeal-forms",
@@ -32,8 +32,8 @@
     "casesearch-card-advanced-link": "Advanced search",
     "casesearch-search-validation-required": "Required",
     "casesearch-search-validation-minlength": "Must be 4 characters or more",
-    "casescomment-card-title": "Comment on an appeal ",
+    "casescomment-card-title": "Comment on an appeal or application",
-    "casescomment-card-paragraph-one": "Comment on an appeal (excluding householder or commercial) by emailing ",
+    "casescomment-card-paragraph-one": "Alternatively you can comment on an appeal (excluding householder or commercial) by emailing ",
     "casescomment-card-paragraph-two": "For householder and commercial appeals, interested parties are unable to comment at appeal stage. Any comments made at application stage will be provided by the Local Planning Authority and considered by the inspector.",
     "inspectorate-card-visit-label": "Visit the Planning Inspectorate",
     "inspectorate-card-visit-link": "Home",
@@ -46,5 +46,11 @@
     "uploading-files-progress-label": "Uploading...",
     "uploading-files-label": "Uploading {{number}} files",
     "completed-uploading-files-label": "{{number}} files uploaded",
-    "remove-this-file-label": "Remove this file"
+    "remove-this-file-label": "Remove this file",
+    "watch-case-card-title": "Watch a case",
+    "watch-case-paragraph-one": "If you are interested in a case you select to watch it from your dashboard.",
+    "casescomment-card-paragraph-three": "You can make comments on appeals and applications during the representation period or submit statements of case or the LPA Questionnaire.",
+    "casescomment-card-paragraph-four": "Please refer to the individual case representation deadlines for statements and comments.",
+    "signin-benefits-title": "Sign in benefits",
+    "signin-benefits-paragraph": "Registering on the Planning Casework portal allows you to:"
 }

pages/index.js

@@ -128,7 +128,7 @@ const Home = (props) => {
                         </div>
                     ) : (
                         <>
-                            <ServiceBanner noSignin={true} />
+                            <ServiceBanner />
                             <Main
                                 pages={pages}
                                 showLogin={showLogin}

styles/sass/patterns/_card.scss

@@ -84,6 +84,8 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
         font-size: 1.17rem;
     }
 
+
+
     .card-body {
         //border-bottom: 1px solid $govuk-border-colour; //$panel-colour;
         padding: 40px 20px;

styles/sass/welshgov/_application.scss

@@ -1510,6 +1510,14 @@ textarea,
     .govuk-summary-list__key {
         width: 45%;
     }
+
+
+}
+
+#login-card {
+    .heading-small {
+        font-size: 1rem;
+    }
 }
 
 .react-datepicker__input-container input {