- 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.
59 lines
11 KiB
JavaScript
59 lines
11 KiB
JavaScript
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 };
|