jeffemmett
/
pwf-website-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move newsletter signup form to improve visibility in the website footer 

Relocates the newsletter signup section in `footer.tsx` to enhance user engagement.

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/a7cb0376-4a32-423d-ac1a-13c67a926276.jpg
This commit is contained in:
JeffEmmett 2025-06-13 18:42:54 +00:00
parent 81e6826de9
commit 56ed81ae55
1 changed files with 46 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
client/src/components/navigation/footer.tsx
View File

@ -141,62 +141,56 @@ export default function Footer() {
</div> </div>
</div> </div>
<div className="border-t border-white border-opacity-20 mt-12 pt-8"> {/* Newsletter Signup Section */}
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6"> <div className="border-t border-white border-opacity-20 mt-12 pt-8 pb-8">
<div className="flex-1"> <div className="max-w-sm mx-auto text-center">
<p className="text-white text-opacity-70 text-sm mb-4 lg:mb-0"> <h4 className="text-lg font-playfair font-semibold mb-3 text-white">
&copy; {currentYear} Pilates with Fadia. All rights reserved. Newsletter Signup
</p> </h4>
<p className="text-white text-opacity-70 text-sm"> <form onSubmit={handleNewsletterSubmit} className="space-y-3">
Online pilates classes and in-person sessions in Cairo, Egypt. <input
</p> type="email"
</div> 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"
{/* Newsletter Signup - Compact Version */} value={email}
<div className="w-full lg:w-80"> onChange={(e) => setEmail(e.target.value)}
<h4 className="text-sm font-playfair font-semibold mb-2 text-white"> required
Newsletter Signup />
</h4>
<form onSubmit={handleNewsletterSubmit} className="space-y-2"> <div className="flex items-center justify-center gap-2">
<input <input
type="email" type="checkbox"
placeholder="Your email address" className="flex-shrink-0"
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" checked={agreedToTerms}
value={email} onChange={(e) => setAgreedToTerms(e.target.checked)}
onChange={(e) => setEmail(e.target.value)}
required required
/> />
<span className="text-white text-opacity-80 text-xs">I agree to receive emails from Pilates with Fadia</span>
<div className="flex items-start gap-2"> </div>
<input
type="checkbox" <button
className="mt-1 flex-shrink-0" type="submit"
checked={agreedToTerms} 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"
onChange={(e) => setAgreedToTerms(e.target.checked)} disabled={newsletterMutation.isPending}
required >
/> {newsletterMutation.isPending ? (
<span className="text-white text-opacity-80 text-xs">I agree to receive emails from Pilates with Fadia</span> <>
</div> <Loader2 className="mr-1 h-3 w-3 animate-spin" />
Subscribing...
<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" "Subscribe"
disabled={newsletterMutation.isPending} )}
> </button>
{newsletterMutation.isPending ? ( </form>
<>
<Loader2 className="mr-1 h-3 w-3 animate-spin" />
Subscribing...
</>
) : (
"Subscribe"
)}
</button>
</form>
</div>
</div> </div>
</div>
<div className="flex flex-col md:flex-row justify-center items-center mt-6 pt-4 border-t border-white border-opacity-10">
<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">
&copy; {currentYear} Pilates with Fadia. All rights reserved.
</p>
<div className="flex space-x-6"> <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">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">Terms of Service</a>