diff --git a/src/app.rs b/src/app.rs index 70bfe1e..b185c9a 100644 --- a/src/app.rs +++ b/src/app.rs @@ -2,7 +2,7 @@ use leptos::*; use leptos_meta::*; use leptos_router::*; -use crate::pages::index::Index; +use crate::pages::{contributors::Contributors, index::Index}; #[component] pub fn App() -> impl IntoView { @@ -12,6 +12,7 @@ pub fn App() -> impl IntoView { }/> + }/> } diff --git a/src/components/cards/contributor_card.rs b/src/components/cards/contributor_card.rs new file mode 100644 index 0000000..8733c74 --- /dev/null +++ b/src/components/cards/contributor_card.rs @@ -0,0 +1,30 @@ +use leptos::*; + +use crate::components::icons::github_icon::GithubIcon; + +#[component] +pub fn ContributorCard( + #[prop(into)] name: &'static str, + #[prop(into)] description: &'static str, + #[prop(into)] link: &'static str, + #[prop(into)] brand_src: &'static str, +) -> impl IntoView { + view! { +
+ +
+ name/ +

{name}

+

{description}

+
+ + + + +
+ } +} diff --git a/src/components/cards/mod.rs b/src/components/cards/mod.rs index 30f81ca..1679ce5 100644 --- a/src/components/cards/mod.rs +++ b/src/components/cards/mod.rs @@ -1,3 +1,4 @@ pub mod card_title; pub mod community_card; +pub mod contributor_card; pub mod project_card; diff --git a/src/components/cards/project_card.rs b/src/components/cards/project_card.rs index a91b4f1..3ed8681 100644 --- a/src/components/cards/project_card.rs +++ b/src/components/cards/project_card.rs @@ -40,17 +40,17 @@ pub fn ProjectCard( {brand_src} } + .into_any() } else { view! { - - brand_alt - + brand_alt } + .into_any() }}

{description}

diff --git a/src/components/header.rs b/src/components/header.rs index 984abe3..3611fb8 100644 --- a/src/components/header.rs +++ b/src/components/header.rs @@ -10,13 +10,13 @@ pub fn Header() -> impl IntoView {
-
+ Rust Lang en Español -
+ -

- {slogan} -

+
+ +

+ {slogan} +

+
diff --git a/src/pages/contributors.rs b/src/pages/contributors.rs new file mode 100644 index 0000000..dd51845 --- /dev/null +++ b/src/pages/contributors.rs @@ -0,0 +1,84 @@ +use leptos::*; + +use crate::components::{cards::contributor_card::ContributorCard, footer::Footer, header::Header}; + +struct ContributorItem { + name: &'static str, + description: &'static str, + link: &'static str, + brand_src: &'static str, +} + +#[component] +pub fn Contributors() -> impl IntoView { + let contributors: Vec = vec![ + ContributorItem { + name: "Phosphorus Moscu", + description: "Student in Computer Science degree at Universidad Nacional del Oeste | Developer Consultant at Globant", + link: "https://github.com/Phosphorus-M", + brand_src: "https://avatars.githubusercontent.com/u/19656993?v=4", + }, + ContributorItem { + name: "Sergio Alejandro Ribera Costa", + description: "Enthusiastic developer Linux and Open Source lover", + link: "https://github.com/SergioRibera", + brand_src: "https://avatars.githubusercontent.com/u/56278796?v=4", + }, + ContributorItem { + name: "Michael Cardoza", + description: "Software Developer", + link: "https://github.com/michaelcardoza", + brand_src: "https://avatars.githubusercontent.com/u/8800455?v=4", + }, + ContributorItem { + name: "Emilio Ruscitti", + description: "Rust Dev", + link: "https://github.com/Lemin-n", + brand_src: "https://avatars.githubusercontent.com/u/88170949?v=4", + }, + ContributorItem { + name: "carbon based lifeform", + description: "Rust Dev", + link: "https://github.com/ph4un00b", + brand_src: "https://avatars.githubusercontent.com/u/1057021?v=4", + }, + ContributorItem { + name: "CrawKatt", + description: "Aprendiz de Rust, estudiante de AIEP, Chileno", + link: "https://github.com/CrawKatt", + brand_src: "https://avatars.githubusercontent.com/u/108593932?v=4", + }, + ]; + + view! { +
+
+
+
+
+

+ "Nuestros " + "Colaboradores" +

+
+ {contributors + .into_iter() + .map(|contributor| { + view! { + + } + }) + .collect::>()} +
+
+
+
+
+ } +} diff --git a/src/pages/mod.rs b/src/pages/mod.rs index 33edc95..962ade3 100644 --- a/src/pages/mod.rs +++ b/src/pages/mod.rs @@ -1 +1,2 @@ +pub mod contributors; pub mod index; diff --git a/style/output.css b/style/output.css index 51d5c4f..1bec80c 100644 --- a/style/output.css +++ b/style/output.css @@ -576,6 +576,10 @@ video { position: relative; } +.z-10 { + z-index: 10; +} + .mx-auto { margin-left: auto; margin-right: auto; @@ -586,6 +590,10 @@ video { margin-bottom: 1rem; } +.-ml-6 { + margin-left: -1.5rem; +} + .mb-4 { margin-bottom: 1rem; } @@ -630,10 +638,6 @@ video { height: 3rem; } -.h-6 { - height: 1.5rem; -} - .h-9 { height: 2.25rem; } @@ -642,10 +646,18 @@ video { height: 60px; } +.h-full { + height: 100%; +} + .max-h-20 { max-height: 5rem; } +.w-12 { + width: 3rem; +} + .w-6 { width: 1.5rem; } @@ -671,8 +683,16 @@ video { max-width: 10rem; } -.max-w-\[90\%\] { - max-width: 90%; +.max-w-lg { + max-width: 32rem; +} + +.flex-1 { + flex: 1 1 0%; +} + +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); } .flex-col { @@ -740,18 +760,23 @@ video { row-gap: 1.5rem; } -.rounded-\[100\%\] { - border-radius: 100%; -} - .rounded-full { border-radius: 9999px; } +.rounded-r-full { + border-top-right-radius: 9999px; + border-bottom-right-radius: 9999px; +} + .border { border-width: 1px; } +.border-4 { + border-width: 4px; +} + .border-b { border-bottom-width: 1px; } @@ -761,6 +786,11 @@ video { border-color: rgb(0 0 0 / var(--tw-border-opacity)); } +.border-orange-400 { + --tw-border-opacity: 1; + border-color: rgb(251 146 60 / var(--tw-border-opacity)); +} + .border-b-black\/20 { border-bottom-color: rgb(0 0 0 / 0.2); } @@ -789,6 +819,11 @@ video { background-color: rgb(253 186 116 / 0.3); } +.bg-orange-400 { + --tw-bg-opacity: 1; + background-color: rgb(251 146 60 / var(--tw-bg-opacity)); +} + .bg-orange-900 { --tw-bg-opacity: 1; background-color: rgb(124 45 18 / var(--tw-bg-opacity)); @@ -821,6 +856,11 @@ video { padding-bottom: 3.5rem; } +.py-16 { + padding-top: 4rem; + padding-bottom: 4rem; +} + .py-20 { padding-top: 5rem; padding-bottom: 5rem; @@ -835,6 +875,14 @@ video { padding-bottom: 2.5rem; } +.pl-10 { + padding-left: 2.5rem; +} + +.pr-4 { + padding-right: 1rem; +} + .pt-5 { padding-top: 1.25rem; } @@ -1459,6 +1507,16 @@ video { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } +.group:hover .group-hover\:border-orange-500 { + --tw-border-opacity: 1; + border-color: rgb(249 115 22 / var(--tw-border-opacity)); +} + +.group:hover .group-hover\:bg-orange-500 { + --tw-bg-opacity: 1; + background-color: rgb(249 115 22 / var(--tw-bg-opacity)); +} + .group:hover .group-hover\:text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -1555,6 +1613,10 @@ video { align-items: center; } + .lg\:justify-start { + justify-content: flex-start; + } + .lg\:p-0 { padding: 0px; } @@ -1583,3 +1645,9 @@ video { grid-template-columns: repeat(5, minmax(0, 1fr)); } } + +@media (min-width: 1536px) { + .\32xl\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } +}