From 425c6624386516622d18d13c7958f887e503d8b0 Mon Sep 17 00:00:00 2001
From: Thalyson <thalison.wilker@gmail.com>
Date: Thu, 11 Jun 2026 20:15:20 -0300
Subject: [PATCH] feat: add tier-colored insignias with shadow to sponsors, add
 popular badge to tickets, and update contact links

---
 components/sponsors.tsx | 207 +++++++++++++++++++++++-----------------
 components/tickets.tsx  |  21 ++--
 2 files changed, 135 insertions(+), 93 deletions(-)

diff --git a/components/sponsors.tsx b/components/sponsors.tsx
index 102c717..03e373a 100644
--- a/components/sponsors.tsx
+++ b/components/sponsors.tsx
@@ -4,7 +4,10 @@ import Image from "next/image";
 import {
   ArrowRight,
   Mail,
-  UsersRound
+  UsersRound,
+  Gem,
+  Trophy,
+  Award
 } from "lucide-react";
 
 type SponsorLogo = {
@@ -64,23 +67,6 @@ export function Sponsors() {
     },
   ];
 
-  const smallTierStyles: Record<string, string> = {
-    Ouro: "bg-[#f9de85] border-[#f2c34f]",
-    Prata: "bg-[#f4f4f4] border-[#d6d6d6]",
-    Bronze: "bg-[#fff8ee] border-[#f19a6e]",
-  };
-
-  const smallTierItems = tiers
-    .filter((tier) => tier.name !== "Diamante")
-    .flatMap((tier) =>
-      tier.logos.map((logo) => ({
-        tierName: tier.name,
-        logo,
-      }))
-    );
-
-  const diamondTier = tiers.find((tier) => tier.name === "Diamante");
-
   const pyeguaBadges: string[] = [
     // Placeholder data for PyEgua badges
   ];
@@ -102,75 +88,125 @@ export function Sponsors() {
             </h2>
             <div className="w-14 md:w-16 h-1 mx-auto rounded-full bg-gradient-to-r from-[#004B23] to-[#FF6B00]" />
             <p className="mx-auto max-w-xl text-sm text-green-deep/70 md:text-base">
-              Empresas e comunidades que tornam a Python Norte 2026 possivel
+              Empresas e comunidades que tornam a Python Norte 2026 possível
             </p>
           </div>
 
-          <div className="space-y-6">
-            <div className="flex flex-wrap justify-center gap-4 md:gap-5">
-              {diamondTier?.logos.map((logo) => (
-                <a
-                  key={logo.name}
-                  href={logo.href}
-                  target={logo.href ? "_blank" : undefined}
-                  rel={logo.href ? "noopener noreferrer" : undefined}
-                  className="w-full max-w-[300px] rounded-2xl border-2 border-[#ecb100] bg-[#ffc61e] p-4 shadow-[0_15px_28px_rgba(0,0,0,0.2)] transition-transform hover:-translate-y-0.5"
-                >
-                  <div className="mb-3 flex items-center justify-center rounded-xl bg-[#ffd657] py-2">
-                    {logo.src ? (
-                      <Image
-                        src={logo.src}
-                        alt={logo.name}
-                        width={150}
-                        height={42}
-                        className="h-10 w-auto object-contain"
-                      />
-                    ) : (
-                      <span className="text-sm font-semibold text-green-deep/70">
-                        {logo.placeholder}
-                      </span>
-                    )}
-                  </div>
-                  <p className="text-center text-[11px] font-extrabold uppercase tracking-[0.13em] text-green-deep">
-                    Patrocinador {diamondTier.name}
-                  </p>
-                </a>
-              ))}
-            </div>
+          <div className="space-y-12">
+            {tiers.map((tier) => {
+              if (tier.logos.length === 0) return null;
 
-            <div className="flex flex-wrap justify-center gap-4">
-              {smallTierItems.map((item, idx) => (
-                <a
-                  key={`${item.tierName}-${item.logo.name}-${idx}`}
-                  href={item.logo.href}
-                  target={item.logo.href ? "_blank" : undefined}
-                  rel={item.logo.href ? "noopener noreferrer" : undefined}
-                  className={`flex min-w-[160px] items-center gap-2 rounded-xl border px-3 py-2 ${smallTierStyles[item.tierName] ?? "bg-[#f4f4f4] border-[#d6d6d6]"} ${item.logo.href ? "cursor-pointer transition-transform hover:-translate-y-0.5" : "pointer-events-none"}`}
-                >
-                  <div className="flex h-7 w-7 items-center justify-center overflow-hidden rounded-md bg-black/10 text-[10px] font-bold text-black/65">
-                    {item.logo.src ? (
-                      <Image
-                        src={item.logo.src}
-                        alt={item.logo.name}
-                        width={28}
-                        height={28}
-                        className="h-5 w-5 object-contain"
-                      />
-                    ) : (
-                      item.logo.name.slice(0, 1)
-                    )}
+              // Configurações específicas de estilo para cada nível de patrocínio
+              let tierHeadingClass = "";
+              let gridClass = "";
+              let cardClass = "";
+              let logoHeightClass = "";
+              let logoContainerMinHeightClass = "";
+              let badgeClass = "";
+              let insigniaBgClass = "";
+              let insigniaIconClass = "";
+              let InsigniaIcon = Award;
+              let imageWidth = 140;
+              let imageHeight = 50;
+
+              if (tier.name === "Diamante") {
+                tierHeadingClass = "text-[#A33D06] dark:text-[#E37700]"; // Gold/Orange theme
+                gridClass = "flex flex-wrap justify-center gap-8";
+                cardClass = "relative overflow-hidden w-full max-w-[380px] rounded-3xl border-2 border-[#FFB000] bg-white p-8 shadow-[0_16px_36px_rgba(255,176,0,0.18)] hover:-translate-y-1.5 hover:shadow-[0_24px_48px_rgba(255,176,0,0.28)] transition-all duration-300";
+                logoHeightClass = "h-20 md:h-24";
+                logoContainerMinHeightClass = "min-h-[110px]";
+                badgeClass = "bg-[#FEF5E9] text-[#E37700] border-[#FDE7C2]";
+                insigniaBgClass = "bg-gradient-to-br from-amber-50 to-orange-50 border-2 border-[#FFB000] shadow-[0_0_12px_rgba(255,176,0,0.6)]";
+                insigniaIconClass = "text-[#E37700] animate-pulse";
+                InsigniaIcon = Gem;
+                imageWidth = 300;
+                imageHeight = 110;
+              } else if (tier.name === "Ouro") {
+                tierHeadingClass = "text-[#C49A28]"; // Gold theme
+                gridClass = "flex flex-wrap justify-center gap-6";
+                cardClass = "relative overflow-hidden w-full max-w-[300px] rounded-2xl border border-[#FDE7C2] bg-white p-6 shadow-[0_10px_24px_rgba(242,195,79,0.1)] hover:-translate-y-1 hover:shadow-[0_16px_32px_rgba(242,195,79,0.18)] transition-all duration-300";
+                logoHeightClass = "h-14 md:h-16";
+                logoContainerMinHeightClass = "min-h-[85px]";
+                badgeClass = "bg-amber-50 text-amber-700 border-amber-200";
+                insigniaBgClass = "bg-gradient-to-br from-amber-50 to-[#fffbeb] border border-[#FDE7C2] shadow-[0_0_10px_rgba(196,154,40,0.5)]";
+                insigniaIconClass = "text-amber-600";
+                InsigniaIcon = Trophy;
+                imageWidth = 220;
+                imageHeight = 80;
+              } else { // Prata e outros
+                tierHeadingClass = "text-neutral-500"; // Silver/Neutral theme
+                gridClass = "flex flex-wrap justify-center gap-5";
+                cardClass = "relative overflow-hidden w-full max-w-[220px] rounded-xl border border-neutral-200 bg-white p-5 shadow-sm hover:-translate-y-0.5 hover:shadow-md transition-all duration-300";
+                logoHeightClass = "h-10 md:h-11";
+                logoContainerMinHeightClass = "min-h-[65px]";
+                badgeClass = "bg-neutral-50 text-neutral-600 border-neutral-200";
+                insigniaBgClass = "bg-neutral-50 border border-neutral-200 shadow-[0_0_8px_rgba(115,115,115,0.4)]";
+                insigniaIconClass = "text-neutral-500";
+                InsigniaIcon = Award;
+                imageWidth = 160;
+                imageHeight = 60;
+              }
+
+              return (
+                <div key={tier.name} className="space-y-6">
+                  {/* Divisor/Título do Nível */}
+                  <div className="flex items-center justify-center gap-3">
+                    <div className="h-px flex-1 max-w-[120px] bg-gradient-to-r from-transparent to-neutral-300" />
+                    <span className={`text-[10px] md:text-xs font-black uppercase tracking-widest ${tierHeadingClass}`}>
+                      Patrocínio {tier.name}
+                    </span>
+                    <div className="h-px flex-1 max-w-[120px] bg-gradient-to-l from-transparent to-neutral-300" />
                   </div>
-                  <div className="leading-none">
-                    <p className="text-[11px] font-bold text-black/70">
-                      {item.logo.name}
-                    </p>
-                    <p className="mt-1 text-[9px] font-extrabold tracking-wide text-black/45">
-                      {item.tierName.toUpperCase()}
-                    </p>
+
+                  {/* Grid de Logos */}
+                  <div className={gridClass}>
+                    {tier.logos.map((logo) => (
+                      <a
+                        key={logo.name}
+                        href={logo.href}
+                        target={logo.href ? "_blank" : undefined}
+                        rel={logo.href ? "noopener noreferrer" : undefined}
+                        className={`flex flex-col items-center justify-center ${cardClass} ${
+                          logo.href ? "cursor-pointer" : "pointer-events-none"
+                        }`}
+                      >
+                        {/* Insígnia do Patrocinador */}
+                        <div className="absolute top-3 right-3 flex items-center justify-center z-10">
+                          <div className={`flex h-7 w-7 items-center justify-center rounded-full ${insigniaBgClass}`}>
+                            <InsigniaIcon className={`h-4 w-4 ${insigniaIconClass}`} />
+                          </div>
+                        </div>
+
+                        <div className={`flex flex-1 items-center justify-center w-full ${logoContainerMinHeightClass} mb-4`}>
+                          {logo.src ? (
+                            <Image
+                              src={logo.src}
+                              alt={logo.name}
+                              width={imageWidth}
+                              height={imageHeight}
+                              className={`${logoHeightClass} w-auto object-contain transition-transform duration-300 hover:scale-105`}
+                            />
+                          ) : (
+                            <span className="text-sm md:text-base font-extrabold text-neutral-800">
+                              {logo.name}
+                            </span>
+                          )}
+                        </div>
+                        <div className="text-center">
+                          <p className="text-xs font-bold text-neutral-800 leading-tight">
+                            {logo.name}
+                          </p>
+                          <span className={`mt-1.5 inline-block text-[9px] font-black uppercase tracking-wider px-2 py-0.5 rounded border ${badgeClass}`}>
+                            {tier.name}
+                          </span>
+                        </div>
+                      </a>
+                    ))}
                   </div>
-                </a>
-              ))}
-            </div>
+                </div>
+              );
+            })}
+          </div>
 
             {pyeguaBadges.length > 0 && (
               <div className="mx-auto w-full max-w-[340px] rounded-xl border border-[#b6cc92] bg-[#d8e5bd] px-6 py-4 text-center">
@@ -216,7 +252,6 @@ export function Sponsors() {
                 </div>
               </div>
             )}
-          </div>
 
           <div className="mx-auto max-w-4xl rounded-2xl border border-[#e3b11a] bg-[#ffc61e] p-7 text-center shadow-[0_20px_38px_rgba(0,0,0,0.24)] md:p-10">
             <h3
@@ -249,17 +284,17 @@ export function Sponsors() {
 
             <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
               <a
-                href="#patrocinio"
+                href="https://2026.pythonnorte.org/patrocine"
                 className="inline-flex items-center gap-1.5 rounded-lg bg-[#22a620] px-6 py-3 text-sm font-extrabold text-white shadow-[0_8px_15px_rgba(16,120,16,0.35)] transition-colors hover:bg-[#1b8e1b]"
               >
-                Ver Plano de Patrocinio <ArrowRight className="h-4 w-4" />
+                Patrocine <ArrowRight className="h-4 w-4" />
               </a>
 
               <a
-                href="mailto:patrocinio@pythonnorte.org"
+                href="mailto:norte@python.org.br"
                 className="inline-flex items-center gap-2 rounded-lg border border-green-deep/40 px-6 py-3 text-sm font-bold text-green-deep transition-colors hover:bg-white/35"
               >
-                <Mail className="h-4 w-4" /> patrocinio@pythonnorte.org
+                <Mail className="h-4 w-4" /> norte@python.org.br
               </a>
             </div>
           </div>
diff --git a/components/tickets.tsx b/components/tickets.tsx
index 4b46a8d..15ddf8c 100644
--- a/components/tickets.tsx
+++ b/components/tickets.tsx
@@ -116,13 +116,20 @@ export function Tickets() {
                 )}
 
                 <div className="flex-1">
-                  <h3
-                    className={`text-lg font-bold mb-2 ${
-                      ticket.popular ? "text-[#1F5506]" : "text-white"
-                    }`}
-                  >
-                    {ticket.name}
-                  </h3>
+                  <div className="flex justify-between items-center mb-2 gap-2">
+                    <h3
+                      className={`text-lg font-bold ${
+                        ticket.popular ? "text-[#1F5506]" : "text-white"
+                      }`}
+                    >
+                      {ticket.name}
+                    </h3>
+                    {ticket.popular && (
+                      <span className="bg-gradient-to-r from-red-600 to-orange-500 text-white text-[10px] font-black uppercase tracking-widest px-2.5 py-1 rounded shadow-[0_0_12px_rgba(239,68,68,0.5)] border border-red-500 animate-pulse shrink-0">
+                        Últimas Vagas
+                      </span>
+                    )}
+                  </div>
 
                   <p
                     className={`text-sm mb-4 ${