feat: add a section about sponsors

Author: Phosphorus-M

assets/sponsors/shuttle.webp

@@ -4,6 +4,7 @@ mod linkedin_icon;
 mod location_icon;
 mod logo_rust_page;
 mod next;
+mod shuttle_icon;
 mod telegram_icon;
 mod twitter_icon;
 mod web_icon;
@@ -14,6 +15,7 @@ pub use linkedin_icon::*;
 pub use location_icon::*;
 pub use logo_rust_page::*;
 pub use next::*;
+pub use shuttle_icon::*;
 pub use telegram_icon::*;
 pub use twitter_icon::*;
 pub use web_icon::*;

assets/sponsors/universidad_nur.png

@@ -0,0 +1,52 @@
+use leptos::{component, view, IntoView};
+
+#[component]
+pub fn ShuttleIcon() -> impl IntoView {
+    view! {
+        <svg
+            width="1em"
+            height="1em"
+            viewBox="0 0 80 20"
+
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            class="text-8xl dark:text-head"
+        >
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M21.5276 0.927734L14.3516 7.9646L7.17585 7.9646L0 15.0013H7.17585L7.17585 22.0375H0V29.0743H7.17585L7.17585 22.0383H14.3516V29.0751L21.5276 22.0383V15.0013L28.7034 7.9646V0.927734H21.5276Z"
+            ></path>
+        </svg>
+    }
+}
+
+#[component]
+pub fn CloudflareIcon() -> impl IntoView {
+    view! {
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="100"
+            height="100"
+            fill="none"
+            viewBox="0 0 60 27"
+            class="rounded-full max-w-full max-h-full mx-auto"
+        >
+            <g clip-path="url(#a)">
+                <path
+                    fill="#FBAD41"
+                    d="M47.927 11.725c-.2 0-.397.007-.594.014a.271.271 0 0 0-.094.022.33.33 0 0 0-.214.229l-.846 2.924c-.365 1.257-.23 2.418.383 3.27.563.789 1.498 1.251 2.634 1.305l4.589.276a.41.41 0 0 1 .326.179.44.44 0 0 1 .046.39.58.58 0 0 1-.498.384l-4.768.276c-2.59.118-5.377 2.21-6.355 4.761l-.344.9a.253.253 0 0 0 .225.343H58.84a.435.435 0 0 0 .422-.315 11.69 11.69 0 0 0 .437-3.185c0-6.5-5.266-11.766-11.764-11.766"
+                ></path>
+                <path
+                    fill="#F6821F"
+                    d="m40.76 26.62.304-1.057c.365-1.258.229-2.418-.384-3.271-.562-.788-1.497-1.25-2.633-1.304l-21.527-.276a.426.426 0 0 1-.34-.18.44.44 0 0 1-.047-.39.581.581 0 0 1 .502-.383l21.727-.276c2.58-.118 5.367-2.21 6.345-4.761l1.24-3.24a.814.814 0 0 0 .035-.43C44.572 4.733 38.925 0 32.172 0c-6.223 0-11.503 4.016-13.399 9.598a6.344 6.344 0 0 0-4.467-1.236 6.367 6.367 0 0 0-5.517 7.91C3.913 16.417 0 20.412 0 25.32c0 .445.032.882.097 1.308a.418.418 0 0 0 .415.362H40.268a.517.517 0 0 0 .491-.376"
+                ></path>
+            </g>
+            <defs>
+                <clipPath id="a">
+                    <path fill="#FFF" d="M0 0h60v27H0z"></path>
+                </clipPath>
+            </defs>
+        </svg>
+    }
+}

assets/sponsors/universidad_nur2.png

@@ -9,7 +9,9 @@ mod hero;
 mod icons;
 mod other_communities;
 mod our_communities;
+pub mod separator;
 mod slogan_button;
+mod sponsors;
 
 pub use aprende::{Books, HeaderAprende, Roadmap, Youtube};
 pub use button_link::ButtonLink;
@@ -20,8 +22,11 @@ pub use head_information::HeadInformation;
 pub use header::Header;
 pub use hero::Hero;
 pub use icons::{
-    DiscordIcon, GithubIcon, LinkedinIcon, LocationIcon, NextIcon, TelegramIcon, TwitterIcon,
+    CloudflareIcon, DiscordIcon, GithubIcon, LinkedinIcon, LocationIcon, NextIcon, TelegramIcon,
+    TwitterIcon,
 };
 pub use other_communities::OtherCommunities;
 pub use our_communities::OurCommunities;
+pub use separator::Separator;
 pub use slogan_button::SloganButton;
+pub use sponsors::Sponsors;

src/components/icons/mod.rs

@@ -0,0 +1,70 @@
+use leptos::{component, view, IntoView};
+
+// .shapedividers_com-4750{
+//     overflow:hidden;
+//     position:relative;
+//     }
+//     .shapedividers_com-4750::before{
+//     content:'';
+//     font-family:'shape divider from ShapeDividers.com';
+//     position: absolute;
+//     z-index: 3;
+//     pointer-events: none;
+//     background-repeat: no-repeat;
+//     bottom: -0.1vw;
+//     left: -0.1vw;
+//     right: -0.1vw;
+//     top: -0.1vw;
+//     background-size: 100% 90px;
+//     background-position: 50% 100%;
+//     transform: rotateY(180deg); background-image: url('data:image/svg+xml;charset=utf8, <svg preserveAspectRatio="xMidYMin slice" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 73"><g fill="%23fbd8c2">');
+//     }
+
+//     @media (min-width:2100px){
+//     .shapedividers_com-4750::before{
+//     background-size: 100% calc(2vw + 90px);
+//     }
+//     }
+
+#[component]
+pub fn Separator() -> impl IntoView {
+    view! {
+        <svg
+            height="90px"
+            preserveAspectRatio="xMidYMax slice"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 2000 73"
+        >
+            <g class="fill-orange-400/30 dark:fill-gray-800/50">
+                <path d="M0 73V60c6-1 12-2 16-7a48 48 0 005-6 46 46 0 012-4c3-3 7-6 11-6 4 1 7 4 11 3s7-4 9-7 4-7 8-8 7 1 11 4l3 1a23 23 0 0013 2 29 29 0 0014-6l3-2c5-4 9-10 12-15l12 15h1c4 4 10 8 17 9a23 23 0 0012-2l1-1c4-2 9-6 14-5 4 1 6 5 8 8s5 7 9 7 7-2 11-3c4 0 8 3 10 6l1 1 6 9c5 5 11 7 18 7a26 26 0 016 0 27 27 0 015 0c7 0 13-2 18-7l6-8 1-2c3-3 6-6 11-6 3 1 7 4 11 3s6-4 8-7 5-7 8-8a10 10 0 017 1l7 4a23 23 0 0014 2 29 29 0 0013-5 38 38 0 004-3l12-15c4 5 7 11 12 15s11 8 17 8a23 23 0 0013-2c5-2 10-6 15-5 3 1 6 5 8 8s4 7 8 7 8-2 11-3c5 0 8 3 11 6l1 2 6 8c5 5 11 7 18 7a26 26 0 015 0 27 27 0 016 0c7 0 13-2 18-7a52 52 0 004-7l3-3c2-3 6-6 10-6 4 1 7 4 11 3s7-4 9-7 4-7 8-8c5-1 9 2 13 4l1 1a23 23 0 0014 2 30 30 0 0014-6l2-2c5-4 9-10 13-15 3 5 7 11 12 15l1 1c4 4 10 7 16 8a23 23 0 0013-3h1c4-3 9-6 13-5s6 5 8 8 5 7 9 7 7-2 11-3c4 0 8 3 11 6l1 1 6 9c5 5 11 7 18 7a26 26 0 015 0 27 27 0 016 0c6 0 13-2 17-7 3-2 4-5 6-8l1-2c3-3 7-6 11-6 4 1 7 4 11 3s7-4 9-7 4-7 8-8c3-1 5 0 8 2l6 3a23 23 0 0013 3 29 29 0 0014-6 41 41 0 003-3c5-4 9-10 12-15 4 5 8 11 13 15 5 5 10 8 17 9a23 23 0 0010-1 22 22 0 003-2c5-2 9-6 14-5 4 1 6 5 8 8s5 7 9 7 7-2 11-3c4 0 8 3 10 6l2 2a70 70 0 006 8c4 5 11 7 17 7a26 26 0 016 0 27 27 0 015 0c7 0 13-2 18-7a62 62 0 005-7l2-3c3-3 7-6 11-6 4 1 7 4 11 3s6-4 8-7 5-7 8-8c5-1 10 3 15 5l1 1a23 23 0 0012 1 30 30 0 0017-8c5-4 8-10 12-15l12 15 3 2a30 30 0 0014 6 23 23 0 0014-2l4-2c3-2 6-4 10-3s6 5 8 8 5 7 9 7 7-2 11-3c4 0 8 3 10 6l1 2 6 8c5 5 11 7 18 7a26 26 0 016 0 27 27 0 015 0c7 0 13-2 18-7l6-9 1-1c3-3 6-6 11-6 3 1 7 4 11 3s6-4 8-7 5-7 8-8 8 1 12 3l2 2a23 23 0 0014 2 30 30 0 0015-7l2-1 12-15c4 5 7 11 12 15l2 1c4 4 9 7 15 7a23 23 0 0013-2c5-2 10-6 15-5 3 1 6 5 8 8s4 7 8 7 7-2 11-3c4 0 8 3 11 6l2 3a58 58 0 005 7c5 5 11 7 18 7a26 26 0 015 0 27 27 0 016 0c6 0 13-2 17-7a56 56 0 005-7l3-3c2-3 6-6 10-6 4 1 7 4 11 3s7-4 9-7 4-7 8-8c5-1 9 3 14 5a23 23 0 0013 3 30 30 0 0016-8l1-1c5-4 9-10 13-15 3 5 7 11 12 15l1 1c5 4 10 7 16 8a23 23 0 0013-3l2-1c4-2 8-5 12-4s6 5 8 8 5 7 9 7 7-2 11-3c4 0 8 3 11 6l1 2 6 8c4 5 11 7 17 7a26 26 0 016 0 27 27 0 015 0c7 0 13-2 18-7l6-8 1-2c3-3 7-6 11-6 4 1 7 4 11 3s7-4 9-7 4-7 8-8c3-1 6 1 9 3l5 2a23 23 0 0013 3 29 29 0 0015-7l2-2c5-4 9-10 12-15 4 5 8 11 13 15v1c5 4 11 7 16 8a23 23 0 0012-2l2-1c4-2 9-6 14-5 4 1 6 5 8 8s5 7 9 7 7-2 11-3c4 0 8 3 10 6l2 2a65 65 0 005 8c5 5 11 7 18 7l7 1v12z"></path>
+                <path d="M714 9l-8 6 3 10h10l3-10-8-6zM746 20l-14 10 5 16h17l5-16-13-10zM462 9l-9 6 4 10h10l3-10-8-6zM589 3l-11 8 4 12h13l5-12-11-8zM494 20l-14 10 5 16h17l5-16-13-10zM212 6l-8 6 3 9h10l3-9-8-6zM333 4l-8 6 3 10h10l4-10-9-6zM244 17l-14 9 5 16h17l5-16-13-9zM147 3l-8 6 3 10h10l3-10-8-6zM88 0L76 9l5 14h15l4-14-12-9zM938 1l8 6-3 10h-10l-3-10 8-6zM995 31l10 7-4 12h-12l-4-12 10-7zM1045 12l7 5-2 9h-9l-3-9 7-5zM903 3l11 8-4 13h-14l-4-13 11-8zM1275 11l8 6-3 10h-10l-3-10 8-6zM1150 4l8 6-3 10h-10l-3-10 8-6zM1247 27l11 8-4 13h-14l-4-13 11-8zM1526 8l8 6-3 10h-10l-3-10 8-6zM1402 3l8 6-3 9h-10l-3-9 8-6zM1498 24l12 8-5 14h-14l-4-14 11-8zM1719 8l-8 6 3 9h10l4-9-9-6zM1747 23l-11 8 4 14h14l5-14-12-8zM1903 3l-6 5 2 7h8l3-7-7-5zM1951 12l-9 6 4 11h11l4-11-10-6z"></path>
+            </g>
+        </svg>
+    }
+    // .shapedividers_com-8044{
+    //     overflow:hidden;
+    //     position:relative;
+    //     }
+    //     .shapedividers_com-8044::before{
+    //     content:'';
+    //     font-family:'shape divider from ShapeDividers.com';
+    //     position: absolute;
+    //     z-index: 3;
+    //     pointer-events: none;
+    //     background-repeat: no-repeat;
+    //     bottom: -0.1vw;
+    //     left: -0.1vw;
+    //     right: -0.1vw;
+    //     top: -0.1vw;
+    //     background-size: 100% 90px;
+    //     background-position: 50% 0%;  background-image: url('data:image/svg+xml;charset=utf8, ');
+    //     }
+
+    //     @media (min-width:2100px){
+    //     .shapedividers_com-8044::before{
+    //     background-size: 100% calc(2vw + 90px);
+    //     }
+    //     }
+
+    //     }
+}

src/components/icons/shuttle_icon.rs

@@ -0,0 +1,127 @@
+use std::collections::HashMap;
+
+use leptos::{component, view, Children, ChildrenFn, IntoView, SignalUpdate, View, ViewFn};
+
+use crate::components::{
+    icons::{ShuttleIcon, ShuttleIconProps, __ShuttleIcon},
+    CardTitle, CloudflareIcon, Separator,
+};
+
+#[component]
+pub fn Sponsors() -> impl IntoView {
+    view! {
+        <div class="bg-orange-50 dark:bg-transparent">
+            <div class="max-w-full overflow-clip">
+                <Separator/>
+            </div>
+            <section class="bg-orange-400/30 dark:bg-gray-800/50">
+                <div class="container mx-auto py-20 px-8">
+                    <h2 class="text-3xl text-left mb-2">"Respaldados por"</h2>
+                    <div class="w-full grid sm:grid-cols-2 md:grid-cols-3 gap-x-8 gap-y-8">
+                        <SponsorCard
+                            name="Nerdearla"
+                            image="https://nerdear.la/static/img/logos/n-detailed.svg"
+                            link="https://nerdear.la/es/"
+                            description="El evento de tecnología más grande en LatinoAmerica ha estado presentando charlas de la comunidad por 4 años seguidos."
+                        />
+                        <SponsorCard
+                            name="Shuttle"
+                            link="https://nerdear.la/es/"
+                            image="assets/sponsors/shuttle.webp"
+                            description="La empresa #1 en PAAS para Rust ha estado hosteando voluntariamente algunos servicios de la comunidad como el Cangrebot y la API."
+                        />
+                        <SponsorCard
+                            name="Universidad Nur"
+                            link="https://www.nur.edu"
+                            image="assets/sponsors/universidad_nur2.png"
+                            description="Esta universidad ha presentado un especial interés por Rust y la comunidad, nos han dado lugar a la divulgación con charlas y talleres."
+                        />
+                    </div>
+                    <div class="w-full flex flex-col md:flex-row items-center justify-center gap-x-8 gap-y-8">
+                        <SponsorCard
+                            name="Cloudflare"
+                            link="https://www.cloudflare.com/es-es/"
+                            component=CloudflareIcon().into_view()
+                            description="Cloudflare."
+                        />
+                        <SponsorCard
+                            name="Cloudflare"
+                            link="https://www.cloudflare.com/es-es/"
+                            component=CloudflareIcon().into_view()
+                            description="Cloudflare."
+                        />
+                    </div>
+                    <h3 class="text-lg text-left mb-6">
+                        "Estas son algunas organizaciones que apoyan nuestro trabajo."
+                    </h3>
+                </div>
+            </section>
+        </div>
+    }
+}
+
+#[component]
+pub fn SponsorCard(
+    #[prop(into)] name: &'static str,
+    #[prop(into)] link: &'static str,
+    #[prop(into)] description: &'static str,
+    #[prop(into, default=None)] image: Option<&'static str>,
+    #[prop(into, default=None)] component: Option<View>,
+    #[prop(into, default = "black")] image_bg_color: &'static str,
+) -> impl IntoView {
+    let colors = HashMap::from([
+        ("white", "bg-white dark:bg-white text-black dark:text-black"),
+        ("black", "bg-black text-white dark:text-black"),
+    ]);
+    let current_color = (*colors.get(&image_bg_color).unwrap()).to_string();
+
+    view! {
+        <div class="group flex flex-col gap-y-6 p-6 justify-between items-center max-w-screen-sm w-full">
+            <div class="mx-auto text-center">
+                {image
+                    .map(|image| {
+                        view! {
+                            <div class=format!(
+                                "mx-auto rounded-full h-[120px] w-[120px] {} mb-4",
+                                current_color,
+                            )>
+                                <Anchor link=link>
+                                    <img
+                                        alt=name
+                                        width="120"
+                                        height="120"
+                                        class="mb-4 rounded-full max-w-full max-h-full"
+                                        loading="lazy"
+                                        src=image
+                                    />
+                                </Anchor>
+                            </div>
+                        }
+                    })}
+                {component
+                    .map(|component| {
+                        view! {
+                            <div class=format!(
+                                "mx-auto text-center rounded-full h-[120px] w-[120px] {} mb-4",
+                                current_color,
+                            )>
+                                <Anchor link=link>{component}</Anchor>
+                            </div>
+                        }
+                    })}
+                <h3 class="text-xl font-bold font-work-sans text-black dark:text-white mb-2">
+                    <Anchor link=link>{name}</Anchor>
+                </h3> <p class="text-balance">{description}</p>
+            </div>
+        </div>
+    }
+}
+
+#[component]
+pub fn Anchor(#[prop(into)] link: &'static str, children: Children) -> impl IntoView {
+    view! {
+        <a href=link target="_blank">
+            {children()}
+        </a>
+    }
+}

src/components/mod.rs

@@ -1,6 +1,6 @@
 use leptos::{component, view, IntoView};
 
-use crate::components::{CommunityProjects, Hero, OtherCommunities, OurCommunities};
+use crate::components::{CommunityProjects, Hero, OtherCommunities, OurCommunities, Sponsors};
 
 #[component]
 pub fn Index() -> impl IntoView {
@@ -10,6 +10,7 @@ pub fn Index() -> impl IntoView {
             <OurCommunities/>
             <CommunityProjects show_more=true/>
             <OtherCommunities show_more=true/>
+            <Sponsors/>
         </div>
     }
 }