first commit
This commit is contained in:
María
46
pages/[langcode]/index.vue
Normal file
46
pages/[langcode]/index.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<main v-if="consumoComponents" class="min-h-screen relative mx-4 md:mx-8">
|
||||
<template v-for="(component, index) in consumoComponents" :key="`consumo-component-${component.component}-${index}`">
|
||||
<component
|
||||
:is="component.component"
|
||||
v-if="component"
|
||||
v-bind="component.props" />
|
||||
</template>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeroPages from '~/components/HeroPages.vue';
|
||||
import SectionWithCardsAndForm from '../../components/SectionWithCardsAndForm.vue';
|
||||
import TextWithIconAndButtons from '../../components/TextWithIconAndButtons.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
HeroPages,
|
||||
TextWithIconAndButtons,
|
||||
SectionWithCardsAndForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
consumoComponents: []
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
const langcode = this.$route.params.langcode;
|
||||
try {
|
||||
const res = await import(`~/data/${langcode}/index.json`);
|
||||
this.consumoComponents = res.default;
|
||||
} catch (err) {
|
||||
console.error('Error al cargar contenido:', err);
|
||||
this.consumoComponents = [
|
||||
{
|
||||
component: 'ErrorComponent',
|
||||
props: {
|
||||
message: 'Contenido no disponible',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
20
pages/index.vue
Normal file
20
pages/index.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>{{ lang }}</h1>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lang: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const langcode = this.$store.getters['langcode'];
|
||||
this.lang = langcode;
|
||||
|
||||
this.$router.replace(`/${langcode}`);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
228
pages/typography-and-colours.vue
Normal file
228
pages/typography-and-colours.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<main class="p-5 container mx-auto">
|
||||
<NuxtLink to="/" class="my-16">Back</NuxtLink>
|
||||
<section class="text-sm">
|
||||
<h2 class="my-4 text-center text-4xl">Colours</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-8">
|
||||
<!-- Consumo -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-2">Consumo</h3>
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-consumo-base"></div>
|
||||
<p>consumo-base</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-consumo-light"></div>
|
||||
<p>consumo-light</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-consumo-extra-light"></div>
|
||||
<p>consumo-extra-light</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Iguales -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-2">Iguales</h3>
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-iguales-base"></div>
|
||||
<p>iguales-base</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-iguales-light"></div>
|
||||
<p>iguales-light</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-iguales-extra-light"></div>
|
||||
<p>iguales-extra-light</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Aula -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-2">Aula</h3>
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-aula-base"></div>
|
||||
<p>aula-base</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-aula-light"></div>
|
||||
<p>aula-light</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-aula-extra-light"></div>
|
||||
<p>aula-extra-light</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Certifica -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-2">Certifica</h3>
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-certifica-base"></div>
|
||||
<p>certifica-base</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-certifica-light"></div>
|
||||
<p>certifica-light</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-certifica-extra-light"></div>
|
||||
<p>certifica-extra-light</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Foro -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-2">Foro</h3>
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-foro-base"></div>
|
||||
<p>foro-base</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-foro-light"></div>
|
||||
<p>foro-light</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-foro-extra-light"></div>
|
||||
<p>foro-extra-light</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- ODS -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-2">ODS</h3>
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-ods-base"></div>
|
||||
<p>ods-base</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-ods-light"></div>
|
||||
<p>ods-light</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-ods-extra-light"></div>
|
||||
<p>ods-extra-light</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Background -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-2">Background</h3>
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-background-dark"></div>
|
||||
<p>background-dark</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-background-dark-2"></div>
|
||||
<p>background-dark-2</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-background-light"></div>
|
||||
<p>background-light</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-background-extra-light"></div>
|
||||
<p>background-extra-light</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Buttons -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-2">Buttons</h3>
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-button"></div>
|
||||
<p>button</p>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 bg-button-hover"></div>
|
||||
<p>button-hover</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text-sm mt-16">
|
||||
<h2 class="my-4 text-center text-4xl">Fonts</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-2">Barlow Semi Condensed</h3>
|
||||
<p class="font-barlow-semi-condensed text-base">This is a sample text in Barlow Semi Condensed.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-2">Barlow</h3>
|
||||
<p class="font-barlow text-base">This is a sample text in Barlow.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-lg font-semibold mb-2">Font Sizes</h3>
|
||||
<ul class="flex flex-col gap-4">
|
||||
<li class="flex justify-between py-2 border-t border-t-black">
|
||||
<h4 class="text-lg w-1/3">Heading H1 (48px) - <span class="italic text-gray-400">Tailwind Text 5XL</span></h4>
|
||||
<p class="text-5xl w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
||||
</li>
|
||||
<li class="flex justify-between py-2 border-t border-t-black">
|
||||
<h4 class="text-lg w-1/3">Heading H2 (36px) - <span class="italic text-gray-400">Tailwind Text 4XL</span></h4>
|
||||
<p class="text-4xl w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
||||
</li>
|
||||
<li class="flex justify-between py-2 border-t border-t-black">
|
||||
<h4 class="text-lg w-1/3">Heading H3 (32px) - <span class="italic text-gray-400">Tailwind Text 8</span></h4>
|
||||
<p class="text-8 w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
||||
</li>
|
||||
<li class="flex justify-between py-2 border-t border-t-black">
|
||||
<h4 class="text-lg w-1/3">Heading H4 (22px) - <span class="italic text-gray-400">Tailwind Text 5.5</span></h4>
|
||||
<p class="text-5.5 w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
||||
</li>
|
||||
<li class="flex justify-between py-2 border-t border-t-black">
|
||||
<h4 class="text-lg w-1/3">Heading H5 (16px) - <span class="italic text-gray-400">Tailwind Text Base</span></h4>
|
||||
<p class="text-base w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
||||
</li>
|
||||
<li class="flex justify-between py-2 border-t border-t-black">
|
||||
<h4 class="text-lg w-1/3">Body-Text-2-Extra-Large (24px) - <span class="italic text-gray-400">Tailwind Text 2XL</span></h4>
|
||||
<p class="text-2xl w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
||||
</li>
|
||||
<li class="flex justify-between py-2 border-t border-t-black">
|
||||
<h4 class="text-lg w-1/3">Body-Text-Extra-Large (18px) - <span class="italic text-gray-400">Tailwind Text LG</span></h4>
|
||||
<p class="text-lg w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
||||
</li>
|
||||
<li class="flex justify-between py-2 border-t border-t-black">
|
||||
<h4 class="text-lg w-1/3">Body-Text-Large (16px) - <span class="italic text-gray-400">Tailwind Text Base</span></h4>
|
||||
<p class="text-base w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
||||
</li>
|
||||
<li class="flex justify-between py-2 border-t border-t-black">
|
||||
<h4 class="text-lg w-1/3">Body-Text-Medium (14px) - <span class="italic text-gray-400">Tailwind Text SM</span></h4>
|
||||
<p class="text-sm w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
||||
</li>
|
||||
<li class="flex justify-between py-2 border-t border-t-black">
|
||||
<h4 class="text-lg w-1/3">Body-Text-Small (12px) - <span class="italic text-gray-400">Tailwind Text XS</span></h4>
|
||||
<p class="text-xs w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
||||
</li>
|
||||
<li class="flex justify-between py-2 border-t border-t-black">
|
||||
<h4 class="text-lg w-1/3">Text Button (16px) - <span class="italic text-gray-400">Tailwind Text Base</span></h4>
|
||||
<p class="text-base w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user