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

feat(services): add services section with outsourcing and bugfix cards

Browse Source 
Add new services section to showcase outsourcing projects and bug fixing services
Update i18n translations for services section
Change hero section link from projects to about
Remove personalInfo import and use translation for name in footer
This commit is contained in:
joyzhao
2025-06-16 17:29:35 +08:00
parent a18a0cdff1
commit 1354ffab58
5 changed files with 194 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/pages/index.astro
View File

@@ -19,6 +19,87 @@ const pageTitle = t('page.home.title');
<main class="min-h-screen">
<HeroSection lang={lang} client:only="react" />
<SkillsMarquee lang={lang} client:only="react" />
<!-- Services Section -->
<section 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">
<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">
{t('services.title')}
</h2>
<div class="grid md:grid-cols-2 gap-8">
<!-- Outsourcing Projects Card -->
<div class="bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-105">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center mr-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-slate-800 dark:text-white">{t('services.outsourcing.title')}</h3>
</div>
<ul class="space-y-3">
<li class="flex items-start">
<span class="text-blue-500 mr-3 mt-1">1.</span>
<span class="text-slate-600 dark:text-slate-300">{t('services.outsourcing.item1')}</span>
</li>
<li class="flex items-start">
<span class="text-blue-500 mr-3 mt-1">2.</span>
<span class="text-slate-600 dark:text-slate-300">{t('services.outsourcing.item2')}</span>
</li>
<li class="flex items-start">
<span class="text-blue-500 mr-3 mt-1">3.</span>
<span class="text-slate-600 dark:text-slate-300">{t('services.outsourcing.item3')}</span>
</li>
<li class="flex items-start">
<span class="text-blue-500 mr-3 mt-1">4.</span>
<span class="text-slate-600 dark:text-slate-300">{t('services.outsourcing.item4')}</span>
</li>
<li class="flex items-start">
<span class="text-blue-500 mr-3 mt-1">5.</span>
<span class="text-slate-600 dark:text-slate-300">{t('services.outsourcing.item5')}</span>
</li>
</ul>
</div>
<!-- Bug Fixes Card -->
<div class="bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-105">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-gradient-to-r from-red-500 to-pink-500 rounded-lg flex items-center justify-center mr-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-slate-800 dark:text-white">{t('services.bugfix.title')}</h3>
</div>
<ul class="space-y-3">
<li class="flex items-start">
<span class="text-red-500 mr-3 mt-1">1.</span>
<span class="text-slate-600 dark:text-slate-300">{t('services.bugfix.item1')}</span>
</li>
<li class="flex items-start">
<span class="text-red-500 mr-3 mt-1">2.</span>
<span class="text-slate-600 dark:text-slate-300">{t('services.bugfix.item2')}</span>
</li>
<li class="flex items-start">
<span class="text-red-500 mr-3 mt-1">3.</span>
<span class="text-slate-600 dark:text-slate-300">{t('services.bugfix.item3')}</span>
</li>
<li class="flex items-start">
<span class="text-red-500 mr-3 mt-1">4.</span>
<span class="text-slate-600 dark:text-slate-300">{t('services.bugfix.item4')}</span>
</li>
<li class="flex items-start">
<span class="text-red-500 mr-3 mt-1">5.</span>
<span class="text-slate-600 dark:text-slate-300">{t('services.bugfix.item5')}</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<AboutSection lang={lang} client:only="react" />
<ProjectsSection lang={lang} client:only="react" />
</main>