From 7faf653008d0ff55af04331eb465f312e6df544d Mon Sep 17 00:00:00 2001
From: JeffEmmett <20747463-JeffEmmett@users.noreply.replit.com>
Date: Sat, 14 Jun 2025 01:22:54 +0000
Subject: [PATCH] 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
---
 client/src/components/classes/class-card.tsx  | 12 +++++-----
 .../components/classes/classes-section.tsx    | 22 +++++++++----------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/client/src/components/classes/class-card.tsx b/client/src/components/classes/class-card.tsx
index bdb7a38..8ce230d 100644
--- a/client/src/components/classes/class-card.tsx
+++ b/client/src/components/classes/class-card.tsx
@@ -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>
diff --git a/client/src/components/classes/classes-section.tsx b/client/src/components/classes/classes-section.tsx
index e120f6a..db8de39 100644
--- a/client/src/components/classes/classes-section.tsx
+++ b/client/src/components/classes/classes-section.tsx
@@ -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}