From a98f0e84d588ad4ffd13b8f8fbeb8eeebfc1d290 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 19 Mar 2025 18:53:48 -0500
Subject: [PATCH] feat: gradient

---
 packages/i18n/strings/en.json                    |  1 +
 packages/website/src/core/radix/var.ts           | 13 +------------
 .../website/src/pages/[...locale]/api/_index.tsx | 16 +++++++++++++++-
 .../src/pages/[...locale]/api/index.astro        |  2 +-
 .../website/src/pages/[...locale]/index.astro    |  4 +++-
 5 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index 953615a66..2ced1ebfc 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -841,6 +841,7 @@
     "tools": {
       "api": {
         "name": "API",
+        "button": "Nerd out",
         "description": "BlitzKit API docs",
         "seo_description": "Comprehensive documentation and detailed insights into BlitzKit's API, enabling developers to integrate and utilize advanced features for World of Tanks Blitz efficiently."
       },
diff --git a/packages/website/src/core/radix/var.ts b/packages/website/src/core/radix/var.ts
index 4f620bce8..837a374da 100644
--- a/packages/website/src/core/radix/var.ts
+++ b/packages/website/src/core/radix/var.ts
@@ -10,18 +10,7 @@ export type VarName =
   | `space-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
   | `shadow-${1 | 2 | 3 | 4 | 5 | 6}`
   | `${RadixColor | 'accent' | 'gray'}-${
-      | 1
-      | 2
-      | 3
-      | 4
-      | 5
-      | 6
-      | 7
-      | 8
-      | 9
-      | 10
-      | 11
-      | 12
+      | `${'' | 'a'}${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`
       | 'surface'
       | 'indicator'
       | 'track'
diff --git a/packages/website/src/pages/[...locale]/api/_index.tsx b/packages/website/src/pages/[...locale]/api/_index.tsx
index d56040e96..bbaa887e4 100644
--- a/packages/website/src/pages/[...locale]/api/_index.tsx
+++ b/packages/website/src/pages/[...locale]/api/_index.tsx
@@ -1,6 +1,7 @@
 import { OpenInNewWindowIcon } from '@radix-ui/react-icons';
-import { Code, IconButton, Link, Table } from '@radix-ui/themes';
+import { Box, Code, IconButton, Link, Table } from '@radix-ui/themes';
 import { useState } from 'react';
+import { Var } from '../../../core/radix/var';
 import type { APIPath } from './index.astro';
 
 interface SlugsTableProps {
@@ -71,6 +72,19 @@ export function SlugsTable({ slugs, path }: SlugsTableProps) {
         })}
 
         <Table.Row style={{ position: 'relative' }}>
+          {!expanded && (
+            <Box
+              width="100%"
+              height="100%"
+              position="absolute"
+              top="0"
+              style={{
+                transform: 'translate(0, -100%)',
+                background: `linear-gradient(${Var('black-a1')}, ${Var('black-a5')})`,
+              }}
+            />
+          )}
+
           <Table.Cell />
 
           <Link
diff --git a/packages/website/src/pages/[...locale]/api/index.astro b/packages/website/src/pages/[...locale]/api/index.astro
index d7b50983d..31e43c725 100644
--- a/packages/website/src/pages/[...locale]/api/index.astro
+++ b/packages/website/src/pages/[...locale]/api/index.astro
@@ -126,7 +126,7 @@ apis.sort((a, b) => a.path.localeCompare(b.path));
 ---
 
 <ToolLayout tool={apiTool}>
-  <PageWrapper py="9" color="iris">
+  <PageWrapper py="9" color="indigo">
     <Flex direction="column" gap="6">
       {
         apis.map((api, index) => (
diff --git a/packages/website/src/pages/[...locale]/index.astro b/packages/website/src/pages/[...locale]/index.astro
index c846e34d7..c980744d2 100644
--- a/packages/website/src/pages/[...locale]/index.astro
+++ b/packages/website/src/pages/[...locale]/index.astro
@@ -10,6 +10,7 @@ import HomeHero from '../../components/HomeHero.astro';
 import { Plugs } from '../../components/Plugs';
 import ToolCard from '../../components/ToolCard.astro';
 import {
+  apiTool,
   compareTool,
   discordTool,
   embedTool,
@@ -102,10 +103,11 @@ export const getStaticPaths = (() => {
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={embedTool} />
-        <ToolCard tool={moreTool} />
+        <ToolCard tool={apiTool} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard tool={moreTool} />
         <Box flexGrow="1" />
       </Flex>