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
This commit is contained in:
parent
b84816e026
commit
c064189156
|
|
@ -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 */}
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue