fix: refine homepage hero title and migrate modal mask API

frontend/app/[locale]/agents/components/agentConfig/McpConfigModal.tsx

@@ -597,7 +597,7 @@ export default function McpConfigModal({
         onCancel={actionsLocked ? undefined : onCancel}
         width={1200}
         closable={!actionsLocked}
-        maskClosable={!actionsLocked}
+        mask={{ closable: !actionsLocked }}
         footer={[
           <Button key="cancel" onClick={onCancel} disabled={actionsLocked}>
             {actionsLocked

frontend/app/[locale]/agents/components/agentConfig/tool/ToolConfigModal.tsx

@@ -1284,8 +1284,7 @@ export default function ToolConfigModal({
   return (
     <>
       <Modal
-        mask={true}
-        maskClosable={false}
+        mask={{ closable: false }}
         title={
           <div className="flex justify-between items-center w-full pr-8">
             <span>{`${tool?.name}`}</span>

frontend/app/[locale]/page.tsx

@@ -55,19 +55,18 @@ export default function Homepage() {
   const navigateToSpace = () => navigateWithPermissionCheck("/space");
 
   return (
-    <div className="w-full min-h-full flex flex-col items-center justify-center pt-6 pb-8">
+    <div className="w-full min-h-full flex flex-col items-center justify-start px-4 pt-6 pb-8 md:px-6">
       {/* Hero area */}
-      <section className="relative w-full p-4 flex flex-col items-center justify-center text-center flex-shrink-0">
+      <section className="relative w-full p-4 flex flex-col items-center text-center flex-shrink-0">
         <div className="absolute inset-0 bg-grid-slate-200 dark:bg-grid-slate-800 [mask-image:radial-gradient(ellipse_at_center,white_20%,transparent_75%)] -z-10"></div>
         <motion.h2
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.2 }}
-          className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white mb-4 tracking-tight"
+          className="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight text-slate-900 dark:text-white mb-4 tracking-tight max-w-4xl"
         >
-          {t("page.title")}
-          <span className="text-blue-600 dark:text-blue-500">
-            {" "}
+          <span className="block">{t("page.title")}</span>
+          <span className="block mt-1 hero-gradient-text">
             {t("page.subtitle")}
           </span>
         </motion.h2>
@@ -221,4 +220,4 @@ function FeatureCard({ icon, title, description }: FeatureCardProps) {
       </CardContent>
     </Card>
   );
-}
+}

frontend/app/[locale]/tenant-resources/components/resources/AgentList.tsx

@@ -452,7 +452,7 @@ export default function AgentList({ tenantId }: { tenantId: string | null }) {
           </Button>
         ]}
         width={700}
-        maskClosable={false}
+        mask={{ closable: false }}
       >
         <Spin spinning={isLoadingDetail}>
           <Form form={form} layout="vertical">

frontend/app/[locale]/tenant-resources/components/resources/InvitationList.tsx

@@ -425,7 +425,7 @@ export default function InvitationList({ tenantId, refreshKey }: { tenantId: str
         okText={t("common.confirm")}
         cancelText={t("common.cancel")}
         width={600}
-        maskClosable={false}
+        mask={{ closable: false }}
       >
         <Form form={form} layout="vertical">
           {!editingInvitation && (

frontend/components/auth/AuthDialogs.tsx

@@ -41,7 +41,7 @@ export function AuthDialogs() {
         centered
         closable
         width={480}
-        maskClosable={false}
+        mask={{ closable: false }}
       >
         <div className="relative bg-white p-4 rounded-2xl">
           {/* Logo */}

frontend/components/auth/loginModal.tsx

@@ -177,7 +177,7 @@ export function LoginModal() {
       width={420}
       centered
       forceRender
-      maskClosable={false}
+      mask={{ closable: false }}
       closable={true}
     >
       <div className="relative bg-white p-4 rounded-2xl">

frontend/styles/globals.css

@@ -66,6 +66,18 @@
   .bg-grid-slate-800 {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(30 41 59 / 0.8)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
   }
+
+  .hero-gradient-text {
+    background-image: linear-gradient(94deg, #2563eb 0%, #3b82f6 48%, #06b6d4 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-shadow: 0 2px 18px rgba(59, 130, 246, 0.18);
+  }
+
+  .dark .hero-gradient-text {
+    text-shadow: 0 2px 18px rgba(56, 189, 248, 0.22);
+  }
 }
 
 /* Ant Design Button Icon with Lucide icons */
@@ -337,4 +349,4 @@ tr.selected-row > td:first-child::before {
 /* Override antd Tooltip inner border to prevent double borders */
 .ant-tooltip .ant-tooltip-inner {
   border: none !important;
-}
+}