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

Refine newsletter signup form for a more subtle and engaging look 

Updates the newsletter signup form in CommunitySection to improve aesthetics.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 88cd88e4-2dbe-4df6-8c8a-7e38f13ef1ec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/5e810185-aabd-4d28-8820-882a3823aeb4.jpg
This commit is contained in:
JeffEmmett 2025-05-21 12:07:29 +00:00
parent b2f9a7de7d
commit c7cca0ac84
1 changed files with 5 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/community/community-section.tsx
View File

@ -109,21 +109,17 @@ export function CommunitySection() {
</p> </p>
{/* Newsletter Section */} {/* Newsletter Section */}
<div className="max-w-2xl mx-auto bg-white p-8 shadow-sm mb-16"> <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"> <h3 className="text-2xl font-playfair font-semibold mb-4">
Sign up for my Newsletter Sign up for my Newsletter
</h3> </h3>
<p className="max-w-3xl mx-auto mb-8">
Stay updated with wellness tips, special class offerings, and community events
</p>
<form onSubmit={handleNewsletterSubmit}> <form onSubmit={handleNewsletterSubmit}>
<div className="flex flex-col mb-6"> <div className="flex flex-col mb-6">
<label htmlFor="newsletter-email" className="mb-2 text-gray-700 font-medium">Email Address</label>
<input <input
id="newsletter-email" id="newsletter-email"
type="email" type="email"
placeholder="Your email address" placeholder="Your email address"
className="px-4 py-3 bg-white border border-gray-300 placeholder-gray-500 text-gray-800 focus:outline-none focus:border-teal" 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} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
required required
@ -134,7 +130,7 @@ export function CommunitySection() {
<label className="flex items-center cursor-pointer"> <label className="flex items-center cursor-pointer">
<input <input
type="checkbox" type="checkbox"
className="form-checkbox h-4 w-4 border-gray-300 text-teal" className="form-checkbox h-4 w-4 border-gray-300 text-purple"
checked={agreedToTerms} checked={agreedToTerms}
onChange={(e) => setAgreedToTerms(e.target.checked)} onChange={(e) => setAgreedToTerms(e.target.checked)}
required required
@ -145,7 +141,7 @@ export function CommunitySection() {
<button <button
type="submit" type="submit"
className="w-full px-6 py-3 bg-teal text-white font-medium hover:bg-opacity-90 transition duration-300 rounded-full flex items-center justify-center" 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} disabled={newsletterMutation.isPending}
> >
{newsletterMutation.isPending ? ( {newsletterMutation.isPending ? (
@ -154,7 +150,7 @@ export function CommunitySection() {
Subscribing... Subscribing...
</> </>
) : ( ) : (
"Subscribe" "Subscribe for Updates"
)} )}
</button> </button>
</form> </form>