Enhance the contact section with visual appeal and Islamic design elements
Implement SectionDivider and IslamicPattern components in ContactSection.tsx. 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/6f118670-0093-4a9e-b537-b6b598d3bf5f.jpg
This commit is contained in:
JeffEmmett
parent
c814070374
commit
a041af9174
|
|
@ -5,6 +5,8 @@ import { insertContactMessageSchema } from "@shared/schema";
|
||||||
import { useToast } from "@/hooks/use-toast";
|
import { useToast } from "@/hooks/use-toast";
|
||||||
import { ArabicDecoration } from "@/components/ui/arabic-decoration";
|
import { ArabicDecoration } from "@/components/ui/arabic-decoration";
|
||||||
import { Loader2 } from "lucide-react";
|
import { Loader2 } from "lucide-react";
|
||||||
|
import { SectionDivider, SectionDividerBottom, StarDivider } from "@/components/ui/section-divider";
|
||||||
|
import { IslamicPattern } from "@/components/ui/section-divider";
|
||||||
|
|
||||||
export function ContactSection() {
|
export function ContactSection() {
|
||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
|
|
@ -53,158 +55,166 @@ export function ContactSection() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="contact" className="py-16">
|
<section className="relative overflow-hidden">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<SectionDivider color="teal" />
|
||||||
<div className="text-center mb-16">
|
|
||||||
<ArabicDecoration>
|
<div className="relative py-20 teal-light-bg">
|
||||||
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-gray-800">Contact Us</h2>
|
<IslamicPattern color="teal" opacity={15} />
|
||||||
</ArabicDecoration>
|
|
||||||
<p className="mt-8 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 className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div>
|
<div className="text-center mb-16">
|
||||||
<form onSubmit={handleSubmit}>
|
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-gray-800 relative inline-block">
|
||||||
<div className="mb-6">
|
<span className="relative z-10">Contact Us</span>
|
||||||
<label htmlFor="name" className="block text-gray-700 font-medium mb-2">Your Name</label>
|
<div className="absolute -bottom-3 left-0 w-full h-1 bg-teal opacity-30"></div>
|
||||||
<input
|
</h2>
|
||||||
type="text"
|
<StarDivider color="teal" className="mt-4" />
|
||||||
id="name"
|
<p className="mt-6 max-w-3xl mx-auto text-gray-600">
|
||||||
name="name"
|
Have questions or want to learn more? Reach out to us and we'll get back to you as soon as possible.
|
||||||
value={formData.name}
|
</p>
|
||||||
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>
|
||||||
|
|
||||||
<div>
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||||
<div className="bg-gray-50 rounded-lg p-8 h-full">
|
<div>
|
||||||
<h3 className="font-playfair font-bold text-2xl mb-6 text-gray-800">Connect With Us</h3>
|
<form onSubmit={handleSubmit}>
|
||||||
|
<div className="mb-6">
|
||||||
<div className="space-y-6">
|
<label htmlFor="name" className="block text-gray-700 font-medium mb-2">Your Name</label>
|
||||||
<div className="flex items-start">
|
<input
|
||||||
<div className="bg-teal-light p-3 rounded-full mr-4">
|
type="text"
|
||||||
<i className="fas fa-map-marker-alt text-teal"></i>
|
id="name"
|
||||||
</div>
|
name="name"
|
||||||
<div>
|
value={formData.name}
|
||||||
<h4 className="font-medium mb-1">Our Studio</h4>
|
onChange={handleChange}
|
||||||
<p className="text-gray-600">123 Serenity Lane, Wellness District<br/>Dubai, United Arab Emirates</p>
|
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"
|
||||||
</div>
|
placeholder="Enter your name"
|
||||||
|
required
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-start">
|
<div className="mb-6">
|
||||||
<div className="bg-teal-light p-3 rounded-full mr-4">
|
<label htmlFor="email" className="block text-gray-700 font-medium mb-2">Email Address</label>
|
||||||
<i className="fas fa-envelope text-teal"></i>
|
<input
|
||||||
</div>
|
type="email"
|
||||||
<div>
|
id="email"
|
||||||
<h4 className="font-medium mb-1">Email Us</h4>
|
name="email"
|
||||||
<p className="text-gray-600">hello@pilateswithfadia.com</p>
|
value={formData.email}
|
||||||
<p className="text-gray-500 text-sm mt-1">We aim to respond within 24 hours</p>
|
onChange={handleChange}
|
||||||
</div>
|
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>
|
||||||
|
|
||||||
<div className="flex items-start">
|
<div className="mb-6">
|
||||||
<div className="bg-teal-light p-3 rounded-full mr-4">
|
<label htmlFor="subject" className="block text-gray-700 font-medium mb-2">Subject</label>
|
||||||
<i className="fas fa-phone-alt text-teal"></i>
|
<input
|
||||||
</div>
|
type="text"
|
||||||
<div>
|
id="subject"
|
||||||
<h4 className="font-medium mb-1">Call Us</h4>
|
name="subject"
|
||||||
<p className="text-gray-600">+971 50 123 4567</p>
|
value={formData.subject}
|
||||||
<p className="text-gray-500 text-sm mt-1">Sunday-Thursday: 9AM-7PM</p>
|
onChange={handleChange}
|
||||||
</div>
|
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>
|
||||||
|
|
||||||
<div className="flex items-start">
|
<div className="mb-6">
|
||||||
<div className="bg-teal-light p-3 rounded-full mr-4">
|
<label htmlFor="message" className="block text-gray-700 font-medium mb-2">Message</label>
|
||||||
<i className="fas fa-clock text-teal"></i>
|
<textarea
|
||||||
</div>
|
id="message"
|
||||||
<div>
|
name="message"
|
||||||
<h4 className="font-medium mb-1">Studio Hours</h4>
|
value={formData.message}
|
||||||
<p className="text-gray-600">
|
onChange={handleChange}
|
||||||
Monday-Friday: 7AM-9PM<br/>
|
rows={5}
|
||||||
Saturday: 8AM-6PM<br/>
|
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"
|
||||||
Sunday: 9AM-4PM
|
placeholder="Your message..."
|
||||||
</p>
|
required
|
||||||
</div>
|
></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="pt-6 border-t border-gray-200">
|
<button
|
||||||
<h4 className="font-medium mb-3">Follow Us</h4>
|
type="submit"
|
||||||
<div className="flex space-x-4">
|
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"
|
||||||
<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">
|
disabled={contactMutation.isPending}
|
||||||
<i className="fab fa-instagram"></i>
|
>
|
||||||
</a>
|
{contactMutation.isPending ? (
|
||||||
<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>
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
</a>
|
Sending...
|
||||||
<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>
|
"Send Message"
|
||||||
<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>
|
</button>
|
||||||
</a>
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -212,6 +222,8 @@ export function ContactSection() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<SectionDividerBottom color="teal" />
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue