Add brand assets page (#474)

* Add images

* Create component

* style update

* Add brand assets page

* update layout mobile

* update color and padding

* update font

* Delete black and white logos + include light logo

docs/brand-assets.mdx

@@ -0,0 +1,7 @@
+---
+title: Brand Assets
+---
+
+import BrandAssets from "@site/src/components/BrandAssets/index.tsx";
+
+<BrandAssets />

docs/sidebars.js

@@ -188,6 +188,6 @@ module.exports = {
       href: 'https://status.flashbots.net/',
       label: 'Status',
     },
-        'policies/privacy','policies/terms-of-service', 'policies/prohibited-use-policy',
+        'policies/privacy','policies/terms-of-service', 'policies/prohibited-use-policy', 'brand-assets',
   ],
 };

src/components/BrandAssets/AssetCard.tsx

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Flashbots Ltd. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from "react"
+import styles from  './styles.module.css';
+import Download from "./Download";
+
+interface IAssetCard {
+  title?: string
+  cover?: string
+  svg?: string
+  png?: string
+}
+
+function AssetCard({ title, cover, svg, png }: IAssetCard) {
+  return (
+    <div className="my-4 w-1/2 w-full">
+      <img alt="" src={ cover } className="w-full h-56 object-cover border border-solid border-slate-500/25 rounded-xl"/>
+      <div className="w-full flex items-center gap-1 bg-gray-50/0 rounded-lg">
+        <p className="px-2 grow m-0">{ title }</p>
+        <Download file={ svg } type="svg" />
+        <Download file={ png } type="png" />
+      </div>
+    </div>
+  )
+}
+
+export default AssetCard

src/components/BrandAssets/Download.tsx

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Flashbots Ltd. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from "react"
+
+interface IDownload {
+  file?: string
+}
+
+function Download({ file, type }: IDownload) {
+  return (
+    <a target="\_blank" href={ file } download className="border border-solid py-1 px-3 border-slate-400/50 rounded-lg flex items-center text-sm font-mono font-bold">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4 pr-1">
+        <path d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z" />
+        <path d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z" />
+      </svg>
+      { type }
+    </a>
+  )
+}
+
+export default Download

src/components/BrandAssets/index.tsx

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Flashbots Ltd. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import {useState} from 'react';
+import AssetCard from './AssetCard';
+
+export default function BrandAssets() {
+
+  return (
+    <div>
+      <div className='flex max-[768px]:flex-col gap-4'>
+        <AssetCard
+          title="Flashbots Logo - Dark"
+          cover="/img/brand-assets/flashbots_logo_dark.jpg"
+          svg="/img/brand-assets/flashbots_logo_dark.svg"
+          png="/img/brand-assets/flashbots_logo_dark.png"
+        />
+        <AssetCard
+          title="Flashbots Logo - Light"
+          cover="/img/brand-assets/flashbots_logo_light.jpg"
+          svg="/img/brand-assets/flashbots_logo_light.svg"
+          png="/img/brand-assets/flashbots_logo_light.png"
+        />
+      </div>
+
+      <div className='flex max-[768px]:flex-col gap-4'>
+        <AssetCard
+          title="Flashbots Icon"
+          cover="/img/brand-assets/flashbots_icon.jpg"
+          svg="/img/brand-assets/flashbots_icon.svg"
+          png="/img/brand-assets/flashbots_icon.png"
+        />
+        <div className='block my-4 w-1/2 w-full'></div>
+      </div>
+
+    </div>
+  );
+}

src/components/BrandAssets/styles.module.css

@@ -0,0 +1,6 @@
+.root {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(clamp(100px,(1024px - 100vw) *1000, 100%), 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}