153 lines
9.0 KiB
JavaScript
153 lines
9.0 KiB
JavaScript
import "../components/HeroBanner.vue.mjs";
|
|
import __nuxt_component_0 from "../node_modules/nuxt/dist/app/components/nuxt-link.mjs";
|
|
import { defineComponent, withCtx, createTextVNode, createVNode, toDisplayString } from "vue";
|
|
import { ssrRenderAttrs, ssrRenderComponent, ssrInterpolate, ssrRenderList, ssrRenderClass } from "vue/server-renderer";
|
|
import { useI18n } from "vue-i18n";
|
|
import _sfc_main$1 from "../components/HeroBanner.vue2.mjs";
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "products",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const { t } = useI18n();
|
|
const productCategories = [
|
|
{
|
|
icon: "fas fa-server",
|
|
nameKey: "products.categories.compute.name",
|
|
descriptionKey: "products.categories.compute.description"
|
|
},
|
|
{
|
|
icon: "fas fa-database",
|
|
nameKey: "products.categories.storage.name",
|
|
descriptionKey: "products.categories.storage.description"
|
|
},
|
|
{
|
|
icon: "fas fa-sitemap",
|
|
nameKey: "products.categories.network.name",
|
|
descriptionKey: "products.categories.network.description"
|
|
},
|
|
{
|
|
icon: "fas fa-shield-alt",
|
|
nameKey: "products.categories.security.name",
|
|
descriptionKey: "products.categories.security.description"
|
|
},
|
|
{
|
|
icon: "fas fa-chart-line",
|
|
nameKey: "products.categories.monitoring.name",
|
|
descriptionKey: "products.categories.monitoring.description"
|
|
},
|
|
{
|
|
icon: "fas fa-robot",
|
|
nameKey: "products.categories.ai.name",
|
|
descriptionKey: "products.categories.ai.description"
|
|
}
|
|
];
|
|
const products = [
|
|
{
|
|
icon: "fas fa-server",
|
|
nameKey: "products.productList.ec2.name",
|
|
descriptionKey: "products.productList.ec2.description",
|
|
features: [
|
|
"products.productList.ec2.features[0]",
|
|
"products.productList.ec2.features[1]",
|
|
"products.productList.ec2.features[2]",
|
|
"products.productList.ec2.features[3]"
|
|
],
|
|
pricing: t("products.productList.ec2.pricing")
|
|
},
|
|
{
|
|
icon: "fas fa-database",
|
|
nameKey: "products.productList.s3.name",
|
|
descriptionKey: "products.productList.s3.description",
|
|
features: [
|
|
"products.productList.s3.features[0]",
|
|
"products.productList.s3.features[1]",
|
|
"products.productList.s3.features[2]",
|
|
"products.productList.s3.features[3]"
|
|
],
|
|
pricing: t("products.productList.s3.pricing")
|
|
},
|
|
{
|
|
icon: "fas fa-table",
|
|
nameKey: "products.productList.rds.name",
|
|
descriptionKey: "products.productList.rds.description",
|
|
features: [
|
|
"products.productList.rds.features[0]",
|
|
"products.productList.rds.features[1]",
|
|
"products.productList.rds.features[2]",
|
|
"products.productList.rds.features[3]"
|
|
],
|
|
pricing: t("products.productList.rds.pricing")
|
|
}
|
|
];
|
|
const advantages = [
|
|
{
|
|
icon: "fas fa-tachometer-alt",
|
|
titleKey: "products.advantages.deployment.title",
|
|
descriptionKey: "products.advantages.deployment.description"
|
|
},
|
|
{
|
|
icon: "fas fa-hand-holding-usd",
|
|
titleKey: "products.advantages.cost.title",
|
|
descriptionKey: "products.advantages.cost.description"
|
|
},
|
|
{
|
|
icon: "fas fa-lock",
|
|
titleKey: "products.advantages.security.title",
|
|
descriptionKey: "products.advantages.security.description"
|
|
},
|
|
{
|
|
icon: "fas fa-headset",
|
|
titleKey: "products.advantages.support.title",
|
|
descriptionKey: "products.advantages.support.description"
|
|
}
|
|
];
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_HeroBanner = _sfc_main$1;
|
|
const _component_NuxtLink = __nuxt_component_0;
|
|
_push(`<div${ssrRenderAttrs(_attrs)}>`);
|
|
_push(ssrRenderComponent(_component_HeroBanner, {
|
|
title: _ctx.$t("products.hero.title"),
|
|
subtitle: _ctx.$t("products.hero.subtitle")
|
|
}, null, _parent));
|
|
_push(`<section class="section"><div class="container"><div class="max-w-4xl mx-auto text-center mb-16"><h2 class="text-4xl font-bold text-[#333333] mb-4">${ssrInterpolate(_ctx.$t("products.categories.title"))}</h2><p class="text-xl text-gray-600 leading-relaxed">${ssrInterpolate(_ctx.$t("products.categories.subtitle"))}</p></div><div class="grid md:grid-cols-3 gap-8"><!--[-->`);
|
|
ssrRenderList(productCategories, (category, index) => {
|
|
_push(`<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"><div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-6"><i class="${ssrRenderClass(["text-secondary text-2xl", category.icon])}"></i></div><h3 class="text-xl font-semibold mb-4">${ssrInterpolate(_ctx.$t(category.nameKey))}</h3><p class="text-gray-600 leading-relaxed mb-6">${ssrInterpolate(_ctx.$t(category.descriptionKey))}</p><a href="#product-list" class="inline-flex items-center text-secondary hover:text-secondary/90">${ssrInterpolate(_ctx.$t("products.categories.viewProducts"))} <i class="fas fa-arrow-right ml-2"></i></a></div>`);
|
|
});
|
|
_push(`<!--]--></div></div></section><section id="product-list" class="py-20 bg-gray-50"><div class="container"><div class="max-w-4xl mx-auto text-center mb-16"><h2 class="text-4xl font-bold text-[#333333] mb-4">${ssrInterpolate(_ctx.$t("products.productList.title"))}</h2><p class="text-xl text-gray-600 leading-relaxed">${ssrInterpolate(_ctx.$t("products.productList.subtitle"))}</p></div><div class="space-y-12"><!--[-->`);
|
|
ssrRenderList(products, (product, index) => {
|
|
_push(`<div class="bg-white rounded-lg shadow-lg overflow-hidden"><div class="grid md:grid-cols-3"><div class="bg-gradient-to-br from-secondary/20 to-secondary/10 flex items-center justify-center p-8"><i class="${ssrRenderClass(["text-8xl text-secondary", product.icon])}"></i></div><div class="md:col-span-2 p-8"><h3 class="text-2xl font-semibold mb-4">${ssrInterpolate(_ctx.$t(product.nameKey))}</h3><p class="text-gray-600 leading-relaxed mb-6">${ssrInterpolate(_ctx.$t(product.descriptionKey))}</p><div class="mb-6"><h4 class="text-lg font-semibold mb-2">${ssrInterpolate(_ctx.$t("products.productList.advantages"))}</h4><ul class="space-y-2"><!--[-->`);
|
|
ssrRenderList(product.features, (feature, idx) => {
|
|
_push(`<li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i><span class="text-gray-600">${ssrInterpolate(_ctx.$t(feature))}</span></li>`);
|
|
});
|
|
_push(`<!--]--></ul></div><div class="flex justify-between items-center"><a href="#contact" class="btn-primary">${ssrInterpolate(_ctx.$t("products.productList.inquiry"))}</a><span class="text-gray-500">${ssrInterpolate(_ctx.$t("products.productList.pricing"))}: ${ssrInterpolate(product.pricing)}</span></div></div></div></div>`);
|
|
});
|
|
_push(`<!--]--></div></div></section><section class="py-20"><div class="container"><div class="max-w-4xl mx-auto text-center mb-16"><h2 class="text-4xl font-bold text-[#333333] mb-4">${ssrInterpolate(_ctx.$t("products.advantages.title"))}</h2><p class="text-xl text-gray-600 leading-relaxed">${ssrInterpolate(_ctx.$t("products.advantages.subtitle"))}</p></div><div class="grid md:grid-cols-4 gap-8"><!--[-->`);
|
|
ssrRenderList(advantages, (advantage, index) => {
|
|
_push(`<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center"><div class="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-6"><i class="${ssrRenderClass(["text-accent text-2xl", advantage.icon])}"></i></div><h3 class="text-xl font-semibold mb-4">${ssrInterpolate(_ctx.$t(advantage.titleKey))}</h3><p class="text-gray-600 leading-relaxed">${ssrInterpolate(_ctx.$t(advantage.descriptionKey))}</p></div>`);
|
|
});
|
|
_push(`<!--]--></div></div></section><section id="contact" class="py-16 bg-primary text-white"><div class="container text-center"><h2 class="text-4xl font-bold mb-6">${ssrInterpolate(_ctx.$t("products.contact.title"))}</h2><p class="text-xl mb-8 max-w-2xl mx-auto leading-relaxed">${ssrInterpolate(_ctx.$t("products.contact.subtitle"))}</p>`);
|
|
_push(ssrRenderComponent(_component_NuxtLink, {
|
|
to: "/contact",
|
|
class: "inline-flex items-center bg-white text-black px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors duration-300 text-lg font-semibold"
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`${ssrInterpolate(_ctx.$t("products.contact.button"))} <i class="fas fa-arrow-right ml-2"${_scopeId}></i>`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(_ctx.$t("products.contact.button")) + " ", 1),
|
|
createVNode("i", { class: "fas fa-arrow-right ml-2" })
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`</div></section></div>`);
|
|
};
|
|
}
|
|
});
|
|
export {
|
|
_sfc_main as default
|
|
};
|
|
//# sourceMappingURL=products.vue2.mjs.map
|