feat: brand kit page

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[typescriptreact, javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
@@ -15,4 +15,4 @@
   "prettier.useTabs": false,
   "prettier.configPath": ".prettierrc",
   "prettier.prettierPath": "node_modules/prettier"
-}
+}

cspell/project-words.txt

@@ -121,3 +121,5 @@ INKSEPOLIA
 commoditizes
 multichain
 Routescan
+Lurus
+wordmark

public/downloads/ink-brand-kit.zip

@@ -0,0 +1 @@
+PK

public/downloads/ink-typeface.zip

@@ -0,0 +1 @@
+PK

src/components/AddNetworkButton.tsx

@@ -18,35 +18,43 @@ export const AddNetworkButton = () => {
     checkNetwork();
 
     if ((window as any).ethereum) {
-      (window as any).ethereum.on('chainChanged', checkNetwork);
+      (window as any).ethereum.on("chainChanged", checkNetwork);
     }
 
     return () => {
       if ((window as any).ethereum) {
-        (window as any).ethereum.removeListener('chainChanged', checkNetwork);
+        (window as any).ethereum.removeListener("chainChanged", checkNetwork);
       }
     };
   }, []);
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-2 mt-4">
       {isConnected ? (
         <div className="flex items-center text-green-600 dark:text-green-400 font-semibold">
-          <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          <svg
+            className="w-5 h-5 mr-2"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M5 13l4 4L19 7"
+            />
           </svg>
           Successfully connected to Ink Sepolia
         </div>
       ) : (
-        <div className="space-y-2">
-          <Button
-            variant="primary"
-            onClick={switchToInkSepolia}
-          >
+        <div className="space-y-4">
+          <Button variant="primary" onClick={switchToInkSepolia}>
             Add Ink Sepolia Network
           </Button>
           <div className="text-sm text-gray-600 dark:text-gray-400 italic">
-            Note: Automatic network addition may not work with all wallets. See manual instructions below if needed.
+            Note: Automatic network addition may not work with all wallets. See
+            manual instructions below if needed.
           </div>
         </div>
       )}

src/components/Button.tsx

@@ -14,10 +14,11 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
   return (
     <button
       className={clsx(
-        "font-semibold py-2 px-4 rounded-xl inline-flex items-center transition-all",
+        "font-bold py-5 px-8 inline-flex items-center transition-all rounded-full text-xl backdrop-blur-[32px]",
         {
-          "text-magic-white bg-magic-purple": variant === "primary",
-          "text-magic-purple bg-magic-semi-deep-purple/15 ":
+          "text-magic-white bg-magic-purple shadow-[0px_3px_84px_-10px_rgba(63,107,175,0.5)]":
+            variant === "primary",
+          "text-magic-purple bg-magic-semi-deep-purple/15 shadow-[0px_3px_84px_-10px_rgba(63,107,175,0.5)]":
             variant === "secondary",
         }
       )}

src/components/DownloadButton.tsx

@@ -0,0 +1,36 @@
+import { PropsWithChildren } from "react";
+
+import { DownloadIcon } from "@/icons/Download";
+
+import { Button } from "./Button";
+
+interface DownloadButtonProps {
+  sourceFilePath: string;
+  destinationFileName: string;
+  label: string;
+  size: string;
+}
+
+export const DownloadButton: React.FC<
+  PropsWithChildren<DownloadButtonProps>
+> = ({ sourceFilePath, destinationFileName, label, size }) => {
+  return (
+    <Button
+      variant="primary"
+      onClick={() => {
+        const link = document.createElement("a");
+        link.href = sourceFilePath;
+        link.download = destinationFileName;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      }}
+    >
+      <div className="flex items-center gap-2">
+        <DownloadIcon />
+        <span className="text-sm sm:text-xl">{label}</span>
+        <span className="text-sm sm:text-xl text-magic-soft-pink">{size}</span>
+      </div>
+    </Button>
+  );
+};

src/icons/Download.tsx

@@ -0,0 +1,23 @@
+interface PencilProps {
+  className?: string;
+}
+
+export const DownloadIcon: React.FC<PencilProps> = ({
+  className = "size-6",
+}) => {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.25 15.354V3.354H12.75V15.354H11.25ZM12.5156 15.8931C12.375 16.0337 12.2031 16.104 12 16.104C11.7969 16.104 11.625 16.0337 11.4844 15.8931L6.46875 11.0884L7.5 9.98682L12 14.3228L16.5 9.98682L17.5312 11.0884L12.5156 15.8931ZM3.5625 14.1118V18.0728C3.5625 18.604 3.75 19.0571 4.125 19.4321C4.51562 19.8071 4.97656 19.9946 5.50781 19.9946H18.4922C19.0234 19.9946 19.4766 19.8071 19.8516 19.4321C20.2422 19.0571 20.4375 18.604 20.4375 18.0728V14.1118H21.9375V18.0728C21.9375 19.0103 21.6016 19.8149 20.9297 20.4868C20.2578 21.1587 19.4453 21.4946 18.4922 21.4946H5.50781C4.57031 21.4946 3.75781 21.1665 3.07031 20.5103C2.39844 19.8384 2.0625 19.0259 2.0625 18.0728V14.1118H3.5625Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

src/pages/quick-start/get-connected.mdx

@@ -1,5 +1,5 @@
-import { Callout } from 'nextra/components'
-import CopyableCode from '@/components/CopyableCode'
+import { Callout } from "nextra/components";
+import CopyableCode from "@/components/CopyableCode";
 import { AddNetworkButton } from "../../components/AddNetworkButton";
 
 # Get Connected
@@ -8,7 +8,6 @@ The button below will add the Ink Sepolia network to your wallet:
 
 <AddNetworkButton />
 
-
 ## Network Information
 
 | Field                            | Information                                                    |
@@ -26,22 +25,25 @@ The button below will add the Ink Sepolia network to your wallet:
 Additional RPC endpoints can be found [here](/build/tools/rpcs).
 
 ## What do I Need to Start Developing on Ink?
+
 1. An IDE (integrated developer environment) like [Visual Studio Code](https://code.visualstudio.com/), [Cursor](https://www.cursor.com), or [Remix](https://remix.ethereum.org/) to write smart contracts in solidity.
 1. A wallet that holds ETH such as [Kraken Wallet](https://www.kraken.com/wallet), [MetaMask](https://metamask.io/), or [Rainbow](https://rainbow.me/).
-    - We suggest having at least 0.05 ETH for standard deployments on Ink.
-    - You can request Ink Sepolia ETH using our [Faucets](/quick-start/faucets).
+   - We suggest having at least 0.05 ETH for standard deployments on Ink.
+   - You can request Ink Sepolia ETH using our [Faucets](/quick-start/faucets).
 1. We recommend using a development framework like [Foundry](https://book.getfoundry.sh/) or [Hardhat](https://hardhat.org/)
-    - [Guide to deploy a contract using Foundry](/build/tutorials/deploying-a-smart-contract/foundry)
-    - [Guide to deploy a contract using Hardhat](/build/tutorials/deploying-a-smart-contract/hardhat)
-    - [Guide to deploy a contract using Remix](/build/tutorials/deploying-a-smart-contract/remix)
+   - [Guide to deploy a contract using Foundry](/build/tutorials/deploying-a-smart-contract/foundry)
+   - [Guide to deploy a contract using Hardhat](/build/tutorials/deploying-a-smart-contract/hardhat)
+   - [Guide to deploy a contract using Remix](/build/tutorials/deploying-a-smart-contract/remix)
 
 <Callout type="info" emoji="ℹ️">
-Try out [InkGPT](https://chatgpt.com/g/g-ef8AAM6s4-inkkit-assistant)! Blaze through the docs and get deployed in no time with our new AI assistant.
+  Try out [InkGPT](https://chatgpt.com/g/g-ef8AAM6s4-inkkit-assistant)! Blaze
+  through the docs and get deployed in no time with our new AI assistant.
 </Callout>
 
 ## Connecting to Ink
 
 ### Connecting MetaMask Wallet to Ink Sepolia (Testnet)
+
 ** Click the button at the top of the page to add the network to your wallet **
 
 To manually add Ink Sepolia as a custom network do following:
@@ -59,9 +61,11 @@ Next: get some [testnet ETH](/quick-start/faucets) from our faucets!
 ![Tux, the Linux mascot](../../images/add_network.png)
 
 ###### Fund your Wallet
+
 Get testnet Ether (ETH) from these faucets so you can fund your wallet to send transactions and deploy contracts on Ink Sepolia.
 
 Check out faucets [here](/quick-start/faucets). Alternatively, you can [bridge](/quick-start/faucets#bridging-funds-to-ink-sepolia) testnet funds.
 
 ## What Next?
+
 Check out the [tutorials](/build/tutorials/deploying-a-smart-contract/foundry) to learn how to deploy contracts on Ink and more!

src/pages/work-ink/brand-kit.mdx

@@ -0,0 +1,181 @@
+---
+title: Brand Kit
+description: The core essence of the Ink branding, featuring logos, colors, typefaces, illustrations, and best practices
+---
+
+import Image from "next/image";
+import { DownloadButton } from "@/components/DownloadButton";
+import { DownloadIcon } from "@/icons/Download";
+
+# Brand Kit
+
+<div className="w-full rounded-xl overflow-hidden my-8">
+  <Image
+    src="/images/brand-kit/docs-hero.png"
+    alt="Ink Brand Kit Banner"
+    width={1200}
+    height={400}
+    priority
+  />
+</div>
+
+This brand kit includes the core essence of the Ink branding, featuring logos, colors, typefaces, illustrations, and best practices. It should help any and all creative work.
+
+<div className="mt-6">
+  <DownloadButton
+    sourceFilePath="/downloads/ink-brand-kit.zip"
+    destinationFileName="ink-brand-kit.zip"
+    label="Download Brand Kit"
+    size="10 MB"
+  />
+</div>
+
+## Logo
+
+The Ink logo consists of a symbol and a word mark.<br/>
+Wherever possible, the horizontal full logo should be used.
+
+<div className="mt-6">
+  <DownloadButton
+    sourceFilePath="/downloads/ink-logos.zip"
+    destinationFileName="ink-logos.zip"
+    label="Download Logos"
+    size="1 MB"
+  />
+</div>
+
+### Logo System
+
+<div className="flex flex-col gap-8">
+  <div className="flex gap-4 mt-7">
+    <div className="flex-[2.0619] flex flex-col gap-3">
+      <Image
+        src="/images/brand-kit/docs-logo-wordmark.png"
+        alt="Ink Full Logo"
+        width={1099}
+        height={528}
+        priority
+        className="w-full"
+      />
+      <span className="font-bold text-xs">Full Ink logo</span>
+    </div>
+    <div className="flex-1 flex flex-col gap-3">
+      <Image
+        src="/images/brand-kit/docs-logo-symbol.png"
+        alt="Ink Chain Mark"
+        width={533}
+        height={528}
+        priority
+        className="w-full"
+      />
+      <span className="font-bold text-xs">Ink chain mark</span>
+    </div>
+  </div>
+  <div className="flex gap-4">
+    <div className="flex-[2.0619] flex flex-col gap-3">
+      <Image
+        src="/images/brand-kit/docs-logo-wordmark-margin.png"
+        alt="Ink Full Logo with Safe Margin"
+        width={1099}
+        height={528}
+        priority
+        className="w-full"
+      />
+      <span className="font-bold text-xs">Safe margin</span>
+    </div>
+    <div className="flex-1 flex flex-col gap-3">
+      <Image
+        src="/images/brand-kit/docs-logo-symbol-margin.png"
+        alt="Ink Chain Mark with Safe Margin"
+        width={533}
+        height={528}
+        priority
+        className="w-full"
+      />
+      <span className="font-bold text-xs">Safe margin</span>
+    </div>
+  </div>
+</div>
+
+### Logo Extensions
+
+<div className="flex flex-col gap-8">
+  <div className="flex gap-4 mt-7">
+    <div className="flex-1 flex flex-col gap-3">
+      <Image
+        src="/images/brand-kit/docs-logo-extension-kraken.png"
+        alt="Ink Logo with Kraken Extension"
+        width={815}
+        height={529}
+        priority
+        className="w-full"
+      />
+      <span className="font-bold text-xs">With Kraken</span>
+    </div>
+    <div className="flex-1 flex flex-col gap-3">
+      <Image
+        src="/images/brand-kit/docs-logo-stacked.png"
+        alt="Ink Logo Stacked with Other Marks"
+        width={815}
+        height={529}
+        priority
+        className="w-full"
+      />
+      <span className="font-bold text-xs">With other marks</span>
+    </div>
+  </div>
+  <div className="flex-1 flex flex-col gap-3">
+    <Image
+      src="/images/brand-kit/docs-logo-partnerships.png"
+      alt="Ink Logo Partnership Examples"
+      width={1668}
+      height={529}
+      priority
+      className="w-full"
+    />
+    <span className="font-bold text-xs">Partnerships</span>
+  </div>
+</div>
+
+## Color
+
+Ink purple should be used whenever possible.<br/>
+Backgrounds typically use gradients.
+
+<div className="my-8">
+  <Image
+    src="/images/brand-kit/docs-color.png"
+    alt="Ink Colors"
+    width={1666}
+    height={1417}
+    priority
+    className="w-full"
+  />
+</div>
+
+## Typography
+
+Ink uses the open source typeface Plus Jakarta Sans.<br/>
+Lurus Alternatives are used in most cases.
+
+<div className="flex flex-col gap-8 mt-6">
+  <div>
+    <DownloadButton
+      sourceFilePath="/downloads/ink-typeface.zip"
+      destinationFileName="ink-typeface.zip"
+      label="Download Typeface"
+      size="1 MB"
+    />
+  </div>
+
+  <div>
+    <Image
+      src="/images/brand-kit/docs-type.png"
+      alt="Ink Typography"
+      width={1666}
+      height={1417}
+      priority
+      className="w-full"
+    />
+  </div>
+</div>