Merge pull request #5 from gpul-org/develop

Volunteering form

src/components/register/Form.tsx

@@ -184,7 +184,7 @@ export default function Form() {
           </button>
           <p className="col-span-2 mt-2 text-center text-xs font-light text-white/75">
             Al enviar, aceptas la{' '}
-            <a href="/privacy" className="underline">
+            <a href="/privacidad" className="underline">
               política de privacidad
             </a>
             .

src/components/register/FormVoluntarios.tsx

@@ -0,0 +1,139 @@
+import { faEnvelope, faHandshake, faUser } from '@fortawesome/free-regular-svg-icons'
+import {
+  faArrowRight,
+  faPhone,
+  faWheatAwnCircleExclamation,
+  faShirt,
+  faPen,
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useState } from 'react'
+
+import toast from 'react-hot-toast'
+import InputText from './InputText'
+import InputSelect from './InputSelect'
+import InputCheckbox from './InputCheckbox'
+import InputTextArea from './InputTextArea'
+import InputFile from './InputFile'
+
+export default function Form() {
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(event: React.SyntheticEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setLoading(true)
+
+    const formData = new FormData(event.currentTarget)
+
+    try {
+      toast.loading('Un momentito...');
+      const response = await fetch('https://activepieces.gpul.org/api/v1/webhooks/Qt2dPsavbpFuES2b4SqoR/sync', {
+        method: 'POST',
+        body: formData,
+      })
+
+
+      if (response.ok) {
+        toast.remove();
+        toast.success('¡Listo, estás registrado!')
+
+        // Await the timeout for redirection to prevent re-clicking
+        await new Promise((resolve) => setTimeout(resolve, 2000))
+
+        window.location.href = '/registro/success-voluntarios'
+      } else {
+        toast.remove();
+        const errorData = await response.json() // Optional: parse error response for more details
+        console.error('Error response:', errorData)
+        toast.error('Ha ocurrido un error...')
+      }
+    } catch (error) {
+      console.error('Error:', error)
+      toast.error('Ha ocurrido un error...')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <form className="flex flex-col gap-2 text-base sm:grid sm:grid-cols-2 sm:gap-4" onSubmit={handleSubmit}>
+      <div className="col-span-2 w-full">
+      <InputText id="nameInput" label="Nombre completo" placeholder="John Doe" required icon={faUser} />
+      </div>
+      <InputText id="emailInput" label="Email" type="email" placeholder="[email protected]" required icon={faEnvelope} />
+      <InputText
+        id="phoneInput"
+        tooltip="Será guardado para casos de urgencia o emergencia durante el evento."
+        label="Teléfono móvil"
+        placeholder="612345789"
+        required
+        icon={faPhone}
+      />
+      <InputSelect
+        id="foodRestrictionsInput"
+        label="Restricciones alimentarias"
+        required
+        icon={faWheatAwnCircleExclamation}
+        options={[
+          { value: 'sin', label: 'Sin restricciones' },
+          { value: 'vegano', label: 'Vegano' },
+          { value: 'vegetariano', label: 'Vegetariano' },
+          { value: 'sin-gluten', label: 'Sin glúten' },
+          { value: 'otro', label: 'Otras' },
+        ]}
+      />
+      <InputSelect
+        id="shirtSizeInput"
+        label="Talla de camiseta"
+        required
+        icon={faShirt}
+        defaultValue="L"
+        options={[
+          { value: 'S', label: 'S' },
+          { value: 'M', label: 'M' },
+          { value: 'L', label: 'L' },
+          { value: 'XL', label: 'XL' },
+          { value: 'XXL', label: 'XXL' },
+        ]}
+      />
+      <InputTextArea
+        id="motivationInput"
+        label="¿Por qué quieres ayudar en HackUDC?"
+        placeholder="Después de particiar en otras ediciones, me apetece probar esta experiencia porque..."
+        required
+        tooltip="Explica brevemente por qué quieres ser mentor y cuáles son tus conocimientos, además de si tienes alguna experiencia enseñando o ayudando con proyectos de programación."
+        icon={faPen}
+      />
+      <InputFile id="cvInput" label="Adjuntar CV (PDF)" required accept=".pdf" tooltip="Añade aquí tu CV. Nos ayudará a seleccionar a aquellos voluntarios que mejor encajen, también puedes compartirlo con las empresas patrocinadoras del evento."/>
+      <div className="col-span-2 flex flex-col gap-4">
+        <InputCheckbox id="cvCheckbox" label="Quiero compartir mi CV con las empresas patrocinadoras (recomendado)." />
+        <InputCheckbox
+          id="termsCheckbox"
+          label="Acepto los términos y condiciones y he leído el código de conducta."
+          required
+        />
+        <div>
+          <button
+            type="submit"
+            className={`hover group relative col-span-2 w-full rounded-lg p-2.5 text-center font-light ${
+              loading ? 'cursor-not-allowed bg-gray-500' : 'bg-green-900 text-white/75'
+            }`}
+            disabled={loading}
+          >
+            Registrarme en HackUDC
+            <div className="absolute inset-y-0 right-4 flex items-center transition-all group-hover:right-3">
+              <FontAwesomeIcon icon={faArrowRight} className="h-5 w-5 text-white/50" />
+            </div>
+          </button>
+          <p className="col-span-2 mt-2 text-center text-xs font-light text-white/75">
+            Al enviar, aceptas la{' '}
+            <a href="/privacidad" className="underline">
+              política de privacidad
+            </a>
+            .
+          </p>
+        </div>
+      </div>
+    </form>
+  )
+}

src/pages/registro/index.astro

@@ -34,6 +34,11 @@ import Footer from '../../components/Footer.astro'
           <Form client:load />
         </div>
       </div>
+      <div class="mt-8 text-center text-lg">
+        ¿Quieres participar como mentor? Entonces usa <a href="/registro/voluntarios" class="text-green-700 underline"
+          >este formulario</a
+        >
+      </div>
     </div>
     <div class="h-[100px]"></div>
     <Footer />

src/pages/registro/success-voluntarios.astro

@@ -0,0 +1,74 @@
+---
+import Footer from '../../components/Footer.astro'
+import Logo from '../../components/Logo.astro'
+import Layout from '../../layouts/Layout.astro'
+---
+
+<Layout title={'Registro - HackUDC 2025'}>
+  <div class="flex min-h-screen flex-col">
+    <div class="mx-auto mt-6 w-full max-w-screen-lg grow px-2">
+      <a
+        href="/"
+        class="hover-bg-green-700 rounded-full border border-green-700 px-4 py-2 text-green-500 transition duration-150 hover:text-white"
+      >
+        Volver a inicio
+      </a>
+
+      <div class="mx-auto mt-14 w-[300px] sm:w-[400px] md:w-[500px]">
+        <Logo />
+      </div>
+      <p class="mt-14 text-center text-3xl sm:text-4xl md:text-5xl">
+        ¡Te has registrado para
+        <span
+          class="inline-block bg-gradient-to-br from-green-700 via-green-500 to-green-700 bg-clip-text font-medium text-transparent"
+        >
+          HackUDC 2025
+        </span>
+        !
+      </p>
+
+      <!-- Success message -->
+      <div class="bg-animated mx-auto mt-12 w-full rounded-xl p-0.5">
+        <div class="rounded-xl bg-[#181818] p-4 md:p-8">
+          <p class="text-center text-lg text-white/90">
+            Te hemos enviado un correo electrónico confirmando que hemos recibido tu solicitud.
+            <br />
+            Más adelante te enviaremos otro correo con más información sobre tu participación como voluntario.
+            <br />
+            Si no recibes el primer correo en las próximas 24 horas, ponte en contacto con nosotros en
+            <a href="mailto:[email protected]" class="text-green-500 hover:underline">[email protected]</a>.
+          </p>
+
+          <p class="mt-6 text-center text-lg text-white/90">
+            Mantente atento a los próximos correos con más información sobre el evento. ¡Comparte el evento con tus
+            amigos, conocidos y en redes sociales!
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="h-[100px]"></div>
+    <Footer />
+  </div>
+</Layout>
+
+<style>
+  .bg-animated:hover {
+    animation: gradient 500ms ease;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+  }
+
+  .bg-animated {
+    background: linear-gradient(-45deg, #22c55e, #15803d 50%, #242424 50% 100%);
+    background-size: 200% 200%;
+  }
+
+  @keyframes gradient {
+    0% {
+      background-position: 0% 0%;
+    }
+    100% {
+      background-position: 100% 100%;
+    }
+  }
+</style>

src/pages/registro/voluntarios.astro

@@ -0,0 +1,62 @@
+---
+import Layout from '../../layouts/Layout.astro'
+
+import Logo from '../../components/Logo.astro'
+import Form from '../../components/register/FormVoluntarios'
+
+import Footer from '../../components/Footer.astro'
+---
+
+<Layout title={'Registro - HackUDC 2025'}>
+  <div class="flex min-h-screen flex-col">
+    <div class="mx-auto mt-6 w-full max-w-screen-lg grow px-2">
+      <a
+        href="/"
+        class="hover-bg-green-700 rounded-full border border-green-700 px-4 py-2 text-green-500 transition duration-150 hover:text-white"
+      >
+        Volver a inicio</a
+      >
+
+      <div class="mx-auto mt-14 w-[300px] sm:w-[400px] md:w-[500px]">
+        <Logo />
+      </div>
+      <p class="mt-14 text-center text-3xl sm:text-4xl md:text-5xl">
+        Hazte voluntario para
+        <span
+          class="inline-block bg-gradient-to-br from-green-700 via-green-500 to-green-700 bg-clip-text font-medium text-transparent"
+          >HackUDC 2025</span
+        >
+      </p>
+
+      <!-- Formulario -->
+      <div class="bg-animated mx-auto mt-12 w-full rounded-xl p-0.5">
+        <div class="rounded-xl bg-[#181818] p-4 md:p-8">
+          <Form client:load />
+        </div>
+      </div>
+    </div>
+    <div class="h-[100px]"></div>
+    <Footer />
+  </div>
+</Layout>
+
+<style>
+  .bg-animated:hover {
+    animation: gradient 500ms ease;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+  }
+
+  .bg-animated {
+    background: linear-gradient(-45deg, #22c55e, #15803d 50%, #242424 50% 100%);
+    background-size: 200% 200%;
+  }
+  @keyframes gradient {
+    0% {
+      background-position: 0% 0%;
+    }
+    100% {
+      background-position: 100% 100%;
+    }
+  }
+</style>