Skip to content

Commit 2c7647a

Browse files
nsandoyaIvanM9
nsandoya
and
IvanM9
authored
Commitements section redesign (#57)
* refactor: Remove `Hall of Fame` cta from `aboutUs` home section In `home-sections.json` * feat: Add new icons * feat: Add new images * refactor: Add `cta`, `link`, and `image` fields into `commitements.json` structure - Change commitements structure - Update commitements data * feat: Create `components/CommitementsCarousel` folder and add `Icon.astro` * feat: Create `Carrousel.astro` * refactor!: Create `CarrouselItem.astro`, incorporate it into `Carrousel.astro` and update `Features.astro` - The cards (image and text) for each carrousel slide have been moved into a new component called CarrouselItem. This change makes Carrousel.astro more maintainable and easier to read. - Community commitments are now rendered using `Carrousel.astro` in `Features.astro` * fix: Drop fixed width from carousel main container This change aims to make commitments carousel a more flexible component (regarding to screen sizes) Co-authored-by: Iván Manzaba <[email protected]> --------- Co-authored-by: Iván Manzaba <[email protected]>
1 parent 3a2f0a9 commit 2c7647a

File tree

12 files changed

+146
-42
lines changed

12 files changed

+146
-42
lines changed

‎public/icons/leftIcon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/icons/meeting.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/icons/shared.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/icons/volt.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/images/shared_resources.jpg‎

1.25 MB
Loading

‎public/images/volunteering.jpg‎

417 KB
Loading

‎src/assets/commitments.json‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,25 @@
22
{
33
"title": "Crear espacios de encuentro",
44
"description": "Organizar eventos y actividades que permitan a los miembros de diferentes comunidades conocerse y colaborar.",
5+
"cta": "Próximos eventos",
6+
"link": "/events",
7+
"image": "/images/codefest_conference.jpg",
58
"icon": "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
69
},
7-
{
8-
"title": "Desarrollar recursos compartidos",
9-
"description": "Crear herramientas y recursos que sean útiles para todas las comunidades, como guías, tutoriales y plataformas de colaboración.",
10-
"icon": "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
11-
},
1210
{
1311
"title": "Fomentar la participación",
1412
"description": "Incentivar la participación activa de los miembros de todas las comunidades en la toma de decisiones y en la organización de actividades.",
13+
"cta": "Miembros destacados",
14+
"link": "/thanks",
15+
"image": "/images/volunteering.jpg",
1516
"icon": "M13 10V3L4 14h7v7l9-11h-7z"
17+
},
18+
{
19+
"title": "Desarrollar recursos compartidos",
20+
"description": "Crear herramientas y recursos que sean útiles para todas las comunidades, como guías, tutoriales y plataformas de colaboración.",
21+
"cta": "GitHub Repo",
22+
"link": "https://github.com/Ecuador-In-Tech",
23+
"image": "/images/shared_resources.jpg",
24+
"icon": "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
1625
}
1726
]

‎src/assets/home-sections.json‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,6 @@
1212
{
1313
"text": "Sé voluntario",
1414
"link": "https://forms.gle/un4KaPsmmqS5Yx7Z9"
15-
},
16-
{
17-
"text": "Salón de la fama",
18-
"link": "/thanks"
1915
}
2016
]
2117
},

‎src/components/CommitementsCarrousel/Carrousel.astro‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
import leftIcon from "../../../public/icons/leftIcon.svg?raw";
3+
import CarrouselItem from "./CarrouselItem.astro";
4+
5+
interface Commitement {
6+
title: string;
7+
description: string;
8+
cta: string;
9+
image: string;
10+
link: string;
11+
icon: string;
12+
}
13+
14+
const { commitements } = Astro.props;
15+
16+
const commitementsLength = commitements.length;
17+
---
18+
<div class="flex justify-start overflow-hidden">
19+
<div
20+
x-data="{
21+
currentIndex: 0,
22+
getTranslatePercentage() {
23+
if (window.innerWidth < 640) { // (sm)
24+
return 32;
25+
} else if (window.innerWidth < 1024) { // (md)
26+
return 30;
27+
} else { // (lg and xl)
28+
return 30;
29+
}
30+
}
31+
}"
32+
;
33+
class="relative w-full px-3 md:px-0"
34+
>
35+
<div class="">
36+
<div
37+
class="flex w-fit xl:w-full transition-transform duration-300 ease-in-out"
38+
:style="`transform: translateX(-${currentIndex * getTranslatePercentage()}%)`"
39+
>
40+
{
41+
commitements.map((item: Commitement) => (
42+
<CarrouselItem {...item}/>
43+
))
44+
}
45+
</div>
46+
</div>
47+
48+
<!-- Slider buttons -->
49+
<button
50+
@click={`currentIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : ${commitementsLength} - 1`}
51+
class="absolute -left-1 md:left-2 top-1/2 transform -translate-y-1/2 bg-white opacity-70 text-blue-600 px-2 rounded-xl"
52+
>
53+
<a class="p-1">
54+
<Fragment set:html={leftIcon} />
55+
</a>
56+
57+
</button>
58+
<button
59+
@click={`currentIndex = currentIndex + 1 < ${commitementsLength} ? currentIndex + 1 : 0`}
60+
class="absolute right-1 md:right-2 top-1/2 rotate-180 transform -translate-y-1/2 bg-white opacity-70 text-blue-600 px-2 rounded-xl"
61+
>
62+
<a class="p-1">
63+
<Fragment set:html={leftIcon} />
64+
</a>
65+
</button>
66+
</div>
67+
</div>

‎src/components/CommitementsCarrousel/CarrouselItem.astro‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
import Button from "../shared/Button.astro"
3+
import Icon from "./Icon.astro"
4+
5+
const {image, title, description, cta, link, icon} = Astro.props
6+
---
7+
<div class="w-fit flex">
8+
<div class="w-full flex flex-row-reverse md:flex-row">
9+
<img
10+
src={image}
11+
class="object-cover rounded-xl w-[300px] h-[400px] mr-4 md:mr-0"
12+
/>
13+
<div
14+
class="bg-white w-[600px] h-[400px] p-6 rounded-xl border-2 mx-0 mr-4 md:mx-4 flex flex-col align-top justify-between"
15+
>
16+
<div class="flex flex-col">
17+
<div class="w-full flex">
18+
<Icon icon={icon} />
19+
</div>
20+
<div class="flex flex-col w-fit my-6">
21+
<h3 class="text-xl font-semibold">
22+
{title}
23+
</h3>
24+
<p class="mt-4 text-gray-800">
25+
{description}
26+
</p>
27+
</div>
28+
</div>
29+
<div class="flex">
30+
<Button text={cta} link={link} style="primary" />
31+
</div>
32+
</div>
33+
</div>
34+
</div>

0 commit comments

Comments
 (0)