feat: redesign hero section with card-based layout

- Updated hero to use bordered card container with subtle shadow for visual hierarchy
- Reduced font sizes and adjusted spacing for better readability and modern aesthetic
- Enhanced button styling with larger padding and improved outline variant hover state

src/components/Button.tsx

@@ -3,9 +3,9 @@ import clsx from 'clsx'
 
 const baseStyles = {
   solid:
-    'inline-flex justify-center rounded-full py-2 px-4 text-sm font-semibold transition-colors',
+    'inline-flex justify-center rounded-full py-2 px-5 text-base font-semibold transition-colors',
   outline:
-    'inline-flex justify-center rounded-full border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(4)-1px)] text-sm transition-colors',
+    'inline-flex justify-center bg-white hover:bg-[#fafafa] rounded-full border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(5)-1px)] text-base transition-colors',
 }
 
 const variantStyles = {

src/components/Layout.tsx

@@ -8,7 +8,7 @@ export function Layout() {
   const isHomePage = location.pathname === '/'
 
   return (
-    <div className="bg-transparent antialiased relative" style={{ fontFamily: 'var(--font-inter)' }}>
+    <div className="bg-[#FAFAFA] antialiased relative" style={{ fontFamily: 'var(--font-inter)' }}>
       {isHomePage && <HomeAurora />}
       <div className="relative z-10">
         <Header />

src/pages/home/HomeHero.tsx

@@ -2,27 +2,29 @@ import { Button } from '@/components/Button'
 
 export function HomeHero() {
   return (
-    <div className="mx-auto max-w-7xl px-6 pt-20 pb-24 lg:pb-32 lg:px-8 lg:py-40">
-      <div className="mx-auto max-w-2xl text-center">
-        <h1 className="text-6xl font-semibold tracking-tight text-gray-900 lg:text-8xl">
-          The Sovereign Agentic Cloud
-        </h1>
+    <section className="mt-6 bg-transparent border border-gray-200 border-b-0 mx-4 lg:mx-auto max-w-5xl shadow-[0_0_40px_-20px_rgba(0,0,0,0.06)]">
+      <div className="px-6 pt-12 pb-32 sm:pb-40 lg:px-12 lg:pt-24 lg:pb-48">
+        <div className="max-w-2xl mx-auto text-center">
+          <h1 className="text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
+            The Sovereign Agentic Cloud
+          </h1>
 
-        <p className="mt-8 text-lg font-medium text-pretty text-gray-500 lg:text-xl/8">
-          Host nodes, deploy workloads, or build private AI systems,
-          all on infrastructure you own and control.
-        </p>
+          <p className="mt-6 text-lg text-gray-500 sm:text-xl max-w-prose mx-auto tracking-normal leading-tight lg:leading-relaxed">
+            Host nodes, deploy workloads, or build private AI systems —
+            all on infrastructure you own and control.
+          </p>
 
-        <div className="mt-10 flex items-center justify-center gap-x-6">
-          <Button variant="solid" color="cyan" href="#">
-            Start Hosting
-          </Button>
+          <div className="mt-10 flex flex-col sm:flex-row sm:items-center sm:justify-center gap-4">
+            <Button variant="solid" color="cyan" href="#">
+              Start Hosting
+            </Button>
 
-          <Button href="#" variant="outline" color="gray">
-            Deploy in Cloud <span aria-hidden="true">→</span>
-          </Button>
+            <Button href="#" variant="outline" color="gray">
+              Deploy in Cloud <span aria-hidden="true">→</span>
+            </Button>
+          </div>
         </div>
       </div>
-    </div>
+    </section>
   )
 }