Show available Pilates classes without booking options or pricing

Removes booking functionality and price display from ClassCard and ClassesSection components.

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/6dde4ef6-6ad6-4713-b98b-6bd86ff25b19.jpg

client/src/components/classes/class-card.tsx

@@ -1,44 +1,17 @@
 import { Class } from "@shared/schema";
-import { useAuth } from "@/hooks/use-auth";
-import { useState } from "react";
-import { useToast } from "@/hooks/use-toast";
-import { useLocation } from "wouter";
 import FadiaGroupClassImage from "../../assets/Fadia-15.jpg";
 import FadiaSmallGroupClassImage from "../../assets/Fadia-156.jpg";
 import FadiaPrivateClassImage from "../../assets/Fadia-132.jpg";
 
 interface ClassCardProps {
   classData: Class;
-  onBookClick: (classId: number) => void;
 }
 
-export function ClassCard({ classData, onBookClick }: ClassCardProps) {
-  const { user } = useAuth();
-  const { toast } = useToast();
-  const [_, setLocation] = useLocation();
-  
-  const formatPrice = (price: number) => {
-    return `$${(price / 100).toFixed(2)}`;
-  };
-  
+export function ClassCard({ classData }: ClassCardProps) {
   const formatDuration = (minutes: number) => {
     return `${minutes} minutes`;
   };
   
-  const handleBookNow = () => {
-    if (!user) {
-      toast({
-        title: "Authentication required",
-        description: "Please login or sign up to book a class",
-        variant: "destructive"
-      });
-      setLocation("/auth");
-      return;
-    }
-    
-    onBookClick(classData.id);
-  };
-  
   // Determine badge color based on class type
   const badgeColor = () => {
     switch (classData.classType) {
@@ -49,11 +22,6 @@ export function ClassCard({ classData, onBookClick }: ClassCardProps) {
     }
   };
   
-  // All buttons use teal as the primary color
-  const buttonColor = () => {
-    return "bg-teal text-white";
-  };
-  
   // Format class type for display
   const formatClassType = (type: string) => {
     switch (type) {
@@ -91,18 +59,11 @@ export function ClassCard({ classData, onBookClick }: ClassCardProps) {
         <p className="text-gray-600 mb-4">
           {classData.description}
         </p>
-        <div className="flex justify-between items-center">
+        <div className="flex items-center">
           <span className="text-gray-700">
             <i className="far fa-clock mr-1"></i> {formatDuration(classData.duration)}
           </span>
-          <span className="text-gray-700">{formatPrice(classData.price)} / class</span>
         </div>
-        <button 
-          className={`mt-4 w-full ${buttonColor()} font-medium py-2 px-4 rounded-md hover:bg-opacity-90 transition duration-300`}
-          onClick={handleBookNow}
-        >
-          Book Now
-        </button>
       </div>
     </div>
   );

client/src/components/classes/classes-section.tsx

@@ -1,30 +1,14 @@
-import { useState } from "react";
 import { ClassCard } from "./class-card";
-import { BookingCalendar } from "./booking-calendar";
 import { useQuery } from "@tanstack/react-query";
 import { Class } from "@shared/schema";
 import { Skeleton } from "@/components/ui/skeleton";
 import FadiaClassImage from "../../assets/Fadia-156.jpg";
 
 export function ClassesSection() {
-  const [selectedClassId, setSelectedClassId] = useState<number | null>(null);
-  
   const { data: classes, isLoading, error } = useQuery<Class[]>({
     queryKey: ["/api/classes"],
   });
   
-  const selectedClass = selectedClassId 
-    ? classes?.find(c => c.id === selectedClassId) 
-    : null;
-  
-  const handleBookClick = (classId: number) => {
-    setSelectedClassId(classId);
-    const element = document.getElementById('booking-calendar');
-    if (element) {
-      element.scrollIntoView({ behavior: 'smooth' });
-    }
-  };
-  
   return (
     <section className="py-20" style={{ backgroundColor: 'rgba(181, 80, 118, 0.1)' }}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -65,7 +49,6 @@ export function ClassesSection() {
                   <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-8 w-24 mt-4" />
                 </div>
               </div>
             ))}
@@ -80,28 +63,10 @@ export function ClassesSection() {
               <ClassCard 
                 key={classData.id} 
                 classData={classData} 
-                onBookClick={handleBookClick} 
               />
             ))}
           </div>
         )}
-        
-        {selectedClass && (
-          <div id="booking-calendar" className="mt-20 pt-10 border-t border-gray-200">
-            <h3 className="text-2xl font-playfair font-semibold text-center mb-8">
-              Book Your {selectedClass.name} Class
-            </h3>
-            <BookingCalendar selectedClass={selectedClass} />
-            <div className="text-center mt-8">
-              <button 
-                onClick={() => setSelectedClassId(null)} 
-                className="px-6 py-2 text-gray-600 hover:text-gray-900 border border-gray-300 hover:border-gray-500 transition-colors"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        )}
       </div>
     </section>
   );