Fix overflow and Sponsors style

Author: MariferVL

src/app/globals.css

@@ -16,6 +16,11 @@
   /* Contorno del texto en tono intermedio */
   --bg-dark: #101010;
   /* Fondo oscuro intermedio */
+
+  --primary-green-rgb: 61, 139, 55;
+  --accent-yellow-rgb: 255, 225, 65;
+  --outline-red-rgb: 242, 57, 57;
+  --bg-dark-rgb: 16, 16, 16;
 }
 
 html {
@@ -27,12 +32,17 @@ body {
   color: var(--text-white);
 }
 
-.bg-primary-green\/20 { background-color: rgba(var(--primary-green-rgb),0.2); }
-.bg-accent-yellow\/20 { background-color: rgba(var(--accent-yellow-rgb),0.2); }
+.bg-primary-green\/20 {
+  background-color: rgba(var(--primary-green-rgb), 0.2);
+}
+
+.bg-accent-yellow\/20 {
+  background-color: rgba(var(--accent-yellow-rgb), 0.2);
+}
 
 .gradient-bg {
-  background: 
-    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0,0,0,0.1)), 
+  background:
+    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
     linear-gradient(135deg, var(--primary-green) 0%, var(--accent-yellow) 50%, var(--outline-red) 100%);
   background-size: 400% 400%;
   background-blend-mode: darken;
@@ -110,40 +120,55 @@ body {
     color: var(--text-white) !important;
   }
 
-  .sponsors-hero-bg {
-    background-color: var(--primary-green);
-    color: var(--text-white);
-  }
-  .sponsors-accent {
-    color: var(--accent-yellow);
+  /* Tarjetas de sponsors con colores de marca */
+  .sponsors-card {
+    @apply relative p-4 md:p-6 transition-all duration-300 rounded-2xl backdrop-blur-lg border border-white/15 hover:border-[var(--accent-yellow)]/30 transform-gpu cursor-pointer;
+    background: linear-gradient(135deg, rgba(var(--primary-green-rgb), 0.08), rgba(var(--accent-yellow-rgb), 0.08));
   }
-  .sponsors-border {
-    border-color: var(--primary-green);
+
+  .sponsors-card:hover {
+    @apply shadow-lg -translate-y-1;
+    background: linear-gradient(135deg, rgba(var(--primary-green-rgb), 0.12), rgba(var(--accent-yellow-rgb), 0.12));
+    box-shadow: 0 0 25px rgba(var(--accent-yellow-rgb), 0.2);
   }
-  .sponsors-card-bg {
-    background-color: rgba(16,16,16,0.4);
+
+  /* Contenedor principal de sponsors */
+  .sponsors-container {
+    @apply max-w-6xl mx-auto rounded-3xl backdrop-blur-md border transition-shadow duration-500;
+    background: linear-gradient(135deg,
+        rgba(var(--primary-green-rgb), 0.15),
+        rgba(var(--accent-yellow-rgb), 0.1),
+        rgba(var(--outline-red-rgb), 0.15));
+    border-color: rgba(var(--primary-green-rgb), 0.3);
+    box-shadow: 0 0 60px -15px rgba(var(--primary-green-rgb), 0.35);
   }
-  .sponsors-card-hover-bg {
-    background-color: rgba(61,139,55,0.1);
+
+  .sponsors-container:hover {
+    box-shadow: 0 0 80px -20px rgba(var(--primary-green-rgb), 0.45);
   }
-  .sponsors-cta {
-    @apply bg-transparent border-2 font-bold rounded-full transition;
-    border-color: var(--accent-yellow);
-    color: var(--accent-yellow);
+
+  /* Efectos para los logos de sponsors */
+  .sponsor-logo-effect {
+    @apply relative;
   }
-  .sponsors-cta:hover {
-    background-color: var(--accent-yellow);
-    color: var(--bg-dark);
+
+  .sponsor-logo-effect::before {
+    content: '';
+    @apply absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-300 z-0;
+    background: radial-gradient(circle at center, rgba(var(--accent-yellow-rgb), 0.3), transparent 70%);
   }
-  /* Form fields */
-  .sponsors-input {
-    @apply w-full px-4 py-2 rounded-lg backdrop-blur border text-white placeholder-gray-400;
-    background-color: rgba(16,16,16,0.5);
-    border-color: var(--primary-green);
+
+  .sponsor-logo-effect:hover::before {
+    @apply opacity-30;
   }
-  .sponsors-input:focus {
-    @apply outline-none ring-2;
-    ring-color: var(--primary-green);
+
+  /* Mejora de visibilidad para logos */
+  .sponsor-logo {
+    filter: brightness(115%) contrast(105%) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+    transition: all 0.3s ease;
   }
 
+  .sponsor-logo:hover {
+    filter: brightness(120%) contrast(110%) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
+  }
 }

src/app/layout.js

@@ -141,7 +141,7 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="es">
-      <body className={`${openSans.variable} min-h-screen flex flex-col text-py-text`}>
+      <body className={`${openSans.variable} overflow-x-hidden min-h-screen flex flex-col text-py-text`}>
         <div className="fixed inset-0 -z-10 gradient-bg" />
         <Header />
         <main className="flex-grow">{children}</main>

src/app/previous-editions/page.js

@@ -86,7 +86,7 @@ export default function PreviousEditionsPage() {
                     <Link
                       href={event.webpageLink}
                       target="_blank"
-                      className="btn-secondary"
+                      className="btn-primary"
                     >
                       Sitio Web {event.year}
                     </Link>

src/app/sponsors/components/DynamicContent.js

@@ -18,20 +18,20 @@ export default function DynamicContent() {
       <motion.section className="container mx-auto py-12 md:py-16 px-4 sm:px-6 relative">
         <div className="max-w-4xl mx-auto text-center">
           <div className="inline-block mb-4 md:mb-6">
-            <div className="text-4xl md:text-5xl font-bold text-[#4ADE80]">
-              “
+            <div className="text-4xl md:text-5xl font-bold text-[var(--primary-green)]">
+              "
             </div>
           </div>
-          <p className="text-lg md:text-2xl leading-relaxed text-gray-300 font-medium px-2 sm:px-0">
+          <p className="text-lg md:text-2xl leading-relaxed text-text-white font-medium px-2 sm:px-0">
             {intro}
-            <span className="block mt-4 md:mt-6 text-[#FFD43B] font-semibold text-base md:text-lg">
+            <span className="block mt-4 md:mt-6 text-[var(--accent-yellow)] font-semibold text-base md:text-lg">
               ¡Sé parte de la revolución Python 2025!
             </span>
           </p>
           <div className="mt-6 md:mt-8 flex justify-center space-x-3 md:space-x-4">
-            <div className="w-8 h-1 md:w-12 bg-[#4ADE80] rounded-full" />
-            <div className="w-6 h-1 md:w-8 bg-[#FFD43B] rounded-full" />
-            <div className="w-4 h-1 bg-[#F87171] rounded-full" />
+            <div className="w-8 h-1 md:w-12 bg-[var(--primary-green)] rounded-full" />
+            <div className="w-6 h-1 md:w-8 bg-[var(--accent-yellow)] rounded-full" />
+            <div className="w-4 h-1 bg-[var(--outline-red)] rounded-full" />
           </div>
         </div>
       </motion.section>
@@ -43,8 +43,8 @@ export default function DynamicContent() {
         viewport={{ once: true }}
         className="container mx-auto py-16 px-4"
       >
-        <h2 className="text-4xl font-bold text-center mb-16 text-white">
-          <span className="border-b-4 border-[#4ADE80] pb-2">
+        <h2 className="text-4xl font-bold text-center mb-16 text-[var(--text-white)]">
+          <span className="border-b-4 border-[var(--primary-green)] pb-2">
             Ventajas Exclusivas
           </span>
         </h2>
@@ -53,13 +53,13 @@ export default function DynamicContent() {
           {benefits.map((b, index) => (
             <div
               key={index}
-              className="group relative p-8 rounded-2xl bg-gradient-to-b from-gray-800/30 to-gray-900/50 backdrop-blur-sm border border-gray-700 hover:border-[#4ADE80] transition-all"
+              className="group relative p-8 rounded-2xl bg-gradient-to-b from-gray-600/30 to-gray-800/50 backdrop-blur-sm hover:border-[var(--primary-green)] transition-all"
             >
-              <div className="absolute inset-0 rounded-2xl border-2 border-[#4ADE80] opacity-0 group-hover:opacity-30 transition-opacity pointer-events-none" />
+              <div className="absolute inset-0 rounded-2xl border-2 border-[var(--primary-green)] opacity-0 group-hover:opacity-30 transition-opacity pointer-events-none" />
 
-              <div className="w-14 h-14 mb-6 bg-[#4ADE80]/10 rounded-xl flex items-center justify-center">
+              <div className="w-14 h-14 mb-6 bg-[var(--accent-yellow)]/10 rounded-xl flex items-center justify-center">
                 <svg
-                  className="w-8 h-8 text-[#4ADE80]"
+                  className="w-8 h-8 text-[var(--accent-yellow)]"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -73,8 +73,8 @@ export default function DynamicContent() {
                 </svg>
               </div>
 
-              <h3 className="text-2xl font-bold text-white mb-4">{b.title}</h3>
-              <p className="text-gray-400 leading-relaxed">{b.description}</p>
+              <h3 className="text-2xl font-bold text-[var(--text-white)] mb-4">{b.title}</h3>
+              <p className="text-text-white leading-relaxed">{b.description}</p>
             </div>
           ))}
         </div>
@@ -90,26 +90,26 @@ export default function DynamicContent() {
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto">
             <div className="text-center mb-12">
-              <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
-                <span className="border-b-4 border-[#4ADE80] pb-2">
+              <h2 className="text-3xl md:text-4xl font-bold text-[var(--text-white)] mb-4">
+                <span className="border-b-4 border-[var(--primary-green)] pb-2">
                   Impacto y Alcance
                 </span>
               </h2>
-              <p className="text-gray-400">Nuestra comunidad en números</p>
+              <p className="text-text-white">Nuestra comunidad en números</p>
             </div>
 
             {/* Metricas principales */}
-            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 mb-8 md:mb-12">
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 mb-8 md:mb-12">
               {Object.entries(audience).map(([key, value]) => (
                 <div
                   key={key}
-                  className="p-4 md:p-6 rounded-xl bg-gray-900/50 backdrop-blur-sm border border-gray-800 hover:border-[#4ADE80]/50 transition-colors"
+                  className="p-4 md:p-6 rounded-xl bg-gray-900/50 backdrop-blur-sm border border-gray-800 hover:border-[var(--primary-green)]/50 transition-colors"
                 >
-                  <p className="text-2xl md:text-3xl font-bold text-[#4ADE80] mb-1">
+                  <p className="text-2xl md:text-3xl font-bold text-[var(--primary-green)] mb-1">
                     {value.toLocaleString()}
-                    <span className="text-[#FFD43B]">+</span>
+                    <span className="text-[var(--accent-yellow)]">+</span>
                   </p>
-                  <p className="text-xs md:text-sm text-gray-400 font-medium">
+                  <p className="text-xs md:text-sm text-text-white font-medium">
                     {key === "x"
                       ? "Redes Sociales"
                       : key.split(/(?=[A-Z])/).join(" ")}
@@ -120,7 +120,7 @@ export default function DynamicContent() {
 
             {/* Estadísticas 2024 */}
             <div className="p-6 md:p-8 rounded-2xl bg-gray-900/30 backdrop-blur-sm">
-              <h3 className="text-xl md:text-2xl font-bold text-center text-white mb-6 md:mb-8">
+              <h3 className="text-xl md:text-2xl font-bold text-center text-[var(--text-white)] mb-6 md:mb-8">
                 Comparativa PyDay 2024
               </h3>
 
@@ -138,12 +138,12 @@ export default function DynamicContent() {
                 ].map((stat, index) => (
                   <div
                     key={index}
-                    className="p-4 rounded-xl bg-gradient-to-b from-[#4ADE80]/10 to-transparent"
+                    className="p-4 rounded-xl bg-gradient-to-b from-[var(--primary-green)]/10 to-transparent"
                   >
-                    <p className="text-3xl md:text-4xl font-bold text-[#FFD43B] mb-1">
+                    <p className="text-3xl md:text-4xl font-bold text-[var(--accent-yellow)] mb-1">
                       {stat.value.toLocaleString()}
                     </p>
-                    <p className="text-sm md:text-base text-gray-400">
+                    <p className="text-sm md:text-base text-text-white">
                       {stat.label}
                     </p>
                   </div>
@@ -163,10 +163,10 @@ export default function DynamicContent() {
       {/* Formulario de contacto */}
       <section id="contact-form" className="container mx-auto py-16 px-4">
         <div className="max-w-4xl mx-auto">
-          <h2 className="text-3xl font-bold text-center mb-8 text-white">
+          <h2 className="text-3xl font-bold text-center mb-8 text-[var(--text-white)]">
             ¿Interesado en patrocinar?
           </h2>
-          <div className="p-12">
+          <div className="p-8 sm:p-12">
             <SponsorForm contactEmail={contact.email} />
           </div>
         </div>
@@ -181,4 +181,4 @@ export default function DynamicContent() {
       <FAQSection faqs={sponsorshipFAQs} />
     </>
   );
-}
+}