chore(launchpad): reuse ImageBackgroundLogoText on TNS, NFT Launchpad and Launchpad ERC20

packages/components/ImageBackgroundLogoText.tsx

@@ -0,0 +1,38 @@
+import { FC } from "react";
+import { ImageBackground, ImageSourcePropType, TextStyle } from "react-native";
+
+import { BrandText } from "./BrandText";
+import { SVG } from "./SVG";
+import { SpacerColumn } from "./spacer";
+
+import logoSVG from "@/assets/logos/logo-white.svg";
+import { useMaxResolution } from "@/hooks/useMaxResolution";
+import { fontSemibold22, fontSemibold28 } from "@/utils/style/fonts";
+import { RESPONSIVE_BREAKPOINT_S } from "@/utils/style/layout";
+
+export const ImageBackgroundLogoText: FC<{
+  text: string;
+  backgroundImage: ImageSourcePropType;
+}> = ({ text, backgroundImage }) => {
+  const { width } = useMaxResolution();
+  const isSmallScreen = width < RESPONSIVE_BREAKPOINT_S;
+  const logoSize = isSmallScreen ? 70 : 88;
+  const fontStyle: TextStyle = isSmallScreen ? fontSemibold22 : fontSemibold28;
+  const height = 380;
+
+  return (
+    <ImageBackground
+      source={backgroundImage}
+      style={{
+        alignItems: "center",
+        justifyContent: "center",
+        height,
+        width: "100%",
+      }}
+    >
+      <SVG source={logoSVG} width={logoSize} height={logoSize} />
+      <SpacerColumn size={1} />
+      <BrandText style={fontStyle}>{text}</BrandText>
+    </ImageBackground>
+  );
+};

packages/screens/Launchpad/LaunchpadApply/LaunchpadApplyScreen.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
 
-import { LaunchpadBanner } from "./LaunchpadCreate/components/LaunchpadBanner";
-
+import LaunchpadBannerImage from "@/assets/banners/launchpad.jpg";
 import { BrandText } from "@/components/BrandText";
+import { ImageBackgroundLogoText } from "@/components/ImageBackgroundLogoText";
 import { ScreenContainer } from "@/components/ScreenContainer";
 import {
   LargeBoxButton,
@@ -36,7 +36,10 @@ const BUTTONS: LargeBoxButtonProps[] = [
 export const LaunchpadApplyScreen: ScreenFC<"LaunchpadApply"> = () => {
   return (
     <ScreenContainer>
-      <LaunchpadBanner />
+      <ImageBackgroundLogoText
+        backgroundImage={LaunchpadBannerImage}
+        text="Apply to Launchpad"
+      />
       <SpacerColumn size={2} />
       <BrandText style={fontSemibold28}>Welcome</BrandText>
       <SpacerColumn size={2} />

packages/screens/LaunchpadERC20/LaunchpadERC20Screen.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
 
-import { LaunchpadERC20Banner } from "./component/LaunchpadERC20Banner";
-
+import LaunchpadERC20BannerImage from "@/assets/banners/launchpadERC20.jpg";
 import { BrandText } from "@/components/BrandText";
+import { ImageBackgroundLogoText } from "@/components/ImageBackgroundLogoText";
 import { OmniLink } from "@/components/OmniLink";
 import { ScreenContainer } from "@/components/ScreenContainer";
 import {
@@ -43,7 +43,10 @@ export const LaunchpadERC20Screen: ScreenFC<"LaunchpadERC20"> = () => {
       forceNetworkFeatures={[NetworkFeature.LaunchpadERC20]}
       forceNetworkKind={NetworkKind.Gno}
     >
-      <LaunchpadERC20Banner />
+      <ImageBackgroundLogoText
+        backgroundImage={LaunchpadERC20BannerImage}
+        text="Launchpad ERC20 Platform"
+      />
 
       <SpacerColumn size={2} />
 

packages/screens/TeritoriNameService/TNSHomeScreen.tsx

@@ -15,7 +15,7 @@ import registerSVG from "../../../assets/icons/register-neutral77.svg";
 import useSelectedWallet from "../../hooks/useSelectedWallet";
 
 import { BrandText } from "@/components/BrandText";
-import { IntroLogoText } from "@/components/IntroLogoText";
+import { ImageBackgroundLogoText } from "@/components/ImageBackgroundLogoText";
 import { ScreenContainer } from "@/components/ScreenContainer";
 import { ActivityTable } from "@/components/activity/ActivityTable";
 import { FlowCard } from "@/components/cards/FlowCard";
@@ -139,8 +139,8 @@ export const TNSHomeScreen: ScreenFC<"TNSHome"> = ({ route }) => {
       responsive
     >
       <View>
-        <IntroLogoText
-          title={`${selectedNetwork?.displayName} Name Service`}
+        <ImageBackgroundLogoText
+          text={`${selectedNetwork?.displayName} Name Service`}
           backgroundImage={TNSBannerPNG}
         />
         <View