Brand page

23 files changed, 400 insertions, 81 deletions

diff --git a/packages/console/app/src/asset/brand/opencode-logo-dark.png b/packages/console/app/src/asset/brand/opencode-logo-dark.png
new file mode 100644
index 000000000..cf868c8e8
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-logo-dark.png
diff --git a/packages/console/app/src/asset/brand/opencode-logo-dark.svg b/packages/console/app/src/asset/brand/opencode-logo-dark.svg
new file mode 100644
index 000000000..c28babff1
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-logo-dark.svg
@@ -0,0 +1,16 @@
+<svg width="240" height="300" viewBox="0 0 240 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86283)">
+<mask id="mask0_1401_86283" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="300">
+<path d="M240 0H0V300H240V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86283)">
+<path d="M180 240H60V120H180V240Z" fill="#4B4646"/>
+<path d="M180 60H60V240H180V60ZM240 300H0V0H240V300Z" fill="#F1ECEC"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86283">
+<rect width="240" height="300" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/console/app/src/asset/brand/opencode-logo-light.png b/packages/console/app/src/asset/brand/opencode-logo-light.png
new file mode 100644
index 000000000..a2ffc9b90
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-logo-light.png
diff --git a/packages/console/app/src/asset/brand/opencode-logo-light.svg b/packages/console/app/src/asset/brand/opencode-logo-light.svg
new file mode 100644
index 000000000..7ed0af003
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-logo-light.svg
@@ -0,0 +1,16 @@
+<svg width="240" height="300" viewBox="0 0 240 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86274)">
+<mask id="mask0_1401_86274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="300">
+<path d="M240 0H0V300H240V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86274)">
+<path d="M180 240H60V120H180V240Z" fill="#CFCECD"/>
+<path d="M180 60H60V240H180V60ZM240 300H0V0H240V300Z" fill="#211E1E"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86274">
+<rect width="240" height="300" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-dark.png b/packages/console/app/src/asset/brand/opencode-wordmark-dark.png
new file mode 100644
index 000000000..f8e2c3f40
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-wordmark-dark.png
diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-dark.svg b/packages/console/app/src/asset/brand/opencode-wordmark-dark.svg
new file mode 100644
index 000000000..a242eeeab
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-wordmark-dark.svg
@@ -0,0 +1,30 @@
+<svg width="641" height="115" viewBox="0 0 641 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86292)">
+<mask id="mask0_1401_86292" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="641" height="115">
+<path d="M640.714 0H0V115H640.714V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86292)">
+<path d="M49.2868 82.1433H16.4297V49.2861H49.2868V82.1433Z" fill="#4B4646"/>
+<path d="M49.2857 32.8573H16.4286V82.143H49.2857V32.8573ZM65.7143 98.5716H0V16.4287H65.7143V98.5716Z" fill="#B7B1B1"/>
+<path d="M131.427 82.1433H98.5703V49.2861H131.427V82.1433Z" fill="#4B4646"/>
+<path d="M98.5692 82.143H131.426V32.8573H98.5692V82.143ZM147.855 98.5716H98.5692V115H82.1406V16.4287H147.855V98.5716Z" fill="#B7B1B1"/>
+<path d="M229.997 65.7139V82.1424H180.711V65.7139H229.997Z" fill="#4B4646"/>
+<path d="M230.003 65.7144H180.718V82.143H230.003V98.5716H164.289V16.4287H230.003V65.7144ZM180.718 49.2859H213.575V32.8573H180.718V49.2859Z" fill="#B7B1B1"/>
+<path d="M295.717 98.5718H262.859V49.2861H295.717V98.5718Z" fill="#4B4646"/>
+<path d="M295.715 32.8573H262.858V98.5716H246.43V16.4287H295.715V32.8573ZM312.144 98.5716H295.715V32.8573H312.144V98.5716Z" fill="#B7B1B1"/>
+<path d="M394.286 82.1433H345V49.2861H394.286V82.1433Z" fill="#4B4646"/>
+<path d="M394.285 32.8573H344.999V82.143H394.285V98.5716H328.57V16.4287H394.285V32.8573Z" fill="#F1ECEC"/>
+<path d="M459.998 82.1433H427.141V49.2861H459.998V82.1433Z" fill="#4B4646"/>
+<path d="M459.997 32.8573H427.14V82.143H459.997V32.8573ZM476.425 98.5716H410.711V16.4287H476.425V98.5716Z" fill="#F1ECEC"/>
+<path d="M542.146 82.1433H509.289V49.2861H542.146V82.1433Z" fill="#4B4646"/>
+<path d="M542.145 32.8571H509.288V82.1429H542.145V32.8571ZM558.574 98.5714H492.859V16.4286H542.145V0H558.574V98.5714Z" fill="#F1ECEC"/>
+<path d="M640.715 65.7139V82.1424H591.43V65.7139H640.715Z" fill="#4B4646"/>
+<path d="M591.429 32.8573V49.2859H624.286V32.8573H591.429ZM640.714 65.7144H591.429V82.143H640.714V98.5716H575V16.4287H640.714V65.7144Z" fill="#F1ECEC"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86292">
+<rect width="640.714" height="115" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-light.png b/packages/console/app/src/asset/brand/opencode-wordmark-light.png
new file mode 100644
index 000000000..f53607f71
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-wordmark-light.png
diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-light.svg b/packages/console/app/src/asset/brand/opencode-wordmark-light.svg
new file mode 100644
index 000000000..24a36c7ce
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-wordmark-light.svg
@@ -0,0 +1,30 @@
+<svg width="640" height="115" viewBox="0 0 640 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86330)">
+<mask id="mask0_1401_86330" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="640" height="115">
+<path d="M640 0H0V115H640V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86330)">
+<path d="M49.2346 82.1433H16.4141V49.2861H49.2346V82.1433Z" fill="#CFCECD"/>
+<path d="M49.2308 32.8573H16.4103V82.143H49.2308V32.8573ZM65.641 98.5716H0V16.4287H65.641V98.5716Z" fill="#656363"/>
+<path d="M131.281 82.1433H98.4609V49.2861H131.281V82.1433Z" fill="#CFCECD"/>
+<path d="M98.4649 82.143H131.285V32.8573H98.4649V82.143ZM147.696 98.5716H98.4649V115H82.0547V16.4287H147.696V98.5716Z" fill="#656363"/>
+<path d="M229.746 65.7139V82.1424H180.516V65.7139H229.746Z" fill="#CFCECD"/>
+<path d="M229.743 65.7144H180.512V82.143H229.743V98.5716H164.102V16.4287H229.743V65.7144ZM180.512 49.2859H213.332V32.8573H180.512V49.2859Z" fill="#656363"/>
+<path d="M295.383 98.5718H262.562V49.2861H295.383V98.5718Z" fill="#CFCECD"/>
+<path d="M295.387 32.8573H262.567V98.5716H246.156V16.4287H295.387V32.8573ZM311.797 98.5716H295.387V32.8573H311.797V98.5716Z" fill="#656363"/>
+<path d="M393.848 82.1433H344.617V49.2861H393.848V82.1433Z" fill="#CFCECD"/>
+<path d="M393.844 32.8573H344.613V82.143H393.844V98.5716H328.203V16.4287H393.844V32.8573Z" fill="#211E1E"/>
+<path d="M459.485 82.1433H426.664V49.2861H459.485V82.1433Z" fill="#CFCECD"/>
+<path d="M459.489 32.8573H426.668V82.143H459.489V32.8573ZM475.899 98.5716H410.258V16.4287H475.899V98.5716Z" fill="#211E1E"/>
+<path d="M541.539 82.1433H508.719V49.2861H541.539V82.1433Z" fill="#CFCECD"/>
+<path d="M541.535 32.8571H508.715V82.1428H541.535V32.8571ZM557.946 98.5714H492.305V16.4286H541.535V0H557.946V98.5714Z" fill="#211E1E"/>
+<path d="M639.996 65.7139V82.1424H590.766V65.7139H639.996Z" fill="#CFCECD"/>
+<path d="M590.77 32.8573V49.2859H623.59V32.8573H590.77ZM640 65.7144H590.77V82.143H640V98.5716H574.359V16.4287H640V65.7144Z" fill="#211E1E"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86330">
+<rect width="640" height="115" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.png b/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.png
new file mode 100644
index 000000000..2e6007133
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.png
diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.svg b/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.svg
new file mode 100644
index 000000000..170be57c9
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.svg
@@ -0,0 +1,22 @@
+<svg width="641" height="115" viewBox="0 0 641 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86315)">
+<mask id="mask0_1401_86315" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="641" height="115">
+<path d="M640.714 0H0V115H640.714V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86315)">
+<path d="M49.2857 32.8573H16.4286V82.143H49.2857V32.8573ZM65.7143 98.5716H0V16.4287H65.7143V98.5716Z" fill="#F1ECEC"/>
+<path d="M98.5692 82.143H131.426V32.8573H98.5692V82.143ZM147.855 98.5716H98.5692V115H82.1406V16.4287H147.855V98.5716Z" fill="#F1ECEC"/>
+<path d="M230.003 65.7144H180.718V82.143H230.003V98.5716H164.289V16.4287H230.003V65.7144ZM180.718 49.2859H213.575V32.8573H180.718V49.2859Z" fill="#F1ECEC"/>
+<path d="M295.715 32.8573H262.858V98.5716H246.43V16.4287H295.715V32.8573ZM312.144 98.5716H295.715V32.8573H312.144V98.5716Z" fill="#F1ECEC"/>
+<path d="M394.285 32.8573H344.999V82.143H394.285V98.5716H328.57V16.4287H394.285V32.8573Z" fill="#F1ECEC"/>
+<path d="M459.997 32.8573H427.14V82.143H459.997V32.8573ZM476.425 98.5716H410.711V16.4287H476.425V98.5716Z" fill="#F1ECEC"/>
+<path d="M542.145 32.8571H509.288V82.1429H542.145V32.8571ZM558.574 98.5714H492.859V16.4286H542.145V0H558.574V98.5714Z" fill="#F1ECEC"/>
+<path d="M591.429 32.8573V49.2859H624.286V32.8573H591.429ZM640.714 65.7144H591.429V82.143H640.714V98.5716H575V16.4287H640.714V65.7144Z" fill="#F1ECEC"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86315">
+<rect width="640.714" height="115" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.png b/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.png
new file mode 100644
index 000000000..aa08768bb
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.png
diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.svg b/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.svg
new file mode 100644
index 000000000..3c70adeb2
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.svg
@@ -0,0 +1,22 @@
+<svg width="640" height="115" viewBox="0 0 640 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86353)">
+<mask id="mask0_1401_86353" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="640" height="115">
+<path d="M640 0H0V115H640V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86353)">
+<path d="M49.2308 32.8573H16.4103V82.143H49.2308V32.8573ZM65.641 98.5716H0V16.4287H65.641V98.5716Z" fill="#211E1E"/>
+<path d="M98.4649 82.143H131.285V32.8573H98.4649V82.143ZM147.696 98.5716H98.4649V115H82.0547V16.4287H147.696V98.5716Z" fill="#211E1E"/>
+<path d="M229.743 65.7144H180.512V82.143H229.743V98.5716H164.102V16.4287H229.743V65.7144ZM180.512 49.2859H213.332V32.8573H180.512V49.2859Z" fill="#211E1E"/>
+<path d="M295.387 32.8573H262.567V98.5716H246.156V16.4287H295.387V32.8573ZM311.797 98.5716H295.387V32.8573H311.797V98.5716Z" fill="#211E1E"/>
+<path d="M393.844 32.8573H344.613V82.143H393.844V98.5716H328.203V16.4287H393.844V32.8573Z" fill="#211E1E"/>
+<path d="M459.489 32.8573H426.668V82.143H459.489V32.8573ZM475.899 98.5716H410.258V16.4287H475.899V98.5716Z" fill="#211E1E"/>
+<path d="M541.535 32.8571H508.715V82.1428H541.535V32.8571ZM557.946 98.5714H492.305V16.4286H541.535V0H557.946V98.5714Z" fill="#211E1E"/>
+<path d="M590.77 32.8573V49.2859H623.59V32.8573H590.77ZM640 65.7144H590.77V82.143H640V98.5716H574.359V16.4287H640V65.7144Z" fill="#211E1E"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86353">
+<rect width="640" height="115" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/console/app/src/asset/brand/preview-opencode-dark.png b/packages/console/app/src/asset/brand/preview-opencode-dark.png
new file mode 100644
index 000000000..3c19242a8
--- /dev/null
+++ b/packages/console/app/src/asset/brand/preview-opencode-dark.png
diff --git a/packages/console/app/src/asset/brand/preview-opencode-logo-dark.png b/packages/console/app/src/asset/brand/preview-opencode-logo-dark.png
new file mode 100644
index 000000000..d1ef71372
--- /dev/null
+++ b/packages/console/app/src/asset/brand/preview-opencode-logo-dark.png
diff --git a/packages/console/app/src/asset/brand/preview-opencode-logo-light.png b/packages/console/app/src/asset/brand/preview-opencode-logo-light.png
new file mode 100644
index 000000000..d77bbc38a
--- /dev/null
+++ b/packages/console/app/src/asset/brand/preview-opencode-logo-light.png
diff --git a/packages/console/app/src/asset/brand/preview-opencode-wordmark-dark.png b/packages/console/app/src/asset/brand/preview-opencode-wordmark-dark.png
new file mode 100644
index 000000000..58bcf936f
--- /dev/null
+++ b/packages/console/app/src/asset/brand/preview-opencode-wordmark-dark.png
diff --git a/packages/console/app/src/asset/brand/preview-opencode-wordmark-light.png b/packages/console/app/src/asset/brand/preview-opencode-wordmark-light.png
new file mode 100644
index 000000000..b39b7997d
--- /dev/null
+++ b/packages/console/app/src/asset/brand/preview-opencode-wordmark-light.png
diff --git a/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-dark.png b/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-dark.png
new file mode 100644
index 000000000..b2cc02bbe
--- /dev/null
+++ b/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-dark.png
diff --git a/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-light.png b/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-light.png
new file mode 100644
index 000000000..106ccaf43
--- /dev/null
+++ b/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-light.png
diff --git a/packages/console/app/src/asset/lander/brand.png b/packages/console/app/src/asset/lander/brand.png
index 6172775e5..9c1653ed0 100644
--- a/packages/console/app/src/asset/lander/brand.png
+++ b/packages/console/app/src/asset/lander/brand.png
diff --git a/packages/console/app/src/component/legal.tsx b/packages/console/app/src/component/legal.tsx
index b55a20d36..c055977e3 100644
--- a/packages/console/app/src/component/legal.tsx
+++ b/packages/console/app/src/component/legal.tsx
@@ -1,3 +1,5 @@
+import { A } from "@solidjs/router"
+
 export function Legal() {
   return (
     <div data-component="legal">
@@ -5,10 +7,7 @@ export function Legal() {
         ©{new Date().getFullYear()} <a href="https://anoma.ly">Anomaly</a>
       </span>
       <span>
-        <a href="/brand">Brand</a>
-      </span>
-      <span>
-        <a href="/legal">Legal</a>
+        <A href="/brand">Brand</A>
       </span>
     </div>
   )
diff --git a/packages/console/app/src/routes/brand/index.css b/packages/console/app/src/routes/brand/index.css
index 7c85a7edf..042e26ecb 100644
--- a/packages/console/app/src/routes/brand/index.css
+++ b/packages/console/app/src/routes/brand/index.css
@@ -294,10 +294,12 @@
       cursor: pointer;
       display: flex;
       width: fit-content;
-      gap: 32px;
+      align-items: center;
+      gap: 12px;
       transition: background-color 0.2s ease;
       text-decoration: none;
 
+
       &:hover:not(:disabled) {
         background: var(--color-background-strong-hover);
       }
@@ -308,14 +310,83 @@
       }
     }
 
-    img {
+    [data-component="brand-grid"] {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 2rem;
+      margin-top: 4rem;
+      margin-bottom: 2rem;
+    }
+
+    [data-component="brand-grid"] img {
       width: 100%;
       height: auto;
       display: block;
-      margin-top: 4rem;
-      margin-bottom: 2rem;
+      border-radius: 4px;
+      border: 1px solid var(--color-border-weak);
     }
 
+    [data-component="brand-grid"] > div {
+      position: relative;
+    }
+
+    [data-component="actions"] {
+      position: absolute;
+      background: rgba(4, 0, 0, 0.08);
+      border-radius: 4px;
+      bottom: 0;
+      right: 0;
+      top: 0;
+      left: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 16px;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+
+      @media (max-width: 60rem) {
+        position: static;
+        opacity: 1;
+        margin-top: 1rem;
+        justify-content: center;
+      }
+    }
+
+    [data-component="brand-grid"] > div:hover [data-component="actions"] {
+      opacity: 1;
+
+      @media (max-width: 60rem) {
+        opacity: 1;
+      }
+    }
+
+    [data-component="actions"] button {
+      padding: 6px 12px;
+      background: var(--color-background);
+      color: var(--color-text);
+      border: none;
+      border-radius: 4px;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      transition: background-color 0.2s ease;
+      cursor: pointer;
+      box-shadow:
+        0 0 0 1px rgba(19, 16, 16, 0.08),
+        0 6px 8px -4px rgba(19, 16, 16, 0.12),
+        0 4px 3px -2px rgba(19, 16, 16, 0.12),
+        0 1px 2px -1px rgba(19, 16, 16, 0.12);
+
+
+      &:hover {
+        background: var(--color-background);
+      }
+    }
+
+
+
     @media (max-width: 60rem) {
       padding: 2rem 1.5rem;
     }
diff --git a/packages/console/app/src/routes/brand/index.tsx b/packages/console/app/src/routes/brand/index.tsx
index 53ce22bb9..4109b68f0 100644
--- a/packages/console/app/src/routes/brand/index.tsx
+++ b/packages/console/app/src/routes/brand/index.tsx
@@ -3,11 +3,23 @@ import { Title, Meta } from "@solidjs/meta"
 import { Header } from "~/component/header"
 import { Footer } from "~/component/footer"
 import { Legal } from "~/component/legal"
-import { Faq } from "~/component/faq"
-import brand from "../../asset/lander/brand.png"
+import previewLogoLight from "../../asset/brand/preview-opencode-logo-light.png"
+import previewLogoDark from "../../asset/brand/preview-opencode-logo-dark.png"
+import previewWordmarkLight from "../../asset/brand/preview-opencode-wordmark-light.png"
+import previewWordmarkDark from "../../asset/brand/preview-opencode-wordmark-dark.png"
+import previewWordmarkSimpleLight from "../../asset/brand/preview-opencode-wordmark-simple-light.png"
+import previewWordmarkSimpleDark from "../../asset/brand/preview-opencode-wordmark-simple-dark.png"
 
 
 export default function Brand() {
+  const downloadFile = (url: string, filename: string) => {
+    const link = document.createElement("a")
+    link.href = url
+    link.download = filename
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }
 
   return (
     <main data-page="enterprise">
@@ -19,82 +31,183 @@ export default function Brand() {
         <div data-component="content">
           <section data-component="brand-content">
             <h2>Brand guidelines</h2>
-            <p>
-              Resources and assets to help you work with the OpenCode brand.
-            </p>
-            <a data-component="download-button" href="#">Download brand assets<svg
-              width="24" height="24" viewBox="0 0 24 24" fill="none"
-              xmlns="http://www.w3.org/2000/svg">
-              <path d="M12 6.5L12 17M7.5 13L12 17.5L16.5 13" stroke="currentColor"
-                    stroke-width="1.5" stroke-linecap="square"/>
-            </svg>
-            </a>
-            <img src={brand} alt=""/>
+            <p>Resources and assets to help you work with the OpenCode brand.</p>
+            <button data-component="download-button">
+              Download all assets
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                   xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                  stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/>
+              </svg>
+            </button>
 
-            <p>If you need any help with anything brand related <a href="mailto:[email protected]">contact us</a>.</p>
-          </section>
-
-          <section data-component="faq">
-            <div data-slot="section-title">
-              <h3>FAQ</h3>
+            <div data-component="brand-grid">
+              <div>
+                <img src={previewLogoLight} alt="OpenCode brand guidelines"/>
+                <div data-component="actions">
+                  <button
+                    onClick={() => downloadFile(LogoLight, "opencode-logo-light.png")}>
+                    PNG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/>
+                    </svg>
+                  </button>
+                  <button onClick={() => downloadFile(brandAssetsLight, "opencode-logo-light.svg")}>
+                    SVG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewLogoDark} alt="OpenCode brand guidelines"/>
+                <div data-component="actions">
+                  <button
+                    onClick={() => downloadFile(brand, "opencode-logo-dark.png")}>
+                    PNG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor" stroke-width="1.5"
+                        stroke-linecap="square"/>
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() => downloadFile(brandAssetsLight, "opencode-logo-dark.svg")}>
+                    SVG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor" stroke-width="1.5"
+                        stroke-linecap="square"/>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewWordmarkLight} alt="OpenCode brand guidelines"/>
+                <div data-component="actions">
+                  <button
+                    onClick={() => downloadFile(brand, "opencode-wordmark-light.png")}>
+                    PNG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor" stroke-width="1.5"
+                        stroke-linecap="square"/>
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() => downloadFile(brandAssetsLight, "opencode-wordmark-light.svg")}>
+                    SVG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor" stroke-width="1.5"
+                        stroke-linecap="square"/>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewWordmarkDark} alt="OpenCode brand guidelines"/>
+                <div data-component="actions">
+                  <button
+                    onClick={() => downloadFile(brand, "opencode-wordmark-dark.png")}>
+                    PNG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor" stroke-width="1.5"
+                        stroke-linecap="square"/>
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() => downloadFile(brandAssetsLight, "opencode-wordmark-dark.svg")}>
+                    SVG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor" stroke-width="1.5"
+                        stroke-linecap="square"/>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewWordmarkSimpleLight} alt="OpenCode brand guidelines"/>
+                <div data-component="actions">
+                  <button
+                    onClick={() => downloadFile(brand, "opencode-wordmark-simple-light.png")}>
+                    PNG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor" stroke-width="1.5"
+                        stroke-linecap="square"/>
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() => downloadFile(brandAssetsLight, "opencode-wordmark-simple-light.svg")}>
+                    SVG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor" stroke-width="1.5"
+                        stroke-linecap="square"/>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewWordmarkSimpleDark} alt="OpenCode brand guidelines"/>
+                <div data-component="actions">
+                  <button
+                    onClick={() => downloadFile(brand, "opencode-wordmark-simple-dark.png")}>
+                    PNG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor" stroke-width="1.5"
+                        stroke-linecap="square"/>
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() => downloadFile(brandAssetsLight, "opencode-wordmark-simple-dark.svg")}>
+                    SVG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor" stroke-width="1.5"
+                        stroke-linecap="square"/>
+                    </svg>
+                  </button>
+                </div>
+              </div>
             </div>
-            <ul>
-              <li>
-                <Faq question="Does Opencode store our code or context data?">
-                  No. OpenCode never stores your code or context data. All
-                  processing happens locally or directly with your AI provider.
-                </Faq>
-              </li>
-              <li>
-                <Faq question="Who owns the code generated with OpenCode?">
-                  You do. All code produced is yours, with no licensing
-                  restrictions or ownership claims.
-                </Faq>
-              </li>
-              <li>
-                <Faq
-                  question="How can we trial OpenCode inside our organization?">
-                  Simply install and run an internal trial with your team. Since
-                  OpenCode doesn’t store any data, your developers can get
-                  started right away.
-                </Faq>
-              </li>
-              <li>
-                <Faq
-                  question="What happens if someone uses the `/share` feature?">
-                  By default, sharing is disabled. If enabled, conversations are
-                  sent to our share service and cached through our CDN. For
-                  enterprise use, we recommend disabling or self-hosting this
-                  feature.
-                </Faq>
-              </li>
-              <li>
-                <Faq question="Can OpenCode integrate with our company’s SSO?">
-                  Yes. Enterprise deployments can include SSO integration so all
-                  sessions and shared conversations are protected by your
-                  authentication system.
-                </Faq>
-              </li>
-              <li>
-                <Faq question="Can OpenCode be self-hosted?">
-                  Absolutely. You can fully self-host OpenCode, including the
-                  share feature, ensuring that data and pages are accessible
-                  only after authentication.
-                </Faq>
-              </li>
-              <li>
-                <Faq
-                  question="How do we get started with enterprise deployment?">
-                  Contact us to discuss pricing, implementation, and enterprise
-                  options like SSO, private registries, and self-hosting.
-                </Faq>
-              </li>
-            </ul>
           </section>
         </div>
-        <Footer />
+        <Footer/>
       </div>
-      <Legal />
+      <Legal/>
     </main>
   )
 }