From a7f93698a6a1d00c0fec49f937dd470fa95d5fef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Wed, 14 Jan 2026 13:30:12 -0600 Subject: [PATCH] feat: tool banners --- .../public/assets/patterns/avatars.svg | 3 + .../src/components/AvatarCard/index.css | 2 +- .../src/components/BaseStyles.astro | 11 ++- .../src/components/Heading/index.css | 25 ++++++ .../src/components/Heading/index.tsx | 23 ++++++ .../website-ue/src/components/Navbar.astro | 4 +- .../src/components/ToolBanner.astro | 81 +++++++++++++++++++ packages/website-ue/src/core/tools/tools.ts | 6 ++ .../website-ue/src/layouts/BaseLayout.astro | 8 +- .../src/pages/[...locale]/avatars/index.astro | 4 + 10 files changed, 161 insertions(+), 6 deletions(-) create mode 100644 packages/website-ue/public/assets/patterns/avatars.svg create mode 100644 packages/website-ue/src/components/Heading/index.css create mode 100644 packages/website-ue/src/components/Heading/index.tsx create mode 100644 packages/website-ue/src/components/ToolBanner.astro diff --git a/packages/website-ue/public/assets/patterns/avatars.svg b/packages/website-ue/public/assets/patterns/avatars.svg new file mode 100644 index 000000000..e26584919 --- /dev/null +++ b/packages/website-ue/public/assets/patterns/avatars.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website-ue/src/components/AvatarCard/index.css b/packages/website-ue/src/components/AvatarCard/index.css index 7126f247d..2b21c4f4b 100644 --- a/packages/website-ue/src/components/AvatarCard/index.css +++ b/packages/website-ue/src/components/AvatarCard/index.css @@ -12,7 +12,7 @@ background-size: cover; background-position: center; - box-shadow: var(--shadow-interactive), var(--shadow-subtle); + box-shadow: var(--shadow-interactive), var(--shadow-aggressive); } .avatar-label { diff --git a/packages/website-ue/src/components/BaseStyles.astro b/packages/website-ue/src/components/BaseStyles.astro index 6b2674831..f8d47f259 100644 --- a/packages/website-ue/src/components/BaseStyles.astro +++ b/packages/website-ue/src/components/BaseStyles.astro @@ -24,6 +24,13 @@ import "@fontsource-variable/roboto-flex"; --font-size-minor: 0.75rem; --font-size-major: 1.25rem; + --font-size-heading-1: 3rem; + --font-size-heading-2: 2rem; + --font-size-heading-3: 1.5rem; + --font-size-heading-4: 1.25rem; + --font-size-heading-5: 1rem; + --font-size-heading-6: 0.75rem; + --font-family-regular: "Roboto Flex Variable", sans-serif; --font-family-mono: "JetBrains Mono Variable", monospace; @@ -64,9 +71,11 @@ import "@fontsource-variable/roboto-flex"; var(--shadow-interactive-shine), var(--shadow-interactive-shadow), var(--shadow-interactive-background); - --shadow-subtle: var(--space-1) var(--space-1) var(--space-4) + --shadow-aggressive: var(--space-1) var(--space-1) var(--space-4) var(--black-a11); + --shadow-subtle: 0 var(--space-1) var(--space-3) var(--black-a5); --blur-glass: blur(4rem); + --blur-tint: blur(16rem); } diff --git a/packages/website-ue/src/components/Heading/index.css b/packages/website-ue/src/components/Heading/index.css new file mode 100644 index 000000000..07d170a0d --- /dev/null +++ b/packages/website-ue/src/components/Heading/index.css @@ -0,0 +1,25 @@ +.heading { + &[data-size="1"] { + font-size: var(--font-size-heading-1); + } + + &[data-size="2"] { + font-size: var(--font-size-heading-2); + } + + &[data-size="3"] { + font-size: var(--font-size-heading-3); + } + + &[data-size="4"] { + font-size: var(--font-size-heading-4); + } + + &[data-size="5"] { + font-size: var(--font-size-heading-5); + } + + &[data-size="6"] { + font-size: var(--font-size-heading-6); + } +} diff --git a/packages/website-ue/src/components/Heading/index.tsx b/packages/website-ue/src/components/Heading/index.tsx new file mode 100644 index 000000000..487f92987 --- /dev/null +++ b/packages/website-ue/src/components/Heading/index.tsx @@ -0,0 +1,23 @@ +import { classNames } from "../../core/ui/classNames"; +import { Text, type TextProps } from "../Text"; +import "./index.css"; + +export interface HeadingProps extends Omit { + size?: `${1 | 2 | 3 | 4 | 5 | 6}`; +} + +export function Heading({ + className, + weight, + size = "1", + ...props +}: HeadingProps) { + return ( + + ); +} diff --git a/packages/website-ue/src/components/Navbar.astro b/packages/website-ue/src/components/Navbar.astro index e4f32261f..3b3b8fe3f 100644 --- a/packages/website-ue/src/components/Navbar.astro +++ b/packages/website-ue/src/components/Navbar.astro @@ -20,8 +20,8 @@ const { locale } = Astro.props; justify-content: center; z-index: 1; - backdrop-filter: var(--blur-glass); - background-color: var(--black-a5); + backdrop-filter: var(--blur-glass) brightness(25%); + box-shadow: var(--shadow-subtle); .content { flex: 1; diff --git a/packages/website-ue/src/components/ToolBanner.astro b/packages/website-ue/src/components/ToolBanner.astro new file mode 100644 index 000000000..1cefd7a84 --- /dev/null +++ b/packages/website-ue/src/components/ToolBanner.astro @@ -0,0 +1,81 @@ +--- +import { api } from "../core/api/dynamic"; +import type { Tool } from "../core/tools/tools"; +import { Heading } from "./Heading"; +import { Text } from "./Text"; + +interface Props { + locale: string; + tool: Tool; +} + +const { tool, locale } = Astro.props; +const strings = await api.strings(locale); +const toolStrings = strings.tools[tool.id as keyof typeof strings.tools]; +--- + + + +
+
+
+ +
+ + {toolStrings.name} + + + {toolStrings.slogan} + +
+
+
diff --git a/packages/website-ue/src/core/tools/tools.ts b/packages/website-ue/src/core/tools/tools.ts index 4295320a7..713c5695d 100644 --- a/packages/website-ue/src/core/tools/tools.ts +++ b/packages/website-ue/src/core/tools/tools.ts @@ -8,6 +8,8 @@ export interface Tool { significant?: boolean; disabled?: boolean; href?: string; + + background_position: "top" | "center" | "bottom"; } export const tools: Record = { @@ -16,11 +18,15 @@ export const tools: Record = { strings: "tankopedia", button: "purple", significant: true, + + background_position: "top", }, avatars: { id: "avatars", button: "gold", + + background_position: "bottom", }, backgrounds: { diff --git a/packages/website-ue/src/layouts/BaseLayout.astro b/packages/website-ue/src/layouts/BaseLayout.astro index d5f141f49..e64926bc2 100644 --- a/packages/website-ue/src/layouts/BaseLayout.astro +++ b/packages/website-ue/src/layouts/BaseLayout.astro @@ -16,12 +16,14 @@ interface Props { const { accent, noNavbar, locale } = Astro.props; --- - + + + @@ -36,7 +38,6 @@ const { accent, noNavbar, locale } = Astro.props; display: flex; flex-direction: column; min-height: 100dvh; - gap: var(--space-4); background-color: var(--gray-1); color: var(--gray-12); @@ -47,6 +48,7 @@ const { accent, noNavbar, locale } = Astro.props; flex: 1; flex-direction: column; gap: var(--space-5); + padding: var(--space-4) 0; } } @@ -57,6 +59,8 @@ const { accent, noNavbar, locale } = Astro.props; {!noNavbar && } + +
diff --git a/packages/website-ue/src/pages/[...locale]/avatars/index.astro b/packages/website-ue/src/pages/[...locale]/avatars/index.astro index d8b13960f..736eca659 100644 --- a/packages/website-ue/src/pages/[...locale]/avatars/index.astro +++ b/packages/website-ue/src/pages/[...locale]/avatars/index.astro @@ -1,5 +1,7 @@ --- import Section from "../../../components/Section.astro"; +import ToolBanner from "../../../components/ToolBanner.astro"; +import { tools } from "../../../core/tools/tools"; import BaseLayout from "../../../layouts/BaseLayout.astro"; import { Page } from "./_index"; @@ -17,6 +19,8 @@ const { locale } = Astro.props; + +