Showcase client feedback below the instructor bio for greater visibility

Moves testimonials to a new TestimonialsSection component on HomePage and updates testimonial styling in testimonial.tsx.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 88cd88e4-2dbe-4df6-8c8a-7e38f13ef1ec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/d653b197-958c-4eaf-b1c3-758c1d7f8a33.jpg

client/src/components/community/community-section.tsx

@@ -157,18 +157,7 @@ export function CommunitySection() {
           </div>
         </div>
         
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
-          {testimonials.map((testimonial, index) => (
-            <Testimonial
-              key={index}
-              quote={testimonial.quote}
-              author={testimonial.author}
-              memberSince={testimonial.memberSince}
-              initials={testimonial.initials}
-              color={testimonial.color as "teal" | "purple" | "rose"}
-            />
-          ))}
-        </div>
+        {/* Testimonials moved to a separate section */}
         
         <div className="mt-10">
           <h3 className="text-2xl font-playfair font-semibold text-teal text-center mb-8">

client/src/components/community/testimonial.tsx

@@ -8,13 +8,13 @@ interface TestimonialProps {
 
 export function Testimonial({ quote, author, memberSince, initials, color }: TestimonialProps) {
   return (
-    <div className="bg-white p-6 text-left">
+    <div className="bg-transparent text-left">
       <p className="text-gray-700 mb-6 italic">
         "{quote}"
       </p>
       
       <div className="flex items-center">
-        <div className="w-10 h-10 rounded-full flex items-center justify-center mr-3 bg-rose bg-opacity-10 text-rose">
+        <div className={`w-10 h-10 rounded-full flex items-center justify-center mr-3 bg-${color} bg-opacity-20 text-${color}`}>
           <span>{initials}</span>
         </div>
         <div>

client/src/components/testimonials/testimonials-section.tsx

@@ -0,0 +1,56 @@
+import { Testimonial } from "@/components/community/testimonial";
+
+export function TestimonialsSection() {
+  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",
+    }
+  ];
+  
+  return (
+    <section className="py-20 bg-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4">
+            What My Clients Say
+          </h2>
+          <p className="max-w-3xl mx-auto text-gray-600">
+            Read about the experiences and transformations of people who practice with me
+          </p>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {testimonials.map((testimonial, index) => (
+            <div className="bg-purple bg-opacity-10 rounded-lg p-6 shadow-sm transition-transform duration-300 hover:scale-105" key={index}>
+              <Testimonial
+                quote={testimonial.quote}
+                author={testimonial.author}
+                memberSince={testimonial.memberSince}
+                initials={testimonial.initials}
+                color={testimonial.color as "teal" | "purple" | "rose"}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

client/src/pages/home-page.tsx

@@ -2,6 +2,7 @@ import { HeroSection } from "@/components/home/hero-section";
 
 import { AboutSection } from "@/components/about/about-section";
 import { ClassesSection } from "@/components/classes/classes-section";
+import { TestimonialsSection } from "@/components/testimonials/testimonials-section";
 import { CommunitySection } from "@/components/community/community-section";
 import { ContactSection } from "@/components/contact/contact-section";
 import { CTASection } from "@/components/home/cta-section";
@@ -18,6 +19,7 @@ export default function HomePage() {
       <HeroSection />
       <ClassesSection />
       <AboutSection />
+      <TestimonialsSection />
       <CommunitySection />
       <CTASection />
       <ContactSection />