From 29af083f3e311e7433bf6c177cf13bc43b34ed1c Mon Sep 17 00:00:00 2001
From: JeffEmmett <20747463-JeffEmmett@users.noreply.replit.com>
Date: Fri, 13 Jun 2025 22:14:23 +0000
Subject: [PATCH] Emphasize 'Book a Class' button to encourage users to easily
 schedule classes

Updates the 'Book a Class' button style in `header.tsx` to use white/teal color scheme.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: e524de2d-167c-4bad-8c36-b012186a210b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/6315b051-36fc-486a-b31c-79917de2a060.jpg
---
 client/src/components/navigation/header.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/src/components/navigation/header.tsx b/client/src/components/navigation/header.tsx
index 1f005d5..475df60 100644
--- a/client/src/components/navigation/header.tsx
+++ b/client/src/components/navigation/header.tsx
@@ -39,7 +39,11 @@ export default function Header() {
               <Link 
                 key={link.path} 
                 href={link.path} 
-                className={`transition-colors duration-200 font-raleway font-bold text-lg ${isActive(link.path)}`}
+                className={`transition-colors duration-200 font-raleway font-bold text-lg ${
+                  link.name === "Book a Class" 
+                    ? "bg-white text-teal px-4 py-2 rounded-full hover:bg-opacity-90" 
+                    : isActive(link.path)
+                }`}
               >
                 {link.name}
               </Link>
@@ -63,7 +67,11 @@ export default function Header() {
                     <SheetClose asChild key={link.path}>
                       <Link 
                         href={link.path}
-                        className={`block px-3 py-2 text-base font-medium ${isActive(link.path)}`}
+                        className={`block px-3 py-2 text-base font-medium ${
+                          link.name === "Book a Class" 
+                            ? "bg-teal text-white rounded-full text-center hover:bg-opacity-90" 
+                            : isActive(link.path)
+                        }`}
                       >
                         {link.name}
                       </Link>