fix: jumbotron update, and mobile header (#503)

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?"

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"
                 />
               );
             }}

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)}

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";

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>
   );
 };

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>
+  );
+};

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>