From 005d8c35d412123f64707c409e15de0ea9dcf697 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Thu, 6 Nov 2025 01:32:55 +0100
Subject: [PATCH] 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   |  4 ++--
 src/components/Layout.tsx   |  2 +-
 src/pages/home/HomeHero.tsx | 36 +++++++++++++++++++-----------------
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 55835fc..8a2d6a6 100644
--- a/src/components/Button.tsx
+++ b/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 = {
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 485b482..d7a588b 100644
--- a/src/components/Layout.tsx
+++ b/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 />
diff --git a/src/pages/home/HomeHero.tsx b/src/pages/home/HomeHero.tsx
index 68938ed..926dfc9 100644
--- a/src/pages/home/HomeHero.tsx
+++ b/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>
   )
 }