add components vue footer form contact / modal register
This commit is contained in:
David Ascanio
parent
3ba5e9f4ee
commit
fa9b14cac5
|
|
@ -9,14 +9,15 @@
|
|||
"dependencies": {
|
||||
"@astrojs/markdoc": "^0.15.10",
|
||||
"@astrojs/node": "^9.5.3",
|
||||
"@coreui/icons": "^3.0.1",
|
||||
"@astrojs/vue": "^5.1.4",
|
||||
"@coreui/icons": "^3.0.1",
|
||||
"@dotenvx/dotenvx": "^1.52.0",
|
||||
"@fontsource-variable/kameron": "^5.2.8",
|
||||
"@fontsource-variable/kreon": "^5.2.8",
|
||||
"@fontsource-variable/rokkitt": "^5.2.8",
|
||||
"@fontsource/poppins": "^5.2.7",
|
||||
"@iconify-json/ph": "^1.2.2",
|
||||
"@iconify/vue": "^5.0.0",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@unpic/astro": "^1.0.2",
|
||||
"astro": "^5.17.1",
|
||||
|
|
@ -1505,6 +1506,21 @@
|
|||
"mlly": "^1.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@iconify/vue": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
|
||||
"integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@iconify/types": "^2.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/cyberalien"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": ">=3"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/colour": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -11,14 +11,15 @@
|
|||
"dependencies": {
|
||||
"@astrojs/markdoc": "^0.15.10",
|
||||
"@astrojs/node": "^9.5.3",
|
||||
"@coreui/icons": "^3.0.1",
|
||||
"@astrojs/vue": "^5.1.4",
|
||||
"@coreui/icons": "^3.0.1",
|
||||
"@dotenvx/dotenvx": "^1.52.0",
|
||||
"@fontsource-variable/kameron": "^5.2.8",
|
||||
"@fontsource-variable/kreon": "^5.2.8",
|
||||
"@fontsource-variable/rokkitt": "^5.2.8",
|
||||
"@fontsource/poppins": "^5.2.7",
|
||||
"@iconify-json/ph": "^1.2.2",
|
||||
"@iconify/vue": "^5.0.0",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@unpic/astro": "^1.0.2",
|
||||
"astro": "^5.17.1",
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const background = props.bgImage || props.bgColor;
|
|||
|
||||
{props.hasInput && (
|
||||
<div class="flex gap-2 w-full mt-5">
|
||||
<RegisterModal client:load />
|
||||
<RegisterModal client:load locale={Astro.currentLocale} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,89 +0,0 @@
|
|||
---
|
||||
import Button from "./ui/Button.astro";
|
||||
import { Icon } from "astro-icon/components";
|
||||
const { id, title } = Astro.props;
|
||||
|
||||
import { createTranslator, t } from '../i18n';
|
||||
const tl = createTranslator(Astro.currentLocale);
|
||||
---
|
||||
|
||||
<!-- Open the modal using ID.showModal() method -->
|
||||
<button class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg" onclick="my_modal_5.showModal()">{tl("info.register")}</button>
|
||||
<dialog id="my_modal_5" class="modal modal-bottom sm:modal-middle p-8">
|
||||
<div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
|
||||
<form method="dialog">
|
||||
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"><Icon name="ph:x" class="text-2xl" /></button>
|
||||
</form>
|
||||
<h3 class="text-lg font-bold lg:text-2xl font-secondary text-center uppercase">{tl("info.modal.title")}</h3>
|
||||
<p class="text-lg font-primary text-center mt-10">{tl("info.modal.text")}</p>
|
||||
<!-- <div class="form py-4 mt-6 ">
|
||||
|
||||
<form id="voluteenFrom"
|
||||
action="/api/emailPostulacion/send"
|
||||
method="post"
|
||||
class="flex flex-col gap-2 place-items-center">
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>Nombres <span class="text-error">*</span></span>
|
||||
<input name="nombres" type="text" placeholder="Nombres"
|
||||
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
|
||||
required />
|
||||
</label>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>Apellidos <span class="text-error">*</span></span>
|
||||
<input name="apellidos" type="text" placeholder="Apellidos"
|
||||
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
|
||||
required />
|
||||
</label>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>País</span>
|
||||
<input name="pais" type="text" placeholder="Pais"
|
||||
class="w-full max-w-xs rounded-none" />
|
||||
</label>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>Lugar</span>
|
||||
<input name="lugar" type="text" placeholder="Lugar"
|
||||
class="w-full max-w-xs rounded-none" />
|
||||
</label>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>Dirección</span>
|
||||
<input name="direccion" type="text" placeholder="Dirección"
|
||||
class="w-full max-w-xs rounded-none" />
|
||||
</label>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>Teléfono <span class="text-error">*</span></span>
|
||||
<input name="telefono" type="text" placeholder="Teléfono"
|
||||
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
|
||||
required />
|
||||
</label>
|
||||
|
||||
<label class="input validator rounded-none bg-white">
|
||||
<span>Email <span class="text-error">*</span></span>
|
||||
<input name="email" type="email"
|
||||
placeholder="Ingresa Correo Electrónico"
|
||||
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
|
||||
required />
|
||||
</label>
|
||||
|
||||
<button type="submit"
|
||||
class="btn mt-4 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none">
|
||||
Enviar
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
</div> -->
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,8 +1,15 @@
|
|||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref} from "vue";
|
||||
import { Icon } from '@iconify/vue'
|
||||
const props = defineProps({
|
||||
locale: String
|
||||
})
|
||||
import { createTranslator, t } from "../i18n";
|
||||
const tl = createTranslator(props.locale);
|
||||
|
||||
const loading = ref(false);
|
||||
const modalRef = ref(null);
|
||||
const isFormPendiente = ref(false);
|
||||
|
||||
const openModal = () => {
|
||||
modalRef.value?.showModal();
|
||||
|
|
@ -38,106 +45,137 @@ const handleSubmit = async (e) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
@click="openModal"
|
||||
class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg"
|
||||
>
|
||||
Registrate
|
||||
</button>
|
||||
<template v-if="isFormPendiente">
|
||||
|
||||
<dialog ref="modalRef" id="my_modal_5" class="modal modal-bottom sm:modal-middle p-8">
|
||||
<div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
|
||||
<button
|
||||
@click="openModal"
|
||||
class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg"
|
||||
>
|
||||
{{ tl("info.register") }}
|
||||
</button>
|
||||
|
||||
<form method="dialog">
|
||||
|
||||
<dialog
|
||||
ref="modalRef"
|
||||
class="modal modal-bottom sm:modal-middle p-8"
|
||||
>
|
||||
<div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
|
||||
|
||||
<!-- Botón cerrar -->
|
||||
<button
|
||||
v-on:click="closeModal"
|
||||
type="button"
|
||||
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
|
||||
type="button"
|
||||
@click="closeModal"
|
||||
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
<Icon icon="ph:x" class="text-2xl" />
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<h3 class="text-lg font-bold lg:text-2xl font-secondary text-center">
|
||||
Formulario de Registro
|
||||
</h3>
|
||||
<!-- Título -->
|
||||
<h3 class="text-lg font-bold lg:text-2xl font-secondary text-center uppercase">
|
||||
{{ tl("info.modal.title") }}
|
||||
</h3>
|
||||
|
||||
<div class="form py-4 mt-6 ">
|
||||
<!-- Texto -->
|
||||
<p class="text-lg font-primary text-center mt-10">
|
||||
{{ tl("info.modal.text") }}
|
||||
</p>
|
||||
|
||||
<form
|
||||
id="voluteenFrom"
|
||||
action="/api/emailPostulacion/send"
|
||||
method="post"
|
||||
@submit="handleSubmit"
|
||||
class="flex flex-col gap-2 place-items-center">
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
@click="openModal"
|
||||
class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg"
|
||||
>
|
||||
{{ tl("info.register") }}
|
||||
</button>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>Nombres <span class="text-error">*</span></span>
|
||||
<input name="nombres" type="text" placeholder="Nombres"
|
||||
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
|
||||
required />
|
||||
</label>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>Apellidos <span class="text-error">*</span></span>
|
||||
<input name="apellidos" type="text" placeholder="Apellidos"
|
||||
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
|
||||
required />
|
||||
</label>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>País</span>
|
||||
<input name="pais" type="text" placeholder="Pais"
|
||||
class="w-full max-w-xs rounded-none" />
|
||||
</label>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>Lugar</span>
|
||||
<input name="lugar" type="text" placeholder="Lugar"
|
||||
class="w-full max-w-xs rounded-none" />
|
||||
</label>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>Dirección</span>
|
||||
<input name="direccion" type="text" placeholder="Dirección"
|
||||
class="w-full max-w-xs rounded-none" />
|
||||
</label>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>Teléfono <span class="text-error">*</span></span>
|
||||
<input name="telefono" type="text" placeholder="Teléfono"
|
||||
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
|
||||
required />
|
||||
</label>
|
||||
|
||||
<label class="input validator rounded-none bg-white">
|
||||
<span>Email <span class="text-error">*</span></span>
|
||||
<input name="email" type="email"
|
||||
placeholder="Ingresa Correo Electrónico"
|
||||
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
|
||||
required />
|
||||
</label>
|
||||
<dialog ref="modalRef" id="my_modal_5" class="modal modal-bottom sm:modal-middle p-8">
|
||||
<div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
|
||||
|
||||
<form method="dialog">
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="loading"
|
||||
class="btn mt-4 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none">
|
||||
|
||||
{{ loading ? "Enviando..." : "Enviar" }}
|
||||
|
||||
v-on:click="closeModal"
|
||||
type="button"
|
||||
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
|
||||
>
|
||||
<Icon icon="ph:x" class="w-6 h-6" />
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<h3 class="text-lg font-bold lg:text-2xl font-secondary text-center">
|
||||
Formulario de Registro
|
||||
</h3>
|
||||
|
||||
<div class="form py-4 mt-6 ">
|
||||
|
||||
<form
|
||||
id="voluteenFrom"
|
||||
action="/api/emailPostulacion/send"
|
||||
method="post"
|
||||
@submit="handleSubmit"
|
||||
class="flex flex-col gap-2 place-items-center">
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>Nombres <span class="text-error">*</span></span>
|
||||
<input name="nombres" type="text" placeholder="Nombres"
|
||||
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
|
||||
required />
|
||||
</label>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>Apellidos <span class="text-error">*</span></span>
|
||||
<input name="apellidos" type="text" placeholder="Apellidos"
|
||||
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
|
||||
required />
|
||||
</label>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>País</span>
|
||||
<input name="pais" type="text" placeholder="Pais"
|
||||
class="w-full max-w-xs rounded-none" />
|
||||
</label>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>Lugar</span>
|
||||
<input name="lugar" type="text" placeholder="Lugar"
|
||||
class="w-full max-w-xs rounded-none" />
|
||||
</label>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>Dirección</span>
|
||||
<input name="direccion" type="text" placeholder="Dirección"
|
||||
class="w-full max-w-xs rounded-none" />
|
||||
</label>
|
||||
|
||||
<label class="input rounded-none bg-white">
|
||||
<span>Teléfono <span class="text-error">*</span></span>
|
||||
<input name="telefono" type="text" placeholder="Teléfono"
|
||||
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
|
||||
required />
|
||||
</label>
|
||||
|
||||
<label class="input validator rounded-none bg-white">
|
||||
<span>Email <span class="text-error">*</span></span>
|
||||
<input name="email" type="email"
|
||||
placeholder="Ingresa Correo Electrónico"
|
||||
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
|
||||
required />
|
||||
</label>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="loading"
|
||||
class="btn mt-4 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none">
|
||||
|
||||
{{ loading ? "Enviando..." : "Enviar" }}
|
||||
|
||||
</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
</dialog>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { Icon } from "astro-icon/components";
|
||||
import { Image } from "astro:assets";
|
||||
import jbp from "../../assets/DRJBP-1.webp";
|
||||
|
||||
import FormContact from "./FormContact.vue";
|
||||
import { createTranslator, t } from '../../i18n';
|
||||
const tl = createTranslator(Astro.currentLocale);
|
||||
---
|
||||
|
|
@ -24,71 +24,7 @@ const tl = createTranslator(Astro.currentLocale);
|
|||
|
||||
<p class="text-lg font-light mb-10 break-words" set:html={tl("footer.text2")}></p>
|
||||
|
||||
<!-- FORMULARIO -->
|
||||
<form method="POST" action="/api/emailInfo/send" class="flex flex-col gap-4">
|
||||
|
||||
<fieldset>
|
||||
|
||||
<input
|
||||
name="nombre"
|
||||
type="text"
|
||||
placeholder={tl("footer.form.name")}
|
||||
required
|
||||
class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
|
||||
/>
|
||||
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="E-Mail"
|
||||
required
|
||||
class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
|
||||
/>
|
||||
|
||||
<textarea
|
||||
name="mensaje"
|
||||
placeholder={tl("footer.form.mesagge")}
|
||||
rows="5"
|
||||
required
|
||||
class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
|
||||
></textarea>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<div class="flex flex-row justify-between items-center mt-4">
|
||||
|
||||
<ul class="flex flex-row gap-2">
|
||||
<li class="border-r pr-2">
|
||||
<a href="https://x.com/CRPazYJusticia" target="_blank">
|
||||
<Icon name="ph:x-logo-thin" class="text-3xl" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="border-r pr-2">
|
||||
<a href="https://www.instagram.com/centrodelreinodepazyjusticia/" target="_blank">
|
||||
<Icon name="ph:instagram-logo-thin" class="text-3xl" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="border-r pr-2">
|
||||
<a href="https://www.facebook.com/Centrodelreinodepazyjusticia" target="_blank">
|
||||
<Icon name="ph:facebook-logo-thin" class="text-3xl" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.youtube.com/@CentrodelReinodePazyJusticia" target="_blank">
|
||||
<Icon name="ph:youtube-logo-thin" class="text-3xl" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-[#003421] px-6 py-2 text-sm hover:bg-[#EBE5D0] hover:text-[#003421] cursor-pointer transition duration-300"
|
||||
>
|
||||
{tl("footer.form.button")}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
<FormContact client:load locale ={Astro.currentLocale}/>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,102 @@
|
|||
<script setup>
|
||||
import { Icon } from "@iconify/vue";
|
||||
import { createTranslator } from "../../i18n";
|
||||
|
||||
const props = defineProps({
|
||||
locale: String
|
||||
});
|
||||
|
||||
const tl = createTranslator(props.locale);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
const formData = new FormData(e.target);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/emailInfo/send", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
e.target.reset();
|
||||
|
||||
if (!response.ok)
|
||||
throw new Error();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form
|
||||
@submit.prevent="handleSubmit"
|
||||
class="flex flex-col gap-4"
|
||||
>
|
||||
<fieldset>
|
||||
|
||||
<input
|
||||
name="nombre"
|
||||
type="text"
|
||||
:placeholder="tl('footer.form.name')"
|
||||
required
|
||||
class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
|
||||
/>
|
||||
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="E-Mail"
|
||||
required
|
||||
class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
|
||||
/>
|
||||
|
||||
<textarea
|
||||
name="mensaje"
|
||||
:placeholder="tl('footer.form.mesagge')"
|
||||
rows="5"
|
||||
required
|
||||
class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
|
||||
></textarea>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<div class="flex flex-row justify-between items-center mt-4">
|
||||
|
||||
<!-- Social Icons -->
|
||||
<ul class="flex flex-row gap-2">
|
||||
<li class="border-r pr-2">
|
||||
<a href="https://x.com/CRPazYJusticia" target="_blank">
|
||||
<Icon icon="ph:x-logo-thin" class="text-3xl" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="border-r pr-2">
|
||||
<a href="https://www.instagram.com/centrodelreinodepazyjusticia/" target="_blank">
|
||||
<Icon icon="ph:instagram-logo-thin" class="text-3xl" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="border-r pr-2">
|
||||
<a href="https://www.facebook.com/Centrodelreinodepazyjusticia" target="_blank">
|
||||
<Icon icon="ph:facebook-logo-thin" class="text-3xl" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://www.youtube.com/@CentrodelReinodePazyJusticia" target="_blank">
|
||||
<Icon icon="ph:youtube-logo-thin" class="text-3xl" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Submit -->
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-[#003421] px-6 py-2 text-sm hover:bg-[#EBE5D0] hover:text-[#003421] cursor-pointer transition duration-300"
|
||||
>
|
||||
{{ tl("footer.form.button") }}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
Loading…
Reference in New Issue