Style search container

Author: buberdds

src/app/pages/HomePage/HomeSearch.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react'
+import { Search } from '../../components/Search'
+import { useTranslation } from 'react-i18next'
+import { useSearchQueryNetworkParam } from '../../hooks/useSearchQueryNetworkParam'
+import { useIsApiReachable } from '../../components/OfflineBanner/hook'
+
+import SearchBg from './images/search-bg.png'
+import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
+
+export const HomeSearch: FC = () => {
+  const { t } = useTranslation()
+  const { network } = useSearchQueryNetworkParam()
+  const isApiReachable = useIsApiReachable(network).reachable
+
+  return (
+    <div
+      id="search"
+      style={{ backgroundImage: `url(${SearchBg})` }}
+      className="py-12 px-8 md:p-24 bg-[#DFDEF5] bg-cover bg-center bg-no-repeat rounded-md"
+    >
+      <Typography
+        variant="h2"
+        className="text-center justify-start text-foreground text-2xl md:text-3xl font-semibold leading-8 mb-4 md:mb-8"
+      >
+        {t('home.search')}
+      </Typography>
+
+      <Search disabled={!isApiReachable} />
+    </div>
+  )
+}

src/app/pages/HomePage/RoflAppsCard.tsx

@@ -7,7 +7,7 @@ export const RoflAppsCard: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <Card variant="layout">
+    <Card variant="layout" className="md:mb-0">
       <CardHeader>
         <CardTitle>{t('rofl.listTitle')}</CardTitle>
       </CardHeader>

src/app/pages/HomePage/images/search-bg.png

@@ -1,25 +1,21 @@
 import { FC } from 'react'
-import { Search } from '../../components/Search'
 import { Footer } from '../../components/PageLayout/Footer'
-import { useTranslation } from 'react-i18next'
 import { BuildBanner } from '../../components/BuildBanner'
 import { useSearchQueryNetworkParam } from '../../hooks/useSearchQueryNetworkParam'
 import { NetworkOfflineBanner } from '../../components/OfflineBanner'
-import { useIsApiReachable } from '../../components/OfflineBanner/hook'
 import { RoflAppsCard } from './RoflAppsCard'
 import { FooterBanner } from './FooterBanner'
+import { HomeSearch } from './HomeSearch'
 
 export const HomePage: FC = () => {
-  const { t } = useTranslation()
   const { network } = useSearchQueryNetworkParam()
-  const isApiReachable = useIsApiReachable(network).reachable
 
   return (
     <>
       <BuildBanner />
       <NetworkOfflineBanner wantedNetwork={network} />
-      <div className="px-6">
-        <Search disabled={!isApiReachable} />
+      <div className="flex flex-col px-6 gap-6">
+        <HomeSearch />
         <RoflAppsCard />
         <FooterBanner />
       </div>

src/app/pages/HomePage/index.tsx

@@ -675,7 +675,8 @@
       "onchainTrust": "Onchain Trust.",
       "getStarted": "Get started with ROFL",
       "description": "Build trustless apps with ROFL. Start quickly with templates. Manage everything from one interface."
-    }
+    },
+    "search": "Search across all our networks"
   },
   "paratimes": {
     "activeNodes": "{{nodes}} active",