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 { 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();
@ -53,13 +55,20 @@ export function ContactSection() {
};
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="text-center mb-16">
<ArabicDecoration>
<h2 className="text-3xl md:text-4xl font-playfair font-bold text-gray-800">Contact Us</h2>
</ArabicDecoration>
<p className="mt-8 max-w-3xl mx-auto text-gray-600">
<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>
@ -140,8 +149,8 @@ export function ContactSection() {
</div>
<div>
<div className="bg-gray-50 rounded-lg p-8 h-full">
<h3 className="font-playfair font-bold text-2xl mb-6 text-gray-800">Connect With Us</h3>
<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">
@ -212,6 +221,9 @@ export function ContactSection() {
</div>
</div>
</div>
</div>
<SectionDividerBottom color="teal" />
</section>
);
}