From 4fa8213e8f6946f4a7d122f2439cf8d200e3d88d Mon Sep 17 00:00:00 2001
From: zguiyang <zhaoguiyang18@outlook.com>
Date: Sat, 14 Mar 2026 14:29:12 +0800
Subject: [PATCH] refactor(home): modernize layout, spacing, and component
 styles

- Reduced section spacing and adjusted minimum height for improved visual balance.
- Updated card designs, headlines, and typography for better readability and flow.
- Simplified styles and reorganized structure for enhanced maintainability.
- Refined call-to-action area with improved button styling and responsiveness.
---
 src/pages/index.astro    | 38 +++++++++++++++++---------------------
 src/pages/zh/index.astro | 25 +++++++++++--------------
 2 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index a2128ea..0fd09ca 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -52,9 +52,9 @@ const keyFacts = [
         <div class="absolute right-0 top-1/4 h-[400px] w-[400px] bg-purple-500/5 blur-[100px]"></div>
         <div class="absolute left-0 top-1/2 h-[400px] w-[400px] bg-orange-500/5 blur-[100px]"></div>
       </div>
-      <section class="relative flex min-h-[90vh] items-center py-24 lg:py-32">
+      <section class="relative flex min-h-[80vh] items-center py-20 lg:py-28">
         <Container className="relative z-10">
-          <div class="mx-auto max-w-5xl space-y-16">
+          <div class="mx-auto max-w-5xl space-y-12">
             <div class="space-y-8 text-center">
               <div class="space-y-4">
                 <h1 class="text-5xl font-bold tracking-tight sm:text-7xl lg:text-8xl">
@@ -73,7 +73,9 @@ const keyFacts = [
                 {t("home.hero.ctaSecondary")}
               </a>
             </div>
+          </div>
 
+          <div class="mx-auto max-w-3xl space-y-8">
             <div class="flex flex-wrap items-center justify-center gap-3 text-sm">
               {keyFacts.map((item) => (
                 <span class="inline-flex items-center rounded-full border border-primary/10 bg-primary/5 px-4 py-1.5 font-medium text-primary/80 backdrop-blur-sm">
@@ -82,9 +84,6 @@ const keyFacts = [
                 </span>
               ))}
             </div>
-          </div>
-
-          <div class="mx-auto max-w-3xl">
             <div class="group relative">
               <div class="absolute -inset-1 rounded-2xl bg-gradient-to-r from-primary/20 to-purple-500/20 opacity-50 blur transition duration-1000 group-hover:opacity-100 group-hover:duration-200"></div>
               <div class="page-surface relative overflow-hidden rounded-2xl border bg-card/40 backdrop-blur-md">
@@ -125,7 +124,7 @@ const keyFacts = [
       </Container>
     </section>
 
-    <div class="space-y-40 pb-40">
+    <div class="space-y-24 pb-24">
       <section class="relative">
         <div class="py-24 lg:py-32">
           <Container>
@@ -142,7 +141,7 @@ const keyFacts = [
 
             <div class="grid gap-10 md:grid-cols-2">
               {localizedServices.map((service) => (
-                <article class="group relative rounded-3xl p-6 transition-all duration-500 hover:bg-card/50 hover:shadow-xl hover:shadow-primary/5">
+                <article class="group relative rounded-2xl p-6 transition-all duration-500 hover:bg-card/50 hover:shadow-xl hover:shadow-primary/5">
                   <div class="mb-8 flex items-center gap-6">
                     <div class={`flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br ${service.icon.gradient} text-white shadow-lg transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3`}>
                       <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -203,7 +202,7 @@ const keyFacts = [
       <section class="relative">
         <div class="py-24 lg:py-32">
           <Container>
-            <div class="mb-12 space-y-3 text-center">
+            <div class="mb-12 space-y-3">
               <h2 class="text-4xl font-bold tracking-tight sm:text-5xl">{t("home.featured.title")}</h2>
             </div>
 
@@ -218,19 +217,16 @@ const keyFacts = [
 
       <section class="relative">
         <Container>
-          <div class="relative overflow-hidden rounded-[2.5rem] bg-gradient-to-br from-slate-900 to-slate-950 px-8 py-16 text-center text-white sm:px-16 sm:py-24 dark:from-primary/20 dark:to-primary/5 dark:text-foreground">
-            <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-from)_0%,_transparent_70%)] from-primary/10 to-transparent opacity-50"></div>
-            <div class="relative z-10 mx-auto max-w-3xl space-y-8">
-              <h2 class="text-4xl font-bold tracking-tight sm:text-6xl">{t("home.final.title")}</h2>
-              <p class="text-lg text-white/70 sm:text-xl dark:text-muted-foreground">{t("home.final.description")}</p>
-              <div class="flex flex-wrap items-center justify-center gap-4 pt-4">
-                <a href={`${prefix}/about`} class="inline-flex h-14 items-center rounded-full bg-white px-10 text-sm font-bold text-slate-950 transition-all hover:bg-white/90 dark:bg-primary dark:text-primary-foreground">
-                  {t("home.final.ctaPrimary")}
-                </a>
-                <a href={`${prefix}/hire`} class="inline-flex h-14 items-center rounded-full border border-white/20 bg-transparent px-10 text-sm font-bold text-white transition-all hover:bg-white/10 dark:border-primary/20 dark:text-foreground">
-                  {t("home.final.ctaSecondary")}
-                </a>
-              </div>
+          <div class="flex flex-col items-center text-center">
+            <h2 class="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl mb-6">{t("home.final.title")}</h2>
+            <p class="text-lg leading-relaxed text-muted-foreground/90 sm:text-xl max-w-2xl mb-10">{t("home.final.description")}</p>
+            <div class="flex flex-wrap justify-center gap-4">
+              <a href={`${prefix}/about`} class="inline-flex h-12 items-center justify-center rounded-full bg-primary px-8 text-sm font-semibold text-primary-foreground transition-all hover:translate-y-[-2px] hover:bg-primary/90">
+                {t("home.final.ctaPrimary")}
+              </a>
+              <a href={`${prefix}/hire`} class="inline-flex h-12 items-center justify-center rounded-full border border-border px-8 text-sm font-semibold text-foreground transition-all hover:translate-y-[-2px] hover:bg-muted">
+                {t("home.final.ctaSecondary")}
+              </a>
             </div>
           </div>
         </Container>
diff --git a/src/pages/zh/index.astro b/src/pages/zh/index.astro
index dd3a304..49f0947 100644
--- a/src/pages/zh/index.astro
+++ b/src/pages/zh/index.astro
@@ -202,7 +202,7 @@ const keyFacts = [
       <section class="relative">
         <div class="py-24 lg:py-32">
           <Container>
-            <div class="mb-12 space-y-3 text-center">
+            <div class="mb-12 space-y-3">
               <h2 class="text-4xl font-bold tracking-tight sm:text-5xl">{t("home.featured.title")}</h2>
             </div>
 
@@ -260,19 +260,16 @@ const keyFacts = [
 
       <section class="relative">
         <Container>
-          <div class="relative overflow-hidden rounded-[2.5rem] bg-gradient-to-br from-slate-900 to-slate-950 px-8 py-16 text-center text-white sm:px-16 sm:py-24 dark:from-primary/20 dark:to-primary/5 dark:text-foreground">
-            <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-from)_0%,_transparent_70%)] from-primary/10 to-transparent opacity-50"></div>
-            <div class="relative z-10 mx-auto max-w-3xl space-y-8">
-              <h2 class="text-4xl font-bold tracking-tight sm:text-6xl">{t("home.final.title")}</h2>
-              <p class="text-lg text-white/70 sm:text-xl dark:text-muted-foreground">{t("home.final.description")}</p>
-              <div class="flex flex-wrap items-center justify-center gap-4 pt-4">
-                <a href={`${prefix}/about`} class="inline-flex h-14 items-center rounded-full bg-white px-10 text-sm font-bold text-slate-950 transition-all hover:bg-white/90 dark:bg-primary dark:text-primary-foreground">
-                  {t("home.final.ctaPrimary")}
-                </a>
-                <a href={`${prefix}/hire`} class="inline-flex h-14 items-center rounded-full border border-white/20 bg-transparent px-10 text-sm font-bold text-white transition-all hover:bg-white/10 dark:border-primary/20 dark:text-foreground">
-                  {t("home.final.ctaSecondary")}
-                </a>
-              </div>
+          <div class="flex flex-col items-center text-center">
+            <h2 class="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl mb-6">{t("home.final.title")}</h2>
+            <p class="text-lg leading-relaxed text-muted-foreground/90 sm:text-xl max-w-2xl mb-10">{t("home.final.description")}</p>
+            <div class="flex flex-wrap justify-center gap-4">
+              <a href={`${prefix}/about`} class="inline-flex h-12 items-center justify-center rounded-full bg-primary px-8 text-sm font-semibold text-primary-foreground transition-all hover:translate-y-[-2px] hover:bg-primary/90">
+                {t("home.final.ctaPrimary")}
+              </a>
+              <a href={`${prefix}/hire`} class="inline-flex h-12 items-center justify-center rounded-full border border-border px-8 text-sm font-semibold text-foreground transition-all hover:translate-y-[-2px] hover:bg-muted">
+                {t("home.final.ctaSecondary")}
+              </a>
             </div>
           </div>
         </Container>