feat: header + welcome section

src/constants/menuItems.ts

@@ -0,0 +1,20 @@
+type MenuItem = {
+  href?: string
+  label: string
+  to?: string
+}
+
+export const menuItems = [
+  {
+    label: 'Home',
+    to: '/#top',
+  },
+  {
+    label: 'Documentation',
+    href: 'https://docs.dappboster.io',
+  },
+  {
+    label: 'Examples',
+    to: '/#examples',
+  },
+] as MenuItem[]

src/sharedComponents/ui/Header.tsx

@@ -14,9 +14,15 @@ import { useTheme } from 'next-themes'
 import { MainMenu } from '@/src/sharedComponents/ui/MainMenu'
 import { ConnectWalletButton } from '@/src/sharedComponents/web3/Web3Provider'
 
+/**
+ * Note: you can remove all the custom styles and just use the default Header
+ * component from db-ui-toolkit (or just create your own)
+ */
 const Wrapper = styled(BaseHeader)`
-  height: 48px;
-  margin-top: 48px;
+  height: var(--base-header-height);
+  padding-top: 14px;
+  position: relative;
+  z-index: 10;
 `
 
 const Inner = styled(InnerContainer)`
@@ -65,10 +71,7 @@ export const Header: React.FC<PropsWithChildren> = ({ ...restProps }) => {
         </Start>
         <Menu />
         <End>
-          <SwitchThemeButton
-            onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
-            theme={theme}
-          />
+          <SwitchThemeButton onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')} />
           <ConnectWalletButton />
         </End>
       </Inner>

src/sharedComponents/ui/MainMenu.tsx

@@ -1,15 +1,17 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 import { Link } from '@tanstack/react-router'
 
+import { menuItems } from '@/src/constants/menuItems'
+
 const Wrapper = styled.nav`
   align-items: center;
   display: flex;
   column-gap: calc(var(--base-gap) * 5);
   height: 100%;
 `
 
-const Item = styled(Link)`
+const LinkCSS = css`
   color: var(--theme-main-menu-item-color);
   font-size: 1.6rem;
   font-weight: 500;
@@ -25,13 +27,32 @@ const Item = styled(Link)`
   }
 `
 
+const Item = styled(Link)`
+  ${LinkCSS}
+`
+
+const ExternalItem = styled.a`
+  ${LinkCSS}
+`
+
 export const MainMenu = ({ ...restProps }) => {
   return (
     <Wrapper {...restProps}>
-      <Item to="/">Home</Item>
-      <Item to="/tokens">Tokens</Item>
-      <Item to="/about">About</Item>
-      <Item to="/contact">Contact</Item>
+      {menuItems.map(({ href, label, to }, index) => {
+        const key = `menuItem_${index}`
+
+        return to ? (
+          <Item key={key} to={to}>
+            {label}
+          </Item>
+        ) : href ? (
+          <ExternalItem href={href} key={key} rel="noopener noreferrer" target="_blank">
+            {label}
+          </ExternalItem>
+        ) : (
+          <></>
+        )
+      })}
     </Wrapper>
   )
 }