From 1f84fe542d2f61015e885516b6df719176555a02 Mon Sep 17 00:00:00 2001
From: JeffEmmett <20747463-JeffEmmett@users.noreply.replit.com>
Date: Fri, 9 May 2025 23:10:23 +0000
Subject: [PATCH] Enhance website appearance with new color scheme and design
 elements

Updates the color palette and adds Islamic-inspired design elements using CSS classes and SVG components.

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/60d2749f-98ca-44a4-bd05-9636755c0c3f.jpg
---
 .../community/community-section.tsx           |  2 ++
 client/src/components/home/feature-card.tsx   | 32 +++++++++++--------
 client/src/components/home/hero-section.tsx   | 24 +++++++-------
 3 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/client/src/components/community/community-section.tsx b/client/src/components/community/community-section.tsx
index 62abdfd..98cb24a 100644
--- a/client/src/components/community/community-section.tsx
+++ b/client/src/components/community/community-section.tsx
@@ -4,6 +4,8 @@ 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";
 
 export function CommunitySection() {
   const { user } = useAuth();
diff --git a/client/src/components/home/feature-card.tsx b/client/src/components/home/feature-card.tsx
index a0af680..27556fb 100644
--- a/client/src/components/home/feature-card.tsx
+++ b/client/src/components/home/feature-card.tsx
@@ -31,8 +31,7 @@ export function FeatureCard({ title, description, icon, color }: FeatureCardProp
   };
 
   return (
-    <div className="group relative rounded-lg p-6 text-center transition-all duration-300 hover:shadow-lg overflow-hidden">
-      <div className={`absolute inset-0 ${colorClasses[color].bg} opacity-40`}></div>
+    <div className="group relative rounded-lg p-6 text-center transition-all duration-300 hover:shadow-lg overflow-hidden bg-white">
       <div className={`absolute inset-0 ${colorClasses[color].pattern} opacity-5 group-hover:opacity-10 transition-opacity duration-300`}></div>
       
       {/* Icon container with geometric border */}
@@ -85,17 +84,28 @@ export function FeaturesSection() {
   ];
 
   return (
-    <section className="relative py-20 overflow-hidden">
-      <div className="absolute inset-0 bg-white"></div>
-      
+    <section className="relative py-20 overflow-hidden bg-purple">      
       <div className="relative">
         <div className="text-center mb-12">
-          <h2 className="text-3xl md:text-4xl font-playfair font-bold text-gray-800 relative inline-block">
+          <h2 className="text-3xl md:text-4xl font-playfair font-bold text-white relative inline-block">
             <span className="relative z-10">Core Benefits</span>
-            <div className="absolute -bottom-3 left-0 w-full h-1 bg-purple opacity-20"></div>
+            <div className="absolute -bottom-3 left-0 w-full h-1 bg-white opacity-30"></div>
           </h2>
-          <CrescentDivider color="purple" className="mt-4" />
-          <p className="mt-4 max-w-2xl mx-auto text-gray-600">
+          <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="#9D5E9B" />
+              </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">
             Experience the transformative power of Pilates through these foundational principles
           </p>
         </div>
@@ -108,10 +118,6 @@ export function FeaturesSection() {
           </div>
         </div>
       </div>
-      
-      <div className="mt-16">
-        <SectionDividerBottom color="purple" />
-      </div>
     </section>
   );
 }
diff --git a/client/src/components/home/hero-section.tsx b/client/src/components/home/hero-section.tsx
index 41f6362..2155fea 100644
--- a/client/src/components/home/hero-section.tsx
+++ b/client/src/components/home/hero-section.tsx
@@ -3,38 +3,38 @@ import { IslamicPattern, ArabesquePattern, SectionDividerBottom } from "@/compon
 
 export function HeroSection() {
   return (
-    <section id="home" className="relative overflow-hidden teal-light-bg py-16 md:py-24">
+    <section id="home" className="relative overflow-hidden bg-teal py-16 md:py-24">
       <ArabesquePattern color="teal" opacity={15} />
       
       <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center">
         <div className="md:w-1/2 mb-10 md:mb-0 md:pr-10">
           <div className="relative">
-            <span className="absolute -left-4 -top-4 text-4xl text-teal opacity-20 font-aref">بسم الله</span>
+            <span className="absolute -left-4 -top-4 text-4xl text-white opacity-30 font-aref">بسم الله</span>
           </div>
-          <h1 className="text-4xl md:text-5xl font-playfair font-bold text-gray-800 leading-tight">
+          <h1 className="text-4xl md:text-5xl font-playfair font-bold text-white leading-tight">
             Find Balance, Strength & Inner Peace
           </h1>
           
           <div className="flex items-center my-6">
-            <div className="h-px w-8 bg-teal opacity-30"></div>
-            <div className="w-16 h-1 mx-2 bg-teal"></div>
-            <div className="h-px flex-grow bg-teal opacity-30"></div>
+            <div className="h-px w-8 bg-white opacity-50"></div>
+            <div className="w-16 h-1 mx-2 bg-white"></div>
+            <div className="h-px flex-grow bg-white opacity-50"></div>
           </div>
           
-          <p className="text-lg text-gray-600 font-raleway mb-8">
+          <p className="text-lg text-white text-opacity-90 font-raleway mb-8">
             Transform your body and mind through the art of Pilates. Join our serene studio for personalized sessions that promote harmony, flexibility, and strength.
           </p>
           
           <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
             <Link
               href="/classes"
-              className="bg-teal hover:bg-opacity-90 text-white font-medium py-3 px-6 rounded-full transition duration-300 text-center"
+              className="bg-white text-teal font-medium py-3 px-8 rounded-full transition duration-300 text-center hover:bg-opacity-90"
             >
               Book a Class
             </Link>
             <Link
               href="/about"
-              className="bg-purple hover:bg-opacity-90 text-white font-medium py-3 px-6 rounded-full transition duration-300 text-center"
+              className="bg-transparent border-2 border-white text-white font-medium py-3 px-8 rounded-full transition duration-300 text-center hover:bg-white hover:bg-opacity-10"
             >
               About Fadia
             </Link>
@@ -42,14 +42,14 @@ export function HeroSection() {
         </div>
         
         <div className="md:w-1/2 relative">
-          <div className="absolute -bottom-4 -right-4 w-full h-full border-4 border-teal border-opacity-10 rounded-lg"></div>
-          <div className="relative overflow-hidden rounded-lg shadow-xl">
+          <div className="absolute -bottom-4 -right-4 w-full h-full border-4 border-white border-opacity-20 rounded-lg"></div>
+          <div className="relative overflow-hidden rounded-lg shadow-xl bg-white">
             <img 
               src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=600" 
               alt="Woman practicing pilates in a bright, airy studio" 
               className="w-full h-auto"
             />
-            <div className="absolute inset-0 border-[12px] border-white border-opacity-20 rounded-lg"></div>
+            <div className="absolute inset-0 border-[12px] border-white border-opacity-50 rounded-lg"></div>
           </div>
         </div>
       </div>