Merge pull request #2360 from oasisprotocol/kaja/homepage-content-width

Homepage design updates

Author: kaja-osojnik

.changelog/2360.trivial.md

@@ -0,0 +1 @@
+Homepage design updates.

src/app/pages/HomePage/EcosystemCard.tsx

@@ -128,8 +128,8 @@ export const EcosystemCard: FC<EcosystemCardProps> = ({
       </CardContent>
       <CardFooter>
         {footer || (
-          <>
-            <Button variant="link" size="lg" className="flex-1" asChild>
+          <div className="flex w-full gap-4">
+            <Button variant="outline" size="lg" className="flex-1" asChild>
               <RouterLink to={RouteUtils.getDashboardRoute({ network: 'testnet', layer })}>
                 {t('common.testnet')}
               </RouterLink>
@@ -140,7 +140,7 @@ export const EcosystemCard: FC<EcosystemCardProps> = ({
                 <ArrowRight />
               </RouterLink>
             </Button>
-          </>
+          </div>
         )}
       </CardFooter>
     </Card>

src/app/pages/HomePage/HomeSearch.tsx

@@ -16,7 +16,7 @@ export const HomeSearch: FC = () => {
     <div
       id="search"
       style={{ backgroundImage: `url(${SearchBg})` }}
-      className="py-12 px-4 md:px-8 md:p-24 bg-[#DFDEF5] bg-cover bg-center bg-no-repeat rounded-md mb-4 md:mb-6"
+      className="py-12 px-4 md:px-8 xl:px-60 md:p-24 bg-[#DFDEF5] bg-cover bg-center bg-no-repeat rounded-md mb-4 md:mb-6"
     >
       <Typography
         variant="h2"

src/app/pages/HomePage/PontusXCard.tsx

@@ -64,8 +64,8 @@ export const PontusXCard: FC = () => {
       latestBlock={pontusxStatusQuery?.data?.data?.latest_block}
       activeNodes={pontusxStatusQuery?.data?.data?.active_nodes}
       footer={
-        <>
-          <Button variant="link" size="lg" className="flex-1" asChild>
+        <div className="flex w-full gap-4">
+          <Button variant="outline" size="lg" className="flex-1" asChild>
             <RouterLink to={RouteUtils.getDashboardRoute({ network: 'testnet', layer: 'pontusxdev' })}>
               {t('common.devnet')}
             </RouterLink>
@@ -76,7 +76,7 @@ export const PontusXCard: FC = () => {
               <ArrowRight />
             </RouterLink>
           </Button>
-        </>
+        </div>
       }
     />
   )

src/app/pages/HomePage/index.tsx

@@ -18,8 +18,8 @@ export const HomePage: FC = () => {
     <>
       <BuildBanner />
       <NetworkOfflineBanner wantedNetwork={network} />
-      <Header sticky={false} />
-      <div className="flex flex-col px-2 md:px-6">
+      <Header />
+      <div className="flex flex-col border-8 md:border-[15px] px-0 md:px-[4%] pt-4 md:pt-7 md:border-t-0 border-t-0 border-theme-layout-accent">
         <HomeSearch />
         <Ecosystem />
         <div className="flex gap-6 flex-col md:flex-row">