refactor the home and search header

packages/apps/docs/src/components/Layout/Landing/components/Headers/HomeHeader.tsx

@@ -1,7 +1,11 @@
 import { GradientText, Heading, Stack } from '@kadena/react-ui';
 
-import { mostPopularWrapper } from './style.css';
-import { StyledHeader, SubHeader, Wrapper } from './styles';
+import {
+  headerClass,
+  mostPopularWrapper,
+  subheaderClass,
+  wrapperClass,
+} from './style.css';
 
 import { MostPopular } from '@/components/MostPopular';
 import { IMostPopularPage } from '@/types/MostPopularData';
@@ -13,8 +17,8 @@ interface IProps {
 
 export const HomeHeader: FC<IProps> = ({ popularPages }) => {
   return (
-    <StyledHeader>
-      <Wrapper>
+    <header className={headerClass}>
+      <div className={wrapperClass}>
         <Heading as="h1" variant="h2">
           Kadena
         </Heading>
@@ -23,17 +27,17 @@ export const HomeHeader: FC<IProps> = ({ popularPages }) => {
             <Heading as="h2" variant="h4">
               Build your <GradientText>own</GradientText> Internet
             </Heading>
-            <SubHeader>
+            <span className={subheaderClass}>
               Explore our guides and examples to build on Kadena
-            </SubHeader>
+            </span>
           </Stack>
           {popularPages.length > 0 && (
             <div className={mostPopularWrapper}>
               <MostPopular pages={popularPages} title="Most viewed docs" />
             </div>
           )}
         </Stack>
-      </Wrapper>
-    </StyledHeader>
+      </div>
+    </header>
   );
 };

packages/apps/docs/src/components/Layout/Landing/components/Headers/SearchHeader.tsx

@@ -1,6 +1,6 @@
 import { GradientText, Heading, Stack } from '@kadena/react-ui';
 
-import { StyledHeader, SubHeader, Wrapper } from './styles';
+import { headerClass, subheaderClass, wrapperClass } from './style.css';
 
 import React, { FC, ReactNode } from 'react';
 
@@ -10,19 +10,21 @@ interface IProps {
 
 export const SearchHeader: FC<IProps> = ({ children }) => {
   return (
-    <StyledHeader>
-      <Wrapper>
+    <header className={headerClass}>
+      <div className={wrapperClass}>
         <Heading as="h1" variant="h2">
           Search spaces
         </Heading>
         <Stack direction="column" gap="$2xs">
           <Heading as="h2" variant="h4">
             Traditional or the <GradientText>new</GradientText> way
           </Heading>
-          <SubHeader>Explore our content across spaces</SubHeader>
+          <span className={subheaderClass}>
+            Explore our content across spaces
+          </span>
           {children}
         </Stack>
-      </Wrapper>
-    </StyledHeader>
+      </div>
+    </header>
   );
 };

packages/apps/docs/src/components/Layout/Landing/components/Headers/style.css.ts

@@ -1,5 +1,6 @@
-import { sprinkles } from '@kadena/react-ui/theme';
+import { darkThemeClass, sprinkles } from '@kadena/react-ui/theme';
 
+import { $$pageWidth } from '@/components/Layout/global.css';
 import { style } from '@vanilla-extract/css';
 
 export const mostPopularWrapper = style([
@@ -21,3 +22,59 @@ export const mostPopularWrapper = style([
     },
   },
 ]);
+
+export const headerClass = style([
+  sprinkles({
+    position: 'relative',
+  }),
+  {
+    gridArea: 'pageheader',
+    zIndex: 2,
+    selectors: {
+      '&::before': {
+        content: '',
+        position: 'absolute',
+        inset: 0,
+        background: 'url("/assets/bg-horizontal.png")',
+        backgroundRepeat: 'no-repeat',
+        backgroundPositionX: 'center',
+        backgroundPositionY: '0%',
+        transform: 'scale(-1, -1)',
+      },
+    },
+  },
+]);
+
+export const wrapperClass = style([
+  sprinkles({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    width: '100%',
+    paddingTop: '$20',
+    paddingRight: '$12',
+    paddingBottom: '$10',
+    paddingLeft: '$4',
+    marginX: 'auto',
+    marginBottom: '$16',
+  }),
+  {
+    maxWidth: $$pageWidth,
+    backgroundColor: 'rgba(250,250,250, .8)',
+  },
+]);
+
+export const subheaderClass = style([
+  sprinkles({
+    color: '$neutral3',
+    fontSize: '$xl',
+  }),
+  {
+    selectors: {
+      [`${darkThemeClass} &`]: {
+        color: '$neutral4',
+      },
+    },
+  },
+]);