fix(site): address CodeRabbit review feedback

Keep the support hero title above its gradient overlay and make the React code
examples portable while removing unused pricing hero class hooks.

Made-with: Cursor

Author: mhartington

apps/site/src/app/(prisma-with)/react/page.tsx

@@ -19,7 +19,7 @@ export default async function UserList() {
 
   return (
     <div>
-      <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">Users</h1>
+      <h1>Users</h1>
       <ul>
         {users.map((user) => (
           <li key={user.id}>{user.name} ({user.email})</li>
@@ -41,7 +41,7 @@ export default async function UsersPage() {
   const users = await prisma.user.findMany()
   return (
     <div>
-      <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">Users</h1>
+      <h1>Users</h1>
       <ul>{users.map((user) => <li key={user.id}>{user.name}</li>)}</ul>
     </div>
   )

apps/site/src/app/pricing/pricing-hero-plans.tsx

@@ -37,9 +37,9 @@ export function PricingHeroPlans({
 
   return (
     <>
-      <section className="hero -mt-24 pt-40 flex items-end justify-center px-4 relative">
+      <section className="-mt-24 pt-40 flex items-end justify-center px-4 relative">
         <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-ppg)_0%,var(--color-background-default)_100%)] opacity-20" />
-        <div className="content relative z-2 max-w-[1200px] mx-auto flex flex-col items-center gap-3 md:gap-6 py-12">
+        <div className="relative z-2 max-w-[1200px] mx-auto flex flex-col items-center gap-3 md:gap-6 py-12">
           <Badge
             color="ppg"
             size="lg"

apps/site/src/app/support/page.tsx

@@ -38,7 +38,7 @@ export default function Support() {
     <main className="flex-1 w-screen bg-background-default">
       <div className="hero relative w-full -mt-33 pt-65 block pb-12 flex flex-col gap-8">
         <div className="absolute inset-0 pointer-events-none z-1 overflow-hidden bg-[linear-gradient(180deg,var(--color-foreground-orm-strong)_0%,var(--color-background-default)_100%)] opacity-20" />
-        <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
+        <h1 className="relative z-2 text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
           {data.title}
         </h1>
         <LargeSearchToggle className="h-full z-2 max-w-141 mx-auto w-full" />