From 5db99446ca9a50b3f6e55b1d4fbdab5c55a81b7c Mon Sep 17 00:00:00 2001
From: JeffEmmett <20747463-JeffEmmett@users.noreply.replit.com>
Date: Fri, 13 Jun 2025 18:52:55 +0000
Subject: [PATCH] Reposition newsletter signup form to improve footer layout
 and appearance

Relocates the newsletter signup form in `footer.tsx` and adjusts grid column layout to better utilize space.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d004b9e1-f9be-46e2-acda-f440ccd644a9
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/81f751bc-a3ac-4824-a738-5842236b1863.jpg
---
 client/src/components/navigation/footer.tsx | 90 ++++++++++-----------
 1 file changed, 44 insertions(+), 46 deletions(-)

diff --git a/client/src/components/navigation/footer.tsx b/client/src/components/navigation/footer.tsx
index 3619f2d..06ea12b 100644
--- a/client/src/components/navigation/footer.tsx
+++ b/client/src/components/navigation/footer.tsx
@@ -62,7 +62,7 @@ export default function Footer() {
   return (
     <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 className="grid grid-cols-1 md:grid-cols-3 gap-8">
           <div>
             <img 
               src={SquareLogo} 
@@ -120,10 +120,51 @@ export default function Footer() {
                 </Link>
               </li>
             </ul>
+            
+            {/* Newsletter Signup Section - Below Quick Links */}
+            <div className="mt-8 pt-6 border-t border-white border-opacity-20">
+              <h4 className="font-playfair font-bold text-base mb-3 text-white">
+                Newsletter Signup
+              </h4>
+              <form onSubmit={handleNewsletterSubmit} className="space-y-3">
+                <input 
+                  type="email" 
+                  placeholder="Your email address" 
+                  className="w-full px-3 py-2 text-sm bg-white bg-opacity-90 border border-white border-opacity-30 placeholder-gray-500 text-gray-800 focus:outline-none focus:border-white rounded-md"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                />
+                
+                <div className="flex items-start gap-2">
+                  <input 
+                    type="checkbox" 
+                    className="mt-1 flex-shrink-0"
+                    checked={agreedToTerms}
+                    onChange={(e) => setAgreedToTerms(e.target.checked)}
+                    required
+                  />
+                  <span className="text-white text-opacity-80 text-xs">I agree to receive emails from Pilates with Fadia</span>
+                </div>
+                
+                <button 
+                  type="submit" 
+                  className="w-full px-4 py-2 text-sm bg-purple text-white font-bold hover:bg-opacity-90 transition duration-300 rounded-full flex items-center justify-center"
+                  disabled={newsletterMutation.isPending}
+                >
+                  {newsletterMutation.isPending ? (
+                    <>
+                      <Loader2 className="mr-1 h-3 w-3 animate-spin" />
+                      Subscribing...
+                    </>
+                  ) : (
+                    "Subscribe"
+                  )}
+                </button>
+              </form>
+            </div>
           </div>
           
-
-          
           <div>
             <h3 className="font-playfair font-bold text-lg mb-4 text-white">Contact</h3>
             <ul className="space-y-3">
@@ -139,49 +180,6 @@ export default function Footer() {
               </li>
             </ul>
           </div>
-
-          {/* Newsletter Signup Section */}
-          <div>
-            <h3 className="font-playfair font-bold text-lg mb-4 text-white">
-              Newsletter Signup
-            </h3>
-            <form onSubmit={handleNewsletterSubmit} className="space-y-3">
-              <input 
-                type="email" 
-                placeholder="Your email address" 
-                className="w-full px-3 py-2 text-sm bg-white bg-opacity-90 border border-white border-opacity-30 placeholder-gray-500 text-gray-800 focus:outline-none focus:border-white rounded-md"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-              />
-              
-              <div className="flex items-start gap-2">
-                <input 
-                  type="checkbox" 
-                  className="mt-1 flex-shrink-0"
-                  checked={agreedToTerms}
-                  onChange={(e) => setAgreedToTerms(e.target.checked)}
-                  required
-                />
-                <span className="text-white text-opacity-80 text-xs">I agree to receive emails from Pilates with Fadia</span>
-              </div>
-              
-              <button 
-                type="submit" 
-                className="w-full px-4 py-2 text-sm bg-purple text-white font-bold hover:bg-opacity-90 transition duration-300 rounded-full flex items-center justify-center"
-                disabled={newsletterMutation.isPending}
-              >
-                {newsletterMutation.isPending ? (
-                  <>
-                    <Loader2 className="mr-1 h-3 w-3 animate-spin" />
-                    Subscribing...
-                  </>
-                ) : (
-                  "Subscribe"
-                )}
-              </button>
-            </form>
-          </div>
         </div>
         
         <div className="border-t border-white border-opacity-20 pt-8">