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
parent 8a3507dce0
commit 3168826fa8
581 changed files with 88691 additions and 494 deletions
--- a/dist/pages/404.astro.mjs
+++ b/dist/pages/404.astro.mjs
@@ -0,0 +1,25 @@
+import '../chunks/page-ssr_ChKiSmuh.mjs';
+import { c as createComponent, r as renderComponent, a as renderTemplate, m as maybeRenderHead } from '../chunks/astro/server_DJC9Xx9K.mjs';
+import 'kleur/colors';
+import { t, $ as $$BaseLayout, a as $$Header, b as $$Footer } from '../chunks/Footer_BFBz0LQo.mjs';
+export { renderers } from '../renderers.mjs';
+
+const $$404 = createComponent(($$result, $$props, $$slots) => {
+  return renderTemplate`${renderComponent($$result, "BaseLayout", $$BaseLayout, { "title": `${t("404.title")} | ${t("meta.title")}`, "description": t("404.description") }, { "default": ($$result2) => renderTemplate` ${renderComponent($$result2, "Header", $$Header, {})} ${maybeRenderHead()}<main> <section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted"> <div class="container-custom"> <div class="text-center max-w-2xl mx-auto animate-on-scroll"> <!-- 404 Visual --> <div class="text-8xl sm:text-9xl font-bold text-primary/20 mb-8">404</div> <!-- Error message --> <h1 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4"> ${t("404.title")} </h1> <p class="text-lg sm:text-xl text-muted-foreground mb-8"> ${t("404.description")} </p> <!-- Action buttons --> <div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> <a href="/" class="btn-primary px-8 py-4 text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 inline-flex items-center group"> <svg class="h-5 w-5 mr-2 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path> </svg> ${t("404.button")} </a> <a href="/contact" class="btn-outline px-8 py-4 text-lg font-semibold rounded-xl transition-all duration-300 hover:scale-105">
+Get Help
+</a> </div> <!-- Helpful links --> <div class="mt-12"> <p class="text-muted-foreground mb-4">Or try one of these popular pages:</p> <div class="flex flex-wrap justify-center gap-4"> <a href="/services" class="text-primary hover:text-primary/80 transition-colors">Services</a> <span class="text-muted-foreground">•</span> <a href="/about" class="text-primary hover:text-primary/80 transition-colors">About</a> <span class="text-muted-foreground">•</span> <a href="/contact" class="text-primary hover:text-primary/80 transition-colors">Contact</a> <span class="text-muted-foreground">•</span> <a href="https://blog.tiber365.it" target="_blank" rel="noopener noreferrer" class="text-primary hover:text-primary/80 transition-colors">Blog</a> </div> </div> </div> </div> </section> </main> ${renderComponent($$result2, "Footer", $$Footer, {})} ` })}`;
+}, "/Users/richard/Website Development/tiber365/src/pages/404.astro", void 0);
+
+const $$file = "/Users/richard/Website Development/tiber365/src/pages/404.astro";
+const $$url = "/404";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: $$404,
+  file: $$file,
+  url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };
--- a/dist/pages/about.astro.mjs
+++ b/dist/pages/about.astro.mjs
@@ -0,0 +1,50 @@
+import '../chunks/page-ssr_ChKiSmuh.mjs';
+import { c as createComponent, r as renderComponent, a as renderTemplate, m as maybeRenderHead } from '../chunks/astro/server_DJC9Xx9K.mjs';
+import 'kleur/colors';
+import { changeLanguage } from 'i18next';
+import { t, $ as $$BaseLayout, a as $$Header, b as $$Footer } from '../chunks/Footer_BFBz0LQo.mjs';
+import { $ as $$CTA } from '../chunks/CTA_CIVpts3M.mjs';
+export { renderers } from '../renderers.mjs';
+
+const $$About = createComponent(($$result, $$props, $$slots) => {
+  changeLanguage("en");
+  return renderTemplate`${renderComponent($$result, "BaseLayout", $$BaseLayout, { "title": `${t("nav.about")} | ${t("meta.title")}`, "description": "Learn about Tiber365 - your trusted IT partner specializing in Microsoft 365, networking, and comprehensive IT solutions for small businesses." }, { "default": ($$result2) => renderTemplate` ${renderComponent($$result2, "Header", $$Header, {})} ${maybeRenderHead()}<main> <!-- About Hero --> <section class="py-20 bg-gradient-to-br from-background via-background to-muted"> <div class="container-custom"> <div class="text-center max-w-4xl mx-auto animate-on-scroll"> <h1 class="text-4xl sm:text-5xl lg:text-6xl font-display font-bold text-foreground mb-6"> ${t("about.title")} </h1> <p class="text-lg sm:text-xl text-muted-foreground leading-relaxed"> ${t("about.subtitle")} </p> </div> </div> </section> <!-- Company Story --> <section class="py-20 bg-background"> <div class="container-custom"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <!-- Content --> <div class="animate-on-scroll"> <h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-6">
+Our Story
+</h2> <p class="text-lg text-muted-foreground mb-6 leading-relaxed"> ${t("about.description")} </p> <p class="text-lg text-muted-foreground leading-relaxed"> ${t("about.mission")} </p> </div> <!-- Visual --> <div class="animate-on-scroll" style="animation-delay: 0.2s"> <div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5"> <div class="text-center"> <div class="text-6xl mb-6">🚀</div> <h3 class="text-xl font-semibold text-foreground mb-4">Modern IT Solutions</h3> <p class="text-muted-foreground">
+Empowering businesses with cutting-edge technology and reliable support.
+</p> </div> </div> </div> </div> </div> </section> <!-- Stats --> <section class="py-20 bg-muted/30"> <div class="container-custom"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-8 text-center"> <div class="animate-on-scroll"> <div class="text-4xl sm:text-5xl font-bold text-primary mb-2">5+</div> <div class="text-muted-foreground">${t("about.experience")}</div> </div> <div class="animate-on-scroll" style="animation-delay: 0.1s"> <div class="text-4xl sm:text-5xl font-bold text-primary mb-2">100+</div> <div class="text-muted-foreground">${t("about.clients")}</div> </div> <div class="animate-on-scroll" style="animation-delay: 0.2s"> <div class="text-4xl sm:text-5xl font-bold text-primary mb-2">200+</div> <div class="text-muted-foreground">${t("about.projects")}</div> </div> </div> </div> </section> <!-- Values --> <section class="py-20 bg-background"> <div class="container-custom"> <div class="text-center mb-16 animate-on-scroll"> <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4">
+Our Values
+</h2> <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
+The principles that guide everything we do
+</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="card p-6 text-center animate-on-scroll"> <div class="text-4xl mb-4">🔒</div> <h3 class="text-xl font-semibold text-foreground mb-3">Security First</h3> <p class="text-muted-foreground">
+We prioritize the security and privacy of your business data above all else.
+</p> </div> <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.1s"> <div class="text-4xl mb-4">🤝</div> <h3 class="text-xl font-semibold text-foreground mb-3">Reliability</h3> <p class="text-muted-foreground">
+Count on us for consistent, dependable service that keeps your business running.
+</p> </div> <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.2s"> <div class="text-4xl mb-4">💡</div> <h3 class="text-xl font-semibold text-foreground mb-3">Innovation</h3> <p class="text-muted-foreground">
+We stay ahead of technology trends to bring you the best solutions.
+</p> </div> <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.3s"> <div class="text-4xl mb-4">📞</div> <h3 class="text-xl font-semibold text-foreground mb-3">Support</h3> <p class="text-muted-foreground">
+Dedicated support when you need it, with real people who understand your business.
+</p> </div> <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.4s"> <div class="text-4xl mb-4">⚡</div> <h3 class="text-xl font-semibold text-foreground mb-3">Efficiency</h3> <p class="text-muted-foreground">
+Streamlined processes and quick resolutions to minimize downtime.
+</p> </div> <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.5s"> <div class="text-4xl mb-4">🎯</div> <h3 class="text-xl font-semibold text-foreground mb-3">Focus</h3> <p class="text-muted-foreground">
+Laser-focused on small business needs and cost-effective solutions.
+</p> </div> </div> </div> </section> <!-- Team Section --> <section class="py-20 bg-muted/30"> <div class="container-custom"> <div class="text-center mb-16 animate-on-scroll"> <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4">
+Our Expertise
+</h2> <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
+Specialized knowledge in the technologies that matter to your business
+</p> </div> <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6"> <div class="card p-4 text-center animate-on-scroll"> <div class="text-3xl mb-2">🏢</div> <div class="text-sm font-medium text-foreground">Microsoft 365</div> </div> <div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.1s"> <div class="text-3xl mb-2">☁️</div> <div class="text-sm font-medium text-foreground">Cloud Services</div> </div> <div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.2s"> <div class="text-3xl mb-2">🌐</div> <div class="text-sm font-medium text-foreground">Networking</div> </div> <div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.3s"> <div class="text-3xl mb-2">🔒</div> <div class="text-sm font-medium text-foreground">Security</div> </div> <div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.4s"> <div class="text-3xl mb-2">🚀</div> <div class="text-sm font-medium text-foreground">Web Hosting</div> </div> <div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.5s"> <div class="text-3xl mb-2">⚙️</div> <div class="text-sm font-medium text-foreground">Automation</div> </div> </div> </div> </section> ${renderComponent($$result2, "CTA", $$CTA, {})} </main> ${renderComponent($$result2, "Footer", $$Footer, {})} ` })}`;
+}, "/Users/richard/Website Development/tiber365/src/pages/about.astro", void 0);
+
+const $$file = "/Users/richard/Website Development/tiber365/src/pages/about.astro";
+const $$url = "/about";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: $$About,
+  file: $$file,
+  url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };
--- a/dist/pages/contact.astro.mjs
+++ b/dist/pages/contact.astro.mjs
@@ -0,0 +1,33 @@
+import '../chunks/page-ssr_ChKiSmuh.mjs';
+import { c as createComponent, m as maybeRenderHead, a as renderTemplate, r as renderComponent } from '../chunks/astro/server_DJC9Xx9K.mjs';
+import 'kleur/colors';
+import { t, $ as $$BaseLayout, a as $$Header, b as $$Footer } from '../chunks/Footer_BFBz0LQo.mjs';
+import 'clsx';
+export { renderers } from '../renderers.mjs';
+
+const $$ContactForm = createComponent(async ($$result, $$props, $$slots) => {
+  return renderTemplate`${maybeRenderHead()}<section class="py-20 bg-background"> <div class="container-custom"> <div class="max-w-4xl mx-auto"> <!-- Section header --> <div class="text-center mb-12 animate-on-scroll"> <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4"> ${t("contact.title")} </h2> <p class="text-lg sm:text-xl text-muted-foreground"> ${t("contact.subtitle")} </p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> <!-- Contact form --> <div class="animate-on-scroll"> <form id="contact-form" class="space-y-6"> <!-- Name field --> <div> <label for="name" class="block text-sm font-medium text-foreground mb-2"> ${t("contact.form.name")} *
+</label> <input type="text" id="name" name="name" required class="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all" placeholder="John Doe"> </div> <!-- Email field --> <div> <label for="email" class="block text-sm font-medium text-foreground mb-2"> ${t("contact.form.email")} *
+</label> <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all" placeholder="john@company.com"> </div> <!-- Company field --> <div> <label for="company" class="block text-sm font-medium text-foreground mb-2"> ${t("contact.form.company")} </label> <input type="text" id="company" name="company" class="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all" placeholder="Your Company"> </div> <!-- Service field --> <div> <label for="service" class="block text-sm font-medium text-foreground mb-2"> ${t("contact.form.service")} </label> <select id="service" name="service" class="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"> <option value="">Select a service</option> <option value="microsoft365">Microsoft 365 Support</option> <option value="management">Full M365 Management</option> <option value="networking">Networking & Infrastructure</option> <option value="hosting">Web Hosting & Management</option> <option value="custom">Custom IT Projects</option> </select> </div> <!-- Message field --> <div> <label for="message" class="block text-sm font-medium text-foreground mb-2"> ${t("contact.form.message")} *
+</label> <textarea id="message" name="message" rows="4" required class="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all resize-y" placeholder="Tell us about your IT needs..."></textarea> </div> <!-- Submit button --> <button type="submit" class="w-full btn-primary px-6 py-3 text-lg font-semibold rounded-lg transition-all duration-300 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed" id="submit-btn"> <span id="submit-text">${t("contact.form.send")}</span> <svg id="submit-spinner" class="hidden inline h-5 w-5 ml-2 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></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"> ${t("contact.info.email")} </a> </div> </div> <!-- Phone --> <div class="flex items-center"> <div class="flex-shrink-0 w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-4"> <svg class="h-5 w-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></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"> ${t("contact.info.phone")} </a> </div> </div> <!-- Location --> <div class="flex items-center"> <div class="flex-shrink-0 w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-4"> <svg class="h-5 w-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path> <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"> ${t("contact.info.address")} </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> `;
+}, "/Users/richard/Website Development/tiber365/src/components/ContactForm.astro", void 0);
+
+const $$Contact = createComponent(($$result, $$props, $$slots) => {
+  return renderTemplate`${renderComponent($$result, "BaseLayout", $$BaseLayout, { "title": `${t("nav.contact")} | ${t("meta.title")}`, "description": "Contact Tiber365 for professional IT services. Get in touch for Microsoft 365 support, networking solutions, and custom IT projects." }, { "default": ($$result2) => renderTemplate` ${renderComponent($$result2, "Header", $$Header, {})} ${maybeRenderHead()}<main> ${renderComponent($$result2, "ContactForm", $$ContactForm, {})} </main> ${renderComponent($$result2, "Footer", $$Footer, {})} ` })}`;
+}, "/Users/richard/Website Development/tiber365/src/pages/contact.astro", void 0);
+
+const $$file = "/Users/richard/Website Development/tiber365/src/pages/contact.astro";
+const $$url = "/contact";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: $$Contact,
+  file: $$file,
+  url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };
--- a/dist/pages/index.astro.mjs
+++ b/dist/pages/index.astro.mjs
@@ -0,0 +1,58 @@
+import '../chunks/page-ssr_ChKiSmuh.mjs';
+import { c as createComponent, m as maybeRenderHead, r as renderComponent, a as renderTemplate, b as addAttribute } from '../chunks/astro/server_DJC9Xx9K.mjs';
+import 'kleur/colors';
+import i18next, { changeLanguage } from 'i18next';
+import { c as $$Trans, t, S as SERVICES, T as TESTIMONIALS, $ as $$BaseLayout, a as $$Header, b as $$Footer } from '../chunks/Footer_BFBz0LQo.mjs';
+/* empty css                                 */
+import 'clsx';
+import { $ as $$CTA } from '../chunks/CTA_CIVpts3M.mjs';
+export { renderers } from '../renderers.mjs';
+
+const $$Hero = createComponent(($$result, $$props, $$slots) => {
+  console.log("Hero component locale:", i18next.language);
+  return renderTemplate`${maybeRenderHead()}<section class="relative min-h-[calc(100vh-4rem)] flex items-center justify-center bg-gradient-to-br from-background via-background to-muted overflow-hidden" data-astro-cid-bbe6dxrz> <div class="container-custom relative z-10" data-astro-cid-bbe6dxrz> <div class="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center" data-astro-cid-bbe6dxrz> <!-- Text Content --> <div class="text-center lg:text-left animate-on-scroll" data-astro-cid-bbe6dxrz> <h1 class="text-4xl sm:text-5xl lg:text-6xl font-display font-bold text-foreground mb-6" data-astro-cid-bbe6dxrz> ${renderComponent($$result, "Trans", $$Trans, { "i18nKey": "hero.title", "data-astro-cid-bbe6dxrz": true }, { "default": ($$result2) => renderTemplate`
+Professional IT Services for Your Business
+` })} </h1> <p class="text-lg sm:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto lg:mx-0" data-astro-cid-bbe6dxrz> ${renderComponent($$result, "Trans", $$Trans, { "i18nKey": "hero.subtitle", "data-astro-cid-bbe6dxrz": true }, { "default": ($$result2) => renderTemplate`
+Empowering freelancers and small businesses with reliable Microsoft 365 support, networking solutions, web hosting, and custom IT projects.
+` })} </p> <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start" data-astro-cid-bbe6dxrz> <a href="/contact" class="btn-primary px-8 py-4 text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105" data-astro-cid-bbe6dxrz> ${renderComponent($$result, "Trans", $$Trans, { "i18nKey": "hero.cta.primary", "data-astro-cid-bbe6dxrz": true }, { "default": ($$result2) => renderTemplate`
+Get Started Today
+` })} </a> <a href="/services" class="btn-outline px-8 py-4 text-lg font-semibold rounded-xl transition-all duration-300 hover:scale-105" data-astro-cid-bbe6dxrz> ${renderComponent($$result, "Trans", $$Trans, { "i18nKey": "hero.cta.secondary", "data-astro-cid-bbe6dxrz": true }, { "default": ($$result2) => renderTemplate`
+View Our Services
+` })} </a> </div> <p class="mt-8 text-sm text-muted-foreground" data-astro-cid-bbe6dxrz> ${renderComponent($$result, "Trans", $$Trans, { "i18nKey": "hero.trusted", "data-astro-cid-bbe6dxrz": true }, { "default": ($$result2) => renderTemplate`
+Trusted by businesses across Italy
+` })} </p> </div> <!-- Hero Image --> <div class="relative animate-on-scroll" style="animation-delay: 0.2s" data-astro-cid-bbe6dxrz> <div class="aspect-square rounded-3xl bg-gradient-to-br from-primary/20 via-primary/10 to-transparent p-8" data-astro-cid-bbe6dxrz> <img src="/images/hero-illustration.svg" alt="IT Services Illustration" class="w-full h-full object-contain" loading="eager" data-astro-cid-bbe6dxrz> </div> <!-- Decorative elements --> <div class="absolute -z-10 inset-0 blur-3xl opacity-30 bg-gradient-to-br from-primary via-primary/50 to-transparent" data-astro-cid-bbe6dxrz></div> </div> </div> </div> <!-- Background decorative elements --> <div class="absolute inset-0 -z-10 overflow-hidden" data-astro-cid-bbe6dxrz> <div class="absolute -top-1/2 -right-1/2 w-full h-full rotate-12 bg-gradient-radial from-primary/5 via-primary/2 to-transparent opacity-70" data-astro-cid-bbe6dxrz></div> <div class="absolute -bottom-1/2 -left-1/2 w-full h-full -rotate-12 bg-gradient-radial from-primary/5 via-primary/2 to-transparent opacity-70" data-astro-cid-bbe6dxrz></div> </div> </section> `;
+}, "/Users/richard/Website Development/tiber365/src/components/Hero.astro", void 0);
+
+const $$Services = createComponent(($$result, $$props, $$slots) => {
+  return renderTemplate`${maybeRenderHead()}<section id="services" class="py-20 bg-muted/30"> <div class="container-custom"> <!-- Section header --> <div class="text-center mb-16 animate-on-scroll"> <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4"> ${t("services.title")} </h2> <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto"> ${t("services.subtitle")} </p> </div> <!-- Services grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> ${SERVICES.map((service, index) => renderTemplate`<div class="card p-6 hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll group"${addAttribute(`animation-delay: ${index * 0.1}s`, "style")}> <!-- Service icon --> <div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300"> ${service.icon} </div> <!-- Service title --> <h3 class="text-xl font-display font-semibold text-foreground mb-3"> ${t(service.titleKey)} </h3> <!-- Service description --> <p class="text-muted-foreground mb-4 leading-relaxed"> ${t(service.descriptionKey)} </p> <!-- Service features --> <ul class="space-y-2"> ${service.features.map((feature) => renderTemplate`<li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> ${t(feature)} </li>`)} </ul> <!-- Learn more link --> <div class="mt-6"> <a${addAttribute(`/services#${service.id}`, "href")} class="inline-flex items-center text-primary hover:text-primary/80 font-medium text-sm group-hover:translate-x-1 transition-all duration-200">
+Learn more
+<svg class="h-4 w-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </a> </div> </div>`)} </div> <!-- CTA section --> <div class="text-center animate-on-scroll"> <a href="/services" class="btn-primary px-8 py-4 text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 inline-flex items-center group"> ${t("services.viewAll")} <svg class="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path> </svg> </a> </div> </div> </section>`;
+}, "/Users/richard/Website Development/tiber365/src/components/Services.astro", void 0);
+
+const $$Testimonials = createComponent(($$result, $$props, $$slots) => {
+  return renderTemplate`${maybeRenderHead()}<section class="py-20 bg-background"> <div class="container-custom"> <!-- Section header --> <div class="text-center mb-16 animate-on-scroll"> <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4"> ${t("testimonials.title")} </h2> <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto"> ${t("testimonials.subtitle")} </p> </div> <!-- Testimonials grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> ${TESTIMONIALS.map((testimonial, index) => renderTemplate`<div class="card p-6 hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll"${addAttribute(`animation-delay: ${index * 0.1}s`, "style")}> <!-- Star rating --> <div class="flex items-center mb-4"> ${Array.from({ length: testimonial.rating }, (_, i) => renderTemplate`<svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg>`)} </div> <!-- Testimonial content --> <blockquote class="text-muted-foreground mb-6 leading-relaxed italic">
+"${t(testimonial.contentKey)}"
+</blockquote> <!-- Customer info --> <div class="flex items-center"> <!-- Avatar placeholder --> <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4"> <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> </svg> </div> <div> <div class="font-semibold text-foreground"> ${t(testimonial.nameKey)} </div> <div class="text-sm text-muted-foreground"> ${t(testimonial.companyKey)} </div> </div> </div> </div>`)} </div> <!-- Additional social proof --> <div class="mt-16 text-center animate-on-scroll"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-8 max-w-3xl mx-auto"> <div class="text-center"> <div class="text-3xl font-bold text-primary mb-2">5+</div> <div class="text-sm text-muted-foreground">${t("about.experience")}</div> </div> <div class="text-center"> <div class="text-3xl font-bold text-primary mb-2">100+</div> <div class="text-sm text-muted-foreground">${t("about.clients")}</div> </div> <div class="text-center"> <div class="text-3xl font-bold text-primary mb-2">200+</div> <div class="text-sm text-muted-foreground">${t("about.projects")}</div> </div> </div> </div> </div> </section>`;
+}, "/Users/richard/Website Development/tiber365/src/components/Testimonials.astro", void 0);
+
+const $$Index = createComponent(($$result, $$props, $$slots) => {
+  changeLanguage("en");
+  const pageTitle = t("meta.title");
+  const pageDescription = t("meta.description");
+  const pageKeywords = t("meta.keywords");
+  return renderTemplate`${renderComponent($$result, "BaseLayout", $$BaseLayout, { "title": pageTitle, "description": pageDescription, "keywords": pageKeywords }, { "default": ($$result2) => renderTemplate` ${renderComponent($$result2, "Header", $$Header, {})} ${maybeRenderHead()}<main> ${renderComponent($$result2, "Hero", $$Hero, {})} ${renderComponent($$result2, "Services", $$Services, {})} ${renderComponent($$result2, "Testimonials", $$Testimonials, {})} ${renderComponent($$result2, "CTA", $$CTA, {})} </main> ${renderComponent($$result2, "Footer", $$Footer, {})} ` })}`;
+}, "/Users/richard/Website Development/tiber365/src/pages/index.astro", void 0);
+
+const $$file = "/Users/richard/Website Development/tiber365/src/pages/index.astro";
+const $$url = "";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: $$Index,
+  file: $$file,
+  url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };
--- a/dist/pages/it.astro.mjs
+++ b/dist/pages/it.astro.mjs
@@ -0,0 +1,32 @@
+import '../chunks/page-ssr_ChKiSmuh.mjs';
+import { c as createComponent, r as renderComponent, a as renderTemplate, m as maybeRenderHead } from '../chunks/astro/server_DJC9Xx9K.mjs';
+import 'kleur/colors';
+export { renderers } from '../renderers.mjs';
+
+const $$Index = createComponent(($$result, $$props, $$slots) => {
+  return renderTemplate`import ${changeLanguage} from "i18next";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Header from "../../components/Header.astro";
+import Hero from "../../components/Hero.astro";
+import Services from "../../components/Services.astro";
+import Testimonials from "../../components/Testimonials.astro";
+import CTA from "../../components/CTA.astro";
+import Footer from "../../components/Footer.astro";
+
+changeLanguage("it");
+${renderComponent($$result, "BaseLayout", BaseLayout, {}, { "default": ($$result2) => renderTemplate` ${renderComponent($$result2, "Header", Header, {})} ${maybeRenderHead()}<main> ${renderComponent($$result2, "Hero", Hero, {})} ${renderComponent($$result2, "Services", Services, {})} ${renderComponent($$result2, "Testimonials", Testimonials, {})} ${renderComponent($$result2, "CTA", CTA, {})} </main> ${renderComponent($$result2, "Footer", Footer, {})} ` })}`;
+}, "/Users/richard/Website Development/tiber365/src/pages/it/index.astro", void 0);
+
+const $$file = "/Users/richard/Website Development/tiber365/src/pages/it/index.astro";
+const $$url = "/it";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: $$Index,
+  file: $$file,
+  url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };
--- a/dist/pages/it/about.astro.mjs
+++ b/dist/pages/it/about.astro.mjs
@@ -0,0 +1,28 @@
+import '../../chunks/page-ssr_ChKiSmuh.mjs';
+import { c as createComponent, r as renderComponent, a as renderTemplate, m as maybeRenderHead } from '../../chunks/astro/server_DJC9Xx9K.mjs';
+import 'kleur/colors';
+export { renderers } from '../../renderers.mjs';
+
+const $$About = createComponent(($$result, $$props, $$slots) => {
+  return renderTemplate`import ${changeLanguage} from "i18next";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Header from "../../components/Header.astro";
+import Footer from "../../components/Footer.astro";
+
+changeLanguage("it");
+${renderComponent($$result, "BaseLayout", BaseLayout, {}, { "default": ($$result2) => renderTemplate` ${renderComponent($$result2, "Header", Header, {})} ${maybeRenderHead()}<main> <section class="py-20"> <div class="container-custom"> <h1>Chi Siamo</h1> <!-- Add about page content --> </div> </section> </main> ${renderComponent($$result2, "Footer", Footer, {})} ` })}`;
+}, "/Users/richard/Website Development/tiber365/src/pages/it/about.astro", void 0);
+
+const $$file = "/Users/richard/Website Development/tiber365/src/pages/it/about.astro";
+const $$url = "/it/about";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: $$About,
+  file: $$file,
+  url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };
--- a/dist/pages/nl.astro.mjs
+++ b/dist/pages/nl.astro.mjs
@@ -0,0 +1,32 @@
+import '../chunks/page-ssr_ChKiSmuh.mjs';
+import { c as createComponent, r as renderComponent, a as renderTemplate, m as maybeRenderHead } from '../chunks/astro/server_DJC9Xx9K.mjs';
+import 'kleur/colors';
+export { renderers } from '../renderers.mjs';
+
+const $$Index = createComponent(($$result, $$props, $$slots) => {
+  return renderTemplate`import ${changeLanguage} from "i18next";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Header from "../../components/Header.astro";
+import Hero from "../../components/Hero.astro";
+import Services from "../../components/Services.astro";
+import Testimonials from "../../components/Testimonials.astro";
+import CTA from "../../components/CTA.astro";
+import Footer from "../../components/Footer.astro";
+
+changeLanguage("nl");
+${renderComponent($$result, "BaseLayout", BaseLayout, {}, { "default": ($$result2) => renderTemplate` ${renderComponent($$result2, "Header", Header, {})} ${maybeRenderHead()}<main> ${renderComponent($$result2, "Hero", Hero, {})} ${renderComponent($$result2, "Services", Services, {})} ${renderComponent($$result2, "Testimonials", Testimonials, {})} ${renderComponent($$result2, "CTA", CTA, {})} </main> ${renderComponent($$result2, "Footer", Footer, {})} ` })}`;
+}, "/Users/richard/Website Development/tiber365/src/pages/nl/index.astro", void 0);
+
+const $$file = "/Users/richard/Website Development/tiber365/src/pages/nl/index.astro";
+const $$url = "/nl";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: $$Index,
+  file: $$file,
+  url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };
--- a/dist/pages/nl/about.astro.mjs
+++ b/dist/pages/nl/about.astro.mjs
@@ -0,0 +1,28 @@
+import '../../chunks/page-ssr_ChKiSmuh.mjs';
+import { c as createComponent, r as renderComponent, a as renderTemplate, m as maybeRenderHead } from '../../chunks/astro/server_DJC9Xx9K.mjs';
+import 'kleur/colors';
+export { renderers } from '../../renderers.mjs';
+
+const $$About = createComponent(($$result, $$props, $$slots) => {
+  return renderTemplate`import ${changeLanguage} from "i18next";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Header from "../../components/Header.astro";
+import Footer from "../../components/Footer.astro";
+
+changeLanguage("nl");
+${renderComponent($$result, "BaseLayout", BaseLayout, {}, { "default": ($$result2) => renderTemplate` ${renderComponent($$result2, "Header", Header, {})} ${maybeRenderHead()}<main> <section class="py-20"> <div class="container-custom"> <h1>Over Ons</h1> <!-- Add about page content --> </div> </section> </main> ${renderComponent($$result2, "Footer", Footer, {})} ` })}`;
+}, "/Users/richard/Website Development/tiber365/src/pages/nl/about.astro", void 0);
+
+const $$file = "/Users/richard/Website Development/tiber365/src/pages/nl/about.astro";
+const $$url = "/nl/about";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: $$About,
+  file: $$file,
+  url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };
--- a/dist/pages/privacy.astro.mjs
+++ b/dist/pages/privacy.astro.mjs
@@ -0,0 +1,52 @@
+import '../chunks/page-ssr_ChKiSmuh.mjs';
+import { c as createComponent, r as renderComponent, a as renderTemplate, m as maybeRenderHead } from '../chunks/astro/server_DJC9Xx9K.mjs';
+import 'kleur/colors';
+import { t, $ as $$BaseLayout, a as $$Header, b as $$Footer } from '../chunks/Footer_BFBz0LQo.mjs';
+export { renderers } from '../renderers.mjs';
+
+const $$Privacy = createComponent(($$result, $$props, $$slots) => {
+  return renderTemplate`${renderComponent($$result, "BaseLayout", $$BaseLayout, { "title": `${t("footer.links.privacy")} | ${t("meta.title")}`, "description": "Privacy Policy for Tiber365 - Learn how we collect, use, and protect your personal data in compliance with GDPR and Dutch privacy laws." }, { "default": ($$result2) => renderTemplate` ${renderComponent($$result2, "Header", $$Header, {})} ${maybeRenderHead()}<main class="py-16 bg-background"> <div class="container-custom"> <article class="prose prose-lg dark:prose-invert max-w-4xl mx-auto"> <h1 class="text-4xl font-display font-bold mb-8">${t("footer.links.privacy")}</h1> <div class="mb-8 text-sm text-muted-foreground">
+Last updated: ${(/* @__PURE__ */ new Date()).toLocaleDateString()} </div> <section class="mb-12"> <h2>1. Introduction</h2> <p>
+Tiber365 ("we", "our", or "us") is committed to protecting your privacy and personal data. This Privacy Policy explains how we collect, use, and protect your personal information in accordance with the General Data Protection Regulation (GDPR) and Dutch privacy laws.
+</p> </section> <section class="mb-12"> <h2>2. Data Controller</h2> <p>
+Tiber365<br>
+Italy<br>
+Email: info@tiber365.it
+</p> <p>
+For privacy-related inquiries, you can contact our Data Protection Officer at privacy@tiber365.it.
+</p> </section> <section class="mb-12"> <h2>3. Personal Data We Collect</h2> <p>We collect and process the following types of personal data:</p> <ul> <li>Contact information (name, email, phone number, company name)</li> <li>Technical data (IP address, browser type, device information)</li> <li>Usage data (how you interact with our website and services)</li> <li>Communication data (messages you send us through our contact form)</li> <li>Service data (information related to the IT services we provide)</li> </ul> </section> <section class="mb-12"> <h2>4. Legal Basis for Processing</h2> <p>We process your personal data based on the following legal grounds:</p> <ul> <li>Contract performance (when providing our IT services)</li> <li>Legal obligations (compliance with Dutch and EU laws)</li> <li>Legitimate interests (improving our services and communication)</li> <li>Consent (for marketing communications and cookies)</li> </ul> </section> <section class="mb-12"> <h2>5. How We Use Your Data</h2> <p>We use your personal data for:</p> <ul> <li>Providing and managing our IT services</li> <li>Communicating with you about our services</li> <li>Improving our website and services</li> <li>Complying with legal obligations</li> <li>Sending you marketing communications (with your consent)</li> </ul> </section> <section class="mb-12"> <h2>6. Data Sharing and Transfers</h2> <p>
+We may share your data with:
+</p> <ul> <li>Service providers (hosting, email, analytics)</li> <li>Professional advisers (lawyers, accountants)</li> <li>Authorities (when legally required)</li> </ul> <p>
+Data transfers outside the EU/EEA are protected by appropriate safeguards (Standard Contractual Clauses).
+</p> </section> <section class="mb-12"> <h2>7. Data Retention</h2> <p>
+We retain your personal data only for as long as necessary to fulfill the purposes for which it was collected, including legal requirements and accounting purposes.
+</p> </section> <section class="mb-12"> <h2>8. Your Rights</h2> <p>Under GDPR and Dutch privacy laws, you have the right to:</p> <ul> <li>Access your personal data</li> <li>Correct inaccurate data</li> <li>Request deletion of your data</li> <li>Object to processing</li> <li>Data portability</li> <li>Withdraw consent</li> </ul> <p>
+To exercise these rights, contact us at privacy@tiber365.it. We'll respond within 30 days.
+</p> </section> <section class="mb-12"> <h2>9. Cookies and Tracking</h2> <p>
+We use cookies and similar technologies to improve your browsing experience. You can manage cookie preferences through your browser settings.
+</p> </section> <section class="mb-12"> <h2>10. Security</h2> <p>
+We implement appropriate technical and organizational measures to protect your personal data against unauthorized access, alteration, disclosure, or destruction.
+</p> </section> <section class="mb-12"> <h2>11. Changes to This Policy</h2> <p>
+We may update this Privacy Policy periodically. We will notify you of any material changes by posting the new policy on this page.
+</p> </section> <section class="mb-12"> <h2>12. Complaints</h2> <p>
+If you have concerns about how we process your personal data, please contact us first. You also have the right to file a complaint with the Dutch Data Protection Authority (Autoriteit Persoonsgegevens).
+</p> </section> <section class="mb-12"> <h2>13. Contact Us</h2> <p>
+For any privacy-related questions or requests, please contact us at:<br>
+Email: privacy@tiber365.it<br>
+Phone: +39 123 456 7890
+</p> </section> </article> </div> </main> ${renderComponent($$result2, "Footer", $$Footer, {})} ` })}`;
+}, "/Users/richard/Website Development/tiber365/src/pages/privacy.astro", void 0);
+
+const $$file = "/Users/richard/Website Development/tiber365/src/pages/privacy.astro";
+const $$url = "/privacy";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: $$Privacy,
+  file: $$file,
+  url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };
--- a/dist/pages/services.astro.mjs
+++ b/dist/pages/services.astro.mjs
@@ -0,0 +1,134 @@
+import '../chunks/page-ssr_ChKiSmuh.mjs';
+import { c as createComponent, r as renderComponent, a as renderTemplate, m as maybeRenderHead, b as addAttribute } from '../chunks/astro/server_DJC9Xx9K.mjs';
+import 'kleur/colors';
+import { t, $ as $$BaseLayout, S as SERVICES, a as $$Header, b as $$Footer } from '../chunks/Footer_BFBz0LQo.mjs';
+import { $ as $$CTA } from '../chunks/CTA_CIVpts3M.mjs';
+export { renderers } from '../renderers.mjs';
+
+const $$Services = createComponent(($$result, $$props, $$slots) => {
+  const getServiceDetails = (serviceId) => {
+    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: []
+        };
+    }
+  };
+  return renderTemplate`${renderComponent($$result, "BaseLayout", $$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." }, { "default": ($$result2) => renderTemplate` ${renderComponent($$result2, "Header", $$Header, {})} ${maybeRenderHead()}<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 renderTemplate`<div${addAttribute(service.id, "id")}${addAttribute(`grid grid-cols-1 lg:grid-cols-2 gap-12 items-start animate-on-scroll ${index % 2 === 1 ? "lg:grid-flow-col-reverse" : ""}`, "class")}> <!-- 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" && renderTemplate`<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) => renderTemplate`<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"></path> </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) => renderTemplate`<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="/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"></path> </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) => renderTemplate`<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"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">${t(feature)}</h4> <p class="text-sm text-muted-foreground">  ${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> ${renderComponent($$result2, "CTA", $$CTA, {})} </main> ${renderComponent($$result2, "Footer", $$Footer, {})} ` })}`;
+}, "/Users/richard/Website Development/tiber365/src/pages/services.astro", void 0);
+
+const $$file = "/Users/richard/Website Development/tiber365/src/pages/services.astro";
+const $$url = "/services";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: $$Services,
+  file: $$file,
+  url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };
--- a/dist/pages/terms.astro.mjs
+++ b/dist/pages/terms.astro.mjs
@@ -0,0 +1,59 @@
+import '../chunks/page-ssr_ChKiSmuh.mjs';
+import { c as createComponent, r as renderComponent, a as renderTemplate, m as maybeRenderHead } from '../chunks/astro/server_DJC9Xx9K.mjs';
+import 'kleur/colors';
+import { t, $ as $$BaseLayout, a as $$Header, b as $$Footer } from '../chunks/Footer_BFBz0LQo.mjs';
+export { renderers } from '../renderers.mjs';
+
+const $$Terms = createComponent(($$result, $$props, $$slots) => {
+  return renderTemplate`${renderComponent($$result, "BaseLayout", $$BaseLayout, { "title": `${t("footer.links.terms")} | ${t("meta.title")}`, "description": "Terms of Service for Tiber365 - Understanding our service agreement and legal terms in compliance with European and Dutch laws." }, { "default": ($$result2) => renderTemplate` ${renderComponent($$result2, "Header", $$Header, {})} ${maybeRenderHead()}<main class="py-16 bg-background"> <div class="container-custom"> <article class="prose prose-lg dark:prose-invert max-w-4xl mx-auto"> <h1 class="text-4xl font-display font-bold mb-8">${t("footer.links.terms")}</h1> <div class="mb-8 text-sm text-muted-foreground">
+Last updated: ${(/* @__PURE__ */ new Date()).toLocaleDateString()} </div> <section class="mb-12"> <h2>1. Introduction</h2> <p>
+These Terms of Service ("Terms") govern your use of Tiber365's website and services. By accessing our website or using our services, you agree to be bound by these Terms. If you disagree with any part of these terms, please do not use our services.
+</p> </section> <section class="mb-12"> <h2>2. Company Information</h2> <p>
+Tiber365<br>
+Registered in Italy<br>
+Email: info@tiber365.it<br>
+Phone: +39 123 456 7890
+</p> </section> <section class="mb-12"> <h2>3. Services</h2> <p>
+We provide IT services including:
+</p> <ul> <li>Microsoft 365 support and management</li> <li>Networking and infrastructure solutions</li> <li>Web hosting and management</li> <li>Custom IT projects</li> </ul> <p>
+Service specifics will be detailed in individual service agreements.
+</p> </section> <section class="mb-12"> <h2>4. Service Agreement</h2> <p>
+Upon engaging our services:
+</p> <ul> <li>We will provide services as specified in the service agreement</li> <li>You agree to provide necessary information and access for service delivery</li> <li>You will maintain the confidentiality of any access credentials provided</li> <li>You will use the services in compliance with applicable laws</li> </ul> </section> <section class="mb-12"> <h2>5. Intellectual Property</h2> <p>
+All content on our website and services, including but not limited to text, graphics, logos, and software, is our property or that of our licensors and is protected by intellectual property laws.
+</p> </section> <section class="mb-12"> <h2>6. User Obligations</h2> <p>You agree to:</p> <ul> <li>Provide accurate and complete information</li> <li>Maintain the security of your account</li> <li>Not use our services for illegal purposes</li> <li>Not interfere with the proper functioning of our services</li> <li>Comply with all applicable laws and regulations</li> </ul> </section> <section class="mb-12"> <h2>7. Payment Terms</h2> <p>
+Payment terms, including fees, billing cycles, and payment methods, will be specified in your service agreement. Late payments may result in service suspension.
+</p> </section> <section class="mb-12"> <h2>8. Liability</h2> <p>
+To the extent permitted by law:
+</p> <ul> <li>We provide services "as is" without warranties</li> <li>We are not liable for indirect, consequential, or incidental damages</li> <li>Our liability is limited to the amount paid for services in the previous 12 months</li> </ul> </section> <section class="mb-12"> <h2>9. Data Protection</h2> <p>
+We process personal data in accordance with our Privacy Policy and applicable data protection laws (GDPR and Dutch privacy laws).
+</p> </section> <section class="mb-12"> <h2>10. Service Availability</h2> <p>
+While we strive for high availability, we do not guarantee uninterrupted service. We will provide notice of scheduled maintenance when possible.
+</p> </section> <section class="mb-12"> <h2>11. Termination</h2> <p>
+Either party may terminate services according to the terms in the service agreement. Upon termination:
+</p> <ul> <li>All access to services will cease</li> <li>You remain liable for any outstanding payments</li> <li>We will assist with data transition as specified in the service agreement</li> </ul> </section> <section class="mb-12"> <h2>12. Changes to Terms</h2> <p>
+We may modify these Terms at any time. Continued use of our services after changes constitutes acceptance of the modified Terms.
+</p> </section> <section class="mb-12"> <h2>13. Governing Law</h2> <p>
+These Terms are governed by Dutch law. Any disputes will be subject to the exclusive jurisdiction of the Dutch courts.
+</p> </section> <section class="mb-12"> <h2>14. Severability</h2> <p>
+If any provision of these Terms is found to be unenforceable, the remaining provisions will remain in effect.
+</p> </section> <section class="mb-12"> <h2>15. Contact</h2> <p>
+For questions about these Terms, please contact us at:<br>
+Email: legal@tiber365.it<br>
+Phone: +39 123 456 7890
+</p> </section> </article> </div> </main> ${renderComponent($$result2, "Footer", $$Footer, {})} ` })}`;
+}, "/Users/richard/Website Development/tiber365/src/pages/terms.astro", void 0);
+
+const $$file = "/Users/richard/Website Development/tiber365/src/pages/terms.astro";
+const $$url = "/terms";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: $$Terms,
+  file: $$file,
+  url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };