Add GAME Media Kit page

docusaurus.config.ts

@@ -74,6 +74,7 @@ const config: Config = {
           label: 'Info',
         },
         { to: '/news', label: 'Latest News', position: 'left' },
+        { to: '/media-kit', label: 'Media Kit', position: 'left' },
         {
           href: ARCAO.github,
           label: 'GitHub',

src/pages/index.module.css

@@ -20,4 +20,4 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}
+}

src/pages/index.tsx

@@ -41,4 +41,4 @@ export default function Home(): ReactNode {
       </main>
     </Layout>
   );
-}
+}

src/pages/media-kit/components/ColorPalette.module.css

@@ -0,0 +1,80 @@
+.colorGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
+}
+
+.colorCard {
+    background: rgba(128, 128, 128, 0.05);
+    border: 1px solid var(--ifm-color-emphasis-200);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+[data-theme='dark'] .colorCard {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.colorSwatch {
+    height: 120px;
+    width: 100%;
+    background-image:
+        linear-gradient(45deg, #ccc 25%, transparent 25%),
+        linear-gradient(-45deg, #ccc 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #ccc 75%),
+        linear-gradient(-45deg, transparent 75%, #ccc 75%);
+    background-color: white;
+    background-size: 16px 16px;
+    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+}
+
+[data-theme='dark'] .colorSwatch {
+    background-image:
+        linear-gradient(45deg, #333 25%, transparent 25%),
+        linear-gradient(-45deg, #333 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #333 75%),
+        linear-gradient(-45deg, transparent 75%, #333 75%);
+    background-color: #1a1a1a;
+}
+
+.colorInfo {
+    padding: 1rem;
+}
+
+.colorInfo h3 {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.2rem;
+}
+
+.hexButton {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: var(--ifm-color-emphasis-100);
+    border: 1px solid var(--ifm-color-emphasis-200);
+    border-radius: 4px;
+    font-family: var(--ifm-font-family-monospace);
+    font-size: 0.9rem;
+    cursor: pointer;
+    position: relative;
+    transition: background-color 0.2s;
+}
+
+.hexButton:hover {
+    background: var(--ifm-color-emphasis-200);
+}
+
+.copyIndicator {
+    position: absolute;
+    bottom: -25px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 0.8rem;
+    color: var(--ifm-color-emphasis-600);
+    white-space: nowrap;
+}
+
+.description {
+    margin: 1.5rem 0 0 0;
+    font-size: 0.9rem;
+    color: var(--ifm-color-emphasis-700);
+}

src/pages/media-kit/components/ColorPalette.tsx

@@ -0,0 +1,92 @@
+import React, { JSX, useState } from 'react';
+import styles from './ColorPalette.module.css';
+
+interface ColorSwatch {
+    name: string;
+    hex?: string;
+    gradient?: string;
+    description?: string;
+}
+
+const brandColors: ColorSwatch[] = [
+    {
+        name: 'Black',
+        hex: '#000000',
+        description: 'Used for text and high contrast elements.'
+    },
+    {
+        name: 'White',
+        hex: '#FFFFFF',
+        description: 'Used for backgrounds and light elements.'
+    },
+    {
+        name: 'Green',
+        hex: 'rgba(34, 197, 94, 1)',
+        description: 'Represents Minting of $GAME.'
+    },
+    {
+        name: 'Purple',
+        hex: 'rgba(147, 51, 234, 1)',
+        description: 'Represents Creating Games & Content in the $GAME Ecosystem.'
+    },
+    {
+        name: 'Blue',
+        hex: 'rgba(59, 130, 246, 1)',
+        description: 'Represents Playing Games in the $GAME Ecosystem.'
+    },
+    {
+        name: 'Yellow',
+        hex: 'rgba(245, 158, 11, 1)',
+        description: 'Represents Earning in the &GAME Ecosystem.'
+    },
+    {
+        name: 'Gradient',
+        gradient: 'linear-gradient(#8e44ad, #3498db)',
+        description: 'Represents Asset Ownership in the $GAME Ecostystem.'
+    }
+];
+
+export default function ColorPalette(): JSX.Element {
+    const [copiedColor, setCopiedColor] = useState<string | null>(null);
+
+    const copyToClipboard = (hex: string) => {
+        navigator.clipboard.writeText(hex);
+        setCopiedColor(hex);
+        setTimeout(() => setCopiedColor(null), 2000);
+    };
+
+    return (
+        <div className={styles.colorGrid}>
+            {brandColors.map((color) => (
+                <div key={color.name} className={styles.colorCard}>
+                    <div className={styles.colorSwatch}>
+                        <div
+                            style={{
+                                background: color.gradient || color.hex,
+                                width: '100%',
+                                height: '100%'
+                            }}
+                        />
+                    </div>
+                    <div className={styles.colorInfo}>
+                        <h3>{color.name}</h3>
+                        {(color.hex || color.gradient) && (
+                            <button
+                                className={styles.hexButton}
+                                onClick={() => copyToClipboard(color.hex || color.gradient || '')}
+                            >
+                                {color.hex || color.gradient}
+                                <span className={styles.copyIndicator}>
+                                    {copiedColor === (color.hex || color.gradient) ? 'Copied!' : 'Click to copy'}
+                                </span>
+                            </button>
+                        )}
+                        {color.description && (
+                            <p className={styles.description}>{color.description}</p>
+                            )}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}

src/pages/media-kit/components/FontDisplay.module.css

@@ -0,0 +1,57 @@
+.fontContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+}
+
+.fontFamily {
+    border: 1px solid var(--ifm-color-emphasis-200);
+    border-radius: 8px;
+    padding: 2rem;
+}
+
+.fontHeader {
+    margin-bottom: 2rem;
+}
+
+.fontHeader h3 {
+    margin: 0 0 0.5rem 0;
+}
+
+.fontMeta {
+    color: var(--ifm-color-emphasis-600);
+    font-size: 0.9rem;
+}
+
+.weightExamples {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.weightExample {
+    padding: 1rem;
+    background: var(--ifm-color-emphasis-100);
+    border-radius: 4px;
+}
+
+.weightInfo {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+}
+
+.weightName {
+    font-weight: 500;
+}
+
+.weightValue {
+    color: var(--ifm-color-emphasis-600);
+    font-family: var(--ifm-font-family-monospace);
+}
+
+.sampleText {
+    margin: 0;
+    font-size: 1.1rem;
+    line-height: 1.5;
+}

src/pages/media-kit/components/FontDisplay.tsx

@@ -0,0 +1,74 @@
+import React, { JSX } from 'react';
+import styles from './FontDisplay.module.css';
+
+interface FontExample {
+    name: string;
+    family: string;
+    weights: {
+        weight: string;
+        name: string;
+        sample: string;
+    }[];
+}
+
+const fonts: FontExample[] = [
+    {
+        name: 'Heading Font',
+        family: 'Inter',
+        weights: [
+            {
+                weight: '400',
+                name: 'Regular',
+                sample: 'The quick brown fox jumps over the lazy dog'
+            }
+        ],
+        usage: 'Used for H1–H2 big titles.'
+    },
+    {
+        name: 'Body Font',
+        family: 'Roboto Condensed',
+        weights: [
+            {
+                weight: '300',
+                name: 'Light',
+                sample: 'The quick brown fox jumps over the lazy dog'
+            }
+        ],
+        usage: 'Used for body text and H3+ titles.'
+    }
+];
+
+export default function FontDisplay(): JSX.Element {
+    return (
+        <div className={styles.fontContainer}>
+            {fonts.map((font) => (
+                <div key={font.name} className={styles.fontFamily}>
+                    <div className={styles.fontHeader}>
+                        <h3>{font.name}</h3>
+                        <span className={styles.fontMeta}>Font Family: {font.family}</span>
+                    </div>
+
+                    <div className={styles.weightExamples}>
+                        {font.weights.map((weight) => (
+                            <div key={weight.weight} className={styles.weightExample}>
+                                <div className={styles.weightInfo}>
+                                    <span className={styles.weightName}>{weight.name}</span>
+                                    <span className={styles.weightValue}>{weight.weight}</span>
+                                </div>
+                                <p
+                                    className={styles.sampleText}
+                                    style={{
+                                        fontFamily: font.family,
+                                        fontWeight: weight.weight
+                                    }}
+                                >
+                                    {weight.sample}
+                                </p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}