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

src/components/CTA.astro

@@ -0,0 +1,56 @@
+---
+import { t } from '../utils/i18n';
+---
+
+<section class="py-20 bg-gradient-to-br from-primary via-primary to-secondary text-primary-foreground relative overflow-hidden">
+  <!-- Background decoration -->
+  <div class="absolute inset-0 opacity-10">
+    <div class="absolute top-10 left-10 w-32 h-32 rounded-full bg-white blur-2xl"></div>
+    <div class="absolute bottom-10 right-10 w-48 h-48 rounded-full bg-white blur-3xl"></div>
+    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full bg-white blur-3xl"></div>
+  </div>
+
+  <div class="container-custom relative z-10">
+    <div class="text-center max-w-4xl mx-auto animate-on-scroll">
+      <!-- CTA heading -->
+      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold mb-6">
+        {t('cta.title')}
+      </h2>
+      
+      <!-- CTA subtitle -->
+      <p class="text-lg sm:text-xl mb-8 opacity-90 leading-relaxed">
+        {t('cta.subtitle')}
+      </p>
+      
+      <!-- CTA button -->
+      <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
+        <a 
+          href="/contact" 
+          class="bg-background text-foreground hover:bg-background/90 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('cta.button')}
+          <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
+          </svg>
+        </a>
+        
+        <a 
+          href="tel:+391234567890" 
+          class="border-2 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary px-8 py-4 text-lg font-semibold rounded-xl transition-all duration-300 hover:scale-105 inline-flex items-center"
+        >
+          Call Now
+          <svg class="h-5 w-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
+          </svg>
+        </a>
+      </div>
+
+      <!-- Contact info -->
+      <div class="mt-8 opacity-80">
+        <p class="text-sm">
+          📧 info@tiber365.it | 📞 +39 123 456 7890
+        </p>
+      </div>
+    </div>
+  </div>
+</section> 

src/components/ContactForm.astro

@@ -0,0 +1,222 @@
+---
+import { t } from '../utils/i18n';
+---
+
+<section class="py-20 bg-background">
+  <div class="container-custom">
+    <div class="max-w-4xl mx-auto">
+      <!-- Section header -->
+      <div class="text-center mb-12 animate-on-scroll">
+        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4">
+          {t('contact.title')}
+        </h2>
+        <p class="text-lg sm:text-xl text-muted-foreground">
+          {t('contact.subtitle')}
+        </p>
+      </div>
+
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+        <!-- Contact form -->
+        <div class="animate-on-scroll">
+          <form id="contact-form" class="space-y-6">
+            <!-- Name field -->
+            <div>
+              <label for="name" class="block text-sm font-medium text-foreground mb-2">
+                {t('contact.form.name')} *
+              </label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                required
+                class="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
+                placeholder="John Doe"
+              />
+            </div>
+
+            <!-- Email field -->
+            <div>
+              <label for="email" class="block text-sm font-medium text-foreground mb-2">
+                {t('contact.form.email')} *
+              </label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                required
+                class="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
+                placeholder="john@company.com"
+              />
+            </div>
+
+            <!-- Company field -->
+            <div>
+              <label for="company" class="block text-sm font-medium text-foreground mb-2">
+                {t('contact.form.company')}
+              </label>
+              <input
+                type="text"
+                id="company"
+                name="company"
+                class="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
+                placeholder="Your Company"
+              />
+            </div>
+
+            <!-- Service field -->
+            <div>
+              <label for="service" class="block text-sm font-medium text-foreground mb-2">
+                {t('contact.form.service')}
+              </label>
+              <select
+                id="service"
+                name="service"
+                class="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
+              >
+                <option value="">Select a service</option>
+                <option value="microsoft365">Microsoft 365 Support</option>
+                <option value="management">Full M365 Management</option>
+                <option value="networking">Networking & Infrastructure</option>
+                <option value="hosting">Web Hosting & Management</option>
+                <option value="custom">Custom IT Projects</option>
+              </select>
+            </div>
+
+            <!-- Message field -->
+            <div>
+              <label for="message" class="block text-sm font-medium text-foreground mb-2">
+                {t('contact.form.message')} *
+              </label>
+              <textarea
+                id="message"
+                name="message"
+                rows="4"
+                required
+                class="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all resize-y"
+                placeholder="Tell us about your IT needs..."
+              ></textarea>
+            </div>
+
+            <!-- Submit button -->
+            <button
+              type="submit"
+              class="w-full btn-primary px-6 py-3 text-lg font-semibold rounded-lg transition-all duration-300 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
+              id="submit-btn"
+            >
+              <span id="submit-text">{t('contact.form.send')}</span>
+              <svg id="submit-spinner" class="hidden inline h-5 w-5 ml-2 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+              </svg>
+            </button>
+          </form>
+
+          <!-- Success/Error messages -->
+          <div id="form-message" class="hidden mt-4 p-4 rounded-lg"></div>
+        </div>
+
+        <!-- Contact info -->
+        <div class="animate-on-scroll" style="animation-delay: 0.2s">
+          <div class="card p-8">
+            <h3 class="text-xl font-display font-semibold text-foreground mb-6">
+              Get in Touch
+            </h3>
+            
+            <div class="space-y-4">
+              <!-- Email -->
+              <div class="flex items-center">
+                <div class="flex-shrink-0 w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-4">
+                  <svg class="h-5 w-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+                  </svg>
+                </div>
+                <div>
+                  <div class="text-sm text-muted-foreground">Email</div>
+                  <a href="mailto:info@tiber365.it" class="text-foreground hover:text-primary transition-colors">
+                    {t('contact.info.email')}
+                  </a>
+                </div>
+              </div>
+
+              <!-- Phone -->
+              <div class="flex items-center">
+                <div class="flex-shrink-0 w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-4">
+                  <svg class="h-5 w-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
+                  </svg>
+                </div>
+                <div>
+                  <div class="text-sm text-muted-foreground">Phone</div>
+                  <a href="tel:+391234567890" class="text-foreground hover:text-primary transition-colors">
+                    {t('contact.info.phone')}
+                  </a>
+                </div>
+              </div>
+
+              <!-- Location -->
+              <div class="flex items-center">
+                <div class="flex-shrink-0 w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-4">
+                  <svg class="h-5 w-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+                  </svg>
+                </div>
+                <div>
+                  <div class="text-sm text-muted-foreground">Location</div>
+                  <div class="text-foreground">
+                    {t('contact.info.address')}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+  // Contact form handling
+  document.addEventListener('DOMContentLoaded', () => {
+    const form = document.getElementById('contact-form') as HTMLFormElement;
+    const submitBtn = document.getElementById('submit-btn') as HTMLButtonElement;
+    const submitText = document.getElementById('submit-text') as HTMLSpanElement;
+    const submitSpinner = document.getElementById('submit-spinner') as HTMLElement;
+    const formMessage = document.getElementById('form-message') as HTMLDivElement;
+
+    if (form) {
+      form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        
+        // Show loading state
+        submitBtn.disabled = true;
+        submitText.textContent = 'Sending...';
+        submitSpinner.classList.remove('hidden');
+        
+        // Simulate form submission (replace with actual form handling)
+        try {
+          await new Promise(resolve => setTimeout(resolve, 2000));
+          
+          // Show success message
+          formMessage.className = 'mt-4 p-4 rounded-lg bg-green-50 border border-green-200 text-green-800';
+          formMessage.textContent = 'Message sent successfully! We\'ll get back to you soon.';
+          formMessage.classList.remove('hidden');
+          
+          // Reset form
+          form.reset();
+          
+        } catch (error) {
+          // Show error message
+          formMessage.className = 'mt-4 p-4 rounded-lg bg-red-50 border border-red-200 text-red-800';
+          formMessage.textContent = 'Failed to send message. Please try again.';
+          formMessage.classList.remove('hidden');
+        } finally {
+          // Reset button state
+          submitBtn.disabled = false;
+          submitText.textContent = 'Send Message';
+          submitSpinner.classList.add('hidden');
+        }
+      });
+    }
+  });
+</script> 

src/components/Footer.astro

@@ -0,0 +1,153 @@
+---
+import { NAVIGATION } from '../site.config';
+import { t } from '../utils/i18n';
+---
+
+<footer class="bg-secondary-900 text-secondary-100 pt-16 pb-8">
+  <div class="container-custom">
+    <!-- Main footer content -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
+      <!-- Company info -->
+      <div class="lg:col-span-2">
+        <!-- Logo -->
+        <div class="flex items-center space-x-2 mb-4">
+          <div class="h-8 w-8 flex items-center justify-center">
+            <img 
+              src="/images/TIBER365.png" 
+              alt="Tiber365 Logo" 
+              class="h-6 w-6 object-contain"
+            />
+          </div>
+          <span class="font-display font-bold text-xl text-white">Tiber365</span>
+        </div>
+        
+        <!-- Description -->
+        <p class="text-secondary-300 mb-6 max-w-md leading-relaxed">
+          {t('footer.description')}
+        </p>
+        
+        <!-- Contact info -->
+        <div class="space-y-2">
+          <div class="flex items-center text-secondary-300">
+            <svg class="h-5 w-5 mr-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+            </svg>
+            {t('contact.info.email')}
+          </div>
+          <div class="flex items-center text-secondary-300">
+            <svg class="h-5 w-5 mr-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
+            </svg>
+            {t('contact.info.phone')}
+          </div>
+          <div class="flex items-center text-secondary-300">
+            <svg class="h-5 w-5 mr-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+            </svg>
+            {t('contact.info.address')}
+          </div>
+        </div>
+      </div>
+      
+      <!-- Quick Links -->
+      <div>
+        <h3 class="font-semibold text-white mb-4">Quick Links</h3>
+        <ul class="space-y-2">
+          {NAVIGATION.filter(item => item.type === 'internal').map((item) => (
+            <li>
+              <a 
+                href={item.href} 
+                class="text-secondary-300 hover:text-primary transition-colors"
+              >
+                {t(item.label)}
+              </a>
+            </li>
+          ))}
+          <li>
+            <a 
+              href="/contact" 
+              class="text-secondary-300 hover:text-primary transition-colors"
+            >
+              {t('footer.links.contact')}
+            </a>
+          </li>
+        </ul>
+      </div>
+      
+      <!-- External Links -->
+      <div>
+        <h3 class="font-semibold text-white mb-4">Resources</h3>
+        <ul class="space-y-2">
+          {NAVIGATION.filter(item => item.type === 'external').map((item) => (
+            <li>
+              <a 
+                href={item.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-secondary-300 hover:text-primary transition-colors inline-flex items-center"
+              >
+                {t(item.label)}
+                <svg class="h-3 w-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+                </svg>
+              </a>
+            </li>
+          ))}
+          <li>
+            <a 
+              href="/privacy" 
+              class="text-secondary-300 hover:text-primary transition-colors"
+            >
+              {t('footer.links.privacy')}
+            </a>
+          </li>
+          <li>
+            <a 
+              href="/terms" 
+              class="text-secondary-300 hover:text-primary transition-colors"
+            >
+              {t('footer.links.terms')}
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    
+    <!-- Footer bottom -->
+    <div class="border-t border-secondary-800 pt-8">
+      <div class="flex flex-col md:flex-row justify-between items-center">
+        <!-- Copyright -->
+        <p class="text-secondary-400 text-sm">
+          {t('footer.copyright')}
+        </p>
+        
+        <!-- Social links placeholder -->
+        <div class="flex items-center space-x-4 mt-4 md:mt-0">
+          <a 
+            href="https://blog.tiber365.it" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            class="text-secondary-400 hover:text-primary transition-colors"
+            aria-label="Blog"
+          >
+            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
+            </svg>
+          </a>
+          <a 
+            href="https://support.tiber365.it" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            class="text-secondary-400 hover:text-primary transition-colors"
+            aria-label="Support Portal"
+          >
+            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer> 

src/components/Header.astro

@@ -0,0 +1,119 @@
+---
+import { NAVIGATION } from '../site.config';
+import ThemeToggle from './ThemeToggle.astro';
+import LanguageSwitcher from './LanguageSwitcher.astro';
+import { t } from '../utils/i18n';
+---
+
+<header class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+  <nav class="container-custom">
+    <div class="flex h-16 items-center justify-between">
+      <!-- Logo -->
+      <div class="flex items-center">
+        <a href="/" class="flex items-center space-x-2">
+          <div class="h-8 w-8 flex items-center justify-center">
+            <img 
+              src="/images/TIBER365.png" 
+              alt="Tiber365 Logo" 
+              class="h-6 w-6 object-contain"
+            />
+          </div>
+          <span class="font-display font-bold text-xl text-foreground">Tiber365</span>
+        </a>
+      </div>
+
+      <!-- Desktop Navigation -->
+      <div class="hidden md:flex items-center space-x-6">
+        {NAVIGATION.map((item) => (
+          <a
+            href={item.href}
+            target={item.type === 'external' ? '_blank' : undefined}
+            rel={item.type === 'external' ? 'noopener noreferrer' : undefined}
+            class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors relative group"
+          >
+            {t(item.label)}
+            {item.type === 'external' && (
+              <svg class="inline h-3 w-3 ml-1 opacity-70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+              </svg>
+            )}
+            <span class="absolute inset-x-0 -bottom-1 h-0.5 bg-primary scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
+          </a>
+        ))}
+      </div>
+
+      <!-- Theme Toggle & Language Switcher -->
+      <div class="flex items-center space-x-4">
+        <LanguageSwitcher />
+        <ThemeToggle />
+        
+        <!-- Mobile Menu Button -->
+        <button
+          id="mobile-menu-button"
+          class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent focus:outline-none focus:ring-2 focus:ring-primary"
+          aria-expanded="false"
+          aria-label="Toggle mobile menu"
+        >
+          <svg id="mobile-menu-icon" class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+          </svg>
+          <svg id="mobile-close-icon" class="h-6 w-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Mobile Navigation -->
+    <div id="mobile-menu" class="md:hidden hidden border-t border-border">
+      <div class="px-2 pt-2 pb-3 space-y-1">
+        {NAVIGATION.map((item) => (
+          <a
+            href={item.href}
+            target={item.type === 'external' ? '_blank' : undefined}
+            rel={item.type === 'external' ? 'noopener noreferrer' : undefined}
+            class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
+          >
+            {t(item.label)}
+            {item.type === 'external' && (
+              <svg class="inline h-4 w-4 ml-1 opacity-70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+              </svg>
+            )}
+          </a>
+        ))}
+      </div>
+    </div>
+  </nav>
+</header>
+
+<script>
+  // Mobile menu functionality
+  document.addEventListener('DOMContentLoaded', () => {
+    const mobileMenuButton = document.getElementById('mobile-menu-button');
+    const mobileMenu = document.getElementById('mobile-menu');
+    const menuIcon = document.getElementById('mobile-menu-icon');
+    const closeIcon = document.getElementById('mobile-close-icon');
+
+    if (mobileMenuButton && mobileMenu && menuIcon && closeIcon) {
+      mobileMenuButton.addEventListener('click', () => {
+        const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
+        
+        mobileMenuButton.setAttribute('aria-expanded', (!isExpanded).toString());
+        mobileMenu.classList.toggle('hidden');
+        menuIcon.classList.toggle('hidden');
+        closeIcon.classList.toggle('hidden');
+      });
+
+      // Close mobile menu when clicking outside
+      document.addEventListener('click', (event) => {
+        if (!mobileMenuButton.contains(event.target as Node) && !mobileMenu.contains(event.target as Node)) {
+          mobileMenuButton.setAttribute('aria-expanded', 'false');
+          mobileMenu.classList.add('hidden');
+          menuIcon.classList.remove('hidden');
+          closeIcon.classList.add('hidden');
+        }
+      });
+    }
+  });
+</script> 

src/components/Hero.astro

@@ -0,0 +1,102 @@
+---
+import { t, getCurrentLocale } from '../utils/i18n';
+
+const currentLocale = getCurrentLocale();
+console.log('Hero component locale:', currentLocale);
+---
+
+<section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-background via-background to-muted">
+  <!-- Background decoration -->
+  <div class="absolute inset-0 overflow-hidden">
+    <div class="absolute -top-40 -right-32 w-80 h-80 rounded-full bg-primary/5 blur-3xl"></div>
+    <div class="absolute -bottom-40 -left-32 w-96 h-96 rounded-full bg-secondary/5 blur-3xl"></div>
+    <div class="absolute top-20 left-1/4 w-32 h-32 rounded-full bg-primary/10 blur-2xl animate-bounce-subtle"></div>
+  </div>
+
+  <!-- Grid overlay -->
+  <div class="absolute inset-0 bg-grid-pattern opacity-5"></div>
+
+  <div class="container-custom relative z-10">
+    <div class="text-center max-w-4xl mx-auto">
+      <!-- Main headline -->
+      <h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-display font-bold text-foreground mb-6 animate-on-scroll">
+        <span class="bg-gradient-to-r from-primary via-primary to-secondary bg-clip-text text-transparent">
+          {t('hero.title', currentLocale)}
+        </span>
+      </h1>
+
+      <!-- Subtitle -->
+      <p class="text-lg sm:text-xl lg:text-2xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed animate-on-scroll" style="animation-delay: 0.2s">
+        {t('hero.subtitle', currentLocale)}
+      </p>
+
+      <!-- CTA Buttons -->
+      <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12 animate-on-scroll" style="animation-delay: 0.4s">
+        <a 
+          href="/contact" 
+          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 group"
+        >
+          {t('hero.cta.primary', currentLocale)}
+          <svg class="inline 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>
+        <a 
+          href="/services" 
+          class="btn-outline px-8 py-4 text-lg font-semibold rounded-xl transition-all duration-300 hover:scale-105"
+        >
+          {t('hero.cta.secondary', currentLocale)}
+        </a>
+      </div>
+
+      <!-- Trust indicators -->
+      <div class="flex flex-col items-center animate-on-scroll" style="animation-delay: 0.6s">
+        <p class="text-sm text-muted-foreground mb-4">{t('hero.trusted', currentLocale)}</p>
+        
+        <!-- Service icons -->
+        <div class="flex items-center justify-center space-x-8 opacity-60 mb-12">
+          <!-- Microsoft 365 -->
+          <div class="text-2xl sm:text-3xl" title="Microsoft 365">
+            🏢
+          </div>
+          <!-- Networking -->
+          <div class="text-2xl sm:text-3xl" title="Networking">
+            🌐
+          </div>
+          <!-- Web Hosting -->
+          <div class="text-2xl sm:text-3xl" title="Web Hosting">
+            🚀
+          </div>
+          <!-- Automation -->
+          <div class="text-2xl sm:text-3xl" title="Automation">
+            ⚙️
+          </div>
+          <!-- Custom Solutions -->
+          <div class="text-2xl sm:text-3xl" title="Custom Solutions">
+            🛠️
+          </div>
+        </div>
+
+        <!-- Scroll indicator -->
+        <div class="animate-bounce text-muted-foreground hover:text-foreground transition-colors">
+          <button 
+            onclick="document.getElementById('services').scrollIntoView({behavior: 'smooth'})"
+            class="p-2"
+            aria-label="Scroll to services"
+          >
+            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .bg-grid-pattern {
+    background-image: radial-gradient(circle, rgba(var(--color-foreground) / 0.1) 1px, transparent 1px);
+    background-size: 30px 30px;
+  }
+</style> 

src/components/LanguageSwitcher.astro

@@ -0,0 +1,141 @@
+---
+import { LANGUAGES } from '../site.config';
+import { t, getCurrentLocale } from '../utils/i18n';
+
+// Get the current locale on the server side
+const currentLocale = getCurrentLocale();
+console.log('Server-side current locale:', currentLocale);
+---
+
+<div class="relative inline-block text-left">
+  <button
+    id="language-toggle"
+    class="inline-flex items-center justify-center p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent focus:outline-none focus:ring-2 focus:ring-primary"
+    aria-expanded="false"
+    aria-haspopup="true"
+    aria-label={t('nav.language')}
+    title={t('nav.language')}
+  >
+    <!-- Globe icon -->
+    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
+    </svg>
+    <!-- Current language indicator -->
+    <span id="current-lang" class="ml-1 text-sm font-medium" data-current-lang={currentLocale}>
+      {currentLocale.toUpperCase()}
+    </span>
+    <!-- Chevron down -->
+    <svg id="language-chevron" class="h-4 w-4 ml-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+    </svg>
+  </button>
+
+  <!-- Dropdown menu -->
+  <div 
+    id="language-dropdown"
+    class="hidden absolute right-0 mt-2 w-40 origin-top-right rounded-md bg-background border border-border shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-50"
+    role="menu"
+    aria-orientation="vertical"
+    aria-labelledby="language-toggle"
+  >
+    <div class="py-1" role="none">
+      {Object.entries(LANGUAGES).map(([code, name]) => (
+        <button
+          type="button"
+          class:list={[
+            "language-option w-full text-left block px-4 py-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground transition-colors",
+            { "bg-accent text-accent-foreground": code === currentLocale }
+          ]}
+          role="menuitem"
+          data-lang={code}
+        >
+          <div class="flex items-center">
+            <span class="text-base mr-2">
+              {code === 'en' ? '🇬🇧' : code === 'nl' ? '🇳🇱' : '🇮🇹'}
+            </span>
+            {name}
+          </div>
+        </button>
+      ))}
+    </div>
+  </div>
+</div>
+
+<script>
+  import { setCurrentLocale, getCurrentLocale } from '../utils/i18n';
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const languageToggle = document.getElementById('language-toggle');
+    const languageDropdown = document.getElementById('language-dropdown');
+    const languageChevron = document.getElementById('language-chevron');
+    const currentLangSpan = document.getElementById('current-lang');
+    const languageOptions = document.querySelectorAll('.language-option');
+
+    if (!languageToggle || !languageDropdown || !languageChevron || !currentLangSpan) return;
+
+    // Update current language display
+    const currentLocale = getCurrentLocale();
+    console.log('Client-side current locale:', currentLocale);
+    currentLangSpan.textContent = currentLocale.toUpperCase();
+    currentLangSpan.setAttribute('data-current-lang', currentLocale);
+
+    // Update active state in dropdown
+    languageOptions.forEach((option) => {
+      const optionLang = option.getAttribute('data-lang');
+      if (optionLang === currentLocale) {
+        option.classList.add('bg-accent', 'text-accent-foreground');
+      } else {
+        option.classList.remove('bg-accent', 'text-accent-foreground');
+      }
+    });
+
+    // Toggle dropdown
+    languageToggle.addEventListener('click', (event) => {
+      event.stopPropagation();
+      const isExpanded = languageToggle.getAttribute('aria-expanded') === 'true';
+      
+      languageToggle.setAttribute('aria-expanded', (!isExpanded).toString());
+      languageDropdown.classList.toggle('hidden');
+      languageChevron.classList.toggle('rotate-180');
+    });
+
+    // Handle language selection
+    languageOptions.forEach((option) => {
+      option.addEventListener('click', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        
+        const selectedLang = option.getAttribute('data-lang');
+        const currentLang = currentLangSpan.getAttribute('data-current-lang');
+        
+        if (selectedLang && selectedLang !== currentLang) {
+          console.log('Switching language from', currentLang, 'to', selectedLang);
+          setCurrentLocale(selectedLang as 'en' | 'nl' | 'it');
+        }
+        
+        // Close dropdown
+        languageToggle.setAttribute('aria-expanded', 'false');
+        languageDropdown.classList.add('hidden');
+        languageChevron.classList.remove('rotate-180');
+      });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', (event) => {
+      if (!languageToggle.contains(event.target as Node) && !languageDropdown.contains(event.target as Node)) {
+        languageToggle.setAttribute('aria-expanded', 'false');
+        languageDropdown.classList.add('hidden');
+        languageChevron.classList.remove('rotate-180');
+      }
+    });
+
+    // Close dropdown when pressing Escape
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        languageToggle.setAttribute('aria-expanded', 'false');
+        languageDropdown.classList.add('hidden');
+        languageChevron.classList.remove('rotate-180');
+      }
+    });
+  });
+</script> 

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> 

src/components/Testimonials.astro

@@ -0,0 +1,79 @@
+---
+import { TESTIMONIALS } from '../site.config';
+import { t } from '../utils/i18n';
+---
+
+<section class="py-20 bg-background">
+  <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('testimonials.title')}
+      </h2>
+      <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
+        {t('testimonials.subtitle')}
+      </p>
+    </div>
+
+    <!-- Testimonials grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      {TESTIMONIALS.map((testimonial, index) => (
+        <div 
+          class="card p-6 hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll"
+          style={`animation-delay: ${index * 0.1}s`}
+        >
+          <!-- Star rating -->
+          <div class="flex items-center mb-4">
+            {Array.from({ length: testimonial.rating }, (_, i) => (
+              <svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
+                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
+              </svg>
+            ))}
+          </div>
+
+          <!-- Testimonial content -->
+          <blockquote class="text-muted-foreground mb-6 leading-relaxed italic">
+            "{t(testimonial.contentKey)}"
+          </blockquote>
+
+          <!-- Customer info -->
+          <div class="flex items-center">
+            <!-- Avatar placeholder -->
+            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
+              <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+              </svg>
+            </div>
+            
+            <div>
+              <div class="font-semibold text-foreground">
+                {t(testimonial.nameKey)}
+              </div>
+              <div class="text-sm text-muted-foreground">
+                {t(testimonial.companyKey)}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+
+    <!-- Additional social proof -->
+    <div class="mt-16 text-center animate-on-scroll">
+      <div class="grid grid-cols-1 sm:grid-cols-3 gap-8 max-w-3xl mx-auto">
+        <div class="text-center">
+          <div class="text-3xl font-bold text-primary mb-2">5+</div>
+          <div class="text-sm text-muted-foreground">{t('about.experience')}</div>
+        </div>
+        <div class="text-center">
+          <div class="text-3xl font-bold text-primary mb-2">100+</div>
+          <div class="text-sm text-muted-foreground">{t('about.clients')}</div>
+        </div>
+        <div class="text-center">
+          <div class="text-3xl font-bold text-primary mb-2">200+</div>
+          <div class="text-sm text-muted-foreground">{t('about.projects')}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section> 

src/components/ThemeToggle.astro

@@ -0,0 +1,79 @@
+---
+import { t } from '../utils/i18n';
+---
+
+<button
+  id="theme-toggle"
+  class="inline-flex items-center justify-center p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent focus:outline-none focus:ring-2 focus:ring-primary"
+  aria-label={t('nav.theme.toggle')}
+  title={t('nav.theme.toggle')}
+>
+  <!-- Sun icon (light mode) -->
+  <svg
+    id="theme-toggle-light-icon"
+    class="h-5 w-5"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+      clip-rule="evenodd"
+    />
+  </svg>
+  
+  <!-- Moon icon (dark mode) -->
+  <svg
+    id="theme-toggle-dark-icon"
+    class="h-5 w-5 hidden"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
+    />
+  </svg>
+</button>
+
+<script>
+  import { toggleTheme, getThemePreference } from '../utils/theme';
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const themeToggle = document.getElementById('theme-toggle');
+    const lightIcon = document.getElementById('theme-toggle-light-icon');
+    const darkIcon = document.getElementById('theme-toggle-dark-icon');
+
+    if (!themeToggle || !lightIcon || !darkIcon) return;
+
+    // Update icons based on current theme
+    function updateIcons() {
+      const currentTheme = getThemePreference();
+      if (currentTheme === 'dark') {
+        lightIcon.classList.add('hidden');
+        darkIcon.classList.remove('hidden');
+      } else {
+        lightIcon.classList.remove('hidden');
+        darkIcon.classList.add('hidden');
+      }
+    }
+
+    // Initialize icons
+    updateIcons();
+
+    // Handle toggle click
+    themeToggle.addEventListener('click', () => {
+      toggleTheme();
+      updateIcons();
+    });
+
+    // Listen for theme changes (from other sources)
+    const observer = new MutationObserver(() => {
+      updateIcons();
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme']
+    });
+  });
+</script> 

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference path="../.astro/types.d.ts" />

src/layouts/BaseLayout.astro

@@ -0,0 +1,160 @@
+---
+import { SITE } from '../site.config';
+import { getCurrentLocale } from '../utils/i18n';
+import '../styles/global.css';
+
+export interface Props {
+  title?: string;
+  description?: string;
+  image?: string;
+  lang?: string;
+  keywords?: string;
+}
+
+const {
+  title = SITE.title,
+  description = SITE.description,
+  image = SITE.ogImage,
+  lang = getCurrentLocale(),
+  keywords = ''
+} = Astro.props;
+
+// Safe URL creation with fallbacks
+let canonicalURL;
+let ogImageURL;
+let twitterImageURL;
+
+try {
+  const siteURL = Astro.site || new URL('http://localhost:4321');
+  canonicalURL = new URL(Astro.url.pathname, siteURL);
+  ogImageURL = new URL(image, siteURL);
+  twitterImageURL = new URL(image, siteURL);
+} catch (error) {
+  // Fallback URLs if there's an issue
+  const fallbackSite = 'https://tiber365.it';
+  canonicalURL = new URL(Astro.url?.pathname || '/', fallbackSite);
+  ogImageURL = new URL(image, fallbackSite);
+  twitterImageURL = new URL(image, fallbackSite);
+}
+
+const fullTitle = title === SITE.title ? title : `${title} | ${SITE.title}`;
+---
+
+<!doctype html>
+<html lang={lang} class="scroll-smooth">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content={description} />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="generator" content={Astro.generator} />
+    
+    {keywords && <meta name="keywords" content={keywords} />}
+    
+    <!-- Canonical URL -->
+    <link rel="canonical" href={canonicalURL} />
+    
+    <!-- Primary Meta Tags -->
+    <title>{fullTitle}</title>
+    <meta name="title" content={fullTitle} />
+    <meta name="description" content={description} />
+    <meta name="author" content={SITE.author} />
+    
+    <!-- Prevent automatic language redirects -->
+    <meta name="google" content="notranslate" />
+    <meta http-equiv="Content-Language" content={lang} />
+    
+    <!-- Theme Color -->
+    <meta name="theme-color" content="#ffffff" />
+    <meta name="msapplication-TileColor" content="#3b82f6" />
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={canonicalURL} />
+    <meta property="og:title" content={fullTitle} />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content={ogImageURL} />
+    <meta property="og:site_name" content={SITE.title} />
+    <meta property="og:locale" content={lang === 'en' ? 'en_US' : lang === 'nl' ? 'nl_NL' : 'it_IT'} />
+    
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content={canonicalURL} />
+    <meta property="twitter:title" content={fullTitle} />
+    <meta property="twitter:description" content={description} />
+    <meta property="twitter:image" content={twitterImageURL} />
+    
+    <!-- Favicons -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="manifest" href="/manifest.json" />
+    
+    <!-- Preconnect to external domains -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    
+    <!-- Content Security Policy -->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self'; frame-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self';" />
+    
+    <!-- Structured Data -->
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Organization",
+        "name": "Tiber365",
+        "url": "https://tiber365.it",
+        "logo": "https://tiber365.it/images/logo.png",
+        "description": "Professional IT services for freelancers and small businesses. Microsoft 365 support, networking solutions, web hosting, and custom IT projects.",
+        "contactPoint": {
+          "@type": "ContactPoint",
+          "telephone": "+39-123-456-7890",
+          "contactType": "customer service",
+          "email": "info@tiber365.it"
+        },
+        "sameAs": [
+          "https://blog.tiber365.it",
+          "https://support.tiber365.it"
+        ],
+        "address": {
+          "@type": "PostalAddress",
+          "addressCountry": "IT"
+        }
+      }
+    </script>
+    
+    <!-- Initialize theme before page load -->
+    <script is:inline>
+      (function() {
+        function getThemePreference() {
+          if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+            return localStorage.getItem('theme');
+          }
+          return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        
+        function reflectPreference(theme) {
+          document.documentElement.setAttribute('data-theme', theme);
+          const themeColorMeta = document.querySelector('meta[name="theme-color"]');
+          if (themeColorMeta) {
+            themeColorMeta.setAttribute('content', theme === 'dark' ? '#0f172a' : '#ffffff');
+          }
+        }
+        
+        const theme = getThemePreference();
+        reflectPreference(theme);
+      })();
+    </script>
+  </head>
+  <body class="min-h-screen bg-background text-foreground">
+    <slot />
+    
+    <!-- Initialize animations -->
+    <script>
+      import { initScrollAnimations } from '../utils/animations';
+      import { initTheme } from '../utils/theme';
+      
+      document.addEventListener('DOMContentLoaded', () => {
+        initTheme();
+        initScrollAnimations();
+      });
+    </script>
+  </body>
+</html> 

src/locales/en.json

@@ -0,0 +1,165 @@
+{
+  "meta": {
+    "title": "Tiber365 - Professional IT Services",
+    "description": "Professional IT services for freelancers and small businesses. Microsoft 365 support, networking solutions, web hosting, and custom IT projects.",
+    "keywords": "IT services, Microsoft 365, networking, web hosting, Ubiquiti, Unifi, small business"
+  },
+  "nav": {
+    "home": "Home",
+    "services": "Services",
+    "about": "About",
+    "blog": "Blog",
+    "support": "Support",
+    "contact": "Contact",
+    "language": "Language",
+    "theme": {
+      "light": "Light mode",
+      "dark": "Dark mode",
+      "toggle": "Toggle theme"
+    }
+  },
+  "hero": {
+    "title": "Professional IT Services for Your Business",
+    "subtitle": "Empowering freelancers and small businesses with reliable Microsoft 365 support, networking solutions, and custom IT projects.",
+    "cta": {
+      "primary": "Get Started",
+      "secondary": "Learn More"
+    },
+    "trusted": "Trusted by 100+ businesses"
+  },
+  "services": {
+    "title": "Our Services",
+    "subtitle": "Comprehensive IT solutions tailored to your business needs",
+    "viewAll": "View All Services",
+    "microsoft365": {
+      "title": "Microsoft 365 Support",
+      "description": "Complete Microsoft 365 management including email migrations, Office apps, Teams, SharePoint, and admin center configuration.",
+      "features": {
+        "migrations": "Email migrations & setup",
+        "apps": "Office applications support",
+        "teams": "Microsoft Teams deployment",
+        "sharepoint": "SharePoint configuration",
+        "admin": "Admin center management"
+      }
+    },
+    "management": {
+      "title": "Full M365 Management",
+      "description": "Comprehensive Microsoft 365 management and automation to keep your business running smoothly.",
+      "features": {
+        "automation": "Workflow automation",
+        "monitoring": "System monitoring",
+        "maintenance": "Regular maintenance",
+        "optimization": "Performance optimization"
+      }
+    },
+    "networking": {
+      "title": "Networking & Infrastructure",
+      "description": "Professional networking solutions using Ubiquiti/Unifi equipment for reliable and secure connectivity.",
+      "features": {
+        "ubiquiti": "Ubiquiti/Unifi solutions",
+        "infrastructure": "Network infrastructure",
+        "security": "Network security",
+        "monitoring": "Network monitoring"
+      }
+    },
+    "hosting": {
+      "title": "Web Hosting & Management",
+      "description": "Reliable web hosting services with complete website management and maintenance.",
+      "features": {
+        "webhosting": "Premium web hosting",
+        "domains": "Domain management",
+        "ssl": "SSL certificates",
+        "backup": "Automated backups"
+      }
+    },
+    "custom": {
+      "title": "Custom IT Projects",
+      "description": "Tailored IT solutions and custom projects designed specifically for your business requirements.",
+      "features": {
+        "consultation": "IT consultation",
+        "development": "Custom development",
+        "integration": "System integration",
+        "support": "Ongoing support"
+      }
+    }
+  },
+  "about": {
+    "title": "About Tiber365",
+    "subtitle": "Your trusted IT partner",
+    "description": "We specialize in providing comprehensive IT services to freelancers and small businesses. Our expertise in Microsoft 365, networking, and custom solutions helps businesses thrive in the digital age.",
+    "mission": "Our mission is to simplify IT for small businesses and freelancers, allowing them to focus on what they do best while we handle their technology needs.",
+    "experience": "Years of Experience",
+    "clients": "Happy Clients",
+    "projects": "Completed Projects"
+  },
+  "testimonials": {
+    "title": "What Our Clients Say",
+    "subtitle": "Don't just take our word for it",
+    "1": {
+      "name": "Marco Rossi",
+      "company": "Creative Agency",
+      "content": "Tiber365 transformed our IT infrastructure. Their Microsoft 365 setup was flawless and their ongoing support is exceptional."
+    },
+    "2": {
+      "name": "Sarah Johnson",
+      "company": "Consulting Firm",
+      "content": "Professional, reliable, and always available when we need them. The networking solution they implemented works perfectly."
+    },
+    "3": {
+      "name": "Andreas van Berg",
+      "company": "Design Studio",
+      "content": "Outstanding service and expertise. They handle all our IT needs so we can focus on our creative work."
+    }
+  },
+  "contact": {
+    "title": "Get In Touch",
+    "subtitle": "Ready to improve your IT infrastructure?",
+    "form": {
+      "name": "Name",
+      "email": "Email",
+      "company": "Company",
+      "service": "Service Needed",
+      "message": "Message",
+      "send": "Send Message",
+      "sending": "Sending...",
+      "success": "Message sent successfully!",
+      "error": "Failed to send message. Please try again."
+    },
+    "info": {
+      "email": "info@tiber365.it",
+      "phone": "+39 123 456 7890",
+      "address": "Italy"
+    }
+  },
+  "cta": {
+    "title": "Ready to Get Started?",
+    "subtitle": "Let's discuss how we can help improve your IT infrastructure",
+    "button": "Book Free Consultation"
+  },
+  "footer": {
+    "description": "Professional IT services for freelancers and small businesses.",
+    "links": {
+      "services": "Services",
+      "about": "About",
+      "contact": "Contact",
+      "privacy": "Privacy Policy",
+      "terms": "Terms of Service"
+    },
+    "copyright": "© 2024 Tiber365. All rights reserved."
+  },
+  "privacy": {
+    "title": "Privacy Policy",
+    "description": "Learn how we protect your personal data",
+    "lastUpdated": "Last updated"
+  },
+  "terms": {
+    "title": "Terms of Service",
+    "description": "Our service agreement and legal terms",
+    "lastUpdated": "Last updated"
+  },
+  "404": {
+    "title": "Page Not Found",
+    "description": "The page you're looking for doesn't exist.",
+    "button": "Go Home"
+  }
+} 

src/locales/it.json

@@ -0,0 +1,165 @@
+{
+  "meta": {
+    "title": "Tiber365 - Servizi IT Professionali",
+    "description": "Servizi IT professionali per freelancer e piccole imprese. Supporto Microsoft 365, soluzioni di rete, web hosting e progetti IT personalizzati.",
+    "keywords": "servizi IT, Microsoft 365, networking, web hosting, Ubiquiti, Unifi, piccole imprese"
+  },
+  "nav": {
+    "home": "Home",
+    "services": "Servizi",
+    "about": "Chi Siamo",
+    "blog": "Blog",
+    "support": "Supporto",
+    "contact": "Contatti",
+    "language": "Lingua",
+    "theme": {
+      "light": "Modalità chiara",
+      "dark": "Modalità scura",
+      "toggle": "Cambia tema"
+    }
+  },
+  "hero": {
+    "title": "Servizi IT Professionali per la Tua Azienda",
+    "subtitle": "Supportiamo freelancer e piccole imprese con servizi affidabili di Microsoft 365, soluzioni di rete e progetti IT personalizzati.",
+    "cta": {
+      "primary": "Inizia Ora",
+      "secondary": "Scopri di Più"
+    },
+    "trusted": "Scelto da oltre 100 aziende"
+  },
+  "services": {
+    "title": "I Nostri Servizi",
+    "subtitle": "Soluzioni IT complete su misura per le tue esigenze aziendali",
+    "viewAll": "Vedi Tutti i Servizi",
+    "microsoft365": {
+      "title": "Supporto Microsoft 365",
+      "description": "Gestione completa di Microsoft 365 incluse migrazioni email, app Office, Teams, SharePoint e configurazione del centro amministrativo.",
+      "features": {
+        "migrations": "Migrazioni email e configurazione",
+        "apps": "Supporto applicazioni Office",
+        "teams": "Implementazione Microsoft Teams",
+        "sharepoint": "Configurazione SharePoint",
+        "admin": "Gestione centro amministrativo"
+      }
+    },
+    "management": {
+      "title": "Gestione Completa M365",
+      "description": "Gestione e automazione completa di Microsoft 365 per mantenere la tua azienda operativa senza problemi.",
+      "features": {
+        "automation": "Automazione dei flussi di lavoro",
+        "monitoring": "Monitoraggio del sistema",
+        "maintenance": "Manutenzione regolare",
+        "optimization": "Ottimizzazione delle prestazioni"
+      }
+    },
+    "networking": {
+      "title": "Networking e Infrastrutture",
+      "description": "Soluzioni di rete professionali utilizzando apparecchiature Ubiquiti/Unifi per connettività affidabile e sicura.",
+      "features": {
+        "ubiquiti": "Soluzioni Ubiquiti/Unifi",
+        "infrastructure": "Infrastruttura di rete",
+        "security": "Sicurezza di rete",
+        "monitoring": "Monitoraggio di rete"
+      }
+    },
+    "hosting": {
+      "title": "Web Hosting e Gestione",
+      "description": "Servizi di web hosting affidabili con gestione completa del sito web e manutenzione.",
+      "features": {
+        "webhosting": "Web hosting premium",
+        "domains": "Gestione domini",
+        "ssl": "Certificati SSL",
+        "backup": "Backup automatizzati"
+      }
+    },
+    "custom": {
+      "title": "Progetti IT Personalizzati",
+      "description": "Soluzioni IT su misura e progetti personalizzati progettati specificamente per i requisiti della tua azienda.",
+      "features": {
+        "consultation": "Consulenza IT",
+        "development": "Sviluppo personalizzato",
+        "integration": "Integrazione di sistemi",
+        "support": "Supporto continuo"
+      }
+    }
+  },
+  "about": {
+    "title": "Chi è Tiber365",
+    "subtitle": "Il tuo partner IT di fiducia",
+    "description": "Siamo specializzati nel fornire servizi IT completi a freelancer e piccole imprese. La nostra esperienza in Microsoft 365, networking e soluzioni personalizzate aiuta le aziende a prosperare nell'era digitale.",
+    "mission": "La nostra missione è semplificare l'IT per piccole imprese e freelancer, permettendo loro di concentrarsi su ciò che sanno fare meglio mentre noi gestiamo le loro esigenze tecnologiche.",
+    "experience": "Anni di Esperienza",
+    "clients": "Clienti Soddisfatti",
+    "projects": "Progetti Completati"
+  },
+  "testimonials": {
+    "title": "Cosa Dicono i Nostri Clienti",
+    "subtitle": "Non fidarti solo della nostra parola",
+    "1": {
+      "name": "Marco Rossi",
+      "company": "Agenzia Creativa",
+      "content": "Tiber365 ha trasformato la nostra infrastruttura IT. La loro configurazione di Microsoft 365 è stata impeccabile e il loro supporto continuo è eccezionale."
+    },
+    "2": {
+      "name": "Sarah Johnson",
+      "company": "Studio di Consulenza",
+      "content": "Professionali, affidabili e sempre disponibili quando ne abbiamo bisogno. La soluzione di rete che hanno implementato funziona perfettamente."
+    },
+    "3": {
+      "name": "Andreas van Berg",
+      "company": "Studio di Design",
+      "content": "Servizio e competenza eccellenti. Gestiscono tutte le nostre esigenze IT così possiamo concentrarci sul nostro lavoro creativo."
+    }
+  },
+  "contact": {
+    "title": "Contattaci",
+    "subtitle": "Pronto a migliorare la tua infrastruttura IT?",
+    "form": {
+      "name": "Nome",
+      "email": "Email",
+      "company": "Azienda",
+      "service": "Servizio Richiesto",
+      "message": "Messaggio",
+      "send": "Invia Messaggio",
+      "sending": "Invio in corso...",
+      "success": "Messaggio inviato con successo!",
+      "error": "Invio fallito. Riprova."
+    },
+    "info": {
+      "email": "info@tiber365.it",
+      "phone": "+39 123 456 7890",
+      "address": "Italia"
+    }
+  },
+  "cta": {
+    "title": "Pronto per Iniziare?",
+    "subtitle": "Discutiamo di come possiamo aiutare a migliorare la tua infrastruttura IT",
+    "button": "Prenota Consulenza Gratuita"
+  },
+  "footer": {
+    "description": "Servizi IT professionali per freelancer e piccole imprese.",
+    "links": {
+      "services": "Servizi",
+      "about": "Chi Siamo",
+      "contact": "Contatti",
+      "privacy": "Privacy Policy",
+      "terms": "Termini di Servizio"
+    },
+    "copyright": "© 2024 Tiber365. Tutti i diritti riservati."
+  },
+  "privacy": {
+    "title": "Privacy Policy",
+    "description": "Scopri come proteggiamo i tuoi dati personali",
+    "lastUpdated": "Ultimo aggiornamento"
+  },
+  "terms": {
+    "title": "Termini di Servizio",
+    "description": "Il nostro accordo di servizio e termini legali",
+    "lastUpdated": "Ultimo aggiornamento"
+  },
+  "404": {
+    "title": "Pagina Non Trovata",
+    "description": "La pagina che stai cercando non esiste.",
+    "button": "Vai alla Home"
+  }
+} 

src/locales/nl.json

@@ -0,0 +1,165 @@
+{
+  "meta": {
+    "title": "Tiber365 - Professionele IT Diensten",
+    "description": "Professionele IT-diensten voor freelancers en kleine bedrijven. Microsoft 365 ondersteuning, netwerkoplossingen, webhosting en aangepaste IT-projecten.",
+    "keywords": "IT diensten, Microsoft 365, netwerken, webhosting, Ubiquiti, Unifi, klein bedrijf"
+  },
+  "nav": {
+    "home": "Home",
+    "services": "Diensten",
+    "about": "Over Ons",
+    "blog": "Blog",
+    "support": "Ondersteuning",
+    "contact": "Contact",
+    "language": "Taal",
+    "theme": {
+      "light": "Lichte modus",
+      "dark": "Donkere modus",
+      "toggle": "Thema wisselen"
+    }
+  },
+  "hero": {
+    "title": "Professionele IT Diensten voor Uw Bedrijf",
+    "subtitle": "Freelancers en kleine bedrijven ondersteunen met betrouwbare Microsoft 365 ondersteuning, netwerkoplossingen en aangepaste IT-projecten.",
+    "cta": {
+      "primary": "Aan de Slag",
+      "secondary": "Meer Weten"
+    },
+    "trusted": "Vertrouwd door 100+ bedrijven"
+  },
+  "services": {
+    "title": "Onze Diensten",
+    "subtitle": "Uitgebreide IT-oplossingen op maat voor uw bedrijfsbehoeften",
+    "viewAll": "Alle Diensten Bekijken",
+    "microsoft365": {
+      "title": "Microsoft 365 Ondersteuning",
+      "description": "Compleet Microsoft 365 beheer inclusief e-mailmigraties, Office apps, Teams, SharePoint en beheercentrum configuratie.",
+      "features": {
+        "migrations": "E-mailmigraties & installatie",
+        "apps": "Office applicaties ondersteuning",
+        "teams": "Microsoft Teams implementatie",
+        "sharepoint": "SharePoint configuratie",
+        "admin": "Beheercentrum management"
+      }
+    },
+    "management": {
+      "title": "Volledig M365 Beheer",
+      "description": "Uitgebreid Microsoft 365 beheer en automatisering om uw bedrijf soepel te laten draaien.",
+      "features": {
+        "automation": "Workflow automatisering",
+        "monitoring": "Systeembewaking",
+        "maintenance": "Regelmatig onderhoud",
+        "optimization": "Prestatie optimalisatie"
+      }
+    },
+    "networking": {
+      "title": "Netwerken & Infrastructuur",
+      "description": "Professionele netwerkoplossingen met Ubiquiti/Unifi apparatuur voor betrouwbare en veilige connectiviteit.",
+      "features": {
+        "ubiquiti": "Ubiquiti/Unifi oplossingen",
+        "infrastructure": "Netwerkinfrastructuur",
+        "security": "Netwerkbeveiliging",
+        "monitoring": "Netwerkbewaking"
+      }
+    },
+    "hosting": {
+      "title": "Webhosting & Beheer",
+      "description": "Betrouwbare webhostingdiensten met compleet websitebeheer en onderhoud.",
+      "features": {
+        "webhosting": "Premium webhosting",
+        "domains": "Domeinbeheer",
+        "ssl": "SSL certificaten",
+        "backup": "Geautomatiseerde backups"
+      }
+    },
+    "custom": {
+      "title": "Aangepaste IT Projecten",
+      "description": "Op maat gemaakte IT-oplossingen en aangepaste projecten speciaal ontworpen voor uw bedrijfsvereisten.",
+      "features": {
+        "consultation": "IT consultatie",
+        "development": "Aangepaste ontwikkeling",
+        "integration": "Systeemintegratie",
+        "support": "Doorlopende ondersteuning"
+      }
+    }
+  },
+  "about": {
+    "title": "Over Tiber365",
+    "subtitle": "Uw vertrouwde IT partner",
+    "description": "Wij zijn gespecialiseerd in het bieden van uitgebreide IT-diensten aan freelancers en kleine bedrijven. Onze expertise in Microsoft 365, netwerken en aangepaste oplossingen helpt bedrijven bloeien in het digitale tijdperk.",
+    "mission": "Onze missie is om IT te vereenvoudigen voor kleine bedrijven en freelancers, zodat zij zich kunnen concentreren op wat zij het beste doen, terwijl wij hun technologiebehoeften afhandelen.",
+    "experience": "Jaar Ervaring",
+    "clients": "Tevreden Klanten",
+    "projects": "Voltooide Projecten"
+  },
+  "testimonials": {
+    "title": "Wat Onze Klanten Zeggen",
+    "subtitle": "Geloof ons niet alleen op ons woord",
+    "1": {
+      "name": "Marco Rossi",
+      "company": "Creatief Bureau",
+      "content": "Tiber365 heeft onze IT-infrastructuur getransformeerd. Hun Microsoft 365 setup was vlekkeloos en hun doorlopende ondersteuning is uitzonderlijk."
+    },
+    "2": {
+      "name": "Sarah Johnson",
+      "company": "Adviesbureau",
+      "content": "Professioneel, betrouwbaar en altijd beschikbaar wanneer we ze nodig hebben. De netwerkoplossing die ze implementeerden werkt perfect."
+    },
+    "3": {
+      "name": "Andreas van Berg",
+      "company": "Ontwerpstudio",
+      "content": "Uitstekende service en expertise. Zij handelen al onze IT-behoeften af zodat wij ons kunnen concentreren op ons creatieve werk."
+    }
+  },
+  "contact": {
+    "title": "Neem Contact Op",
+    "subtitle": "Klaar om uw IT-infrastructuur te verbeteren?",
+    "form": {
+      "name": "Naam",
+      "email": "E-mail",
+      "company": "Bedrijf",
+      "service": "Benodigde Dienst",
+      "message": "Bericht",
+      "send": "Bericht Versturen",
+      "sending": "Versturen...",
+      "success": "Bericht succesvol verzonden!",
+      "error": "Versturen mislukt. Probeer het opnieuw."
+    },
+    "info": {
+      "email": "info@tiber365.it",
+      "phone": "+39 123 456 7890",
+      "address": "Italië"
+    }
+  },
+  "cta": {
+    "title": "Klaar om te Beginnen?",
+    "subtitle": "Laten we bespreken hoe we uw IT-infrastructuur kunnen verbeteren",
+    "button": "Gratis Consultatie Boeken"
+  },
+  "footer": {
+    "description": "Professionele IT-diensten voor freelancers en kleine bedrijven.",
+    "links": {
+      "services": "Diensten",
+      "about": "Over Ons",
+      "contact": "Contact",
+      "privacy": "Privacybeleid",
+      "terms": "Servicevoorwaarden"
+    },
+    "copyright": "© 2024 Tiber365. Alle rechten voorbehouden."
+  },
+  "privacy": {
+    "title": "Privacybeleid",
+    "description": "Leer hoe wij uw persoonsgegevens beschermen",
+    "lastUpdated": "Laatst bijgewerkt"
+  },
+  "terms": {
+    "title": "Servicevoorwaarden",
+    "description": "Onze serviceovereenkomst en juridische voorwaarden",
+    "lastUpdated": "Laatst bijgewerkt"
+  },
+  "404": {
+    "title": "Pagina Niet Gevonden",
+    "description": "De pagina die u zoekt bestaat niet.",
+    "button": "Ga naar Home"
+  }
+} 

src/pages/404.astro

@@ -0,0 +1,67 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import { t } from '../utils/i18n';
+---
+
+<BaseLayout 
+  title={`${t('404.title')} | ${t('meta.title')}`}
+  description={t('404.description')}
+>
+  <Header />
+  <main>
+    <section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted">
+      <div class="container-custom">
+        <div class="text-center max-w-2xl mx-auto animate-on-scroll">
+          <!-- 404 Visual -->
+          <div class="text-8xl sm:text-9xl font-bold text-primary/20 mb-8">404</div>
+          
+          <!-- Error message -->
+          <h1 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4">
+            {t('404.title')}
+          </h1>
+          
+          <p class="text-lg sm:text-xl text-muted-foreground mb-8">
+            {t('404.description')}
+          </p>
+          
+          <!-- Action buttons -->
+          <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
+            <a 
+              href="/" 
+              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"
+            >
+              <svg class="h-5 w-5 mr-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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+              </svg>
+              {t('404.button')}
+            </a>
+            
+            <a 
+              href="/contact" 
+              class="btn-outline px-8 py-4 text-lg font-semibold rounded-xl transition-all duration-300 hover:scale-105"
+            >
+              Get Help
+            </a>
+          </div>
+          
+          <!-- Helpful links -->
+          <div class="mt-12">
+            <p class="text-muted-foreground mb-4">Or try one of these popular pages:</p>
+            <div class="flex flex-wrap justify-center gap-4">
+              <a href="/services" class="text-primary hover:text-primary/80 transition-colors">Services</a>
+              <span class="text-muted-foreground">•</span>
+              <a href="/about" class="text-primary hover:text-primary/80 transition-colors">About</a>
+              <span class="text-muted-foreground">•</span>
+              <a href="/contact" class="text-primary hover:text-primary/80 transition-colors">Contact</a>
+              <span class="text-muted-foreground">•</span>
+              <a href="https://blog.tiber365.it" target="_blank" rel="noopener noreferrer" class="text-primary hover:text-primary/80 transition-colors">Blog</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <Footer />
+</BaseLayout> 

src/pages/about.astro

@@ -0,0 +1,190 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import CTA from '../components/CTA.astro';
+import { t } from '../utils/i18n';
+---
+
+<BaseLayout 
+  title={`${t('nav.about')} | ${t('meta.title')}`}
+  description="Learn about Tiber365 - your trusted IT partner specializing in Microsoft 365, networking, and comprehensive IT solutions for small businesses."
+>
+  <Header />
+  <main>
+    <!-- About Hero -->
+    <section class="py-20 bg-gradient-to-br from-background via-background to-muted">
+      <div class="container-custom">
+        <div class="text-center max-w-4xl mx-auto animate-on-scroll">
+          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-display font-bold text-foreground mb-6">
+            {t('about.title')}
+          </h1>
+          <p class="text-lg sm:text-xl text-muted-foreground leading-relaxed">
+            {t('about.subtitle')}
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Company Story -->
+    <section class="py-20 bg-background">
+      <div class="container-custom">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <!-- Content -->
+          <div class="animate-on-scroll">
+            <h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-6">
+              Our Story
+            </h2>
+            <p class="text-lg text-muted-foreground mb-6 leading-relaxed">
+              {t('about.description')}
+            </p>
+            <p class="text-lg text-muted-foreground leading-relaxed">
+              {t('about.mission')}
+            </p>
+          </div>
+          
+          <!-- Visual -->
+          <div class="animate-on-scroll" style="animation-delay: 0.2s">
+            <div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5">
+              <div class="text-center">
+                <div class="text-6xl mb-6">🚀</div>
+                <h3 class="text-xl font-semibold text-foreground mb-4">Modern IT Solutions</h3>
+                <p class="text-muted-foreground">
+                  Empowering businesses with cutting-edge technology and reliable support.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Stats -->
+    <section class="py-20 bg-muted/30">
+      <div class="container-custom">
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-8 text-center">
+          <div class="animate-on-scroll">
+            <div class="text-4xl sm:text-5xl font-bold text-primary mb-2">5+</div>
+            <div class="text-muted-foreground">{t('about.experience')}</div>
+          </div>
+          <div class="animate-on-scroll" style="animation-delay: 0.1s">
+            <div class="text-4xl sm:text-5xl font-bold text-primary mb-2">100+</div>
+            <div class="text-muted-foreground">{t('about.clients')}</div>
+          </div>
+          <div class="animate-on-scroll" style="animation-delay: 0.2s">
+            <div class="text-4xl sm:text-5xl font-bold text-primary mb-2">200+</div>
+            <div class="text-muted-foreground">{t('about.projects')}</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Values -->
+    <section class="py-20 bg-background">
+      <div class="container-custom">
+        <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">
+            Our Values
+          </h2>
+          <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
+            The principles that guide everything we do
+          </p>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div class="card p-6 text-center animate-on-scroll">
+            <div class="text-4xl mb-4">🔒</div>
+            <h3 class="text-xl font-semibold text-foreground mb-3">Security First</h3>
+            <p class="text-muted-foreground">
+              We prioritize the security and privacy of your business data above all else.
+            </p>
+          </div>
+          
+          <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.1s">
+            <div class="text-4xl mb-4">🤝</div>
+            <h3 class="text-xl font-semibold text-foreground mb-3">Reliability</h3>
+            <p class="text-muted-foreground">
+              Count on us for consistent, dependable service that keeps your business running.
+            </p>
+          </div>
+          
+          <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.2s">
+            <div class="text-4xl mb-4">💡</div>
+            <h3 class="text-xl font-semibold text-foreground mb-3">Innovation</h3>
+            <p class="text-muted-foreground">
+              We stay ahead of technology trends to bring you the best solutions.
+            </p>
+          </div>
+          
+          <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.3s">
+            <div class="text-4xl mb-4">📞</div>
+            <h3 class="text-xl font-semibold text-foreground mb-3">Support</h3>
+            <p class="text-muted-foreground">
+              Dedicated support when you need it, with real people who understand your business.
+            </p>
+          </div>
+          
+          <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.4s">
+            <div class="text-4xl mb-4">⚡</div>
+            <h3 class="text-xl font-semibold text-foreground mb-3">Efficiency</h3>
+            <p class="text-muted-foreground">
+              Streamlined processes and quick resolutions to minimize downtime.
+            </p>
+          </div>
+          
+          <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.5s">
+            <div class="text-4xl mb-4">🎯</div>
+            <h3 class="text-xl font-semibold text-foreground mb-3">Focus</h3>
+            <p class="text-muted-foreground">
+              Laser-focused on small business needs and cost-effective solutions.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Team Section -->
+    <section class="py-20 bg-muted/30">
+      <div class="container-custom">
+        <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">
+            Our Expertise
+          </h2>
+          <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
+            Specialized knowledge in the technologies that matter to your business
+          </p>
+        </div>
+
+        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
+          <div class="card p-4 text-center animate-on-scroll">
+            <div class="text-3xl mb-2">🏢</div>
+            <div class="text-sm font-medium text-foreground">Microsoft 365</div>
+          </div>
+          <div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.1s">
+            <div class="text-3xl mb-2">☁️</div>
+            <div class="text-sm font-medium text-foreground">Cloud Services</div>
+          </div>
+          <div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.2s">
+            <div class="text-3xl mb-2">🌐</div>
+            <div class="text-sm font-medium text-foreground">Networking</div>
+          </div>
+          <div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.3s">
+            <div class="text-3xl mb-2">🔒</div>
+            <div class="text-sm font-medium text-foreground">Security</div>
+          </div>
+          <div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.4s">
+            <div class="text-3xl mb-2">🚀</div>
+            <div class="text-sm font-medium text-foreground">Web Hosting</div>
+          </div>
+          <div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.5s">
+            <div class="text-3xl mb-2">⚙️</div>
+            <div class="text-sm font-medium text-foreground">Automation</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <CTA />
+  </main>
+  <Footer />
+</BaseLayout> 

src/pages/contact.astro

@@ -0,0 +1,18 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import Header from '../components/Header.astro';
+import ContactForm from '../components/ContactForm.astro';
+import Footer from '../components/Footer.astro';
+import { t } from '../utils/i18n';
+---
+
+<BaseLayout 
+  title={`${t('nav.contact')} | ${t('meta.title')}`}
+  description="Contact Tiber365 for professional IT services. Get in touch for Microsoft 365 support, networking solutions, and custom IT projects."
+>
+  <Header />
+  <main>
+    <ContactForm />
+  </main>
+  <Footer />
+</BaseLayout> 

src/pages/index.astro

@@ -0,0 +1,29 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import Header from '../components/Header.astro';
+import Hero from '../components/Hero.astro';
+import Services from '../components/Services.astro';
+import Testimonials from '../components/Testimonials.astro';
+import CTA from '../components/CTA.astro';
+import Footer from '../components/Footer.astro';
+import { t } from '../utils/i18n';
+
+const pageTitle = t('meta.title');
+const pageDescription = t('meta.description');
+const pageKeywords = t('meta.keywords');
+---
+
+<BaseLayout 
+  title={pageTitle}
+  description={pageDescription}
+  keywords={pageKeywords}
+>
+  <Header />
+  <main>
+    <Hero />
+    <Services />
+    <Testimonials />
+    <CTA />
+  </main>
+  <Footer />
+</BaseLayout> 

src/pages/privacy.astro

@@ -0,0 +1,154 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import { t } from '../utils/i18n';
+---
+
+<BaseLayout 
+  title={`${t('footer.links.privacy')} | ${t('meta.title')}`}
+  description="Privacy Policy for Tiber365 - Learn how we collect, use, and protect your personal data in compliance with GDPR and Dutch privacy laws."
+>
+  <Header />
+  <main class="py-16 bg-background">
+    <div class="container-custom">
+      <article class="prose prose-lg dark:prose-invert max-w-4xl mx-auto">
+        <h1 class="text-4xl font-display font-bold mb-8">{t('footer.links.privacy')}</h1>
+        
+        <div class="mb-8 text-sm text-muted-foreground">
+          Last updated: {new Date().toLocaleDateString()}
+        </div>
+
+        <section class="mb-12">
+          <h2>1. Introduction</h2>
+          <p>
+            Tiber365 ("we", "our", or "us") is committed to protecting your privacy and personal data. This Privacy Policy explains how we collect, use, and protect your personal information in accordance with the General Data Protection Regulation (GDPR) and Dutch privacy laws.
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>2. Data Controller</h2>
+          <p>
+            Tiber365<br />
+            Italy<br />
+            Email: info@tiber365.it
+          </p>
+          <p>
+            For privacy-related inquiries, you can contact our Data Protection Officer at privacy@tiber365.it.
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>3. Personal Data We Collect</h2>
+          <p>We collect and process the following types of personal data:</p>
+          <ul>
+            <li>Contact information (name, email, phone number, company name)</li>
+            <li>Technical data (IP address, browser type, device information)</li>
+            <li>Usage data (how you interact with our website and services)</li>
+            <li>Communication data (messages you send us through our contact form)</li>
+            <li>Service data (information related to the IT services we provide)</li>
+          </ul>
+        </section>
+
+        <section class="mb-12">
+          <h2>4. Legal Basis for Processing</h2>
+          <p>We process your personal data based on the following legal grounds:</p>
+          <ul>
+            <li>Contract performance (when providing our IT services)</li>
+            <li>Legal obligations (compliance with Dutch and EU laws)</li>
+            <li>Legitimate interests (improving our services and communication)</li>
+            <li>Consent (for marketing communications and cookies)</li>
+          </ul>
+        </section>
+
+        <section class="mb-12">
+          <h2>5. How We Use Your Data</h2>
+          <p>We use your personal data for:</p>
+          <ul>
+            <li>Providing and managing our IT services</li>
+            <li>Communicating with you about our services</li>
+            <li>Improving our website and services</li>
+            <li>Complying with legal obligations</li>
+            <li>Sending you marketing communications (with your consent)</li>
+          </ul>
+        </section>
+
+        <section class="mb-12">
+          <h2>6. Data Sharing and Transfers</h2>
+          <p>
+            We may share your data with:
+          </p>
+          <ul>
+            <li>Service providers (hosting, email, analytics)</li>
+            <li>Professional advisers (lawyers, accountants)</li>
+            <li>Authorities (when legally required)</li>
+          </ul>
+          <p>
+            Data transfers outside the EU/EEA are protected by appropriate safeguards (Standard Contractual Clauses).
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>7. Data Retention</h2>
+          <p>
+            We retain your personal data only for as long as necessary to fulfill the purposes for which it was collected, including legal requirements and accounting purposes.
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>8. Your Rights</h2>
+          <p>Under GDPR and Dutch privacy laws, you have the right to:</p>
+          <ul>
+            <li>Access your personal data</li>
+            <li>Correct inaccurate data</li>
+            <li>Request deletion of your data</li>
+            <li>Object to processing</li>
+            <li>Data portability</li>
+            <li>Withdraw consent</li>
+          </ul>
+          <p>
+            To exercise these rights, contact us at privacy@tiber365.it. We'll respond within 30 days.
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>9. Cookies and Tracking</h2>
+          <p>
+            We use cookies and similar technologies to improve your browsing experience. You can manage cookie preferences through your browser settings.
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>10. Security</h2>
+          <p>
+            We implement appropriate technical and organizational measures to protect your personal data against unauthorized access, alteration, disclosure, or destruction.
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>11. Changes to This Policy</h2>
+          <p>
+            We may update this Privacy Policy periodically. We will notify you of any material changes by posting the new policy on this page.
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>12. Complaints</h2>
+          <p>
+            If you have concerns about how we process your personal data, please contact us first. You also have the right to file a complaint with the Dutch Data Protection Authority (Autoriteit Persoonsgegevens).
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>13. Contact Us</h2>
+          <p>
+            For any privacy-related questions or requests, please contact us at:<br />
+            Email: privacy@tiber365.it<br />
+            Phone: +39 123 456 7890
+          </p>
+        </section>
+      </article>
+    </div>
+  </main>
+  <Footer />
+</BaseLayout> 

src/pages/services.astro

@@ -0,0 +1,126 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import CTA from '../components/CTA.astro';
+import { SERVICES } from '../site.config';
+import { t } from '../utils/i18n';
+---
+
+<BaseLayout 
+  title={`${t('nav.services')} | ${t('meta.title')}`}
+  description="Comprehensive IT services for small businesses: Microsoft 365 support, networking solutions, web hosting, and custom IT projects."
+>
+  <Header />
+  <main>
+    <!-- Services Hero -->
+    <section class="py-20 bg-gradient-to-br from-background via-background to-muted">
+      <div class="container-custom">
+        <div class="text-center max-w-4xl mx-auto animate-on-scroll">
+          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-display font-bold text-foreground mb-6">
+            {t('services.title')}
+          </h1>
+          <p class="text-lg sm:text-xl text-muted-foreground leading-relaxed">
+            {t('services.subtitle')}
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Detailed Services -->
+    <section class="py-20 bg-background">
+      <div class="container-custom">
+        <div class="space-y-20">
+          {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' : ''}`}>
+              <!-- Service content -->
+              <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">
+                  {t(service.descriptionKey)}
+                </p>
+                
+                <!-- Features list -->
+                <ul class="space-y-3 mb-8">
+                  {service.features.map((feature) => (
+                    <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>
+                    </li>
+                  ))}
+                </ul>
+                
+                <!-- CTA button -->
+                <a 
+                  href="/contact" 
+                  class="btn-primary px-6 py-3 rounded-lg inline-flex items-center group"
+                >
+                  Get Started
+                  <svg class="h-4 w-4 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="M9 5l7 7-7 7"/>
+                  </svg>
+                </a>
+              </div>
+              
+              <!-- Service visual -->
+              <div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5">
+                <div class="text-center">
+                  <div class="text-8xl mb-6 opacity-20">{service.icon}</div>
+                  <div class="space-y-4">
+                    {service.features.slice(0, 3).map((feature) => (
+                      <div class="bg-background/50 rounded-lg p-3 text-sm text-muted-foreground">
+                        {t(feature)}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    <!-- Why Choose Us -->
+    <section class="py-20 bg-muted/30">
+      <div class="container-custom">
+        <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">
+            Why Choose Tiber365?
+          </h2>
+          <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
+            We're dedicated to providing reliable, professional IT services that help your business thrive.
+          </p>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div class="card p-6 text-center animate-on-scroll">
+            <div class="text-4xl mb-4">⚡</div>
+            <h3 class="text-xl font-semibold text-foreground mb-3">Fast Response</h3>
+            <p class="text-muted-foreground">Quick turnaround times and 24/7 support when you need it most.</p>
+          </div>
+          
+          <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.1s">
+            <div class="text-4xl mb-4">🎯</div>
+            <h3 class="text-xl font-semibold text-foreground mb-3">Expert Knowledge</h3>
+            <p class="text-muted-foreground">Years of experience with Microsoft 365, networking, and modern IT solutions.</p>
+          </div>
+          
+          <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.2s">
+            <div class="text-4xl mb-4">💼</div>
+            <h3 class="text-xl font-semibold text-foreground mb-3">Business Focus</h3>
+            <p class="text-muted-foreground">We understand small business needs and provide cost-effective solutions.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <CTA />
+  </main>
+  <Footer />
+</BaseLayout> 

src/pages/terms.astro

@@ -0,0 +1,165 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import { t } from '../utils/i18n';
+---
+
+<BaseLayout 
+  title={`${t('footer.links.terms')} | ${t('meta.title')}`}
+  description="Terms of Service for Tiber365 - Understanding our service agreement and legal terms in compliance with European and Dutch laws."
+>
+  <Header />
+  <main class="py-16 bg-background">
+    <div class="container-custom">
+      <article class="prose prose-lg dark:prose-invert max-w-4xl mx-auto">
+        <h1 class="text-4xl font-display font-bold mb-8">{t('footer.links.terms')}</h1>
+        
+        <div class="mb-8 text-sm text-muted-foreground">
+          Last updated: {new Date().toLocaleDateString()}
+        </div>
+
+        <section class="mb-12">
+          <h2>1. Introduction</h2>
+          <p>
+            These Terms of Service ("Terms") govern your use of Tiber365's website and services. By accessing our website or using our services, you agree to be bound by these Terms. If you disagree with any part of these terms, please do not use our services.
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>2. Company Information</h2>
+          <p>
+            Tiber365<br />
+            Registered in Italy<br />
+            Email: info@tiber365.it<br />
+            Phone: +39 123 456 7890
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>3. Services</h2>
+          <p>
+            We provide IT services including:
+          </p>
+          <ul>
+            <li>Microsoft 365 support and management</li>
+            <li>Networking and infrastructure solutions</li>
+            <li>Web hosting and management</li>
+            <li>Custom IT projects</li>
+          </ul>
+          <p>
+            Service specifics will be detailed in individual service agreements.
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>4. Service Agreement</h2>
+          <p>
+            Upon engaging our services:
+          </p>
+          <ul>
+            <li>We will provide services as specified in the service agreement</li>
+            <li>You agree to provide necessary information and access for service delivery</li>
+            <li>You will maintain the confidentiality of any access credentials provided</li>
+            <li>You will use the services in compliance with applicable laws</li>
+          </ul>
+        </section>
+
+        <section class="mb-12">
+          <h2>5. Intellectual Property</h2>
+          <p>
+            All content on our website and services, including but not limited to text, graphics, logos, and software, is our property or that of our licensors and is protected by intellectual property laws.
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>6. User Obligations</h2>
+          <p>You agree to:</p>
+          <ul>
+            <li>Provide accurate and complete information</li>
+            <li>Maintain the security of your account</li>
+            <li>Not use our services for illegal purposes</li>
+            <li>Not interfere with the proper functioning of our services</li>
+            <li>Comply with all applicable laws and regulations</li>
+          </ul>
+        </section>
+
+        <section class="mb-12">
+          <h2>7. Payment Terms</h2>
+          <p>
+            Payment terms, including fees, billing cycles, and payment methods, will be specified in your service agreement. Late payments may result in service suspension.
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>8. Liability</h2>
+          <p>
+            To the extent permitted by law:
+          </p>
+          <ul>
+            <li>We provide services "as is" without warranties</li>
+            <li>We are not liable for indirect, consequential, or incidental damages</li>
+            <li>Our liability is limited to the amount paid for services in the previous 12 months</li>
+          </ul>
+        </section>
+
+        <section class="mb-12">
+          <h2>9. Data Protection</h2>
+          <p>
+            We process personal data in accordance with our Privacy Policy and applicable data protection laws (GDPR and Dutch privacy laws).
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>10. Service Availability</h2>
+          <p>
+            While we strive for high availability, we do not guarantee uninterrupted service. We will provide notice of scheduled maintenance when possible.
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>11. Termination</h2>
+          <p>
+            Either party may terminate services according to the terms in the service agreement. Upon termination:
+          </p>
+          <ul>
+            <li>All access to services will cease</li>
+            <li>You remain liable for any outstanding payments</li>
+            <li>We will assist with data transition as specified in the service agreement</li>
+          </ul>
+        </section>
+
+        <section class="mb-12">
+          <h2>12. Changes to Terms</h2>
+          <p>
+            We may modify these Terms at any time. Continued use of our services after changes constitutes acceptance of the modified Terms.
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>13. Governing Law</h2>
+          <p>
+            These Terms are governed by Dutch law. Any disputes will be subject to the exclusive jurisdiction of the Dutch courts.
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>14. Severability</h2>
+          <p>
+            If any provision of these Terms is found to be unenforceable, the remaining provisions will remain in effect.
+          </p>
+        </section>
+
+        <section class="mb-12">
+          <h2>15. Contact</h2>
+          <p>
+            For questions about these Terms, please contact us at:<br />
+            Email: legal@tiber365.it<br />
+            Phone: +39 123 456 7890
+          </p>
+        </section>
+      </article>
+    </div>
+  </main>
+  <Footer />
+</BaseLayout> 

src/site.config.ts

@@ -0,0 +1,131 @@
+export const SITE = {
+  title: 'Tiber365',
+  description: 'Professional IT services for freelancers and small businesses. Microsoft 365 support, networking solutions, web hosting, and custom IT projects.',
+  defaultLanguage: 'en',
+  author: 'Tiber365',
+  ogImage: '/images/og-image.jpg',
+  twitterImage: '/images/twitter-image.jpg',
+  url: 'https://tiber365.it'
+} as const;
+
+export const LANGUAGES = {
+  en: 'English',
+  nl: 'Nederlands',
+  it: 'Italiano'
+} as const;
+
+export const NAVIGATION = [
+  {
+    label: 'nav.home',
+    href: '/',
+    type: 'internal'
+  },
+  {
+    label: 'nav.services',
+    href: '/services',
+    type: 'internal'
+  },
+  {
+    label: 'nav.about',
+    href: '/about',
+    type: 'internal'
+  },
+  {
+    label: 'nav.blog',
+    href: 'https://blog.tiber365.it',
+    type: 'external'
+  },
+  {
+    label: 'nav.support',
+    href: 'https://support.tiber365.it',
+    type: 'external'
+  }
+] as const;
+
+export const SERVICES = [
+  {
+    id: 'microsoft365',
+    icon: '🏢',
+    titleKey: 'services.microsoft365.title',
+    descriptionKey: 'services.microsoft365.description',
+    features: [
+      'services.microsoft365.features.migrations',
+      'services.microsoft365.features.apps',
+      'services.microsoft365.features.teams',
+      'services.microsoft365.features.sharepoint',
+      'services.microsoft365.features.admin'
+    ]
+  },
+  {
+    id: 'management',
+    icon: '⚙️',
+    titleKey: 'services.management.title',
+    descriptionKey: 'services.management.description',
+    features: [
+      'services.management.features.automation',
+      'services.management.features.monitoring',
+      'services.management.features.maintenance',
+      'services.management.features.optimization'
+    ]
+  },
+  {
+    id: 'networking',
+    icon: '🌐',
+    titleKey: 'services.networking.title',
+    descriptionKey: 'services.networking.description',
+    features: [
+      'services.networking.features.ubiquiti',
+      'services.networking.features.infrastructure',
+      'services.networking.features.security',
+      'services.networking.features.monitoring'
+    ]
+  },
+  {
+    id: 'hosting',
+    icon: '🚀',
+    titleKey: 'services.hosting.title',
+    descriptionKey: 'services.hosting.description',
+    features: [
+      'services.hosting.features.webhosting',
+      'services.hosting.features.domains',
+      'services.hosting.features.ssl',
+      'services.hosting.features.backup'
+    ]
+  },
+  {
+    id: 'custom',
+    icon: '🛠️',
+    titleKey: 'services.custom.title',
+    descriptionKey: 'services.custom.description',
+    features: [
+      'services.custom.features.consultation',
+      'services.custom.features.development',
+      'services.custom.features.integration',
+      'services.custom.features.support'
+    ]
+  }
+] as const;
+
+export const TESTIMONIALS = [
+  {
+    id: 1,
+    nameKey: 'testimonials.1.name',
+    companyKey: 'testimonials.1.company',
+    contentKey: 'testimonials.1.content',
+    rating: 5
+  },
+  {
+    id: 2,
+    nameKey: 'testimonials.2.name',
+    companyKey: 'testimonials.2.company',
+    contentKey: 'testimonials.2.content',
+    rating: 5
+  },
+  {
+    id: 3,
+    nameKey: 'testimonials.3.name',
+    companyKey: 'testimonials.3.company',
+    contentKey: 'testimonials.3.content',
+    rating: 5
+  }
+] as const; 

src/styles/global.css

@@ -0,0 +1,168 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --color-primary: 59 130 246;
+  --color-primary-foreground: 255 255 255;
+  --color-secondary: 100 116 139;
+  --color-secondary-foreground: 255 255 255;
+  --color-background: 255 255 255;
+  --color-foreground: 15 23 42;
+  --color-muted: 248 250 252;
+  --color-muted-foreground: 100 116 139;
+  --color-border: 226 232 240;
+  --color-accent: 241 245 249;
+  --color-accent-foreground: 15 23 42;
+}
+
+[data-theme="dark"] {
+  --color-primary: 96 165 250;
+  --color-primary-foreground: 15 23 42;
+  --color-secondary: 71 85 105;
+  --color-secondary-foreground: 248 250 252;
+  --color-background: 15 23 42;
+  --color-foreground: 248 250 252;
+  --color-muted: 30 41 59;
+  --color-muted-foreground: 148 163 184;
+  --color-border: 51 65 85;
+  --color-accent: 30 41 59;
+  --color-accent-foreground: 248 250 252;
+}
+
+@layer base {
+  body {
+    background-color: rgb(var(--color-background));
+    color: rgb(var(--color-foreground));
+    @apply font-sans;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-display;
+  }
+  
+  /* Smooth scrolling */
+  html {
+    scroll-behavior: smooth;
+  }
+  
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    background-color: rgb(var(--color-muted));
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background-color: rgb(var(--color-secondary));
+    border-radius: 9999px;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(var(--color-secondary) / 0.8);
+  }
+}
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50;
+  }
+  
+  .btn-primary {
+    @apply btn;
+    background-color: rgb(var(--color-primary));
+    color: rgb(var(--color-primary-foreground));
+  }
+  
+  .btn-primary:hover {
+    background-color: rgb(var(--color-primary) / 0.9);
+  }
+  
+  .btn-secondary {
+    @apply btn;
+    background-color: rgb(var(--color-secondary));
+    color: rgb(var(--color-secondary-foreground));
+  }
+  
+  .btn-secondary:hover {
+    background-color: rgb(var(--color-secondary) / 0.8);
+  }
+  
+  .btn-outline {
+    @apply btn;
+    border: 1px solid rgb(var(--color-border));
+    background-color: rgb(var(--color-background));
+    color: rgb(var(--color-foreground));
+  }
+  
+  .btn-outline:hover {
+    background-color: rgb(var(--color-accent));
+    color: rgb(var(--color-accent-foreground));
+  }
+  
+  .card {
+    @apply rounded-xl shadow-sm;
+    border: 1px solid rgb(var(--color-border));
+    background-color: rgb(var(--color-background));
+  }
+  
+  .container-custom {
+    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+  }
+
+  /* Theme-based colors */
+  .bg-background {
+    background-color: rgb(var(--color-background));
+  }
+  
+  .text-foreground {
+    color: rgb(var(--color-foreground));
+  }
+  
+  .text-muted-foreground {
+    color: rgb(var(--color-muted-foreground));
+  }
+  
+  .bg-muted {
+    background-color: rgb(var(--color-muted));
+  }
+  
+  .bg-primary {
+    background-color: rgb(var(--color-primary));
+  }
+  
+  .text-primary {
+    color: rgb(var(--color-primary));
+  }
+  
+  .text-primary-foreground {
+    color: rgb(var(--color-primary-foreground));
+  }
+  
+  .bg-accent {
+    background-color: rgb(var(--color-accent));
+  }
+  
+  .border-border {
+    border-color: rgb(var(--color-border));
+  }
+}
+
+/* Animations */
+@layer utilities {
+  .animate-on-scroll {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.6s ease-out;
+  }
+  
+  .animate-on-scroll.in-view {
+    opacity: 1;
+    transform: translateY(0);
+  }
+} 

src/utils/animations.ts

@@ -0,0 +1,80 @@
+export function initScrollAnimations() {
+  if (typeof window === 'undefined') return;
+
+  const observerOptions = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px'
+  };
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('in-view');
+      }
+    });
+  }, observerOptions);
+
+  // Observe all elements with the animate-on-scroll class
+  const animatedElements = document.querySelectorAll('.animate-on-scroll');
+  animatedElements.forEach((el) => observer.observe(el));
+
+  return observer;
+}
+
+export function fadeIn(element: HTMLElement, duration = 300) {
+  element.style.opacity = '0';
+  element.style.display = 'block';
+
+  let start: number | null = null;
+  
+  function animate(timestamp: number) {
+    if (!start) start = timestamp;
+    const progress = timestamp - start;
+
+    element.style.opacity = String(Math.min(progress / duration, 1));
+
+    if (progress < duration) {
+      requestAnimationFrame(animate);
+    }
+  }
+
+  requestAnimationFrame(animate);
+}
+
+export function slideUp(element: HTMLElement, duration = 300) {
+  element.style.transform = 'translateY(20px)';
+  element.style.opacity = '0';
+  element.style.display = 'block';
+
+  let start: number | null = null;
+  
+  function animate(timestamp: number) {
+    if (!start) start = timestamp;
+    const progress = timestamp - start;
+    const progressRatio = Math.min(progress / duration, 1);
+
+    element.style.transform = `translateY(${20 * (1 - progressRatio)}px)`;
+    element.style.opacity = String(progressRatio);
+
+    if (progress < duration) {
+      requestAnimationFrame(animate);
+    } else {
+      element.style.transform = '';
+      element.style.opacity = '';
+    }
+  }
+
+  requestAnimationFrame(animate);
+}
+
+// Smooth scroll to element
+export function scrollToElement(elementId: string, offset = 80) {
+  const element = document.getElementById(elementId);
+  if (element) {
+    const targetPosition = element.offsetTop - offset;
+    window.scrollTo({
+      top: targetPosition,
+      behavior: 'smooth'
+    });
+  }
+} 

src/utils/i18n.ts

@@ -0,0 +1,531 @@
+// Simple translations object - we'll populate this directly to avoid import issues
+const translations = {
+  en: {
+    "meta": {
+      "title": "Tiber365 - Professional IT Services",
+      "description": "Professional IT services for freelancers and small businesses. Microsoft 365 support, networking solutions, web hosting, and custom IT projects.",
+      "keywords": "IT services, Microsoft 365, networking, web hosting, automation, small business IT"
+    },
+    "nav": {
+      "home": "Home",
+      "services": "Services", 
+      "about": "About",
+      "contact": "Contact",
+      "blog": "Blog",
+      "support": "Support",
+      "language": "Language",
+      "theme": {
+        "toggle": "Toggle theme"
+      }
+    },
+    "hero": {
+      "title": "Professional IT Services for Your Business",
+      "subtitle": "Empowering freelancers and small businesses with reliable Microsoft 365 support, networking solutions, web hosting, and custom IT projects.",
+      "trusted": "Trusted by businesses across Italy",
+      "cta": {
+        "primary": "Get Started Today",
+        "secondary": "View Our Services"
+      }
+    },
+    "services": {
+      "title": "Our Services",
+      "subtitle": "Comprehensive IT solutions tailored for small businesses and freelancers",
+      "viewAll": "View All Services",
+      "microsoft365": {
+        "title": "Microsoft 365 Support",
+        "description": "Complete Microsoft 365 setup, migration, and ongoing support for your business.",
+        "features": {
+          "migrations": "Email & data migrations",
+          "apps": "Office apps configuration",
+          "teams": "Microsoft Teams setup",
+          "sharepoint": "SharePoint collaboration",
+          "admin": "Admin portal management"
+        }
+      },
+      "management": {
+        "title": "Full M365 Management",
+        "description": "Let us handle your entire Microsoft 365 environment with proactive management.",
+        "features": {
+          "automation": "Automated workflows",
+          "monitoring": "24/7 system monitoring",
+          "maintenance": "Regular maintenance",
+          "optimization": "Performance optimization"
+        }
+      },
+      "networking": {
+        "title": "Networking & Infrastructure",
+        "description": "Professional networking solutions using Ubiquiti and UniFi equipment.",
+        "features": {
+          "ubiquiti": "Ubiquiti/UniFi specialists",
+          "infrastructure": "Network infrastructure",
+          "security": "Network security",
+          "monitoring": "Traffic monitoring"
+        }
+      },
+      "hosting": {
+        "title": "Web Hosting & Management",
+        "description": "Reliable web hosting with full management and maintenance included.",
+        "features": {
+          "webhosting": "Reliable web hosting",
+          "domains": "Domain management",
+          "ssl": "SSL certificates",
+          "backup": "Automated backups"
+        }
+      },
+      "custom": {
+        "title": "Custom IT Projects",
+        "description": "Tailored IT solutions designed specifically for your business needs.",
+        "features": {
+          "consultation": "IT consultation",
+          "development": "Custom development",
+          "integration": "System integration",
+          "support": "Ongoing support"
+        }
+      }
+    },
+    "testimonials": {
+      "title": "What Our Clients Say",
+      "subtitle": "Don't just take our word for it - see what our satisfied clients have to say",
+      "1": {
+        "name": "Marco Rossi",
+        "company": "Freelance Designer",
+        "content": "Tiber365 transformed our Microsoft 365 setup. Professional service and excellent support!"
+      },
+      "2": {
+        "name": "Sofia Bianchi",
+        "company": "Small Business Owner",
+        "content": "Their networking solutions are top-notch. Our office runs smoothly thanks to their expertise."
+      },
+      "3": {
+        "name": "Giuseppe Verdi",
+        "company": "Consultant",
+        "content": "Reliable web hosting and great customer service. Highly recommend Tiber365!"
+      }
+    },
+    "about": {
+      "title": "About Us",
+      "subtitle": "Your trusted IT partner",
+      "description": "We specialize in providing comprehensive IT services to freelancers and small businesses.",
+      "mission": "Our mission is to make technology work for you, not against you.",
+      "experience": "Years of Experience",
+      "clients": "Happy Clients", 
+      "projects": "Projects Completed"
+    },
+    "contact": {
+      "title": "Get In Touch",
+      "subtitle": "Ready to transform your IT infrastructure? Let's talk!",
+      "info": {
+        "email": "info@tiber365.it",
+        "phone": "+39 123 456 7890",
+        "address": "Rome, Italy"
+      },
+      "form": {
+        "name": "Name",
+        "email": "Email",
+        "company": "Company",
+        "service": "Service",
+        "message": "Message",
+        "send": "Send Message"
+      }
+    },
+    "cta": {
+      "title": "Ready to Get Started?",
+      "subtitle": "Let's discuss how we can help transform your IT infrastructure.",
+      "button": "Contact Us Today"
+    },
+    "footer": {
+      "description": "Professional IT services for freelancers and small businesses.",
+      "copyright": "© 2024 Tiber365. All rights reserved.",
+      "links": {
+        "contact": "Contact",
+        "privacy": "Privacy Policy", 
+        "terms": "Terms of Service"
+      }
+    },
+    "404": {
+      "title": "Page Not Found",
+      "description": "Sorry, we couldn't find the page you're looking for.",
+      "button": "Go back home"
+    }
+  },
+  nl: {
+    "meta": {
+      "title": "Tiber365 - Professionele IT Services",
+      "description": "Professionele IT-diensten voor freelancers en kleine bedrijven. Microsoft 365 ondersteuning, netwerkoplossingen, webhosting en aangepaste IT-projecten.",
+      "keywords": "IT diensten, Microsoft 365, netwerken, webhosting, automatisering, kleine bedrijven IT"
+    },
+    "nav": {
+      "home": "Home",
+      "services": "Diensten",
+      "about": "Over Ons", 
+      "contact": "Contact",
+      "blog": "Blog",
+      "support": "Ondersteuning",
+      "language": "Taal",
+      "theme": {
+        "toggle": "Thema wisselen"
+      }
+    },
+    "hero": {
+      "title": "Professionele IT Services voor Uw Bedrijf",
+      "subtitle": "Ondersteuning van freelancers en kleine bedrijven met betrouwbare Microsoft 365 ondersteuning, netwerkoplossingen, webhosting en aangepaste IT-projecten.",
+      "trusted": "Vertrouwd door bedrijven in heel Italië",
+      "cta": {
+        "primary": "Begin Vandaag",
+        "secondary": "Bekijk Onze Diensten"
+      }
+    },
+    "services": {
+      "title": "Onze Diensten",
+      "subtitle": "Uitgebreide IT-oplossingen op maat voor kleine bedrijven en freelancers",
+      "viewAll": "Alle Diensten Bekijken",
+      "microsoft365": {
+        "title": "Microsoft 365 Ondersteuning",
+        "description": "Complete Microsoft 365 installatie, migratie en doorlopende ondersteuning.",
+        "features": {
+          "migrations": "E-mail & data migraties",
+          "apps": "Office apps configuratie",
+          "teams": "Microsoft Teams installatie",
+          "sharepoint": "SharePoint samenwerking",
+          "admin": "Beheerportaal management"
+        }
+      },
+      "management": {
+        "title": "Volledig M365 Beheer",
+        "description": "Laat ons uw volledige Microsoft 365 omgeving beheren met proactief management.",
+        "features": {
+          "automation": "Geautomatiseerde workflows",
+          "monitoring": "24/7 systeembewaking",
+          "maintenance": "Regelmatig onderhoud",
+          "optimization": "Prestatie optimalisatie"
+        }
+      },
+      "networking": {
+        "title": "Netwerken & Infrastructuur",
+        "description": "Professionele netwerkoplossingen met Ubiquiti en UniFi apparatuur.",
+        "features": {
+          "ubiquiti": "Ubiquiti/UniFi specialisten",
+          "infrastructure": "Netwerkinfrastructuur",
+          "security": "Netwerkbeveiliging",
+          "monitoring": "Verkeer monitoring"
+        }
+      },
+      "hosting": {
+        "title": "Webhosting & Beheer",
+        "description": "Betrouwbare webhosting met volledig beheer en onderhoud inbegrepen.",
+        "features": {
+          "webhosting": "Betrouwbare webhosting",
+          "domains": "Domeinbeheer",
+          "ssl": "SSL certificaten",
+          "backup": "Geautomatiseerde backups"
+        }
+      },
+      "custom": {
+        "title": "Aangepaste IT Projecten",
+        "description": "Op maat gemaakte IT-oplossingen speciaal ontworpen voor uw bedrijfsbehoeften.",
+        "features": {
+          "consultation": "IT consultatie",
+          "development": "Aangepaste ontwikkeling",
+          "integration": "Systeemintegratie",
+          "support": "Doorlopende ondersteuning"
+        }
+      }
+    },
+    "testimonials": {
+      "title": "Wat Onze Klanten Zeggen",
+      "subtitle": "Geloof ons niet zomaar - zie wat onze tevreden klanten te zeggen hebben",
+      "1": {
+        "name": "Marco Rossi",
+        "company": "Freelance Designer",
+        "content": "Tiber365 heeft onze Microsoft 365 installatie getransformeerd. Professionele service en uitstekende ondersteuning!"
+      },
+      "2": {
+        "name": "Sofia Bianchi",
+        "company": "Kleine Bedrijfseigenaar",
+        "content": "Hun netwerkoplossingen zijn eersteklas. Ons kantoor draait soepel dankzij hun expertise."
+      },
+      "3": {
+        "name": "Giuseppe Verdi",
+        "company": "Consultant",
+        "content": "Betrouwbare webhosting en geweldige klantenservice. Beveel Tiber365 ten zeerste aan!"
+      }
+    },
+    "about": {
+      "title": "Over Ons",
+      "subtitle": "Uw vertrouwde IT-partner",
+      "description": "Wij zijn gespecialiseerd in het leveren van uitgebreide IT-diensten aan freelancers en kleine bedrijven.",
+      "mission": "Onze missie is om technologie voor u te laten werken, niet tegen u.",
+      "experience": "Jaren Ervaring",
+      "clients": "Tevreden Klanten",
+      "projects": "Voltooide Projecten"
+    },
+    "contact": {
+      "title": "Neem Contact Op",
+      "subtitle": "Klaar om uw IT-infrastructuur te transformeren? Laten we praten!",
+      "info": {
+        "email": "info@tiber365.it",
+        "phone": "+39 123 456 7890", 
+        "address": "Rome, Italië"
+      },
+      "form": {
+        "name": "Naam",
+        "email": "E-mail",
+        "company": "Bedrijf",
+        "service": "Dienst",
+        "message": "Bericht",
+        "send": "Bericht Versturen"
+      }
+    },
+    "cta": {
+      "title": "Klaar om te Beginnen?",
+      "subtitle": "Laten we bespreken hoe wij uw IT-infrastructuur kunnen transformeren.",
+      "button": "Neem Vandaag Contact Op"
+    },
+    "footer": {
+      "description": "Professionele IT-diensten voor freelancers en kleine bedrijven.",
+      "copyright": "© 2024 Tiber365. Alle rechten voorbehouden.",
+      "links": {
+        "contact": "Contact",
+        "privacy": "Privacybeleid",
+        "terms": "Servicevoorwaarden"
+      }
+    },
+    "404": {
+      "title": "Pagina Niet Gevonden",
+      "description": "Sorry, we konden de pagina die u zoekt niet vinden.",
+      "button": "Ga terug naar home"
+    }
+  },
+  it: {
+    "meta": {
+      "title": "Tiber365 - Servizi IT Professionali",
+      "description": "Servizi IT professionali per freelancer e piccole imprese. Supporto Microsoft 365, soluzioni di rete, hosting web e progetti IT personalizzati.",
+      "keywords": "servizi IT, Microsoft 365, networking, web hosting, automazione, IT piccole imprese"
+    },
+    "nav": {
+      "home": "Home",
+      "services": "Servizi",
+      "about": "Chi Siamo",
+      "contact": "Contatti",
+      "blog": "Blog", 
+      "support": "Supporto",
+      "language": "Lingua",
+      "theme": {
+        "toggle": "Cambia tema"
+      }
+    },
+    "hero": {
+      "title": "Servizi IT Professionali per la Tua Azienda",
+      "subtitle": "Supportiamo freelancer e piccole imprese con supporto Microsoft 365 affidabile, soluzioni di rete, hosting web e progetti IT personalizzati.",
+      "trusted": "Fidato dalle aziende in tutta Italia",
+      "cta": {
+        "primary": "Inizia Oggi",
+        "secondary": "Vedi i Nostri Servizi"
+      }
+    },
+    "services": {
+      "title": "I Nostri Servizi",
+      "subtitle": "Soluzioni IT complete su misura per piccole imprese e freelancer",
+      "viewAll": "Vedi Tutti i Servizi",
+      "microsoft365": {
+        "title": "Supporto Microsoft 365",
+        "description": "Installazione completa, migrazione e supporto continuo per Microsoft 365.",
+        "features": {
+          "migrations": "Migrazioni email e dati",
+          "apps": "Configurazione app Office",
+          "teams": "Configurazione Microsoft Teams",
+          "sharepoint": "Collaborazione SharePoint",
+          "admin": "Gestione portale amministratore"
+        }
+      },
+      "management": {
+        "title": "Gestione Completa M365",
+        "description": "Lascia che ci occupiamo dell'intero ambiente Microsoft 365 con gestione proattiva.",
+        "features": {
+          "automation": "Flussi di lavoro automatizzati",
+          "monitoring": "Monitoraggio sistema 24/7",
+          "maintenance": "Manutenzione regolare",
+          "optimization": "Ottimizzazione prestazioni"
+        }
+      },
+      "networking": {
+        "title": "Networking e Infrastruttura",
+        "description": "Soluzioni di rete professionali con apparecchiature Ubiquiti e UniFi.",
+        "features": {
+          "ubiquiti": "Specialisti Ubiquiti/UniFi",
+          "infrastructure": "Infrastruttura di rete",
+          "security": "Sicurezza di rete",
+          "monitoring": "Monitoraggio traffico"
+        }
+      },
+      "hosting": {
+        "title": "Web Hosting e Gestione",
+        "description": "Hosting web affidabile con gestione completa e manutenzione inclusa.",
+        "features": {
+          "webhosting": "Hosting web affidabile",
+          "domains": "Gestione domini",
+          "ssl": "Certificati SSL",
+          "backup": "Backup automatizzati"
+        }
+      },
+      "custom": {
+        "title": "Progetti IT Personalizzati",
+        "description": "Soluzioni IT su misura progettate specificamente per le tue esigenze aziendali.",
+        "features": {
+          "consultation": "Consulenza IT",
+          "development": "Sviluppo personalizzato",
+          "integration": "Integrazione sistemi",
+          "support": "Supporto continuo"
+        }
+      }
+    },
+    "testimonials": {
+      "title": "Cosa Dicono i Nostri Clienti",
+      "subtitle": "Non prendere solo la nostra parola - vedi cosa hanno da dire i nostri clienti soddisfatti",
+      "1": {
+        "name": "Marco Rossi",
+        "company": "Designer Freelance",
+        "content": "Tiber365 ha trasformato la nostra configurazione Microsoft 365. Servizio professionale e supporto eccellente!"
+      },
+      "2": {
+        "name": "Sofia Bianchi",
+        "company": "Proprietaria Piccola Impresa",
+        "content": "Le loro soluzioni di rete sono di prim'ordine. Il nostro ufficio funziona perfettamente grazie alla loro competenza."
+      },
+      "3": {
+        "name": "Giuseppe Verdi",
+        "company": "Consulente",
+        "content": "Hosting web affidabile e ottimo servizio clienti. Raccomando vivamente Tiber365!"
+      }
+    },
+    "about": {
+      "title": "Chi Siamo",
+      "subtitle": "Il tuo partner IT di fiducia",
+      "description": "Siamo specializzati nel fornire servizi IT completi a freelancer e piccole imprese.",
+      "mission": "La nostra missione è far sì che la tecnologia lavori per te, non contro di te.",
+      "experience": "Anni di Esperienza",
+      "clients": "Clienti Soddisfatti",
+      "projects": "Progetti Completati"
+    },
+    "contact": {
+      "title": "Contattaci",
+      "subtitle": "Pronto a trasformare la tua infrastruttura IT? Parliamone!",
+      "info": {
+        "email": "info@tiber365.it",
+        "phone": "+39 123 456 7890",
+        "address": "Roma, Italia"
+      },
+      "form": {
+        "name": "Nome",
+        "email": "Email",
+        "company": "Azienda",
+        "service": "Servizio",
+        "message": "Messaggio",
+        "send": "Invia Messaggio"
+      }
+    },
+    "cta": {
+      "title": "Pronto per Iniziare?",
+      "subtitle": "Discutiamo di come possiamo aiutare a trasformare la tua infrastruttura IT.",
+      "button": "Contattaci Oggi"
+    },
+    "footer": {
+      "description": "Servizi IT professionali per freelancer e piccole imprese.",
+      "copyright": "© 2024 Tiber365. Tutti i diritti riservati.",
+      "links": {
+        "contact": "Contatti",
+        "privacy": "Privacy Policy",
+        "terms": "Termini di Servizio"
+      }
+    },
+    "404": {
+      "title": "Pagina Non Trovata",
+      "description": "Spiacenti, non siamo riusciti a trovare la pagina che stai cercando.",
+      "button": "Torna alla home"
+    }
+  }
+} as const;
+
+type TranslationKey = string;
+type Locale = 'en' | 'nl' | 'it';
+
+export const SUPPORTED_LOCALES: Locale[] = ['en', 'nl', 'it'];
+
+// Function to get current locale that works on both client and server
+function getCurrentLocaleFromStorage(): Locale {
+  if (typeof window !== 'undefined') {
+    try {
+      const savedLocale = localStorage.getItem('tiber365-locale') as Locale;
+      if (savedLocale && SUPPORTED_LOCALES.includes(savedLocale)) {
+        return savedLocale;
+      }
+    } catch (error) {
+      console.warn('Error accessing localStorage:', error);
+    }
+  }
+  return 'en';
+}
+
+// Function to get translations for a specific locale
+function getTranslations(locale: Locale): any {
+  if (!translations[locale]) {
+    console.warn(`No translations found for locale "${locale}", falling back to English`);
+    return translations['en'];
+  }
+  return translations[locale];
+}
+
+export function t(key: TranslationKey, locale?: Locale): string {
+  try {
+    // Get the current locale
+    const targetLocale = locale || getCurrentLocaleFromStorage();
+    
+    // Split the key into parts
+    const keys = key.split('.');
+    
+    // Start with the translations for the target locale
+    let value: any = translations[targetLocale];
+    
+    // Traverse the object using the key parts
+    for (const k of keys) {
+      value = value?.[k];
+      if (value === undefined) {
+        console.warn(`Translation missing for key "${key}" in locale "${targetLocale}"`);
+        break;
+      }
+    }
+    
+    // If value is not found in target locale, try English as fallback
+    if (!value && targetLocale !== 'en') {
+      console.warn(`Falling back to English for key "${key}"`);
+      value = t(key, 'en');
+    }
+    
+    // Return the translation or fallback to the key itself
+    return value || key;
+  } catch (error) {
+    console.error(`Translation error for key "${key}":`, error);
+    return key;
+  }
+}
+
+export function getCurrentLocale(): Locale {
+  const locale = getCurrentLocaleFromStorage();
+  return locale;
+}
+
+export function setCurrentLocale(locale: Locale): void {
+  if (SUPPORTED_LOCALES.includes(locale)) {
+    if (typeof window !== 'undefined') {
+      try {
+        localStorage.setItem('tiber365-locale', locale);
+        // Force a hard reload to ensure all components re-render with new language
+        window.location.href = window.location.href;
+      } catch (error) {
+        console.error('Error setting localStorage:', error);
+      }
+    }
+  } else {
+    console.error(`Invalid locale: "${locale}"`);
+  }
+} 

src/utils/theme.ts

@@ -0,0 +1,47 @@
+export type Theme = 'light' | 'dark';
+
+export function getThemePreference(): Theme {
+  if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+    return localStorage.getItem('theme') as Theme;
+  }
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function isDark() {
+  return getThemePreference() === 'dark';
+}
+
+export function setTheme(theme: Theme) {
+  localStorage.setItem('theme', theme);
+  reflectPreference(theme);
+}
+
+export function reflectPreference(theme: Theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  
+  const themeColorMeta = document.querySelector('meta[name="theme-color"]');
+  if (themeColorMeta) {
+    themeColorMeta.setAttribute('content', theme === 'dark' ? '#0f172a' : '#ffffff');
+  }
+}
+
+// Initialize theme on page load
+export function initTheme() {
+  const theme = getThemePreference();
+  reflectPreference(theme);
+  
+  // Listen for system theme changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+    if (!localStorage.getItem('theme')) {
+      reflectPreference(e.matches ? 'dark' : 'light');
+    }
+  });
+}
+
+// Toggle theme function
+export function toggleTheme() {
+  const currentTheme = getThemePreference();
+  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+  setTheme(newTheme);
+  return newTheme;
+}