hanzo.ai/app/(marketing)/status/page.tsx

'use client'

// Live status is served by status.hanzo.ai — this route only forwards there.
// The site is statically exported (output: 'export'), so the redirect is
// client-side with a visible fallback link.

import { useEffect } from "react";
import { Activity, ArrowRight } from "lucide-react";
import { Box, Text, YStack } from '@hanzo/ui'
import { Action } from '@hanzo/ui/marketing'

const STATUS_URL = "https://status.hanzo.ai";

export default function StatusPage() {
  useEffect(() => {
    window.location.replace(STATUS_URL);
  }, []);

  return (
    <Box
      minH="100vh"
      display="flex"
      /* Stated, because a gui Box stacks by default and this row does not. */
      flexDirection="row"
      items="center"
      justify="center"
      px={16}
    >
      {/* A column whose items keep their own width, so the `<a>` sits centred
          rather than stretching the full measure. */}
      <YStack items="center">
        <YStack mb={16}>
          <Activity width={32} height={32} color="var(--muted-foreground)" />
        </YStack>
        {/* A forwarding stub states its own rung rather than taking `Display`,
            which is the role for a page that is one: `--text-2xl` at a 4:3 leading. */}
        <Text render="h1" mb={8} fontSize="$7" lineHeight="1.75rem" fontWeight="500" text="center" color="var(--text-primary)">
          Hanzo Status
        </Text>
        <Text render="p" mb={24} text="center" color="var(--muted-foreground)">
          Redirecting to the live status page&hellip;
        </Text>
        <Action href={STATUS_URL}>
          Open status.hanzo.ai
          <ArrowRight width={16} height={16} />
        </Action>
      </YStack>
    </Box>
  );
}