From c064189156d88d43de0070084f86878d5d6e372c Mon Sep 17 00:00:00 2001
From: JeffEmmett <20747463-JeffEmmett@users.noreply.replit.com>
Date: Fri, 13 Jun 2025 17:04:55 +0000
Subject: [PATCH] Move newsletter signup to site footer to improve user
 experience

Relocates the newsletter subscription form from CommunitySection to Footer component.

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/c7e52e19-7db8-4a13-a7ba-edb8cc5749ed.jpg
---
 .../community/community-section.tsx           | 104 +-----------------
 client/src/components/navigation/footer.tsx   |   5 +
 2 files changed, 6 insertions(+), 103 deletions(-)

diff --git a/client/src/components/community/community-section.tsx b/client/src/components/community/community-section.tsx
index a0ca90a..81864d6 100644
--- a/client/src/components/community/community-section.tsx
+++ b/client/src/components/community/community-section.tsx
@@ -1,66 +1,10 @@
 import { useState, useEffect } from "react";
-import { Testimonial } from "./testimonial";
 import { useAuth } from "@/hooks/use-auth";
 import { Link } from "wouter";
-import { Card, CardContent } from "@/components/ui/card";
-import { useMutation } from "@tanstack/react-query";
-import { apiRequest } from "@/lib/queryClient";
-import { useToast } from "@/hooks/use-toast";
-import { Loader2 } from "lucide-react";
 
 export function CommunitySection() {
   const { user } = useAuth();
-  const { toast } = useToast();
   const [iframeLoaded, setIframeLoaded] = useState(false);
-  const [email, setEmail] = useState("");
-  const [agreedToTerms, setAgreedToTerms] = useState(false);
-
-  const newsletterMutation = useMutation({
-    mutationFn: async (newsletterData: { email: string, agreedToTerms: boolean }) => {
-      const res = await apiRequest("POST", "/api/newsletter", newsletterData);
-      return await res.json();
-    },
-    onSuccess: () => {
-      toast({
-        title: "Subscription successful",
-        description: "Thank you for subscribing to our newsletter!",
-      });
-      // Reset form
-      setEmail("");
-      setAgreedToTerms(false);
-    },
-    onError: (error: Error) => {
-      toast({
-        title: "Subscription failed",
-        description: error.message,
-        variant: "destructive",
-      });
-    },
-  });
-
-  const handleNewsletterSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!email) {
-      toast({
-        title: "Email required",
-        description: "Please enter your email address",
-        variant: "destructive",
-      });
-      return;
-    }
-    
-    if (!agreedToTerms) {
-      toast({
-        title: "Consent required",
-        description: "Please agree to receive emails from Pilates with Fadia",
-        variant: "destructive",
-      });
-      return;
-    }
-    
-    newsletterMutation.mutate({ email, agreedToTerms });
-  };
   
   const testimonials = [
     {
@@ -108,53 +52,7 @@ export function CommunitySection() {
             I curate a growing community of like-minded individuals committed to health, wellness, and positive growth.
           </p>
           
-          {/* Newsletter Section */}
-          <div className="max-w-2xl mx-auto bg-transparent p-6 mb-16 border border-purple border-opacity-20 rounded-lg">
-            <h3 className="text-2xl font-playfair font-semibold mb-4">
-              Sign up for my Newsletter
-            </h3>
-            <form onSubmit={handleNewsletterSubmit}>
-              <div className="flex flex-col mb-6">
-                <input 
-                  id="newsletter-email"
-                  type="email" 
-                  placeholder="Your email address" 
-                  className="px-4 py-3 bg-white bg-opacity-80 border border-purple border-opacity-30 placeholder-gray-500 text-gray-800 focus:outline-none focus:border-teal rounded-md"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  required
-                />
-              </div>
-              
-              <div className="mb-6">
-                <label className="flex items-center cursor-pointer">
-                  <input 
-                    type="checkbox" 
-                    className="form-checkbox h-4 w-4 border-gray-300 text-purple"
-                    checked={agreedToTerms}
-                    onChange={(e) => setAgreedToTerms(e.target.checked)}
-                    required
-                  />
-                  <span className="ml-2 text-gray-700">I agree to receive emails from Pilates with Fadia</span>
-                </label>
-              </div>
-              
-              <button 
-                type="submit" 
-                className="w-full px-6 py-3 bg-rose text-white font-medium hover:bg-opacity-90 transition duration-300 rounded-full flex items-center justify-center"
-                disabled={newsletterMutation.isPending}
-              >
-                {newsletterMutation.isPending ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Subscribing...
-                  </>
-                ) : (
-                  "Subscribe for Updates"
-                )}
-              </button>
-            </form>
-          </div>
+
         </div>
         
         {/* Testimonials moved to a separate section */}
diff --git a/client/src/components/navigation/footer.tsx b/client/src/components/navigation/footer.tsx
index a451b64..d80843c 100644
--- a/client/src/components/navigation/footer.tsx
+++ b/client/src/components/navigation/footer.tsx
@@ -1,5 +1,10 @@
 import { Logo } from "@/components/ui/logo";
 import { Link } from "wouter";
+import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { apiRequest } from "@/lib/queryClient";
+import { useToast } from "@/hooks/use-toast";
+import { Loader2 } from "lucide-react";
 import SquareLogo from "@assets/PwF Logo (square).png";
 
 export default function Footer() {