From 66cb9e8bdc9dded56cd7f2e4107c51e8bf28f024 Mon Sep 17 00:00:00 2001 From: Eamon Watson Date: Mon, 2 Nov 2026 21:25:36 +0100 Subject: [PATCH] feat(team): add team page and fix nav across pages --- app/components/nav/nav.tsx | 1 + app/rise.ts | 30 +++++++++++++ app/routes.ts | 1 + app/routes/brand/brand.tsx | 4 +- app/routes/landing/landing.tsx | 35 ++++++--------- app/routes/sponsor/sponsor.tsx | 4 +- app/routes/team/team.tsx | 76 +++++++++++++++++++++++++++++++++ public/avatars/andrei.jpg | Bin 0 -> 26294 bytes public/sitemap.xml | 1 + 9 files changed, 125 insertions(+), 27 deletions(-) create mode 100644 app/rise.ts create mode 100644 app/routes/team/team.tsx create mode 100644 public/avatars/andrei.jpg diff --git a/app/components/nav/nav.tsx b/app/components/nav/nav.tsx index 4fc2d88..14f2283 100644 --- a/app/components/nav/nav.tsx +++ b/app/components/nav/nav.tsx @@ -9,6 +9,7 @@ import './nav.css'; const links = [ { label: 'Home', to: '/' }, + { label: 'Team', to: '/team' }, { label: 'GitHub', to: '/github' }, { label: 'Quest', to: '/bot/invite' }, ]; diff --git a/app/rise.ts b/app/rise.ts new file mode 100644 index 0000000..ca67bed --- /dev/null +++ b/app/rise.ts @@ -0,0 +1,30 @@ +// Vantern's Site +// Copyright(C) 2026 Vantern +// SPDX-License-Identifier: AGPL-3.0-or-later + +import { useEffect, type RefObject } from "react"; +import { animate, stagger } from "animejs"; +import { prefersReducedMotion } from "~/a11y"; + +export function useRise(ref: RefObject) { + useEffect(() => { + const el = ref.current; + if (!el || prefersReducedMotion()) return; + let rise: ReturnType | undefined; + let cancelled = false; + document.fonts.ready.then(() => { + if (cancelled) return; + rise = animate(Array.from(el.children), { + opacity: [0, 1], + translateY: [48, 0], + duration: 1800, + ease: "outExpo", + delay: stagger(140, { start: 150 }), + }); + }); + return () => { + cancelled = true; + rise?.revert(); + }; + }, []); +} diff --git a/app/routes.ts b/app/routes.ts index 3e2c45b..e6fc4e1 100644 --- a/app/routes.ts +++ b/app/routes.ts @@ -20,6 +20,7 @@ export default [ route("sponsor", "routes/sponsor/sponsor.tsx"), route("sponsors", "routes/redirect.tsx", { id: "redirect-sponsors" }), route("brand", "routes/brand/brand.tsx"), + route("team", "routes/team/team.tsx"), route("discord", "routes/redirect.tsx", { id: "redirect-discord" }), route("dc", "routes/redirect.tsx", { id: "redirect-dc" }), route("*", "routes/$.tsx"), diff --git a/app/routes/brand/brand.tsx b/app/routes/brand/brand.tsx index face10f..7bd877e 100644 --- a/app/routes/brand/brand.tsx +++ b/app/routes/brand/brand.tsx @@ -279,7 +279,7 @@ function ColorRamp() { type="button" onClick={() => copy(i, step, hex)} aria-label={`Copy vantern-${step}, ${hex}`} - className={`rampBand transition-[filter] duration-300 ease-out motion-reduce:transition-none group-hover/ramp:not-[&:hover]:blur-sm group-has-focus-visible/ramp:not-focus-visible:blur-sm relative flex flex-1 cursor-pointer items-center justify-between px-4 py-3.5 text-left focus-visible:outline-2 focus-visible:outline-offset-[-4px] lg:h-72 lg:flex-col lg:items-start lg:justify-end lg:gap-1 lg:px-3 lg:py-4 ${Number(step) < 500 ? "text-vantern-950 focus-visible:outline-vantern-950" : "text-white focus-visible:outline-white"}`} + className={`rampBand transition-[filter] duration-300 ease-out motion-reduce:transition-none group-hover/ramp:not-[&:hover]:blur-sm group-has-focus-visible/ramp:not-focus-visible:blur-sm relative flex flex-1 cursor-pointer items-center justify-between px-4 py-3.5 text-left focus-visible:outline-2 focus-visible:outline-offset-4 lg:h-72 lg:flex-col lg:items-start lg:justify-end lg:gap-1 lg:px-3 lg:py-4 ${Number(step) < 500 ? "text-vantern-950 focus-visible:outline-vantern-950" : "text-white focus-visible:outline-white"}`} style={{ backgroundColor: hex, boxShadow: `var(--seam) ${hex}, var(--layer)`, zIndex: i + 1 }} > @@ -329,7 +329,7 @@ export default function Brand() { return (
-
+