fix: update card hover state and simplify route structure

- Add hover='elevated' variant to Card component with proper gradients:
  - Linear gradient background (180deg, #0F0F0F to #0A0A0A)
  - Radial gradient overlay for subtle glow effect
  - Border-top and box-shadow on hover
- Simplify onboarding routes: use index for onboarding-form
- Update onboarding-layout background to bg-black
- Simplify icon usage in information-request (remove wrapper div)

Co-authored-by: openhands <openhands@all-hands.dev>

frontend/src/routes.ts

@@ -8,7 +8,7 @@ import {
 export default [
   route("login", "routes/login.tsx"),
   route("onboarding", "routes/onboarding-layout.tsx", [
-    route("new-account-form", "routes/onboarding-form.tsx"),
+    index("routes/onboarding-form.tsx"),
     route("information-request", "routes/information-request.tsx"),
   ]),
   layout("routes/root-layout.tsx", [

frontend/src/routes/information-request.tsx

@@ -6,7 +6,7 @@ import { Text } from "#/ui/typography";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import OpenHandsLogoWhite from "#/assets/branding/openhands-logo-white.svg?react";
 import CloudIcon from "#/icons/cloud.svg?react";
-import ServerIcon from "#/icons/server.svg?react";
+import StackedIcon from "#/icons/stacked.svg?react";
 
 interface FeatureListProps {
   features: string[];
@@ -43,7 +43,7 @@ function EnterpriseCard({
   learnMoreLabel,
 }: EnterpriseCardProps) {
   return (
-    <Card theme="dark" className="flex-1 flex-col p-6 gap-4">
+    <Card theme="dark" hover="elevated" className="flex-1 flex-col p-6 gap-4">
       <div className="w-10 h-10">{icon}</div>
       <h3 className="text-lg font-semibold text-white">{title}</h3>
       <Text className="text-[#8C8C8C]">{description}</Text>
@@ -52,7 +52,7 @@ function EnterpriseCard({
         href={learnMoreHref}
         target="_blank"
         rel="noopener noreferrer"
-        className="mt-2 w-fit p-2 text-sm rounded-sm border border-primary text-primary hover:opacity-80"
+        className="mt-2 w-fit px-6 py-2.5 text-sm rounded-sm bg-[#050505] text-white border border-[#242424] hover:bg-white hover:text-black transition-colors"
       >
         {learnMoreLabel}
       </a>
@@ -113,7 +113,7 @@ export default function InformationRequest() {
           learnMoreLabel={t(I18nKey.ENTERPRISE$LEARN_MORE)}
         />
         <EnterpriseCard
-          icon={<ServerIcon className="w-10 h-10" />}
+          icon={<StackedIcon className="w-10 h-10" />}
           title={t(I18nKey.ENTERPRISE$SELF_HOSTED_TITLE)}
           description={t(I18nKey.ENTERPRISE$SELF_HOSTED_DESCRIPTION)}
           features={selfHostedFeatures}

frontend/src/routes/onboarding-layout.tsx

@@ -4,7 +4,7 @@ export default function OnboardingLayout() {
   return (
     <div
       data-testid="onboarding-layout"
-      className="min-h-screen bg-[#0D0F11] flex flex-col items-center justify-center"
+      className="min-h-screen bg-black flex flex-col items-center justify-center"
     >
       <Outlet />
     </div>

frontend/src/ui/card.tsx

@@ -9,9 +9,23 @@ const cardVariants = cva("flex", {
       outlined: "relative bg-transparent border border-[#727987] rounded-xl",
       dark: "relative bg-black border border-[#242424] rounded-2xl",
     },
+    hover: {
+      none: "",
+      elevated: [
+        "transition-all duration-200",
+        "hover:bg-[linear-gradient(180deg,#0F0F0F_0%,#0A0A0A_100%)]",
+        "hover:border-t-[#242424CC]",
+        "hover:shadow-[0px_4px_6px_-4px_#0000001A,0px_10px_15px_-3px_#0000001A]",
+        "before:absolute before:inset-0 before:rounded-2xl before:opacity-0 before:transition-opacity before:duration-200",
+        "before:bg-[radial-gradient(98.4%_116.11%_at_50%_0%,rgba(255,255,255,0.08)_0%,rgba(0,0,0,0)_70%)]",
+        "hover:before:opacity-100",
+        "before:pointer-events-none",
+      ].join(" "),
+    },
   },
   defaultVariants: {
     theme: "default",
+    hover: "none",
   },
 });
 
@@ -21,11 +35,11 @@ interface CardProps extends VariantProps<typeof cardVariants> {
   testId?: string;
 }
 
-export function Card({ children, className, testId, theme }: CardProps) {
+export function Card({ children, className, testId, theme, hover }: CardProps) {
   return (
     <div
       data-testid={testId}
-      className={cn(cardVariants({ theme }), className)}
+      className={cn(cardVariants({ theme, hover }), className)}
     >
       {children}
     </div>