zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(home): modernize layout, spacing, and component styles

Browse Source 
- 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.
This commit is contained in:
zguiyang
2026-03-14 14:29:12 +08:00
parent e677c03e26
commit 4fa8213e8f
2 changed files with 28 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/index.astro
View File

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