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

Improve the footer design to enhance the visual appeal of the website 

Updates the footer's background color to teal and adjusts text/border opacity in `client/src/components/navigation/footer.tsx`.

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/4df51e04-21f4-4f5c-8eeb-0064e7d1ea88.jpg
This commit is contained in:
JeffEmmett 2025-05-10 00:20:00 +00:00
parent b6519b193a
commit 11c52e407d
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,25 +5,25 @@ export default function Footer() {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
return ( return (
<footer className="bg-gray-900 text-white py-12"> <footer className="bg-teal text-white py-12">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8"> <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div> <div>
<Logo className="mb-4" /> <Logo className="mb-4" />
<p className="text-gray-400 mb-4"> <p className="text-white text-opacity-80 mb-4">
Transforming bodies and minds through the art of Pilates with a touch of cultural elegance. Transforming bodies and minds through the art of Pilates with a touch of cultural elegance.
</p> </p>
<div className="flex space-x-4"> <div className="flex space-x-4">
<a href="#" className="text-gray-400 hover:text-white transition duration-300"> <a href="#" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300">
<i className="fab fa-instagram"></i> <i className="fab fa-instagram"></i>
</a> </a>
<a href="#" className="text-gray-400 hover:text-white transition duration-300"> <a href="#" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300">
<i className="fab fa-facebook-f"></i> <i className="fab fa-facebook-f"></i>
</a> </a>
<a href="#" className="text-gray-400 hover:text-white transition duration-300"> <a href="#" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300">
<i className="fab fa-youtube"></i> <i className="fab fa-youtube"></i>
</a> </a>
<a href="#" className="text-gray-400 hover:text-white transition duration-300"> <a href="#" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300">
<i className="fab fa-twitter"></i> <i className="fab fa-twitter"></i>
</a> </a>
</div> </div>
@ -35,7 +35,7 @@ export default function Footer() {
<li> <li>
<Link <Link
href="/" href="/"
className="text-gray-400 hover:text-white transition duration-300" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300"
> >
Home Home
</Link> </Link>
@ -144,14 +144,14 @@ export default function Footer() {
</div> </div>
</div> </div>
<div className="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> <div className="border-t border-white border-opacity-20 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p className="text-gray-400 text-sm mb-4 md:mb-0"> <p className="text-white text-opacity-70 text-sm mb-4 md:mb-0">
&copy; {currentYear} Pilates with Fadia. All rights reserved. &copy; {currentYear} Pilates with Fadia. All rights reserved.
</p> </p>
<div className="flex space-x-6"> <div className="flex space-x-6">
<a href="#" className="text-gray-400 hover:text-white text-sm transition duration-300">Privacy Policy</a> <a href="#" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 text-sm transition duration-300">Privacy Policy</a>
<a href="#" className="text-gray-400 hover:text-white text-sm transition duration-300">Terms of Service</a> <a href="#" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 text-sm transition duration-300">Terms of Service</a>
<a href="#" className="text-gray-400 hover:text-white text-sm transition duration-300">Cookie Policy</a> <a href="#" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 text-sm transition duration-300">Cookie Policy</a>
</div> </div>
</div> </div>
</div> </div>