Reposition newsletter signup form to improve footer layout and appearance
Relocates the newsletter signup form in `footer.tsx` and adjusts grid column layout to better utilize space. 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/81f751bc-a3ac-4824-a738-5842236b1863.jpg
This commit is contained in:
parent
90c074dd6f
commit
5db99446ca
|
|
@ -62,7 +62,7 @@ export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer className="bg-teal text-white py-12">
|
<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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
<div>
|
<div>
|
||||||
<img
|
<img
|
||||||
src={SquareLogo}
|
src={SquareLogo}
|
||||||
|
|
@ -120,10 +120,51 @@ export default function Footer() {
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
{/* Newsletter Signup Section - Below Quick Links */}
|
||||||
|
<div className="mt-8 pt-6 border-t border-white border-opacity-20">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-playfair font-bold text-lg mb-4 text-white">Contact</h3>
|
<h3 className="font-playfair font-bold text-lg mb-4 text-white">Contact</h3>
|
||||||
<ul className="space-y-3">
|
<ul className="space-y-3">
|
||||||
|
|
@ -139,49 +180,6 @@ export default function Footer() {
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Newsletter Signup Section */}
|
|
||||||
<div>
|
|
||||||
<h3 className="font-playfair font-bold text-lg mb-4 text-white">
|
|
||||||
Newsletter Signup
|
|
||||||
</h3>
|
|
||||||
<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>
|
||||||
|
|
||||||
<div className="border-t border-white border-opacity-20 pt-8">
|
<div className="border-t border-white border-opacity-20 pt-8">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue