feat: more home page

packages/website-ue/src/components/Code/index.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "react";
-import { classNames } from "../../core/react/classNames";
+import { classNames } from "../../core/ui/classNames";
 import "./index.css";
 
 export interface CodeProps extends ComponentProps<"code"> {}

packages/website-ue/src/components/ColorScale.astro

@@ -1,6 +1,6 @@
 ---
 import * as colors from "@radix-ui/colors";
-import type { Color } from "../pages/styles/colors/[accent].css";
+import type { Color } from "../core/ui/color";
 
 interface Props {
   color: Color;

packages/website-ue/src/components/HomeHero.astro

@@ -3,6 +3,7 @@ import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { api } from "../core/api/dynamic";
 import { BlitzKitIcon } from "../icons/BlitzKit";
 import { Code } from "./Code";
+import { Text } from "./Text";
 import { TextField } from "./TextField";
 
 interface Props {
@@ -82,6 +83,7 @@ const strings = await api.strings(locale);
 
     .text-field {
       width: 100%;
+      max-width: 25rem;
     }
   }
 </style>
@@ -96,6 +98,10 @@ const strings = await api.strings(locale);
       <BlitzKitIcon className="icon" />
       <Code className="version">2.0</Code>
     </div>
+
+    <Text lowContrast>
+      {strings.home.credit}
+    </Text>
   </div>
 
   <TextField placeholder={strings.home.search}>

packages/website-ue/src/components/Text/index.css

@@ -0,0 +1,3 @@
+.text {
+  font-size: var(--font-size-regular);
+}

packages/website-ue/src/components/Text/index.tsx

@@ -0,0 +1,18 @@
+import type { ComponentProps } from "react";
+import type { Color } from "../../core/ui/color";
+import "./index.css";
+
+export interface TextProps extends ComponentProps<"span"> {
+  color?: Color;
+  lowContrast?: boolean;
+}
+
+export function Text({ color = "gray", lowContrast, ...props }: TextProps) {
+  return (
+    <span
+      className="text"
+      style={{ color: `var(--${color}-${lowContrast ? 11 : 12})` }}
+      {...props}
+    />
+  );
+}