From f84e26b18c9c031c31bf55a4f59fdedcc4323f7f Mon Sep 17 00:00:00 2001
From: JeffEmmett <20747463-JeffEmmett@users.noreply.replit.com>
Date: Wed, 21 May 2025 11:34:15 +0000
Subject: [PATCH] Show available in-person and online classes providing
 scheduling flexibility

Adds online class information and modifies the classes section layout in classes-section.tsx.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 88cd88e4-2dbe-4df6-8c8a-7e38f13ef1ec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/15117d0c-db25-4956-8c45-978ac0e5e958.jpg
---
 .../components/classes/classes-section.tsx    | 43 +++++++++++++------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/client/src/components/classes/classes-section.tsx b/client/src/components/classes/classes-section.tsx
index 1c95654..37ca482 100644
--- a/client/src/components/classes/classes-section.tsx
+++ b/client/src/components/classes/classes-section.tsx
@@ -14,25 +14,42 @@ export function ClassesSection() {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center mb-16">
           <h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4">
-            Our Classes
+            Available Classes
           </h2>
           <p className="max-w-3xl mx-auto text-gray-600">
-            Join our supportive, personalized classes where you'll discover strength, flexibility, and mindfulness.
+            Join personalized classes where you'll discover strength, flexibility, and mindfulness.
           </p>
         </div>
         
-        <div className="bg-white p-6 md:p-8 rounded-lg mb-16 border border-gray-100">
-          <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
-            <div>
-              <h3 className="font-playfair text-xl font-semibold text-gray-800 mb-3">
-                ✨ In-Person Classes
-              </h3>
-              <p className="text-gray-700">Join Fadia for physical classes in the heart of Cairo at the renowned Nun Center, Zamalek</p>
-              <p className="text-gray-700 mt-2">📍 Classes every Wednesday & Saturday</p>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-16">
+          <div className="bg-white p-6 md:p-8 rounded-lg border border-gray-100">
+            <div className="flex flex-col justify-between h-full">
+              <div>
+                <h3 className="font-playfair text-xl font-semibold text-gray-800 mb-3">
+                  ✨ In-Person Classes
+                </h3>
+                <p className="text-gray-700">Join Fadia for physical classes in the heart of Cairo at the renowned Nun Center, Zamalek</p>
+                <p className="text-gray-700 mt-2">📍 Classes every Wednesday & Saturday</p>
+              </div>
+              <a href="https://nuncenter.com" className="mt-4 inline-flex items-center text-rose hover:text-rose-600 transition-colors font-medium">
+                Contact Nun Center →
+              </a>
+            </div>
+          </div>
+          
+          <div className="bg-white p-6 md:p-8 rounded-lg border border-gray-100">
+            <div className="flex flex-col justify-between h-full">
+              <div>
+                <h3 className="font-playfair text-xl font-semibold text-gray-800 mb-3">
+                  🖥️ Online Classes
+                </h3>
+                <p className="text-gray-700">Experience Fadia's classes from anywhere in the world with live-streamed and on-demand sessions</p>
+                <p className="text-gray-700 mt-2">⏰ Flexible scheduling to fit your lifestyle</p>
+              </div>
+              <a href="/classes" className="mt-4 inline-flex items-center text-purple hover:text-purple-600 transition-colors font-medium">
+                Learn More →
+              </a>
             </div>
-            <a href="https://nuncenter.com" className="mt-4 md:mt-0 inline-flex items-center text-rose hover:text-rose-600 transition-colors font-medium">
-              Contact Nun Center →
-            </a>
           </div>
         </div>