diff --git a/src/lib/components/Member.svelte b/src/lib/components/Member.svelte index 8c96bf0..0f37244 100644 --- a/src/lib/components/Member.svelte +++ b/src/lib/components/Member.svelte @@ -14,11 +14,11 @@
- Foto + Foto
-

{name}

-

{role}

+

{name}

+

{role}

diff --git a/src/lib/components/Members_home.svelte b/src/lib/components/Members_home.svelte index 1a54fae..161a8a3 100644 --- a/src/lib/components/Members_home.svelte +++ b/src/lib/components/Members_home.svelte @@ -1,17 +1,26 @@ -
- {#each members as member} - - {/each} -
+
+ + <div + class="grid grid-cols-2 justify-center justify-items-center pb-2 pt-16 md:grid-cols-3 md:px-40" + > + {#each members as member} + <Member + name={member.name} + role={member.role} + photo={member.photo} + socialMedia={member.socialMedia} + ></Member> + {/each} + </div> + <div class="flex flex-col items-center pb-20"> + <button class="py rounded-full bg-lime-500 px-8 font-fira font-semibold text-black"> + <a href="/members"> Ver más </a> + </button> + </div> +</section> diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte index f091aab..873ce56 100644 --- a/src/lib/components/layout/Navbar.svelte +++ b/src/lib/components/layout/Navbar.svelte @@ -58,12 +58,14 @@ height: 150px; margin-bottom: 2%; } + .nav-background { background-image: url("$lib/assets/forms/line.svg"); background-repeat: no-repeat; top: 20px; background-size: 97% auto; } + .links { margin-right: 70px; } @@ -101,6 +103,7 @@ nav img { margin-bottom: 5rem; } + .links.open { display: flex; /* Mostrar el menú cuando esté abierto */ } diff --git a/src/lib/data/members.json b/src/lib/data/members.json index cda2bde..cffd1ae 100644 --- a/src/lib/data/members.json +++ b/src/lib/data/members.json @@ -4,62 +4,187 @@ "role": "Presidente", "photo": "https://avatars.githubusercontent.com/u/72272077?v=4", "directiva": "si", - "socialMedia": [{ "nombre": "github", "link": "https://github.com/alicarpio" }] + "socialMedia": [ + { + "nombre": "github", + "link": "https://github.com/alicarpio" + }, + { + "nombre": "linkedin", + "link": "https://www.linkedin.com/in/alina-carpio/" + } + ] }, { "name": "Melissa Ayllon", "role": "Vicepresidente", "photo": "https://avatars.githubusercontent.com/u/116417470?v=4", "directiva": "si", - "socialMedia": [{ "nombre": "github", "link": "https://github.com/MelissaAyllon" }] + "socialMedia": [ + { + "nombre": "github", + "link": "https://github.com/MelissaAyllon" + }, + { + "nombre": "linkedin", + "link": "https://www.linkedin.com/in/melissa-ayllon-193558221/" + } + ] }, { "name": "Michael Estrada", "role": "Secretario", "photo": "https://avatars.githubusercontent.com/u/98861990?v=4", "directiva": "si", - "socialMedia": [{ "nombre": "github", "link": "https://github.com/BryanEstrada003" }] + "socialMedia": [ + { + "nombre": "github", + "link": "https://github.com/BryanEstrada003" + }, + { + "nombre": "linkedin", + "link": "https://www.linkedin.com/in/maiestrada/" + } + ] + }, + { + "name": "Alexander Goussas", + "role": "Miembro", + "photo": "https://avatars.githubusercontent.com/u/84427521?v=4", + "directiva": "no", + "socialMedia": [ + { + "nombre": "github", + "link": "https://github.com/aloussase/" + }, + { + "nombre": "linkedin", + "link": "https://www.linkedin.com/in/alexander-goussas/" + } + ] }, { "name": "Adrian Delgado", "role": "Miembro", "photo": "https://avatars.githubusercontent.com/u/11708972?v=4", "directiva": "no", - "socialMedia": [{ "nombre": "github", "link": "https://github.com/adriandelgado" }] + "socialMedia": [ + { + "nombre": "github", + "link": "https://github.com/adriandelgado" + } + ] }, { "name": "Braulio Rivas", "role": "Miembro", "photo": "https://avatars.githubusercontent.com/u/61257604?v=4", "directiva": "no", - "socialMedia": [{ "nombre": "github", "link": "https://github.com/brauliorivas" }] + "socialMedia": [ + { + "nombre": "github", + "link": "https://github.com/brauliorivas" + }, + { + "nombre": "linkedin", + "link": "https://www.linkedin.com/in/braulio-rivas-abad/" + } + ] }, { "name": "Daniel Cortez", "role": "Miembro", "photo": "https://avatars.githubusercontent.com/u/112514991?v=4", "directiva": "no", - "socialMedia": [{ "nombre": "github", "link": "https://github.com/DanRCM" }] + "socialMedia": [ + { + "nombre": "github", + "link": "https://github.com/DanRCM" + }, + { + "nombre": "linkedin", + "link": "https://www.linkedin.com/in/daniel-cortez-manzano-384041253/" + } + ] }, { "name": "Adair Abrigo", "role": "Miembro", "photo": "https://avatars.githubusercontent.com/u/93391519?v=4", "directiva": "no", - "socialMedia": [{ "nombre": "github", "link": "https://github.com/adairaxe" }] + "socialMedia": [ + { + "nombre": "github", + "link": "https://github.com/adairaxe" + }, + { + "nombre": "linkedin", + "link": "https://www.linkedin.com/in/adair-abrigo-amay/" + } + ] }, { "name": "Anthony Herrera", "role": "Miembro", "photo": "https://avatars.githubusercontent.com/u/137233273?v=4", "directiva": "no", - "socialMedia": [{ "nombre": "github", "link": "https://github.com/AnthonyyHL" }] + "socialMedia": [ + { + "nombre": "github", + "link": "https://github.com/AnthonyyHL" + }, + { + "nombre": "linkedin", + "link": "https://www.linkedin.com/in/anthonyyhl/" + } + ] }, { "name": "John Cañarte", "role": "Miembro", "photo": "https://avatars.githubusercontent.com/u/70679514?v=4", "directiva": "no", - "socialMedia": [{ "nombre": "github", "link": "https://github.com/Jecanart" }] + "socialMedia": [ + { + "nombre": "github", + "link": "https://github.com/Jecanart" + }, + { + "nombre": "linkedin", + "link": "https://www.linkedin.com/in/john-ca%C3%B1arte-7728a62b6/" + } + ] + }, + { + "name": "Noelia Pasaca", + "role": "Miembro", + "photo": "https://avatars.githubusercontent.com/u/91957504?v=4", + "directiva": "no", + "socialMedia": [ + { + "nombre": "github", + "link": "https://github.com/noeliapasaca" + }, + { + "nombre": "linkedin", + "link": "https://www.linkedin.com/in/noelia-pasaca-paladines-058a4a221/" + } + ] + }, + { + "name": "María Jose Moyano", + "role": "Miembro", + "photo": "https://avatars.githubusercontent.com/u/93271608?v=4", + "directiva": "no", + "socialMedia": [ + { + "nombre": "github", + "link": "https://github.com/majomoyano" + }, + { + "nombre": "linkedin", + "link": "https://www.linkedin.com/in/mjmoyanotamayo/" + } + ] } ] diff --git a/src/routes/Hero.svelte b/src/routes/Hero.svelte index 27360b1..a456caf 100644 --- a/src/routes/Hero.svelte +++ b/src/routes/Hero.svelte @@ -1,4 +1,6 @@ -<section class="mt-24 flex flex-col items-center justify-between gap-y-12 sm:flex-row lg:flex-row"> +<section + class="flex flex-col items-center justify-between gap-y-12 sm:flex-row lg:mt-24 lg:flex-row" +> <div class="relative"> <img src="https://images.unsplash.com/photo-1601933470096-0e34634ffcde?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" diff --git a/src/routes/members/+page.svelte b/src/routes/members/+page.svelte index 345c9d2..d78ddd6 100644 --- a/src/routes/members/+page.svelte +++ b/src/routes/members/+page.svelte @@ -1,9 +1,10 @@ <script lang="ts"> import Member from "$lib/components/Member.svelte"; + let { data } = $props(); </script> -<h1 class=" pb-8 pt-5 text-center font-fira text-4xl text-slate-200">Directiva</h1> +<h1 class=" pb-8 pt-5 text-center font-fira text-3xl text-slate-200 lg:mt-28">Directiva</h1> <div class="grid grid-cols-1 justify-center justify-items-center px-20 py-3 md:grid-cols-3 md:px-48" > @@ -19,7 +20,7 @@ {/each} </div> -<h1 class=" pb-8 pt-5 text-center font-fira text-4xl text-slate-200">Miembros</h1> +<h1 class=" pb-8 pt-5 text-center font-fira text-3xl text-slate-200">Miembros</h1> <div class="grid grid-cols-1 justify-center justify-items-center px-20 py-3 md:grid-cols-3 md:px-48" >