365DevNet/Tiber365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3168826fa875b7b2185db5585b842e6f9a3ee42f
Tiber365/dist/contact/index.html
becarta 3168826fa8 Add internationalization support with astro-i18next integration 
- Implemented astro-i18next for multi-language support, including English, Dutch, and Italian.
- Configured default locale and language fallback settings.
- Defined routes for localized content in the configuration.
- Updated package.json and package-lock.json to include new dependencies for i18next and related plugins.
2025-05-23 15:10:00 +02:00

7 lines
20 KiB
HTML
Raw Blame History

<!DOCTYPE html><html lang="cimode" class="scroll-smooth"> <head><meta charset="UTF-8"><meta name="description" content="Contact Tiber365 for professional IT services. Get in touch for Microsoft 365 support, networking solutions, and custom IT projects."><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="Astro v4.16.18"><!-- Canonical URL --><link rel="canonical" href="https://tiber365.it/contact/"><!-- Primary Meta Tags --><title>Contact | Tiber365 - Professional IT Services | Tiber365</title><meta name="title" content="Contact | Tiber365 - Professional IT Services | Tiber365"><meta name="description" content="Contact Tiber365 for professional IT services. Get in touch for Microsoft 365 support, networking solutions, and custom IT projects."><meta name="author" content="Tiber365"><!-- Prevent automatic language redirects --><meta name="google" content="notranslate"><meta http-equiv="Content-Language" content="cimode"><!-- 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="https://tiber365.it/contact/"><meta property="og:title" content="Contact | Tiber365 - Professional IT Services | Tiber365"><meta property="og:description" content="Contact Tiber365 for professional IT services. Get in touch for Microsoft 365 support, networking solutions, and custom IT projects."><meta property="og:image" content="https://tiber365.it/images/og-image.jpg"><meta property="og:site_name" content="Tiber365"><meta property="og:locale" content="it_IT"><!-- Twitter --><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://tiber365.it/contact/"><meta property="twitter:title" content="Contact | Tiber365 - Professional IT Services | Tiber365"><meta property="twitter:description" content="Contact Tiber365 for professional IT services. Get in touch for Microsoft 365 support, networking solutions, and custom IT projects."><meta property="twitter:image" content="https://tiber365.it/images/og-image.jpg"><!-- Favicons --><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="manifest" href="/manifest.json"><!-- Language alternates --><link rel="alternate" hreflang="cimode" href="https://tiber365.it/contact"><link rel="stylesheet" href="/_astro/about.ohV8mVtx.css">
<link rel="stylesheet" href="/_astro/about.Bh3L5Fru.css"><script type="module" src="/_astro/hoisted.Gc4qN2dj.js"></script></head> <body class="min-h-screen bg-background text-foreground"> <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"> <a href="/" class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors relative group"> Home <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><a href="/services" class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors relative group"> Services <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><a href="/about" class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors relative group"> About <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><a href="https://blog.tiber365.it" target="_blank" rel="noopener noreferrer" class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors relative group"> Blog <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"></path> </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><a href="https://support.tiber365.it" target="_blank" rel="noopener noreferrer" class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors relative group"> Support <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"></path> </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"> <div class="relative inline-block text-left" data-astro-cid-a2mxz4y6> <select onchange="location = this.value;" 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" data-astro-cid-a2mxz4y6> <option value="/contact" selected> </option> </select> </div> <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="Toggle theme" title="Toggle theme"> <!-- 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"></path> </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"></path> </svg> </button> <!-- 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"></path> </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"></path> </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"> <a href="/" class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"> Home </a><a href="/services" class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"> Services </a><a href="/about" class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"> About </a><a href="https://blog.tiber365.it" target="_blank" rel="noopener noreferrer" class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"> Blog <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"></path> </svg> </a><a href="https://support.tiber365.it" target="_blank" rel="noopener noreferrer" class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"> Support <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"></path> </svg> </a> </div> </div> </nav> </header> <main> <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"> Get In Touch </h2> <p class="text-lg sm:text-xl text-muted-foreground"> Ready to transform your IT infrastructure? Let&#39;s talk! </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"> 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"> 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"> 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"> 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"> 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">Send Message</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"></path> </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"></path> </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"> info@tiber365.it </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"></path> </svg> </div> <div> <div class="text-sm text-muted-foreground">Phone</div> <a href="tel:+391234567890" class="text-foreground hover:text-primary transition-colors"> +39 123 456 7890 </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> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> </svg> </div> <div> <div class="text-sm text-muted-foreground">Location</div> <div class="text-foreground"> Rome, Italy </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> </main> <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"> Professional IT services for freelancers and small businesses. </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"></path> </svg> info@tiber365.it </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"></path> </svg> +39 123 456 7890 </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> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> </svg> Rome, Italy </div> </div> </div> <!-- Quick Links --> <div> <h3 class="font-semibold text-white mb-4">Quick Links</h3> <ul class="space-y-2"> <li> <a href="/" class="text-secondary-300 hover:text-primary transition-colors"> Home </a> </li><li> <a href="/services" class="text-secondary-300 hover:text-primary transition-colors"> Services </a> </li><li> <a href="/about" class="text-secondary-300 hover:text-primary transition-colors"> About </a> </li> <li> <a href="/contact" class="text-secondary-300 hover:text-primary transition-colors"> Contact </a> </li> </ul> </div> <!-- External Links --> <div> <h3 class="font-semibold text-white mb-4">Resources</h3> <ul class="space-y-2"> <li> <a href="https://blog.tiber365.it" target="_blank" rel="noopener noreferrer" class="text-secondary-300 hover:text-primary transition-colors inline-flex items-center"> Blog <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"></path> </svg> </a> </li><li> <a href="https://support.tiber365.it" target="_blank" rel="noopener noreferrer" class="text-secondary-300 hover:text-primary transition-colors inline-flex items-center"> Support <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"></path> </svg> </a> </li> <li> <a href="/privacy" class="text-secondary-300 hover:text-primary transition-colors"> Privacy Policy </a> </li> <li> <a href="/terms" class="text-secondary-300 hover:text-primary transition-colors"> Terms of Service </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"> © 2024 Tiber365. All rights reserved. </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"></path> </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"></path> </svg> </a> </div> </div> </div> </div> </footer> <!-- Initialize animations --> </body> </html>
Reference in New Issue View Git Blame Copy Permalink