Create homepage footer banner

Author: buberdds

src/app/pages/HomePage/FooterBanner.tsx

@@ -0,0 +1,32 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
+import RoflAppsImg from './images/rofl-apps.webp'
+
+export const FooterBanner: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="w-full p-8 relative bg-primary rounded-md inline-flex justify-between items-center">
+      <div className="inline-flex flex-col justify-start items-start gap-4">
+        <div className="flex flex-col justify-start items-start gap-2 max-w-[390px]">
+          <div className="justify-start text-primary-foreground text-2xl font-bold">
+            {t('home.banner.offchainPerformance')} <br />
+            {t('home.banner.onchainTrust')}.
+          </div>
+          <div className="justify-start text-primary-foreground text-sm font-normal mb-2">
+            {t('home.banner.description')}
+          </div>
+          <Button color="secondary" variant="outline">
+            {t('home.banner.getStarted')}
+          </Button>
+        </div>
+      </div>
+      <img
+        alt={t('rofl.listTitle')}
+        className="hidden md:block left-[390px] top-0 absolute"
+        src={RoflAppsImg}
+      />
+    </div>
+  )
+}

src/app/pages/HomePage/images/rofl-apps.webp

@@ -7,6 +7,7 @@ import { useSearchQueryNetworkParam } from '../../hooks/useSearchQueryNetworkPar
 import { NetworkOfflineBanner } from '../../components/OfflineBanner'
 import { useIsApiReachable } from '../../components/OfflineBanner/hook'
 import { RoflAppsCard } from './RoflAppsCard'
+import { FooterBanner } from './FooterBanner'
 
 export const HomePage: FC = () => {
   const { t } = useTranslation()
@@ -20,6 +21,7 @@ export const HomePage: FC = () => {
       <div className="px-6">
         <Search disabled={!isApiReachable} />
         <RoflAppsCard />
+        <FooterBanner />
       </div>
       <Footer />
     </>

src/app/pages/HomePage/index.tsx

@@ -669,7 +669,13 @@
     "indexerUnavailable": "Data about {{ scope }} is currently not available. Please check back later.",
     "link": "Oasis Explorer Home",
     "nodeOutOfDateSince": "The explorer's gRPC node has not observed new blocks since {{ lastUpdate }}. Check status.oasis.io.",
-    "userOffline": "You are offline. We’re trying to reconnect."
+    "userOffline": "You are offline. We’re trying to reconnect.",
+    "banner": {
+      "offchainPerformance": "Offchain Performance.",
+      "onchainTrust": "Onchain Trust.",
+      "getStarted": "Get started with ROFL",
+      "description": "Build trustless apps with ROFL. Start quickly with templates. Manage everything from one interface."
+    }
   },
   "paratimes": {
     "activeNodes": "{{nodes}} active",

src/locales/en/translation.json

@@ -10,6 +10,12 @@ declare module '*.svg' {
   export default url
 }
 
+declare module '*.webp' {
+  /** Image URL */
+  const url: string
+  export default url
+}
+
 declare module 'bundle-text:*.svg' {
   /** Image content */
   const content: string