From 07fa9b4ccd94a1444963756b3bb6a528266f8ec2 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <gabriel@bootnode.dev>
Date: Wed, 19 Jun 2024 18:13:59 -0300
Subject: [PATCH 1/9] feat: base examples list

---
 src/pageComponents/home/Examples/List.tsx  | 41 ++++++++++++++++++++++
 src/pageComponents/home/Examples/index.tsx | 11 +++---
 src/styles/themes/light.tsx                |  4 +--
 3 files changed, 50 insertions(+), 6 deletions(-)
 create mode 100644 src/pageComponents/home/Examples/List.tsx

diff --git a/src/pageComponents/home/Examples/List.tsx b/src/pageComponents/home/Examples/List.tsx
new file mode 100644
index 00000000..cb545a3c
--- /dev/null
+++ b/src/pageComponents/home/Examples/List.tsx
@@ -0,0 +1,41 @@
+import React, { HTMLAttributes } from 'react'
+import styled from 'styled-components'
+
+const Wrapper = styled.div`
+  [data-theme='light'] & {
+    --theme-examples-list-background-color: #e2e0e766;
+  }
+
+  [data-theme='dark'] & {
+    --theme-examples-list-background-color: #292b43;
+  }
+
+  align-items: center;
+  background-color: var(--theme-examples-list-background-color);
+  border-radius: var(--base-border-radius-xl);
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  padding: calc(var(--base-gap) * 7);
+  row-gap: calc(var(--base-gap) * 5);
+  width: 1066px;
+`
+
+const Title = styled.h2`
+  color: var(--theme-color-text-primary);
+  font-size: 3.6rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0;
+`
+
+const List: React.FC<HTMLAttributes<HTMLDivElement>> = ({ ...restProps }) => {
+  return (
+    <Wrapper {...restProps}>
+      <Title>Built-in Features</Title>
+      <p>Here are some examples of how you can use the theme system.</p>
+    </Wrapper>
+  )
+}
+
+export default List
diff --git a/src/pageComponents/home/Examples/index.tsx b/src/pageComponents/home/Examples/index.tsx
index 9b6c94af..1e235c1a 100644
--- a/src/pageComponents/home/Examples/index.tsx
+++ b/src/pageComponents/home/Examples/index.tsx
@@ -8,6 +8,7 @@ import Avatar from '@/src/pageComponents/home/Examples/Items/Avatar'
 import BigNumberInput from '@/src/pageComponents/home/Examples/Items/BigNumberInput'
 import EnsName from '@/src/pageComponents/home/Examples/Items/EnsName'
 import Hash from '@/src/pageComponents/home/Examples/Items/Hash'
+import List from '@/src/pageComponents/home/Examples/List'
 
 const Wrapper = styled.section`
   background-color: var(--landing-page-main-background-color);
@@ -29,10 +30,12 @@ const Examples: React.FC = ({ ...restProps }) => {
   return (
     <Wrapper id="examples" {...restProps}>
       <InnerContainer>
-        <EnsName address={address} />
-        <Hash hash={address} />
-        <Avatar address={address} size={30} />
-        <BigNumberInput />
+        <List>
+          <EnsName address={address} />
+          <Hash hash={address} />
+          <Avatar address={address} size={30} />
+          <BigNumberInput />
+        </List>
       </InnerContainer>
     </Wrapper>
   )
diff --git a/src/styles/themes/light.tsx b/src/styles/themes/light.tsx
index ee94f8db..3bc9c80b 100644
--- a/src/styles/themes/light.tsx
+++ b/src/styles/themes/light.tsx
@@ -16,8 +16,8 @@ export const lightTheme = css`
     /* Text color */
     --theme-color-text-primary: #2e3048;
     --theme-color-text: #4b4d60;
-    --theme-color-light: #4b4d60;
-    --theme-color-dark: #4b4d60;
+    --theme-color-light: #5f6178;
+    --theme-color-dark: #000;
 
     /* Danger / OK / warning */
     --theme-color-danger: #800;

From 4c4ea012cbaf50c983e9ea5b1c737b0b9c6d59f2 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <gabriel@bootnode.dev>
Date: Wed, 19 Jun 2024 18:19:01 -0300
Subject: [PATCH 2/9] chore: rename folder

---
 src/pageComponents/home/Examples/List.tsx              | 10 +++++++++-
 .../home/Examples/{Items => demos}/Avatar.test.tsx     |  2 +-
 .../home/Examples/{Items => demos}/Avatar.tsx          |  0
 .../home/Examples/{Items => demos}/BigNumberInput.tsx  |  0
 .../home/Examples/{Items => demos}/EnsName.tsx         |  0
 .../home/Examples/{Items => demos}/Hash.tsx            |  0
 src/pageComponents/home/Examples/index.tsx             |  8 ++++----
 7 files changed, 14 insertions(+), 6 deletions(-)
 rename src/pageComponents/home/Examples/{Items => demos}/Avatar.test.tsx (96%)
 rename src/pageComponents/home/Examples/{Items => demos}/Avatar.tsx (100%)
 rename src/pageComponents/home/Examples/{Items => demos}/BigNumberInput.tsx (100%)
 rename src/pageComponents/home/Examples/{Items => demos}/EnsName.tsx (100%)
 rename src/pageComponents/home/Examples/{Items => demos}/Hash.tsx (100%)

diff --git a/src/pageComponents/home/Examples/List.tsx b/src/pageComponents/home/Examples/List.tsx
index cb545a3c..979d69eb 100644
--- a/src/pageComponents/home/Examples/List.tsx
+++ b/src/pageComponents/home/Examples/List.tsx
@@ -29,11 +29,19 @@ const Title = styled.h2`
   margin: 0;
 `
 
+const Items = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  row-gap: calc(var(--base-gap) * 2);
+  width: 100%;
+`
+
 const List: React.FC<HTMLAttributes<HTMLDivElement>> = ({ ...restProps }) => {
   return (
     <Wrapper {...restProps}>
       <Title>Built-in Features</Title>
-      <p>Here are some examples of how you can use the theme system.</p>
+      <Items>asdasd</Items>
     </Wrapper>
   )
 }
diff --git a/src/pageComponents/home/Examples/Items/Avatar.test.tsx b/src/pageComponents/home/Examples/demos/Avatar.test.tsx
similarity index 96%
rename from src/pageComponents/home/Examples/Items/Avatar.test.tsx
rename to src/pageComponents/home/Examples/demos/Avatar.test.tsx
index 5026ce5a..0f825159 100644
--- a/src/pageComponents/home/Examples/Items/Avatar.test.tsx
+++ b/src/pageComponents/home/Examples/demos/Avatar.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 import { Mock, describe, expect, it, vi } from 'vitest'
 import { useEnsName, useEnsAvatar } from 'wagmi'
 
-import Avatar from '@/src/pageComponents/home/Examples/Items/Avatar'
+import Avatar from '@/src/pageComponents/home/Examples/demos/Avatar'
 
 // Mock wagmi hooks
 vi.mock('wagmi', () => ({
diff --git a/src/pageComponents/home/Examples/Items/Avatar.tsx b/src/pageComponents/home/Examples/demos/Avatar.tsx
similarity index 100%
rename from src/pageComponents/home/Examples/Items/Avatar.tsx
rename to src/pageComponents/home/Examples/demos/Avatar.tsx
diff --git a/src/pageComponents/home/Examples/Items/BigNumberInput.tsx b/src/pageComponents/home/Examples/demos/BigNumberInput.tsx
similarity index 100%
rename from src/pageComponents/home/Examples/Items/BigNumberInput.tsx
rename to src/pageComponents/home/Examples/demos/BigNumberInput.tsx
diff --git a/src/pageComponents/home/Examples/Items/EnsName.tsx b/src/pageComponents/home/Examples/demos/EnsName.tsx
similarity index 100%
rename from src/pageComponents/home/Examples/Items/EnsName.tsx
rename to src/pageComponents/home/Examples/demos/EnsName.tsx
diff --git a/src/pageComponents/home/Examples/Items/Hash.tsx b/src/pageComponents/home/Examples/demos/Hash.tsx
similarity index 100%
rename from src/pageComponents/home/Examples/Items/Hash.tsx
rename to src/pageComponents/home/Examples/demos/Hash.tsx
diff --git a/src/pageComponents/home/Examples/index.tsx b/src/pageComponents/home/Examples/index.tsx
index 1e235c1a..5579dd31 100644
--- a/src/pageComponents/home/Examples/index.tsx
+++ b/src/pageComponents/home/Examples/index.tsx
@@ -4,11 +4,11 @@ import styled from 'styled-components'
 import { InnerContainer as Inner, ContainerPadding } from 'db-ui-toolkit'
 import { useAccount } from 'wagmi'
 
-import Avatar from '@/src/pageComponents/home/Examples/Items/Avatar'
-import BigNumberInput from '@/src/pageComponents/home/Examples/Items/BigNumberInput'
-import EnsName from '@/src/pageComponents/home/Examples/Items/EnsName'
-import Hash from '@/src/pageComponents/home/Examples/Items/Hash'
 import List from '@/src/pageComponents/home/Examples/List'
+import Avatar from '@/src/pageComponents/home/Examples/demos/Avatar'
+import BigNumberInput from '@/src/pageComponents/home/Examples/demos/BigNumberInput'
+import EnsName from '@/src/pageComponents/home/Examples/demos/EnsName'
+import Hash from '@/src/pageComponents/home/Examples/demos/Hash'
 
 const Wrapper = styled.section`
   background-color: var(--landing-page-main-background-color);

From d92cd956a69f75d90fa4ae5ef58a52eb0a8c2109 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <gabriel@bootnode.dev>
Date: Wed, 19 Jun 2024 19:29:47 -0300
Subject: [PATCH 3/9] feat: add mocked demos list

---
 src/pageComponents/home/Examples/index.tsx | 81 ++++++++++++++++++++--
 1 file changed, 75 insertions(+), 6 deletions(-)

diff --git a/src/pageComponents/home/Examples/index.tsx b/src/pageComponents/home/Examples/index.tsx
index 5579dd31..0944ac46 100644
--- a/src/pageComponents/home/Examples/index.tsx
+++ b/src/pageComponents/home/Examples/index.tsx
@@ -4,7 +4,16 @@ import styled from 'styled-components'
 import { InnerContainer as Inner, ContainerPadding } from 'db-ui-toolkit'
 import { useAccount } from 'wagmi'
 
+import { Props as ItemProps } from '@/src/pageComponents/home/Examples/Item'
 import List from '@/src/pageComponents/home/Examples/List'
+import ImgAvatar from '@/src/pageComponents/home/Examples/assets/Avatar'
+import ImgHash from '@/src/pageComponents/home/Examples/assets/Hash'
+import ImgIpfsImage from '@/src/pageComponents/home/Examples/assets/IPFSImage'
+import ImgInputAddress from '@/src/pageComponents/home/Examples/assets/InputAddress'
+import ImgSubgraph from '@/src/pageComponents/home/Examples/assets/Subgraph'
+import ImgTokenInput from '@/src/pageComponents/home/Examples/assets/TokenInput'
+import ImgTokenList from '@/src/pageComponents/home/Examples/assets/TokenList'
+import ImgWallet from '@/src/pageComponents/home/Examples/assets/Wallet'
 import Avatar from '@/src/pageComponents/home/Examples/demos/Avatar'
 import BigNumberInput from '@/src/pageComponents/home/Examples/demos/BigNumberInput'
 import EnsName from '@/src/pageComponents/home/Examples/demos/EnsName'
@@ -26,16 +35,76 @@ const InnerContainer = styled(Inner)`
 
 const Examples: React.FC = ({ ...restProps }) => {
   const { address = '0x87885AaEEdED51C7e3858a782644F5d89759f245' } = useAccount()
+  const items: ItemProps[] = [
+    {
+      demo: <div>Wallet</div>,
+      href: '#',
+      icon: <ImgWallet />,
+      text: 'Authenticate using an OP Account',
+      title: 'Wallet connectivity',
+    },
+    {
+      demo: <BigNumberInput />,
+      href: '#',
+      icon: <ImgInputAddress />,
+      text: 'Validate address or transaction hash',
+      title: 'Input address',
+    },
+    {
+      demo: <div>Token list</div>,
+      href: '#',
+      icon: <ImgTokenList />,
+      text: 'Dynamic token list modal',
+      title: 'Token list',
+    },
+    {
+      demo: <div>Token input</div>,
+      href: '#',
+      icon: <ImgTokenInput />,
+      text: 'Input with max, user balance, decimals',
+      title: 'Token input',
+    },
+    {
+      demo: <Hash hash={address} />,
+      href: '#',
+      icon: <ImgHash />,
+      text: 'Copy, open in explorer',
+      title: 'Hash component',
+    },
+    {
+      demo: <Avatar address={address} size={30} />,
+      href: '#',
+      icon: <ImgAvatar />,
+      text: 'Address blockie avatar image',
+      title: 'Avatar',
+    },
+    {
+      demo: <div>Subgraph</div>,
+      href: '#',
+      icon: <ImgSubgraph />,
+      text: 'Support for connecting with subgraphs',
+      title: 'Subgraph',
+    },
+    {
+      demo: <div>IPFS Image</div>,
+      href: '#',
+      icon: <ImgIpfsImage />,
+      text: 'Immutable and decentralized file storage',
+      title: 'Image IPFS',
+    },
+    {
+      demo: <EnsName address={address} />,
+      href: '#',
+      icon: <ImgIpfsImage />,
+      text: 'Resolve ENS names',
+      title: 'ENS name',
+    },
+  ]
 
   return (
     <Wrapper id="examples" {...restProps}>
       <InnerContainer>
-        <List>
-          <EnsName address={address} />
-          <Hash hash={address} />
-          <Avatar address={address} size={30} />
-          <BigNumberInput />
-        </List>
+        <List items={items} />
       </InnerContainer>
     </Wrapper>
   )

From 16a660dd7c7ce77fc40990683e5c8048f42bb175 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <gabriel@bootnode.dev>
Date: Wed, 19 Jun 2024 19:30:28 -0300
Subject: [PATCH 4/9] feat: add demos icons

---
 .../home/Examples/assets/Avatar.tsx           | 25 +++++++++++++++++++
 .../home/Examples/assets/Hash.tsx             | 25 +++++++++++++++++++
 .../home/Examples/assets/IPFSImage.tsx        | 25 +++++++++++++++++++
 .../home/Examples/assets/InputAddress.tsx     | 25 +++++++++++++++++++
 .../home/Examples/assets/Subgraph.tsx         | 25 +++++++++++++++++++
 .../home/Examples/assets/TokenInput.tsx       | 25 +++++++++++++++++++
 .../home/Examples/assets/TokenList.tsx        | 25 +++++++++++++++++++
 .../home/Examples/assets/Wallet.tsx           | 25 +++++++++++++++++++
 8 files changed, 200 insertions(+)
 create mode 100644 src/pageComponents/home/Examples/assets/Avatar.tsx
 create mode 100644 src/pageComponents/home/Examples/assets/Hash.tsx
 create mode 100644 src/pageComponents/home/Examples/assets/IPFSImage.tsx
 create mode 100644 src/pageComponents/home/Examples/assets/InputAddress.tsx
 create mode 100644 src/pageComponents/home/Examples/assets/Subgraph.tsx
 create mode 100644 src/pageComponents/home/Examples/assets/TokenInput.tsx
 create mode 100644 src/pageComponents/home/Examples/assets/TokenList.tsx
 create mode 100644 src/pageComponents/home/Examples/assets/Wallet.tsx

diff --git a/src/pageComponents/home/Examples/assets/Avatar.tsx b/src/pageComponents/home/Examples/assets/Avatar.tsx
new file mode 100644
index 00000000..5414eacc
--- /dev/null
+++ b/src/pageComponents/home/Examples/assets/Avatar.tsx
@@ -0,0 +1,25 @@
+import React, { HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+
+const Wrapper = styled.svg`
+  display: block;
+  flex-shrink: 0;
+`
+
+const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+  <Wrapper
+    fill="none"
+    height="20"
+    viewBox="0 0 21 20"
+    width="21"
+    xmlns="http://www.w3.org/2000/svg"
+    {...restProps}
+  >
+    <path
+      d="M20.0236 17.8751C18.5958 15.4067 16.3955 13.6367 13.8277 12.7976C15.0979 12.0415 16.0847 10.8893 16.6367 9.51804C17.1886 8.14678 17.2752 6.63224 16.8831 5.20701C16.491 3.78178 15.6418 2.52467 14.4661 1.62873C13.2904 0.732786 11.8531 0.247559 10.3749 0.247559C8.8967 0.247559 7.45938 0.732786 6.28366 1.62873C5.10794 2.52467 4.25882 3.78178 3.86671 5.20701C3.47459 6.63224 3.56116 8.14678 4.11313 9.51804C4.66509 10.8893 5.65192 12.0415 6.92208 12.7976C4.35426 13.6357 2.15395 15.4057 0.726138 17.8751C0.673777 17.9605 0.639047 18.0555 0.623996 18.1545C0.608945 18.2535 0.613878 18.3545 0.638504 18.4516C0.66313 18.5487 0.706951 18.6399 0.76738 18.7197C0.827809 18.7996 0.903623 18.8666 0.990348 18.9167C1.07707 18.9667 1.17295 18.999 1.27233 19.0114C1.37171 19.0238 1.47257 19.0163 1.56897 18.9891C1.66537 18.9619 1.75534 18.9157 1.83359 18.8532C1.91184 18.7907 1.97678 18.7131 2.02458 18.6251C3.79083 15.5726 6.9127 13.7501 10.3749 13.7501C13.8371 13.7501 16.959 15.5726 18.7252 18.6251C18.773 18.7131 18.8379 18.7907 18.9162 18.8532C18.9944 18.9157 19.0844 18.9619 19.1808 18.9891C19.2772 19.0163 19.3781 19.0238 19.4774 19.0114C19.5768 18.999 19.6727 18.9667 19.7594 18.9167C19.8462 18.8666 19.922 18.7996 19.9824 18.7197C20.0428 18.6399 20.0866 18.5487 20.1113 18.4516C20.1359 18.3545 20.1408 18.2535 20.1258 18.1545C20.1107 18.0555 20.076 17.9605 20.0236 17.8751ZM5.12489 7.00011C5.12489 5.96176 5.43279 4.94672 6.00967 4.08337C6.58655 3.22001 7.40649 2.5471 8.3658 2.14974C9.32511 1.75238 10.3807 1.64841 11.3991 1.85099C12.4175 2.05356 13.353 2.55357 14.0872 3.2878C14.8214 4.02202 15.3214 4.95748 15.524 5.97589C15.7266 6.99429 15.6226 8.04989 15.2253 9.0092C14.8279 9.96851 14.155 10.7884 13.2916 11.3653C12.4283 11.9422 11.4132 12.2501 10.3749 12.2501C8.98296 12.2486 7.64847 11.695 6.66422 10.7108C5.67998 9.72653 5.12638 8.39204 5.12489 7.00011Z"
+      fill="currentColor"
+    />
+  </Wrapper>
+)
+
+export default Icon
diff --git a/src/pageComponents/home/Examples/assets/Hash.tsx b/src/pageComponents/home/Examples/assets/Hash.tsx
new file mode 100644
index 00000000..8cec7f76
--- /dev/null
+++ b/src/pageComponents/home/Examples/assets/Hash.tsx
@@ -0,0 +1,25 @@
+import React, { HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+
+const Wrapper = styled.svg`
+  display: block;
+  flex-shrink: 0;
+`
+
+const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+  <Wrapper
+    fill="none"
+    height="16"
+    viewBox="0 0 23 16"
+    width="23"
+    xmlns="http://www.w3.org/2000/svg"
+    {...restProps}
+  >
+    <path
+      d="M22.4365 8.04098C22.4037 7.96691 21.6096 6.20535 19.8443 4.44004C17.4921 2.08785 14.5212 0.844727 11.2512 0.844727C7.98121 0.844727 5.01027 2.08785 2.65809 4.44004C0.892774 6.20535 0.0949617 7.96973 0.0658992 8.04098C0.0232553 8.13689 0.0012207 8.24069 0.0012207 8.34566C0.0012207 8.45063 0.0232553 8.55443 0.0658992 8.65035C0.0987117 8.72441 0.892774 10.485 2.65809 12.2504C5.01027 14.6016 7.98121 15.8447 11.2512 15.8447C14.5212 15.8447 17.4921 14.6016 19.8443 12.2504C21.6096 10.485 22.4037 8.72441 22.4365 8.65035C22.4792 8.55443 22.5012 8.45063 22.5012 8.34566C22.5012 8.24069 22.4792 8.13689 22.4365 8.04098ZM11.2512 14.3447C8.36559 14.3447 5.84465 13.2957 3.75777 11.2275C2.9015 10.376 2.17301 9.405 1.59496 8.34473C2.17286 7.28436 2.90136 6.31333 3.75777 5.46191C5.84465 3.39379 8.36559 2.34473 11.2512 2.34473C14.1368 2.34473 16.6578 3.39379 18.7446 5.46191C19.6026 6.31313 20.3327 7.28415 20.9121 8.34473C20.2362 9.6066 17.2915 14.3447 11.2512 14.3447ZM11.2512 3.84473C10.3612 3.84473 9.49117 4.10865 8.75115 4.60311C8.01112 5.09758 7.43435 5.80038 7.09375 6.62265C6.75316 7.44492 6.66404 8.34972 6.83768 9.22263C7.01131 10.0955 7.43989 10.8974 8.06923 11.5267C8.69857 12.156 9.50039 12.5846 10.3733 12.7583C11.2462 12.9319 12.151 12.8428 12.9733 12.5022C13.7956 12.1616 14.4984 11.5848 14.9928 10.8448C15.4873 10.1048 15.7512 9.23474 15.7512 8.34473C15.75 7.15163 15.2755 6.00776 14.4318 5.16412C13.5882 4.32047 12.4443 3.84597 11.2512 3.84473ZM11.2512 11.3447C10.6579 11.3447 10.0778 11.1688 9.5845 10.8391C9.09115 10.5095 8.70664 10.041 8.47957 9.49278C8.25251 8.9446 8.1931 8.3414 8.30886 7.75946C8.42461 7.17751 8.71033 6.64296 9.12989 6.22341C9.54945 5.80385 10.084 5.51813 10.6659 5.40237C11.2479 5.28661 11.8511 5.34602 12.3993 5.57309C12.9474 5.80015 13.416 6.18467 13.7456 6.67802C14.0753 7.17136 14.2512 7.75138 14.2512 8.34473C14.2512 9.14038 13.9351 9.90344 13.3725 10.466C12.8099 11.0287 12.0469 11.3447 11.2512 11.3447Z"
+      fill="currentColor"
+    />
+  </Wrapper>
+)
+
+export default Icon
diff --git a/src/pageComponents/home/Examples/assets/IPFSImage.tsx b/src/pageComponents/home/Examples/assets/IPFSImage.tsx
new file mode 100644
index 00000000..29856347
--- /dev/null
+++ b/src/pageComponents/home/Examples/assets/IPFSImage.tsx
@@ -0,0 +1,25 @@
+import React, { HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+
+const Wrapper = styled.svg`
+  display: block;
+  flex-shrink: 0;
+`
+
+const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+  <Wrapper
+    fill="none"
+    height="20"
+    viewBox="0 0 18 20"
+    width="18"
+    xmlns="http://www.w3.org/2000/svg"
+    {...restProps}
+  >
+    <path
+      d="M17.0306 5.71938L11.7806 0.469375C11.7109 0.399749 11.6282 0.344539 11.5371 0.306898C11.4461 0.269257 11.3485 0.249923 11.25 0.25H2.25C1.85218 0.25 1.47064 0.408035 1.18934 0.68934C0.908035 0.970645 0.75 1.35218 0.75 1.75V18.25C0.75 18.6478 0.908035 19.0294 1.18934 19.3107C1.47064 19.592 1.85218 19.75 2.25 19.75H15.75C16.1478 19.75 16.5294 19.592 16.8107 19.3107C17.092 19.0294 17.25 18.6478 17.25 18.25V6.25C17.2501 6.15148 17.2307 6.05391 17.1931 5.96286C17.1555 5.87182 17.1003 5.78908 17.0306 5.71938ZM12 2.81031L14.6897 5.5H12V2.81031ZM15.75 18.25H2.25V1.75H10.5V6.25C10.5 6.44891 10.579 6.63968 10.7197 6.78033C10.8603 6.92098 11.0511 7 11.25 7H15.75V18.25Z"
+      fill="currentColor"
+    />
+  </Wrapper>
+)
+
+export default Icon
diff --git a/src/pageComponents/home/Examples/assets/InputAddress.tsx b/src/pageComponents/home/Examples/assets/InputAddress.tsx
new file mode 100644
index 00000000..0aea346e
--- /dev/null
+++ b/src/pageComponents/home/Examples/assets/InputAddress.tsx
@@ -0,0 +1,25 @@
+import React, { HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+
+const Wrapper = styled.svg`
+  display: block;
+  flex-shrink: 0;
+`
+
+const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+  <Wrapper
+    fill="none"
+    height="18"
+    viewBox="0 0 24 18"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...restProps}
+  >
+    <path
+      d="M10.5 0.75C10.3011 0.75 10.1103 0.829018 9.96967 0.96967C9.82902 1.11032 9.75 1.30109 9.75 1.5V3H2.25C1.85218 3 1.47064 3.15804 1.18934 3.43934C0.908035 3.72064 0.75 4.10218 0.75 4.5V13.5C0.75 13.8978 0.908035 14.2794 1.18934 14.5607C1.47064 14.842 1.85218 15 2.25 15H9.75V16.5C9.75 16.6989 9.82902 16.8897 9.96967 17.0303C10.1103 17.171 10.3011 17.25 10.5 17.25C10.6989 17.25 10.8897 17.171 11.0303 17.0303C11.171 16.8897 11.25 16.6989 11.25 16.5V1.5C11.25 1.30109 11.171 1.11032 11.0303 0.96967C10.8897 0.829018 10.6989 0.75 10.5 0.75ZM2.25 13.5V4.5H9.75V13.5H2.25ZM23.25 4.5V13.5C23.25 13.8978 23.092 14.2794 22.8107 14.5607C22.5294 14.842 22.1478 15 21.75 15H13.5C13.3011 15 13.1103 14.921 12.9697 14.7803C12.829 14.6397 12.75 14.4489 12.75 14.25C12.75 14.0511 12.829 13.8603 12.9697 13.7197C13.1103 13.579 13.3011 13.5 13.5 13.5H21.75V4.5H13.5C13.3011 4.5 13.1103 4.42098 12.9697 4.28033C12.829 4.13968 12.75 3.94891 12.75 3.75C12.75 3.55109 12.829 3.36032 12.9697 3.21967C13.1103 3.07902 13.3011 3 13.5 3H21.75C22.1478 3 22.5294 3.15804 22.8107 3.43934C23.092 3.72064 23.25 4.10218 23.25 4.5ZM8.25 7.5C8.25 7.69891 8.17098 7.88968 8.03033 8.03033C7.88968 8.17098 7.69891 8.25 7.5 8.25H6.75V10.5C6.75 10.6989 6.67098 10.8897 6.53033 11.0303C6.38968 11.171 6.19891 11.25 6 11.25C5.80109 11.25 5.61032 11.171 5.46967 11.0303C5.32902 10.8897 5.25 10.6989 5.25 10.5V8.25H4.5C4.30109 8.25 4.11032 8.17098 3.96967 8.03033C3.82902 7.88968 3.75 7.69891 3.75 7.5C3.75 7.30109 3.82902 7.11032 3.96967 6.96967C4.11032 6.82902 4.30109 6.75 4.5 6.75H7.5C7.69891 6.75 7.88968 6.82902 8.03033 6.96967C8.17098 7.11032 8.25 7.30109 8.25 7.5Z"
+      fill="currentColor"
+    />
+  </Wrapper>
+)
+
+export default Icon
diff --git a/src/pageComponents/home/Examples/assets/Subgraph.tsx b/src/pageComponents/home/Examples/assets/Subgraph.tsx
new file mode 100644
index 00000000..357aecea
--- /dev/null
+++ b/src/pageComponents/home/Examples/assets/Subgraph.tsx
@@ -0,0 +1,25 @@
+import React, { HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+
+const Wrapper = styled.svg`
+  display: block;
+  flex-shrink: 0;
+`
+
+const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+  <Wrapper
+    fill="none"
+    height="19"
+    viewBox="0 0 22 19"
+    width="22"
+    xmlns="http://www.w3.org/2000/svg"
+    {...restProps}
+  >
+    <path
+      d="M15.1249 8.04004H19.6249C20.0227 8.04004 20.4042 7.882 20.6855 7.6007C20.9668 7.31939 21.1249 6.93786 21.1249 6.54004V2.04004C21.1249 1.64221 20.9668 1.26068 20.6855 0.979379C20.4042 0.698074 20.0227 0.540039 19.6249 0.540039H15.1249C14.7271 0.540039 14.3455 0.698074 14.0642 0.979379C13.7829 1.26068 13.6249 1.64221 13.6249 2.04004V3.54004H12.8749C12.0792 3.54004 11.3162 3.85611 10.7536 4.41872C10.1909 4.98133 9.87488 5.74439 9.87488 6.54004V8.79004H6.87488V8.04004C6.87488 7.64221 6.71684 7.26068 6.43554 6.97938C6.15423 6.69807 5.7727 6.54004 5.37488 6.54004H2.37488C1.97705 6.54004 1.59552 6.69807 1.31422 6.97938C1.03291 7.26068 0.874878 7.64221 0.874878 8.04004V11.04C0.874878 11.4379 1.03291 11.8194 1.31422 12.1007C1.59552 12.382 1.97705 12.54 2.37488 12.54H5.37488C5.7727 12.54 6.15423 12.382 6.43554 12.1007C6.71684 11.8194 6.87488 11.4379 6.87488 11.04V10.29H9.87488V12.54C9.87488 13.3357 10.1909 14.0988 10.7536 14.6614C11.3162 15.224 12.0792 15.54 12.8749 15.54H13.6249V17.04C13.6249 17.4379 13.7829 17.8194 14.0642 18.1007C14.3455 18.382 14.7271 18.54 15.1249 18.54H19.6249C20.0227 18.54 20.4042 18.382 20.6855 18.1007C20.9668 17.8194 21.1249 17.4379 21.1249 17.04V12.54C21.1249 12.1422 20.9668 11.7607 20.6855 11.4794C20.4042 11.1981 20.0227 11.04 19.6249 11.04H15.1249C14.7271 11.04 14.3455 11.1981 14.0642 11.4794C13.7829 11.7607 13.6249 12.1422 13.6249 12.54V14.04H12.8749C12.4771 14.04 12.0955 13.882 11.8142 13.6007C11.5329 13.3194 11.3749 12.9379 11.3749 12.54V6.54004C11.3749 6.14221 11.5329 5.76068 11.8142 5.47938C12.0955 5.19807 12.4771 5.04004 12.8749 5.04004H13.6249V6.54004C13.6249 6.93786 13.7829 7.31939 14.0642 7.6007C14.3455 7.882 14.7271 8.04004 15.1249 8.04004ZM5.37488 11.04H2.37488V8.04004H5.37488V11.04ZM15.1249 12.54H19.6249V17.04H15.1249V12.54ZM15.1249 2.04004H19.6249V6.54004H15.1249V2.04004Z"
+      fill="currentColor"
+    />
+  </Wrapper>
+)
+
+export default Icon
diff --git a/src/pageComponents/home/Examples/assets/TokenInput.tsx b/src/pageComponents/home/Examples/assets/TokenInput.tsx
new file mode 100644
index 00000000..441c0ed1
--- /dev/null
+++ b/src/pageComponents/home/Examples/assets/TokenInput.tsx
@@ -0,0 +1,25 @@
+import React, { HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+
+const Wrapper = styled.svg`
+  display: block;
+  flex-shrink: 0;
+`
+
+const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+  <Wrapper
+    fill="none"
+    height="20"
+    viewBox="0 0 17 20"
+    width="17"
+    xmlns="http://www.w3.org/2000/svg"
+    {...restProps}
+  >
+    <path
+      d="M15.02 3.11684C13.8884 1.17715 12.3397 0.108398 10.6597 0.108398H6.15967C4.47967 0.108398 2.93092 1.17715 1.79936 3.11684C0.741856 4.92902 0.159668 7.32715 0.159668 9.8584C0.159668 12.3896 0.741856 14.7878 1.79936 16.6C2.93092 18.5396 4.47967 19.6084 6.15967 19.6084H10.6597C12.3397 19.6084 13.8884 18.5396 15.02 16.6C16.0775 14.7878 16.6597 12.3896 16.6597 9.8584C16.6597 7.32715 16.0775 4.92902 15.02 3.11684ZM15.14 9.1084H12.14C12.0814 7.56936 11.775 6.04985 11.2325 4.6084H14.1003C14.674 5.86277 15.0528 7.4209 15.14 9.1084ZM13.2087 3.1084H10.5153C10.202 2.56495 9.82429 2.0613 9.39029 1.6084H10.6597C11.5972 1.6084 12.4784 2.1709 13.2087 3.1084ZM1.65967 9.8584C1.65967 5.38652 3.72217 1.6084 6.15967 1.6084C8.59717 1.6084 10.6597 5.38652 10.6597 9.8584C10.6597 14.3303 8.59717 18.1084 6.15967 18.1084C3.72217 18.1084 1.65967 14.3303 1.65967 9.8584ZM10.6597 18.1084H9.39311C9.82711 17.6555 10.2048 17.1519 10.5181 16.6084H13.2115C12.4784 17.5459 11.5972 18.1084 10.6597 18.1084ZM14.1003 15.1084H11.2334C11.7759 13.6669 12.0823 12.1474 12.1409 10.6084H15.1409C15.0528 12.2959 14.674 13.854 14.1003 15.1084Z"
+      fill="currentColor"
+    />
+  </Wrapper>
+)
+
+export default Icon
diff --git a/src/pageComponents/home/Examples/assets/TokenList.tsx b/src/pageComponents/home/Examples/assets/TokenList.tsx
new file mode 100644
index 00000000..307f0a6f
--- /dev/null
+++ b/src/pageComponents/home/Examples/assets/TokenList.tsx
@@ -0,0 +1,25 @@
+import React, { HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+
+const Wrapper = styled.svg`
+  display: block;
+  flex-shrink: 0;
+`
+
+const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+  <Wrapper
+    fill="none"
+    height="15"
+    viewBox="0 0 19 15"
+    width="19"
+    xmlns="http://www.w3.org/2000/svg"
+    {...restProps}
+  >
+    <path
+      d="M5.48547 1.49536C5.48547 1.29645 5.56449 1.10568 5.70514 0.965031C5.8458 0.824379 6.03656 0.745361 6.23547 0.745361H18.2355C18.4344 0.745361 18.6252 0.824379 18.7658 0.965031C18.9065 1.10568 18.9855 1.29645 18.9855 1.49536C18.9855 1.69427 18.9065 1.88504 18.7658 2.02569C18.6252 2.16634 18.4344 2.24536 18.2355 2.24536H6.23547C6.03656 2.24536 5.8458 2.16634 5.70514 2.02569C5.56449 1.88504 5.48547 1.69427 5.48547 1.49536ZM18.2355 6.74536H6.23547C6.03656 6.74536 5.8458 6.82438 5.70514 6.96503C5.56449 7.10568 5.48547 7.29645 5.48547 7.49536C5.48547 7.69427 5.56449 7.88504 5.70514 8.02569C5.8458 8.16634 6.03656 8.24536 6.23547 8.24536H18.2355C18.4344 8.24536 18.6252 8.16634 18.7658 8.02569C18.9065 7.88504 18.9855 7.69427 18.9855 7.49536C18.9855 7.29645 18.9065 7.10568 18.7658 6.96503C18.6252 6.82438 18.4344 6.74536 18.2355 6.74536ZM18.2355 12.7454H6.23547C6.03656 12.7454 5.8458 12.8244 5.70514 12.965C5.56449 13.1057 5.48547 13.2964 5.48547 13.4954C5.48547 13.6943 5.56449 13.885 5.70514 14.0257C5.8458 14.1663 6.03656 14.2454 6.23547 14.2454H18.2355C18.4344 14.2454 18.6252 14.1663 18.7658 14.0257C18.9065 13.885 18.9855 13.6943 18.9855 13.4954C18.9855 13.2964 18.9065 13.1057 18.7658 12.965C18.6252 12.8244 18.4344 12.7454 18.2355 12.7454ZM2.11047 0.370361C1.88797 0.370361 1.67046 0.436342 1.48546 0.559958C1.30045 0.683575 1.15626 0.859276 1.07111 1.06484C0.985961 1.27041 0.963682 1.49661 1.00709 1.71484C1.0505 1.93307 1.15764 2.13352 1.31498 2.29086C1.47231 2.44819 1.67277 2.55534 1.891 2.59874C2.10923 2.64215 2.33543 2.61987 2.54099 2.53473C2.74656 2.44958 2.92226 2.30538 3.04588 2.12038C3.16949 1.93537 3.23547 1.71787 3.23547 1.49536C3.23547 1.19699 3.11695 0.910844 2.90597 0.699866C2.69499 0.488888 2.40884 0.370361 2.11047 0.370361ZM2.11047 6.37036C1.88797 6.37036 1.67046 6.43634 1.48546 6.55996C1.30045 6.68357 1.15626 6.85928 1.07111 7.06484C0.985961 7.27041 0.963682 7.49661 1.00709 7.71484C1.0505 7.93307 1.15764 8.13352 1.31498 8.29086C1.47231 8.44819 1.67277 8.55534 1.891 8.59875C2.10923 8.64215 2.33543 8.61987 2.54099 8.53473C2.74656 8.44958 2.92226 8.30538 3.04588 8.12038C3.16949 7.93537 3.23547 7.71787 3.23547 7.49536C3.23547 7.19699 3.11695 6.91084 2.90597 6.69987C2.69499 6.48889 2.40884 6.37036 2.11047 6.37036ZM2.11047 12.3704C1.88797 12.3704 1.67046 12.4363 1.48546 12.56C1.30045 12.6836 1.15626 12.8593 1.07111 13.0648C0.985961 13.2704 0.963682 13.4966 1.00709 13.7148C1.0505 13.9331 1.15764 14.1335 1.31498 14.2909C1.47231 14.4482 1.67277 14.5553 1.891 14.5987C2.10923 14.6422 2.33543 14.6199 2.54099 14.5347C2.74656 14.4496 2.92226 14.3054 3.04588 14.1204C3.16949 13.9354 3.23547 13.7179 3.23547 13.4954C3.23547 13.197 3.11695 12.9108 2.90597 12.6999C2.69499 12.4889 2.40884 12.3704 2.11047 12.3704Z"
+      fill="currentColor"
+    />
+  </Wrapper>
+)
+
+export default Icon
diff --git a/src/pageComponents/home/Examples/assets/Wallet.tsx b/src/pageComponents/home/Examples/assets/Wallet.tsx
new file mode 100644
index 00000000..4796c63f
--- /dev/null
+++ b/src/pageComponents/home/Examples/assets/Wallet.tsx
@@ -0,0 +1,25 @@
+import React, { HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+
+const Wrapper = styled.svg`
+  display: block;
+  flex-shrink: 0;
+`
+
+const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+  <Wrapper
+    fill="none"
+    height="18"
+    viewBox="0 0 19 18"
+    width="19"
+    xmlns="http://www.w3.org/2000/svg"
+    {...restProps}
+  >
+    <path
+      d="M17.25 3.75H2.25C2.05109 3.75 1.86032 3.67098 1.71967 3.53033C1.57902 3.38968 1.5 3.19891 1.5 3C1.5 2.80109 1.57902 2.61032 1.71967 2.46967C1.86032 2.32902 2.05109 2.25 2.25 2.25H15C15.1989 2.25 15.3897 2.17098 15.5303 2.03033C15.671 1.88968 15.75 1.69891 15.75 1.5C15.75 1.30109 15.671 1.11032 15.5303 0.96967C15.3897 0.829018 15.1989 0.75 15 0.75H2.25C1.65326 0.75 1.08097 0.987053 0.65901 1.40901C0.237053 1.83097 0 2.40326 0 3V15C0 15.5967 0.237053 16.169 0.65901 16.591C1.08097 17.0129 1.65326 17.25 2.25 17.25H17.25C17.6478 17.25 18.0294 17.092 18.3107 16.8107C18.592 16.5294 18.75 16.1478 18.75 15.75V5.25C18.75 4.85218 18.592 4.47064 18.3107 4.18934C18.0294 3.90804 17.6478 3.75 17.25 3.75ZM17.25 15.75H2.25C2.05109 15.75 1.86032 15.671 1.71967 15.5303C1.57902 15.3897 1.5 15.1989 1.5 15V5.12156C1.74082 5.20693 1.9945 5.25037 2.25 5.25H17.25V15.75ZM12.75 10.125C12.75 9.9025 12.816 9.68499 12.9396 9.49998C13.0632 9.31498 13.2389 9.17078 13.4445 9.08564C13.65 9.00049 13.8762 8.97821 14.0945 9.02162C14.3127 9.06502 14.5132 9.17217 14.6705 9.32951C14.8278 9.48684 14.935 9.68729 14.9784 9.90552C15.0218 10.1238 14.9995 10.35 14.9144 10.5555C14.8292 10.7611 14.685 10.9368 14.5 11.0604C14.315 11.184 14.0975 11.25 13.875 11.25C13.5766 11.25 13.2905 11.1315 13.0795 10.9205C12.8685 10.7095 12.75 10.4234 12.75 10.125Z"
+      fill="currentColor"
+    />
+  </Wrapper>
+)
+
+export default Icon

From 4ff7318631d29cb26cbbd456a30bd8804727f9f6 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <gabriel@bootnode.dev>
Date: Wed, 19 Jun 2024 19:42:49 -0300
Subject: [PATCH 5/9] feat: add base example item component

---
 .../home/Examples/Item/index.tsx              | 93 +++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 src/pageComponents/home/Examples/Item/index.tsx

diff --git a/src/pageComponents/home/Examples/Item/index.tsx b/src/pageComponents/home/Examples/Item/index.tsx
new file mode 100644
index 00000000..0c50abe7
--- /dev/null
+++ b/src/pageComponents/home/Examples/Item/index.tsx
@@ -0,0 +1,93 @@
+import React, { HTMLAttributes } from 'react'
+import styled from 'styled-components'
+
+const Wrapper = styled.div`
+  [data-theme='light'] & {
+    --theme-examples-item-background-color: #f7f7f7;
+  }
+
+  [data-theme='dark'] & {
+    --theme-examples-item-background-color: #2e3048;
+  }
+
+  background-color: var(--theme-examples-item-background-color);
+  border-radius: var(--base-border-radius);
+  display: flex;
+  gap: calc(var(--base-gap) * 2);
+  max-width: 100%;
+  padding: calc(var(--base-gap) * 2) calc(var(--base-gap) * 2) calc(var(--base-gap) * 2)
+    calc(var(--base-gap) * 4);
+`
+
+const Info = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: calc(var(--base-gap) * 2) 0 0;
+  row-gap: var(--base-gap);
+`
+
+const Icon = styled.div`
+  --icon-size: 40px;
+
+  align-items: center;
+  background-color: var(--theme-color-primary);
+  border-radius: 50%;
+  color: #fff;
+  display: flex;
+  height: var(--icon-size);
+  justify-content: center;
+  width: var(--icon-size);
+`
+
+const Title = styled.h2`
+  color: var(--theme-color-text-primary);
+  font-size: 2.4rem;
+  font-weight: 700;
+  line-height: 1.4;
+  margin: 0;
+`
+
+const Text = styled.p`
+  color: var(--theme-color-text-primary);
+  font-size: 1.6rem;
+  font-weight: 500;
+  line-height: 1.4;
+  margin: 0;
+`
+
+const Demo = styled.div`
+  align-items: center;
+  background-color: var(--theme-examples-list-background-color);
+  border-radius: var(--base-border-radius);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 205px;
+  padding: calc(var(--base-gap) * 3);
+  flex: 1;
+`
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  demo: React.ReactNode
+  href: string
+  icon: React.ReactNode
+  text: string
+  title: string
+}
+
+const Item: React.FC<Props> = ({ demo, href, icon, text, title, ...restProps }) => {
+  return (
+    <Wrapper {...restProps}>
+      <Info>
+        <Icon>{icon}</Icon>
+        <Title>{title}</Title>
+        <Text>{text}</Text>
+        <a href={href}>Documentation</a>
+      </Info>
+      <Demo>{demo}</Demo>
+    </Wrapper>
+  )
+}
+
+export default Item

From e5ea06cfd9348359a0ddb7ff999a5627a06a03a8 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <gabriel@bootnode.dev>
Date: Wed, 19 Jun 2024 19:43:13 -0300
Subject: [PATCH 6/9] feat: add item list

---
 src/pageComponents/home/Examples/List.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/pageComponents/home/Examples/List.tsx b/src/pageComponents/home/Examples/List.tsx
index 979d69eb..abf43996 100644
--- a/src/pageComponents/home/Examples/List.tsx
+++ b/src/pageComponents/home/Examples/List.tsx
@@ -1,6 +1,8 @@
 import React, { HTMLAttributes } from 'react'
 import styled from 'styled-components'
 
+import Item, { Props as ItemProps } from '@/src/pageComponents/home/Examples/Item'
+
 const Wrapper = styled.div`
   [data-theme='light'] & {
     --theme-examples-list-background-color: #e2e0e766;
@@ -37,11 +39,19 @@ const Items = styled.div`
   width: 100%;
 `
 
-const List: React.FC<HTMLAttributes<HTMLDivElement>> = ({ ...restProps }) => {
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  items: ItemProps[]
+}
+
+const List: React.FC<Props> = ({ items, ...restProps }) => {
   return (
     <Wrapper {...restProps}>
       <Title>Built-in Features</Title>
-      <Items>asdasd</Items>
+      <Items>
+        {items.map((item) => (
+          <Item key={item.title} {...item} />
+        ))}
+      </Items>
     </Wrapper>
   )
 }

From b135747c6c95fd7c2f04c37c07f1568705f96ac4 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <gabriel@bootnode.dev>
Date: Wed, 19 Jun 2024 19:54:48 -0300
Subject: [PATCH 7/9] feat: add demo badge

---
 .../home/Examples/Item/Badge.tsx              | 24 +++++++++++++++++++
 .../home/Examples/Item/index.tsx              | 18 ++++++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 src/pageComponents/home/Examples/Item/Badge.tsx

diff --git a/src/pageComponents/home/Examples/Item/Badge.tsx b/src/pageComponents/home/Examples/Item/Badge.tsx
new file mode 100644
index 00000000..dc671e48
--- /dev/null
+++ b/src/pageComponents/home/Examples/Item/Badge.tsx
@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+const Badge = styled.div.attrs({ children: <>Demo</> })`
+  [data-theme='light'] & {
+    --theme-examples-badge-background-color: #2e3048;
+  }
+
+  [data-theme='dark'] & {
+    --theme-examples-badge-background-color: #4b4d60;
+  }
+
+  align-items: center;
+  background-color: var(--theme-examples-badge-background-color);
+  border-radius: var(--base-border-radius-sm);
+  color: #fff;
+  display: flex;
+  font-size: 1.2rem;
+  font-weight: 500;
+  height: 20px;
+  line-height: 1;
+  padding: 0 var(--base-gap);
+`
+
+export default Badge
diff --git a/src/pageComponents/home/Examples/Item/index.tsx b/src/pageComponents/home/Examples/Item/index.tsx
index 0c50abe7..af0e87aa 100644
--- a/src/pageComponents/home/Examples/Item/index.tsx
+++ b/src/pageComponents/home/Examples/Item/index.tsx
@@ -1,6 +1,8 @@
 import React, { HTMLAttributes } from 'react'
 import styled from 'styled-components'
 
+import BaseBadge from '@/src/pageComponents/home/Examples/Item/Badge'
+
 const Wrapper = styled.div`
   [data-theme='light'] & {
     --theme-examples-item-background-color: #f7f7f7;
@@ -62,10 +64,19 @@ const Demo = styled.div`
   border-radius: var(--base-border-radius);
   display: flex;
   flex-direction: column;
+  flex: 1;
   justify-content: center;
   min-height: 205px;
   padding: calc(var(--base-gap) * 3);
-  flex: 1;
+  position: relative;
+`
+
+const Badge = styled(BaseBadge)`
+  --badge-gap: calc(var(--base-gap) + var(--base-gap-sm));
+
+  left: var(--badge-gap);
+  position: absolute;
+  top: var(--badge-gap);
 `
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -85,7 +96,10 @@ const Item: React.FC<Props> = ({ demo, href, icon, text, title, ...restProps })
         <Text>{text}</Text>
         <a href={href}>Documentation</a>
       </Info>
-      <Demo>{demo}</Demo>
+      <Demo>
+        <Badge />
+        {demo}
+      </Demo>
     </Wrapper>
   )
 }

From 8834ec123182427b1147d7253129bc7e4a638d1e Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <gabriel@bootnode.dev>
Date: Wed, 19 Jun 2024 20:28:54 -0300
Subject: [PATCH 8/9] feat: add documentation button

---
 .../Examples/Item/DocumentationButton.tsx     | 59 +++++++++++++++++++
 .../home/Examples/Item/index.tsx              |  9 +--
 2 files changed, 64 insertions(+), 4 deletions(-)
 create mode 100644 src/pageComponents/home/Examples/Item/DocumentationButton.tsx

diff --git a/src/pageComponents/home/Examples/Item/DocumentationButton.tsx b/src/pageComponents/home/Examples/Item/DocumentationButton.tsx
new file mode 100644
index 00000000..8089902d
--- /dev/null
+++ b/src/pageComponents/home/Examples/Item/DocumentationButton.tsx
@@ -0,0 +1,59 @@
+import styled from 'styled-components'
+
+import { ThemedButton } from 'db-ui-toolkit'
+
+const Icon = () => (
+  <svg fill="none" height="18" viewBox="0 0 16 18" width="16" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M15.875 12.6562V0.84375C15.875 0.376172 15.4988 0 15.0312 0H3.5C1.63672 0 0.125 1.51172 0.125 3.375V14.625C0.125 16.4883 1.63672 18 3.5 18H15.0312C15.4988 18 15.875 17.6238 15.875 17.1562V16.5938C15.875 16.3301 15.752 16.091 15.5621 15.9363C15.4145 15.3949 15.4145 13.8516 15.5621 13.3102C15.752 13.159 15.875 12.9199 15.875 12.6562ZM4.625 4.71094C4.625 4.59492 4.71992 4.5 4.83594 4.5H12.2891C12.4051 4.5 12.5 4.59492 12.5 4.71094V5.41406C12.5 5.53008 12.4051 5.625 12.2891 5.625H4.83594C4.71992 5.625 4.625 5.53008 4.625 5.41406V4.71094ZM4.625 6.96094C4.625 6.84492 4.71992 6.75 4.83594 6.75H12.2891C12.4051 6.75 12.5 6.84492 12.5 6.96094V7.66406C12.5 7.78008 12.4051 7.875 12.2891 7.875H4.83594C4.71992 7.875 4.625 7.78008 4.625 7.66406V6.96094ZM13.5336 15.75H3.5C2.87773 15.75 2.375 15.2473 2.375 14.625C2.375 14.0063 2.88125 13.5 3.5 13.5H13.5336C13.4668 14.1012 13.4668 15.1488 13.5336 15.75Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+const DocumentationButton = styled(ThemedButton).attrs({
+  $cssVarRoot: '--theme-button-documentation',
+  children: (
+    <>
+      <Icon /> Documentation
+    </>
+  ),
+})`
+  [data-theme='light'] & {
+    --theme-button-documentation-background-color: transparent;
+    --theme-button-documentation-background-color-hover: transparent;
+
+    --theme-button-documentation-border-color: #e2e0e7;
+    --theme-button-documentation-border-color-hover: #4b4d60;
+
+    --theme-button-documentation-color: #4b4d60;
+    --theme-button-documentation-color-hover: #4b4d60;
+
+    --theme-button-documentation-background-color-disabled: transparent;
+    --theme-button-documentation-border-color-disabled: #e2e0e7;
+    --theme-button-documentation-color-disabled: #4b4d60;
+  }
+
+  [data-theme='dark'] & {
+    --theme-button-documentation-background-color: transparent;
+    --theme-button-documentation-background-color-hover: transparent;
+
+    --theme-button-documentation-border-color: #c5c2cb;
+    --theme-button-documentation-border-color-hover: #fff;
+
+    --theme-button-documentation-color: #c5c2cb;
+    --theme-button-documentation-color-hover: #fff;
+
+    --theme-button-documentation-background-color-disabled: transparent;
+    --theme-button-documentation-border-color-disabled: #c5c2cb;
+    --theme-button-documentation-color-disabled: #c5c2cb;
+  }
+
+  --base-button-height: 43px;
+  --base-button-font-size: 1.4rem;
+
+  font-weight: 500;
+  max-width: fit-content;
+`
+
+export default DocumentationButton
diff --git a/src/pageComponents/home/Examples/Item/index.tsx b/src/pageComponents/home/Examples/Item/index.tsx
index af0e87aa..96d4245f 100644
--- a/src/pageComponents/home/Examples/Item/index.tsx
+++ b/src/pageComponents/home/Examples/Item/index.tsx
@@ -2,6 +2,7 @@ import React, { HTMLAttributes } from 'react'
 import styled from 'styled-components'
 
 import BaseBadge from '@/src/pageComponents/home/Examples/Item/Badge'
+import DocumentationButton from '@/src/pageComponents/home/Examples/Item/DocumentationButton'
 
 const Wrapper = styled.div`
   [data-theme='light'] & {
@@ -26,7 +27,7 @@ const Info = styled.div`
   flex-direction: column;
   flex: 1;
   padding: calc(var(--base-gap) * 2) 0 0;
-  row-gap: var(--base-gap);
+  row-gap: calc(var(--base-gap) * 2);
 `
 
 const Icon = styled.div`
@@ -46,7 +47,7 @@ const Title = styled.h2`
   color: var(--theme-color-text-primary);
   font-size: 2.4rem;
   font-weight: 700;
-  line-height: 1.4;
+  line-height: 1.2;
   margin: 0;
 `
 
@@ -54,7 +55,7 @@ const Text = styled.p`
   color: var(--theme-color-text-primary);
   font-size: 1.6rem;
   font-weight: 500;
-  line-height: 1.4;
+  line-height: 1.2;
   margin: 0;
 `
 
@@ -94,7 +95,7 @@ const Item: React.FC<Props> = ({ demo, href, icon, text, title, ...restProps })
         <Icon>{icon}</Icon>
         <Title>{title}</Title>
         <Text>{text}</Text>
-        <a href={href}>Documentation</a>
+        <DocumentationButton as="a" href={href} target="_blank" />
       </Info>
       <Demo>
         <Badge />

From 1fdb2022d8618650cf015efd6fe0e998014d73ab Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <gabriel@bootnode.dev>
Date: Wed, 19 Jun 2024 20:30:42 -0300
Subject: [PATCH 9/9] fix: add padding

---
 src/pageComponents/home/Examples/Item/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pageComponents/home/Examples/Item/index.tsx b/src/pageComponents/home/Examples/Item/index.tsx
index 96d4245f..e8260574 100644
--- a/src/pageComponents/home/Examples/Item/index.tsx
+++ b/src/pageComponents/home/Examples/Item/index.tsx
@@ -68,7 +68,7 @@ const Demo = styled.div`
   flex: 1;
   justify-content: center;
   min-height: 205px;
-  padding: calc(var(--base-gap) * 3);
+  padding: calc(var(--base-gap) * 5) calc(var(--base-gap) * 3) calc(var(--base-gap) * 3);
   position: relative;
 `