80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { useAuth } from "@/hooks/use-auth";
|
|
import { Link } from "wouter";
|
|
import CommunityImage from "@assets/pilates-community_1749840293503.jpeg";
|
|
|
|
export function CommunitySection() {
|
|
const { user } = useAuth();
|
|
const [iframeLoaded, setIframeLoaded] = useState(false);
|
|
|
|
const testimonials = [
|
|
{
|
|
quote: "Fadia's approach to Pilates has completely transformed my relationship with my body. The community she's built is supportive and encouraging.",
|
|
author: "Sarah H.",
|
|
memberSince: "2021",
|
|
initials: "SH",
|
|
color: "teal",
|
|
},
|
|
{
|
|
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: "Ahmed M.",
|
|
memberSince: "2022",
|
|
initials: "AM",
|
|
color: "purple",
|
|
},
|
|
{
|
|
quote: "The mindful approach to movement has helped my chronic back pain tremendously. I look forward to every class!",
|
|
author: "Laila K.",
|
|
memberSince: "2023",
|
|
initials: "LK",
|
|
color: "rose",
|
|
}
|
|
];
|
|
|
|
// Handle the iframe loading
|
|
useEffect(() => {
|
|
if (user) {
|
|
const timer = setTimeout(() => {
|
|
setIframeLoaded(true);
|
|
}, 1500);
|
|
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [user]);
|
|
|
|
return (
|
|
<section className="py-20" style={{ backgroundColor: 'rgba(157, 94, 155, 0.1)' }}>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-8">
|
|
<h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4">
|
|
Join the Pilates with Fadia Community
|
|
</h2>
|
|
<p className="max-w-3xl mx-auto text-gray-600 mb-6">
|
|
I curate a growing community of like-minded individuals committed to health, wellness, and positive growth.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Testimonials moved to a separate section */}
|
|
|
|
{/* Community Image */}
|
|
<div className="flex justify-center mb-8">
|
|
<img
|
|
src={CommunityImage}
|
|
alt="Pilates Community"
|
|
className="w-full max-w-2xl rounded-lg shadow-lg object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Whiteboard removed from homepage and moved to community page */}
|
|
|
|
<div className="text-center">
|
|
<Link to="/auth">
|
|
<button className="px-8 py-3 bg-rose text-white font-bold rounded-full hover:bg-opacity-90 transition duration-300 shadow-md">
|
|
{user ? "Access Community Dashboard" : "Join My Community"}
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |