feat(home): enhance visual design and layout improvements

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

src/layouts/Layout.astro

@@ -24,7 +24,7 @@ const t = useTranslations(lang);
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <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 -->
     <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"
   >
     <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>
     <slot />
     <BackToTop client:load />