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

Improve website design by alternating section background colours 

Updates section background colours, testimonials, and iframe loading in components.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: acaf01d7-65a7-4fc5-901d-853488e196e8
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/5edcf8a8-ba5e-470f-926c-6d357af1afad.jpg
This commit is contained in:
JeffEmmett 2025-05-09 23:55:08 +00:00
parent 780b6ca629
commit d1d13dd658
3 changed files with 70 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/about/about-section.tsx
View File

@ -2,7 +2,7 @@ import { Link } from "wouter";
export function AboutSection() { export function AboutSection() {
return ( return (
<section className="py-20 bg-purple-light"> <section className="py-20 bg-white">
<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="text-center mb-16"> <div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4"> <h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4">

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

@ -14,107 +14,105 @@ export function CommunitySection() {
author: "Sarah H.", author: "Sarah H.",
memberSince: "2021", memberSince: "2021",
initials: "SH", initials: "SH",
color: "teal" as const, color: "teal",
}, },
{ {
quote: "As someone recovering from back surgery, I was hesitant to try Pilates. Fadia's expertise made me feel safe and I've gained strength I never thought possible.", quote: "I've seen incredible improvements in my posture and core strength since joining Fadia's classes. She truly understands how to help each individual.",
author: "Michael K.", author: "Ahmed M.",
memberSince: "2022", memberSince: "2022",
initials: "MK", initials: "AM",
color: "purple" as const, color: "purple",
}, },
{ {
quote: "The community aspect of Pilates with Fadia sets it apart. I've not only improved my physical health but have made wonderful connections with fellow members.", quote: "The mindful approach to movement has helped my chronic back pain tremendously. I look forward to every class!",
author: "Amina L.", author: "Laila K.",
memberSince: "2020", memberSince: "2023",
initials: "AL", initials: "LK",
color: "rose" as const, color: "rose",
}, }
]; ];
// This function would load the actual whiteboard in a real implementation // Handle the iframe loading
// For now, we're simulating the load timing
useEffect(() => { useEffect(() => {
if (user) { if (user) {
const timer = setTimeout(() => { const timer = setTimeout(() => {
setIframeLoaded(true); setIframeLoaded(true);
}, 1000); }, 1500);
return () => clearTimeout(timer); return () => clearTimeout(timer);
} }
}, [user]); }, [user]);
return ( return (
<section className="py-20 bg-rose text-white"> <section className="py-20 bg-purple bg-opacity-10">
<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="text-center mb-16"> <div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-playfair font-semibold mb-4"> <h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4">
Our Community Our Community
</h2> </h2>
<p className="max-w-3xl mx-auto"> <p className="max-w-3xl mx-auto text-gray-600">
A Global Space for Movement & Connection Join our supportive community of like-minded individuals committed to health and wellness.
</p>
<p className="mt-3 max-w-3xl mx-auto text-white text-opacity-80">
Whether you're joining from your living room in Cairo or your studio in Berlin, you're part of a larger collective—a community that values strength, softness, breath, and belonging.
</p> </p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
{testimonials.map((testimonial, index) => ( {testimonials.map((testimonial, index) => (
<Testimonial key={index} {...testimonial} /> <Testimonial
key={index}
quote={testimonial.quote}
author={testimonial.author}
memberSince={testimonial.memberSince}
initials={testimonial.initials}
color={testimonial.color as "teal" | "purple" | "rose"}
/>
))} ))}
</div> </div>
<Card className="bg-white text-gray-800 overflow-hidden"> <div className="mt-10">
<div className="border-b border-gray-200 py-4 px-6"> <h3 className="text-2xl font-playfair font-semibold text-gray-800 text-center mb-8">
<h3 className="font-playfair font-semibold text-xl">Community Digital Whiteboard</h3> Community Whiteboard
</div> </h3>
<CardContent className="p-0"> <Card className="mx-auto max-w-4xl">
<div className="h-96 bg-gray-100 flex items-center justify-center"> <CardContent className="p-6">
{user ? ( <div className="aspect-w-16 aspect-h-9 rounded-md overflow-hidden bg-white">
iframeLoaded ? ( {user ? (
<iframe iframeLoaded ? (
src="https://miro.com/app/board/uXjVKEqwAH8=/" <iframe
title="Community Whiteboard" src="https://excalidraw.com/#room=pilateswithfadia"
className="w-full h-full border-0" title="Community Whiteboard"
/> onLoad={() => setIframeLoaded(true)}
className="w-full h-full border-0"
/>
) : (
<div className="text-center">
<i className="fas fa-spinner fa-spin text-5xl text-gray-400 mb-4"></i>
<p className="text-gray-500">Loading whiteboard content...</p>
</div>
)
) : ( ) : (
<div className="text-center"> <div className="text-center">
<i className="fas fa-spinner fa-spin text-5xl text-gray-400 mb-4"></i> <i className="fas fa-chalkboard text-5xl text-gray-400 mb-4"></i>
<p className="text-gray-500">Loading whiteboard content...</p> <p className="text-gray-500">
Digital whiteboard content will be available after login
</p>
<p className="text-sm text-gray-400 mt-2">
<i className="fas fa-info-circle mr-1"></i> Please sign in to access community features
</p>
</div> </div>
) )}
) : (
<div className="text-center">
<i className="fas fa-chalkboard text-5xl text-gray-400 mb-4"></i>
<p className="text-gray-500">
Digital whiteboard content will be available after login
</p>
<p className="text-sm text-gray-400 mt-2">
<i className="fas fa-info-circle mr-1"></i> Please sign in to access community features
</p>
</div>
)}
</div>
</CardContent>
<div className="p-6 border-t border-gray-200">
<div className="flex flex-col md:flex-row items-center justify-between">
<div className="mb-4 md:mb-0">
<h4 className="font-playfair font-medium text-lg mb-1">Join Our Community</h4>
<p className="text-gray-600 text-sm">Share your journey, ask questions, and connect with others.</p>
</div> </div>
{!user && ( </CardContent>
<Link href="/auth"> </Card>
<span className="bg-rose text-white font-medium py-2 px-6 hover:bg-opacity-90 transition duration-300 cursor-pointer"> </div>
Sign Up to Participate
</span> <div className="text-center mt-12">
</Link> <Link to="/auth">
)} <button className="px-8 py-3 bg-purple text-white font-medium rounded hover:bg-opacity-90 transition duration-300">
</div> {user ? "Access Community Dashboard" : "Join Our Community"}
</div> </button>
</Card> </Link>
</div>
</div> </div>
</section> </section>
); );

2
client/src/components/contact/contact-section.tsx
View File

@ -62,7 +62,7 @@ export function ContactSection() {
}; };
return ( return (
<section className="py-20"> <section className="py-20 bg-white">
<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="text-center mb-16"> <div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4"> <h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4">