jeffemmett
/
pwf-website-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 2025-05-07 03:44:29 +00:00
parent c814070374
commit a041af9174
1 changed files with 154 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/components/contact/contact-section.tsx
View File

@ -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,13 +55,20 @@ export function ContactSection() {
}; };
return ( return (
<section id="contact" className="py-16"> <section className="relative overflow-hidden">
<SectionDivider color="teal" />
<div className="relative py-20 teal-light-bg">
<IslamicPattern color="teal" opacity={15} />
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16"> <div className="text-center mb-16">
<ArabicDecoration> <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-gray-800">Contact Us</h2> <span className="relative z-10">Contact Us</span>
</ArabicDecoration> <div className="absolute -bottom-3 left-0 w-full h-1 bg-teal opacity-30"></div>
<p className="mt-8 max-w-3xl mx-auto text-gray-600"> </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. Have questions or want to learn more? Reach out to us and we'll get back to you as soon as possible.
</p> </p>
</div> </div>
@ -140,8 +149,8 @@ export function ContactSection() {
</div> </div>
<div> <div>
<div className="bg-gray-50 rounded-lg p-8 h-full"> <div className="bg-white rounded-lg p-8 h-full shadow-md">
<h3 className="font-playfair font-bold text-2xl mb-6 text-gray-800">Connect With Us</h3> <h3 className="font-playfair font-bold text-2xl mb-6 text-teal">Connect With Us</h3>
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-start"> <div className="flex items-start">
@ -212,6 +221,9 @@ export function ContactSection() {
</div> </div>
</div> </div>
</div> </div>
</div>
<SectionDividerBottom color="teal" />
</section> </section>
); );
} }