From 780b6ca629c9a3f261fb3f5623d01ac7118adbfd Mon Sep 17 00:00:00 2001
From: JeffEmmett <20747463-JeffEmmett@users.noreply.replit.com>
Date: Fri, 9 May 2025 23:51:31 +0000
Subject: [PATCH] Simplify website design and improve user experience on
 contact form

Remove decorative elements and enhance user input validation in the contact form and testimonial 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/1695a17b-60cc-46a7-886e-2321741926c1.jpg
---
 .../src/components/community/testimonial.tsx  |  43 +--
 .../components/contact/contact-section.tsx    | 307 ++++++++----------
 2 files changed, 148 insertions(+), 202 deletions(-)

diff --git a/client/src/components/community/testimonial.tsx b/client/src/components/community/testimonial.tsx
index 660a2d5..230609a 100644
--- a/client/src/components/community/testimonial.tsx
+++ b/client/src/components/community/testimonial.tsx
@@ -7,49 +7,18 @@ interface TestimonialProps {
 }
 
 export function Testimonial({ quote, author, memberSince, initials, color }: TestimonialProps) {
-  const colorClasses = {
-    teal: {
-      bg: "bg-teal-light",
-      text: "text-teal",
-      opacity: "text-teal opacity-30",
-    },
-    purple: {
-      bg: "bg-purple-light",
-      text: "text-purple",
-      opacity: "text-purple opacity-30",
-    },
-    rose: {
-      bg: "bg-rose-light",
-      text: "text-rose",
-      opacity: "text-rose opacity-30",
-    },
-  };
-
   return (
-    <div className="bg-white p-6 rounded-lg shadow-lg relative overflow-hidden">
-      <div className="absolute -top-4 -right-4 w-16 h-16 opacity-10">
-        <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>
-      
-      <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">
+    <div className="bg-white p-6 text-left">
+      <p className="text-gray-700 mb-6 italic">
         "{quote}"
       </p>
       
-      <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 className="flex items-center">
+        <div className="w-10 h-10 rounded-full flex items-center justify-center mr-3 bg-rose bg-opacity-10 text-rose">
+          <span>{initials}</span>
         </div>
         <div>
-          <h5 className="font-playfair font-medium">{author}</h5>
+          <h5 className="font-playfair">{author}</h5>
           <p className="text-sm text-gray-500">Member since {memberSince}</p>
         </div>
       </div>
diff --git a/client/src/components/contact/contact-section.tsx b/client/src/components/contact/contact-section.tsx
index 4838ff5..00e198f 100644
--- a/client/src/components/contact/contact-section.tsx
+++ b/client/src/components/contact/contact-section.tsx
@@ -3,10 +3,7 @@ import { useMutation } from "@tanstack/react-query";
 import { apiRequest } from "@/lib/queryClient";
 import { insertContactMessageSchema } from "@shared/schema";
 import { useToast } from "@/hooks/use-toast";
-import { ArabicDecoration } from "@/components/ui/arabic-decoration";
 import { Loader2 } from "lucide-react";
-import { SectionDivider, SectionDividerBottom, StarDivider } from "@/components/ui/section-divider";
-import { IslamicPattern } from "@/components/ui/section-divider";
 
 export function ContactSection() {
   const { toast } = useToast();
@@ -44,186 +41,166 @@ export function ContactSection() {
     },
   });
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
     const { name, value } = e.target;
     setFormData(prev => ({ ...prev, [name]: value }));
   };
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    
+    if (!formData.name || !formData.email || !formData.message) {
+      toast({
+        title: "Missing information",
+        description: "Please fill out all required fields",
+        variant: "destructive",
+      });
+      return;
+    }
+    
     contactMutation.mutate(formData);
   };
 
   return (
-    <section className="relative overflow-hidden">
-      <SectionDivider color="teal" />
-      
-      <div className="relative py-20 teal-light-bg">
-        <IslamicPattern color="teal" opacity={15} />
+    <section className="py-20">
+      <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">
+            Contact Us
+          </h2>
+          <p className="max-w-3xl mx-auto text-gray-600">
+            Have a question or want to schedule a private session? Get in touch with us.
+          </p>
+        </div>
         
-        <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">
-              <span className="relative z-10">Contact Us</span>
-              <div className="absolute -bottom-3 left-0 w-full h-1 bg-teal opacity-30"></div>
-            </h2>
-            <StarDivider color="teal" className="mt-4" />
-            <p className="mt-6 max-w-3xl mx-auto text-gray-600">
-              Have questions or want to learn more? Reach out to us and we'll get back to you as soon as possible.
-            </p>
-          </div>
-          
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
-            <div>
-              <form onSubmit={handleSubmit}>
-                <div className="mb-6">
-                  <label htmlFor="name" className="block text-gray-700 font-medium mb-2">Your Name</label>
-                  <input 
-                    type="text" 
-                    id="name" 
-                    name="name"
-                    value={formData.name}
-                    onChange={handleChange}
-                    className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal focus:border-transparent" 
-                    placeholder="Enter your name" 
-                    required 
-                  />
-                </div>
-                
-                <div className="mb-6">
-                  <label htmlFor="email" className="block text-gray-700 font-medium mb-2">Email Address</label>
-                  <input 
-                    type="email" 
-                    id="email" 
-                    name="email"
-                    value={formData.email}
-                    onChange={handleChange}
-                    className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal focus:border-transparent" 
-                    placeholder="Enter your email" 
-                    required 
-                  />
-                </div>
-                
-                <div className="mb-6">
-                  <label htmlFor="subject" className="block text-gray-700 font-medium mb-2">Subject</label>
-                  <input 
-                    type="text" 
-                    id="subject" 
-                    name="subject"
-                    value={formData.subject}
-                    onChange={handleChange}
-                    className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal focus:border-transparent" 
-                    placeholder="What is this regarding?" 
-                  />
-                </div>
-                
-                <div className="mb-6">
-                  <label htmlFor="message" className="block text-gray-700 font-medium mb-2">Message</label>
-                  <textarea 
-                    id="message" 
-                    name="message"
-                    value={formData.message}
-                    onChange={handleChange}
-                    rows={5} 
-                    className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal focus:border-transparent" 
-                    placeholder="Your message..." 
-                    required
-                  ></textarea>
-                </div>
-                
-                <button 
-                  type="submit" 
-                  className="w-full bg-teal text-white font-medium py-3 px-6 rounded-md hover:bg-opacity-90 transition duration-300 flex items-center justify-center"
-                  disabled={contactMutation.isPending}
-                >
-                  {contactMutation.isPending ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Sending...
-                    </>
-                  ) : (
-                    "Send Message"
-                  )}
-                </button>
-              </form>
-            </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+          <div>
+            <h3 className="text-2xl font-playfair font-semibold text-gray-800 mb-6">Get In Touch</h3>
             
-            <div>
-              <div className="bg-white rounded-lg p-8 h-full shadow-md">
-                <h3 className="font-playfair font-bold text-2xl mb-6 text-teal">Connect With Us</h3>
-                
-                <div className="space-y-6">
-                  <div className="flex items-start">
-                    <div className="bg-teal-light p-3 rounded-full mr-4">
-                      <i className="fas fa-map-marker-alt text-teal"></i>
-                    </div>
-                    <div>
-                      <h4 className="font-medium mb-1">Our Studio</h4>
-                      <p className="text-gray-600">123 Serenity Lane, Wellness District<br/>Dubai, United Arab Emirates</p>
-                    </div>
-                  </div>
-                  
-                  <div className="flex items-start">
-                    <div className="bg-teal-light p-3 rounded-full mr-4">
-                      <i className="fas fa-envelope text-teal"></i>
-                    </div>
-                    <div>
-                      <h4 className="font-medium mb-1">Email Us</h4>
-                      <p className="text-gray-600">hello@pilateswithfadia.com</p>
-                      <p className="text-gray-500 text-sm mt-1">We aim to respond within 24 hours</p>
-                    </div>
-                  </div>
-                  
-                  <div className="flex items-start">
-                    <div className="bg-teal-light p-3 rounded-full mr-4">
-                      <i className="fas fa-phone-alt text-teal"></i>
-                    </div>
-                    <div>
-                      <h4 className="font-medium mb-1">Call Us</h4>
-                      <p className="text-gray-600">+971 50 123 4567</p>
-                      <p className="text-gray-500 text-sm mt-1">Sunday-Thursday: 9AM-7PM</p>
-                    </div>
-                  </div>
-                  
-                  <div className="flex items-start">
-                    <div className="bg-teal-light p-3 rounded-full mr-4">
-                      <i className="fas fa-clock text-teal"></i>
-                    </div>
-                    <div>
-                      <h4 className="font-medium mb-1">Studio Hours</h4>
-                      <p className="text-gray-600">
-                        Monday-Friday: 7AM-9PM<br/>
-                        Saturday: 8AM-6PM<br/>
-                        Sunday: 9AM-4PM
-                      </p>
-                    </div>
-                  </div>
-                  
-                  <div className="pt-6 border-t border-gray-200">
-                    <h4 className="font-medium mb-3">Follow Us</h4>
-                    <div className="flex space-x-4">
-                      <a href="#" className="bg-teal hover:bg-opacity-90 text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
-                        <i className="fab fa-instagram"></i>
-                      </a>
-                      <a href="#" className="bg-teal hover:bg-opacity-90 text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
-                        <i className="fab fa-facebook-f"></i>
-                      </a>
-                      <a href="#" className="bg-teal hover:bg-opacity-90 text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
-                        <i className="fab fa-youtube"></i>
-                      </a>
-                      <a href="#" className="bg-teal hover:bg-opacity-90 text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
-                        <i className="fab fa-twitter"></i>
-                      </a>
-                    </div>
-                  </div>
+            <div className="space-y-4">
+              <div className="flex items-start">
+                <div className="mt-1 mr-3 text-teal">
+                  <i className="fas fa-map-marker-alt"></i>
+                </div>
+                <div>
+                  <h4 className="font-playfair font-medium">Location</h4>
+                  <p className="text-gray-600">
+                    Nun Center, Zamalek<br/>
+                    Cairo, Egypt
+                  </p>
+                </div>
+              </div>
+              
+              <div className="flex items-start">
+                <div className="mt-1 mr-3 text-teal">
+                  <i className="fas fa-envelope"></i>
+                </div>
+                <div>
+                  <h4 className="font-playfair font-medium">Email</h4>
+                  <a href="mailto:hello@pilateswithfadia.com" className="text-gray-600 hover:text-teal transition duration-300">
+                    hello@pilateswithfadia.com
+                  </a>
+                </div>
+              </div>
+              
+              <div className="flex items-start">
+                <div className="mt-1 mr-3 text-teal">
+                  <i className="fas fa-phone-alt"></i>
+                </div>
+                <div>
+                  <h4 className="font-playfair font-medium">Phone</h4>
+                  <a href="tel:+20123456789" className="text-gray-600 hover:text-teal transition duration-300">
+                    +20 123 456 789
+                  </a>
+                </div>
+              </div>
+              
+              <div className="flex items-start">
+                <div className="mt-1 mr-3 text-teal">
+                  <i className="fas fa-clock"></i>
+                </div>
+                <div>
+                  <h4 className="font-playfair font-medium">Hours</h4>
+                  <p className="text-gray-600">
+                    Monday - Friday: 9am - 6pm<br/>
+                    Saturday: 10am - 2pm
+                  </p>
                 </div>
               </div>
             </div>
           </div>
+          
+          <div>
+            <form onSubmit={handleSubmit} className="bg-gray-50 p-6">
+              <div className="mb-4">
+                <label htmlFor="name" className="block text-gray-700 font-medium mb-2">Name</label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleChange}
+                  className="w-full px-4 py-2 border border-gray-300 focus:outline-none focus:border-teal"
+                  required
+                />
+              </div>
+              
+              <div className="mb-4">
+                <label htmlFor="email" className="block text-gray-700 font-medium mb-2">Email</label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  className="w-full px-4 py-2 border border-gray-300 focus:outline-none focus:border-teal"
+                  required
+                />
+              </div>
+              
+              <div className="mb-4">
+                <label htmlFor="subject" className="block text-gray-700 font-medium mb-2">Subject</label>
+                <input
+                  type="text"
+                  id="subject"
+                  name="subject"
+                  value={formData.subject}
+                  onChange={handleChange}
+                  className="w-full px-4 py-2 border border-gray-300 focus:outline-none focus:border-teal"
+                />
+              </div>
+              
+              <div className="mb-4">
+                <label htmlFor="message" className="block text-gray-700 font-medium mb-2">Message</label>
+                <textarea
+                  id="message"
+                  name="message"
+                  value={formData.message}
+                  onChange={handleChange}
+                  rows={5}
+                  className="w-full px-4 py-2 border border-gray-300 focus:outline-none focus:border-teal"
+                  required
+                ></textarea>
+              </div>
+              
+              <button 
+                type="submit" 
+                className="w-full px-6 py-3 bg-teal text-white font-medium hover:bg-opacity-90 transition duration-300 flex items-center justify-center"
+                disabled={contactMutation.isPending}
+              >
+                {contactMutation.isPending ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Sending...
+                  </>
+                ) : (
+                  "Send Message"
+                )}
+              </button>
+            </form>
+          </div>
         </div>
       </div>
-      
-      <SectionDividerBottom color="teal" />
     </section>
   );
 }
\ No newline at end of file