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

feat(ui): add Container component and replace manual container divs

Browse Source 
Implement a reusable Container component with size variants (sm, md, lg, xl, full) to standardize content width across the application. Replace all manual container divs with the new component for consistent styling and maintainability.
This commit is contained in:
joyzhao
2025-06-19 18:10:49 +08:00
parent b4a8d13cdd
commit 5fcf7a9d33
12 changed files with 97 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/index.astro
View File

@@ -3,6 +3,7 @@ import Layout from "@/layouts/Layout.astro";
import GlassHeader from "@/components/GlassHeader";
import SkillsMarquee from "@/components/SkillsMarquee";
import Footer from "@/components/Footer";
import Container from "@/components/ui/Container";
import { useTranslations, type Lang } from "@/i18n/utils";
import { defaultLang } from "@/i18n/ui";
import { personalInfo, services } from "@/lib/data";
@@ -14,14 +15,14 @@ const pageTitle = t('site.title');
---
<Layout title={pageTitle}>
<GlassHeader client:only="react" />
<GlassHeader client:only="react" lang={lang} />
<main class="min-h-screen">
<!-- Hero Section - Inlined Content -->
<section class="py-32 relative overflow-hidden min-h-screen flex items-center">
<section class="py-32 relative overflow-hidden min-h-screen flex flex-col justify-center">
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>
<div class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
<Container client:load size="md" className="relative z-10">
<div class="text-center mb-16">
<!-- Greeting -->
<div class="flex items-center justify-center mb-6">
@@ -162,14 +163,14 @@ const pageTitle = t('site.title');
</div>
</div>
</div>
</div>
</Container>
</section>
<SkillsMarquee lang={lang} client:only="react" />
<!-- Services Section - Inlined Content -->
<section id="services" class="py-20 px-4 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
<div class="max-w-6xl mx-auto">
<section id="services" class="py-20 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
<Container client:load size="md">
<h2 class="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
Services I Offer
</h2>
@@ -196,7 +197,7 @@ const pageTitle = t('site.title');
</div>
))}
</div>
</div>
</Container>
</section>
<!-- About Section - Inlined Content -->
@@ -204,7 +205,7 @@ const pageTitle = t('site.title');
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-br from-blue-900/10 via-purple-800/5 to-indigo-700/10 dark:from-blue-900/20 dark:via-purple-800/10 dark:to-indigo-700/20"></div>
<div class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
<Container client:load size="md" className="relative z-10">
<div class="text-center mb-16">
<!-- Section Title -->
<div class="flex items-center justify-center mb-6">
@@ -331,15 +332,15 @@ const pageTitle = t('site.title');
</div>
</div>
</div>
</div>
</Container>
</section>
<!-- Projects Section - Inlined Content -->
<section id="projects" class="py-20 relative">
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
<div class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
<Container client:load size="md" className="relative z-10">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent">
Latest Projects
@@ -547,7 +548,7 @@ const pageTitle = t('site.title');
</div>
</div>
</div>
</div>
</Container>
</section>
</main>
<Footer lang={lang} client:only="react" />