From 1d73c4121c16ddefcead2ec34f247c857041364b Mon Sep 17 00:00:00 2001
From: JeffEmmett <20747463-JeffEmmett@users.noreply.replit.com>
Date: Fri, 13 Jun 2025 19:26:41 +0000
Subject: [PATCH] Showcase community image as a background with a prominent
 call-to-action

Replaces the community image with a background image and adds a translucent overlay in CommunitySection.tsx.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: e524de2d-167c-4bad-8c36-b012186a210b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/c3f18c2f-a395-4591-aa44-352dec1be7ef.jpg
---
 .../community/community-section.tsx           | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/client/src/components/community/community-section.tsx b/client/src/components/community/community-section.tsx
index c736fbe..8172fe8 100644
--- a/client/src/components/community/community-section.tsx
+++ b/client/src/components/community/community-section.tsx
@@ -56,23 +56,26 @@ export function CommunitySection() {
         
         {/* 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>
+        {/* Community Background with Centered Button */}
+        <div 
+          className="relative w-full h-96 rounded-lg shadow-lg overflow-hidden flex items-center justify-center"
+          style={{
+            backgroundImage: `url(${CommunityImage})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+        >
+          {/* Translucent overlay */}
+          <div className="absolute inset-0 bg-black bg-opacity-40"></div>
+          
+          {/* Centered button */}
+          <div className="relative z-10">
+            <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-lg">
+                {user ? "Access Community Dashboard" : "Join My Community"}
+              </button>
+            </Link>
+          </div>
         </div>
       </div>
     </section>