Improve website navigation by wrapping links for better accessibility

Refactors Link components throughout HeroSection, Footer, and Logo for improved Next.js accessibility.

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/2baac40b-d946-44e1-8ca6-13c0383ec46a.jpg
This commit is contained in:
JeffEmmett 2025-05-07 02:42:12 +00:00
parent 1755401f5a
commit 7a45caa01e
3 changed files with 29 additions and 17 deletions

View File

@ -14,15 +14,17 @@ export function HeroSection() {
Transform your body and mind through the art of Pilates. Join our serene studio for personalized sessions that promote harmony, flexibility, and strength. Transform your body and mind through the art of Pilates. Join our serene studio for personalized sessions that promote harmony, flexibility, and strength.
</p> </p>
<div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<Link href="/classes"> <Link
<a className="bg-teal hover:bg-opacity-90 text-white font-medium py-3 px-6 rounded-full transition duration-300 text-center"> href="/classes"
Book a Class className="bg-teal hover:bg-opacity-90 text-white font-medium py-3 px-6 rounded-full transition duration-300 text-center"
</a> >
Book a Class
</Link> </Link>
<Link href="/about"> <Link
<a className="bg-purple hover:bg-opacity-90 text-white font-medium py-3 px-6 rounded-full transition duration-300 text-center"> href="/about"
About Fadia className="bg-purple hover:bg-opacity-90 text-white font-medium py-3 px-6 rounded-full transition duration-300 text-center"
</a> >
About Fadia
</Link> </Link>
</div> </div>
</div> </div>

View File

@ -95,18 +95,27 @@ export default function Footer() {
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/classes"> <Link
<a className="text-gray-400 hover:text-white transition duration-300">Private Sessions</a> href="/classes"
className="text-gray-400 hover:text-white transition duration-300"
>
Private Sessions
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/classes"> <Link
<a className="text-gray-400 hover:text-white transition duration-300">Group Classes</a> href="/classes"
className="text-gray-400 hover:text-white transition duration-300"
>
Group Classes
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/classes"> <Link
<a className="text-gray-400 hover:text-white transition duration-300">Special Workshops</a> href="/classes"
className="text-gray-400 hover:text-white transition duration-300"
>
Special Workshops
</Link> </Link>
</li> </li>
</ul> </ul>

View File

@ -8,8 +8,10 @@ export function Logo({ className = "", size = "regular" }: { className?: string,
}; };
return ( return (
<Link href="/"> <Link
<a className={`inline-block ${className}`}> href="/"
className={`inline-block ${className}`}
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 600 100" viewBox="0 0 600 100"
@ -27,7 +29,6 @@ export function Logo({ className = "", size = "regular" }: { className?: string,
Pilates with Fadia Pilates with Fadia
</text> </text>
</svg> </svg>
</a>
</Link> </Link>
); );
} }