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

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;
+}