Skip to content

Commit 37e54eb

Browse files
committed
feat: add Info section with FAQ accordion
Implemented a new Info component powered by a JSON data file containing FAQs about Location, Tickets, Schedule, and Services. Integrated this section into the main page.
1 parent 9e8da5a commit 37e54eb

3 files changed

Lines changed: 259 additions & 3 deletions

File tree

src/components/Info.astro

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
import faqData from "../data/faq.json";
3+
4+
// Import Icons if needed, or use inline SVG
5+
---
6+
7+
<section id="informacion" class="py-24 bg-black relative overflow-hidden">
8+
<div class="container mx-auto px-4 relative z-10">
9+
<!-- Title -->
10+
<div class="mb-16 text-center">
11+
<h2 class="section-title text-dango-pink">
12+
INFORMACIÓN
13+
</h2>
14+
<div class="h-1 w-24 bg-white/20 mx-auto mt-4 rounded-full"></div>
15+
</div>
16+
17+
<div class="max-w-4xl mx-auto space-y-12">
18+
{
19+
faqData.map((category) => (
20+
<div class="category-group">
21+
<h3 class="font-kismis text-2xl md:text-3xl text-white mb-6 tracking-wide border-b border-white/10 pb-2">
22+
{category.category}
23+
</h3>
24+
<div class="space-y-4">
25+
{category.items.map((item) => (
26+
<details class="group bg-white/5 rounded-lg border border-white/5 open:bg-white/10 transition-colors duration-300">
27+
<summary class="flex justify-between items-center cursor-pointer p-4 md:p-6 list-none [&::-webkit-details-marker]:hidden focus:outline-none focus:ring-1 focus:ring-dango-pink/50 rounded-lg">
28+
<span class="text-base md:text-lg font-outfit font-bold text-white group-hover:text-dango-pink transition-colors pr-4">
29+
{item.question}
30+
</span>
31+
<span class="transform group-open:rotate-45 transition-transform duration-300 text-dango-pink">
32+
<svg
33+
xmlns="http://www.w3.org/2000/svg"
34+
fill="none"
35+
viewBox="0 0 24 24"
36+
stroke-width="2.5"
37+
stroke="currentColor"
38+
class="w-5 h-5 md:w-6 md:h-6"
39+
>
40+
<path
41+
stroke-linecap="round"
42+
stroke-linejoin="round"
43+
d="M12 4.5v15m7.5-7.5h-15"
44+
/>
45+
</svg>
46+
</span>
47+
</summary>
48+
<div class="overflow-hidden">
49+
<div class="p-4 md:p-6 pt-0 text-gray-300 font-inter leading-relaxed text-sm md:text-base border-t border-white/5 mt-2">
50+
<span set:html={item.answer} />
51+
</div>
52+
</div>
53+
</details>
54+
))}
55+
</div>
56+
</div>
57+
))
58+
}
59+
</div>
60+
</div>
61+
62+
<!-- Background Elements -->
63+
<div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-dango-pink/10 rounded-full blur-[100px] pointer-events-none"></div>
64+
<div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-96 h-96 bg-brand-purple/10 rounded-full blur-[100px] pointer-events-none"></div>
65+
</section>
66+
67+
<style>
68+
.section-title {
69+
font-family: var(--font-kismis);
70+
font-size: clamp(3rem, 6vw, 5rem);
71+
line-height: 1;
72+
letter-spacing: 0.05em;
73+
}
74+
75+
/* Animation for details expanding */
76+
details > div {
77+
display: grid;
78+
grid-template-rows: 0fr;
79+
transition: grid-template-rows 0.3s ease-out;
80+
}
81+
82+
details[open] > div {
83+
grid-template-rows: 1fr;
84+
}
85+
86+
details > div > div {
87+
min-height: 0;
88+
}
89+
</style>

src/data/faq.json

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
[
2+
{
3+
"category": "UBICACIÓN Y LLEGADA",
4+
"items": [
5+
{
6+
"question": "¿En dónde se realizará el festival?",
7+
"answer": "El Festival Dängo tendrá lugar en el Rancho La Ventilla, ubicado en Teotihuacán, Estado de México. Es un espacio con una atmósfera cultural única, ideal para conectar con el entorno histórico de la zona."
8+
},
9+
{
10+
"question": "¿Por dónde será el ingreso al evento?",
11+
"answer": "El acceso principal para todos los asistentes será exclusivamente por la Puerta 3 del Rancho La Ventilla."
12+
},
13+
{
14+
"question": "¿Cómo puedo llegar en auto o Uber?",
15+
"answer": "Puedes navegar directamente hacia \"Rancho La Ventilla\" en aplicaciones como Google Maps o Waze. Asegúrate de dirigirte hacia la Puerta 3."
16+
},
17+
{
18+
"question": "¿Cómo puedo llegar en transporte público?",
19+
"answer": "Debes tomar un autobús con dirección a Teotihuacán desde la Terminal del Norte en la CDMX. Una vez en el centro de Teotihuacán, puedes llegar al Rancho caminando o mediante un taxi local o Uber."
20+
},
21+
{
22+
"question": "¿Habrá estacionamiento en el lugar?",
23+
"answer": "Sí, contamos con estacionamiento dentro del recinto con costo adicional. Te recomendamos llegar temprano ya que el cupo es limitado."
24+
}
25+
]
26+
},
27+
{
28+
"category": "BOLETOS Y PAGOS",
29+
"items": [
30+
{
31+
"question": "¿Dónde puedo adquirir mis boletos?",
32+
"answer": "La venta oficial es exclusivamente a través de la plataforma arema.mx o Puntos de Venta. <br><a href='https://www.instagram.com/p/DRx1cCnDA77/?img_index=2' target='_blank' rel='noopener noreferrer' class='text-dango-pink hover:text-white transition-colors underline decoration-dango-pink underline-offset-4'>Ver Puntos de Venta Oficiales</a>"
33+
},
34+
{
35+
"question": "¿Qué tipos de boletos hay disponibles?",
36+
"answer": "Para esta edición contamos únicamente con Acceso General, permitiendo que todos los asistentes disfruten de la experiencia completa por igual."
37+
},
38+
{
39+
"question": "¿Puedo comprar boletos a meses sin intereses?",
40+
"answer": "¡Sí! Tienes la opción de comprar tus boletos a 3 o 6 meses sin intereses directamente al realizar tu pago en la ticketera."
41+
},
42+
{
43+
"question": "¿A partir de qué edad pagan boleto los niños?",
44+
"answer": "El festival es para todas las edades. Los niños pagan boleto a partir de los 8 años cumplidos."
45+
},
46+
{
47+
"question": "¿Qué pasa si pierdo mi boleto físico o digital?",
48+
"answer": "Por políticas de seguridad y control, no existen reimpresiones ni reposiciones de boletos. Te sugerimos guardarlos en un lugar seguro."
49+
},
50+
{
51+
"question": "¿Se van a agotar los boletos?",
52+
"answer": "Existe una alta posibilidad de que se agoten pronto debido a la excelente respuesta que estamos recibiendo. Una vez agotados, no habrá más boletos a la venta, por lo que te sugerimos asegurar los tuyos lo antes posible."
53+
}
54+
]
55+
},
56+
{
57+
"category": "HORARIOS Y REGLAS",
58+
"items": [
59+
{
60+
"question": "¿A qué hora es la apertura de puertas?",
61+
"answer": "El acceso al recinto comenzará a partir de las 12:30 PM."
62+
},
63+
{
64+
"question": "¿A qué hora termina el festival?",
65+
"answer": "El cierre del evento está programado para las 2:00 AM."
66+
},
67+
{
68+
"question": "¿Puedo entrar al festival en cualquier horario?",
69+
"answer": "Podrás ingresar al festival como máximo hasta 3 horas antes de que inicie la última presentación del lineup."
70+
},
71+
{
72+
"question": "¿Puedo salir del festival y volver a entrar?",
73+
"answer": "No. Por seguridad de todos, los reingresos no están permitidos. Si sales del recinto, tu boleto perderá su validez y no podrás volver a entrar con él."
74+
}
75+
]
76+
},
77+
{
78+
"category": "SERVICIOS Y SEGURIDAD",
79+
"items": [
80+
{
81+
"question": "¿Hay acceso y zonas para personas con discapacidad?",
82+
"answer": "Sí, el festival cuenta con accesos y áreas designadas para personas con discapacidad para garantizar una experiencia cómoda."
83+
},
84+
{
85+
"question": "¿Podré adquirir mercancía oficial durante el evento?",
86+
"answer": "¡Claro! Tendremos un stand con el merchandising oficial de Dängo y de las bandas participantes para que no te quedes sin tu recuerdo."
87+
},
88+
{
89+
"question": "¿Habrá opciones de comida y bebida?",
90+
"answer": "Sí, contaremos con una amplia variedad gastronómica y de snacks."
91+
},
92+
{
93+
"question": "¿Habrá venta de bebidas con alcohol?",
94+
"answer": "Sí habrá venta de alcohol, pero únicamente para mayores de 18 años."
95+
},
96+
{
97+
"question": "¿Habrá atención médica en el festival?",
98+
"answer": "Sí, contaremos con personal de servicio médico capacitado y ambulancia disponible durante todo el evento para cualquier emergencia."
99+
},
100+
{
101+
"question": "¿Cuáles son los protocolos de revisión a mi llegada?",
102+
"answer": "Para seguridad de todos, se realizará una revisión obligatoria de pertenencias en la entrada. No se permite el ingreso de objetos punzocortantes, sustancias ilícitas o artículos prohibidos."
103+
}
104+
]
105+
}
106+
]

src/pages/index.astro

Lines changed: 64 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import LineUp from "../components/LineUp.astro";
77
import Tickets from "../components/Tickets.astro";
88
import Gallery from "../components/Gallery.astro";
99
import News from "../components/News.astro";
10+
import Info from "../components/Info.astro";
1011
---
1112

1213
<Layout title="Dängo Festival 2026 | Teotihuacán">
@@ -23,16 +24,76 @@ import News from "../components/News.astro";
2324
<!-- 2_L Line Up -->
2425
<LineUp />
2526

27+
<section id="ubicacion" class="bg-black">
28+
<!-- Keep Ubicacion section separate or integrate? Request implies Info covers Location Q&A -->
29+
<!-- But the nav says Ubicacion AND Info separately usually.
30+
Wait, the user text has "UBICACIÓN Y LLEGADA" inside the info text.
31+
However, usually "Ubicacion" implies a map.
32+
The user asked to add the "section of information".
33+
Let's see the current placeholder:
34+
<section id="ubicacion" ...> ... </section>
35+
36+
And the prompt says: "Falta la sección de información, tiene que tener estas preguntas..."
37+
Looking at the nav: BOLETOS LINEUP UBICACIÓN INFORMACIÓN ...
38+
39+
If I replace #ubicacion with this Info component (which contains Location Q&A),
40+
I might be removing the place for a future Map.
41+
42+
However, the provided text starts with "UBICACIÓN Y LLEGADA".
43+
44+
Let's ADD <Info /> after LineUp.
45+
But wait, looking at `src/pages/index.astro`, there is a placeholder for #ubicacion.
46+
47+
The user prompt says "Falta la sección de información".
48+
49+
I will add <Info /> where it logically belongs.
50+
51+
If I look at the footer links:
52+
{ label: "UBICACIÓN", href: "#ubicacion" },
53+
{ label: "INFORMACIÓN", href: "#informacion" },
54+
55+
So they are distinct.
56+
57+
The placeholder for #ubicacion is:
58+
<section id="ubicacion" ...> <h2...>Ubicación</h2> <p...>Próximamente</p> </section>
59+
60+
The placeholder for #informacion is... missing in the current file!
61+
62+
Wait, let me read the file content again in my head (from previous turns).
63+
Ah, I see `News` component.
64+
65+
The current index.astro has:
66+
Navbar
67+
VideoBackground
68+
Tickets (#boletos)
69+
LineUp (#lineup)
70+
#ubicacion placeholder
71+
News
72+
#playlist placeholder
73+
Gallery
74+
75+
It seems "Info" is missing entirely.
76+
I will insert <Info /> AFTER #ubicacion placeholder and BEFORE News.
77+
Or maybe after News.
78+
79+
Let's put it after #ubicacion placeholder.
80+
81+
-->
82+
</section>
83+
2684
<section
2785
id="ubicacion"
28-
class="min-h-screen bg-black flex items-center justify-center"
86+
class="min-h-[50vh] bg-black flex items-center justify-center border-t border-white/10"
2987
>
3088
<div class="container mx-auto px-4 py-20 text-center">
31-
<h2 class="text-6xl font-bold text-white mb-4">Ubicación</h2>
32-
<p class="text-xl text-gray-400">Próximamente</p>
89+
<h2 class="text-6xl font-bold text-white mb-4 font-kismis">UBICACIÓN</h2>
90+
<p class="text-xl text-gray-400 font-inter">Próximamente Mapa Oficial</p>
3391
</div>
3492
</section>
3593

94+
<!-- 4_I Información -->
95+
<Info />
96+
3697
<News />
3798

3899
<section

0 commit comments

Comments
 (0)