chore: Update auth layout and sign-in page

- Add formWrapperFragment to auth layout
- Add RichTextFormWrapper component to auth layout
- Update sign-in page to use formWrapperFragment
- Update sign-in page to use RichTextFormWrapper for subtitle rendering

src/app/(auth)/_components/auth-layout.tsx

@@ -1,5 +1,19 @@
+import { buttonFragment } from "@/lib/basehub/fragments";
+import { fragmentOn } from "basehub";
 import { Pump } from "basehub/react-pump";
+import { RichText, type RichTextProps } from "basehub/react-rich-text";
 import Image from "next/image";
+import Link, { type LinkProps } from "next/link";
+
+export const formWrapperFragment = fragmentOn("FormWrapperComponent", {
+  title: true,
+  subtitle: {
+    json: {
+      content: true,
+    },
+  },
+  cta: buttonFragment,
+});
 
 export async function AuthLayout({
   children,
@@ -52,11 +66,36 @@ export async function AuthLayout({
           </Pump>
           <div className="flex flex-col gap-1">
             <h1 className="text-2xl font-bold">{title}</h1>
-            <p className="text-sm text-text-secondary dark:text-dark-text-secondary">{subtitle}</p>
+            <div className="text-sm text-text-secondary dark:text-dark-text-secondary">
+              {subtitle}
+            </div>
           </div>
         </header>
         {children}
       </div>
     </div>
   );
 }
+
+export function RichTextFormWrapper({ children }: RichTextProps) {
+  return (
+    <RichText
+      components={{
+        a: CustomAnchor,
+      }}
+    >
+      {children}
+    </RichText>
+  );
+}
+
+function CustomAnchor({
+  children,
+  ...props
+}: React.AllHTMLAttributes<HTMLAnchorElement> & LinkProps) {
+  return (
+    <Link className="text-accent-500 hover:underline" {...props}>
+      {children}
+    </Link>
+  );
+}

src/app/(auth)/request-demo/page.tsx

@@ -1,41 +1,83 @@
 import { Button } from "@/common/button";
-import { AuthLayout } from "../_components/auth-layout";
+import { AuthLayout, RichTextFormWrapper, formWrapperFragment } from "../_components/auth-layout";
 import { LabeledInput, LabeledTextarea } from "../_components/labeled-input";
-import Link from "next/link";
 import { ArrowRightIcon } from "@radix-ui/react-icons";
 import { BackToHomeButton } from "../_components/back-to-home-button";
+import { Pump } from "basehub/react-pump";
 
 export default function RequestDemo() {
   return (
-    <AuthLayout
-      subtitle="Interested in a live demonstration? Complete the form below, and we’ll contact you to set up a session tailored to your needs."
-      title="Request Demo"
+    <Pump
+      queries={[
+        {
+          site: {
+            requestDemo: {
+              wrapper: formWrapperFragment,
+              howDidYouHearAboutUs: true,
+            },
+          },
+        },
+      ]}
     >
-      <form className="flex flex-col gap-3">
-        <LabeledInput required label="First Name" name="name" placeholder="Jhon" type="text" />
-        <LabeledInput required label="Last Name" name="last-name" placeholder="Doe" type="text" />
-        <LabeledInput
-          required
-          label="Email Address"
-          name="email"
-          placeholder="[email protected]"
-          type="email"
-        />
-        <LabeledTextarea
-          required
-          label="Message"
-          minLength={200}
-          name="message"
-          placeholder="What are you looking to learn from the demo?"
-          rows={8}
-        />
-        <div className="mt-2 flex items-center justify-between">
-          <Button icon={<ArrowRightIcon className="size-5" />} iconSide="right" type="submit">
-            Request Demo
-          </Button>
-          <BackToHomeButton />
-        </div>
-      </form>
-    </AuthLayout>
+      {async ([{ site }]) => {
+        "use server";
+
+        return (
+          <AuthLayout
+            subtitle={
+              site.requestDemo.wrapper.subtitle ? (
+                <RichTextFormWrapper>
+                  {site.requestDemo.wrapper.subtitle?.json.content}
+                </RichTextFormWrapper>
+              ) : null
+            }
+            title={site.requestDemo.wrapper.title}
+          >
+            <form className="flex flex-col gap-3">
+              <LabeledInput
+                required
+                label="First Name"
+                name="name"
+                placeholder="Jhon"
+                type="text"
+              />
+              <LabeledInput
+                required
+                label="Last Name"
+                name="last-name"
+                placeholder="Doe"
+                type="text"
+              />
+              <LabeledInput
+                required
+                label="Email Address"
+                name="email"
+                placeholder="[email protected]"
+                type="email"
+              />
+              <LabeledTextarea
+                required
+                label="Message"
+                minLength={200}
+                name="message"
+                placeholder="What are you looking to learn from the demo?"
+                rows={8}
+              />
+              <div className="mt-2 flex items-center justify-between">
+                <Button
+                  icon={<ArrowRightIcon className="size-5" />}
+                  iconSide="right"
+                  intent={site.requestDemo.wrapper.cta.type}
+                  type="submit"
+                >
+                  {site.requestDemo.wrapper.cta.label}
+                </Button>
+                <BackToHomeButton />
+              </div>
+            </form>
+          </AuthLayout>
+        );
+      }}
+    </Pump>
   );
 }

src/app/(auth)/sign-in/page.tsx

@@ -1,46 +1,67 @@
 import { Button } from "@/common/button";
-import Link from "next/link";
-import { AuthLayout } from "../_components/auth-layout";
+import { AuthLayout, RichTextFormWrapper, formWrapperFragment } from "../_components/auth-layout";
 import { LabeledInput } from "../_components/labeled-input";
 import { BackToHomeButton } from "../_components/back-to-home-button";
+import { Pump } from "basehub/react-pump";
+import { ArrowRightIcon } from "@radix-ui/react-icons";
 
 export default function SignIn() {
   return (
-    <AuthLayout
-      subtitle={
-        <>
-          {" "}
-          You don&apos;t have an account?{" "}
-          <Link
-            className="text-accent-500 hover:text-accent-600 dark:hover:text-accent-400"
-            href="/sign-up"
-          >
-            Sign Up
-          </Link>
-        </>
-      }
-      title="Sign In"
+    <Pump
+      queries={[
+        {
+          site: {
+            signIn: {
+              wrapper: formWrapperFragment,
+            },
+          },
+        },
+      ]}
     >
-      <form className="flex flex-col gap-3">
-        <LabeledInput
-          required
-          label="Email Address"
-          name="email"
-          placeholder="[email protected]"
-          type="email"
-        />
-        <LabeledInput
-          required
-          label="Password"
-          name="password"
-          placeholder="Type a secure password"
-          type="password"
-        />
-        <div className="mt-2 flex items-center justify-between">
-          <Button type="submit">Sign In</Button>
-          <BackToHomeButton />
-        </div>
-      </form>
-    </AuthLayout>
+      {async ([{ site }]) => {
+        "use server";
+
+        return (
+          <AuthLayout
+            subtitle={
+              site.signIn.wrapper.subtitle ? (
+                <RichTextFormWrapper>
+                  {site.signIn.wrapper.subtitle?.json.content}
+                </RichTextFormWrapper>
+              ) : null
+            }
+            title={site.signIn.wrapper.title}
+          >
+            <form className="flex flex-col gap-3">
+              <LabeledInput
+                required
+                label="Email Address"
+                name="email"
+                placeholder="[email protected]"
+                type="email"
+              />
+              <LabeledInput
+                required
+                label="Password"
+                name="password"
+                placeholder="Type a secure password"
+                type="password"
+              />
+              <div className="mt-2 flex items-center justify-between">
+                <Button
+                  icon={<ArrowRightIcon className="size-5" />}
+                  iconSide="right"
+                  intent={site.signIn.wrapper.cta.type}
+                  type="submit"
+                >
+                  {site.signIn.wrapper.cta.label}
+                </Button>
+                <BackToHomeButton />
+              </div>
+            </form>
+          </AuthLayout>
+        );
+      }}
+    </Pump>
   );
 }