@burh/nuxt-core 1.0.161 → 1.0.162

package/components/burh-ds/Curriculum/UserCurriculum/UserCvMiddle.vue

@@ -1,300 +1,339 @@
-<template>
-	<div class="bg-white content-middle">
-		<!-- FERRAMENTAS -->
-		<div class="tools mt-3">
-			<button
-				@click="$emit(tool.event)"
-				class="ml-3"
-				v-for="(tool, index) in tools"
-				:key="index"
-			>
-				{{ tool.name }}
-			</button>
-		</div>
-
-		<!-- SOBRE -->
-		<div
-			v-show="userData.user_complementary_information.about"
-			class="about content-block mt-5 ml-3 mr-3"
-		>
-			<h5 class="font-weight-bold">Sobre</h5>
-			<p
-				id="USER_ABOUT"
-				class="mb-0"
-				:class="
-					!wordIsLesserThan(
-						userData.user_complementary_information.about
-					) && 'readmore'
-				"
-			>
-				{{ userData.user_complementary_information.about }}
-			</p>
-			<a
-				href="#"
-				aria-label="expandir conteudo"
-				v-show="
-					userData.user_complementary_information.about &&
-						!wordIsLesserThan(
-							userData.user_complementary_information.about
-						)
-				"
-				@click.prevent.stop="toggleReadMore($event, 'USER_ABOUT')"
-			>Ler mais</a
-			>
-		</div>
-
-		<!-- EDUCAÇÃO -->
-		<h5 class="font-weight-bold mt-4 ml-3">Educação</h5>
-		<div
-			v-show="userData.user_education.length > 0"
-			class="education ml-3"
-			v-for="(edu, index) in userData.user_education"
-			:key="index"
-		>
-			<p class="sub-title">{{ edu.formation }}</p>
-			<p class="info-text">{{ edu.institution }}</p>
-			<span class="info-text">
-				{{ edu.start_month }}/{{ edu.start_year }} -
-				{{ treatEndDate(edu.end_month, edu.end_year) }}
-				{{ getTime(false, edu) }}
-				{{
-					edu.user_education_period
-						? '-' + edu.user_education_period.name
-						: ''
-				}}
-			</span>
-		</div>
-
-		<!-- EXPERIÊNCIAS -->
-		<h5 class="font-weight-bold mt-4 ml-3">Experiência</h5>
-		<div
-			v-show="userData.user_experience.length > 0"
-			class="experience ml-3 mr-3"
-			v-for="(exp, index) in userData.user_experience"
-			:key="`experience-${index}`"
-		>
-			<p class="sub-title">{{ exp.job_title }}</p>
-			<p class="info-text">{{ exp.company }}, {{ exp.location }}</p>
-			<span class="info-text">
-				{{ exp.start_month }}/{{ exp.start_year }} -
-				{{ treatEndDate(exp.end_month, exp.end_year) }}
-				{{ getTime(true, exp) }}
-			</span>
-
-			<p
-				:id="`USER_EXPERIENCE-${index}`"
-				class="description mt-4 mb-0"
-				:class="!wordIsLesserThan(exp.description) && 'readmore'"
-			>
-				{{ exp.description }}
-			</p>
-
-			<a
-				href="#"
-				aria-label="expandir conteudo"
-				v-show="!wordIsLesserThan(exp.description)"
-				@click.prevent.stop="
-					toggleReadMore($event, `USER_EXPERIENCE-${index}`)
-				"
-			>Ler mais</a
-			><br /><br />
-		</div>
-
-		<!-- CURSOS -->
-		<h5 class="font-weight-bold mt-1 ml-3">Cursos</h5>
-		<div
-			v-show="userData.user_course.length > 0"
-			class="courses ml-3"
-			v-for="(cou, index) in userData.user_course"
-			:key="`course-${index}`"
-		>
-			<p class="sub-title">{{ cou.institution }}</p>
-			<p class="info-text mb-3">
-				{{ cou.name }} - {{ cou.end_year }}
-				{{ getTime(false, cou) }}
-			</p>
-		</div>
-	</div>
-</template>
-
-<script>
-import getPrefixes from '~/util/getPrefixes.js';
-
-export default {
-	name: 'user-cv-middle',
-	props: {
-		userData: Object,
-		tools: {
-			type: Array,
-			default: () => []
-		}
-	},
-	methods: {
-		toggleReadMore(event, id) {
-			const element = document.getElementById(id);
-			element.classList.toggle('readmore');
-			event.target.innerText == 'Ler mais'
-				? (event.target.innerText = 'Esconder')
-				: (event.target.innerText = 'Ler mais');
-		},
-		getTime(
-			isExperience,
-			{ start_year = null, end_year = null, start_month, end_month },
-			textHappening = 'Cursando'
-		) {
-			const isHappening = !end_month && !end_year;
-
-			if (isHappening) {
-				return isExperience === true ? 'Atualmente' : textHappening;
-			}
-
-			const dateInitial = this.$moment(
-				['1', start_month.toString(), start_year.toString()],
-				'DD/MM/YYYY'
-			);
-			const dateDone = this.$moment(
-				['1', end_month.toString(), end_year.toString()],
-				'DD/MM/YYYY'
-			);
-			const diffDuration = this.$moment.duration(
-				dateDone.diff(dateInitial)
-			);
-			const years = diffDuration.years();
-			const months = diffDuration.months();
-
-			if (years) {
-				return years > 1 ? `(${years} anos)` : `(${years} ano)`;
-			}
-
-			return months > 1
-				? `(${months} meses)`
-				: months == 1
-					? `(${months} mês)`
-					: '';
-		},
-		languageLevel(level) {
-			switch (parseInt(level)) {
-			case 1:
-				return 'Iniciante';
-			case 2:
-				return 'Elementar';
-			case 3:
-				return 'Pré-intermediário';
-			case 4:
-				return 'Intermediário';
-			case 5:
-				return 'Intermediário Superior';
-			case 6:
-				return 'Avançado';
-			case 7:
-				return 'Fluente';
-			default:
-				return '';
-			}
-		},
-		treatPhone(phone) {
-			if (phone) {
-				if (phone == '0' || phone.length < 9 || !phone) {
-					return 'não cadastrado';
-				}
-			}
-
-			return phone;
-		},
-		treatCellphone(cellphone) {
-			if (cellphone) {
-				if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
-					return 'não cadastrado';
-				}
-			}
-
-			return cellphone;
-		},
-		handleGetPrefixes(name = '') {
-			return getPrefixes(name);
-		},
-		treatEndDate(end_month, end_year) {
-			if (end_month && end_year) {
-				return `${end_month}/${end_year}`;
-			}
-			return '';
-		},
-		wordIsLesserThan(word, value = 300) {
-			return word && word.length < value;
-		}
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
-.content-middle {
-    width: 50%;
-    border-right: 1px solid #ececec5c;
-    word-break: break-word !important;
-}
-
-.readmore {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-}
-
-.tools {
-    flex-wrap: wrap;
-    button {
-        width: 117px;
-        height: 29px;
-        border: none;
-        margin-top: 15px;
-
-        background: #5983fe;
-        border-radius: 16px;
-        color: #fff;
-
-        font-size: 12px;
-        font-weight: 600;
-    }
-}
-
-.education {
-    margin-top: 15px;
-}
-
-.experience {
-    .description {
-        font-size: 14px;
-        color: #62778c;
-    }
-
-    a {
-        margin-bottom: 1px;
-    }
-}
-
-.sub-title {
-    margin-bottom: 1px;
-
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 21px;
-    color: #62778c;
-    text-transform: uppercase;
-}
-
-.info-text {
-    margin-bottom: 1px;
-
-    font-size: 14px;
-    color: #8da2b5;
-}
-
-.content-block {
-    p {
-        font-size: 14px;
-        color: #62778c;
-    }
-}
-</style>
+<template>
+	<div class="bg-white content-middle">
+		<!-- FERRAMENTAS -->
+		<div class="tools mt-3">
+			<button
+				@click="$emit(tool.event)"
+				class="ml-3"
+				v-for="(tool, index) in tools"
+				:key="index"
+			>
+				{{ tool.name }}
+			</button>
+		</div>
+
+		<!-- SOBRE -->
+		<div
+			v-show="userData.user_complementary_information.about"
+			class="about content-block mt-5 ml-3 mr-3"
+		>
+			<h5 class="font-weight-bold">Sobre</h5>
+			<p
+				id="USER_ABOUT"
+				class="mb-0"
+				:class="
+					!wordIsLesserThan(
+						userData.user_complementary_information.about
+					) && 'readmore'
+				"
+			>
+				{{ userData.user_complementary_information.about }}
+			</p>
+			<a
+				href="#"
+				aria-label="expandir conteudo"
+				v-show="
+					userData.user_complementary_information.about &&
+						!wordIsLesserThan(
+							userData.user_complementary_information.about
+						)
+				"
+				@click.prevent.stop="toggleReadMore($event, 'USER_ABOUT')"
+			>Ler mais</a
+			>
+		</div>
+
+		<!-- EDUCAÇÃO -->
+		<h5 class="font-weight-bold mt-4 ml-3">Educação</h5>
+		<div
+			v-show="userData.user_education.length > 0"
+			class="education ml-3"
+			v-for="(edu, index) in filterByDate(userData.user_education, 'old')"
+			:key="index"
+		>
+			<p class="sub-title">{{ edu.formation }}</p>
+			<p class="info-text">{{ edu.institution }}</p>
+			<span class="info-text">
+				{{ edu.start_month }}/{{ edu.start_year }} -
+				{{ treatEndDate(edu.end_month, edu.end_year) }}
+				{{ getTime(false, edu) }}
+				{{
+					edu.user_education_period
+						? '-' + edu.user_education_period.name
+						: ''
+				}}
+			</span>
+		</div>
+
+		<!-- EXPERIÊNCIAS -->
+		<h5 class="font-weight-bold mt-4 ml-3">Experiência</h5>
+		<div
+			v-show="userData.user_experience.length > 0"
+			class="experience ml-3 mr-3"
+			v-for="(exp, index) in filterByDate(userData.user_experience)"
+			:key="`experience-${index}`"
+		>
+			<p class="sub-title">{{ exp.job_title }}</p>
+			<p class="info-text">{{ exp.company }}, {{ exp.location }}</p>
+			<span class="info-text">
+				{{ exp.start_month }}/{{ exp.start_year }} -
+				{{ treatEndDate(exp.end_month, exp.end_year) }}
+				{{ getTime(true, exp) }}
+			</span>
+
+			<p
+				:id="`USER_EXPERIENCE-${index}`"
+				class="description mt-4 mb-0"
+				:class="!wordIsLesserThan(exp.description) && 'readmore'"
+			>
+				{{ exp.description }}
+			</p>
+
+			<a
+				href="#"
+				aria-label="expandir conteudo"
+				v-show="!wordIsLesserThan(exp.description)"
+				@click.prevent.stop="
+					toggleReadMore($event, `USER_EXPERIENCE-${index}`)
+				"
+			>Ler mais</a
+			><br /><br />
+		</div>
+
+		<!-- CURSOS -->
+		<h5 class="font-weight-bold mt-1 ml-3">Cursos</h5>
+		<div
+			v-show="userData.user_course.length > 0"
+			class="courses ml-3"
+			v-for="(cou, index) in filterByDate(userData.user_course, 'old')"
+			:key="`course-${index}`"
+		>
+			<p class="sub-title">{{ cou.institution }}</p>
+			<p class="info-text mb-3">
+				{{ cou.name }} - {{ cou.end_year }}
+				{{ getTime(false, cou) }}
+			</p>
+		</div>
+	</div>
+</template>
+
+<script>
+import getPrefixes from '~/util/getPrefixes.js';
+
+export default {
+	name: 'user-cv-middle',
+	props: {
+		userData: Object,
+		tools: {
+			type: Array,
+			default: () => []
+		}
+	},
+	methods: {
+		filterByDate(data, by = 'new') {
+			let sortedArray = data.sort((a, b) => {
+				a = [
+					a.start_month,
+					a.start_year,
+					a.end_month | 12,
+					a.end_year | 9999
+				];
+
+				b = [
+					b.start_month,
+					b.start_year,
+					b.end_month | 12,
+					b.end_year | 9999
+				];
+
+				// Primeiro filtro -> chaves: 0 e 1 -> Filtro por data de inicio
+				// Segundo filtro -> chaves: 2 e 3 -> Filtro por data de termino (subir não concluídos para primeiros)
+
+				let byStart;
+				let byEnd;
+
+				switch (by) {
+				case 'old':
+					byStart = (new Date(a[1], a[0], 1).getTime() - new Date(b[1], b[0], 1).getTime());
+					byEnd = (new Date(b[3], b[2], 1).getTime() - new Date(a[3], a[2], 1).getTime());
+					break;
+
+				default:
+					byStart = (new Date(b[1], b[0], 1).getTime() - new Date(a[1], a[0], 1).getTime());
+					byEnd = (new Date(b[3], b[2], 1).getTime() - new Date(a[3], a[2], 1).getTime());
+					break;
+				}
+
+				return (byStart - byEnd);
+			});
+
+			return sortedArray;
+		},
+		toggleReadMore(event, id) {
+			const element = document.getElementById(id);
+			element.classList.toggle('readmore');
+			event.target.innerText == 'Ler mais'
+				? (event.target.innerText = 'Esconder')
+				: (event.target.innerText = 'Ler mais');
+		},
+		getTime(
+			isExperience,
+			{ start_year = null, end_year = null, start_month, end_month },
+			textHappening = 'Cursando'
+		) {
+			const isHappening = !end_month && !end_year;
+
+			if (isHappening) {
+				return isExperience === true ? 'Atualmente' : textHappening;
+			}
+
+			const dateInitial = this.$moment(
+				['1', start_month.toString(), start_year.toString()],
+				'DD/MM/YYYY'
+			);
+			const dateDone = this.$moment(
+				['1', end_month.toString(), end_year.toString()],
+				'DD/MM/YYYY'
+			);
+			const diffDuration = this.$moment.duration(
+				dateDone.diff(dateInitial)
+			);
+			const years = diffDuration.years();
+			const months = diffDuration.months();
+
+			if (years) {
+				return years > 1 ? `(${years} anos)` : `(${years} ano)`;
+			}
+
+			return months > 1
+				? `(${months} meses)`
+				: months == 1
+					? `(${months} mês)`
+					: '';
+		},
+		languageLevel(level) {
+			switch (parseInt(level)) {
+			case 1:
+				return 'Iniciante';
+			case 2:
+				return 'Elementar';
+			case 3:
+				return 'Pré-intermediário';
+			case 4:
+				return 'Intermediário';
+			case 5:
+				return 'Intermediário Superior';
+			case 6:
+				return 'Avançado';
+			case 7:
+				return 'Fluente';
+			default:
+				return '';
+			}
+		},
+		treatPhone(phone) {
+			if (phone) {
+				if (phone == '0' || phone.length < 9 || !phone) {
+					return 'não cadastrado';
+				}
+			}
+
+			return phone;
+		},
+		treatCellphone(cellphone) {
+			if (cellphone) {
+				if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
+					return 'não cadastrado';
+				}
+			}
+
+			return cellphone;
+		},
+		handleGetPrefixes(name = '') {
+			return getPrefixes(name);
+		},
+		treatEndDate(end_month, end_year) {
+			if (end_month && end_year) {
+				return `${end_month}/${end_year}`;
+			}
+			return '';
+		},
+		wordIsLesserThan(word, value = 300) {
+			return word && word.length < value;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+.content-middle {
+    width: 50%;
+    border-right: 1px solid #ececec5c;
+    word-break: break-word !important;
+}
+
+.readmore {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+}
+
+.tools {
+    flex-wrap: wrap;
+    button {
+        width: 117px;
+        height: 29px;
+        border: none;
+        margin-top: 15px;
+
+        background: #5983fe;
+        border-radius: 16px;
+        color: #fff;
+
+        font-size: 12px;
+        font-weight: 600;
+    }
+}
+
+.education {
+    margin-top: 15px;
+}
+
+.experience {
+    .description {
+        font-size: 14px;
+        color: #62778c;
+    }
+
+    a {
+        margin-bottom: 1px;
+    }
+}
+
+.sub-title {
+    margin-bottom: 1px;
+
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 21px;
+    color: #62778c;
+    text-transform: uppercase;
+}
+
+.info-text {
+    margin-bottom: 1px;
+
+    font-size: 14px;
+    color: #8da2b5;
+}
+
+.content-block {
+    p {
+        font-size: 14px;
+        color: #62778c;
+    }
+}
+</style>

package/components/burh-ds/Inputs/HtmlEditor.vue

@@ -1,61 +1,61 @@
-<template>
-	<client-only>
-        <text-editor
-            ref="editor"
-            v-model="value"
-            :config="editorConfig"
-        />
-	</client-only>
-</template>
-
-<script>
-export default {
-	name: 'html-editor',
-    components: {
-        'text-editor': () => { if (process.client) { return import('@blowstack/ckeditor-nuxt') } }
-    },
-    props: {
-        value: {
-            type: String,
-            default: ''
-        }
-    },
-    mounted() {
-        import('@ckeditor/ckeditor5-build-classic/build/translations/pt-br')
-    },
-    data() {
-        return {
-            editorConfig: {
-                language: 'pt-br',
-                removePlugins: [
-                    'Title',
-                    'FontBackgroundColor',
-                    'FontColor',
-                    'FontFamily',
-                    'FontSize',
-                    'Subscript',
-                    'Superscript',
-                    'BlockQuote',
-                    'PageBreak'
-                ]
-            }
-        }
-    },
-    watch: {
-        value() {
-            this.$emit("input", this.value)
-        }
-    }
-};
-</script>
-
-<style lang="scss">
-    .ck-editor {
-        margin-bottom: 20px!important;
-    }
-    .ck-content {
-        min-height: 200px;
-        max-height: 500px;
-        overflow-y: auto;
-    }
-</style>
+<template>
+	<client-only>
+        <text-editor
+            ref="editor"
+            v-model="value"
+            :config="editorConfig"
+        />
+	</client-only>
+</template>
+
+<script>
+export default {
+	name: 'html-editor',
+    components: {
+        'text-editor': () => { if (process.client) { return import('@blowstack/ckeditor-nuxt') } }
+    },
+    props: {
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    mounted() {
+        import('@ckeditor/ckeditor5-build-classic/build/translations/pt-br')
+    },
+    data() {
+        return {
+            editorConfig: {
+                language: 'pt-br',
+                removePlugins: [
+                    'Title',
+                    'FontBackgroundColor',
+                    'FontColor',
+                    'FontFamily',
+                    'FontSize',
+                    'Subscript',
+                    'Superscript',
+                    'BlockQuote',
+                    'PageBreak'
+                ]
+            }
+        }
+    },
+    watch: {
+        value() {
+            this.$emit("input", this.value)
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+    .ck-editor {
+        margin-bottom: 20px!important;
+    }
+    .ck-content {
+        min-height: 200px;
+        max-height: 500px;
+        overflow-y: auto;
+    }
+</style>

package/components/layouts/burh-ds/footer/ProductsFooter.vue

@@ -1,259 +1,259 @@
-<template>
-	<section class="products--info">
-		<header class="products--info__social--links">
-			<a href="https://www.facebook.com/burhbrasil" target="_blank" rel="noopener">
-				<i class="fab fa-facebook-f"></i>
-			</a>
-			<a href="https://www.instagram.com/burhbrasil/" target="_blank" rel="noopener">
-				<i class="fab fa-instagram"></i>
-			</a>
-			<a href="https://www.linkedin.com/company/burh/" target="_blank" rel="noopener">
-				<i class="fab fa-linkedin-in"></i>
-			</a>
-		</header>
-		<content class="products--info__content">
-			<div class="product__content">
-				<p class="product__content--title">Soluções</p>
-				<ul class="product__content--list">
-					<li>Busca Avançada</li>
-					<li>Recrutamento</li>
-					<li>Busca por Universidades</li>
-					<li>Vídeo Entrevista</li>
-					<li>Trabalhe Conosco</li>
-					<li>Universidade Corporativa</li>
-					<li>Testes Online Personalizados</li>
-					<li>Teste Profiler DISC</li>
-					<li>Buffer</li>
-					<li>Envio de SMS</li>
-				</ul>
-			</div>
-			<div class="product__content">
-				<p class="product__content--title">Segurança</p>
-				<ul class="product__content--list">
-					<li>Busca Avançada</li>
-					<li>Recrutamento</li>
-					<li>Busca por Universidades</li>
-					<li>Vídeo Entrevista</li>
-				</ul>
-				<p class="product__content--title">Planos e Preços</p>
-				<ul class="product__content--list">
-					<li>Busca Avançada</li>
-					<li>Recrutamento</li>
-					<li>Busca por Universidades</li>
-					<li>Vídeo Entrevista</li>
-				</ul>
-			</div>
-			<div class="product__content">
-				<p class="product__content--title">Recursos</p>
-				<ul class="product__content--list">
-					<li>Busca Avançada</li>
-					<li>Recrutamento</li>
-					<li>Busca por Universidades</li>
-					<li>Vídeo Entrevista</li>
-				</ul>
-			</div>
-			<div class="product__content">
-				<p class="product__content--title">Página de Carreiras</p>
-				<ul class="product__content--list">
-					<li>Busca Avançada</li>
-					<li>Recrutamento</li>
-					<li>Busca por Universidades</li>
-					<li>Vídeo Entrevista</li>
-					<li>Trabalhe Conosco</li>
-					<li>Universidade Corporativa</li>
-					<li>Testes Online Personalizados</li>
-					<li>Teste Profiler DISC</li>
-					<li>Buffer</li>
-					<li>Envio de SMS</li>
-				</ul>
-			</div>
-			<div class="product__content">
-				<p class="product__content--title">Suporte</p>
-				<ul class="product__content--list">
-					<li>Busca Avançada</li>
-					<li>Recrutamento</li>
-					<li>Busca por Universidades</li>
-					<li>Vídeo Entrevista</li>
-				</ul>
-				<p class="product__content--title">Mais sobre o Burh</p>
-				<ul class="product__content--list">
-					<li>Busca Avançada</li>
-					<li>Recrutamento</li>
-					<li>Busca por Universidades</li>
-					<li>Vídeo Entrevista</li>
-				</ul>
-			</div>
-		</content>
-		<footer class="products--info__footer">
-			<div class="footer__links">
-				<div class="burh__logo">
-					<img src="/img/brand/burh-imagotipo-white.svg" alt="Burh">
-				</div>
-				<ul>
-					<li><a :href="`${url}/sobre-o-burh`" target="_blank">Sobre o Burh</a></li>
-					<li><a>Produtos Burh</a></li>
-					<li><a :href="`${url}/termos-de-uso#privacidade`" target="_blank">Privacidade</a></li>
-					<li><a :href="`${url}/termos-de-uso`" target="_blank">Termos</a></li>
-				</ul>
-			</div>
-			<div class="footer__text">
-				<div class="copyright text-center text-lg-right">
-					© {{year}} Feito com <span id="heart"></span>
-					no Brasil para o mundo.
-				</div>
-			</div>
-		</footer>
-	</section>
-</template>
-
-<script>
-export default {
-	name: 'ProductsFooter',
-	data() {
-		return {
-			year: new Date().getFullYear(),
-			url: ''
-		};
-	},
-	mounted() {
-		this.url = process.env.baseUserUrl;
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-$primaryColor: #5983FE;
-
-.products--info {
-	max-width: calc(1360px + 40px * 2);
-	padding: 0 40px;
-	margin: 0 auto;
-	margin-top: 100px;
-	display: block;
-	&__social--links {
-		padding: 15px 0;
-		display: flex;
-		align-items: center;
-		border-bottom: 1px solid #eee;
-		a {
-			font-size: 1.5rem;
-			color: $primaryColor;
-			margin: 0 20px;
-			&:first-child {
-				margin-left: 0;
-			}
-		}
-	}
-	&__content {
-		display: grid;
-		grid-template-columns: repeat(5, 1fr);
-		gap: 20px;
-		align-items: flex-start;
-		@media (max-width: 1200px) {
-			& {
-				grid-template-columns: repeat(4, 1fr);
-			}
-		}
-		@media (max-width: 990px) {
-			& {
-				grid-template-columns: repeat(3, 1fr);
-			}
-		}
-		@media (max-width: 720px) {
-			& {
-				grid-template-columns: repeat(2, 1fr);
-			}
-		}
-		@media (max-width: 500px) {
-			& {
-				grid-template-columns: 1fr;
-			}
-		}
-		.product__content {
-			&--title {
-				font-weight: bold;
-				margin-bottom: 10px;
-				margin-top: 25px;
-				font-size: 1rem;
-			}
-			&--list {
-				list-style: none;
-				margin: 0;
-				padding: 0;
-				margin-top: 25px;
-				li {
-					margin: 10px 0;
-					font-size: 0.75rem;
-				}
-			}
-		}
-	}
-    &__footer {
-        margin-top: 80px;
-        border-top: 1px solid #eee;
-        padding: 30px 0;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        @media (max-width: 960px) {
-            & {
-                flex-direction: column;
-                justify-content: center;
-                .footer__links {
-                    margin-bottom: 20px;
-                }
-            }
-        }
-        .footer__links {
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            .burh__logo {
-                width: 120px;
-                img {
-                    display: block;
-                    width: 100%;
-                    filter: brightness(0.5);
-                }
-                @media (max-width: 1150px) {
-                    & {
-                        display: none;
-                    }
-                }
-            }
-            ul {
-                margin: 0!important;
-                @media (max-width: 1150px) {
-                    & {
-                        padding: 0;
-                        li a:first-child {
-                            padding-left: 0;
-                        }
-                    }
-                }
-                li {
-                    display: inline-block;
-                    @media (max-width: 640px) {
-                        & {
-                            display: block;
-                            text-align: center;
-                            a {
-                                padding: 20px;
-                            }
-                        }
-                    }
-                    a {
-                        display: block;
-                        cursor: pointer;
-                        color: #525f7f;
-                        padding: 0 20px;
-                        &:hover {
-                            text-decoration: underline;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-</style>
+<template>
+	<section class="products--info">
+		<header class="products--info__social--links">
+			<a href="https://www.facebook.com/burhbrasil" target="_blank" rel="noopener">
+				<i class="fab fa-facebook-f"></i>
+			</a>
+			<a href="https://www.instagram.com/burhbrasil/" target="_blank" rel="noopener">
+				<i class="fab fa-instagram"></i>
+			</a>
+			<a href="https://www.linkedin.com/company/burh/" target="_blank" rel="noopener">
+				<i class="fab fa-linkedin-in"></i>
+			</a>
+		</header>
+		<content class="products--info__content">
+			<div class="product__content">
+				<p class="product__content--title">Soluções</p>
+				<ul class="product__content--list">
+					<li>Busca Avançada</li>
+					<li>Recrutamento</li>
+					<li>Busca por Universidades</li>
+					<li>Vídeo Entrevista</li>
+					<li>Trabalhe Conosco</li>
+					<li>Universidade Corporativa</li>
+					<li>Testes Online Personalizados</li>
+					<li>Teste Profiler DISC</li>
+					<li>Buffer</li>
+					<li>Envio de SMS</li>
+				</ul>
+			</div>
+			<div class="product__content">
+				<p class="product__content--title">Segurança</p>
+				<ul class="product__content--list">
+					<li>Busca Avançada</li>
+					<li>Recrutamento</li>
+					<li>Busca por Universidades</li>
+					<li>Vídeo Entrevista</li>
+				</ul>
+				<p class="product__content--title">Planos e Preços</p>
+				<ul class="product__content--list">
+					<li>Busca Avançada</li>
+					<li>Recrutamento</li>
+					<li>Busca por Universidades</li>
+					<li>Vídeo Entrevista</li>
+				</ul>
+			</div>
+			<div class="product__content">
+				<p class="product__content--title">Recursos</p>
+				<ul class="product__content--list">
+					<li>Busca Avançada</li>
+					<li>Recrutamento</li>
+					<li>Busca por Universidades</li>
+					<li>Vídeo Entrevista</li>
+				</ul>
+			</div>
+			<div class="product__content">
+				<p class="product__content--title">Página de Carreiras</p>
+				<ul class="product__content--list">
+					<li>Busca Avançada</li>
+					<li>Recrutamento</li>
+					<li>Busca por Universidades</li>
+					<li>Vídeo Entrevista</li>
+					<li>Trabalhe Conosco</li>
+					<li>Universidade Corporativa</li>
+					<li>Testes Online Personalizados</li>
+					<li>Teste Profiler DISC</li>
+					<li>Buffer</li>
+					<li>Envio de SMS</li>
+				</ul>
+			</div>
+			<div class="product__content">
+				<p class="product__content--title">Suporte</p>
+				<ul class="product__content--list">
+					<li>Busca Avançada</li>
+					<li>Recrutamento</li>
+					<li>Busca por Universidades</li>
+					<li>Vídeo Entrevista</li>
+				</ul>
+				<p class="product__content--title">Mais sobre o Burh</p>
+				<ul class="product__content--list">
+					<li>Busca Avançada</li>
+					<li>Recrutamento</li>
+					<li>Busca por Universidades</li>
+					<li>Vídeo Entrevista</li>
+				</ul>
+			</div>
+		</content>
+		<footer class="products--info__footer">
+			<div class="footer__links">
+				<div class="burh__logo">
+					<img src="/img/brand/burh-imagotipo-white.svg" alt="Burh">
+				</div>
+				<ul>
+					<li><a :href="`${url}/sobre-o-burh`" target="_blank">Sobre o Burh</a></li>
+					<li><a>Produtos Burh</a></li>
+					<li><a :href="`${url}/termos-de-uso#privacidade`" target="_blank">Privacidade</a></li>
+					<li><a :href="`${url}/termos-de-uso`" target="_blank">Termos</a></li>
+				</ul>
+			</div>
+			<div class="footer__text">
+				<div class="copyright text-center text-lg-right">
+					© {{year}} Feito com <span id="heart"></span>
+					no Brasil para o mundo.
+				</div>
+			</div>
+		</footer>
+	</section>
+</template>
+
+<script>
+export default {
+	name: 'ProductsFooter',
+	data() {
+		return {
+			year: new Date().getFullYear(),
+			url: ''
+		};
+	},
+	mounted() {
+		this.url = process.env.baseUserUrl;
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+$primaryColor: #5983FE;
+
+.products--info {
+	max-width: calc(1360px + 40px * 2);
+	padding: 0 40px;
+	margin: 0 auto;
+	margin-top: 100px;
+	display: block;
+	&__social--links {
+		padding: 15px 0;
+		display: flex;
+		align-items: center;
+		border-bottom: 1px solid #eee;
+		a {
+			font-size: 1.5rem;
+			color: $primaryColor;
+			margin: 0 20px;
+			&:first-child {
+				margin-left: 0;
+			}
+		}
+	}
+	&__content {
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		gap: 20px;
+		align-items: flex-start;
+		@media (max-width: 1200px) {
+			& {
+				grid-template-columns: repeat(4, 1fr);
+			}
+		}
+		@media (max-width: 990px) {
+			& {
+				grid-template-columns: repeat(3, 1fr);
+			}
+		}
+		@media (max-width: 720px) {
+			& {
+				grid-template-columns: repeat(2, 1fr);
+			}
+		}
+		@media (max-width: 500px) {
+			& {
+				grid-template-columns: 1fr;
+			}
+		}
+		.product__content {
+			&--title {
+				font-weight: bold;
+				margin-bottom: 10px;
+				margin-top: 25px;
+				font-size: 1rem;
+			}
+			&--list {
+				list-style: none;
+				margin: 0;
+				padding: 0;
+				margin-top: 25px;
+				li {
+					margin: 10px 0;
+					font-size: 0.75rem;
+				}
+			}
+		}
+	}
+    &__footer {
+        margin-top: 80px;
+        border-top: 1px solid #eee;
+        padding: 30px 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        @media (max-width: 960px) {
+            & {
+                flex-direction: column;
+                justify-content: center;
+                .footer__links {
+                    margin-bottom: 20px;
+                }
+            }
+        }
+        .footer__links {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            .burh__logo {
+                width: 120px;
+                img {
+                    display: block;
+                    width: 100%;
+                    filter: brightness(0.5);
+                }
+                @media (max-width: 1150px) {
+                    & {
+                        display: none;
+                    }
+                }
+            }
+            ul {
+                margin: 0!important;
+                @media (max-width: 1150px) {
+                    & {
+                        padding: 0;
+                        li a:first-child {
+                            padding-left: 0;
+                        }
+                    }
+                }
+                li {
+                    display: inline-block;
+                    @media (max-width: 640px) {
+                        & {
+                            display: block;
+                            text-align: center;
+                            a {
+                                padding: 20px;
+                            }
+                        }
+                    }
+                    a {
+                        display: block;
+                        cursor: pointer;
+                        color: #525f7f;
+                        padding: 0 20px;
+                        &:hover {
+                            text-decoration: underline;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burh/nuxt-core",
-  "version": "1.0.161",
+  "version": "1.0.162",
   "description": "Design System and Components.",
   "author": "Burh",
   "scripts": {