Skip to content

Commit ec34438

Browse files
Phosphorus-MPhosphorus-M
committed
feat: add comunidad hero image, update Communities page layout, and enhance CommunityProjectSection with many_projects prop
1 parent 0fe091c commit ec34438

File tree

6 files changed

+165
-5
lines changed

6 files changed

+165
-5
lines changed

‎assets/new/images/comunidad-hero.png‎

42 KB
Loading

‎src/app.rs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ pub fn App() -> impl IntoView {
6060
<Header />
6161
<Routes fallback=|| "Not found.">
6262
<Route path=path!("/") view=Index />
63-
<Route path=path!("comunidades") view=Communities />
63+
<Route path=path!("comunidad") view=Communities />
6464
// <Route
6565
// path=path!("colaboradores")
6666
// view=Contributors

‎src/components/community_project.rs‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ use crate::{
1212
};
1313

1414
#[component]
15-
pub fn CommunityProjectSection() -> impl IntoView {
15+
pub fn CommunityProjectSection(
16+
#[prop(into, default = false)] many_projects: bool,
17+
) -> impl IntoView {
1618
let juanperas = GithubUser{ username: "juanperas", avatar: "https://avatars.githubusercontent.com/u/136520331?u=7353ba372f09091049692d6e95f5a8cd8a42565f&v=4" };
1719
let apika = GithubUser { username: "ApikaLucas", avatar: "https://avatars.githubusercontent.com/u/70247585?u=513513290efb6dc162afc899646e8e0467cedfc2&v=4"};
1820
let sergio = GithubUser { username: "Sergio", avatar: "https://avatars.githubusercontent.com/u/56278796?u=9e3dac947b4fd3ca2f1a05024e083c64e4c69cfe&v=4"};
@@ -35,7 +37,10 @@ pub fn CommunityProjectSection() -> impl IntoView {
3537

3638
// <div>
3739
<div class="flex flex-row justify-center items-center gap-4 max-w-full w-full">
38-
<div class="inline-flex flex-row items-center gap-8 overflow-x-auto p-4">
40+
<div
41+
class="inline-flex flex-row items-center gap-8 overflow-x-auto p-4"
42+
class:md:flex-wrap=many_projects
43+
>
3944
<ProjectCard
4045
label=view! {
4146
<StarBold size=16 />
@@ -55,12 +60,44 @@ pub fn CommunityProjectSection() -> impl IntoView {
5560
/>
5661
<ProjectCard
5762
label=view! { <p class="w-fit mr-2">$200</p> }.into_any()
58-
users=users
63+
users=users.clone()
5964
title="Memsos"
6065
description="Memsos is a tool written in rust with the objective to check your memory in a fast way, memsos works for both uefi and bios."
6166
badge_color="before:bg-primary-200"
6267
/>
68+
69+
{if many_projects {
70+
view! {
71+
<>
72+
<ProjectCard
73+
label=view! { <p class="w-fit mr-2">$200</p> }.into_any()
74+
users=users.clone()
75+
title="Memsos"
76+
description="Memsos is a tool written in rust with the objective to check your memory in a fast way, memsos works for both uefi and bios."
77+
badge_color="before:bg-primary-200"
78+
/>
79+
<ProjectCard
80+
label=view! { <p class="w-fit mr-2">$200</p> }.into_any()
81+
users=users.clone()
82+
title="Memsos"
83+
description="Memsos is a tool written in rust with the objective to check your memory in a fast way, memsos works for both uefi and bios."
84+
badge_color="before:bg-primary-200"
85+
/>
86+
<ProjectCard
87+
label=view! { <p class="w-fit mr-2">$200</p> }.into_any()
88+
users=users.clone()
89+
title="Memsos"
90+
description="Memsos is a tool written in rust with the objective to check your memory in a fast way, memsos works for both uefi and bios."
91+
badge_color="before:bg-primary-200"
92+
/>
93+
</>
94+
}
95+
.into_any()
96+
} else {
97+
view! { <></> }.into_any()
98+
}}
6399
</div>
100+
64101
</div>
65102

66103
<Button

‎src/components/mod.rs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,4 @@ pub mod our_sponsors;
1919
pub mod project_card;
2020
pub mod resources;
2121
pub mod sponsor_block;
22+
pub mod why_rust;

‎src/components/why_rust.rs‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
use leptos::prelude::*;
2+
use rustlanges_components::{
3+
avatar::Avatar,
4+
button::{Button, Variant as ButtonVariant},
5+
card::Card,
6+
};
7+
8+
pub fn WhyRust() -> impl IntoView {
9+
view! {
10+
<section class="bg-light dark:bg-dark p-4 lg:p-20 w-full">
11+
<div class="container xl:max-w-7xl lg:px-36 mx-auto flex flex-row gap-16 flex-wrap md:flex-nowrap justify-center items-center">
12+
<div class="w-full md:w-1/2 flex flex-col gap-8 p-8">
13+
<h2 class="text-5xl font-heading-1 font-bold text-center md:text-left">
14+
Nosotros
15+
</h2>
16+
<p class="text-heading-2 font-heading-4 font-semibold">
17+
Somos una <span class="text-primary-500">comunidad de Rust hispana</span>
18+
que busca la promoción de este lenguaje.
19+
</p>
20+
</div>
21+
22+
<div class="w-full md:w-1/2 flex flex-col gap-8">
23+
<Card class="p-0 overflow-clip min-w-xs md:min-w-md">
24+
<h3 class="text-heading-3 font-heading-3 font-bold text-akira bg-neutral-950 text-center p-4 dark:text-[#FF6711]">
25+
"¿Por qué Rust?"
26+
</h3>
27+
<p class="text-heading-3 font-body p-8">
28+
Rust es un lenguaje de programación de sistemas que se enfoca en la seguridad, la velocidad y la concurrencia. Su sintaxis es similar a la de C++, pero introduce conceptos nuevos que lo hacen más seguro y más fácil de usar.
29+
</p>
30+
</Card>
31+
</div>
32+
</div>
33+
</section>
34+
}
35+
}

‎src/pages/communities.rs‎

Lines changed: 88 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,93 @@
11
use leptos::prelude::*;
2+
use rustlanges_components::{
3+
avatar::Avatar,
4+
button::{Button, Variant as ButtonVariant},
5+
};
6+
7+
use crate::{
8+
components::{community_project::CommunityProjectSection, why_rust::WhyRust},
9+
models::GithubUser,
10+
};
211

312
#[component]
413
pub fn Communities() -> impl IntoView {
5-
view! { <div></div> }
14+
let juanperas = GithubUser{ username: "juanperas", avatar: "https://avatars.githubusercontent.com/u/136520331?u=7353ba372f09091049692d6e95f5a8cd8a42565f&v=4" };
15+
let apika = GithubUser { username: "ApikaLucas", avatar: "https://avatars.githubusercontent.com/u/70247585?u=513513290efb6dc162afc899646e8e0467cedfc2&v=4"};
16+
let sergio = GithubUser { username: "Sergio", avatar: "https://avatars.githubusercontent.com/u/56278796?u=9e3dac947b4fd3ca2f1a05024e083c64e4c69cfe&v=4"};
17+
18+
let users = vec![
19+
juanperas.clone(),
20+
apika.clone(),
21+
sergio.clone(),
22+
juanperas.clone(),
23+
];
24+
25+
let avatars = users
26+
.iter()
27+
.skip(1)
28+
.map(|user| {
29+
view! { <Avatar class="-ml-4 border-black" url=user.avatar alt=user.username size=64 /> }
30+
})
31+
.collect_view();
32+
33+
view! {
34+
<section>
35+
<div class="w-full h-[65dvh] rustlang-es-background dark:bg-[#F04906] text-akira flex items-center justify-center">
36+
<div class="container max-w-7xl flex flex-col-reverse md:flex-row items-center justify-center m-auto">
37+
<div class="flex flex-col justify-center gap-8 mx-auto">
38+
<div class="flex flex-col gap-2 justify-center not-md:items-center w-full text-center lg:text-left">
39+
<p class="uppercase text-h1 font-heading-1 text-akira font-bold text-primary-500 dark:text-primary-200">
40+
La comunidad
41+
</p>
42+
<p class="uppercase text-h1 font-heading-1 text-akira font-bold">
43+
de Rust en español
44+
</p>
45+
<p class="text-heading-4 font-heading-4 max-w-md">
46+
Un espacio donde <span class="font-bold">aprender</span>,
47+
<span class="font-bold">compartir</span>y
48+
<span class="font-bold">potenciar</span>
49+
tus habilidades en el lenguaje.
50+
</p>
51+
</div>
52+
<div class="flex gap-4 flex-wrap w-full not-md:justify-center not-md:items-center">
53+
<Button
54+
variant=ButtonVariant::Primary
55+
class="bg-light font-body"
56+
on_click=|_| {}
57+
label="¡Únete a la Comunidad!"
58+
/>
59+
</div>
60+
</div>
61+
<div>
62+
<img
63+
src="/assets/new/images/comunidad-hero.png"
64+
alt=""
65+
class="max-w-3xs lg:max-w-md"
66+
/>
67+
<div class="flex flex-row justify-center items-center gap-8 mt-8">
68+
<div>
69+
<h3 class="text-primary-500 dark:text-primary-200 text-heading-1">
70+
+1000
71+
</h3>
72+
<h3 class="text-primary-500 dark:text-primary-200 text-body font-body text-right">
73+
Rustáceos
74+
</h3>
75+
</div>
76+
<div class="flex items-center justify-center ">
77+
<Avatar
78+
class="border-black"
79+
url=users[0].avatar
80+
alt=users[0].username
81+
size=64
82+
/>
83+
{avatars}
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
</section>
90+
<WhyRust />
91+
<CommunityProjectSection many_projects=true />
92+
}
693
}

0 commit comments

Comments
 (0)