From e50ce4a50170761b5436b6df2f8663ba9dc74d0d Mon Sep 17 00:00:00 2001
From: voenkomatiwe <radionpon21@gmail.com>
Date: Wed, 17 Jan 2024 15:04:28 +0200
Subject: [PATCH] feat: As a user, I want to see a link to my attestations in
 the front page jumbotron for quick navigation

---
 explorer/src/assets/locales/en/en.json        |  3 +-
 .../pages/Home/components/Jumbotron/index.tsx | 43 +++++++++++--------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/explorer/src/assets/locales/en/en.json b/explorer/src/assets/locales/en/en.json
index 02329064..431ff20c 100644
--- a/explorer/src/assets/locales/en/en.json
+++ b/explorer/src/assets/locales/en/en.json
@@ -16,7 +16,8 @@
       "previous": "Previous",
       "next": "Next",
       "learnMore": "Learn More",
-      "getStarted": "Get Started"
+      "getStarted": "Get Started",
+      "viewMyAttestations": "View My Attestations"
     },
     "messages": {
       "empty": "Empty",
diff --git a/explorer/src/pages/Home/components/Jumbotron/index.tsx b/explorer/src/pages/Home/components/Jumbotron/index.tsx
index b8dddb84..f1d10ba0 100644
--- a/explorer/src/pages/Home/components/Jumbotron/index.tsx
+++ b/explorer/src/pages/Home/components/Jumbotron/index.tsx
@@ -1,39 +1,46 @@
 import { t } from "i18next";
-import { ArrowUpRight } from "lucide-react";
+import { ArrowUpRight, ChevronRight } from "lucide-react";
 import { Trans } from "react-i18next";
 
 import { Button } from "@/components/Buttons";
 import { EButtonType } from "@/components/Buttons/enum";
+import { Link } from "@/components/Link";
 import { SearchInput } from "@/components/SearchInput";
 import { veraxLink } from "@/constants";
+import { APP_ROUTES } from "@/routes/constants";
 
 export const Jumbotron: React.FC = () => {
   return (
-    <div className="w-full flex flex-col gap-6 relative">
-      <p className="self-stretch text-text-primary text-[2rem] font-medium leading-[110%] lg:leading-[3rem] md:text-4xl lg:text-[2.75rem] md:font-semibold dark:text-whiteDefault">
+    <div className="flex flex-col gap-6 lg:grid lg:grid-cols-[1fr_min-content] lg:auto-rows-auto">
+      <p className="self-stretch text-text-primary text-[2rem] font-medium leading-[110%] lg:leading-[3rem] md:text-4xl lg:text-[2.75rem] md:font-semibold dark:text-whiteDefault lg:col-span-2">
         {t("home.title")}
       </p>
-      <p className="self-stretch text-text-tertiary text-base not-italic font-normal leading-[140%] max-w-[32.5rem]">
+      <p className="self-stretch text-text-tertiary text-base not-italic font-normal leading-[140%] max-w-[32.5rem] lg:row-start-2">
         {t("home.description")}
       </p>
-      <div>
-        <div className="flex flex-col items-start sm:flex-row sm:items-center gap-4">
-          <Button
-            name={t("common.actions.learnMore")}
-            handler={() => window.open(veraxLink, "_blank")}
-            buttonType={EButtonType.PRIMARY_LIME}
-            iconRight={<ArrowUpRight />}
-            height="h-10"
-          />
-          <p className="text-text-tertiary text-base not-italic font-normal leading-[140%]">
-            <Trans i18nKey="home.exploreEcosystem" components={{ bold: <strong /> }} />
-          </p>
-        </div>
+      <div className="flex flex-col items-start sm:flex-row sm:items-center gap-4 lg:col-start-1 lg:row-start-3">
+        <Button
+          name={t("common.actions.learnMore")}
+          handler={() => window.open(veraxLink, "_blank")}
+          buttonType={EButtonType.PRIMARY_LIME}
+          iconRight={<ArrowUpRight />}
+          height="h-10"
+        />
+        <p className="text-text-tertiary text-base not-italic font-normal leading-[140%]">
+          <Trans i18nKey="home.exploreEcosystem" components={{ bold: <strong /> }} />
+        </p>
       </div>
       <SearchInput
-        className="pl-2 pr-1 py-2 md:max-w-full lg:absolute lg:w-[30rem] lg:bottom-0 lg:right-0 xl:w-[35.5625rem]"
+        className="mt-2 pl-2 pr-1 py-2 md:max-w-full lg:w-[30rem] lg:mt-0 lg:col-start-2 lg:row-start-2 xl:w-[35.5625rem] lg:justify-self-end"
         height="h-10"
       />
+      <Link
+        to={APP_ROUTES.MY_ATTESTATIONS}
+        className="flex w-fit justify-center items-center gap-2 rounded-md text-text-tertiary text-base not-italic font-semibold lg:row-start-3 lg:justify-self-end transition-opacity hover:underline hover:opacity-80"
+      >
+        {t("common.actions.viewMyAttestations")}
+        <ChevronRight />
+      </Link>
     </div>
   );
 };