Enhance community features and newsletter signup with visual improvements

Updates community section testimonials, newsletter design, and imports/adds section dividers.

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/d7fc08fa-d3ab-4a73-a920-a0982caef9d7.jpg

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

@@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
 import { Testimonial } from "./testimonial";
 import { useAuth } from "@/hooks/use-auth";
 import { Link } from "wouter";
-import { ArabicDecoration } from "@/components/ui/arabic-decoration";
 import { Card, CardContent } from "@/components/ui/card";
 import { SectionDivider, SectionDividerBottom, StarDivider } from "@/components/ui/section-divider";
 import { IslamicPattern } from "@/components/ui/section-divider";
@@ -17,21 +16,21 @@ export function CommunitySection() {
       author: "Sarah H.",
       memberSince: "2021",
       initials: "SH",
-      color: "teal",
+      color: "teal" as const,
     },
     {
       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.",
       author: "Michael K.",
       memberSince: "2022",
       initials: "MK",
-      color: "purple",
+      color: "purple" as const,
     },
     {
       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.",
       author: "Amina L.",
       memberSince: "2020",
       initials: "AL",
-      color: "rose",
+      color: "rose" as const,
     },
   ];
   
@@ -48,13 +47,32 @@ export function CommunitySection() {
   }, [user]);
 
   return (
-    <section id="community" className="py-16 bg-gray-50">
+    <section className="relative overflow-hidden">
+      <SectionDivider color="rose" />
+      
+      <div className="relative py-20 bg-rose">
+        <IslamicPattern color="rose" opacity={15} />
+        
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
-          <ArabicDecoration>
+            <h2 className="text-3xl md:text-4xl font-playfair font-bold text-white relative inline-block">
-            <h2 className="text-3xl md:text-4xl font-playfair font-bold text-gray-800">Our Community</h2>
+              <span className="relative z-10">Our Community</span>
-          </ArabicDecoration>
+              <div className="absolute -bottom-3 left-0 w-full h-1 bg-white opacity-30"></div>
-          <p className="mt-8 max-w-3xl mx-auto text-gray-600">
+            </h2>
+            <div className="flex items-center justify-center py-6">
+              <div className="w-1/3 h-px bg-white opacity-30"></div>
+              <div className="mx-4">
+                <svg width="40" height="40" viewBox="0 0 100 100">
+                  <polygon
+                    points="50,10 61,35 90,35 65,55 75,80 50,65 25,80 35,55 10,35 39,35"
+                    fill="#FFFFFF"
+                    fillOpacity="0.8"
+                  />
+                </svg>
+              </div>
+              <div className="w-1/3 h-px bg-white opacity-30"></div>
+            </div>
+            <p className="mt-6 max-w-3xl mx-auto text-white text-opacity-90">
               Connect with like-minded individuals on your wellness journey through our digital community board.
             </p>
           </div>
@@ -101,9 +119,9 @@ export function CommunitySection() {
                 </div>
                 {!user && (
                   <Link href="/auth">
-                  <a className="bg-purple text-white font-medium py-2 px-6 rounded-full hover:bg-opacity-90 transition duration-300">
+                    <span className="bg-rose text-white font-medium py-2 px-6 rounded-full hover:bg-opacity-90 transition duration-300 cursor-pointer">
                       Sign Up to Participate
-                  </a>
+                    </span>
                   </Link>
                 )}
               </div>
@@ -118,6 +136,9 @@ export function CommunitySection() {
             </div>
           </div>
         </div>
+      </div>
+      
+      <SectionDividerBottom color="rose" />
     </section>
   );
 }

client/src/components/community/testimonial.tsx

@@ -26,19 +26,30 @@ export function Testimonial({ quote, author, memberSince, initials, color }: Tes
   };
 
   return (
-    <div className="bg-white p-6 rounded-lg shadow-md relative">
+    <div className="bg-white p-6 rounded-lg shadow-lg relative overflow-hidden">
-      <div className="absolute top-0 right-0 transform translate-x-2 -translate-y-2 text-4xl">
+      <div className="absolute -top-4 -right-4 w-16 h-16 opacity-10">
-        <i className={`fas fa-quote-right ${colorClasses[color].opacity}`}></i>
+        <svg viewBox="0 0 100 100" className="w-full h-full">
+          <path 
+            d="M95,30 L85,10 C80,0 65,0 60,10 L50,30 L40,10 C35,0 20,0 15,10 L5,30 C0,40 5,50 15,55 L50,70 L85,55 C95,50 100,40 95,30z" 
+            fill={color === "teal" ? "#0c8991" : color === "purple" ? "#9D5E9B" : "#B55076"} 
+          />
+        </svg>
       </div>
-      <p className="text-gray-600 mb-4 italic">
+      
+      <div className="mb-6 text-right">
+        <i className={`fas fa-quote-right text-4xl ${colorClasses[color].opacity}`}></i>
+      </div>
+      
+      <p className="text-gray-700 mb-6 italic relative z-10 font-raleway">
         "{quote}"
       </p>
-      <div className="flex items-center">
+      
-        <div className={`w-10 h-10 ${colorClasses[color].bg} rounded-full flex items-center justify-center mr-3`}>
+      <div className="flex items-center border-t pt-4 border-gray-100">
+        <div className={`w-12 h-12 rounded-full flex items-center justify-center mr-3 bg-white border-2 ${color === "teal" ? "border-teal" : color === "purple" ? "border-purple" : "border-rose"}`}>
           <span className={`${colorClasses[color].text} font-semibold`}>{initials}</span>
         </div>
         <div>
-          <h5 className="font-medium">{author}</h5>
+          <h5 className="font-playfair font-medium">{author}</h5>
           <p className="text-sm text-gray-500">Member since {memberSince}</p>
         </div>
       </div>

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

@@ -4,6 +4,8 @@ import { apiRequest } from "@/lib/queryClient";
 import { insertNewsletterSchema } from "@shared/schema";
 import { useToast } from "@/hooks/use-toast";
 import { Loader2 } from "lucide-react";
+import { SectionDivider, SectionDividerBottom, CrescentDivider } from "@/components/ui/section-divider";
+import { IslamicPattern } from "@/components/ui/section-divider";
 
 export function NewsletterSection() {
   const { toast } = useToast();
@@ -58,15 +60,39 @@ export function NewsletterSection() {
   };
 
   return (
-    <section className="py-16 bg-teal text-white">
+    <section className="relative overflow-hidden">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <SectionDivider color="teal" />
-        <div className="flex flex-col md:flex-row items-center justify-between">
-          <div className="md:w-1/2 mb-8 md:mb-0 md:pr-10">
-            <h2 className="text-3xl font-playfair font-bold mb-4">Join Our Newsletter</h2>
-            <p className="text-teal-100 mb-4">
-              Stay updated with wellness tips, special class offerings, and community events. We promise to respect your inbox.
-            </p>
       
+      <div className="relative py-20 bg-teal text-white">
+        <IslamicPattern color="teal" opacity={10} />
+        
+        <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-bold text-white relative inline-block">
+              <span className="relative z-10">Join Our Newsletter</span>
+              <div className="absolute -bottom-3 left-0 w-full h-1 bg-white opacity-30"></div>
+            </h2>
+            <div className="flex items-center justify-center py-6">
+              <div className="w-1/3 h-px bg-white opacity-30"></div>
+              <div className="mx-4">
+                <svg width="40" height="40" viewBox="0 0 100 100">
+                  <path
+                    d="M50,10 A40,40 0 0 1 50,90 A40,40 0 0 1 50,10 A30,30 0 0 0 50,70 A30,30 0 0 0 50,10"
+                    fill="#FFFFFF"
+                    fillOpacity="0.8"
+                  />
+                  <circle cx="60" cy="40" r="5" fill="#0c8991" />
+                </svg>
+              </div>
+              <div className="w-1/3 h-px bg-white opacity-30"></div>
+            </div>
+            <p className="mt-4 max-w-2xl mx-auto text-white text-opacity-90">
+              Stay updated with wellness tips, special class offerings, and community events
+            </p>
+          </div>
+          
+          <div className="flex flex-col md:flex-row items-center justify-between bg-white/10 p-8 rounded-lg">
+            <div className="md:w-1/2 mb-8 md:mb-0 md:pr-10">
               <form className="mt-6" onSubmit={handleSubmit}>
                 <div className="flex flex-col sm:flex-row gap-4">
                   <input 
@@ -133,6 +159,9 @@ export function NewsletterSection() {
             </div>
           </div>
         </div>
+      </div>
+      
+      <SectionDividerBottom color="teal" />
     </section>
   );
 }