src/pages/agents/AgentsHeroAlt.tsx

@@ -11,21 +11,24 @@ export function AgentsHeroAlt() {
         backgroundSize: "cover",
         backgroundPosition: "center",
       }}
-      className="relative mx-auto flex min-h-screen flex-col items-center gap-6 px-4 pb-24 pt-[20vh] text-gray-800 lg:pb-0"
+      className="relative mx-auto flex min-h-screen flex-col items-center justify-center px-4 text-white"
     >
-      <div className="text-center -mt-5">
-        <H2>
-          <span className="">
-            Sovereign AI Agents, Coming Soon.
-          </span>
-        </H2>
+      <div className="absolute inset-0 bg-white/30" />
+      <div className="relative flex flex-col items-center gap-6">
+        <div className="text-center drop-shadow-lg">
+          <H2>
+            <span className="">
+              Sovereign AI Agents, Coming Soon.
+            </span>
+          </H2>
+        </div>
+        <div className="max-w-4xl text-center font-normal drop-shadow-lg">
+          <H5>
+            Hero is the autonomous agent layer for the Mycelium platform—trusted, policy-aware AI that runs on infrastructure you control and remembers what matters.
+          </H5>
+        </div>
       </div>
-      <div className="max-w-4xl text-center font-light text-gray-500">
-        <H5>
-           Hero is the autonomous agent layer for the Mycelium platform—trusted, policy-aware AI that runs on infrastructure you control and remembers what matters.
-        </H5>
-      </div>
-      <div className="pt-6">
+      <div className="absolute bottom-10">
         <ScrollDownArrow />
       </div>
     </div>