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

feat(home): enhance visual design and layout improvements

Browse Source 
- Improved hero section with dynamic gradient and overlay enhancements.
- Updated background styles, component surfaces, and hover effects for a cohesive look.
- Enhanced section spacing, responsiveness, and typography for better flow.
- Refined service and project showcases with modernized card styling and interactivity.
This commit is contained in:
zguiyang
2026-03-14 11:30:33 +08:00
parent 9c6b7fd698
commit 32954cf69a
3 changed files with 199 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/layouts/Layout.astro
View File

@@ -24,7 +24,7 @@ const t = useTranslations(lang);
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<meta name="description" content={description} /> <meta name="description" content={description} />
<title>{title}{t('site.title') ? ` | ${t('site.title')}` : ''}</title> <title>{title} | {t("site.title")}</title>
<!-- View Transitions for smooth page transitions --> <!-- View Transitions for smooth page transitions -->
<meta name="view-transition" content="same-origin" /> <meta name="view-transition" content="same-origin" />
{ {
@@ -37,8 +37,11 @@ const t = useTranslations(lang);
class="min-h-screen bg-background font-sans antialiased selection:bg-primary/20 selection:text-primary" class="min-h-screen bg-background font-sans antialiased selection:bg-primary/20 selection:text-primary"
> >
<div <div
class="fixed inset-0 -z-10 h-full w-full bg-background bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(37,99,235,0.15),rgba(255,255,255,0))]" class="fixed inset-0 -z-10 h-full w-full bg-background"
> >
<div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(37,99,235,0.12),rgba(255,255,255,0))]"></div>
<div class="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(139,92,246,0.08),transparent_40%)]"></div>
<div class="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(249,115,22,0.05),transparent_40%)]"></div>
</div> </div>
<slot /> <slot />
<BackToTop client:load /> <BackToTop client:load />

31
src/pages/index.astro
View File

@@ -45,12 +45,13 @@ const keyFacts = [
<GlassHeader client:only="react" lang={lang} /> <GlassHeader client:only="react" lang={lang} />
<main class="min-h-screen"> <main class="min-h-screen">
<div class="relative"> <div class="relative overflow-hidden">
{/* 统一的页面背景装饰 */} <div class="absolute inset-0 -z-10">
<div class="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,_var(--tw-gradient-from)_0%,_transparent_25%)] from-primary/5 to-transparent"></div> <div class="absolute left-1/2 top-0 h-[600px] w-[800px] -translate-x-1/2 -translate-y-1/2 bg-primary/10 blur-[120px]"></div>
<div class="absolute right-0 top-1/4 h-[400px] w-[400px] bg-purple-500/5 blur-[100px]"></div>
<section class="relative flex min-h-[90vh] items-center overflow-hidden py-24 lg:py-32"> <div class="absolute left-0 top-1/2 h-[400px] w-[400px] bg-orange-500/5 blur-[100px]"></div>
<div class="page-hero-overlay opacity-50"></div> </div>
<section class="relative flex min-h-[90vh] items-center py-24 lg:py-32">
<Container className="relative z-10"> <Container className="relative z-10">
<div class="mx-auto max-w-5xl space-y-16"> <div class="mx-auto max-w-5xl space-y-16">
<div class="space-y-8 text-center"> <div class="space-y-8 text-center">
@@ -85,8 +86,8 @@ const keyFacts = [
<div class="mx-auto max-w-3xl"> <div class="mx-auto max-w-3xl">
<div class="group relative"> <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="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/80 backdrop-blur-md"> <div class="page-surface relative overflow-hidden rounded-2xl border bg-card/40 backdrop-blur-md">
<div class="flex items-center justify-between border-b border-border/50 bg-muted/30 px-5 py-3"> <div class="flex items-center justify-between border-b border-border/50 bg-muted/20 px-5 py-3">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="h-3 w-3 rounded-full bg-red-400/80 shadow-[0_0_8px_rgba(248,113,113,0.4)]"></span> <span class="h-3 w-3 rounded-full bg-red-400/80 shadow-[0_0_8px_rgba(248,113,113,0.4)]"></span>
<span class="h-3 w-3 rounded-full bg-yellow-400/80 shadow-[0_0_8px_rgba(250,204,21,0.4)]"></span> <span class="h-3 w-3 rounded-full bg-yellow-400/80 shadow-[0_0_8px_rgba(250,204,21,0.4)]"></span>
@@ -124,7 +125,8 @@ const keyFacts = [
</section> </section>
<div class="space-y-40 pb-40"> <div class="space-y-40 pb-40">
<section class="relative pt-16 lg:pt-24"> <section class="relative">
<div class="py-24 lg:py-32">
<Container> <Container>
<div class="mb-16 flex flex-col gap-6 md:flex-row md:items-end md:justify-between"> <div class="mb-16 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
<div class="space-y-4"> <div class="space-y-4">
@@ -139,7 +141,7 @@ const keyFacts = [
<div class="grid gap-10 md:grid-cols-2"> <div class="grid gap-10 md:grid-cols-2">
{localizedServices.map((service) => ( {localizedServices.map((service) => (
<article class="group relative p-4 transition-all duration-500 hover:-translate-y-1"> <article class="group relative rounded-3xl 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="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`}> <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"> <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -160,6 +162,7 @@ const keyFacts = [
))} ))}
</div> </div>
</Container> </Container>
</div>
</section> </section>
<section class="relative"> <section class="relative">
@@ -177,7 +180,7 @@ const keyFacts = [
<div class={`relative flex flex-col sm:flex-row ${index % 2 === 0 ? 'sm:flex-row-reverse' : ''}`}> <div class={`relative flex flex-col sm:flex-row ${index % 2 === 0 ? 'sm:flex-row-reverse' : ''}`}>
<div class="absolute -left-1.5 top-2 h-3 w-3 rounded-full border-2 border-primary bg-background sm:left-1/2 sm:-ml-1.5"></div> <div class="absolute -left-1.5 top-2 h-3 w-3 rounded-full border-2 border-primary bg-background sm:left-1/2 sm:-ml-1.5"></div>
<div class="w-full pl-8 sm:w-1/2 sm:px-12"> <div class="w-full pl-8 sm:w-1/2 sm:px-12">
<article class="p-2 transition-all"> <article class="rounded-2xl p-4 transition-all hover:bg-card/40">
<span class="text-xs font-bold uppercase tracking-wider text-primary/60">{item.period}</span> <span class="text-xs font-bold uppercase tracking-wider text-primary/60">{item.period}</span>
<h3 class="mt-2 text-xl font-bold leading-tight">{item.title}</h3> <h3 class="mt-2 text-xl font-bold leading-tight">{item.title}</h3>
<p class="mt-3 text-sm leading-relaxed text-muted-foreground/90">{item.outcome}</p> <p class="mt-3 text-sm leading-relaxed text-muted-foreground/90">{item.outcome}</p>
@@ -197,6 +200,7 @@ const keyFacts = [
</section> </section>
<section class="relative"> <section class="relative">
<div class="py-24 lg:py-32">
<Container> <Container>
<div class="mb-12 space-y-3 text-center"> <div class="mb-12 space-y-3 text-center">
<h2 class="text-4xl font-bold tracking-tight sm:text-5xl">{t("home.featured.title")}</h2> <h2 class="text-4xl font-bold tracking-tight sm:text-5xl">{t("home.featured.title")}</h2>
@@ -251,12 +255,13 @@ const keyFacts = [
))} ))}
</div> </div>
</Container> </Container>
</div>
</section> </section>
<section class="relative"> <section class="relative">
<Container> <Container>
<div class="relative overflow-hidden rounded-[2.5rem] bg-slate-950 px-8 py-16 text-center text-white sm:px-16 sm:py-24 dark:bg-primary/10 dark:text-foreground"> <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/20 to-transparent"></div> <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"> <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> <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> <p class="text-lg text-white/70 sm:text-xl dark:text-muted-foreground">{t("home.final.description")}</p>

31
src/pages/zh/index.astro
View File

@@ -45,12 +45,13 @@ const keyFacts = [
<GlassHeader client:only="react" lang={lang} /> <GlassHeader client:only="react" lang={lang} />
<main class="min-h-screen"> <main class="min-h-screen">
<div class="relative"> <div class="relative overflow-hidden">
{/* 统一的页面背景装饰 */} <div class="absolute inset-0 -z-10">
<div class="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,_var(--tw-gradient-from)_0%,_transparent_25%)] from-primary/5 to-transparent"></div> <div class="absolute left-1/2 top-0 h-[600px] w-[800px] -translate-x-1/2 -translate-y-1/2 bg-primary/10 blur-[120px]"></div>
<div class="absolute right-0 top-1/4 h-[400px] w-[400px] bg-purple-500/5 blur-[100px]"></div>
<section class="relative flex min-h-[90vh] items-center overflow-hidden py-24 lg:py-32"> <div class="absolute left-0 top-1/2 h-[400px] w-[400px] bg-orange-500/5 blur-[100px]"></div>
<div class="page-hero-overlay opacity-50"></div> </div>
<section class="relative flex min-h-[90vh] items-center py-24 lg:py-32">
<Container className="relative z-10"> <Container className="relative z-10">
<div class="mx-auto max-w-5xl space-y-16"> <div class="mx-auto max-w-5xl space-y-16">
<div class="space-y-8 text-center"> <div class="space-y-8 text-center">
@@ -85,8 +86,8 @@ const keyFacts = [
<div class="mx-auto max-w-3xl"> <div class="mx-auto max-w-3xl">
<div class="group relative"> <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="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/80 backdrop-blur-md"> <div class="page-surface relative overflow-hidden rounded-2xl border bg-card/40 backdrop-blur-md">
<div class="flex items-center justify-between border-b border-border/50 bg-muted/30 px-5 py-3"> <div class="flex items-center justify-between border-b border-border/50 bg-muted/20 px-5 py-3">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="h-3 w-3 rounded-full bg-red-400/80 shadow-[0_0_8px_rgba(248,113,113,0.4)]"></span> <span class="h-3 w-3 rounded-full bg-red-400/80 shadow-[0_0_8px_rgba(248,113,113,0.4)]"></span>
<span class="h-3 w-3 rounded-full bg-yellow-400/80 shadow-[0_0_8px_rgba(250,204,21,0.4)]"></span> <span class="h-3 w-3 rounded-full bg-yellow-400/80 shadow-[0_0_8px_rgba(250,204,21,0.4)]"></span>
@@ -124,7 +125,8 @@ const keyFacts = [
</section> </section>
<div class="space-y-40 pb-40"> <div class="space-y-40 pb-40">
<section class="relative pt-16 lg:pt-24"> <section class="relative">
<div class="py-24 lg:py-32">
<Container> <Container>
<div class="mb-16 flex flex-col gap-6 md:flex-row md:items-end md:justify-between"> <div class="mb-16 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
<div class="space-y-4"> <div class="space-y-4">
@@ -139,7 +141,7 @@ const keyFacts = [
<div class="grid gap-10 md:grid-cols-2"> <div class="grid gap-10 md:grid-cols-2">
{localizedServices.map((service) => ( {localizedServices.map((service) => (
<article class="group relative p-4 transition-all duration-500 hover:-translate-y-1"> <article class="group relative rounded-3xl 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="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`}> <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"> <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -160,6 +162,7 @@ const keyFacts = [
))} ))}
</div> </div>
</Container> </Container>
</div>
</section> </section>
<section class="relative"> <section class="relative">
@@ -177,7 +180,7 @@ const keyFacts = [
<div class={`relative flex flex-col sm:flex-row ${index % 2 === 0 ? 'sm:flex-row-reverse' : ''}`}> <div class={`relative flex flex-col sm:flex-row ${index % 2 === 0 ? 'sm:flex-row-reverse' : ''}`}>
<div class="absolute -left-1.5 top-2 h-3 w-3 rounded-full border-2 border-primary bg-background sm:left-1/2 sm:-ml-1.5"></div> <div class="absolute -left-1.5 top-2 h-3 w-3 rounded-full border-2 border-primary bg-background sm:left-1/2 sm:-ml-1.5"></div>
<div class="w-full pl-8 sm:w-1/2 sm:px-12"> <div class="w-full pl-8 sm:w-1/2 sm:px-12">
<article class="p-2 transition-all"> <article class="rounded-2xl p-4 transition-all hover:bg-card/40">
<span class="text-xs font-bold uppercase tracking-wider text-primary/60">{item.period}</span> <span class="text-xs font-bold uppercase tracking-wider text-primary/60">{item.period}</span>
<h3 class="mt-2 text-xl font-bold leading-tight">{item.title}</h3> <h3 class="mt-2 text-xl font-bold leading-tight">{item.title}</h3>
<p class="mt-3 text-sm leading-relaxed text-muted-foreground/90">{item.outcome}</p> <p class="mt-3 text-sm leading-relaxed text-muted-foreground/90">{item.outcome}</p>
@@ -197,6 +200,7 @@ const keyFacts = [
</section> </section>
<section class="relative"> <section class="relative">
<div class="py-24 lg:py-32">
<Container> <Container>
<div class="mb-12 space-y-3 text-center"> <div class="mb-12 space-y-3 text-center">
<h2 class="text-4xl font-bold tracking-tight sm:text-5xl">{t("home.featured.title")}</h2> <h2 class="text-4xl font-bold tracking-tight sm:text-5xl">{t("home.featured.title")}</h2>
@@ -251,12 +255,13 @@ const keyFacts = [
))} ))}
</div> </div>
</Container> </Container>
</div>
</section> </section>
<section class="relative"> <section class="relative">
<Container> <Container>
<div class="relative overflow-hidden rounded-[2.5rem] bg-slate-950 px-8 py-16 text-center text-white sm:px-16 sm:py-24 dark:bg-primary/10 dark:text-foreground"> <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/20 to-transparent"></div> <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"> <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> <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> <p class="text-lg text-white/70 sm:text-xl dark:text-muted-foreground">{t("home.final.description")}</p>