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

Rearrange footer sections to prioritize links and contact info 

Swaps the order of the newsletter signup and quick links/contact sections in `client/src/components/navigation/footer.tsx`.

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/9313c1d8-a8de-4e0e-b082-5b8ba4924187.jpg
This commit is contained in:
JeffEmmett 2025-06-13 19:12:37 +00:00
parent f90359430a
commit 14c982a21f
1 changed files with 55 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,55 +85,16 @@ export default function Footer() {
</div>
</div>
{/* Newsletter Signup Section spanning columns 2 and 3 */}
{/* Quick Links and Contact at top */}
<div className="md:col-span-2">
<h3 className="font-playfair font-bold text-lg mb-4 text-white">Stay in touch with my newsletter</h3>
<form onSubmit={handleNewsletterSubmit} className="space-y-4">
<input
type="email"
placeholder="Your email address"
className="w-full px-4 py-3 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-sm">I agree to receive emails from Pilates with Fadia</span>
</div>
<button
type="submit"
className="w-full px-6 py-3 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-2 h-4 w-4 animate-spin" />
Subscribing...
</>
) : (
"Subscribe"
)}
</button>
</form>
{/* Quick Links and Contact below newsletter */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8 pt-6 border-t border-white border-opacity-20">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h4 className="font-playfair font-bold text-base mb-3 text-white">Quick Links</h4>
<ul className="space-y-2">
<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 text-sm"
className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300"
>
Book Classes
</Link>
@ -141,7 +102,7 @@ export default function Footer() {
<li>
<Link
href="/about"
className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300 text-sm"
className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300"
>
About Fadia
</Link>
@ -149,7 +110,7 @@ export default function Footer() {
<li>
<Link
href="/community"
className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300 text-sm"
className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300"
>
Community
</Link>
@ -157,7 +118,7 @@ export default function Footer() {
<li>
<Link
href="/contact"
className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300 text-sm"
className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300"
>
Contact
</Link>
@ -166,21 +127,62 @@ export default function Footer() {
</div>
<div>
<h4 className="font-playfair font-bold text-base mb-3 text-white">Contact</h4>
<ul className="space-y-2">
<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 text-sm"></i>
<span className="text-white text-opacity-70 text-sm">Nun Center<br/>Zamalek, Cairo, Egypt</span>
<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 text-sm"></i>
<a href="mailto:hello@pilateswithfadia.com" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300 text-sm">
<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 below links and contact */}
<div className="mt-8 pt-6 border-t border-white border-opacity-20">
<h4 className="font-playfair font-bold text-base mb-4 text-white">Stay in touch with my newsletter</h4>
<form onSubmit={handleNewsletterSubmit} className="space-y-4">
<input
type="email"
placeholder="Your email address"
className="w-full px-4 py-3 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-sm">I agree to receive emails from Pilates with Fadia</span>
</div>
<button
type="submit"
className="w-full px-6 py-3 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-2 h-4 w-4 animate-spin" />
Subscribing...
</>
) : (
"Subscribe"
)}
</button>
</form>
</div>
</div>
</div>