From 1755401f5aeb6afc3ec11f82dace3adf4ec356ef Mon Sep 17 00:00:00 2001
From: JeffEmmett <20747463-JeffEmmett@users.noreply.replit.com>
Date: Wed, 7 May 2025 02:39:48 +0000
Subject: [PATCH] Update website links to improve navigation and user
 experience

Refactors <Link> components in header.tsx and footer.tsx to use the className prop instead of nested <a> tags.

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/667959b7-17e2-4df0-a667-d3843bb83e45.jpg
---
 client/src/components/navigation/footer.tsx | 49 +++++++++++++++------
 client/src/components/navigation/header.tsx | 45 ++++++++++---------
 2 files changed, 60 insertions(+), 34 deletions(-)

diff --git a/client/src/components/navigation/footer.tsx b/client/src/components/navigation/footer.tsx
index 34c582a..9316dee 100644
--- a/client/src/components/navigation/footer.tsx
+++ b/client/src/components/navigation/footer.tsx
@@ -33,28 +33,43 @@ export default function Footer() {
             <h3 className="font-playfair font-bold text-lg mb-4">Quick Links</h3>
             <ul className="space-y-3">
               <li>
-                <Link href="/">
-                  <a className="text-gray-400 hover:text-white transition duration-300">Home</a>
+                <Link 
+                  href="/" 
+                  className="text-gray-400 hover:text-white transition duration-300"
+                >
+                  Home
                 </Link>
               </li>
               <li>
-                <Link href="/about">
-                  <a className="text-gray-400 hover:text-white transition duration-300">About Fadia</a>
+                <Link 
+                  href="/about" 
+                  className="text-gray-400 hover:text-white transition duration-300"
+                >
+                  About Fadia
                 </Link>
               </li>
               <li>
-                <Link href="/classes">
-                  <a className="text-gray-400 hover:text-white transition duration-300">Classes</a>
+                <Link 
+                  href="/classes" 
+                  className="text-gray-400 hover:text-white transition duration-300"
+                >
+                  Classes
                 </Link>
               </li>
               <li>
-                <Link href="/community">
-                  <a className="text-gray-400 hover:text-white transition duration-300">Community</a>
+                <Link 
+                  href="/community" 
+                  className="text-gray-400 hover:text-white transition duration-300"
+                >
+                  Community
                 </Link>
               </li>
               <li>
-                <Link href="/contact">
-                  <a className="text-gray-400 hover:text-white transition duration-300">Contact</a>
+                <Link 
+                  href="/contact" 
+                  className="text-gray-400 hover:text-white transition duration-300"
+                >
+                  Contact
                 </Link>
               </li>
             </ul>
@@ -64,13 +79,19 @@ export default function Footer() {
             <h3 className="font-playfair font-bold text-lg mb-4">Classes</h3>
             <ul className="space-y-3">
               <li>
-                <Link href="/classes">
-                  <a className="text-gray-400 hover:text-white transition duration-300">Mat Pilates</a>
+                <Link 
+                  href="/classes" 
+                  className="text-gray-400 hover:text-white transition duration-300"
+                >
+                  Mat Pilates
                 </Link>
               </li>
               <li>
-                <Link href="/classes">
-                  <a className="text-gray-400 hover:text-white transition duration-300">Reformer</a>
+                <Link 
+                  href="/classes" 
+                  className="text-gray-400 hover:text-white transition duration-300"
+                >
+                  Reformer
                 </Link>
               </li>
               <li>
diff --git a/client/src/components/navigation/header.tsx b/client/src/components/navigation/header.tsx
index 54e078f..a655288 100644
--- a/client/src/components/navigation/header.tsx
+++ b/client/src/components/navigation/header.tsx
@@ -66,15 +66,17 @@ export default function Header() {
               </>
             ) : (
               <>
-                <Link href="/auth">
-                  <a className="text-teal hover:text-teal-600 transition-colors duration-200 font-raleway font-medium">
-                    Login
-                  </a>
+                <Link 
+                  href="/auth" 
+                  className="text-teal hover:text-teal-600 transition-colors duration-200 font-raleway font-medium"
+                >
+                  Login
                 </Link>
-                <Link href="/auth">
-                  <a className="bg-teal text-white px-4 py-2 rounded-full hover:bg-opacity-90 transition-colors duration-200 font-raleway font-medium">
-                    Sign Up
-                  </a>
+                <Link 
+                  href="/auth" 
+                  className="bg-teal text-white px-4 py-2 rounded-full hover:bg-opacity-90 transition-colors duration-200 font-raleway font-medium"
+                >
+                  Sign Up
                 </Link>
               </>
             )}
@@ -93,10 +95,11 @@ export default function Header() {
                 <div className="px-2 pt-2 pb-4 space-y-1 sm:px-3">
                   {navLinks.map((link) => (
                     <SheetClose asChild key={link.path}>
-                      <Link href={link.path}>
-                        <a className={`block px-3 py-2 text-base font-medium ${isActive(link.path)}`}>
-                          {link.name}
-                        </a>
+                      <Link 
+                        href={link.path}
+                        className={`block px-3 py-2 text-base font-medium ${isActive(link.path)}`}
+                      >
+                        {link.name}
                       </Link>
                     </SheetClose>
                   ))}
@@ -119,17 +122,19 @@ export default function Header() {
                   ) : (
                     <>
                       <SheetClose asChild>
-                        <Link href="/auth">
-                          <a className="block px-3 py-2 text-base font-medium text-teal hover:text-teal-600">
-                            Login
-                          </a>
+                        <Link 
+                          href="/auth"
+                          className="block px-3 py-2 text-base font-medium text-teal hover:text-teal-600"
+                        >
+                          Login
                         </Link>
                       </SheetClose>
                       <SheetClose asChild>
-                        <Link href="/auth">
-                          <a className="block px-3 py-2 text-base font-medium text-white bg-teal rounded-full text-center hover:bg-opacity-90">
-                            Sign Up
-                          </a>
+                        <Link 
+                          href="/auth"
+                          className="block px-3 py-2 text-base font-medium text-white bg-teal rounded-full text-center hover:bg-opacity-90"
+                        >
+                          Sign Up
                         </Link>
                       </SheetClose>
                     </>