From c44ac79a3538fe89decb42c6290d18d8d3a45e5f Mon Sep 17 00:00:00 2001 From: Sidney Gomes Date: Fri, 24 Jul 2026 23:11:51 -0300 Subject: [PATCH] feat: corrigir botoes hero banner e mudar visual dos cards para retrato com transicao horizontal no hover/selecao --- src/App.tsx | 14 ++- src/components/CourseCard.tsx | 179 ++++++++++++++++-------------- src/components/CourseCarousel.tsx | 4 +- src/components/HeroBanner.tsx | 5 +- 4 files changed, 116 insertions(+), 86 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 4447947..1ddeda1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -290,7 +290,18 @@ export default function App() { {/* Hero Banner (Featured last course or first catalogue course) */} 0 ? courses[0] : null} - onPlay={handleSelectCourse} + onPlay={(courseId) => { + const selected = courses.find(c => c.id === courseId); + if (selected && (selected as any).isUnlocked === false) { + setUnlockingCourse(selected); + return; + } + setSelectedCourseId(courseId); + const firstLesson = selected?.lessons && selected.lessons.length > 0 ? selected.lessons[0].id : null; + setSelectedLessonId(firstLesson); + setView('course-view'); + }} + onDetail={handleSelectCourse} subscriptionStatus={user.subscriptionStatus} setView={setView} /> @@ -318,6 +329,7 @@ export default function App() { onSelectCourse={handleSelectCourse} onUnlockCourse={(course) => setUnlockingCourse(course)} subscriptionStatus={user.subscriptionStatus} + selectedCourseId={expandedCourseId} /> {/* Expanded Lessons Shelf */} diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index 197a19a..946ddd9 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -8,12 +8,25 @@ interface CourseCardProps { onSelect: (courseId: string) => void; onUnlockRequest?: (course: any) => void; subscriptionStatus: string; + isSelected?: boolean; } -export default function CourseCard({ course, onSelect, onUnlockRequest, subscriptionStatus }: CourseCardProps) { +export default function CourseCard({ course, onSelect, onUnlockRequest, subscriptionStatus, isSelected = false }: CourseCardProps) { const isBlocked = subscriptionStatus === 'OVERDUE' || subscriptionStatus === 'CANCELED'; const isUnlocked = course.isUnlocked !== false; // defaults to true if undefined + const cardClasses = isSelected + ? "absolute top-0 left-0 flex flex-row w-[380px] max-w-[90vw] h-[220px] bg-zinc-900 border-2 border-[#E50914] rounded-xl overflow-hidden cursor-pointer shadow-2xl z-20 transition-all duration-300" + : "absolute top-0 left-0 w-full h-full flex flex-col bg-zinc-950/40 border border-white/10 rounded-xl overflow-hidden cursor-pointer transition-all duration-300 z-10 md:group-hover:z-30 md:group-hover:flex-row md:group-hover:scale-105 md:group-hover:w-[380px] md:group-hover:h-[220px] md:group-hover:shadow-2xl shadow-lg"; + + const imgContainerClasses = isSelected + ? "relative w-[150px] h-full flex-shrink-0 overflow-hidden" + : "relative w-full h-[180px] md:group-hover:w-[150px] md:group-hover:h-full flex-shrink-0 overflow-hidden transition-all duration-300"; + + const infoContainerClasses = isSelected + ? "p-4 flex-grow flex flex-col justify-between min-w-0 h-full bg-zinc-900" + : "p-3 flex-grow flex flex-col justify-between min-w-0 h-full bg-zinc-900/60 md:group-hover:bg-zinc-900 md:group-hover:p-4 transition-all duration-300"; + return (
- {/* Thumbnail */} -
- {course.title} +
+ {/* Thumbnail */} +
+ {course.title} - {/* Lock Overlay */} - {!isUnlocked && ( -
-
- -
- - Curso Trancado - -
- )} - - {/* Play Overlay */} - {isUnlocked && ( -
-
- -
-
- )} - - {/* Progress bar at the bottom of the thumbnail */} - {course.progress !== undefined && course.progress > 0 && ( -
-
-
- )} -
- - {/* Course Info */} -
-
- {/* Category */} - - {course.category} - {!isUnlocked && course.price !== undefined && ( - - R$ {course.price.toFixed(2)} + {/* Lock Overlay */} + {!isUnlocked && ( +
+
+ +
+ + Bloqueado - )} - - {/* Title */} -

- {course.title} -

- {/* Description */} -

- {course.description} -

+
+ )} + + {/* Play Overlay */} + {isUnlocked && ( +
+
+ +
+
+ )} + + {/* Progress bar at the bottom of the thumbnail */} + {course.progress !== undefined && course.progress > 0 && ( +
+
+
+ )}
- {/* Footer Metrics */} -
-
- - {course.totalLessons || 0} Aulas + {/* Course Info */} +
+
+ {/* Category */} + + {course.category} + {!isUnlocked && course.price !== undefined && ( + + R$ {course.price.toFixed(2)} + + )} + + {/* Title */} +

+ {course.title} +

+ {/* Description */} +

+ {course.description} +

- {course.progress !== undefined && course.progress > 0 ? ( -
- {course.progress === 100 ? ( -
- - Concluído -
- ) : ( - {course.progress}% assistido - )} + {/* Footer Metrics */} +
+
+ + {course.totalLessons || 0} Aulas
- ) : ( - - {!isUnlocked && } - {!isUnlocked ? 'Bloqueado' : 'Não iniciado'} - - )} + + {course.progress !== undefined && course.progress > 0 ? ( +
+ {course.progress === 100 ? ( +
+ + Concluído +
+ ) : ( + {course.progress}% + )} +
+ ) : ( + + {!isUnlocked && } + {!isUnlocked ? 'Bloqueado' : 'Não iniciado'} + + )} +
diff --git a/src/components/CourseCarousel.tsx b/src/components/CourseCarousel.tsx index 5b791c5..e174eb1 100644 --- a/src/components/CourseCarousel.tsx +++ b/src/components/CourseCarousel.tsx @@ -9,9 +9,10 @@ interface CourseCarouselProps { onSelectCourse: (courseId: string) => void; onUnlockCourse?: (course: any) => void; subscriptionStatus: string; + selectedCourseId?: string | null; } -export default function CourseCarousel({ title, courses, onSelectCourse, onUnlockCourse, subscriptionStatus }: CourseCarouselProps) { +export default function CourseCarousel({ title, courses, onSelectCourse, onUnlockCourse, subscriptionStatus, selectedCourseId }: CourseCarouselProps) { if (courses.length === 0) return null; return ( @@ -35,6 +36,7 @@ export default function CourseCarousel({ title, courses, onSelectCourse, onUnloc onSelect={onSelectCourse} onUnlockRequest={onUnlockCourse} subscriptionStatus={subscriptionStatus} + isSelected={selectedCourseId === course.id} /> ))}
diff --git a/src/components/HeroBanner.tsx b/src/components/HeroBanner.tsx index d7c05bb..bf50682 100644 --- a/src/components/HeroBanner.tsx +++ b/src/components/HeroBanner.tsx @@ -5,11 +5,12 @@ import { Course } from '../types'; interface HeroBannerProps { course: (Course & { progress?: number; totalLessons?: number }) | null; onPlay: (courseId: string) => void; + onDetail: (courseId: string) => void; subscriptionStatus: string; setView: (view: string) => void; } -export default function HeroBanner({ course, onPlay, subscriptionStatus, setView }: HeroBannerProps) { +export default function HeroBanner({ course, onPlay, onDetail, subscriptionStatus, setView }: HeroBannerProps) { if (!course) { return (
@@ -91,7 +92,7 @@ export default function HeroBanner({ course, onPlay, subscriptionStatus, setView )}