-
);
}
diff --git a/apps/site/src/app/support/support.css b/apps/site/src/app/support/support.css
new file mode 100644
index 00000000000..c88f6c2b881
--- /dev/null
+++ b/apps/site/src/app/support/support.css
@@ -0,0 +1,106 @@
+/* Support page motion + spectrum border — ported from the approved design. */
+
+/* Animated rainbow border, revealed on hover / focus-within. */
+.spectrum-border {
+ position: relative;
+}
+.spectrum-border::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: inherit;
+ padding: 1px;
+ background-image: linear-gradient(85deg, #01d7e4, #f3c306, #f37a03, #f43531, #f00e5c, #01d7e4);
+ background-size: 200% 100%;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.5s;
+ animation: 2.5s linear infinite spectrum-slide;
+ -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
+ mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
+ -webkit-mask-clip: content-box, border-box;
+ mask-clip: content-box, border-box;
+ -webkit-mask-composite: xor;
+ mask-composite: exclude;
+}
+.spectrum-border:hover::before,
+.spectrum-border-on::before {
+ opacity: 1;
+}
+.spectrum-border-focus:focus-within::before {
+ opacity: 1;
+}
+
+@keyframes spectrum-slide {
+ 0% {
+ background-position: 0%;
+ }
+ 100% {
+ background-position: 200%;
+ }
+}
+
+/* Hero entrance + glass glide sweep. */
+.animate-hero-rise {
+ animation: 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both hero-rise;
+}
+.animate-glass-glide {
+ animation: 9s 1.8s infinite both glass-glide;
+}
+
+@keyframes hero-rise {
+ 0% {
+ opacity: 0;
+ transform: translateY(16px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+@keyframes glass-glide {
+ 0% {
+ opacity: 0;
+ animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+ left: -20%;
+ }
+ 5% {
+ opacity: 1;
+ }
+ 25% {
+ opacity: 1;
+ }
+ 30%,
+ 100% {
+ opacity: 0;
+ left: 80%;
+ }
+}
+
+/* Scroll-reveal (opacity + lift), toggled via data-shown by the Reveal component. */
+.reveal {
+ opacity: 0;
+ transform: translateY(44px);
+ transition:
+ opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
+ transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.reveal[data-shown="true"] {
+ opacity: 1;
+ transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .spectrum-border::before,
+ .animate-hero-rise,
+ .animate-glass-glide {
+ animation: none;
+ }
+ /* Honor reduced motion: show content in place, no lift or transition. */
+ .reveal,
+ .reveal[data-shown="true"] {
+ opacity: 1;
+ transform: none;
+ transition: none;
+ }
+}
diff --git a/apps/site/src/components/support/reveal.tsx b/apps/site/src/components/support/reveal.tsx
new file mode 100644
index 00000000000..d735adcefed
--- /dev/null
+++ b/apps/site/src/components/support/reveal.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+// Scroll-reveal wrapper (opacity + translateY) matching the approved design.
+// Falls back to visible when IntersectionObserver is unavailable.
+export function Reveal({ children, className }: { children: ReactNode; className?: string }) {
+ const ref = useRef
(null);
+ const [shown, setShown] = useState(false);
+
+ useEffect(() => {
+ const el = ref.current;
+ if (!el) return;
+ if (typeof IntersectionObserver === "undefined") {
+ setShown(true);
+ return;
+ }
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ setShown(true);
+ observer.disconnect();
+ }
+ },
+ { rootMargin: "0px 0px -10% 0px", threshold: 0.1 },
+ );
+ observer.observe(el);
+ return () => observer.disconnect();
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/apps/site/src/components/support/support-icons.tsx b/apps/site/src/components/support/support-icons.tsx
new file mode 100644
index 00000000000..0015b8f7dff
--- /dev/null
+++ b/apps/site/src/components/support/support-icons.tsx
@@ -0,0 +1,86 @@
+// Support page icon set — ported verbatim from the approved support design.
+// 24x24 glyphs; color via currentColor, size/color via the className prop.
+import type { SVGProps } from "react";
+
+type IconProps = SVGProps;
+
+export function SearchGlass({ className, ...props }: IconProps) {
+ return (
+
+ );
+}
+
+export function Discord({ className, ...props }: IconProps) {
+ return (
+
+ );
+}
+
+export function ConsoleCode({ className, ...props }: IconProps) {
+ return (
+
+ );
+}
+
+export function Shield({ className, ...props }: IconProps) {
+ return (
+
+ );
+}
+
+export function Github({ className, ...props }: IconProps) {
+ return (
+
+ );
+}
+
+export function DocWindow({ className, ...props }: IconProps) {
+ return (
+
+ );
+}
+
+export function ArrowRight({ className, ...props }: IconProps) {
+ return (
+
+ );
+}
+
+export function CheckCircle({ className, ...props }: IconProps) {
+ return (
+
+ );
+}
+
+export function PolicyTable({ className, ...props }: IconProps) {
+ return (
+
+ );
+}
+
+export function Mail({ className, ...props }: IconProps) {
+ return (
+
+ );
+}
+
diff --git a/apps/site/src/components/support/support-search.tsx b/apps/site/src/components/support/support-search.tsx
new file mode 100644
index 00000000000..93c16b6e6e7
--- /dev/null
+++ b/apps/site/src/components/support/support-search.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { useSearchContext } from "fumadocs-ui/contexts/search";
+import { SearchGlass } from "@/components/support/support-icons";
+
+// Hero search box, styled per the approved design, wired to the site-wide
+// unified search dialog (the same context the header trigger uses).
+export function SupportSearch() {
+ const { setOpenSearch } = useSearchContext();
+ const open = () => setOpenSearch(true);
+
+ return (
+
+
+
+ );
+}