Refactor how-it-works and pricing sections; update text and layout for clarity. Remove social proof section and related star component. Add demo and FAQ sections for enhanced user guidance. Introduce site configuration files for environment-specific settings.

src/_includes/partials/faq.njk

@@ -0,0 +1,71 @@
+<!-- ============================================================
+     FAQ SECTION
+============================================================ -->
+<section id="faq" class="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
+  <div class="mx-auto max-w-2xl text-center">
+    <p class="text-sm font-bold uppercase tracking-widest text-brand-600 dark:text-brand-400">Preguntas frecuentes</p>
+    <h2 class="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">Resolvé tus dudas</h2>
+  </div>
+
+  <div class="mt-10 space-y-4">
+    <details class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm open:shadow-md dark:border-slate-800 dark:bg-slate-900">
+      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-base font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950 [&::-webkit-details-marker]:hidden">
+        ¿Para quién es Gruperly?
+        <svg class="h-5 w-5 shrink-0 text-brand-500 transition-transform group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
+      </summary>
+      <p class="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
+        Para profesionales que trabajan con grupos de personas: profesores, personal trainers, instructores y perfiles similares que necesitan organizar grupos, participantes y cobros.
+      </p>
+    </details>
+
+    <details class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm open:shadow-md dark:border-slate-800 dark:bg-slate-900">
+      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-base font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950 [&::-webkit-details-marker]:hidden">
+        ¿Cómo creo mi primer grupo?
+        <svg class="h-5 w-5 shrink-0 text-brand-500 transition-transform group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
+      </summary>
+      <p class="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
+        Creás tu cuenta y definís el nombre del grupo, los días y el horario de las clases, el cupo máximo, el precio y el tipo de cobro (mensual o por clase). Después siempre podés editarlo.
+      </p>
+    </details>
+
+    <details class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm open:shadow-md dark:border-slate-800 dark:bg-slate-900">
+      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-base font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950 [&::-webkit-details-marker]:hidden">
+        ¿Cómo incorporo participantes?
+        <svg class="h-5 w-5 shrink-0 text-brand-500 transition-transform group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
+      </summary>
+      <p class="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
+        Registrás a cada participante en el grupo donde participa con sus datos de contacto. Gruperly guarda esa información y sus cobros por grupo.
+      </p>
+    </details>
+
+    <details class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm open:shadow-md dark:border-slate-800 dark:bg-slate-900">
+      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-base font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950 [&::-webkit-details-marker]:hidden">
+        ¿Cómo se cobra a los participantes?
+        <svg class="h-5 w-5 shrink-0 text-brand-500 transition-transform group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
+      </summary>
+      <p class="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
+        Por grupo definís un precio, un tipo de cobro (mensual o por clase) y un día de vencimiento. Cada cobro queda con un estado claro: al día, pendiente o atrasado.
+      </p>
+    </details>
+
+    <details class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm open:shadow-md dark:border-slate-800 dark:bg-slate-900">
+      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-base font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950 [&::-webkit-details-marker]:hidden">
+        ¿Qué diferencia hay entre actividades recurrentes y eventos especiales?
+        <svg class="h-5 w-5 shrink-0 text-brand-500 transition-transform group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
+      </summary>
+      <p class="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
+        Las actividades recurrentes son las clases habituales de un grupo, con días y horarios repetidos. Los eventos especiales son workshops, talleres o encuentros puntuales, separados de las clases recurrentes.
+      </p>
+    </details>
+
+    <details class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm open:shadow-md dark:border-slate-800 dark:bg-slate-900">
+      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-base font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950 [&::-webkit-details-marker]:hidden">
+        ¿Necesito una cuenta para usar Gruperly?
+        <svg class="h-5 w-5 shrink-0 text-brand-500 transition-transform group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
+      </summary>
+      <p class="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
+        Sí. Creás una cuenta con tu nombre, email y contraseña, y confirmás tu email desde el enlace de verificación.
+      </p>
+    </details>
+  </div>
+</section>