feat: redesign entire portfolio with bold modern dark theme

Complete visual overhaul of all pages and components with generous spacing,
bold typography, hover effects, gradient accents, and section differentiation.
Hero features animated terminal mockup and gradient text. Cards use hover
transforms with brand-colored shadows. CTAs use gradient backgrounds.
All i18n keys, data structures, SEO meta, and composable logic preserved.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/pages/index.vue

@@ -53,24 +53,26 @@ useHead({
     <!-- Hero Section -->
     <HeroSection />
 
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <!-- Featured Projects Section -->
+    <!-- Featured Projects Section -->
+    <div class="bg-gray-50 dark:bg-gray-900/30">
       <FeaturedProjectsSection />
-
-      <!-- Services Section -->
-      <ServicesSection />
-
-      <!-- Testimonials Section -->
-      <TestimonialsSection />
-
-      <!-- FAQ Section -->
-      <FAQSection
-        :faqs="homeFAQs"
-        :title="t('faq.title')"
-        :subtitle="t('faq.subtitle')"
-      />
     </div>
 
+    <!-- Services Section -->
+    <ServicesSection />
+
+    <!-- Testimonials Section -->
+    <div class="bg-gray-50 dark:bg-gray-900/30">
+      <TestimonialsSection />
+    </div>
+
+    <!-- FAQ Section -->
+    <FAQSection
+      :faqs="homeFAQs"
+      :title="t('faq.title')"
+      :subtitle="t('faq.subtitle')"
+    />
+
     <!-- CTA Section -->
     <CTASection />
   </div>