jeffemmett
/
pwf-website-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
JeffEmmett 2025-05-07 02:39:48 +00:00
parent 78958cd6af
commit 1755401f5a
2 changed files with 60 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
client/src/components/navigation/footer.tsx
View File

@ -33,28 +33,43 @@ export default function Footer() {
<h3 className="font-playfair font-bold text-lg mb-4">Quick Links</h3> <h3 className="font-playfair font-bold text-lg mb-4">Quick Links</h3>
<ul className="space-y-3"> <ul className="space-y-3">
<li> <li>
<Link href="/"> <Link
<a className="text-gray-400 hover:text-white transition duration-300">Home</a> href="/"
className="text-gray-400 hover:text-white transition duration-300"
>
Home
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/about"> <Link
<a className="text-gray-400 hover:text-white transition duration-300">About Fadia</a> href="/about"
className="text-gray-400 hover:text-white transition duration-300"
>
About Fadia
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/classes"> <Link
<a className="text-gray-400 hover:text-white transition duration-300">Classes</a> href="/classes"
className="text-gray-400 hover:text-white transition duration-300"
>
Classes
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/community"> <Link
<a className="text-gray-400 hover:text-white transition duration-300">Community</a> href="/community"
className="text-gray-400 hover:text-white transition duration-300"
>
Community
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/contact"> <Link
<a className="text-gray-400 hover:text-white transition duration-300">Contact</a> href="/contact"
className="text-gray-400 hover:text-white transition duration-300"
>
Contact
</Link> </Link>
</li> </li>
</ul> </ul>
@ -64,13 +79,19 @@ export default function Footer() {
<h3 className="font-playfair font-bold text-lg mb-4">Classes</h3> <h3 className="font-playfair font-bold text-lg mb-4">Classes</h3>
<ul className="space-y-3"> <ul className="space-y-3">
<li> <li>
<Link href="/classes"> <Link
<a className="text-gray-400 hover:text-white transition duration-300">Mat Pilates</a> href="/classes"
className="text-gray-400 hover:text-white transition duration-300"
>
Mat Pilates
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/classes"> <Link
<a className="text-gray-400 hover:text-white transition duration-300">Reformer</a> href="/classes"
className="text-gray-400 hover:text-white transition duration-300"
>
Reformer
</Link> </Link>
</li> </li>
<li> <li>

45
client/src/components/navigation/header.tsx
View File

@ -66,15 +66,17 @@ export default function Header() {
</> </>
) : ( ) : (
<> <>
<Link href="/auth"> <Link
<a className="text-teal hover:text-teal-600 transition-colors duration-200 font-raleway font-medium"> href="/auth"
Login className="text-teal hover:text-teal-600 transition-colors duration-200 font-raleway font-medium"
</a> >
Login
</Link> </Link>
<Link href="/auth"> <Link
<a className="bg-teal text-white px-4 py-2 rounded-full hover:bg-opacity-90 transition-colors duration-200 font-raleway font-medium"> href="/auth"
Sign Up className="bg-teal text-white px-4 py-2 rounded-full hover:bg-opacity-90 transition-colors duration-200 font-raleway font-medium"
</a> >
Sign Up
</Link> </Link>
</> </>
)} )}
@ -93,10 +95,11 @@ export default function Header() {
<div className="px-2 pt-2 pb-4 space-y-1 sm:px-3"> <div className="px-2 pt-2 pb-4 space-y-1 sm:px-3">
{navLinks.map((link) => ( {navLinks.map((link) => (
<SheetClose asChild key={link.path}> <SheetClose asChild key={link.path}>
<Link href={link.path}> <Link
<a className={`block px-3 py-2 text-base font-medium ${isActive(link.path)}`}> href={link.path}
{link.name} className={`block px-3 py-2 text-base font-medium ${isActive(link.path)}`}
</a> >
{link.name}
</Link> </Link>
</SheetClose> </SheetClose>
))} ))}
@ -119,17 +122,19 @@ export default function Header() {
) : ( ) : (
<> <>
<SheetClose asChild> <SheetClose asChild>
<Link href="/auth"> <Link
<a className="block px-3 py-2 text-base font-medium text-teal hover:text-teal-600"> href="/auth"
Login className="block px-3 py-2 text-base font-medium text-teal hover:text-teal-600"
</a> >
Login
</Link> </Link>
</SheetClose> </SheetClose>
<SheetClose asChild> <SheetClose asChild>
<Link href="/auth"> <Link
<a className="block px-3 py-2 text-base font-medium text-white bg-teal rounded-full text-center hover:bg-opacity-90"> href="/auth"
Sign Up className="block px-3 py-2 text-base font-medium text-white bg-teal rounded-full text-center hover:bg-opacity-90"
</a> >
Sign Up
</Link> </Link>
</SheetClose> </SheetClose>
</> </>