Simplify website design by removing decorative elements for a cleaner look

Removes Arabic/Islamic design elements from hero, about, and features sections.

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/2363e567-8e52-4d7b-b0f6-e1b8aaaa0e5b.jpg

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

@@ -1,51 +1,14 @@
 import { Link } from "wouter";
-import { ArabicDecoration } from "@/components/ui/arabic-decoration";
-import { SectionDivider, SectionDividerBottom, CrescentDivider } from "@/components/ui/section-divider";
-import { ArabesquePattern } from "@/components/ui/section-divider";
 
 export function AboutSection() {
-  const certifications = [
-    {
-      title: "Certified Instructor",
-      description: "Comprehensive Pilates Certification",
-      icon: "fa-certificate",
-      color: "teal",
-    },
-    {
-      title: "Advanced Training",
-      description: "Specialized in Rehabilitation",
-      icon: "fa-graduation-cap",
-      color: "purple",
-    },
-    {
-      title: "Wellness Expert",
-      description: "Holistic Approach to Health",
-      icon: "fa-heartbeat",
-      color: "rose",
-    },
-    {
-      title: "10+ Years Experience",
-      description: "Guiding Hundreds of Students",
-      icon: "fa-users",
-      color: "teal",
-    },
-  ];
-
   return (
-    <section className="relative overflow-hidden">
+    <section className="py-20 bg-purple-light">
-      <SectionDivider color="purple" />
-      
-      <div className="relative py-20 purple-light-bg">
-        <ArabesquePattern color="purple" opacity={15} />
-        
       <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-bold text-gray-800 relative inline-block">
+          <h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4">
-              <span className="relative z-10">About Fadia</span>
+            About Fadia
-              <div className="absolute -bottom-3 left-0 w-full h-1 bg-purple opacity-30"></div>
           </h2>
-            <CrescentDivider color="purple" className="mt-4" />
+          <p className="mt-2 max-w-3xl mx-auto text-gray-600">
-            <p className="mt-6 max-w-3xl mx-auto text-gray-600 font-raleway">
             Discover the journey, philosophy, and passion behind Pilates with Fadia.
           </p>
         </div>
@@ -55,7 +18,7 @@ export function AboutSection() {
             <img 
               src="https://images.unsplash.com/photo-1581122584612-713f89daa8eb?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=900" 
               alt="Pilates instructor demonstrating a pose with elegant form" 
-                className="rounded-lg shadow-lg" 
+              className="w-full h-auto" 
             />
           </div>
           
@@ -68,12 +31,6 @@ export function AboutSection() {
               <p className="text-gray-600 mb-4">
                 After years of seeking healing and emotional release through movement, Fadia's path led her from home yoga classes to dance, martial arts, and ultimately, Pilates. What began as a suggestion from a dance teacher soon turned into a life-changing passion.
               </p>
-                <p className="text-gray-600 mb-4">
-                  She trained in classical Pilates with a program aligned with the German Pilates Association and now teaches both mat and equipment Pilates—including the Reformer, Cadillac, Wunda Chair, and Spine Corrector.
-                </p>
-                <p className="text-gray-600 mb-4">
-                  In every class, her goal is the same: to help people reconnect with their bodies, move with intention, and build deep, functional strength.
-                </p>
               
               <h3 className="text-2xl font-playfair font-semibold text-purple mb-4 mt-8">My Story</h3>
               <h4 className="text-xl font-playfair text-purple-dark mb-3">From Healing to Empowerment</h4>
@@ -83,44 +40,11 @@ export function AboutSection() {
               <p className="text-gray-600 mb-4">
                 During a two-year dance program in Berlin, I was introduced to Pilates. My first class? A bit confusing. The simplicity and focused cueing felt foreign. But by the second class, something clicked. Within a month, I was sold—both on the method and the way it made me feel.
               </p>
-                <p className="text-gray-600 mb-4">
-                  Pilates became my anchor. It grounded me in my body, gave me strength, and helped me move with more confidence and clarity—on the mat, and in life.
-                </p>
-                
-                <h3 className="text-2xl font-playfair font-semibold text-purple mb-4 mt-8">My Philosophy</h3>
-                <p className="text-gray-600 mb-4">
-                  I believe movement is a game changer—not just physically, but mentally and emotionally. My personal journey includes martial arts like Capoeira and Parkour, in addition to Pilates and dance. This rich background taught me that movement isn't just about exercise—it's about agency, healing, and joy.
-                </p>
-                <p className="text-gray-600 mb-4">
-                  Movement reminds us of our power. It helps us live with more awareness, vitality, and self-trust.
-                </p>
-                
-                <div className="mt-6 bg-white/50 p-6 rounded-lg shadow-sm">
-                  <p className="font-medium text-gray-800 mb-2">In my classes, you'll:</p>
-                  <ul className="space-y-2">
-                    <li className="flex items-start">
-                      <span className="text-purple font-bold mr-2">✔</span>
-                      <span>Move mindfully and with intention</span>
-                    </li>
-                    <li className="flex items-start">
-                      <span className="text-purple font-bold mr-2">✔</span>
-                      <span>Build strength from the inside out</span>
-                    </li>
-                    <li className="flex items-start">
-                      <span className="text-purple font-bold mr-2">✔</span>
-                      <span>Learn to breathe, connect, and listen to your body</span>
-                    </li>
-                    <li className="flex items-start">
-                      <span className="text-purple font-bold mr-2">✔</span>
-                      <span>Be supported—no matter your age or level</span>
-                    </li>
-                  </ul>
-                </div>
               
               <div className="mt-8">
-                  <Link href="/contact">
+                <Link href="/about">
-                    <span className="inline-block bg-purple text-white font-medium py-3 px-6 rounded-full hover:bg-opacity-90 transition duration-300">
+                  <span className="inline-block border border-purple text-purple font-medium py-2 px-6 hover:bg-purple hover:text-white transition duration-300">
-                      Connect with Me
+                    Learn More About Me
                   </span>
                 </Link>
               </div>
@@ -128,23 +52,32 @@ export function AboutSection() {
           </div>
         </div>
         
-          <div className="mt-20">
+        <div className="mt-20 grid grid-cols-1 md:grid-cols-4 gap-6">
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          <div className="text-center p-6 bg-white">
-              {certifications.map((cert, index) => (
+            <i className="fas fa-certificate text-purple text-xl mb-3"></i>
-                <div key={index} className="bg-white p-6 rounded-lg shadow-md text-center">
+            <h4 className="font-playfair font-semibold mb-2">Certified Instructor</h4>
-                  <div className={`w-16 h-16 bg-${cert.color}-light rounded-full flex items-center justify-center mx-auto mb-4`}>
+            <p className="text-sm text-gray-600">Comprehensive Pilates Certification</p>
-                    <i className={`fas ${cert.icon} text-${cert.color} text-xl`}></i>
-                  </div>
-                  <h4 className="font-playfair font-semibold mb-2">{cert.title}</h4>
-                  <p className="text-sm text-gray-600">{cert.description}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
           </div>
           
-      <SectionDividerBottom color="purple" />
+          <div className="text-center p-6 bg-white">
+            <i className="fas fa-graduation-cap text-purple text-xl mb-3"></i>
+            <h4 className="font-playfair font-semibold mb-2">Advanced Training</h4>
+            <p className="text-sm text-gray-600">Specialized in Rehabilitation</p>
+          </div>
+          
+          <div className="text-center p-6 bg-white">
+            <i className="fas fa-heartbeat text-purple text-xl mb-3"></i>
+            <h4 className="font-playfair font-semibold mb-2">Wellness Expert</h4>
+            <p className="text-sm text-gray-600">Holistic Approach to Health</p>
+          </div>
+          
+          <div className="text-center p-6 bg-white">
+            <i className="fas fa-users text-purple text-xl mb-3"></i>
+            <h4 className="font-playfair font-semibold mb-2">10+ Years Experience</h4>
+            <p className="text-sm text-gray-600">Guiding Hundreds of Students</p>
+          </div>
+        </div>
+      </div>
     </section>
   );
 }

client/src/components/home/feature-card.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { SectionDividerBottom, CrescentDivider } from "@/components/ui/section-divider";
 
 interface FeatureCardProps {
   title: string;
@@ -9,54 +8,17 @@ interface FeatureCardProps {
 }
 
 export function FeatureCard({ title, description, icon, color }: FeatureCardProps) {
-  const colorClasses = {
+  const colorMap = {
-    teal: {
+    teal: "#0c8991",
-      bg: "bg-teal-light",
+    purple: "#9D5E9B",
-      iconBg: "bg-teal",
+    rose: "#B55076"
-      text: "text-teal",
-      pattern: "islamic-pattern-teal",
-    },
-    purple: {
-      bg: "bg-purple-light",
-      iconBg: "bg-purple",
-      text: "text-purple",
-      pattern: "islamic-pattern",
-    },
-    rose: {
-      bg: "bg-rose-light",
-      iconBg: "bg-rose",
-      text: "text-rose",
-      pattern: "islamic-pattern-rose",
-    },
   };
   
   return (
-    <div className="group relative rounded-lg p-6 text-center transition-all duration-300 hover:shadow-lg overflow-hidden bg-white">
+    <div className="text-center p-8 transition duration-300 hover:shadow-md">
-      <div className={`absolute inset-0 ${colorClasses[color].pattern} opacity-5 group-hover:opacity-10 transition-opacity duration-300`}></div>
+      <i className={`fas ${icon} text-2xl`} style={{ color: colorMap[color] }}></i>
-      
+      <h3 className="text-xl font-playfair font-semibold mt-4 mb-3">{title}</h3>
-      {/* Icon container with geometric border */}
+      <p className="text-gray-600">{description}</p>
-      <div className="relative">
-        <div className={`w-20 h-20 ${colorClasses[color].iconBg} rounded-full flex items-center justify-center mx-auto mb-5 transform transition-transform group-hover:scale-110 duration-300`}>
-          <i className={`fas ${icon} text-white text-2xl`}></i>
-        </div>
-        
-        {/* Decorative elements */}
-        <div className="absolute top-9 left-1/2 transform -translate-x-1/2 -z-10">
-          <svg width="120" height="120" viewBox="0 0 120 120" className="absolute top-0 left-0 -mt-10 -ml-10">
-            <polygon 
-              points="60,0 77.8,42.2 120,42.2 85.1,68.2 97.1,110.3 60,86.3 22.9,110.3 34.9,68.2 0,42.2 42.2,42.2" 
-              fill="none" 
-              stroke={color === "teal" ? "#0c8991" : color === "purple" ? "#9D5E9B" : "#B55076"} 
-              strokeWidth="1"
-              strokeOpacity="0.2"
-              className="transform scale-75 origin-center"
-            />
-          </svg>
-        </div>
-      </div>
-      
-      <h3 className={`text-xl font-playfair font-bold mb-3 ${colorClasses[color].text}`}>{title}</h3>
-      <p className="text-gray-600 relative z-10">{description}</p>
     </div>
   );
 }
@@ -84,40 +46,23 @@ export function FeaturesSection() {
   ];
 
   return (
-    <section className="relative py-20 overflow-hidden bg-purple">      
+    <section className="py-16 bg-purple">
-      <div className="relative">
+      <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">
+          <h2 className="text-3xl font-playfair font-semibold text-white mb-4">
-            <span className="relative z-10">Core Benefits</span>
+            Core Benefits
-            <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">
+          <p className="text-white text-opacity-90 max-w-2xl mx-auto">
-            <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>
         
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 bg-white p-6">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
           {features.map((feature, index) => (
             <FeatureCard key={index} {...feature} />
           ))}
         </div>
       </div>
-      </div>
     </section>
   );
 }

client/src/components/home/hero-section.tsx

@@ -1,68 +1,39 @@
 import { Link } from "wouter";
-import { IslamicPattern, ArabesquePattern, SectionDividerBottom } from "@/components/ui/section-divider";
 
 export function HeroSection() {
   return (
-    <section id="home" className="relative overflow-hidden bg-teal py-16 md:py-24">
+    <section className="relative">
-      <ArabesquePattern color="teal" opacity={15} />
+      <div className="bg-cover bg-center h-[90vh] flex items-center justify-center" 
+           style={{
+             backgroundImage: "url('https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=1080')",
+             backgroundPosition: "center"
+           }}>
+        <div className="absolute inset-0 bg-black bg-opacity-20"></div>
         
-      <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="relative text-center px-4 sm:px-6 lg:px-8 max-w-3xl mx-auto">
-        <div className="md:w-1/2 mb-10 md:mb-0 md:pr-10">
+          <h1 className="text-5xl md:text-6xl font-playfair font-bold text-white leading-tight mb-8">
-          <div className="relative">
-            <span className="absolute -left-4 -top-4 text-4xl text-white opacity-30 font-aref">بسم الله</span>
-          </div>
-          <h2 className="text-2xl md:text-3xl font-playfair text-white leading-tight mb-2">
-            Pilates with Fadia
-          </h2>
-          <h1 className="text-4xl md:text-5xl font-playfair font-bold text-white leading-tight">
             Where Strength Meets Serenity
           </h1>
           
-          <div className="flex items-center my-6">
-            <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-white text-opacity-90 font-raleway mb-4">
-            Graceful, mindful movement for real strength and deep connection.
-          </p>
-          <p className="text-lg text-white text-opacity-90 font-raleway mb-8">
-            Join a global community tuning into their bodies—building strength through awareness, breath, and flow.
-          </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-white text-teal font-medium py-3 px-8 rounded-full transition duration-300 text-center hover:bg-opacity-90"
+            className="inline-block bg-white text-teal font-medium py-3 px-10 hover:bg-opacity-90 transition duration-300"
           >
-              Join a Class
+            Start Now For Free
-            </Link>
-            <Link
-              href="/classes"
-              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"
-            >
-              Try a Free Session
           </Link>
         </div>
       </div>
       
-        <div className="md:w-1/2 relative">
+      <div className="py-16 text-center">
-          <div className="absolute -bottom-4 -right-4 w-full h-full border-4 border-white border-opacity-20 rounded-lg"></div>
+        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="relative overflow-hidden rounded-lg shadow-xl bg-white">
+          <h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-900 mb-4">
-            <img 
+            Welcome to Pilates with Fadia
-              src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=600" 
+          </h2>
-              alt="Woman practicing pilates in a bright, airy studio" 
+          <p className="text-lg text-gray-600">
-              className="w-full h-auto"
+            where progress feels natural and consistency is effortless
-            />
+          </p>
-            <div className="absolute inset-0 border-[12px] border-white border-opacity-50 rounded-lg"></div>
         </div>
       </div>
-      </div>
-      
-      <div className="mt-12">
-        <SectionDividerBottom color="teal" />
-      </div>
     </section>
   );
 }