From de877f254e83790c70306181292d8b4b83f565b7 Mon Sep 17 00:00:00 2001
From: JeffEmmett <20747463-JeffEmmett@users.noreply.replit.com>
Date: Sat, 10 May 2025 00:08:26 +0000
Subject: [PATCH] Update section backgrounds to align with the brand's selected
 color palette

Replaces Tailwind CSS background classes with inline styles and adds brand colors to `tailwind.config.ts`.

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/a0d4fe1f-319f-4ebd-a49e-0ddf038350b9.jpg
---
 client/src/components/classes/classes-section.tsx       | 2 +-
 client/src/components/community/community-section.tsx   | 2 +-
 client/src/components/home/cta-section.tsx              | 2 +-
 client/src/components/newsletter/newsletter-section.tsx | 2 +-
 tailwind.config.ts                                      | 6 ++++++
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/client/src/components/classes/classes-section.tsx b/client/src/components/classes/classes-section.tsx
index 083c438..bd03909 100644
--- a/client/src/components/classes/classes-section.tsx
+++ b/client/src/components/classes/classes-section.tsx
@@ -26,7 +26,7 @@ export function ClassesSection() {
   };
   
   return (
-    <section className="py-20 bg-teal bg-opacity-10">
+    <section className="py-20" style={{ backgroundColor: 'rgba(12, 137, 145, 0.1)' }}>
       <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">
diff --git a/client/src/components/community/community-section.tsx b/client/src/components/community/community-section.tsx
index be0235c..89f94b8 100644
--- a/client/src/components/community/community-section.tsx
+++ b/client/src/components/community/community-section.tsx
@@ -44,7 +44,7 @@ export function CommunitySection() {
   }, [user]);
   
   return (
-    <section className="py-20 bg-purple bg-opacity-10">
+    <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-16">
           <h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4">
diff --git a/client/src/components/home/cta-section.tsx b/client/src/components/home/cta-section.tsx
index 3d5b031..ab7c998 100644
--- a/client/src/components/home/cta-section.tsx
+++ b/client/src/components/home/cta-section.tsx
@@ -2,7 +2,7 @@ import { Link } from "wouter";
 
 export function CTASection() {
   return (
-    <section className="py-20 bg-purple text-white">
+    <section className="py-20 text-white" style={{ backgroundColor: '#9D5E9B' }}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
         <h2 className="text-3xl md:text-4xl font-playfair font-semibold mb-6">
           Ready to feel stronger, more connected, and at home in your body?
diff --git a/client/src/components/newsletter/newsletter-section.tsx b/client/src/components/newsletter/newsletter-section.tsx
index 466e9c1..53e0541 100644
--- a/client/src/components/newsletter/newsletter-section.tsx
+++ b/client/src/components/newsletter/newsletter-section.tsx
@@ -58,7 +58,7 @@ export function NewsletterSection() {
   };
 
   return (
-    <section className="py-20 bg-rose bg-opacity-10 text-gray-800">
+    <section className="py-20 text-gray-800" style={{ backgroundColor: 'rgba(181, 80, 118, 0.1)' }}>
       <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">
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 22ccd6c..1056c68 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -11,6 +11,12 @@ export default {
         sm: "calc(var(--radius) - 4px)",
       },
       colors: {
+        teal: "#0c8991",
+        purple: "#9D5E9B",
+        rose: "#B55076",
+        "teal-light": "rgba(12, 137, 145, 0.1)",
+        "purple-light": "rgba(157, 94, 155, 0.1)",
+        "rose-light": "rgba(181, 80, 118, 0.1)",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         card: {