From 8f586105ba5d86a734402e6c1be823bb71038c70 Mon Sep 17 00:00:00 2001
From: JeffEmmett <20747463-JeffEmmett@users.noreply.replit.com>
Date: Sat, 10 May 2025 00:14:21 +0000
Subject: [PATCH] Enhance website aesthetics with teal accents and unique class
 images

Updates the color theme to teal and uses distinct images for each class type.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: acaf01d7-65a7-4fc5-901d-853488e196e8
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/725cddc1-d370-4b9b-a488-f35bbfa8cd97.jpg
---
 client/src/components/classes/class-card.tsx | 16 ++++++++++++++--
 client/src/components/home/cta-section.tsx   |  6 +++---
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/client/src/components/classes/class-card.tsx b/client/src/components/classes/class-card.tsx
index 590ac18..d248a88 100644
--- a/client/src/components/classes/class-card.tsx
+++ b/client/src/components/classes/class-card.tsx
@@ -3,7 +3,9 @@ import { useAuth } from "@/hooks/use-auth";
 import { useState } from "react";
 import { useToast } from "@/hooks/use-toast";
 import { useLocation } from "wouter";
-import FadiaClassImage from "../../assets/Fadia-156.jpg";
+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;
@@ -67,10 +69,20 @@ export function ClassCard({ classData, onBookClick }: ClassCardProps) {
     }
   };
 
+  // Get class image based on class type
+  const getClassImage = () => {
+    switch (classData.classType) {
+      case "group": return FadiaGroupClassImage;
+      case "small-group": return FadiaSmallGroupClassImage;
+      case "private": return FadiaPrivateClassImage;
+      default: return FadiaGroupClassImage;
+    }
+  };
+
   return (
     <div className="bg-white rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:transform hover:scale-105">
       <img 
-        src={FadiaClassImage} 
+        src={getClassImage()} 
         alt={classData.name} 
         className="w-full h-48 object-cover" 
       />
diff --git a/client/src/components/home/cta-section.tsx b/client/src/components/home/cta-section.tsx
index ab7c998..ed93bfa 100644
--- a/client/src/components/home/cta-section.tsx
+++ b/client/src/components/home/cta-section.tsx
@@ -2,7 +2,7 @@ import { Link } from "wouter";
 
 export function CTASection() {
   return (
-    <section className="py-20 text-white" style={{ backgroundColor: '#9D5E9B' }}>
+    <section className="py-20 text-white" style={{ backgroundColor: '#0c8991' }}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
         <h2 className="text-3xl md:text-4xl font-playfair font-semibold mb-6">
           Ready to feel stronger, more connected, and at home in your body?
@@ -15,13 +15,13 @@ export function CTASection() {
         <div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
           <Link
             href="/classes"
-            className="bg-white text-purple font-medium py-3 px-10 hover:bg-opacity-90 transition duration-300"
+            className="bg-white text-teal font-medium py-3 px-10 hover:bg-opacity-90 transition duration-300"
           >
             Join a Class
           </Link>
           <Link
             href="/contact"
-            className="bg-transparent border border-white text-white font-medium py-3 px-10 hover:bg-white hover:text-purple transition duration-300"
+            className="bg-transparent border border-white text-white font-medium py-3 px-10 hover:bg-white hover:text-teal transition duration-300"
           >
             Contact Fadia
           </Link>