feat: corrigir botoes hero banner e mudar visual dos cards para retrato com transicao horizontal no hover/selecao
Build and Deploy (Gitea) / build-and-deploy (push) Successful in 59s
Details
Build and Deploy (Gitea) / build-and-deploy (push) Successful in 59s
Details
This commit is contained in:
parent
43643d5930
commit
c44ac79a35
14
src/App.tsx
14
src/App.tsx
|
|
@ -290,7 +290,18 @@ export default function App() {
|
|||
{/* Hero Banner (Featured last course or first catalogue course) */}
|
||||
<HeroBanner
|
||||
course={courses.length > 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 */}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div
|
||||
id={`course-card-${course.id}`}
|
||||
|
|
@ -24,95 +37,97 @@ export default function CourseCard({ course, onSelect, onUnlockRequest, subscrip
|
|||
onSelect(course.id);
|
||||
}
|
||||
}}
|
||||
className={`group relative glass-card glass-card-hover rounded-xl overflow-hidden cursor-pointer flex flex-col h-full transition-all duration-300 ${!isUnlocked ? 'filter grayscale brightness-75 hover:brightness-100 hover:grayscale-0' : ''}`}
|
||||
className={`relative h-[320px] w-full group ${!isUnlocked ? 'filter grayscale brightness-75 hover:brightness-100 hover:grayscale-0' : ''}`}
|
||||
>
|
||||
{/* Thumbnail */}
|
||||
<div className="relative w-full aspect-video overflow-hidden">
|
||||
<img
|
||||
src={course.thumbnail}
|
||||
alt={course.title}
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
<div className={cardClasses}>
|
||||
{/* Thumbnail */}
|
||||
<div className={imgContainerClasses}>
|
||||
<img
|
||||
src={course.thumbnail}
|
||||
alt={course.title}
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
|
||||
{/* Lock Overlay */}
|
||||
{!isUnlocked && (
|
||||
<div className="absolute inset-0 bg-black/60 flex flex-col items-center justify-center space-y-1.5 z-10 transition-opacity">
|
||||
<div className="bg-[#E50914] text-white p-2.5 rounded-full shadow-[0_0_15px_rgba(229,9,20,0.4)] border border-white/10 animate-pulse">
|
||||
<Lock className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="text-[10px] uppercase tracking-widest font-extrabold text-white bg-black/50 px-2.5 py-0.5 rounded-full border border-white/5">
|
||||
Curso Trancado
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Play Overlay */}
|
||||
{isUnlocked && (
|
||||
<div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||
<div className="bg-[#E50914] text-white p-3 rounded-full transform scale-75 group-hover:scale-100 transition-all duration-300 shadow-lg">
|
||||
<Play className="w-6 h-6 fill-white" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Progress bar at the bottom of the thumbnail */}
|
||||
{course.progress !== undefined && course.progress > 0 && (
|
||||
<div className="absolute bottom-0 left-0 right-0 h-1 bg-white/10 backdrop-blur-sm">
|
||||
<div
|
||||
className="bg-[#E50914] h-full transition-all duration-300 shadow-[0_0_10px_rgba(229,9,20,0.5)]"
|
||||
style={{ width: `${course.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Course Info */}
|
||||
<div className="p-4 flex-grow flex flex-col justify-between space-y-3">
|
||||
<div className="space-y-1">
|
||||
{/* Category */}
|
||||
<span className="text-[10px] font-bold text-[#E50914] tracking-wider uppercase flex items-center justify-between">
|
||||
<span>{course.category}</span>
|
||||
{!isUnlocked && course.price !== undefined && (
|
||||
<span className="text-white bg-zinc-800 px-1.5 py-0.5 rounded text-[9px] font-mono border border-white/5">
|
||||
R$ {course.price.toFixed(2)}
|
||||
{/* Lock Overlay */}
|
||||
{!isUnlocked && (
|
||||
<div className="absolute inset-0 bg-black/60 flex flex-col items-center justify-center space-y-1.5 z-10 transition-opacity">
|
||||
<div className="bg-[#E50914] text-white p-2 rounded-full shadow-[0_0_15px_rgba(229,9,20,0.4)] border border-white/10 animate-pulse">
|
||||
<Lock className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="text-[9px] uppercase tracking-widest font-extrabold text-white bg-black/50 px-2 py-0.5 rounded-full border border-white/5">
|
||||
Bloqueado
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
{/* Title */}
|
||||
<h3 className="font-display font-bold text-sm md:text-base text-white tracking-tight leading-snug group-hover:text-[#E50914] transition-colors line-clamp-1">
|
||||
{course.title}
|
||||
</h3>
|
||||
{/* Description */}
|
||||
<p className="text-xs text-zinc-400 font-normal line-clamp-2 leading-relaxed">
|
||||
{course.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Play Overlay */}
|
||||
{isUnlocked && (
|
||||
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover: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:scale-100 transition-all duration-300 shadow-lg">
|
||||
<Play className="w-5 h-5 fill-white" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Progress bar at the bottom of the thumbnail */}
|
||||
{course.progress !== undefined && course.progress > 0 && (
|
||||
<div className="absolute bottom-0 left-0 right-0 h-1 bg-white/10 backdrop-blur-sm">
|
||||
<div
|
||||
className="bg-[#E50914] h-full transition-all duration-300 shadow-[0_0_10px_rgba(229,9,20,0.5)]"
|
||||
style={{ width: `${course.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer Metrics */}
|
||||
<div className="flex items-center justify-between pt-2 border-t border-white/5 text-[11px] text-zinc-500">
|
||||
<div className="flex items-center space-x-1 font-medium">
|
||||
<BookOpen className="w-3.5 h-3.5 text-zinc-400" />
|
||||
<span>{course.totalLessons || 0} Aulas</span>
|
||||
{/* Course Info */}
|
||||
<div className={infoContainerClasses}>
|
||||
<div className="space-y-1.5">
|
||||
{/* Category */}
|
||||
<span className="text-[9px] font-bold text-[#E50914] tracking-wider uppercase flex items-center justify-between">
|
||||
<span>{course.category}</span>
|
||||
{!isUnlocked && course.price !== undefined && (
|
||||
<span className="text-white bg-zinc-800 px-1.5 py-0.5 rounded text-[8px] font-mono border border-white/5">
|
||||
R$ {course.price.toFixed(2)}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
{/* Title */}
|
||||
<h3 className="font-display font-bold text-sm md:text-base text-white tracking-tight leading-snug group-hover:text-[#E50914] transition-colors line-clamp-1">
|
||||
{course.title}
|
||||
</h3>
|
||||
{/* Description */}
|
||||
<p className="text-[11px] text-zinc-400 font-normal line-clamp-2 md:group-hover:line-clamp-3 leading-relaxed">
|
||||
{course.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{course.progress !== undefined && course.progress > 0 ? (
|
||||
<div className="flex items-center space-x-1 text-[#E50914] font-semibold">
|
||||
{course.progress === 100 ? (
|
||||
<div className="flex items-center space-x-1 text-emerald-500">
|
||||
<CheckCircle2 className="w-3.5 h-3.5" />
|
||||
<span>Concluído</span>
|
||||
</div>
|
||||
) : (
|
||||
<span>{course.progress}% assistido</span>
|
||||
)}
|
||||
{/* Footer Metrics */}
|
||||
<div className="flex items-center justify-between pt-1.5 border-t border-white/5 text-[10px] text-zinc-500">
|
||||
<div className="flex items-center space-x-1 font-medium">
|
||||
<BookOpen className="w-3 h-3 text-zinc-400" />
|
||||
<span>{course.totalLessons || 0} Aulas</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-zinc-500 text-[10px] uppercase font-bold flex items-center gap-1">
|
||||
{!isUnlocked && <Lock className="w-2.5 h-2.5 text-[#E50914]" />}
|
||||
{!isUnlocked ? 'Bloqueado' : 'Não iniciado'}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{course.progress !== undefined && course.progress > 0 ? (
|
||||
<div className="flex items-center space-x-1 text-[#E50914] font-semibold">
|
||||
{course.progress === 100 ? (
|
||||
<div className="flex items-center space-x-1 text-emerald-500">
|
||||
<CheckCircle2 className="w-3.5 h-3.5" />
|
||||
<span>Concluído</span>
|
||||
</div>
|
||||
) : (
|
||||
<span>{course.progress}%</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-zinc-500 text-[9px] uppercase font-bold flex items-center gap-1">
|
||||
{!isUnlocked && <Lock className="w-2 text-[#E50914]" />}
|
||||
{!isUnlocked ? 'Bloqueado' : 'Não iniciado'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className="h-[30vh] md:h-[45vh] w-full bg-zinc-900 flex items-center justify-center text-zinc-500 rounded-lg border border-zinc-800">
|
||||
|
|
@ -91,7 +92,7 @@ export default function HeroBanner({ course, onPlay, subscriptionStatus, setView
|
|||
)}
|
||||
|
||||
<button
|
||||
onClick={() => onPlay(course.id)}
|
||||
onClick={() => onDetail(course.id)}
|
||||
className="glass-btn-secondary text-white font-medium px-5 py-2.5 rounded-lg flex items-center space-x-2 cursor-pointer"
|
||||
>
|
||||
<Info className="w-5 h-5 text-zinc-300" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue