Merge pull request #67 from Phosphorus-M/main

Sección de Contribuidores y Sponsors

README.md

@@ -43,6 +43,12 @@ cargo install cargo-make
 cargo make serve
 ```
 
+For do a commit:
+```
+cargo install rusty-hook
+cargo install leptosfmt --version 0.1.13
+```
+
 ## Configura tu VSCode
 Agrega esto en tu `settings.json`
 

src/components/icons/cloudflare.rs

@@ -0,0 +1,31 @@
+use leptos::{component, view, IntoView};
+
+#[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>
+ }
+}

src/components/icons/mod.rs

@@ -1,3 +1,4 @@
+mod cloudflare;
 mod discord_icon;
 mod github_icon;
 mod linkedin_icon;
@@ -8,6 +9,7 @@ mod telegram_icon;
 mod twitter_icon;
 mod web_icon;
 
+pub use cloudflare::*;
 pub use discord_icon::*;
 pub use github_icon::*;
 pub use linkedin_icon::*;

src/components/mod.rs

@@ -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/separator.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/sponsors.rs

@@ -0,0 +1,130 @@
+use std::collections::HashMap;
+
+use leptos::{component, view, Children, IntoView, View};
+
+use crate::components::{CloudflareIcon, Separator};
+
+#[component]
+pub fn Sponsors() -> impl IntoView {
+ let assets_folder = if cfg!(debug_assertions) {
+ "./assets"
+ } else {
+ "."
+ };
+
+ 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>
+ <h3 class="text-lg text-left mb-6">
+ "Estas son algunas organizaciones que apoyan nuestro trabajo."
+ </h3>
+ <div class="w-full grid sm:grid-cols-2 md:grid-cols-3 gap-x-8 gap-y-8">
+ <SponsorCard
+ name="Cloudflare"
+ link="https://www.cloudflare.com/es-es/"
+ component=CloudflareIcon().into_view()
+ description="Cloudflare confiando en nuestra Vision, Metas y Objetivos, se suma como nuestro primer Sponsor, auspiciando nuestra infraestructura y servicios"
+ />
+ <SponsorCard
+ name="Universidad Nur"
+ link="https://www.nur.edu"
+ image=format!("{assets_folder}/sponsors/universidad_nur.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."
+ />
+ <SponsorCard
+ name="Heavy Duty Builders"
+ link="https://heavyduty.builders"
+ image=format!("{assets_folder}/sponsors/heavydutybuilders.png")
+ description="Queremos unir fuerzas con más constructores como nosotros en el ecosistema Blockchain, llámalo DAO si quieres, pero queremos decir mucho más."
+ />
+ </div>
+ <div class="w-full flex flex-col md:flex-row items-center justify-center gap-x-8 gap-y-8">
+ <SponsorCard
+ name="CrabNebula"
+ link="https://crabnebula.dev"
+ image=format!("{assets_folder}/sponsors/crabnebula.png")
+ description="Agilice el ciclo de vida de desarrollo de sus aplicaciones, facilitando más que nunca su empaquetado y envío."
+ />
+ <SponsorCard
+ name="Tauri"
+ link="https://tauri.app"
+ image=format!("{assets_folder}/sponsors/tauri.png")
+ description="Cree una aplicación optimizada, segura e independiente del frontend para su implantación multiplataforma."
+ />
+ </div>
+ </div>
+ </section>
+ </div>
+ }
+}
+
+#[component]
+pub fn SponsorCard(
+ #[prop(into)] name: &'static str,
+ #[prop(into)] link: &'static str,
+ #[prop(into)] description: &'static str,
+ #[prop(into, optional, default=None)] image: Option<String>,
+ #[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/pages/index.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>
  }
 }