jeffemmett
/
pwf-website-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve layout of available classes providing a clearer viewing experience 

Updates class cards to a 4x1 layout with adjusted image height and font sizes.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 149ccd4a-2ccb-4219-9a7b-69a9690dd7ac
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/9533e364-1c2f-4acb-9908-c17f5726174e.jpg
This commit is contained in:
JeffEmmett 2025-06-14 01:22:54 +00:00
parent b1ce478366
commit 7faf653008
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/components/classes/class-card.tsx
View File

@ -51,16 +51,16 @@ export function ClassCard({ classData }: ClassCardProps) {
<img <img
src={getClassImage()} src={getClassImage()}
alt={classData.name} alt={classData.name}
className="w-full h-48 object-cover" className="w-full h-36 object-cover"
/> />
<div className="p-6"> <div className="p-4">
<div className="flex justify-between items-center mb-3"> <div className="flex justify-between items-start mb-2">
<h3 className="font-playfair font-bold text-xl">{classData.name}</h3> <h3 className="font-playfair font-bold text-lg leading-tight">{classData.name}</h3>
<span className={`${badgeColor()} text-xs px-3 py-1 rounded-full font-semibold`}> <span className={`${badgeColor()} text-xs px-2 py-1 rounded-full font-semibold ml-2 flex-shrink-0`}>
{formatClassType(classData.classType)} {formatClassType(classData.classType)}
</span> </span>
</div> </div>
<p className="text-gray-600"> <p className="text-gray-600 text-sm leading-snug">
{classData.description} {classData.description}
</p> </p>
</div> </div>

22
client/src/components/classes/classes-section.tsx
View File

@ -25,18 +25,18 @@ export function ClassesSection() {
{/* Class description boxes removed */} {/* Class description boxes removed */}
{isLoading ? ( {isLoading ? (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{[1, 2, 3].map((_, i) => ( {[1, 2, 3, 4].map((_, i) => (
<div key={i} className="bg-white rounded-lg overflow-hidden shadow-lg"> <div key={i} className="bg-white rounded-lg overflow-hidden shadow-lg">
<Skeleton className="w-full h-48" /> <Skeleton className="w-full h-36" />
<div className="p-6"> <div className="p-4">
<div className="flex justify-between items-center mb-3"> <div className="flex justify-between items-start mb-2">
<Skeleton className="h-6 w-32" /> <Skeleton className="h-5 w-24" />
<Skeleton className="h-6 w-20" /> <Skeleton className="h-5 w-16" />
</div> </div>
<Skeleton className="h-4 w-full mb-2" /> <Skeleton className="h-4 w-full mb-1" />
<Skeleton className="h-4 w-full mb-2" /> <Skeleton className="h-4 w-full mb-1" />
<Skeleton className="h-4 w-3/4 mb-4" /> <Skeleton className="h-4 w-3/4" />
</div> </div>
</div> </div>
))} ))}
@ -46,7 +46,7 @@ export function ClassesSection() {
<p>Error loading classes. Please try again later.</p> <p>Error loading classes. Please try again later.</p>
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{classes?.map((classData) => ( {classes?.map((classData) => (
<ClassCard <ClassCard
key={classData.id} key={classData.id}