From ba1f530de7eec745ecaaedd45693f79da375776d Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 28 Aug 2026 13:55:05 -0500
Subject: [PATCH] back button

---
 .../src/components/Back/index.module.css      |  3 +++
 .../website/src/components/Back/index.tsx     | 21 +++++++++++++++++
 .../src/components/Button/index.module.css    |  6 ++---
 .../website/src/components/ToolBanner.astro   | 23 ++++++++++++++++++-
 packages/website/src/layouts/BaseLayout.astro |  2 +-
 5 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 packages/website/src/components/Back/index.module.css
 create mode 100644 packages/website/src/components/Back/index.tsx

diff --git a/packages/website/src/components/Back/index.module.css b/packages/website/src/components/Back/index.module.css
new file mode 100644
index 000000000..76cd305bd
--- /dev/null
+++ b/packages/website/src/components/Back/index.module.css
@@ -0,0 +1,3 @@
+.back {
+  display: contents;
+}
diff --git a/packages/website/src/components/Back/index.tsx b/packages/website/src/components/Back/index.tsx
new file mode 100644
index 000000000..8d7f985ac
--- /dev/null
+++ b/packages/website/src/components/Back/index.tsx
@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../ui/classNames";
+import styles from "./index.module.css";
+
+interface Props extends ComponentProps<"div"> {}
+
+export function Back({ className, onClick, ...props }: Props) {
+  console.log("init");
+
+  return (
+    <div
+      className={classNames(styles.back, className)}
+      onClick={(event) => {
+        console.log("back");
+        window.history.back();
+        onClick?.(event);
+      }}
+      {...props}
+    />
+  );
+}
diff --git a/packages/website/src/components/Button/index.module.css b/packages/website/src/components/Button/index.module.css
index a976e1af5..2d896d9d1 100644
--- a/packages/website/src/components/Button/index.module.css
+++ b/packages/website/src/components/Button/index.module.css
@@ -10,14 +10,14 @@
   border: none;
 
   font-family: var(--font-family-regular);
-  font-size: 0.75em;
+  font-size: 0.8em;
   color: var(--gray-1);
   font-weight: var(--weight-medium);
 
   cursor: pointer;
 
   &[data-size="minor"] {
-    font-size: 0.75em;
+    font-size: 0.7em;
     padding: var(--space-2) var(--space-3);
   }
 
@@ -61,7 +61,7 @@
 
   &[data-variant="surface"],
   &[data-variant="soft"] {
-    background-color: var(--accent-3);
+    background-color: var(--accent-a3);
     color: var(--gray-12);
   }
 
diff --git a/packages/website/src/components/ToolBanner.astro b/packages/website/src/components/ToolBanner.astro
index d371df220..8d7dacd83 100644
--- a/packages/website/src/components/ToolBanner.astro
+++ b/packages/website/src/components/ToolBanner.astro
@@ -1,7 +1,11 @@
 ---
+import { ArrowLeftIcon } from "@radix-ui/react-icons";
 import type { Tool } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
+import { Back } from "./Back";
+import { Flex } from "./Flex";
 import { Heading } from "./Heading";
+import { IconButton } from "./IconButton";
 
 interface Props {
   locale: string;
@@ -16,6 +20,8 @@ const toolStrings =
 
 <style>
   .tool-banner {
+    --tool-banner-overlap: 8rem;
+
     background-size: cover;
 
     .content {
@@ -40,11 +46,18 @@ const toolStrings =
       }
 
       .centered {
+        position: relative;
+
         flex: 1;
         max-width: var(--page-width);
 
         display: flex;
         flex-direction: column;
+
+        .return {
+          width: 0.75em;
+          height: 0.75em;
+        }
       }
 
       .pattern {
@@ -87,7 +100,15 @@ const toolStrings =
 
     <div class="centered">
       <Heading weight="bold" size="2">
-        {toolStrings.name}
+        <Flex align="center" gap="4">
+          <Back client:load>
+            <IconButton variant="soft" color="gray" highContrast>
+              <ArrowLeftIcon className="return" />
+            </IconButton>
+          </Back>
+
+          {toolStrings.name}
+        </Flex>
       </Heading>
     </div>
   </div>
diff --git a/packages/website/src/layouts/BaseLayout.astro b/packages/website/src/layouts/BaseLayout.astro
index 0caa0cb32..b51471d43 100644
--- a/packages/website/src/layouts/BaseLayout.astro
+++ b/packages/website/src/layouts/BaseLayout.astro
@@ -50,7 +50,7 @@ const { accent, locale } = Astro.props;
 
           background-color: var(--gray-1);
 
-          padding: var(--space-5);
+          padding: var(--space-4);
           gap: var(--space-6);
         }
       }