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
This commit is contained in:
JeffEmmett
parent
d8620a0a13
commit
780b6ca629
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue