feat: add sponsors section improve ui

src/components/Speaker.tsx

@@ -18,7 +18,7 @@ const Speaker: React.FC<SpeakerProps> = ({speaker}) => {
     return (
         <article className="h-full w-full mx-1 flex flex-col justify-center items-center">
                 <img src={speaker.profilePicture} alt={speaker.fullName} className="h-60 w-60 rounded-3xl" loading="lazy"/>
-                <Card className="bg-white/10 border-0 shadow-none text-white flex flex-col justify-start gap-4 h-52 p-6 min-w-[100%] max-w-[400px]">
+                <Card className="bg-white/10 border-0 shadow-none text-white flex flex-col justify-start gap-4 h-52 p-6 w-[400px]">
                     <p className="text-2xl font-bold">{`${speaker.firstName.split(" ")[0]} ${speaker.lastName.split(" ")[0]}`}</p>
                     <p className="my-2 text-xl break-words line-clamp-2 overflow-hidden flex-shrink-0 rounded">{speaker.tagLine}</p>
                     <div className="flex h-full justify-self-end items-end justify-start gap-6 md:gap-2 lg:gap-4 text-alternative-100">

src/components/Speakers.tsx

@@ -6,8 +6,9 @@ import {ISpeaker} from "@/types/speakers.ts";
 
 const Speakers = () => {
     const {speakers} = useAppContext();
+    const randomSpeakers = speakers.sort(() => 0.5 - Math.random());
 
-    const gridLg: GridConfig = {cols: 3, rows: 2, itemsPerSlide: 6};
+    const gridLg: GridConfig = {cols: 3, rows: 1, itemsPerSlide: 3};
     const gridMd: GridConfig = {cols: 2, rows: 1, itemsPerSlide: 2};
     const gridSm: GridConfig = {cols: 1, rows: 1, itemsPerSlide: 1};
 
@@ -22,7 +23,7 @@ const Speakers = () => {
         >
             <h1 className="text-3xl md:text-5xl font-bold text-white">Speakers</h1>
             <div className="mt-8 mb-20 md:w-60 w-24 h-1 bg-candy-stripes mx-auto rounded-full"></div>
-                <Carousel className="lg:gap-20" gridMd={gridMd} gridSm={gridSm} gridLg={gridLg} hideArrows items={speakers} renderItem={(speaker: ISpeaker) => <Speaker key={speaker.id} speaker={speaker} /> } />
+                <Carousel className="lg:gap-20" gridMd={gridMd} gridSm={gridSm} gridLg={gridLg} hideArrows items={randomSpeakers} renderItem={(speaker: ISpeaker) => <Speaker key={speaker.id} speaker={speaker} /> } />
         </section>
     );
 };

src/components/Sponsor.tsx

@@ -10,17 +10,27 @@ interface SponsorProps {
 const Sponsor: React.FC<SponsorProps> = ({sponsor}) => {
     if (!sponsor.isPaid) return;
     return (
-      <article className="w-full">
-          <div className="relative flex gap-4 md:gap-10 justify-center items-center h-52 ">
-              <img src={sponsor.image} alt={sponsor.name} className="w-72 max-w-72 z-10"/>
-              <div className="absolute flex md:top-1/3 top-1/2 w-full overflow-visible hidden">
-                  <Lights className="w-full h-auto" />
-                  <Lights className="w-full h-auto" />
-                  <Lights className="w-full h-auto" />
-                  <Lights className="w-full h-auto" />
-              </div>
-          </div>
-      </article>
+        <article className="relative w-full z-0 flex justify-center items-center">
+            <Lights className="w-full absolute left-1/2 md:hidden"/>
+            <div className="relative flex justify-center items-center
+                bg-white rounded-lg z-20
+                lg:px-10
+                 h-40 md:h-52 max-w-56 md:max-w-60 lg:max-w-[300px]">
+                <img
+                    src={sponsor.image}
+                    alt={sponsor.name}
+                    className="relative z-20 object-contain"
+                />
+            </div>
+            <Lights className="w-full absolute right-1/2 md:hidden" />
+            <div className="absolute inset-0 hidden md:flex md:top-1/3 top-1/3 w-full overflow-visible z-0">
+                <Lights className="md:w-full" />
+                <Lights className="hidden md:w-full" />
+                <Lights className="w-full hidden md:flex" />
+                <Lights className="w-full hidden lg:flex" />
+                <Lights className="w-full hidden lg:flex" />
+            </div>
+        </article>
   )
 }
 export default Sponsor

src/components/Sponsors.tsx

@@ -1,17 +1,19 @@
 import React from "react";
 import background from '@/img/background_blue.png'
 import {sponsors} from "@/data/sponsors.ts";
-import Sponsor from "@/components/Sponsor.tsx";
 import Lights from "@/components/ui/lights.tsx";
+import SponsorsByTier from "@/components/sponsors/SponsorsByTier.tsx";
 
 const Sponsors = () => {
+
+
     return (
         <section
             id="sponsors"
             className="relative flex flex-col justify-center text-center overflow-visible"
         >
             {/* SVG de luces */}
-            <div className="absolute flex -top-4 left-0 w-full overflow-visible z-10">
+            <div className="absolute flex -top-4 left-0 w-full overflow-visible z-10 hidden">
                 <Lights className="w-full h-auto" />
                 <Lights className="w-full h-auto" />
                 <Lights className="w-full h-auto hidden lg:block" />
@@ -21,21 +23,18 @@ const Sponsors = () => {
             {/* Fondo y texto */}
             <div
                 style={{ backgroundImage: `url(${background})` }}
-                className=" h-20 md:h-40 bg-cover bg-center flex flex-col justify-center items-center pt-10 z-0"
+                className=" h-20 md:h-36 bg-cover bg-center flex flex-col justify-center items-center z-0"
             >
-                <h2 className="text-4xl md:text-5xl font-bold text-white text-center py-1 z-20">
-                    Sponsors
-                </h2>
-                <div className="w-20 h-1 bg-gradient-to-r from-posadev-darkPink to-posadev-brightPink mx-auto my-4 rounded-full z-20"></div>
             </div>
-            <section>
-                {sponsors.map((sponsor) => (
-                    <Sponsor key={sponsor.id} sponsor={sponsor} />
-                ))}
-            </section>
+            <h2 className="text-4xl md:text-5xl font-bold text-primary-600 text-secondary-600 text-center pt-20 z-20">
+                Patrocinadores
+            </h2>
+            <div
+                className="my-10 w-40 h-1 bg-gradient-to-r from-posadev-darkPink to-posadev-brightPink mx-auto rounded-full"></div>
+            <SponsorsByTier sponsors={sponsors} />
             <div style={{ backgroundImage: `url(${background})` }} className="h-20 md:h-40 bg-cover bg-center flex justify-center items-center">
             </div>
-            <div className="absolute flex -bottom-4 left-0 w-full overflow-visible z-10">
+            <div className="absolute flex -bottom-4 left-0 w-full overflow-visible z-10 hidden">
                 <Lights className="w-full h-auto" />
                 <Lights className="w-full h-auto" />
                 <Lights className="w-full h-auto hidden md:block" />

src/components/sponsors/SponsorsByTier.tsx

@@ -0,0 +1,91 @@
+import Sponsor from "@/components/Sponsor.tsx";
+import React from "react";
+import background from "@/img/background_blue.png";
+
+const SponsorsByTier = ({sponsors}) => {
+    const diamondSponsors = sponsors.filter(sponsor => sponsor.type === "diamond");
+    const goldSponsors = sponsors.filter(sponsor => sponsor.type === "gold");
+    const silverSponsors = sponsors.filter(sponsor => sponsor.type === "silver");
+    const bronzeSponsors = sponsors.filter(sponsor => sponsor.type === "bronze");
+
+  return (
+      <section>
+          <article className="flex flex-col justify-center items-center md:py-10">
+              <h2 className="text-4xl font-bold gap-4 hidden md:flex"><span aria-hidden={true}>💎</span>Diamante <span aria-hidden={true}>💎</span></h2>
+                  {diamondSponsors.map((sponsor) => (
+                      <Sponsor key={sponsor.id} sponsor={sponsor} />
+                  ))}
+          </article>
+          {
+                goldSponsors.length > 0 && <div style={{ backgroundImage: `url(${background})` }} className="h-10 md:h-20 bg-cover bg-center flex justify-center items-center">
+                </div>
+          }
+          <article className="flex flex-col items-center justify-center py-10">
+                <h2 className="text-4xl font-bold hidden md:flex gap-4 pt-10"><span aria-hidden={true}>⭐</span>Oro<span aria-hidden={true}>⭐</span></h2>
+              {goldSponsors.map((sponsor) => (
+                  <Sponsor key={sponsor.id} sponsor={sponsor} />
+              ))}
+          </article>
+          {
+                silverSponsors.length > 0 && <div style={{ backgroundImage: `url(${background})` }} className="h-10 md:h-20 bg-cover bg-center flex justify-center items-center">
+                </div>
+          }
+          <article className="py-10">
+              <div className="relative flex justify-center items-center">
+
+                  <h2 className="text-4xl font-bold hidden md:flex justify-center items-center gap-4 pt-10">
+
+<span
+    className="
+    inline-block
+    bg-[linear-gradient(to_bottom,_#e2e2e2,_#b4b7bc,_#6b6f75,_#3b3e43)]
+    bg-clip-text
+    text-transparent
+    [text-shadow:0_0_5px_rgba(255,255,255,0.8)]
+    text-5xl
+  "
+>
+  ✦
+</span>
+
+
+                      Plata
+                      <span
+                          className="
+    inline-block
+    bg-[linear-gradient(to_bottom,_#e2e2e2,_#b4b7bc,_#6b6f75,_#3b3e43)]
+    bg-clip-text
+    text-transparent
+    [text-shadow:0_0_5px_rgba(255,255,255,0.8)]
+    text-5xl
+  "
+                      >
+  ✦
+</span>
+
+
+                  </h2>
+              </div>
+
+              {silverSponsors.map((sponsor) => (
+                  <Sponsor key={sponsor.id} sponsor={sponsor}/>
+              ))}
+          </article>
+          {
+              bronzeSponsors.length > 0 && <div style={{backgroundImage: `url(${background})` }} className="h-10 md:h-20 bg-cover bg-center flex justify-center items-center">
+              </div>
+          }
+          {
+                bronzeSponsors.length > 0 && (
+                  <article className="py-10">
+                      <h2 className="text-4xl font-bold hidden md:flex justify-center items-center gap-4"><span aria-hidden={true}>🖥</span>Virtual<span aria-hidden={true}>🖥</span></h2>
+                      {bronzeSponsors.map((sponsor) => (
+                          <Sponsor key={sponsor.id} sponsor={sponsor} />
+                      ))}
+                  </article>
+              )
+          }
+      </section>
+  )
+}
+export default SponsorsByTier;

src/data/organizers.ts

@@ -1,5 +1,5 @@
 import {ICommunity} from "@/types/types.ts";
-import LCDC from "@/img/organizers/laschicasdelcodigo.jpeg";
+import LCDC from "@/img/organizers/lcdc.png";
 import IxDA from "@/img/organizers/IxDA-Cover.png";
 import KUG from "@/img/organizers/KUG.png"
 import J4G from "@/img/organizers/j4g.png"

src/data/sponsors.ts

@@ -1,20 +1,36 @@
 import {ISponsor} from "@/types/types.ts";
 import zillow from "@/img/sponsors/zillow.png"
 import howdy from "@/img/sponsors/howdy.png"
+import koch from "@/img/sponsors/Koch.png"
+import akamai from "@/img/sponsors/akamai.png"
 
 export const sponsors: Array<ISponsor> = [
     {
         id: "sponsor-1",
         name: "Zillow",
         image: zillow,
-        isPaid: false,
-        type: "gold"
+        isPaid: true,
+        type: "diamond"
     },
     {
         id: "sponsor-2",
         name: "Howdy",
         image: howdy,
-        isPaid: false,
+        isPaid: true,
+        type: "diamond"
+    },
+    {
+        id: "sponsor-3",
+        name: "Koch",
+        image: koch,
+        isPaid: true,
+        type: "gold"
+    },
+    {
+        id: "sponsor-4",
+        name: "Akamai",
+        image: akamai,
+        isPaid: true,
         type: "silver"
     }
 ]

src/pages/Index.tsx

@@ -6,6 +6,7 @@ import BecomeSponsor from "@/components/BecomeSponsor.tsx";
 import Organizers from "@/components/Organizers.tsx";
 import Speakers from "@/components/Speakers.tsx";
 import CommunitiesAllies from "@/components/communities/CommunitiesAllies.tsx";
+import Sponsors from "@/components/Sponsors.tsx";
 
 const Index = () => {
     const location = useLocation();
@@ -33,6 +34,7 @@ const Index = () => {
             <Speakers/>
             <BecomeSponsor/>
             <Organizers/>
+            <Sponsors />
             <CommunitiesAllies/>
             <Gallery/>
         </>

src/types/types.ts

@@ -21,7 +21,7 @@ export interface ISponsor {
     link?: string;
     image: string;
     isPaid: boolean;
-    type?: 'gold' | 'silver' | 'bronze';
+    type?: 'gold' | 'diamond' | 'bronze' | 'silver';
 }
 
 export enum AppStatus {

tailwind.config.ts

@@ -19,6 +19,9 @@ export default {
 			}
 		},
 		extend: {
+			backgroundImage: {
+				'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+			},
 			colors: {
 				border: 'hsl(var(--border))',
 				input: 'hsl(var(--input))',