From b491b0510afb78f10d36076f915c7c2c83203d13 Mon Sep 17 00:00:00 2001
From: JeffEmmett <20747463-JeffEmmett@users.noreply.replit.com>
Date: Fri, 13 Jun 2025 19:03:24 +0000
Subject: [PATCH] Relocate newsletter signup form next to the descriptive text
 in footer

Refactors Footer.tsx to move the newsletter signup form and remove the two-column layout.

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/d363bed8-0b60-440b-9224-6d0a06f4eb2a.jpg
---
 client/src/components/navigation/footer.tsx | 96 ++++++++++-----------
 1 file changed, 46 insertions(+), 50 deletions(-)

diff --git a/client/src/components/navigation/footer.tsx b/client/src/components/navigation/footer.tsx
index 9ada779..dc16416 100644
--- a/client/src/components/navigation/footer.tsx
+++ b/client/src/components/navigation/footer.tsx
@@ -70,7 +70,51 @@ export default function Footer() {
               className="w-80 mb-4"
               style={{ filter: "brightness(1.1)" }}
             />
-            <p className="text-white text-opacity-80 mb-4">Online pilates classes to help you feel stronger and more connected to your body and breath</p>
+            <p className="text-white text-opacity-80 mb-6">Online pilates classes to help you feel stronger and more connected to your body and breath</p>
+            
+            {/* Newsletter Signup Form */}
+            <div className="mb-6">
+              <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 className="flex space-x-4">
               <a href="https://www.instagram.com/fadia.elgharib/" target="_blank" rel="noopener noreferrer" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300">
                 <i className="fab fa-instagram"></i>
@@ -140,55 +184,7 @@ export default function Footer() {
           </div>
         </div>
         
-        {/* Newsletter Signup Section - 2-column layout aligned right */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
-          <div className="flex items-center">
-            <p className="text-white text-opacity-80 text-sm leading-relaxed">
-              Online pilates classes to help you feel stronger and more connected to your body & breath
-            </p>
-          </div>
-          <div>
-            <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 className="border-t border-white border-opacity-20 pt-8">
           <div className="flex flex-col md:flex-row justify-between items-center">