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

Enhance visual appeal and user experience across website sections 

Updates section background colors and styles for better aesthetics and readability.

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/d2469624-3470-40cd-96dc-7a41833cdec1.jpg
This commit is contained in:
JeffEmmett 2025-05-09 23:56:35 +00:00
parent d1d13dd658
commit 82d2fcce67
2 changed files with 43 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
client/src/components/classes/classes-section.tsx
View File

@ -18,65 +18,26 @@ export function ClassesSection() {
const handleBookClick = (classId: number) => { const handleBookClick = (classId: number) => {
setSelectedClassId(classId); setSelectedClassId(classId);
const element = document.getElementById('booking-calendar');
// Scroll to booking calendar if (element) {
const bookingCalendar = document.getElementById("booking-calendar"); element.scrollIntoView({ behavior: 'smooth' });
if (bookingCalendar) {
bookingCalendar.scrollIntoView({ behavior: "smooth" });
} }
}; };
if (error) {
return (
<div className="py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<p className="text-red-500">Error loading classes. Please try again later.</p>
</div>
</div>
);
}
return ( return (
<section className="py-20 bg-rose-light"> <section className="py-20 bg-teal 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 text-gray-800 mb-4"> <h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4">
Class Offerings Our Classes
</h2> </h2>
<p className="max-w-3xl mx-auto text-gray-600"> <p className="max-w-3xl mx-auto text-gray-600">
Choose from our variety of class options designed to match your individual needs Join our supportive, personalized classes where you'll discover strength, flexibility, and mindfulness.
</p> </p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-5 gap-6 mb-16"> <div className="bg-white p-6 md:p-8 rounded-lg mb-16 border border-gray-100">
<div className="text-center p-6 bg-white"> <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
<h3 className="font-playfair text-lg font-semibold text-rose mb-3">Mat Pilates</h3>
<p className="text-sm text-gray-600">Foundational strength, posture, and mobility</p>
</div>
<div className="text-center p-6 bg-white">
<h3 className="font-playfair text-lg font-semibold text-rose mb-3">Reformer & Equipment</h3>
<p className="text-sm text-gray-600">Deeper resistance, alignment, and control</p>
</div>
<div className="text-center p-6 bg-white">
<h3 className="font-playfair text-lg font-semibold text-rose mb-3">Beginner Foundations</h3>
<p className="text-sm text-gray-600">For those new to movement or Pilates</p>
</div>
<div className="text-center p-6 bg-white">
<h3 className="font-playfair text-lg font-semibold text-rose mb-3">Live Online Classes</h3>
<p className="text-sm text-gray-600">Accessible from anywhere</p>
</div>
<div className="text-center p-6 bg-white">
<h3 className="font-playfair text-lg font-semibold text-rose mb-3">Workshops & Events</h3>
<p className="text-sm text-gray-600">Special themed sessions and gatherings</p>
</div>
</div>
<div className="p-8 bg-white mb-16">
<div className="flex flex-col md:flex-row items-center justify-between">
<div> <div>
<h3 className="font-playfair text-xl font-semibold text-gray-800 mb-3"> <h3 className="font-playfair text-xl font-semibold text-gray-800 mb-3">
✨ In-Person Classes ✨ In-Person Classes
@ -98,37 +59,48 @@ export function ClassesSection() {
<div className="p-6"> <div className="p-6">
<div className="flex justify-between items-center mb-3"> <div className="flex justify-between items-center mb-3">
<Skeleton className="h-6 w-32" /> <Skeleton className="h-6 w-32" />
<Skeleton className="h-5 w-16 rounded-full" /> <Skeleton className="h-6 w-20" />
</div> </div>
<Skeleton className="h-4 w-full my-2" /> <Skeleton className="h-4 w-full mb-2" />
<Skeleton className="h-4 w-full my-2" /> <Skeleton className="h-4 w-full mb-2" />
<Skeleton className="h-4 w-3/4 my-2" /> <Skeleton className="h-4 w-3/4 mb-4" />
<div className="flex justify-between items-center mt-4"> <Skeleton className="h-8 w-24 mt-4" />
<Skeleton className="h-4 w-24" />
<Skeleton className="h-4 w-20" />
</div>
<Skeleton className="h-10 w-full mt-4 rounded-md" />
</div> </div>
</div> </div>
))} ))}
</div> </div>
) : error ? (
<div className="text-center text-red-500">
<p>Error loading classes. Please try again later.</p>
</div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{classes?.map(classItem => ( {classes?.map((classData) => (
<ClassCard <ClassCard
key={classItem.id} key={classData.id}
classData={classItem} classData={classData}
onBookClick={handleBookClick} onBookClick={handleBookClick}
/> />
))} ))}
</div> </div>
)} )}
<div id="booking-calendar" className="pt-8"> {selectedClass && (
{selectedClass && ( <div id="booking-calendar" className="mt-20 pt-10 border-t border-gray-200">
<h3 className="text-2xl font-playfair font-semibold text-center mb-8">
Book Your {selectedClass.name} Class
</h3>
<BookingCalendar selectedClass={selectedClass} /> <BookingCalendar selectedClass={selectedClass} />
)} <div className="text-center mt-8">
</div> <button
onClick={() => setSelectedClassId(null)}
className="px-6 py-2 text-gray-600 hover:text-gray-900 border border-gray-300 hover:border-gray-500 transition-colors"
>
Cancel
</button>
</div>
</div>
)}
</div> </div>
</section> </section>
); );

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

@ -58,7 +58,7 @@ export function NewsletterSection() {
}; };
return ( return (
<section className="py-20 bg-teal text-white"> <section className="py-20 bg-rose bg-opacity-10 text-gray-800">
<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 mb-4">
@ -70,14 +70,14 @@ export function NewsletterSection() {
</div> </div>
<div className="max-w-2xl mx-auto"> <div className="max-w-2xl mx-auto">
<form className="bg-white/10 p-8" onSubmit={handleSubmit}> <form className="bg-white p-8 shadow-sm" onSubmit={handleSubmit}>
<div className="flex flex-col mb-6"> <div className="flex flex-col mb-6">
<label htmlFor="email" className="mb-2 text-white font-medium">Email Address</label> <label htmlFor="email" className="mb-2 text-gray-700 font-medium">Email Address</label>
<input <input
id="email" id="email"
type="email" type="email"
placeholder="Your email address" placeholder="Your email address"
className="px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 placeholder-white placeholder-opacity-60 text-white focus:outline-none focus:border-white" className="px-4 py-3 bg-white border border-gray-300 placeholder-gray-500 text-gray-800 focus:outline-none focus:border-rose"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
required required
@ -88,18 +88,18 @@ export function NewsletterSection() {
<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-white text-teal" className="form-checkbox h-4 w-4 border-gray-300 text-rose"
checked={agreedToTerms} checked={agreedToTerms}
onChange={(e) => setAgreedToTerms(e.target.checked)} onChange={(e) => setAgreedToTerms(e.target.checked)}
required required
/> />
<span className="ml-2 text-white">I agree to receive emails from Pilates with Fadia</span> <span className="ml-2 text-gray-700">I agree to receive emails from Pilates with Fadia</span>
</label> </label>
</div> </div>
<button <button
type="submit" type="submit"
className="w-full px-6 py-3 bg-white text-teal font-medium hover:bg-opacity-90 transition duration-300 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 flex items-center justify-center"
disabled={newsletterMutation.isPending} disabled={newsletterMutation.isPending}
> >
{newsletterMutation.isPending ? ( {newsletterMutation.isPending ? (