209 lines
8.5 KiB
TypeScript
209 lines
8.5 KiB
TypeScript
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() {
|
|
const currentYear = new Date().getFullYear();
|
|
const { toast } = useToast();
|
|
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!",
|
|
});
|
|
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 });
|
|
};
|
|
|
|
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-3 gap-8">
|
|
<div>
|
|
<img
|
|
src={SquareLogo}
|
|
alt="Pilates with Fadia"
|
|
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>
|
|
<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>
|
|
</a>
|
|
<a href="https://www.youtube.com/channel/UCUbMEjCowuRroSFzkP31Jlw" 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-youtube"></i>
|
|
</a>
|
|
<a href="https://www.momoyoga.com/pilates-with-fadia/schedule" target="_blank" rel="noopener noreferrer" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300">
|
|
<i className="fas fa-calendar-alt"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-playfair font-bold text-lg mb-4 text-white">Quick Links</h3>
|
|
<ul className="space-y-3">
|
|
<li>
|
|
<Link
|
|
href="/calendar"
|
|
className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300"
|
|
>
|
|
Book Classes
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/about"
|
|
className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300"
|
|
>
|
|
About Fadia
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/community"
|
|
className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300"
|
|
>
|
|
Community
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/contact"
|
|
className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300"
|
|
>
|
|
Contact
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
<div className="mt-6 pt-6 border-t border-white border-opacity-20"></div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-playfair font-bold text-lg mb-4 text-white">Contact</h3>
|
|
<ul className="space-y-3">
|
|
<li className="flex items-start">
|
|
<i className="fas fa-map-marker-alt mt-1 mr-2 text-white"></i>
|
|
<span className="text-white text-opacity-70">Nun Center<br/>Zamalek, Cairo, Egypt</span>
|
|
</li>
|
|
<li className="flex items-center">
|
|
<i className="fas fa-envelope mr-2 text-white"></i>
|
|
<a href="mailto:hello@pilateswithfadia.com" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300">
|
|
hello@pilateswithfadia.com
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</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">
|
|
<p className="text-white text-opacity-70 text-sm mb-4 md:mb-0">
|
|
© {currentYear} Pilates with Fadia. All rights reserved.
|
|
</p>
|
|
<div className="flex space-x-6">
|
|
<a href="#" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 text-sm transition duration-300">Privacy Policy</a>
|
|
<a href="#" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 text-sm transition duration-300">Terms of Service</a>
|
|
<a href="#" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 text-sm transition duration-300">Cookie Policy</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|