RustLangES · SergioRibera · Sep 29, 2024 · Sep 10, 2024 · Sep 10, 2024 · Sep 10, 2024
diff --git a/assets/ferris-hero.avif b/assets/ferris-hero.avif
diff --git a/assets/rustlangeshalloween.webp b/assets/rustlangeshalloween.webp
diff --git a/src/app.rs b/src/app.rs
@@ -21,7 +21,7 @@ pub fn App() -> impl IntoView {
         <Router>
             <HeadInformation/>
             <Body class=format!(
-                "bg-orange-200 dark:bg-[#131313]/90 bg-center bg-fixed {} dark:bri dark:bg-cover dark:bg-blend-darken dark:backdrop-blur-xl overflow-x-hidden dark:text-[#e2cea9]",
+                "bg-orange-200 dark:bg-[#131313]/90 bg-center bg-fixed {} dark:backdrop-brightness-[.25] overflow-x-hidden dark:text-[#e2cea9] bg-repeat bg-small",
                 bg_in_dark_mode,
             )/>
             <Header/>

diff --git a/src/components/button_large_link.rs b/src/components/button_large_link.rs
@@ -0,0 +1,46 @@
+use leptos::{component, view, Children, IntoView};
+use std::collections::HashMap;
+
+#[component]
+pub fn ButtonLargeLink(
+    #[prop(into)] href: String,
+    #[prop(default = "primary")] color: &'static str,
+    #[prop(default = "normal")] size: &'static str,
+    #[prop(default = "drop")] shadow: &'static str,
+    #[prop(into, optional)] class: String,
+    children: Children,
+) -> impl IntoView {
+    let colors = HashMap::from([
+        (
+            "primary",
+            "bg-orange-200 dark:bg-transparent hover:bg-black hover:text-white",
+        ),
+        ("white", "bg-orange-100 dark:bg-transparent hover:bg-black hover:text-white"),
+    ]);
+    let shadows = HashMap::from([
+        ("drop", "drop-shadow-[4px_4px_0_rgba(0,0,0)] hover:drop-shadow-[0_0_0_rgba(0,0,0)]"),
+        ("box", "drop-shadow-[4px_4px_0_rgba(0,0,0)] hover:drop-shadow-[0_0_0_rgba(0,0,0)] dark:drop-shadow-none shadow-sm hover:drop-shadow-none dark:hover:shadow-lg shadow-black"),
+    ]);
+    let sizes = HashMap::from([("tiny", "min-h-7"), ("normal", "h-9"), ("big", "h-12")]);
+    let current_color = (*colors.get(&color).unwrap()).to_string();
+    let current_size = (*sizes.get(&size).unwrap()).to_string();
+    let shadow = (*shadows.get(&shadow).unwrap()).to_string();
+
+    view! {
+        <a
+            href=href
+            target="_blank"
+            class=format!(
+                "tracking-wider text-center font-work-sans border border-black dark:border-white flex items-center px-4 transition w-full max-w-full sm:max-w-[20rem] gap-x-4 {} {} {} {} whitespace-nowrap",
+                current_color,
+                current_size,
+                class,
+                shadow,
+            )
+        >
+
+            {children()}
+        </a>
+    }
+}
+
diff --git a/src/components/button_link.rs b/src/components/button_link.rs
@@ -15,7 +15,7 @@ pub fn ButtonLink(
             "primary",
             "bg-orange-200 dark:bg-transparent hover:bg-black hover:text-white",
         ),
-        ("white", "bg-orange-100 dark:bg-transparent hover:bg-black"),
+        ("white", "bg-orange-100 dark:bg-transparent hover:bg-black hover:text-white"),
     ]);
     let shadows = HashMap::from([
         ("drop", "drop-shadow-[4px_4px_0_rgba(0,0,0)] hover:drop-shadow-[0_0_0_rgba(0,0,0)]"),

diff --git a/src/components/hacktoberfest.rs b/src/components/hacktoberfest.rs
@@ -0,0 +1,61 @@
+use leptos::{component, view, IntoView};
+
+use crate::components::{
+    button_link::ButtonLink,
+    button_large_link::ButtonLargeLink,
+    icons::{DiscordIcon, CalendarIcon, GithubIcon},
+};
+
+#[component]
+pub fn Hacktoberfest() -> impl IntoView {
+    view! {
+        <section class="bg-orange-200/30 dark:bg-transparent">
+            <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">
+                        <span class="font-work-sans font-light">
+                            "🚀 ¡Únete a la celebración del" 
+                            <span class="font-alfa-slab text-orange-500">" Hacktoberfest "</span>
+                            "con nosotros! 🚀"
+                        </span>
+                    </h2>
+                    <p class="text-center text-xl">
+                        "Este" <span class="text-orange-500 font-alfa-slab">" 5 de Octubre"</span>"
+                        , nuestra comunidad se une a este emocionante evento de programación. 
+                        Aprovecha esta excelente oportunidad para contribuir a proyectos open-source, aprender nuevas habilidades 
+                        y conectar con otros amantes del open-source."
+                    </p>
+                    <div class="flex items-center gap-x-12 gap-y-6 flex-col *:w-full sm:flex-row">
+                        <ButtonLink
+                            href="https://discord.gg/4ng5HgmaMg"
+                            shadow="box"
+                            color="white"
+                            size="big"
+                        >
+                            <DiscordIcon size=30/>
+                            "Participa"
+                        </ButtonLink>
+                        <ButtonLargeLink
+                            href="https://calendar.app.google/SQZKr1D1eni9MgJL7"
+                            shadow="box"
+                            color="white"
+                            size="big"
+                        >
+                            <CalendarIcon size=30/>
+                            "Añade a tu calendario"
+                        </ButtonLargeLink>
+                        <ButtonLargeLink
+                            href="https://forms.rustlang-es.org/form/1"
+                            shadow="box"
+                            color="white"
+                            size="big"
+                        >
+                            <GithubIcon size=30/>
+                            "Postula tu proyecto"
+                        </ButtonLargeLink>
+                    </div>
+                </div>
+            </div>
+        </section>
+    }
+}
diff --git a/src/components/icons/calendar_icon.rs b/src/components/icons/calendar_icon.rs
@@ -0,0 +1,21 @@
+use leptos::{component, view, IntoView};
+
+#[component]
+pub fn CalendarIcon(
+    #[prop(default = 40)] size: u32,
+    #[prop(default = "fill-current dark:fill-[#bf8821]")] class: &'static str,
+) -> impl IntoView {
+    view! {
+        <svg
+            width=size
+            height=size
+            viewBox="0 0 18 21"
+            class=class
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M13 0.5C13.2449 0.500032 13.4813 0.589956 13.6644 0.752715C13.8474 0.915475 13.9643 1.13975 13.993 1.383L14 1.5V2.5H15C15.7652 2.49996 16.5015 2.79233 17.0583 3.31728C17.615 3.84224 17.9501 4.56011 17.995 5.324L18 5.5V17.5C18 18.2652 17.7077 19.0015 17.1827 19.5583C16.6578 20.115 15.9399 20.4501 15.176 20.495L15 20.5H3C2.23479 20.5 1.49849 20.2077 0.941739 19.6827C0.384993 19.1578 0.0498925 18.4399 0.00500012 17.676L4.66045e-09 17.5V5.5C-4.26217e-05 4.73479 0.292325 3.99849 0.817284 3.44174C1.34224 2.88499 2.06011 2.54989 2.824 2.505L3 2.5H4V1.5C4.00028 1.24512 4.09788 0.999968 4.27285 0.814632C4.44782 0.629296 4.68695 0.517765 4.94139 0.502828C5.19584 0.487891 5.44638 0.570675 5.64183 0.734265C5.83729 0.897855 5.9629 1.1299 5.993 1.383L6 1.5V2.5H12V1.5C12 1.23478 12.1054 0.98043 12.2929 0.792893C12.4804 0.605357 12.7348 0.5 13 0.5ZM16 7.5H2V17.125C2 17.83 2.386 18.411 2.883 18.491L3 18.5H15C15.513 18.5 15.936 17.97 15.993 17.285L16 17.125V7.5Z" fill="current-color"/>
+            <path d="M9 10.5C9.24493 10.5 9.48134 10.59 9.66437 10.7527C9.84741 10.9155 9.96434 11.1397 9.993 11.383L10 11.5V14.5C9.99972 14.7549 9.90212 15 9.72715 15.1854C9.55218 15.3707 9.31305 15.4822 9.0586 15.4972C8.80416 15.5121 8.55362 15.4293 8.35817 15.2657C8.16271 15.1021 8.0371 14.8701 8.007 14.617L8 14.5V12.5C7.74512 12.4997 7.49997 12.4021 7.31463 12.2272C7.12929 12.0522 7.01776 11.813 7.00283 11.5586C6.98789 11.3042 7.07067 11.0536 7.23426 10.8582C7.39785 10.6627 7.6299 10.5371 7.883 10.507L8 10.5H9Z" fill="current-color"/>
+        </svg>
+    }
+}
+
diff --git a/src/components/icons/discord_icon.rs b/src/components/icons/discord_icon.rs
@@ -3,7 +3,7 @@ use leptos::{component, view, IntoView};
 #[component]
 pub fn DiscordIcon(
     #[prop(default = 40)] size: u32,
-    #[prop(default = "fill-black dark:fill-[#bf8821]")] class: &'static str,
+    #[prop(default = "fill-current dark:fill-[#bf8821]")] class: &'static str,
 ) -> impl IntoView {
     view! {
         <svg
@@ -17,3 +17,4 @@ pub fn DiscordIcon(
         </svg>
     }
 }
+
diff --git a/src/components/icons/github_icon.rs b/src/components/icons/github_icon.rs
@@ -3,7 +3,7 @@ use leptos::{component, view, IntoView};
 #[component]
 pub fn GithubIcon(
     #[prop(default = 40)] size: u32,
-    #[prop(default = "fill-black dark:fill-[#bf8821]")] class: &'static str,
+    #[prop(default = "fill-current dark:fill-[#bf8821]")] class: &'static str,
 ) -> impl IntoView {
     view! {
         <svg

diff --git a/src/components/icons/linkedin_icon.rs b/src/components/icons/linkedin_icon.rs
@@ -3,7 +3,7 @@ use leptos::*;
 #[component]
 pub fn LinkedinIcon(
     #[prop(default = 40)] size: u32,
-    #[prop(default = "fill-black dark:fill-[#bf8821]")] class: &'static str,
+    #[prop(default = "fill-current dark:fill-[#bf8821]")] class: &'static str,
 ) -> impl IntoView {
     view! {
         <svg
@@ -17,3 +17,4 @@ pub fn LinkedinIcon(
         </svg>
     }
 }
+
diff --git a/src/components/icons/mod.rs b/src/components/icons/mod.rs
@@ -1,4 +1,5 @@
 mod cloudflare;
+mod calendar_icon;
 mod discord_icon;
 mod github_icon;
 mod linkedin_icon;
@@ -9,6 +10,7 @@ mod telegram_icon;
 mod twitter_icon;
 mod web_icon;
 
+pub use calendar_icon::*;
 pub use cloudflare::*;
 pub use discord_icon::*;
 pub use github_icon::*;

diff --git a/src/components/icons/telegram_icon.rs b/src/components/icons/telegram_icon.rs
@@ -3,7 +3,7 @@ use leptos::{component, view, IntoView};
 #[component]
 pub fn TelegramIcon(
     #[prop(default = 40)] size: u32,
-    #[prop(default = "fill-black dark:fill-[#bf8821]")] class: &'static str,
+    #[prop(default = "fill-current dark:fill-[#bf8821]")] class: &'static str,
 ) -> impl IntoView {
     view! {
         <svg

diff --git a/src/components/mod.rs b/src/components/mod.rs
@@ -1,5 +1,6 @@
 mod aprende;
 mod button_link;
+mod button_large_link;
 mod cards;
 mod community_projects;
 mod footer;
@@ -8,13 +9,15 @@ mod header;
 mod hero;
 mod icons;
 mod other_communities;
+mod hacktoberfest;
 mod our_communities;
 pub mod separator;
 mod slogan_button;
 mod sponsors;
 
 pub use aprende::{Books, HeaderAprende, Roadmap, Youtube};
 pub use button_link::ButtonLink;
+pub use button_large_link::ButtonLargeLink;
 pub use cards::{CardTitle, CommunityCard, ContributorCard, ProjectCard};
 pub use community_projects::CommunityProjects;
 pub use footer::Footer;
@@ -25,6 +28,8 @@ pub use icons::{
     CloudflareIcon, DiscordIcon, GithubIcon, LinkedinIcon, LocationIcon, NextIcon, TelegramIcon,
     TwitterIcon,
 };
+
+pub use hacktoberfest::Hacktoberfest;
 pub use other_communities::OtherCommunities;
 pub use our_communities::OurCommunities;
 pub use separator::Separator;

diff --git a/src/pages/index.rs b/src/pages/index.rs
@@ -1,13 +1,14 @@
 use leptos::{component, view, IntoView};
 
-use crate::components::{CommunityProjects, Hero, OtherCommunities, OurCommunities, Sponsors};
+use crate::components::{CommunityProjects, Hero, OtherCommunities, OurCommunities, Hacktoberfest, Sponsors};
 
 #[component]
 pub fn Index() -> impl IntoView {
     view! {
         <div>
             <Hero/>
             <OurCommunities/>
+            <Hacktoberfest/>
             <CommunityProjects show_more=true/>
             <OtherCommunities show_more=true/>
             <Sponsors/>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -14,8 +14,12 @@ module.exports = {
         ...theme.screens,
       }),
       backgroundImage: (theme) => ({
-        "kaku-dev": "url('/assets/kaku.avif')",
-        "kaku": "url('/kaku.avif')",
+        "kaku-dev": "url('/assets/rustlangeshalloween.webp')",
+        "kaku": "url('/rustlangeshalloween.webp')",
+      }),
+      backgroundSize: (theme) => ({
+        'small': '12rem',
+        ...theme.backgroundSize,
       }),
       gridTemplateColumns:  (theme) => ({
         "divided": "2.5fr 1fr",
@@ -85,4 +89,4 @@ module.exports = {
     },
   },
   plugins: [],
-};
+};