Enhance Services page by implementing detailed service descriptions and benefits. Update routing for service links to include specific service IDs for improved navigation. Add scroll margin for header offset to ensure proper visibility when navigating to sections.

src/components/Services.astro

@@ -52,7 +52,7 @@ import { t } from '../utils/i18n';
           <!-- Learn more link -->
           <div class="mt-6">
             <a 
-              href="/services" 
+              href={`/services#${service.id}`} 
               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

src/pages/services.astro

@@ -5,6 +5,108 @@ import Footer from '../components/Footer.astro';
 import CTA from '../components/CTA.astro';
 import { SERVICES } from '../site.config';
 import { t } from '../utils/i18n';
+
+const getServiceDetails = (serviceId: string) => {
+  switch (serviceId) {
+    case 'microsoft365':
+      return {
+        benefits: [
+          'Seamless transition to Microsoft 365 with expert guidance',
+          'Zero downtime email migrations and data transfer',
+          'Custom configuration of all Office applications',
+          'Enhanced team collaboration through Microsoft Teams',
+          'Secure document management with SharePoint',
+          'Streamlined admin center management'
+        ],
+        process: [
+          'Initial assessment of your current setup',
+          'Custom migration plan development',
+          'Step-by-step implementation',
+          'User training and support',
+          'Ongoing maintenance and optimization'
+        ]
+      };
+    case 'management':
+      return {
+        benefits: [
+          'Proactive system monitoring and maintenance',
+          'Automated workflow implementation',
+          'Enhanced security and compliance',
+          'Regular performance optimization',
+          'Cost-effective resource utilization',
+          'Reduced IT management overhead'
+        ],
+        process: [
+          'Environment assessment',
+          'Automation opportunity identification',
+          'Monitoring setup and configuration',
+          'Regular maintenance scheduling',
+          'Continuous improvement implementation'
+        ]
+      };
+    case 'networking':
+      return {
+        benefits: [
+          'Enterprise-grade network infrastructure',
+          'High-performance Ubiquiti/UniFi solutions',
+          'Advanced security implementation',
+          'Reliable and fast connectivity',
+          'Scalable network architecture',
+          'Professional network monitoring'
+        ],
+        process: [
+          'Network requirements analysis',
+          'Infrastructure design and planning',
+          'Equipment selection and deployment',
+          'Security implementation',
+          'Performance optimization'
+        ]
+      };
+    case 'hosting':
+      return {
+        benefits: [
+          'High-performance web hosting',
+          'Secure and reliable infrastructure',
+          'Automated backup systems',
+          'SSL certificate management',
+          'Domain name administration',
+          'Regular maintenance and updates'
+        ],
+        process: [
+          'Hosting requirements assessment',
+          'Server configuration and setup',
+          'Security implementation',
+          'Backup system configuration',
+          'Ongoing monitoring and maintenance'
+        ]
+      };
+    case 'custom':
+      return {
+        benefits: [
+          'Flexible solutions tailored to your unique business needs',
+          'Professional project management and documentation',
+          'Clear communication and consultation throughout the process',
+          'Integration with existing systems and workflows',
+          'Scalable and future-proof implementations',
+          'Support for requirements beyond our standard services'
+        ],
+        process: [
+          'Initial consultation and requirements gathering',
+          'Feasibility study and stakeholder alignment',
+          'Detailed project planning with all involved parties',
+          'Phased implementation with regular checkpoints',
+          'Thorough testing and quality assurance',
+          'Post-implementation support and maintenance'
+        ],
+        additionalInfo: `While we offer standardized services for common IT needs, we understand that every business is unique. We're open to discussing and supporting custom IT projects that may fall outside our standard service offerings. Our professional approach ensures that all stakeholders are involved in the consultation, planning, and implementation phases. This collaborative process helps us deliver solutions that truly meet your specific requirements.`
+      };
+    default:
+      return {
+        benefits: [],
+        process: []
+      };
+  }
+};
 ---
 
 <BaseLayout 
@@ -30,30 +132,61 @@ import { t } from '../utils/i18n';
     <!-- Detailed Services -->
     <section class="py-20 bg-background">
       <div class="container-custom">
-        <div class="space-y-20">
+        <div class="space-y-32">
-          {SERVICES.map((service, index) => (
+          {SERVICES.map((service, index) => {
-            <div class={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center animate-on-scroll ${index % 2 === 1 ? 'lg:grid-flow-col-reverse' : ''}`}>
+            const details = getServiceDetails(service.id);
-              <!-- Service content -->
+            return (
+              <div 
+                id={service.id}
+                class={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-start animate-on-scroll ${index % 2 === 1 ? 'lg:grid-flow-col-reverse' : ''}`}
+              >
+                <!-- Service content - Left side -->
                 <div>
                   <div class="text-5xl mb-4">{service.icon}</div>
                   <h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-4">
                     {t(service.titleKey)}
                   </h2>
-                <p class="text-lg text-muted-foreground mb-6 leading-relaxed">
+                  <p class="text-lg text-muted-foreground mb-8 leading-relaxed">
                     {t(service.descriptionKey)}
                   </p>
                   
-                <!-- Features list -->
+                  {service.id === 'custom' && (
-                <ul class="space-y-3 mb-8">
+                    <div class="mb-8 p-4 bg-primary/5 rounded-lg border border-primary/10">
-                  {service.features.map((feature) => (
+                      <p class="text-muted-foreground leading-relaxed">
+                        {details.additionalInfo}
+                      </p>
+                    </div>
+                  )}
+                  
+                  <!-- Key Benefits -->
+                  <div class="mb-8">
+                    <h3 class="text-xl font-semibold text-foreground mb-4">Key Benefits</h3>
+                    <ul class="space-y-3">
+                      {details.benefits.map((benefit) => (
                         <li class="flex items-start">
                           <svg class="h-5 w-5 mt-1 mr-3 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>
-                      <span class="text-foreground">{t(feature)}</span>
+                          <span class="text-foreground">{benefit}</span>
                         </li>
                       ))}
                     </ul>
+                  </div>
+
+                  <!-- Our Process -->
+                  <div class="mb-8">
+                    <h3 class="text-xl font-semibold text-foreground mb-4">Our Process</h3>
+                    <ul class="space-y-3">
+                      {details.process.map((step, stepIndex) => (
+                        <li class="flex items-start">
+                          <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5">
+                            {stepIndex + 1}
+                          </div>
+                          <span class="text-foreground">{step}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
                   
                   <!-- CTA button -->
                   <a 
@@ -67,21 +200,50 @@ import { t } from '../utils/i18n';
                   </a>
                 </div>
                 
-              <!-- Service visual -->
+                <!-- Service features - Right side -->
                 <div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5">
-                <div class="text-center">
+                  <div class="space-y-6">
-                  <div class="text-8xl mb-6 opacity-20">{service.icon}</div>
+                    <div class="text-center mb-8">
-                  <div class="space-y-4">
+                      <div class="text-6xl mb-4 opacity-20">{service.icon}</div>
-                    {service.features.slice(0, 3).map((feature) => (
+                      <h3 class="text-xl font-semibold text-foreground">Features & Capabilities</h3>
-                      <div class="bg-background/50 rounded-lg p-3 text-sm text-muted-foreground">
+                    </div>
-                        {t(feature)}
+                    
+                    {service.features.map((feature) => (
+                      <div class="bg-background/50 rounded-lg p-4">
+                        <div class="flex items-start">
+                          <svg class="h-5 w-5 mt-0.5 mr-3 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>
+                          <div>
+                            <h4 class="font-medium text-foreground mb-1">{t(feature)}</h4>
+                            <p class="text-sm text-muted-foreground">
+                              {/* Add feature descriptions based on the feature key */}
+                              {feature.includes('migrations') && 'Seamless data transfer with zero downtime'}
+                              {feature.includes('apps') && 'Full setup and optimization of Office applications'}
+                              {feature.includes('teams') && 'Custom Teams environment configuration'}
+                              {feature.includes('sharepoint') && 'Document management and collaboration setup'}
+                              {feature.includes('admin') && 'Complete admin portal configuration'}
+                              {feature.includes('automation') && 'Custom workflow automation solutions'}
+                              {feature.includes('monitoring') && 'Proactive system monitoring and alerts'}
+                              {feature.includes('maintenance') && 'Regular updates and maintenance tasks'}
+                              {feature.includes('optimization') && 'Performance tuning and improvements'}
+                              {feature.includes('ubiquiti') && 'Expert Ubiquiti/UniFi implementation'}
+                              {feature.includes('infrastructure') && 'Enterprise-grade network setup'}
+                              {feature.includes('security') && 'Advanced security measures'}
+                              {feature.includes('webhosting') && 'High-performance hosting solutions'}
+                              {feature.includes('domains') && 'Complete domain management'}
+                              {feature.includes('ssl') && 'SSL certificate installation and renewal'}
+                              {feature.includes('backup') && 'Automated backup and recovery'}
+                            </p>
+                          </div>
+                        </div>
                       </div>
                     ))}
                   </div>
                 </div>
               </div>
-            </div>
+            );
-          ))}
+          })}
         </div>
       </div>
     </section>

src/styles/global.css

@@ -49,6 +49,11 @@
     scroll-behavior: smooth;
   }
   
+  /* Add scroll margin for header offset */
+  [id] {
+    scroll-margin-top: 6rem;
+  }
+  
   /* Custom scrollbar */
   ::-webkit-scrollbar {
     width: 8px;