Skip to content

feat: add tier-colored insignias with shadow to sponsors, add popular… #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thauska merged 1 commit into from
Jun 11, 2026
Merged

feat: add tier-colored insignias with shadow to sponsors, add popular… #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
207 changes: 121 additions & 86 deletions components/sponsors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ import Image from "next/image";
import {
ArrowRight,
Mail,
UsersRound
UsersRound,
Gem,
Trophy,
Award
} from "lucide-react";

type SponsorLogo = {
Expand Down Expand Up @@ -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
];
Expand All @@ -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">
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down
21 changes: 14 additions & 7 deletions components/tickets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ${
Expand Down
Loading