initial commit

components/homepage/casecomment.js

@@ -0,0 +1,21 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function CaseComment() {
+  let { t } = useTranslation();
+
+  const router = useRouter();
+  const { locale } = router;
+  return (
+    <div className="card" id="casescomment-card">
+      <div className="card-body">
+        <h3 className="heading-small card-heading">
+          {t("home:casescomment-card-title")}
+        </h3>
+        <p className="govuk-body-s">{t("home:casescomment-card-paragraph-one")}</p>
+        <p className="govuk-body-s">{t("home:casescomment-card-paragraph-two")}</p>
+      </div>
+    </div>
+  );
+}

components/homepage/casesearch.js

@@ -0,0 +1,49 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function CaseSearch() {
+  let { t } = useTranslation();
+
+  const router = useRouter();
+  const { locale } = router;
+  return (
+    <div className="card" id="casesearch-card">
+      <div className="card-body">
+        <h3 className="heading-small card-heading">{t("home:casesearch-card-title")}</h3>
+        <div class="govuk-form-group">
+          <div id="event-name-hint" classNAme="govuk-hint ">
+          {t("home:casesearch-card-search-hint")}:
+            <br />
+            <span className="govuk-body-s">
+              {" "}
+              <span className="govuk-!-font-weight-bold">{t("home:casesearch-card-search-example-label")}:</span>{" "}
+              APP/A1234/A/99/1234567
+            </span>
+          </div>
+          <input
+            className="govuk-input"
+            id="event-name"
+            name="event-name"
+            type="text"
+            aria-describedby="event-name-hint"
+          />
+        </div>
+        <div class="govuk-form-group">
+          <button
+            type="submit"
+            class="govuk-button"
+            data-module="govuk-button"
+            id="submit-search"
+            formnovalidate=""
+          >
+            {t("home:casesearch-card-button")}
+          </button>
+        </div>
+        <Link href="/">
+          <a>{t("home:casesearch-card-advanced-link")}</a>
+        </Link>
+      </div>
+    </div>
+  );
+}

components/homepage/inspectorate.js

@@ -0,0 +1,23 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function Inspectorate() {
+  let { t } = useTranslation();
+
+  const router = useRouter();
+  const { locale } = router;
+  return (
+    <div className="card clear" id="inspectorate-card">
+      <div className="card-body">
+        <img src="assets/images/PINS_dual_logo_400.png" />
+        <p className="govuk-body-s">
+          {t("home:inspectorate-card-visit-label")}:{" "}
+          <Link href="/">
+            <a>{t("home:inspectorate-card-visit-link")}</a>
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

components/homepage/login.js

@@ -0,0 +1,84 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function Login() {
+  let { t } = useTranslation();
+
+  const router = useRouter();
+  const { locale } = router;
+  return (
+    <div className="card" id="login-card">
+      <div className="card-body active">
+        <h3 className="heading-small card-heading">{t("home:login-card-title")}</h3>
+
+        <form action="/myportal" method="POST" id="loginForm">
+          <div class="govuk-form-group">
+            {" "}
+            <label
+              for="user_id"
+              class="govuk-label"
+              aria-describedby="user_id-hint"
+            >
+              {t("home:login-card-id-label")}
+            </label>
+            <div class="govuk-hint" id="user_id-hint">
+            {t("home:login-card-id-hint")}
+            </div>
+            <input
+              type="text"
+              name="user_id"
+              id="user_id"
+              class="govuk-input govuk-!-width-one-half"
+              value=""
+              maxlength="22"
+              aria-describedby="user_id-hint"
+              autocomplete="username"
+            />
+          </div>
+          <div class="govuk-form-group">
+            {" "}
+            <label for="password" class="govuk-label">
+            {t("home:login-card-password-label")}
+            </label>
+            <input
+              type="password"
+              name="password"
+              id="password"
+              class="govuk-input govuk-!-width-three-quarters"
+              autocomplete="current-password"
+            />
+          </div>
+          <div class="govuk-form-group">
+            {/* <button
+              type="submit"
+              class="govuk-button"
+              data-module="govuk-button"
+              id="continue"
+              formnovalidate=""
+            >
+              {t("home:login-card-button")}
+            </button> */}
+            <Link href="/myportal">
+              <a className="govuk-button">{t("home:login-card-button")}</a>
+            </Link>
+          </div>
+        </form>
+        <div class="govuk-form-group govuk-!-margin-top-4">
+          <p className="govuk-body-s">
+          {t("home:login-card-register-label")}{" "}
+            <Link href="/">
+              <a>{t("home:login-card-register-link")}</a>
+            </Link>
+          </p>
+          <p className="govuk-body-s">
+          {t("home:login-card-forgotten-label")}{" "}
+            <Link href="/">
+              <a>{t("home:login-card-forgotten-link")}</a>
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}