Merge pull request #46 from RustLangES/communidad

change home add community page

Author: lsproule

.rusty-hook.toml

@@ -1,5 +1,4 @@
 [hooks]
-pre-commit = "cargo fmt --all && leptosfmt src && cargo clippy -- -D warnings"
 post-commit = "echo yay"
 
 [logging]

src/app.rs

@@ -4,7 +4,7 @@ use leptos_router::*;
 
 use crate::{
     components::{footer::Footer, header::Header},
-    pages::{contributors::Contributors, index::Index},
+    pages::{contributors::Contributors, index::Index, Communidad::Communidad},
 };
 
 #[component]
@@ -19,6 +19,7 @@ pub fn App() -> impl IntoView {
                     <Routes>
                         <Route path="/" view=|| view! { <Index/> }/>
                         <Route path="/colaboradores" view=|| view! { <Contributors/> }/>
+                        <Route path="/Communidad" view=|| view! { <Communidad/> }/>
                     </Routes>
                     <Outlet/>
                 </main>

src/components/button_link.rs

@@ -9,7 +9,7 @@ pub fn ButtonLink(
     children: Children,
 ) -> impl IntoView {
     let colors = HashMap::from([
-        ("primary", "bg-orange-300 hover:bg-black hover:text-white"),
+        ("primary", "bg-orange-200 hover:bg-black hover:text-white"),
         ("white", "bg-orange-100"),
     ]);
     let sizes = HashMap::from([("tiny", "min-h-7"), ("normal", "h-9"), ("big", "h-12")]);

src/components/cards/community_card.rs

@@ -19,7 +19,7 @@ pub fn CommunityCard(
         <a
             href=link
             target="_blank"
-            class="group flex flex-col gap-y-6 border border-black p-6 hover:bg-orange-500 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between"
+            class="group flex flex-col gap-y-6 border border-black p-6 hover:bg-orange-500 bg-orange-200 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between"
         >
             <div>
                 <img src=brand_src width="60" height="60" class="rounded-full mb-4" alt=brand_alt/>

src/components/cards/project_card.rs

@@ -26,7 +26,7 @@ pub fn ProjectCard(
         <a
             href=link
             target="_blank"
-            class="group flex flex-col gap-y-6 border border-black p-2 sm:p-6 hover:bg-orange-500 bg-orange-200 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between"
+            class="group flex flex-col gap-y-6 border border-black p-2 sm:p-6 hover:bg-orange-500 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between"
         >
             <div class="flex flex-col justify-between gap-y-2">
                 {if brand_as_letter {

src/components/community_projects.rs

@@ -3,9 +3,9 @@ use leptos::*;
 use crate::{components::cards::project_card::ProjectCard, extras::COMUNITY_PROJECTS};
 
 #[component]
-pub fn CommunityProjects() -> impl IntoView {
+pub fn CommunityProjects(#[prop(default = false)] main: bool) -> impl IntoView {
     view! {
-        <section class="bg-orange-200 py-20">
+        <section class="bg-orange-100 py-20">
             <div class="container mx-auto px-4">
                 <h2 class="text-3xl text-left mb-6">
                     <span class="font-work-sans font-light">"Proyectos de la "</span>
@@ -14,6 +14,7 @@ pub fn CommunityProjects() -> impl IntoView {
                 <div class="w-full grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 sm:gap-x-8 gap-y-8">
                     {COMUNITY_PROJECTS
                         .iter()
+                        .take(if main { 4 } else { COMUNITY_PROJECTS.len()  })
                         .map(|item| {
                             view! {
                                 <ProjectCard

src/components/header.rs

@@ -40,6 +40,10 @@ pub fn Header() -> impl IntoView {
                                 "Aprende"
                             </a>
                         </li>
+                        <li>
+                            <A href="/Communidad">"Communidad"</A>
+                        </li>
+
                         <li>
                             <A href="/colaboradores">"Colaboradores"</A>
                         </li>

src/components/hero.rs

@@ -11,6 +11,7 @@ pub fn Hero() -> impl IntoView {
         "⚡Blazingly fast⚡ 🚀 Super fast 🔥 pero ahora en español!",
         "Si te falla va ser de forma segura 😉",
         "Furrificando...",
+        "(*rust)malloc(sizeof(c))",
         "Dumb Pointer != Smart Pointer",
         "std::mem::transmute::<Go, Rust>(developer)",
         "In Rust, We Trust",
@@ -48,10 +49,12 @@ pub fn Hero() -> impl IntoView {
                             "En Español"
                         </span>
                     </h1>
-                    <div class="flex items-center justify-center lg:justify-start group">
+                    <div class="flex items-center justify-center lg:justify-start group"
+                    
+                            on:click=click_handler
+                    >
                         <button
                             class="bg-orange-300 border-4 border-orange-400 group-hover:border-orange-500 flex justify-center items-center rounded-full w-12 h-12 text-xl relative z-10"
-                            on:click=click_handler
                         >
                             <span class="motion-safe:animate-spin">"🎲"</span>
                         </button>

src/components/other_communities.rs

@@ -3,18 +3,19 @@ use leptos::*;
 use crate::{components::cards::community_card::CommunityCard, extras::OTHER_COMUNITIES};
 
 #[component]
-pub fn OtherCommunities() -> impl IntoView {
+pub fn OtherCommunities(#[prop(default = false)] main: bool) -> impl IntoView {
     view! {
-        <section class="bg-orange-100 py-20">
+        <section class="bg-orange-200 py-20">
             <div class="container mx-auto px-4">
                 <h2 class="text-3xl text-left mb-6">
                     <span class="font-work-sans font-light">"Otras "</span>
                     <span class="font-alfa-slab text-orange-500">"Comunidades"</span>
                     <span class="font-work-sans font-light">" recomendadas "</span>
                 </h2>
-                <div class="w-full grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-8 gap-y-8">
+                <div class="w-full grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-x-8 gap-y-8">
                     {OTHER_COMUNITIES
                         .iter()
+                        .take(if main { 4 } else { OTHER_COMUNITIES.len()  })
                         .map(|item| {
                             view! {
                                 <CommunityCard

src/components/our_communities.rs

@@ -8,7 +8,7 @@ use crate::components::{
 #[component]
 pub fn OurCommunities() -> impl IntoView {
     view! {
-        <section class="bg-orange-300/30">
+        <section class=" bg-orange-300/30">
             <div class="container mx-auto px-4">
                 <div class="flex flex-col items-center py-20 gap-y-6">
                     <h2 class="text-4xl text-center mb-4">

src/pages/Communidad.rs

@@ -0,0 +1,13 @@
+use leptos::*;
+
+use crate::components::{community_projects::CommunityProjects, other_communities::OtherCommunities};
+
+#[component]
+pub fn Communidad() -> impl IntoView {
+    view! {
+        <div>
+            <CommunityProjects/>
+            <OtherCommunities/>
+        </div>
+    }
+}

src/pages/index.rs

@@ -11,8 +11,8 @@ pub fn Index() -> impl IntoView {
         <div>
             <Hero/>
             <OurCommunities/>
-            <OtherCommunities/>
-            <CommunityProjects/>
+            <CommunityProjects main={true}/>
+            <OtherCommunities main={true}/>
         </div>
     }
 }

src/pages/mod.rs

@@ -1,2 +1,3 @@
 pub mod contributors;
+pub mod Communidad;
 pub mod index;

style/output.css

@@ -1640,10 +1640,6 @@ video {
   .xl\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-
-  .xl\:grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
 }
 
 @media (min-width: 1536px) {