Refactor routing in App component to enhance navigation and improve error handling by integrating dynamic routes and updating the NotFound route.

src/components/Services.astro

@@ -0,0 +1,81 @@
+---
+import { SERVICES } from '../site.config';
+import { t } from '../utils/i18n';
+---
+
+<section id="services" class="py-20 bg-muted/30">
+  <div class="container-custom">
+    <!-- Section header -->
+    <div class="text-center mb-16 animate-on-scroll">
+      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4">
+        {t('services.title')}
+      </h2>
+      <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
+        {t('services.subtitle')}
+      </p>
+    </div>
+
+    <!-- Services grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
+      {SERVICES.map((service, index) => (
+        <div 
+          class="card p-6 hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll group"
+          style={`animation-delay: ${index * 0.1}s`}
+        >
+          <!-- Service icon -->
+          <div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300">
+            {service.icon}
+          </div>
+          
+          <!-- Service title -->
+          <h3 class="text-xl font-display font-semibold text-foreground mb-3">
+            {t(service.titleKey)}
+          </h3>
+          
+          <!-- Service description -->
+          <p class="text-muted-foreground mb-4 leading-relaxed">
+            {t(service.descriptionKey)}
+          </p>
+          
+          <!-- Service features -->
+          <ul class="space-y-2">
+            {service.features.map((feature) => (
+              <li class="flex items-start text-sm text-muted-foreground">
+                <svg class="h-4 w-4 mt-0.5 mr-2 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                </svg>
+                {t(feature)}
+              </li>
+            ))}
+          </ul>
+          
+          <!-- Learn more link -->
+          <div class="mt-6">
+            <a 
+              href="/services" 
+              class="inline-flex items-center text-primary hover:text-primary/80 font-medium text-sm group-hover:translate-x-1 transition-all duration-200"
+            >
+              Learn more
+              <svg class="h-4 w-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+              </svg>
+            </a>
+          </div>
+        </div>
+      ))}
+    </div>
+
+    <!-- CTA section -->
+    <div class="text-center animate-on-scroll">
+      <a 
+        href="/services" 
+        class="btn-primary px-8 py-4 text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 inline-flex items-center group"
+      >
+        {t('services.viewAll')}
+        <svg class="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
+        </svg>
+      </a>
+    </div>
+  </div>
+</section>