Skip to content

Commit 8d09bd1

Browse files
nsandoyansandoya
authored
Merge pull request #43 from nsandoya/34-about-section
- Created `Button.astro` component and enums for conditional styles - Implemented design enhancements for `AboutSection.astro` , based on latest mockups - Made `AboutSection.astro` parametric: Replaced hardcoded content with props for title, description, image, and call to action (CTA) - Updated About Us section implementation in `index.astro` Closes #34
2 parents 2530605 + d4fe9ca commit 8d09bd1

File tree

15 files changed

+184
-73
lines changed

15 files changed

+184
-73
lines changed

‎public/images/codefest_conference.jpg‎

339 KB
Loading

src/assets/hacktoberfest.jpg renamed to public/images/hacktoberfest.jpg

File renamed without changes.

‎src/assets/home-sections.json‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"aboutUs": {
3+
"id": "about-us",
4+
"title": "Somos la metacomunidad que conecta y potencia a las comunidades tech",
5+
"subtitle": "",
6+
"description": "En nuestra metacomunidad, unimos fuerzas, compartimos conocimientos y crecemos juntos. Conectamos comunidades tech para impulsar el futuro de la innovación y la colaboración. Únete a nosotros y sé parte del cambio.",
7+
"image": {
8+
"link": "/images/hacktoberfest.jpg",
9+
"alt": "Grupo de personas"
10+
},
11+
"cta": {
12+
"text": "Sé voluntario",
13+
"link": "https://forms.gle/un4KaPsmmqS5Yx7Z9"
14+
}
15+
},
16+
"communityLeaders": {
17+
"id": "community-leaders",
18+
"title": "Trabajemos juntos para fortalecer el ecosistema tech en Ecuador",
19+
"subtitle": "¿Eres líder de una comunidad?",
20+
"description": "Si te apasiona la tecnología, y crees en el poder de la colaboración y el trabajo en equipo, nos encantaría contactar y ampliar el impacto de tu comunidad",
21+
"image": {
22+
"link": "",
23+
"alt": "Contorno de Ecuador"
24+
},
25+
"cta": {
26+
"text": "Conectemos",
27+
"link": "/"
28+
}
29+
},
30+
"exploreEvents": {
31+
"id": "explore-events",
32+
"title": "Únete a nuestros próximos eventos y amplía tus horizontes",
33+
"subtitle": "",
34+
"description": "Nos encanta aprender, compartir y expandir nuestros horizontes constantemente. ¡Anímate a explorar todas las actividades que las comunidades tech tienen para ti!",
35+
"image": {
36+
"link": "/images/codefest_conference.jpg",
37+
"alt": "Conferencia en un auditorio"
38+
},
39+
"cta": {
40+
"text": "Conoce más",
41+
"link": "/events"
42+
}
43+
}
44+
}

‎src/components/AboutSection.astro‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
import { ButtonStyle } from "../enums/button-type.enum";
3+
//import heroImage from "../assets/hacktoberfest.jpg";
4+
import Button from "./shared/Button.astro";
5+
const { Primary } = ButtonStyle;
6+
const { id, title, description, image, cta } = Astro.props;
7+
---
8+
9+
<section id={id} class="py-16 bg-gray-50">
10+
<div class="container mx-auto px-4">
11+
<div
12+
class="w-[88%] lg:w-[92%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-start"
13+
>
14+
<div class="order-2 lg:order-1">
15+
<h2 class="text-3xl font-bold mb-6">
16+
{title}
17+
</h2>
18+
<p class="text-gray-600 mb-6">
19+
{description}
20+
</p>
21+
<Button text={cta.text} link={cta.link} style={Primary} />
22+
</div>
23+
<div class="bg-gray-200 order-1 lg:order-2 rounded-lg">
24+
<img
25+
src={image.link}
26+
alt={image.alt}
27+
class="w-full object-cover h-64 rounded-xl transform hover:scale-105 transition-transform duration-300"
28+
/>
29+
</div>
30+
</div>
31+
</div>
32+
</section>

‎src/components/AboutUs.astro‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎src/components/CardEvent.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const eventHeaderProps = { title, image, modality, description };
4040
year: "numeric",
4141
month: "long",
4242
day: "numeric",
43-
timeZone: 'ECT'
43+
timeZone: "ECT",
4444
})
4545
}
4646
</span>

‎src/components/Faq.astro‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Father component: Alpine.js logic
1515
This ensures only one accordion is open at a time.
1616
1717
-->
18-
<section
18+
<section
1919
x-data="{
2020
activeId: null,
2121
@@ -35,13 +35,11 @@ This ensures only one accordion is open at a time.
3535
};
3636
}
3737
}"
38-
39-
class="py-16 bg-white">
38+
class="py-16 bg-white"
39+
>
4040
<div class="container mx-auto px-4">
4141
<h2 class="text-3xl font-bold text-center mb-12">Preguntas frecuentes</h2>
42-
<div
43-
class="container faqs-container "
44-
>
42+
<div class="container faqs-container">
4543
{
4644
commonQuestions.map((question, index) => (
4745
<Accordion

‎src/components/Footer.astro‎

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,49 @@
22
33
---
44
<footer class="bg-gray-800 text-white py-8">
5-
<div class="container mx-auto px-4">
6-
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
7-
<div>
8-
<h3 class="text-xl font-bold mb-4">Ecuador In Tech</h3>
9-
<p class="text-gray-300">Conectando comunidades, empoderando personas.</p>
10-
</div>
11-
<div>
12-
<h3 class="text-xl font-bold mb-4">Enlaces rápidos</h3>
13-
<ul class="space-y-2">
14-
<li><a href="/" class="text-gray-300 hover:text-white">Inicio</a></li>
15-
<li><a href="/communities" class="text-gray-300 hover:text-white">Comunidades</a></li>
16-
<li><a href="/events" class="text-gray-300 hover:text-white">Eventos</a></li>
17-
<li><a href="/#about-us" class="text-gray-300 hover:text-white">Voluntariado</a></li>
18-
<li><a href="/rss.xml" class="text-gray-300 hover:text-white"> Suscríbete a nuestro canal RSS</a></li>
19-
</ul>
20-
</div>
21-
<div>
22-
<h3 class="text-xl font-bold mb-4">Conecta con nosotros</h3>
23-
<div class="flex space-x-4">
24-
<a href="https://github.com/Ecuador-In-Tech" class="text-gray-300 hover:text-white">GitHub</a>
25-
</div>
26-
</div>
5+
<div class="container mx-auto px-4">
6+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
7+
<div>
8+
<h3 class="text-xl font-bold mb-4">Ecuador In Tech</h3>
9+
<p class="text-gray-300">
10+
Conectando comunidades, empoderando personas.
11+
</p>
2712
</div>
28-
<div class="mt-8 pt-8 border-t border-gray-700 text-center">
29-
<p class="text-gray-300">&copy; 2024 Ecuador In Tech. Todos los derechos reservados.</p>
13+
<div>
14+
<h3 class="text-xl font-bold mb-4">Enlaces rápidos</h3>
15+
<ul class="space-y-2">
16+
<li><a href="/" class="text-gray-300 hover:text-white">Inicio</a></li>
17+
<li>
18+
<a href="/communities" class="text-gray-300 hover:text-white"
19+
>Comunidades</a>
20+
</li>
21+
<li>
22+
<a href="/events" class="text-gray-300 hover:text-white">Eventos</a>
23+
</li>
24+
<li>
25+
<a href="/#about-us" class="text-gray-300 hover:text-white"
26+
>Voluntariado</a>
27+
</li>
28+
<li>
29+
<a href="/rss.xml" class="text-gray-300 hover:text-white">
30+
Suscríbete a nuestro canal RSS</a>
31+
</li>
32+
</ul>
3033
</div>
34+
<div>
35+
<h3 class="text-xl font-bold mb-4">Conecta con nosotros</h3>
36+
<div class="flex space-x-4">
37+
<a
38+
href="https://github.com/Ecuador-In-Tech"
39+
class="text-gray-300 hover:text-white"
40+
>GitHub</a>
41+
</div>
42+
</div>
43+
</div>
44+
<div class="mt-8 pt-8 border-t border-gray-700 text-center">
45+
<p class="text-gray-300">
46+
&copy; 2024 Ecuador In Tech. Todos los derechos reservados.
47+
</p>
3148
</div>
49+
</div>
3250
</footer>
33-

‎src/components/Navbar/Navbar.astro‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ Navbar component:
2929
class="bg-gray-800 w-full fixed z-10"
3030
>
3131
<div class="container mx-auto px-4 py-2 flex justify-between items-center">
32-
<a href="/" class="font-gabarito text-white text-lg font-bold">Ecuador In Tech</a>
32+
<a href="/" class="font-gabarito text-white text-lg font-bold"
33+
>Ecuador In Tech</a>
3334

3435
<!-- Burger menu button -->
3536
<button
@@ -42,12 +43,14 @@ Navbar component:
4243

4344
<!-- Links -->
4445
<div class="hidden lg:flex lg:items-center lg:space-x-8">
45-
{links.slice(1).map((link) => (
46-
<Link href={link.href} text={link.text} size="text-[0.95rem]"/>
47-
))}
46+
{
47+
links.slice(1).map((link) => (
48+
<Link href={link.href} text={link.text} size="text-[0.95rem]" />
49+
))
50+
}
4851
</div>
4952
</div>
5053

5154
<!-- Mobile menu -->
52-
<OffcanvasMenu links={links}/>
53-
</nav>
55+
<OffcanvasMenu links={links} />
56+
</nav>

‎src/components/shared/Button.astro‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
import { ButtonStyle } from "../../enums/button-type.enum";
3+
import type { ButtonI } from "../../interfaces/button.interface";
4+
const { text, link, style } = Astro.props as ButtonI;
5+
const { Outline, Primary } = ButtonStyle;
6+
---
7+
<a href={link}>
8+
<div
9+
class:list={[
10+
"base-btn",
11+
{ "outlined-white-btn": style === Outline },
12+
{ "primary-btn": style === Primary },
13+
]}
14+
>
15+
<p class="text-base">{text}</p>
16+
</div>
17+
</a>

0 commit comments

Comments
 (0)