From 11c52e407dd188e9ee204c3ea3625c62aa1052b2 Mon Sep 17 00:00:00 2001
From: JeffEmmett <20747463-JeffEmmett@users.noreply.replit.com>
Date: Sat, 10 May 2025 00:20:00 +0000
Subject: [PATCH] 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
---
 client/src/components/navigation/footer.tsx | 24 ++++++++++-----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/client/src/components/navigation/footer.tsx b/client/src/components/navigation/footer.tsx
index 69b9a65..9aa5cd5 100644
--- a/client/src/components/navigation/footer.tsx
+++ b/client/src/components/navigation/footer.tsx
@@ -5,25 +5,25 @@ export default function Footer() {
   const currentYear = new Date().getFullYear();
   
   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="grid grid-cols-1 md:grid-cols-4 gap-8">
           <div>
             <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.
             </p>
             <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>
               </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>
               </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>
               </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>
               </a>
             </div>
@@ -35,7 +35,7 @@ export default function Footer() {
               <li>
                 <Link 
                   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
                 </Link>
@@ -144,14 +144,14 @@ export default function Footer() {
           </div>
         </div>
         
-        <div className="border-t border-gray-800 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">
+        <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-white text-opacity-70 text-sm mb-4 md:mb-0">
             &copy; {currentYear} Pilates with Fadia. All rights reserved.
           </p>
           <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-gray-400 hover:text-white 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">Privacy Policy</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-white text-opacity-70 hover:text-white hover:text-opacity-100 text-sm transition duration-300">Cookie Policy</a>
           </div>
         </div>
       </div>