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

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

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