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 { useState, useEffect } from "react";
|
||||||
import { Testimonial } from "./testimonial";
|
|
||||||
import { useAuth } from "@/hooks/use-auth";
|
import { useAuth } from "@/hooks/use-auth";
|
||||||
import { Link } from "wouter";
|
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() {
|
export function CommunitySection() {
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const { toast } = useToast();
|
|
||||||
const [iframeLoaded, setIframeLoaded] = useState(false);
|
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 = [
|
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.
|
I curate a growing community of like-minded individuals committed to health, wellness, and positive growth.
|
||||||
</p>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* Testimonials moved to a separate section */}
|
{/* Testimonials moved to a separate section */}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,10 @@
|
||||||
import { Logo } from "@/components/ui/logo";
|
import { Logo } from "@/components/ui/logo";
|
||||||
import { Link } from "wouter";
|
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";
|
import SquareLogo from "@assets/PwF Logo (square).png";
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue