From d4b216b0b6437688f5ebc3815626dde658c3f5b2 Mon Sep 17 00:00:00 2001
From: Sidney Gomes <sidney.gomes1989@gmail.com>
Date: Sat, 25 Jul 2026 08:50:58 -0300
Subject: [PATCH] fix campos CVV validade e melhoria carrosel aulas

---
 src/App.tsx                            | 69 ++++++++++++++++++--------
 src/components/PaymentCheckoutCard.tsx |  4 +-
 src/index.css                          | 22 ++++++++
 3 files changed, 74 insertions(+), 21 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 955bcfb..fc6f9d4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { 
   Play, Shield, User, GraduationCap, ArrowRight, Lock, Mail, 
   Plus, CheckCircle, ChevronRight, HelpCircle, Film, Laptop, Eye, EyeOff
@@ -30,6 +30,7 @@ export default function App() {
   const [unlockingCourse, setUnlockingCourse] = useState<CourseType | null>(null);
   const [expandedCourseId, setExpandedCourseId] = useState<string | null>(null);
   const [selectedLessonId, setSelectedLessonId] = useState<string | null>(null);
+  const lessonShelfRefs = useRef<Record<string, HTMLDivElement | null>>({});
 
   // Authentication forms
   const [isRegister, setIsRegister] = useState(false);
@@ -253,6 +254,13 @@ export default function App() {
       setExpandedCourseId(null);
     } else {
       setExpandedCourseId(courseId);
+      // Smooth scroll to lesson shelf after brief render delay
+      setTimeout(() => {
+        const el = lessonShelfRefs.current[courseId];
+        if (el) {
+          el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+      }, 80);
     }
   };
 
@@ -333,24 +341,40 @@ export default function App() {
 
                           {/* Expanded Lessons Shelf */}
                           {expandedCourse && expandedCourse.lessons && expandedCourse.lessons.length > 0 && (
-                            <div className="bg-[#141414]/90 border border-white/5 rounded-2xl p-6 space-y-4 shadow-2xl relative overflow-hidden animate-fadeIn">
-                              <div className="absolute top-0 left-0 w-2 h-full bg-[#E50914]" />
+                            <div 
+                              ref={(el) => { lessonShelfRefs.current[expandedCourse.id] = el; }}
+                              className="lesson-shelf-enter bg-[#141414]/95 border border-white/5 rounded-2xl p-5 space-y-4 shadow-2xl relative overflow-hidden"
+                            >
+                              {/* Red accent left bar */}
+                              <div className="absolute top-0 left-0 w-1.5 h-full bg-[#E50914] rounded-l-2xl" />
                               
-                              <div className="flex items-center justify-between pl-2">
-                                <div>
-                                  <h3 className="text-sm font-bold text-[#E50914] uppercase tracking-wider">Aulas de:</h3>
-                                  <p className="text-base md:text-lg font-extrabold text-white">{expandedCourse.title}</p>
+                              {/* Header: course thumbnail + title + close */}
+                              <div className="flex items-center justify-between pl-3 gap-3">
+                                <div className="flex items-center gap-3 min-w-0">
+                                  {/* Course miniature */}
+                                  <img
+                                    src={expandedCourse.thumbnail}
+                                    alt={expandedCourse.title}
+                                    className="w-14 h-20 object-cover rounded-lg border border-white/10 flex-shrink-0 shadow-lg"
+                                    referrerPolicy="no-referrer"
+                                  />
+                                  <div className="min-w-0">
+                                    <h3 className="text-[10px] font-extrabold text-[#E50914] uppercase tracking-widest">Aulas do Curso</h3>
+                                    <p className="text-sm md:text-base font-extrabold text-white leading-tight line-clamp-2">{expandedCourse.title}</p>
+                                    <p className="text-[10px] text-zinc-500 mt-0.5">{expandedCourse.lessons.length} aulas disponíveis</p>
+                                  </div>
                                 </div>
                                 <button 
                                   onClick={() => setExpandedCourseId(null)}
-                                  className="text-zinc-400 hover:text-white p-2 rounded-full hover:bg-zinc-800/50 transition-colors text-sm font-bold"
+                                  className="text-zinc-400 hover:text-white p-2 rounded-full hover:bg-zinc-800/50 transition-colors text-sm font-bold flex-shrink-0"
                                   title="Fechar"
                                 >
                                   ✕
                                 </button>
                               </div>
                               
-                              <div className="flex overflow-x-auto gap-4 py-2 pl-2 scrollbar-hide snap-x scroll-smooth">
+                              {/* Lessons carousel - portrait cards */}
+                              <div className="flex overflow-x-auto gap-4 py-2 pl-3 custom-scrollbar snap-x scroll-smooth">
                                 {expandedCourse.lessons.map(lesson => (
                                   <div
                                     key={lesson.id}
@@ -359,23 +383,25 @@ export default function App() {
                                       setSelectedLessonId(lesson.id);
                                       setView('course-view');
                                     }}
-                                    className="flex-shrink-0 w-60 md:w-64 glass-card glass-card-hover rounded-xl overflow-hidden cursor-pointer snap-start transition-all duration-300 group/lesson"
+                                    className="flex-shrink-0 w-44 glass-card glass-card-hover rounded-xl overflow-hidden cursor-pointer snap-start transition-all duration-300 group/lesson flex flex-col"
                                   >
-                                    <div className="relative aspect-video w-full bg-zinc-950 overflow-hidden">
+                                    {/* Portrait thumbnail */}
+                                    <div className="relative w-full aspect-[3/4] bg-zinc-950 overflow-hidden flex-shrink-0">
                                       {lesson.thumbnailUrl ? (
                                         <img 
                                           src={lesson.thumbnailUrl} 
                                           alt={lesson.title}
-                                          className="w-full h-full object-cover transition-transform duration-500 group-hover/lesson:scale-105"
+                                          className="w-full h-full object-cover transition-transform duration-500 group-hover/lesson:scale-110"
                                           referrerPolicy="no-referrer"
                                         />
                                       ) : (
-                                        <div className="w-full h-full bg-gradient-to-br from-zinc-900 to-zinc-950 flex flex-col items-center justify-center p-4 text-center">
-                                          <span className="text-[10px] text-zinc-500 font-extrabold tracking-widest uppercase mb-1">AULA {lesson.order}</span>
-                                          <span className="text-xs text-white/40 font-bold line-clamp-2">{lesson.title}</span>
+                                        <div className="w-full h-full bg-gradient-to-br from-zinc-800 via-zinc-900 to-zinc-950 flex flex-col items-center justify-center p-3 text-center">
+                                          <span className="text-[9px] text-[#E50914] font-extrabold tracking-widest uppercase mb-1.5 bg-[#E50914]/10 px-2 py-0.5 rounded-full border border-[#E50914]/20">Aula {lesson.order}</span>
+                                          <span className="text-xs text-white/50 font-semibold line-clamp-3 leading-snug">{lesson.title}</span>
                                         </div>
                                       )}
                                       
+                                      {/* Play overlay */}
                                       <div className="absolute inset-0 bg-black/60 opacity-0 group-hover/lesson:opacity-100 transition-opacity flex items-center justify-center">
                                         <div className="bg-[#E50914] text-white p-2.5 rounded-full transform scale-75 group-hover/lesson:scale-100 transition-all duration-300 shadow-lg">
                                           <svg className="w-5 h-5 fill-white" viewBox="0 0 24 24">
@@ -383,13 +409,16 @@ export default function App() {
                                           </svg>
                                         </div>
                                       </div>
+
+                                      {/* Order badge */}
+                                      <span className="absolute top-2 left-2 bg-black/70 text-[#E50914] text-[9px] font-extrabold px-1.5 py-0.5 rounded backdrop-blur-sm border border-white/10">
+                                        #{lesson.order}
+                                      </span>
                                     </div>
                                     
-                                    <div className="p-3 space-y-1">
-                                      <span className="text-[9px] font-bold text-[#E50914] tracking-wider uppercase">
-                                        Aula {lesson.order}
-                                      </span>
-                                      <h4 className="text-xs font-bold text-white group-hover/lesson:text-[#E50914] transition-colors line-clamp-2 leading-relaxed">
+                                    {/* Info below */}
+                                    <div className="p-2.5 flex-grow">
+                                      <h4 className="text-[11px] font-bold text-white group-hover/lesson:text-[#E50914] transition-colors line-clamp-2 leading-snug">
                                         {lesson.title}
                                       </h4>
                                     </div>
diff --git a/src/components/PaymentCheckoutCard.tsx b/src/components/PaymentCheckoutCard.tsx
index 7e34264..d248f1d 100644
--- a/src/components/PaymentCheckoutCard.tsx
+++ b/src/components/PaymentCheckoutCard.tsx
@@ -212,7 +212,9 @@ const PaymentCheckoutCard: React.FC<PaymentCheckoutCardProps> = ({
   const isSinglePayment = cycle === 'LIFETIME' || itemType === 'course';
 
   const inputClass =
-    'w-full glass-input rounded-lg p-3 text-xs text-white focus:outline-none bg-black/40 border border-white/10 focus:border-[#E50914] transition-colors';
+    'w-full rounded-lg p-3 text-xs text-white focus:outline-none border transition-colors ' +
+    'bg-zinc-900 border-zinc-700 focus:border-[#E50914] placeholder-zinc-600 ' +
+    '[color-scheme:dark] [&:-webkit-autofill]:bg-zinc-900 [&:-webkit-autofill]:[webkit-text-fill-color:white]';
 
   // ── SUCCESS SCREEN ─────────────────────────────────────────────────────────
   if (unlocked) {
diff --git a/src/index.css b/src/index.css
index 6c853e8..30f623f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -120,3 +120,25 @@ html, body {
 .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
 .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(229,9,20,0.35); border-radius: 99px; }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(229,9,20,0.6); }
+
+/* ── Lesson shelf animation ── */
+@keyframes lesson-shelf-in {
+  from { opacity: 0; transform: translateY(-12px); max-height: 0; }
+  to   { opacity: 1; transform: translateY(0);      max-height: 600px; }
+}
+.lesson-shelf-enter {
+  animation: lesson-shelf-in 0.38s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  overflow: hidden;
+}
+
+/* ── Fix autocomplete white background on dark inputs ── */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 60px #1a1a1a inset !important;
+  -webkit-text-fill-color: #fff !important;
+  caret-color: #fff;
+  transition: background-color 5000s ease-in-out 0s;
+}
+