posadev · Yaidi · Nov 5, 2025 · Nov 4, 2025
diff --git a/src/components/Communities.tsx b/src/components/Communities.tsx
diff --git a/src/components/Community.tsx b/src/components/Community.tsx
@@ -1,9 +1,7 @@
 import {ICommunity} from "@/types/types.ts";
 import React from "react";
-import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card.tsx";
-import {FacebookIcon, Instagram, LinkedinIcon} from "lucide-react";
-import XTwitter from "@/components/ui/x-twitter.tsx";
-import TikTok from "@/components/ui/tiktok.tsx";
+import {Card, CardContent} from "@/components/ui/card.tsx";
+import SocialMedia from "@/components/SocialMedia.tsx";
 
 interface CommunityProps {
     community: ICommunity
@@ -31,41 +29,9 @@ const Community: React.FC<CommunityProps> = ({ community }) => {
                   </p>
               <div className="flex flex-row justify-end gap-4 text-alternative-500 mt-2">
                   {
-                      community.socials.facebook &&
-                      <a href={community.socials.facebook} target="_blank" rel="noopener noreferrer" className="hover:text-alternative-400 transition-colors">
-                          <FacebookIcon height={26} width={26}>
-                                <title>Facebook</title>
-                          </FacebookIcon>
-                      </a>
-                  }
-                  {
-                      community.socials.instagram &&
-                      <a href={community.socials.instagram} target="_blank" rel="noopener noreferrer" className="hover:text-alternative-400 transition-colors">
-                          <Instagram height={26} width={26}>
-                              <title>Instagram</title>
-                          </Instagram>
-                      </a>
-                  }
-                  {
-                      community.socials.twitter &&
-                      <a href={community.socials.twitter} target="_blank" rel="noopener noreferrer" className="hover:text-alternative-400 transition-colors">
-                          <XTwitter height={26} width={26}>
-                              <title>Twitter</title>
-                          </XTwitter>
-                      </a>
-                  }
-                  { community.socials.linkedin &&
-                      <a href={community.socials.linkedin} target="_blank" rel="noopener noreferrer" className="hover:text-alternative-400 transition-colors">
-                          <LinkedinIcon height={26} width={26}>
-                              <title>Linkedin</title>
-                          </LinkedinIcon>
-                      </a>
-                  }
-                  {
-                      community.socials.tikTok &&
-                      <a href={community.socials.tikTok} target="_blank" rel="noopener noreferrer" className="hover:text-alternative-400 transition-colors">
-                          <TikTok />
-                      </a>
+                      community.socials.map((social) => (
+                          <SocialMedia key={social.url} link={social} />
+                      ))
                   }
               </div>
           </CardContent>

diff --git a/src/components/Organizers.tsx b/src/components/Organizers.tsx
@@ -1,7 +1,7 @@
 import Gradient from "@/components/Gradient.tsx";
 import StarIcon from "@/components/ui/starIcon.tsx";
 import Carousel, {GridConfig} from "@/components/Carousel.tsx";
-import {organizers} from "@/data/communites.ts";
+import {organizers} from "@/data/organizers.ts";
 import Community from "@/components/Community.tsx";
 import React from "react";
 import {ICommunity} from "@/types/types.ts";

diff --git a/src/components/SocialMedia.tsx b/src/components/SocialMedia.tsx
@@ -1,6 +1,7 @@
 import {ILink, LinkType} from "@/types/speakers.ts";
 import React from "react";
-import {Instagram, Twitter, Linkedin, Github} from "lucide-react";
+import {Instagram, Twitter, Linkedin, Github, FacebookIcon} from "lucide-react";
+import TikTok from "@/components/ui/tiktok.tsx";
 
 interface SocialMediaProps {
     link: ILink
@@ -42,7 +43,19 @@ const SocialMedia: React.FC<SocialMediaProps> = ({link, className}) => {
                         <title>GitHub</title>
                     </Github>
                 </a>
-            );
+            )
+        case LinkType.Facebook:
+            return (<a href={link.url} target="_blank" rel="noopener noreferrer" className={`hover:text-alternative-400 transition-colors ${className}`}>
+                <FacebookIcon height={26} width={26}>
+                    <title>Facebook</title>
+                </FacebookIcon>
+            </a>)
+        case LinkType.TikTok:
+            return (
+                <a href={link.url} target="_blank" rel="noopener noreferrer" className={`hover:text-alternative-400 transition-colors ${className}`}>
+                    <TikTok />
+                </a>
+            )
         default:
             return null;
     }

diff --git a/src/components/communities/CommunitiesAllies.tsx b/src/components/communities/CommunitiesAllies.tsx
@@ -0,0 +1,27 @@
+import Gradient from "@/components/Gradient.tsx";
+import Adorno from "@/components/icons/Adorno.tsx";
+import React from "react";
+import {communitiesAllies} from "@/data/communites.ts";
+import CommunityAlly from "@/components/communities/CommunityAlly.tsx";
+
+const CommunitiesAllies = () => {
+  return (
+      <Gradient id="comunidades" className="flex flex-col justify-center items-center gap-2 py-20" aria-labelledby="comunidades-title">
+          <h2 id="comunidades-title" className="text-3xl md:text-5xl text-center font-bold flex gap-4 mb-4">
+              <Adorno className="hidden md:block"/>
+              Comunidades aliadas
+              <Adorno className="hidden md:block"/>
+          </h2>
+          <span className="w-28 h-1 bg-gradient-to-r from-posadev-darkPink to-posadev-brightPink mx-auto my-8 rounded-full "/>
+          <div className="flex flex-col flex-wrap md:flex-row justify-center gap-10 w-full">
+              {
+                  communitiesAllies.map((community) => (
+                      <CommunityAlly key={community.name} community={community} />
+                  ))
+              }
+          </div>
+      </Gradient>
+  )
+}
+
+export default CommunitiesAllies
diff --git a/src/components/communities/CommunityAlly.tsx b/src/components/communities/CommunityAlly.tsx
@@ -0,0 +1,35 @@
+import {ICommunity} from "@/types/types.ts";
+import React from "react";
+import SocialMedia from "@/components/SocialMedia.tsx";
+import {Card} from "@/components/ui/card.tsx";
+
+interface CommunityAllyProps {
+    community: ICommunity;
+}
+
+const CommunityAlly: React.FC<CommunityAllyProps> = ({community}) => {
+  return (
+      <article className="h-60 md:w-1/4 flex flex-col justify-center items-center gap-4">
+    <div className="border-0 bg-transparent shadow-none h-52 w-[300px]">
+              <a href={community.link} target="_blank">
+                  <img
+                      src={community.image}
+                      alt={community.name}
+                      className={`h-full w-full object-contain transition-transform duration-500 ease-in-out hover:scale-110 ${
+                          community.name === "Playas on tech" ? "bg-secondary-600 rounded-lg px-6" : ""
+                      }`}
+                  />
+              </a>
+          </div>
+          <div className="flex gap-4">
+              {
+                  community.socials.map((social) => (
+                      <SocialMedia key={social.url} className="text-secondary-600 hover:text-secondary-500" link={social} />
+                  ))
+              }
+          </div>
+      </article>
+  )
+}
+
+export default CommunityAlly
diff --git a/src/components/icons/Adorno.tsx b/src/components/icons/Adorno.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+const Adorno: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  return (
+      <svg width="40" height="47" viewBox="0 0 40 47" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+          <path d="M24.6194 2.88867H15.382C13.7364 2.88867 12.4023 4.22271 12.4023 5.86832V6.12937C12.4023 7.77499 13.7364 9.10903 15.382 9.10903H24.6194C26.265 9.10903 27.5991 7.77499 27.5991 6.12937V5.86832C27.5991 4.22271 26.265 2.88867 24.6194 2.88867Z" fill="#F0C562"/>
+          <path d="M20 46.029C31.0457 46.029 40 37.0748 40 26.0292C40 14.9835 31.0457 6.0293 20 6.0293C8.95431 6.0293 0 14.9835 0 26.0292C0 37.0748 8.95431 46.029 20 46.029Z" fill="#B3312D"/>
+          <path d="M18.3961 39.1474C27.3101 39.1474 34.5363 31.9212 34.5363 23.0073C34.5363 14.0934 27.3101 6.86719 18.3961 6.86719C9.48209 6.86719 2.25586 14.0934 2.25586 23.0073C2.25586 31.9212 9.48209 39.1474 18.3961 39.1474Z" fill="#EA3734"/>
+          <path d="M16.096 16.0955C19.099 15.107 21.0646 12.8815 20.4863 11.1247C19.9081 9.36795 17.0049 8.74513 14.0019 9.73361C10.9989 10.7221 9.03324 12.9476 9.61153 14.7044C10.1898 16.4612 13.093 17.084 16.096 16.0955Z" fill="#FDECEC"/>
+          <path d="M6.95579 20.6303C7.9475 20.6303 8.75143 19.8264 8.75143 18.8347C8.75143 17.843 7.9475 17.0391 6.95579 17.0391C5.96409 17.0391 5.16016 17.843 5.16016 18.8347C5.16016 19.8264 5.96409 20.6303 6.95579 20.6303Z" fill="#FDECEC"/>
+          <path d="M20.1855 4.26251C21.4131 4.26251 22.4082 3.3083 22.4082 2.13124C22.4082 0.954183 21.4131 0 20.1855 0C18.958 0 17.9629 0.954183 17.9629 2.13124C17.9629 3.3083 18.958 4.26251 20.1855 4.26251Z" fill="#F0C562"/>
+      </svg>
+  )
+}
+export default Adorno
diff --git a/src/components/icons/Tree.tsx b/src/components/icons/Tree.tsx
@@ -1,6 +1,8 @@
-const Tree = () => {
+import React from "react";
+
+const Tree :React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   return (
-      <svg width="307" height="360" viewBox="0 0 307 360" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg width="307" height="360" viewBox="0 0 307 360" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
           <path d="M159.089 213.497H156.259C144.849 213.497 135.599 222.747 135.599 234.157V338.907C135.599 350.317 144.849 359.567 156.259 359.567H159.089C170.499 359.567 179.749 350.317 179.749 338.907V234.157C179.749 222.747 170.499 213.497 159.089 213.497Z" fill="#AE6C49"/>
           <path d="M151.469 213.497C158.129 213.497 163.539 218.907 163.539 225.567V347.497C163.539 354.157 158.129 359.567 151.469 359.567C142.709 359.567 135.599 352.457 135.599 343.697V229.367C135.599 220.607 142.709 213.497 151.469 213.497Z" fill="#D26400"/>
           <path d="M273.538 293.097C263.928 291.607 256.749 279.647 246.979 281.037C239.279 282.127 236.378 292.727 229.628 296.977C206.848 311.297 199.439 277.007 180.979 290.137C176.439 293.377 175.499 298.187 171.959 301.827C162.659 311.387 148.638 312.237 138.628 304.377C132.658 299.697 129.759 290.767 122.959 287.977C110.579 282.887 107.909 293.767 98.2486 298.447C91.2786 301.837 84.2885 301.357 77.6785 296.637C71.9585 292.547 69.9686 284.357 63.7786 281.957C53.5086 277.967 50.9285 285.647 42.9285 289.817C40.7785 290.937 38.7785 290.857 36.8885 292.167C36.5885 293.257 36.1786 293.887 35.7486 294.037C35.4786 293.207 34.9585 292.587 34.1985 292.167C28.9785 292.067 20.6984 290.967 16.0484 287.527C16.0484 287.527 16.0386 287.527 16.0186 287.507C15.6586 287.177 12.8385 284.007 12.6885 283.817C12.2185 283.217 11.8384 281.807 11.3484 281.037C10.0684 279.047 9.5785 277.537 8.6585 275.467C4.0985 265.227 3.18847 259.667 4.62847 247.637C7.60847 222.657 45.9885 224.837 58.6485 210.987C68.9285 199.727 290.098 213.177 299.088 230.007C314.778 259.387 299.758 297.147 273.538 293.087V293.097Z" fill="#2C8354"/>