Skip to content

Commit aac254b

Browse files
baumannzonebaumannzone
authored
Feat/115 (#117)
* chore: faq wip * feat: faq collapse * chore: hover schedule * fix: branch name
1 parent 5cacb52 commit aac254b

1 file changed

Lines changed: 139 additions & 2 deletions

File tree

‎pages/rambito-conf.vue‎

Lines changed: 139 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -425,8 +425,12 @@
425425
<h2 class="text-3xl font-extrabold tracking-tight mb-10">Agenda</h2>
426426
<div class="flow-root">
427427
<ul role="list" class="-mb-8">
428-
<li v-for="item in agenda" :key="item.title">
429-
<div class="relative pb-8">
428+
<li
429+
v-for="item in agenda"
430+
:key="item.title"
431+
class="hover:bg-purple-50 p-2 rounded-md"
432+
>
433+
<div class="relative pb-6">
430434
<!-- Vertical line -->
431435
<span
432436
v-if="!item.isLastItem"
@@ -840,6 +844,88 @@
840844
</div>
841845
</div>
842846
</section>
847+
848+
<!-- This example requires Tailwind CSS v2.0+ -->
849+
<section class="bg-gray-50">
850+
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
851+
<div class="max-w-3xl mx-auto divide-y-2 divide-gray-200">
852+
<h2
853+
class="
854+
text-center text-3xl
855+
font-extrabold
856+
text-gray-900
857+
sm:text-4xl
858+
"
859+
>
860+
What the FAQ?
861+
</h2>
862+
<dl
863+
v-for="(faq, index) in faqs"
864+
:key="faq.question"
865+
class="mt-6 space-y-6 divide-y divide-gray-200"
866+
>
867+
<div class="pt-6">
868+
<dt class="text-lg">
869+
<!-- Expand/collapse question button -->
870+
<button
871+
type="button"
872+
class="
873+
text-left
874+
w-full
875+
flex
876+
justify-between
877+
items-start
878+
text-gray-400
879+
focus:outline-none focus:ring focus:ring-purple-300
880+
rounded-md
881+
"
882+
:aria-controls="`faq-${index}`"
883+
aria-expanded="false"
884+
@click="faq.isOpen = !faq.isOpen"
885+
>
886+
<span class="font-medium text-gray-900">
887+
{{ faq.question }}
888+
</span>
889+
<span class="ml-6 h-7 flex items-center">
890+
<!--
891+
Expand/collapse icon, toggle classes based on question open state.
892+
893+
Heroicon name: outline/chevron-down
894+
895+
Open: "-rotate-180", Closed: "rotate-0"
896+
-->
897+
<svg
898+
class="h-6 w-6 transform transition-transform"
899+
:class="faq.isOpen ? '-rotate-180' : 'rotate-0'"
900+
xmlns="http://www.w3.org/2000/svg"
901+
fill="none"
902+
viewBox="0 0 24 24"
903+
stroke="currentColor"
904+
aria-hidden="true"
905+
>
906+
<path
907+
stroke-linecap="round"
908+
stroke-linejoin="round"
909+
stroke-width="2"
910+
d="M19 9l-7 7-7-7"
911+
/>
912+
</svg>
913+
</span>
914+
</button>
915+
</dt>
916+
<dd
917+
:id="`faq-${index}`"
918+
class="mt-2 pr-12"
919+
:class="faq.isOpen ? 'block' : 'hidden'"
920+
>
921+
<!-- eslint-disable-next-line vue/no-v-html -->
922+
<p class="text-base text-gray-500" v-html="faq.answer" />
923+
</dd>
924+
</div>
925+
</dl>
926+
</div>
927+
</div>
928+
</section>
843929
</div>
844930
</template>
845931

@@ -939,6 +1025,57 @@ export default {
9391025
],
9401026
},
9411027
],
1028+
faqs: [
1029+
{
1030+
isOpen: true,
1031+
question: '¿Qué es la Rambito Conf?',
1032+
answer:
1033+
'La Rambito Conf es una conferencia tech online gratuita que se puede ver en twitch desde el canal de baumannzone: <a href="https://www.twitch.tv/baumannzone" class="font-medium text-purple-500">twitch.tv/baumannzone</a>.',
1034+
},
1035+
{
1036+
isOpen: false,
1037+
question: '¿Quién es Rambito?',
1038+
answer:
1039+
'Rambo Mambo, RambitoJS o Rambito es el perro mas techi (y bueno) que existe en la actualidad. Es un <span class="italic">Braco Húngaro</span> que en el 2012 fue adoptado por @baumannzone y desde entonces son inseparables. En la época pre-covid, le acompañaba a la mayoría de los eventos tech presenciales.',
1040+
},
1041+
{
1042+
isOpen: false,
1043+
question: '¿Cómo puedo colaborar con la Rambito Conf?',
1044+
answer:
1045+
'La mejor manera de ayudar a la Rambito Conf es ayudando a difundir el evento. Comparte el evento en las redes y deja comentarios, like, haz retweet... A ti no te cuesta nada y a nosotros nos ayuda mucho.',
1046+
},
1047+
{
1048+
isOpen: false,
1049+
question: '¿Cómo reporto un error en el código?',
1050+
answer:
1051+
'Si ves algún error en el código, puedes hacer una Pull Request en este <a href="https://github.com/baumannzone/baumannzone.dev" target="_blank" class="font-medium text-purple-500">repositorio</a>, crear una issue o avisar a @baumannzone.',
1052+
},
1053+
{
1054+
isOpen: false,
1055+
question: 'Quiero aportar económicamente a la Rambito Conf',
1056+
answer:
1057+
'Si quieres aportar económicamente, contacta con <a href="https://instagram.com/baumannzone" target="_blank" class="font-medium text-purple-500">@baumannzone</a> o manda un mail a <code>jorge.baumann.aguilar [at] gmail [dot] com</code>.',
1058+
},
1059+
{
1060+
isOpen: false,
1061+
question: '¿Cómo puedo ver la conferencia?',
1062+
answer:
1063+
'Puedes verla desde cualquier dispositivo con acceso a internet en <a href="https://twitch.tv/baumannzone" target="_blank" class="font-medium text-purple-500">twitch.tv/baumannzone</a>.',
1064+
},
1065+
{
1066+
isOpen: false,
1067+
question: '¿Hay código de conducta?',
1068+
answer:
1069+
'Por supuesto que sí tenemos <a href="https://github.com/baumannzone/baumannzone.dev/blob/main/CODE_OF_CONDUCT.md" target="_blank" class="font-medium text-purple-500">Código de Conducta</a>. Al participar en la Rambito Conf estás aceptando seguir el código de conducta.',
1070+
},
1071+
{
1072+
isOpen: false,
1073+
question:
1074+
'¿Cómo puedo denunciar un mal comportamiento durante la conferencia?',
1075+
answer:
1076+
'Si alguna persona te está molestando o ves que alguien está incumpliendo las reglas y no está siguiendo el código de conducta, avisa a @baumannzone inmediatamente. Queremos que este sea un lugar seguro. <span class="font-medium">Tomaremos medidas primero, preguntaremos después.</span>',
1077+
},
1078+
],
9421079
}
9431080
},
9441081
}

0 commit comments

Comments
 (0)