Update site content across multiple languages, enhancing the "Stay Updated" section with a subscription form and footer details. Remove unused CSS files and ensure proper localization in JSON files for German, French, Dutch, and English. Adjust site configuration for improved navigation and accessibility.

This commit is contained in:
2025-07-24 21:46:33 +02:00
parent 1d8b25f872
commit 7f9cf0cc82
59 changed files with 2632 additions and 213 deletions

File diff suppressed because one or more lines are too long

26
dist/404.html vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

1
dist/_astro/about.D_EvXghT.css vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/_astro/about.UzmqI4ov.css vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/about/index.html vendored Normal file
View File

@@ -0,0 +1 @@
<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Redirecting...</title><meta http-equiv="refresh" content="0;url=/en/about"><link rel="canonical" href="/en/about"><link rel="stylesheet" href="/_astro/about.D_EvXghT.css"></head> <body> <div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: system-ui, sans-serif;"> <div style="text-align: center;"> <h1>Redirecting...</h1> <p>If you are not redirected automatically, <a href="/en/about">click here</a>.</p> </div> </div> <script type="module">window.location.href="/en/about";</script> </body> </html>

28
dist/blog/index.html vendored

File diff suppressed because one or more lines are too long

1
dist/contact/index.html vendored Normal file
View File

@@ -0,0 +1 @@
<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Redirecting...</title><meta http-equiv="refresh" content="0;url=/en/contact"><link rel="canonical" href="/en/contact"><link rel="stylesheet" href="/_astro/about.D_EvXghT.css"></head> <body> <div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: system-ui, sans-serif;"> <div style="text-align: center;"> <h1>Redirecting...</h1> <p>If you are not redirected automatically, <a href="/en/contact">click here</a>.</p> </div> </div> <script type="module">window.location.href="/en/contact";</script> </body> </html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

90
dist/de/index.html vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

42
dist/de/services/index.html vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

90
dist/en/index.html vendored

File diff suppressed because one or more lines are too long

42
dist/en/services/index.html vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

90
dist/fr/index.html vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

42
dist/fr/services/index.html vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

90
dist/index.html vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

90
dist/nl/index.html vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

42
dist/nl/services/index.html vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1,25 +1,25 @@
{
"hash": "0bb0bb40",
"configHash": "33b33b14",
"hash": "0d2c9453",
"configHash": "636dc1d0",
"lockfileHash": "9529ee3f",
"browserHash": "178f5e69",
"browserHash": "0f9ac100",
"optimized": {
"astro > cssesc": {
"src": "../../cssesc/cssesc.js",
"file": "astro___cssesc.js",
"fileHash": "57f1afdf",
"fileHash": "eff02a83",
"needsInterop": true
},
"astro > aria-query": {
"src": "../../aria-query/lib/index.js",
"file": "astro___aria-query.js",
"fileHash": "6f0acea9",
"fileHash": "4cb8308d",
"needsInterop": true
},
"astro > axobject-query": {
"src": "../../axobject-query/lib/index.js",
"file": "astro___axobject-query.js",
"fileHash": "d2fc7139",
"fileHash": "45245bd3",
"needsInterop": true
}
},

View File

@@ -370,7 +370,7 @@ const t = await useTranslations(lang);
// Validate all fields
let isValid = true;
inputs.forEach(input => {
if (!input.checkValidity()) {
if (input instanceof HTMLInputElement && !input.checkValidity()) {
input.classList.add('border-error', 'shake');
isValid = false;
}
@@ -411,7 +411,7 @@ const t = await useTranslations(lang);
submitBtn.disabled = false;
submitBtn.classList.remove('loading');
submitBtn.style.animation = '';
submitText.textContent = '{t('contact.form.send')}';
submitText.textContent = 'Send Message';
submitSpinner.classList.add('hidden');
}
});

View File

@@ -107,7 +107,129 @@
"mission": "Unsere Mission ist es, Technologie für Sie arbeiten zu lassen, nicht gegen Sie.",
"experience": "Jahre Erfahrung",
"clients": "Zufriedene Kunden",
"projects": "Abgeschlossene Projekte"
"projects": "Abgeschlossene Projekte",
"meta": {
"description": "Erfahren Sie mehr über Tiber365, Ihren vertrauensvollen IT-Partner seit 2019. Wir bieten professionelle IT-Services für kleine Unternehmen und Freelancer in den Niederlanden."
},
"values": {
"excellence": {
"title": "Exzellenz",
"description": "Wir streben nach höchster Qualität in allem, was wir tun, und stellen sicher, dass unsere Kunden außergewöhnlichen Service und Ergebnisse erhalten."
},
"partnership": {
"title": "Partnerschaft",
"description": "Wir bauen langfristige Beziehungen zu unseren Kunden auf und werden zu einer vertrauensvollen Erweiterung ihres Teams."
},
"innovation": {
"title": "Innovation",
"description": "Wir bleiben an der Spitze der Technologietrends, um wegweisende Lösungen anzubieten, die das Geschäftswachstum fördern."
},
"security": {
"title": "Sicherheit",
"description": "Wir priorisieren die Sicherheit und Privatsphäre der Daten unserer Kunden mit branchenführenden Praktiken und Protokollen."
}
},
"timeline": {
"founded": {
"title": "Tiber365 gegründet",
"description": "Begonnen als kleine IT-Beratung mit einer Vision, kleinen Unternehmen zu helfen, die Kraft moderner Technologie zu nutzen."
},
"growth": {
"title": "Schnelles Wachstum",
"description": "Erweitert unser Team und unsere Services, wurden ein vertrauensvoller Microsoft 365-Partner und halfen Dutzenden von Unternehmen bei der Cloud-Migration."
},
"expansion": {
"title": "Service-Erweiterung",
"description": "Umfassende Netzwerklösungen, Webhosting-Services und 24/7-Support zu unserem Portfolio hinzugefügt."
},
"present": {
"title": "Führender IT-Partner",
"description": "Jetzt betreuen wir 100+ Kunden in den Niederlanden mit einem vollständigen Spektrum an IT-Services und halten 99,9% Uptime aufrecht."
}
},
"team": {
"founder": {
"role": "Gründer & CEO",
"bio": "Mit über 15 Jahren IT-Erfahrung führt Marco unsere Vision an, Enterprise-Level-Technologie für kleine Unternehmen zugänglich zu machen."
},
"technical": {
"role": "Technischer Direktor",
"bio": "Sarah bringt fundierte Expertise in Netzwerk-Infrastruktur und Sicherheit ein und stellt sicher, dass die Systeme unserer Kunden robust und sicher sind."
},
"support": {
"role": "Customer Success Manager",
"bio": "Tom stellt sicher, dass unsere Kunden den größten Wert aus ihren IT-Investitionen ziehen durch Schulung, Support und strategische Beratung."
}
},
"hero": {
"badge": "Über Tiber365",
"title": "Ihr Vertrauensvoller IT-Partner",
"since": "Seit 2019",
"subtitle": "Wir sind ein leidenschaftliches Team von IT-Profis, die sich der nahtlosen Technologie für kleine Unternehmen und Freelancer in den Niederlanden widmen.",
"stats": {
"experience": "Jahre Erfahrung",
"clients": "Zufriedene Kunden",
"support": "Support Verfügbar",
"uptime": "Uptime Garantie"
}
},
"mission": {
"title": "Unsere Mission",
"description": "Kleine Unternehmen und Freelancer mit Enterprise-Level IT-Lösungen zu befähigen, die zugänglich, zuverlässig und auf ihre einzigartigen Bedürfnisse zugeschnitten sind. Wir glauben, dass Technologie ein Enabler sein sollte, kein Hindernis für den Erfolg.",
"vision": {
"title": "Unsere Vision",
"description": "Der führende IT-Partner für kleine Unternehmen in den Niederlanden zu werden, bekannt für unsere Expertise, Zuverlässigkeit und unser Engagement, unseren Kunden bei der Erreichung ihrer digitalen Transformationsziele zu helfen."
}
},
"values": {
"title": "Unsere Werte",
"subtitle": "Diese Kernprinzipien leiten alles, was wir tun, und prägen, wie wir mit unseren Kunden zusammenarbeiten."
},
"timeline": {
"title": "Unsere Reise",
"subtitle": "Von einem kleinen Startup zu einem vertrauensvollen IT-Partner - so sind wir gewachsen.",
"founded": {
"title": "Tiber365 Gegründet",
"description": "Begonnen als kleine IT-Beratung mit einer Vision, kleinen Unternehmen zu helfen, die Kraft moderner Technologie zu nutzen."
},
"growth": {
"title": "Schnelles Wachstum",
"description": "Unser Team und unsere Dienstleistungen erweitert, ein vertrauensvoller Microsoft 365-Partner geworden und Dutzenden von Unternehmen bei der Cloud-Migration geholfen."
},
"expansion": {
"title": "Dienstleistungserweiterung",
"description": "Umfassende Netzwerklösungen, Webhosting-Dienste und 24/7-Support zu unserem Portfolio hinzugefügt."
},
"present": {
"title": "Führender IT-Partner",
"description": "Jetzt betreuen wir 100+ Kunden in den Niederlanden mit einem vollständigen Spektrum an IT-Dienstleistungen und halten 99.9% Uptime aufrecht."
}
},
"team": {
"title": "Treffen Sie Unser Team",
"subtitle": "Die leidenschaftlichen Profis hinter Tiber365, engagiert für Ihren Erfolg.",
"connect": "Verbinden"
},
"certifications": {
"title": "Zertifizierungen & Partner",
"subtitle": "Wir halten die höchsten Standards durch kontinuierliches Lernen und Partnerschaften aufrecht.",
"microsoft": {
"title": "Microsoft Zertifiziert",
"subtitle": "Azure & Microsoft 365"
},
"ubiquiti": {
"title": "Ubiquiti Partner",
"subtitle": "Netzwerklösungen"
},
"security": {
"title": "Sicherheit Zertifiziert",
"subtitle": "ISO 27001 Konform"
},
"cloud": {
"title": "Cloud Spezialist",
"subtitle": "Multi-Cloud Experte"
}
}
},
"blog": {
"title": "Blog",

View File

@@ -107,7 +107,112 @@
"mission": "Our mission is to make technology work for you, not against you.",
"experience": "Years of Experience",
"clients": "Happy Clients",
"projects": "Projects Completed"
"projects": "Projects Completed",
"meta": {
"description": "Learn about Tiber365, your trusted IT partner since 2019. We provide professional IT services for small businesses and freelancers across the Netherlands."
},
"values": {
"excellence": {
"title": "Excellence",
"description": "We strive for the highest quality in everything we do, ensuring our clients receive exceptional service and results."
},
"partnership": {
"title": "Partnership",
"description": "We build long-term relationships with our clients, becoming a trusted extension of their team."
},
"innovation": {
"title": "Innovation",
"description": "We stay ahead of technology trends to provide cutting-edge solutions that drive business growth."
},
"security": {
"title": "Security",
"description": "We prioritize the security and privacy of our clients' data with industry-leading practices and protocols."
}
},
"team": {
"founder": {
"role": "Founder & CEO",
"bio": "With over 15 years in IT, Marco leads our vision of making enterprise-level technology accessible to small businesses."
},
"technical": {
"role": "Technical Director",
"bio": "Sarah brings deep expertise in network infrastructure and security, ensuring our clients' systems are robust and secure."
},
"support": {
"role": "Customer Success Manager",
"bio": "Tom ensures our clients get the most value from their IT investments through training, support, and strategic guidance."
}
},
"hero": {
"badge": "About Tiber365",
"title": "Your Trusted IT Partner",
"since": "Since 2019",
"subtitle": "We're a passionate team of IT professionals dedicated to making technology work seamlessly for small businesses and freelancers across the Netherlands.",
"stats": {
"experience": "Years Experience",
"clients": "Happy Clients",
"support": "Support Available",
"uptime": "Uptime Guarantee"
}
},
"mission": {
"title": "Our Mission",
"description": "To empower small businesses and freelancers with enterprise-level IT solutions that are accessible, reliable, and tailored to their unique needs. We believe technology should be an enabler, not a barrier to success.",
"vision": {
"title": "Our Vision",
"description": "To become the leading IT partner for small businesses in the Netherlands, known for our expertise, reliability, and commitment to helping our clients achieve their digital transformation goals."
}
},
"values": {
"title": "Our Values",
"subtitle": "These core principles guide everything we do and shape how we work with our clients."
},
"timeline": {
"title": "Our Journey",
"subtitle": "From a small startup to a trusted IT partner - here's how we've grown.",
"founded": {
"title": "Tiber365 Founded",
"description": "Started as a small IT consultancy with a vision to help small businesses harness the power of modern technology."
},
"growth": {
"title": "Rapid Growth",
"description": "Expanded our team and services, becoming a trusted Microsoft 365 partner and helping dozens of businesses migrate to the cloud."
},
"expansion": {
"title": "Service Expansion",
"description": "Added comprehensive networking solutions, web hosting services, and 24/7 support to our portfolio."
},
"present": {
"title": "Leading IT Partner",
"description": "Now serving 100+ clients across the Netherlands with a full range of IT services and maintaining 99.9% uptime."
}
},
"team": {
"title": "Meet Our Team",
"subtitle": "The passionate professionals behind Tiber365, dedicated to your success.",
"connect": "Connect"
},
"certifications": {
"title": "Certifications & Partners",
"subtitle": "We maintain the highest standards through continuous learning and partnerships.",
"microsoft": {
"title": "Microsoft Certified",
"subtitle": "Azure & Microsoft 365"
},
"ubiquiti": {
"title": "Ubiquiti Partner",
"subtitle": "Network Solutions"
},
"security": {
"title": "Security Certified",
"subtitle": "ISO 27001 Compliant"
},
"cloud": {
"title": "Cloud Specialist",
"subtitle": "Multi-Cloud Expert"
}
}
},
"blog": {
"title": "Blog",

View File

@@ -107,7 +107,129 @@
"mission": "Notre mission est de faire fonctionner la technologie pour vous, pas contre vous.",
"experience": "Années d'Expérience",
"clients": "Clients Satisfaits",
"projects": "Projets Terminés"
"projects": "Projets Terminés",
"meta": {
"description": "Découvrez Tiber365, votre partenaire IT de confiance depuis 2019. Nous fournissons des services IT professionnels pour les petites entreprises et freelances aux Pays-Bas."
},
"values": {
"excellence": {
"title": "Excellence",
"description": "Nous visons la plus haute qualité dans tout ce que nous faisons, garantissant à nos clients un service et des résultats exceptionnels."
},
"partnership": {
"title": "Partenariat",
"description": "Nous construisons des relations à long terme avec nos clients, devenant une extension de confiance de leur équipe."
},
"innovation": {
"title": "Innovation",
"description": "Nous restons à la pointe des tendances technologiques pour fournir des solutions de pointe qui stimulent la croissance de l'entreprise."
},
"security": {
"title": "Sécurité",
"description": "Nous priorisons la sécurité et la confidentialité des données de nos clients avec des pratiques et protocoles de pointe dans l'industrie."
}
},
"timeline": {
"founded": {
"title": "Tiber365 Fondé",
"description": "Commencé comme une petite consultation IT avec une vision d'aider les petites entreprises à exploiter la puissance de la technologie moderne."
},
"growth": {
"title": "Croissance Rapide",
"description": "Élargi notre équipe et nos services, devenu un partenaire Microsoft 365 de confiance et aidé des dizaines d'entreprises à migrer vers le cloud."
},
"expansion": {
"title": "Expansion des Services",
"description": "Ajouté des solutions réseau complètes, des services d'hébergement web et un support 24/7 à notre portefeuille."
},
"present": {
"title": "Partenaire IT Leader",
"description": "Maintenant au service de 100+ clients aux Pays-Bas avec une gamme complète de services IT et maintenant 99,9% de disponibilité."
}
},
"team": {
"founder": {
"role": "Fondateur & CEO",
"bio": "Avec plus de 15 ans d'expérience en IT, Marco dirige notre vision de rendre la technologie de niveau entreprise accessible aux petites entreprises."
},
"technical": {
"role": "Directeur Technique",
"bio": "Sarah apporte une expertise approfondie en infrastructure réseau et sécurité, garantissant que les systèmes de nos clients sont robustes et sécurisés."
},
"support": {
"role": "Responsable Succès Client",
"bio": "Tom s'assure que nos clients tirent le meilleur parti de leurs investissements IT grâce à la formation, au support et à l'orientation stratégique."
}
},
"hero": {
"badge": "À Propos de Tiber365",
"title": "Votre Partenaire IT de Confiance",
"since": "Depuis 2019",
"subtitle": "Nous sommes une équipe passionnée de professionnels IT dédiés à faire fonctionner la technologie de manière transparente pour les petites entreprises et freelances aux Pays-Bas.",
"stats": {
"experience": "Années d'Expérience",
"clients": "Clients Satisfaits",
"support": "Support Disponible",
"uptime": "Garantie de Disponibilité"
}
},
"mission": {
"title": "Notre Mission",
"description": "Donner aux petites entreprises et freelances les moyens d'utiliser des solutions IT de niveau entreprise qui sont accessibles, fiables et adaptées à leurs besoins uniques. Nous croyons que la technologie doit être un facilitateur, pas un obstacle au succès.",
"vision": {
"title": "Notre Vision",
"description": "Devenir le partenaire IT leader pour les petites entreprises aux Pays-Bas, reconnu pour notre expertise, notre fiabilité et notre engagement à aider nos clients à atteindre leurs objectifs de transformation numérique."
}
},
"values": {
"title": "Nos Valeurs",
"subtitle": "Ces principes fondamentaux guident tout ce que nous faisons et façonnent notre façon de travailler avec nos clients."
},
"timeline": {
"title": "Notre Parcours",
"subtitle": "D'une petite startup à un partenaire IT de confiance - voici comment nous avons grandi.",
"founded": {
"title": "Tiber365 Fondé",
"description": "Commençant comme une petite consultance IT avec une vision d'aider les petites entreprises à exploiter la puissance de la technologie moderne."
},
"growth": {
"title": "Croissance Rapide",
"description": "Élargi notre équipe et nos services, devenu un partenaire Microsoft 365 de confiance et aidé des dizaines d'entreprises à migrer vers le cloud."
},
"expansion": {
"title": "Expansion des Services",
"description": "Ajouté des solutions de réseau complètes, des services d'hébergement web et un support 24/7 à notre portefeuille."
},
"present": {
"title": "Partenaire IT Leader",
"description": "Maintenant au service de 100+ clients aux Pays-Bas avec une gamme complète de services IT et maintenant 99.9% de disponibilité."
}
},
"team": {
"title": "Rencontrez Notre Équipe",
"subtitle": "Les professionnels passionnés derrière Tiber365, dédiés à votre succès.",
"connect": "Se Connecter"
},
"certifications": {
"title": "Certifications & Partenaires",
"subtitle": "Nous maintenons les plus hauts standards grâce à l'apprentissage continu et aux partenariats.",
"microsoft": {
"title": "Microsoft Certifié",
"subtitle": "Azure & Microsoft 365"
},
"ubiquiti": {
"title": "Partenaire Ubiquiti",
"subtitle": "Solutions Réseau"
},
"security": {
"title": "Sécurité Certifiée",
"subtitle": "Conforme ISO 27001"
},
"cloud": {
"title": "Spécialiste Cloud",
"subtitle": "Expert Multi-Cloud"
}
}
},
"blog": {
"title": "Blog",

View File

@@ -111,7 +111,129 @@
"mission": "Onze missie is om technologie voor u te laten werken, niet tegen u.",
"experience": "Jaren Ervaring",
"clients": "Tevreden Klanten",
"projects": "Voltooide Projecten"
"projects": "Voltooide Projecten",
"meta": {
"description": "Leer meer over Tiber365, uw vertrouwde IT-partner sinds 2019. Wij bieden professionele IT-diensten voor kleine bedrijven en freelancers in heel Nederland."
},
"values": {
"excellence": {
"title": "Uitmuntendheid",
"description": "Wij streven naar de hoogste kwaliteit in alles wat we doen, zodat onze klanten uitzonderlijke service en resultaten ontvangen."
},
"partnership": {
"title": "Partnership",
"description": "Wij bouwen langdurige relaties op met onze klanten en worden een vertrouwde uitbreiding van hun team."
},
"innovation": {
"title": "Innovatie",
"description": "Wij blijven voorop lopen in technologietrends om baanbrekende oplossingen te bieden die bedrijfsgroei stimuleren."
},
"security": {
"title": "Beveiliging",
"description": "Wij geven prioriteit aan de beveiliging en privacy van de gegevens van onze klanten met toonaangevende praktijken en protocollen."
}
},
"timeline": {
"founded": {
"title": "Tiber365 Opgericht",
"description": "Begonnen als een kleine IT-consultancy met een visie om kleine bedrijven te helpen de kracht van moderne technologie te benutten."
},
"growth": {
"title": "Snelle Groei",
"description": "Uitgebreid ons team en diensten, werden een vertrouwde Microsoft 365-partner en hielpen tientallen bedrijven migreren naar de cloud."
},
"expansion": {
"title": "Dienstuitbreiding",
"description": "Toegevoegd uitgebreide netwerkoplossingen, webhostingdiensten en 24/7 ondersteuning aan ons portfolio."
},
"present": {
"title": "Toonaangevende IT-partner",
"description": "Nu dienen we 100+ klanten in heel Nederland met een volledig scala aan IT-diensten en handhaven we 99,9% uptime."
}
},
"team": {
"founder": {
"role": "Oprichter & CEO",
"bio": "Met meer dan 15 jaar ervaring in IT leidt Marco onze visie om enterprise-level technologie toegankelijk te maken voor kleine bedrijven."
},
"technical": {
"role": "Technisch Directeur",
"bio": "Sarah brengt diepgaande expertise in netwerkinfrastructuur en beveiliging, waardoor de systemen van onze klanten robuust en veilig zijn."
},
"support": {
"role": "Klantensucces Manager",
"bio": "Tom zorgt ervoor dat onze klanten de meeste waarde halen uit hun IT-investeringen door training, ondersteuning en strategische begeleiding."
}
},
"hero": {
"badge": "Over Tiber365",
"title": "Uw Vertrouwde IT-Partner",
"since": "Sinds 2019",
"subtitle": "Wij zijn een gepassioneerd team van IT-professionals die zich inzetten om technologie naadloos te laten werken voor kleine bedrijven en freelancers in heel Nederland.",
"stats": {
"experience": "Jaren Ervaring",
"clients": "Tevreden Klanten",
"support": "Ondersteuning Beschikbaar",
"uptime": "Uptime Garantie"
}
},
"mission": {
"title": "Onze Missie",
"description": "Kleine bedrijven en freelancers empoweren met enterprise-level IT-oplossingen die toegankelijk, betrouwbaar en op maat zijn voor hun unieke behoeften. Wij geloven dat technologie een enabler moet zijn, geen belemmering voor succes.",
"vision": {
"title": "Onze Visie",
"description": "De toonaangevende IT-partner worden voor kleine bedrijven in Nederland, bekend om onze expertise, betrouwbaarheid en toewijding om onze klanten te helpen hun digitale transformatiedoelen te bereiken."
}
},
"values": {
"title": "Onze Waarden",
"subtitle": "Deze kernprincipes begeleiden alles wat we doen en vormen hoe we samenwerken met onze klanten."
},
"timeline": {
"title": "Onze Reis",
"subtitle": "Van een kleine startup tot een vertrouwde IT-partner - zo zijn we gegroeid.",
"founded": {
"title": "Tiber365 Opgericht",
"description": "Begonnen als een kleine IT-consultancy met een visie om kleine bedrijven te helpen de kracht van moderne technologie te benutten."
},
"growth": {
"title": "Snelle Groei",
"description": "Uitgebreid ons team en diensten, een vertrouwde Microsoft 365-partner geworden en tientallen bedrijven geholpen met migratie naar de cloud."
},
"expansion": {
"title": "Dienstuitbreiding",
"description": "Uitgebreide netwerkoplossingen, webhostingdiensten en 24/7 ondersteuning toegevoegd aan ons portfolio."
},
"present": {
"title": "Toonaangevende IT-Partner",
"description": "Nu dienen we 100+ klanten in heel Nederland met een volledig scala aan IT-diensten en handhaven we 99.9% uptime."
}
},
"team": {
"title": "Ontmoet Ons Team",
"subtitle": "De gepassioneerde professionals achter Tiber365, toegewijd aan uw succes.",
"connect": "Verbinden"
},
"certifications": {
"title": "Certificeringen & Partners",
"subtitle": "Wij handhaven de hoogste standaarden door continue leren en partnerships.",
"microsoft": {
"title": "Microsoft Gecertificeerd",
"subtitle": "Azure & Microsoft 365"
},
"ubiquiti": {
"title": "Ubiquiti Partner",
"subtitle": "Netwerkoplossingen"
},
"security": {
"title": "Beveiliging Gecertificeerd",
"subtitle": "ISO 27001 Conform"
},
"cloud": {
"title": "Cloud Specialist",
"subtitle": "Multi-Cloud Expert"
}
}
},
"blog": {
"title": "Blog",

View File

@@ -1,9 +1,9 @@
---
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 { useTranslations, SUPPORTED_LOCALES } from '../../utils/i18n';
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 { useTranslations, SUPPORTED_LOCALES, localizePath } from '../../utils/i18n';
export async function getStaticPaths() {
return SUPPORTED_LOCALES.map(lang => ({ params: { lang } }));
@@ -11,25 +11,452 @@ export async function getStaticPaths() {
const { lang } = Astro.params;
const t = await useTranslations(lang as any);
// Team members data
const teamMembers = [
{
name: 'Marco van der Berg',
role: 'about.team.founder.role',
bio: 'about.team.founder.bio',
image: '/images/team/marco.jpg',
specialties: ['Microsoft 365', 'Cloud Architecture', 'Business Strategy'],
linkedin: '#'
},
{
name: 'Sarah de Wit',
role: 'about.team.technical.role',
bio: 'about.team.technical.bio',
image: '/images/team/sarah.jpg',
specialties: ['Network Security', 'Infrastructure', 'Automation'],
linkedin: '#'
},
{
name: 'Tom Jansen',
role: 'about.team.support.role',
bio: 'about.team.support.bio',
image: '/images/team/tom.jpg',
specialties: ['Customer Success', 'Training', 'Support'],
linkedin: '#'
}
];
// Company values
const values = [
{
icon: '🎯',
titleKey: 'about.values.excellence.title',
descriptionKey: 'about.values.excellence.description'
},
{
icon: '🤝',
titleKey: 'about.values.partnership.title',
descriptionKey: 'about.values.partnership.description'
},
{
icon: '🚀',
titleKey: 'about.values.innovation.title',
descriptionKey: 'about.values.innovation.description'
},
{
icon: '🔒',
titleKey: 'about.values.security.title',
descriptionKey: 'about.values.security.description'
}
];
// Timeline data
const timeline = [
{
year: '2019',
titleKey: 'about.timeline.founded.title',
descriptionKey: 'about.timeline.founded.description'
},
{
year: '2020',
titleKey: 'about.timeline.growth.title',
descriptionKey: 'about.timeline.growth.description'
},
{
year: '2022',
titleKey: 'about.timeline.expansion.title',
descriptionKey: 'about.timeline.expansion.description'
},
{
year: '2024',
titleKey: 'about.timeline.present.title',
descriptionKey: 'about.timeline.present.description'
}
];
---
<BaseLayout
title={`${t("nav.about")} | ${t("meta.title")}`}
description={t("meta.description")}
description={t("about.meta.description")}
keywords={t("meta.keywords")}
>
<Header />
<main>
<section class="py-20">
<!-- Hero Section -->
<section class="section-padding bg-gradient-to-br from-background via-surface/30 to-background">
<div class="container-custom">
<h1 class="text-4xl font-bold mb-8">{t("about.title")}</h1>
<div class="prose prose-lg">
<p>{t("about.description")}</p>
<p>{t("about.mission")}</p>
<div class="max-w-4xl mx-auto text-center animate-on-scroll">
<!-- Badge -->
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-medium mb-6">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
</svg>
{t('about.hero.badge')}
</div>
<!-- Title -->
<h1 class="text-responsive-xl font-bold text-foreground mb-6">
{t('about.hero.title')}
<span class="block text-gradient">{t('about.hero.since')}</span>
</h1>
<!-- Subtitle -->
<p class="text-responsive-base text-muted leading-relaxed mb-12">
{t('about.hero.subtitle')}
</p>
<!-- Stats -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-16">
<div class="text-center">
<div class="text-3xl font-bold text-primary mb-2">5+</div>
<div class="text-sm text-subtle">{t('about.hero.stats.experience')}</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-accent mb-2">100+</div>
<div class="text-sm text-subtle">{t('about.hero.stats.clients')}</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-success mb-2">24/7</div>
<div class="text-sm text-subtle">{t('about.hero.stats.support')}</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-warning mb-2">99.9%</div>
<div class="text-sm text-subtle">{t('about.hero.stats.uptime')}</div>
</div>
</div>
</div>
</div>
</section>
<!-- Mission & Vision Section -->
<section class="section-padding bg-gradient-to-b from-surface/20 to-background">
<div class="container-custom">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- Mission -->
<div class="animate-on-scroll">
<div class="card-glass p-8 h-full">
<div class="flex items-center gap-4 mb-6">
<div class="w-16 h-16 bg-gradient-to-br from-primary/10 to-accent/10 rounded-2xl flex items-center justify-center">
<svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h2 class="text-2xl font-bold text-foreground">{t('about.mission.title')}</h2>
</div>
<p class="text-muted leading-relaxed text-lg">
{t('about.mission.description')}
</p>
</div>
</div>
<!-- Vision -->
<div class="animate-on-scroll" style="animation-delay: 0.2s;">
<div class="card-glass p-8 h-full">
<div class="flex items-center gap-4 mb-6">
<div class="w-16 h-16 bg-gradient-to-br from-accent/10 to-primary/10 rounded-2xl flex items-center justify-center">
<svg class="w-8 h-8 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
</svg>
</div>
<h2 class="text-2xl font-bold text-foreground">{t('about.mission.vision.title')}</h2>
</div>
<p class="text-muted leading-relaxed text-lg">
{t('about.mission.vision.description')}
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Company Values -->
<section class="section-padding bg-background">
<div class="container-custom">
<div class="text-center mb-16 animate-on-scroll">
<h2 class="text-responsive-xl font-bold text-foreground mb-6">
{t('about.values.title')}
</h2>
<p class="text-responsive-base text-muted max-w-2xl mx-auto">
{t('about.values.subtitle')}
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{values.map((value, index) => (
<div
class="text-center animate-on-scroll group"
style={`animation-delay: ${index * 0.1}s`}
>
<div class="mb-6">
<div class="inline-flex w-20 h-20 bg-gradient-to-br from-surface/50 to-background/50 border border-border/50 rounded-3xl items-center justify-center group-hover:scale-110 transition-all duration-300 group-hover:bg-primary/5 group-hover:border-primary/20">
<span class="text-3xl">{value.icon}</span>
</div>
</div>
<h3 class="text-xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">
{t(value.titleKey)}
</h3>
<p class="text-muted leading-relaxed">
{t(value.descriptionKey)}
</p>
</div>
))}
</div>
</div>
</section>
<!-- Timeline Section -->
<section class="section-padding bg-gradient-to-b from-surface/20 to-background">
<div class="container-custom">
<div class="text-center mb-16 animate-on-scroll">
<h2 class="text-responsive-xl font-bold text-foreground mb-6">
{t('about.timeline.title')}
</h2>
<p class="text-responsive-base text-muted max-w-2xl mx-auto">
{t('about.timeline.subtitle')}
</p>
</div>
<div class="max-w-4xl mx-auto">
<div class="relative">
<!-- Timeline line -->
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-primary to-accent rounded-full"></div>
<div class="space-y-16">
{timeline.map((item, index) => (
<div
class={`flex items-center animate-on-scroll ${index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'}`}
style={`animation-delay: ${index * 0.2}s`}
>
<!-- Timeline dot -->
<div class="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 bg-gradient-to-br from-primary to-accent rounded-full border-4 border-background z-10"></div>
<!-- Content -->
<div class={`w-5/12 ${index % 2 === 0 ? 'text-right pr-8' : 'text-left pl-8'}`}>
<div class="card-glass p-6">
<div class="text-2xl font-bold text-primary mb-2">{item.year}</div>
<h3 class="text-lg font-bold text-foreground mb-3">
{t(item.titleKey)}
</h3>
<p class="text-muted">
{t(item.descriptionKey)}
</p>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section class="section-padding bg-background">
<div class="container-custom">
<div class="text-center mb-16 animate-on-scroll">
<h2 class="text-responsive-xl font-bold text-foreground mb-6">
{t('about.team.title')}
</h2>
<p class="text-responsive-base text-muted max-w-2xl mx-auto">
{t('about.team.subtitle')}
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
{teamMembers.map((member, index) => (
<div
class="text-center animate-on-scroll group"
style={`animation-delay: ${index * 0.1}s`}
>
<div class="card-glass p-8 hover:shadow-xl transition-all duration-300 group-hover:-translate-y-2">
<!-- Avatar placeholder -->
<div class="mb-6">
<div class="w-24 h-24 mx-auto bg-gradient-to-br from-primary/10 to-accent/10 rounded-full flex items-center justify-center group-hover:scale-110 transition-all duration-300">
<svg class="w-12 h-12 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>
<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-primary transition-colors">
{member.name}
</h3>
<div class="text-accent font-medium mb-4">
{t(member.role)}
</div>
<p class="text-muted text-sm leading-relaxed mb-6">
{t(member.bio)}
</p>
<!-- Specialties -->
<div class="flex flex-wrap justify-center gap-2 mb-6">
{member.specialties.map((specialty) => (
<span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">
{specialty}
</span>
))}
</div>
<!-- LinkedIn link -->
<a
href={member.linkedin}
class="inline-flex items-center gap-2 text-primary hover:text-accent transition-colors text-sm font-medium"
>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
{t('about.team.connect')}
</a>
</div>
</div>
))}
</div>
</div>
</section>
<!-- Certifications & Partners -->
<section class="section-padding bg-gradient-to-b from-surface/20 to-background">
<div class="container-custom">
<div class="text-center mb-16 animate-on-scroll">
<h2 class="text-responsive-xl font-bold text-foreground mb-6">
{t('about.certifications.title')}
</h2>
<p class="text-responsive-base text-muted max-w-2xl mx-auto">
{t('about.certifications.subtitle')}
</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<!-- Microsoft Partner -->
<div class="text-center animate-on-scroll group">
<div class="p-6 bg-surface/50 rounded-2xl border border-border/50 group-hover:border-primary/30 transition-all">
<div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-primary/10 to-accent/10 rounded-xl flex items-center justify-center">
<span class="text-2xl">🏅</span>
</div>
<h3 class="font-semibold text-foreground">{t('about.certifications.microsoft.title')}</h3>
<p class="text-sm text-subtle mt-2">{t('about.certifications.microsoft.subtitle')}</p>
</div>
</div>
<!-- Ubiquiti Partner -->
<div class="text-center animate-on-scroll group" style="animation-delay: 0.1s;">
<div class="p-6 bg-surface/50 rounded-2xl border border-border/50 group-hover:border-accent/30 transition-all">
<div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-accent/10 to-primary/10 rounded-xl flex items-center justify-center">
<span class="text-2xl">🌐</span>
</div>
<h3 class="font-semibold text-foreground">{t('about.certifications.ubiquiti.title')}</h3>
<p class="text-sm text-subtle mt-2">{t('about.certifications.ubiquiti.subtitle')}</p>
</div>
</div>
<!-- Security Certified -->
<div class="text-center animate-on-scroll group" style="animation-delay: 0.2s;">
<div class="p-6 bg-surface/50 rounded-2xl border border-border/50 group-hover:border-success/30 transition-all">
<div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-success/10 to-primary/10 rounded-xl flex items-center justify-center">
<span class="text-2xl">🔒</span>
</div>
<h3 class="font-semibold text-foreground">{t('about.certifications.security.title')}</h3>
<p class="text-sm text-subtle mt-2">{t('about.certifications.security.subtitle')}</p>
</div>
</div>
<!-- Cloud Specialist -->
<div class="text-center animate-on-scroll group" style="animation-delay: 0.3s;">
<div class="p-6 bg-surface/50 rounded-2xl border border-border/50 group-hover:border-warning/30 transition-all">
<div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-warning/10 to-accent/10 rounded-xl flex items-center justify-center">
<span class="text-2xl">☁️</span>
</div>
<h3 class="font-semibold text-foreground">{t('about.certifications.cloud.title')}</h3>
<p class="text-sm text-subtle mt-2">{t('about.certifications.cloud.subtitle')}</p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<CTA />
</main>
<Footer />
</BaseLayout>
</BaseLayout>
<style>
/* About page specific animations */
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-on-scroll.in-view {
opacity: 1;
transform: translateY(0);
}
/* Timeline enhancements */
.timeline-dot {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}
/* Team card hover effects */
.group:hover .card-glass {
background: rgba(var(--color-surface), 0.8);
}
/* Value card enhancements */
.group:hover span {
transform: scale(1.1);
transition: transform 0.3s ease;
}
</style>
<script>
// Initialize scroll animations
document.addEventListener('DOMContentLoaded', () => {
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);
const animatedElements = document.querySelectorAll('.animate-on-scroll');
animatedElements.forEach((el) => observer.observe(el));
// Add parallax effect to timeline
window.addEventListener('scroll', () => {
const timeline = document.querySelector('.timeline-line');
if (timeline) {
const scrolled = window.pageYOffset;
const rate = scrolled * -0.5;
timeline.style.transform = `translateY(${rate}px)`;
}
}, { passive: true });
});
</script>

View File

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

23
src/pages/about.astro Normal file
View File

@@ -0,0 +1,23 @@
---
// Client-side redirect to English about page
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Redirecting...</title>
<meta http-equiv="refresh" content="0;url=/en/about" />
<link rel="canonical" href="/en/about" />
</head>
<body>
<div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: system-ui, sans-serif;">
<div style="text-align: center;">
<h1>Redirecting...</h1>
<p>If you are not redirected automatically, <a href="/en/about">click here</a>.</p>
</div>
</div>
<script>
window.location.href = '/en/about';
</script>
</body>
</html>

23
src/pages/contact.astro Normal file
View File

@@ -0,0 +1,23 @@
---
// Client-side redirect to English contact page
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Redirecting...</title>
<meta http-equiv="refresh" content="0;url=/en/contact" />
<link rel="canonical" href="/en/contact" />
</head>
<body>
<div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: system-ui, sans-serif;">
<div style="text-align: center;">
<h1>Redirecting...</h1>
<p>If you are not redirected automatically, <a href="/en/contact">click here</a>.</p>
</div>
</div>
<script>
window.location.href = '/en/contact';
</script>
</body>
</html>

View File

@@ -98,8 +98,8 @@ export const NAVIGATION = [
},
{
label: 'nav.blog',
href: 'https://blog.tiber365.it',
type: 'external' as const,
href: '/blog',
type: 'internal' as const,
},
{
label: 'nav.support',