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 />