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,18 +2,19 @@ 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">
+    <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="mx-auto max-w-2xl text-center">
+      <div className="px-6 pt-12 pb-32 sm:pb-40 lg:px-12 lg:pt-24 lg:pb-48">
-        <h1 className="text-6xl font-semibold tracking-tight text-gray-900 lg:text-8xl">
+        <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">
+          <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,
+            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">
+          <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>
@@ -24,5 +25,6 @@ export function HomeHero() {
           </div>
         </div>
       </div>
+    </section>
   )
 }