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
parent
d1d13dd658
commit
82d2fcce67
|
|
@ -18,65 +18,26 @@ export function ClassesSection() {
|
|||
|
||||
const handleBookClick = (classId: number) => {
|
||||
setSelectedClassId(classId);
|
||||
|
||||
// Scroll to booking calendar
|
||||
const bookingCalendar = document.getElementById("booking-calendar");
|
||||
if (bookingCalendar) {
|
||||
bookingCalendar.scrollIntoView({ behavior: "smooth" });
|
||||
const element = document.getElementById('booking-calendar');
|
||||
if (element) {
|
||||
element.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 (
|
||||
<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="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4">
|
||||
Class Offerings
|
||||
Our Classes
|
||||
</h2>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-5 gap-6 mb-16">
|
||||
<div className="text-center p-6 bg-white">
|
||||
<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 className="bg-white p-6 md:p-8 rounded-lg mb-16 border border-gray-100">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center">
|
||||
<div>
|
||||
<h3 className="font-playfair text-xl font-semibold text-gray-800 mb-3">
|
||||
✨ In-Person Classes
|
||||
|
|
@ -98,37 +59,48 @@ export function ClassesSection() {
|
|||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<Skeleton className="h-6 w-32" />
|
||||
<Skeleton className="h-5 w-16 rounded-full" />
|
||||
<Skeleton className="h-6 w-20" />
|
||||
</div>
|
||||
<Skeleton className="h-4 w-full my-2" />
|
||||
<Skeleton className="h-4 w-full my-2" />
|
||||
<Skeleton className="h-4 w-3/4 my-2" />
|
||||
<div className="flex justify-between items-center 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" />
|
||||
<Skeleton className="h-4 w-full mb-2" />
|
||||
<Skeleton className="h-4 w-full mb-2" />
|
||||
<Skeleton className="h-4 w-3/4 mb-4" />
|
||||
<Skeleton className="h-8 w-24 mt-4" />
|
||||
</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">
|
||||
{classes?.map(classItem => (
|
||||
{classes?.map((classData) => (
|
||||
<ClassCard
|
||||
key={classItem.id}
|
||||
classData={classItem}
|
||||
onBookClick={handleBookClick}
|
||||
key={classData.id}
|
||||
classData={classData}
|
||||
onBookClick={handleBookClick}
|
||||
/>
|
||||
))}
|
||||
</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} />
|
||||
)}
|
||||
</div>
|
||||
<div className="text-center mt-8">
|
||||
<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>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export function NewsletterSection() {
|
|||
};
|
||||
|
||||
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="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-playfair font-semibold mb-4">
|
||||
|
|
@ -70,14 +70,14 @@ export function NewsletterSection() {
|
|||
</div>
|
||||
|
||||
<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">
|
||||
<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
|
||||
id="email"
|
||||
type="email"
|
||||
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}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
|
|
@ -88,18 +88,18 @@ export function NewsletterSection() {
|
|||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
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}
|
||||
onChange={(e) => setAgreedToTerms(e.target.checked)}
|
||||
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>
|
||||
</div>
|
||||
|
||||
<button
|
||||
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}
|
||||
>
|
||||
{newsletterMutation.isPending ? (
|
||||
|
|
|
|||
Loading…
Reference in New Issue