Apps now called Data Widgets, add a space between itheum explorer on …

…title, HeaderComponent supports new optional subTitle prop

src/components/Layout/HeaderComponent.tsx

@@ -2,6 +2,7 @@ import React, { JSX } from "react";
 
 type HeaderProps = {
   pageTitle: string;
+  subTitle?: string;
   hasImage: boolean;
   isAnimated?: boolean;
   imgSrc?: string;
@@ -12,11 +13,12 @@ type HeaderProps = {
   children: React.ReactNode;
 };
 export const HeaderComponent: React.FC<HeaderProps> = (props: HeaderProps) => {
-  const { pageTitle, isAnimated, hasImage, imgSrc, animation, altImageAttribute, pageSubtitle, dataNftCount, children } = props;
+  const { pageTitle, subTitle, isAnimated, hasImage, imgSrc, animation, altImageAttribute, pageSubtitle, dataNftCount, children } = props;
   return (
     <div className="flex justify-center py-4">
       <div className="flex flex-col w-full">
         <h1 className="py-4 mb-0">{pageTitle}</h1>
+        {subTitle && <p className="mb-3">{subTitle}</p>}
         <div className={hasImage ? "z-[-1] border-[0.5px] dark:border-slate-100/30 border-slate-300 rounded-[3rem]" : "hidden"}>
           {isAnimated && <>{animation}</>}
           <img className="rounded-[3rem] 3xl:h-[375px] w-full " src={imgSrc} alt={altImageAttribute} />

src/components/Layout/Navbar.tsx

@@ -62,7 +62,7 @@ export const Navbar = () => {
         <Link className="flex flex-row items-center" to={isLoggedIn ? routeNames.home : routeNames.home}>
           <img src={theme === "dark" ? darkLogo : theme === "system" && systemTheme === "dark" ? darkLogo : lightLogo} className="w-[45px] h-auto" />
           <span className="text-black dark:!text-white pl-2 md:text-xl text-base">Itheum</span>
-          <span className="text-black dark:!text-white font-semibold md:text-xl text-base">Explorer</span>
+          <span className="text-black dark:!text-white font-semibold md:text-xl text-base">&nbsp;Explorer</span>
         </Link>
       </div>
 
@@ -76,7 +76,7 @@ export const Navbar = () => {
             </Link>
           </NavigationMenuItem>
           <NavigationMenuItem>
-            <NavigationMenuTrigger>App Marketplace</NavigationMenuTrigger>
+            <NavigationMenuTrigger>Data Widget Marketplace</NavigationMenuTrigger>
             <NavigationMenuContent>
               <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
                 {APP_MAPPINGS.filter((app) => SUPPORTED_APPS.includes(app.routeKey)).map((item) => (
@@ -199,7 +199,7 @@ export const Navbar = () => {
             </DropdownMenuGroup>
             <DropdownMenuLabel className="flex flex-row items-center">
               <Store className="mr-2 h-4 w-4" />
-              <span>App Marketplace</span>
+              <span>Data Widget Marketplace</span>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuGroup>

src/pages/AppMarketplace/ItheumTrailblazer/ItheumTrailblazer.tsx

@@ -136,7 +136,7 @@ export const ItheumTrailblazer = () => {
       hasImage={true}
       imgSrc={headerHero}
       altImageAttribute={"itheumTrailblazer"}
-      pageSubtitle={"Data NFTs that Unlock this App"}
+      pageSubtitle={"Data NFTs that Unlock this Itheum Data Widget"}
       dataNftCount={itDataNfts.length}>
       {itDataNfts.length > 0 ? (
         itDataNfts.map((dataNft, index) => (

src/pages/AppMarketplace/MultiversxBubbles/MultiversxBubbles.tsx

@@ -145,7 +145,7 @@ export const MultiversxBubbles = () => {
       hasImage={true}
       imgSrc={headerHero}
       altImageAttribute={"bubbleMap"}
-      pageSubtitle={"Data NFTs that Unlock this App"}
+      pageSubtitle={"Data NFTs that Unlock this Itheum Data Widget"}
       dataNftCount={dataNfts.length}>
       {dataNfts.length > 0 ? (
         dataNfts.map((dataNft, index) => (

src/pages/AppMarketplace/MultiversxInfographics/index.tsx

@@ -167,7 +167,7 @@ export const MultiversxInfographics = () => {
       hasImage={true}
       imgSrc={headerHero}
       altImageAttribute={"mvxInfographics"}
-      pageSubtitle={"Data NFTs that Unlock this App"}
+      pageSubtitle={"Data NFTs that Unlock this Itheum Data Widget"}
       dataNftCount={dataNfts.length}>
       {dataNfts.length > 0 ? (
         dataNfts.map((dataNft, index) => (

src/pages/AppMarketplace/NFTunes/index.tsx

@@ -148,7 +148,7 @@ export const NFTunes = () => {
       imgSrc={nfTunesBanner}
       animation={imgAnimation}
       altImageAttribute={"NF-Tunes application"}
-      pageSubtitle={"Data NFTs that Unlock this App"}
+      pageSubtitle={"Data NFTs that Unlock this Itheum Data Widget"}
       dataNftCount={dataNfts.length}>
       {dataNfts.length > 0 ? (
         dataNfts.map((dataNft, index) => (

src/pages/Home.tsx

@@ -29,19 +29,19 @@ export const Home = () => {
   // }, [appVersion]);
 
   return (
-    <HeaderComponent pageTitle={"App Marketplace"} hasImage={false}>
+    <HeaderComponent pageTitle={"Data Widget Marketplace"} subTitle={"Itheum Data Widgets are lightweight apps powered by Data NFTs, enabling creative ways to open, visualize and discover the potential of the raw data found within Data NFTs."} hasImage={false}>
       {APP_MAPPINGS.filter((app) => SUPPORTED_APPS.includes(app.routeKey)).map((item) => (
-        <div key={item.routeKey} className="mb-3 w-[341px]">
+        <div key={item.routeKey} className="mb-10 w-[341px]">
           <div className="mb-4 border-[0.5px] rounded-t-[30px] border-neutral-500/90">
             <img className="w-[464.29px] h-[250px] rounded-t-[30px]" src={item.img} alt="Apps" />
           </div>
           <h3 className="!font-[Clash-Medium]">{item.appName}</h3>
           <p className="h-[100px] dark:text-slate-100/90 text-slate-500 font-[Satoshi-Light] mt-1">{item.desc}</p>
           <Link to={returnRoute(item.routeKey)} className="text-base hover:!no-underline hover:text-black">
-            <div className="w-[121px] relative  bg-gradient-to-r from-yellow-300 to-orange-500 px-[1px] py-[1px] rounded-md justify-center ">
+            <div className="w-[141px] relative  bg-gradient-to-r from-yellow-300 to-orange-500 px-[1px] py-[1px] rounded-md justify-center ">
               <div className="dark:bg-black bg-slate-50 rounded-md ">
                 <Button className="relative left-2 bottom-1.5 text-base bg-gradient-to-r from-yellow-300 to-orange-500 transition ease-in-out delay-150 duration-300 hover:translate-y-1.5 hover:-translate-x-[6px] hover:scale-100">
-                  Launch App
+                  Launch Widget
                 </Button>
               </div>
             </div>

src/pages/MultiversxInfographics.tsx

@@ -175,7 +175,7 @@ export const MultiversxInfographics = () => {
       hasImage={true}
       imgSrc={headerHero}
       altImageAttribute={"mvxInfographics"}
-      pageSubtitle={"Data NFTs that Unlock this App"}
+      pageSubtitle={"Data NFTs that Unlock this Itheum Data Widget"}
       dataNftCount={dataNfts.length}>
       {dataNfts.length > 0 ? (
         dataNfts.map((dataNft, index) => (

src/pages/MyWallet.tsx

@@ -147,7 +147,7 @@ export const MyWallet = () => {
                     <strong>If you know and trust this Data Creator,</strong> then it is advisable to the use the Data DEX "Wallet" feature to download the
                     original file (at your own risk). <br />
                     <br />
-                    Alternatively, <strong>as the safest option, only use official apps in the App Marketplace</strong> (accessible via the Header Menu in this
+                    Alternatively, <strong>as the safest option, only use official apps in the Data Widget Marketplace</strong> (accessible via the Header Menu in this
                     Explorer app). These apps automatically and safely visualize Data NFTs from verified Data Creators.
                   </div>
                 )}

src/pages/PlayStationGamer.tsx

@@ -284,7 +284,7 @@ export const PlayStationGamer = () => {
   console.log("activeGamerData", activeGamerData);
 
   return (
-    <HeaderComponent pageTitle={"PlayStation Gamer Passport"} hasImage={false} pageSubtitle={"Data NFTs that Unlock this App"} dataNftCount={ccDataNfts.length}>
+    <HeaderComponent pageTitle={"PlayStation Gamer Passport"} hasImage={false} pageSubtitle={"Data NFTs that Unlock this Itheum Data Widget"} dataNftCount={ccDataNfts.length}>
       {ccDataNfts.length > 0 ? (
         ccDataNfts.map((dataNft, index) => (
           <DataNftCard key={index} index={index} dataNft={dataNft} isLoading={isLoading} owned={flags[index]} viewData={viewData} />