From e64dd92381c252306a4e0ccacc32606da36ccb39 Mon Sep 17 00:00:00 2001
From: voenkomatiwe <71823442+voenkomatiwe@users.noreply.github.com>
Date: Fri, 5 Jan 2024 14:54:48 +0200
Subject: [PATCH] fix: jumbotron update, and mobile header (#503)

---
 explorer/src/assets/locales/en/en.json        |  8 ++--
 explorer/src/components/Header/index.tsx      | 10 +++--
 explorer/src/components/SearchInput/index.tsx |  6 ++-
 explorer/src/constants/index.ts               |  4 +-
 .../pages/Home/components/Issuers/index.tsx   | 20 ++--------
 .../pages/Home/components/Jumbotron/index.tsx | 34 ++++++++++++++++
 .../Home/components/TitleSearch/index.tsx     | 39 -------------------
 explorer/src/pages/Home/index.tsx             |  6 +--
 8 files changed, 58 insertions(+), 69 deletions(-)
 create mode 100644 explorer/src/pages/Home/components/Jumbotron/index.tsx
 delete mode 100644 explorer/src/pages/Home/components/TitleSearch/index.tsx

diff --git a/explorer/src/assets/locales/en/en.json b/explorer/src/assets/locales/en/en.json
index 47ca882d..3987824e 100644
--- a/explorer/src/assets/locales/en/en.json
+++ b/explorer/src/assets/locales/en/en.json
@@ -50,11 +50,9 @@
     "system": "System"
   },
   "home": {
-    "title": "Verax is an open source, public registry for storing attestations",
-    "issuers": {
-      "title": "Explore the ways of getting the attestation",
-      "description": "Find out how you can get attestations from the following providers that you can use across the ecosystem"
-    },
+    "title": "Your Reputation Under Your Control",
+    "description": "Explore the ecosystem to find out how you can unlock your data from across the web and share it with the world on your own terms",
+    "exploreEcosystem": "or explore the ecosystem",
     "info": {
       "issueYourAttestation": "Want to issue your own attestation?",
       "aboutVerax": "Want to know more about Verax?"
diff --git a/explorer/src/components/Header/index.tsx b/explorer/src/components/Header/index.tsx
index 47e2640f..6a383ad7 100644
--- a/explorer/src/components/Header/index.tsx
+++ b/explorer/src/components/Header/index.tsx
@@ -53,7 +53,11 @@ export const Header: React.FC<HeaderProps> = ({ isOpened, setIsOpened }) => {
       <div className="justify-between items-center inline-flex gap-4">
         <div className="justify-start items-center gap-6 flex self-stretch">
           <Link to={APP_ROUTES.HOME} className="shrink-0 hover:opacity-70">
-            {isDarkMode ? <VeraxLogoDarkMode /> : <VeraxLogo />}
+            {isDarkMode ? (
+              <VeraxLogoDarkMode className="w-[76.434px] h-6 sm:h-auto sm:w-auto" />
+            ) : (
+              <VeraxLogo className="w-[76.434px] h-6 sm:h-auto sm:w-auto" />
+            )}
           </Link>
           {!isAdaptive && <NavigationList />}
         </div>
@@ -81,14 +85,14 @@ export const Header: React.FC<HeaderProps> = ({ isOpened, setIsOpened }) => {
           <ConnectKitButton.Custom>
             {({ isConnected, show }) => {
               if (!show) return <></>;
-
               return (
                 <Button
                   name={title}
                   handler={show}
                   buttonType={EButtonType.OUTLINED}
                   iconRight={isConnected && !isAdaptive ? <ChevronDown /> : undefined}
-                  className="whitespace-nowrap"
+                  isSmall={screen.sm}
+                  className="whitespace-nowrap h-9 sm:h-auto !px-3 sm:!px-4"
                 />
               );
             }}
diff --git a/explorer/src/components/SearchInput/index.tsx b/explorer/src/components/SearchInput/index.tsx
index ce13c88b..857bee64 100644
--- a/explorer/src/components/SearchInput/index.tsx
+++ b/explorer/src/components/SearchInput/index.tsx
@@ -8,7 +8,7 @@ import { keyboard } from "@/constants/keyboard";
 import { EQueryParams } from "@/enums/queryParams";
 import { useHandleSearch } from "@/hooks/useHandleSearch";
 
-export const SearchInput: React.FC = () => {
+export const SearchInput: React.FC<{ className?: string }> = ({ className }) => {
   const [searchParams] = useSearchParams();
   const search = searchParams.get(EQueryParams.SEARCH_QUERY);
   const [searchQuery, setSearchQuery] = useState<string>(search || EMPTY_STRING);
@@ -21,7 +21,9 @@ export const SearchInput: React.FC = () => {
   }, [search]);
 
   return (
-    <div className="w-full md:max-w-[370px] xl:min-w-[auto] h-12 p-2 bg-white dark:bg-transparent rounded-md border border-border-card dark:border-border-cardDark justify-between items-center inline-flex focus-within:border-border-inputFocus">
+    <div
+      className={`w-full md:max-w-[370px] xl:min-w-[auto] h-12 p-2 bg-white dark:bg-transparent rounded-md border border-border-card dark:border-border-cardDark justify-between items-center inline-flex focus-within:border-border-inputFocus ${className}`}
+    >
       <input
         value={searchQuery}
         onChange={(event) => setSearchQuery(event.target.value)}
diff --git a/explorer/src/constants/index.ts b/explorer/src/constants/index.ts
index 70572505..dd9db855 100644
--- a/explorer/src/constants/index.ts
+++ b/explorer/src/constants/index.ts
@@ -12,7 +12,7 @@ export const CURRENT_PAGE_DEFAULT = 1;
 export const THOUSAND = 1e3;
 export const BILLION = 1e9;
 
-export const links: { [key: number]: { trx?: string; address: string } } = {
+export const links: Record<number, { trx?: string; address: string }> = {
   [linea.id]: {
     trx: "https://lineascan.build/trx",
     address: "https://lineascan.build/address",
@@ -27,3 +27,5 @@ export const links: { [key: number]: { trx?: string; address: string } } = {
     address: "https://testnet.arbiscan.io/address",
   },
 };
+
+export const veraxLink = "https://ver.ax";
diff --git a/explorer/src/pages/Home/components/Issuers/index.tsx b/explorer/src/pages/Home/components/Issuers/index.tsx
index f44e4648..64175433 100644
--- a/explorer/src/pages/Home/components/Issuers/index.tsx
+++ b/explorer/src/pages/Home/components/Issuers/index.tsx
@@ -1,24 +1,12 @@
-import { t } from "i18next";
-
 import { issuersData } from "../../data";
 import { Issuer } from "../Issuer";
 
 export const Issuers: React.FC = () => {
   return (
-    <div className="flex flex-col gap-10 md:gap-12">
-      <div className="flex flex-col gap-4 md:gap-6">
-        <h2 className="text-center text-2xl md:text-[2rem] font-semibold text-blackDefault dark:text-whiteDefault">
-          {t("home.issuers.title")}
-        </h2>
-        <h3 className="w-[30rem] max-w-full m-auto text-center text-base text-text-darkGrey dark:text-tertiary">
-          {t("home.issuers.description")}
-        </h3>
-      </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
-        {issuersData.map((issuer) => (
-          <Issuer issuer={issuer} key={issuer.address} />
-        ))}
-      </div>
+    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+      {issuersData.map((issuer) => (
+        <Issuer issuer={issuer} key={issuer.address} />
+      ))}
     </div>
   );
 };
diff --git a/explorer/src/pages/Home/components/Jumbotron/index.tsx b/explorer/src/pages/Home/components/Jumbotron/index.tsx
new file mode 100644
index 00000000..5fa8330b
--- /dev/null
+++ b/explorer/src/pages/Home/components/Jumbotron/index.tsx
@@ -0,0 +1,34 @@
+import { t } from "i18next";
+import { ArrowUpRight } from "lucide-react";
+
+import { Button } from "@/components/Buttons";
+import { EButtonType } from "@/components/Buttons/enum";
+import { SearchInput } from "@/components/SearchInput";
+import { veraxLink } from "@/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-2xl not-italic font-medium leading-[102%] tracking-[-0.96px] md:text-4xl lg:text-[2.75rem] md:font-semibold dark:text-whiteDefault">
+        {t("home.title")}
+      </p>
+      <p className="self-stretch text-text-tertiary text-base not-italic font-normal leading-[140%] max-w-[32.5rem]">
+        {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 />}
+          />
+          <p className="text-text-tertiary text-base not-italic font-normal leading-[140%]">
+            {t("home.exploreEcosystem")}
+          </p>
+        </div>
+      </div>
+      <SearchInput className="md:max-w-full lg:absolute lg:w-[30rem] lg:bottom-0 lg:right-0 xl:w-[35.5625rem]" />
+    </div>
+  );
+};
diff --git a/explorer/src/pages/Home/components/TitleSearch/index.tsx b/explorer/src/pages/Home/components/TitleSearch/index.tsx
deleted file mode 100644
index 20fe9929..00000000
--- a/explorer/src/pages/Home/components/TitleSearch/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { t } from "i18next";
-import { Search } from "lucide-react";
-import { useState } from "react";
-
-import { Button } from "@/components/Buttons";
-import { EButtonType } from "@/components/Buttons/enum";
-import { EMPTY_STRING } from "@/constants";
-import { keyboard } from "@/constants/keyboard";
-import { useHandleSearch } from "@/hooks/useHandleSearch";
-
-export const TitleSearch: React.FC = () => {
-  const [searchQuery, setSearchQuery] = useState<string>(EMPTY_STRING);
-  const handleSearch = useHandleSearch();
-
-  return (
-    <div className="flex flex-col items-center justify-center h-[24.125rem] lg:h-[23rem] md:h-[22.375rem] bg-jumbotron rounded-[1.375rem] lg:rounded-[2.25rem] md:rounded-[2rem] mt-5 md:mt-6 gap-10 px-4 md:px-10">
-      <h1 className="text-center font-medium md:font-semibold text-[2rem] md:text-[2.5rem] lg:text-[2.75rem] lg:leading-[2.97rem] md:leading-[2.7rem] leading-[2.25rem] max-w-[52.5rem]">
-        {t("home.title")}
-      </h1>
-      <div className="flex flex-col md:flex-row w-full gap-2 max-w-[57.6875rem]">
-        <input
-          type="text"
-          value={searchQuery}
-          onChange={(event) => setSearchQuery(event.target.value)}
-          placeholder={t("common.inputPlaceholder.search")}
-          className="h-11 md:h-14 px-3 py-2 bg-surface-primary rounded-lg border-2 md:border-border-input border-surface-primary outline-none focus:border-border-inputFocus md:flex-1 placeholder:italic placeholder:text-text-quaternary text-text-input font-normal"
-          onKeyDown={(event) => event.key === keyboard.enter && handleSearch(searchQuery)}
-        />
-        <Button
-          name="Search"
-          handler={() => handleSearch(searchQuery)}
-          iconRight={<Search />}
-          buttonType={EButtonType.PRIMARY_BLACK}
-          height="h-12 md:h-14"
-        />
-      </div>
-    </div>
-  );
-};
diff --git a/explorer/src/pages/Home/index.tsx b/explorer/src/pages/Home/index.tsx
index 4c1739b6..e0bc8c9e 100644
--- a/explorer/src/pages/Home/index.tsx
+++ b/explorer/src/pages/Home/index.tsx
@@ -1,11 +1,11 @@
 import { Info } from "./components/Info";
 import { Issuers } from "./components/Issuers";
-import { TitleSearch } from "./components/TitleSearch";
+import { Jumbotron } from "./components/Jumbotron";
 
 export const Home = () => {
   return (
-    <div className="flex flex-col gap-14 md:gap-[4.5rem] container">
-      <TitleSearch />
+    <div className="flex flex-col gap-14 md:gap-[4.5rem] container mt-14 md:mt-12">
+      <Jumbotron />
       <Issuers />
       <Info />
     </div>