andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor BecomeMember, BoardOfDirectors, ContactUs, Donate, MissionValues, and Resources pages for improved layout, styling, and accessibility; update component structure and enhance responsiveness.

Browse Source
This commit is contained in:
kayela
2025-12-18 16:34:14 -06:00
parent a9bdd1d0a6
commit 1d4ed96dc9
8 changed files with 401 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/pages/ContactUs.js
View File

@@ -10,7 +10,7 @@ import { Checkbox } from '../components/ui/checkbox';
import { Mail, MapPin, Loader2 } from 'lucide-react';
import api from '../utils/api';
import { toast } from 'sonner';
import { PiMapTrifoldBold } from "react-icons/pi";
const ContactUs = () => {
const [formData, setFormData] = useState({
firstName: '',
@@ -103,8 +103,8 @@ const ContactUs = () => {
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
{/* Contact Form */}
<Card className="p-8 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg">
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-8 bg-white rounded-2xl">
<h1 className="text-2xl sm:text-[28px] leading-5 font-bold text-[#48286e] mb-12" style={{ fontFamily: "'Poppins', sans-serif" }}>
Contact Form
</h1>
@@ -120,7 +120,7 @@ const ContactUs = () => {
name="firstName"
value={formData.firstName}
onChange={handleChange}
className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
className="border-2 border-[#ddd8eb] bg-[#eaedf4] focus:border-[#664fa3] rounded-full h-12 px-4"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required
/>
@@ -134,7 +134,7 @@ const ContactUs = () => {
name="lastName"
value={formData.lastName}
onChange={handleChange}
className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required
/>
@@ -152,7 +152,7 @@ const ContactUs = () => {
type="email"
value={formData.email}
onChange={handleChange}
className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required
/>
@@ -168,7 +168,7 @@ const ContactUs = () => {
name="subject"
value={formData.subject}
onChange={handleChange}
className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required
/>
@@ -184,7 +184,7 @@ const ContactUs = () => {
name="message"
value={formData.message}
onChange={handleChange}
className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-2xl min-h-[150px] px-4 py-3 resize-none"
className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-2xl min-h-[150px] px-4 py-3 resize-none"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required
/>
@@ -226,21 +226,21 @@ const ContactUs = () => {
<div className="space-y-6">
{/* Message Card */}
<Card className="p-8 bg-gradient-to-r from-[#664fa3] to-[#48286e] rounded-2xl shadow-lg text-white">
<p className="text-xl leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
If you have questions, or are interested in joining, we would love hearing from you.
</p>
</Card>
{/* Email Card */}
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg">
<Card className="p-6 bg-white rounded-2xl">
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-[#e8e0f5] rounded-full flex items-center justify-center flex-shrink-0">
<Mail className="h-6 w-6 text-[#664fa3]" />
<div className="flex items-center justify-center flex-shrink-0">
<Mail className="size-12 text-[#664fa3]" />
</div>
<div>
<a
href="mailto:info@loaftx.org"
className="text-[#664fa3] text-xl font-semibold hover:text-[#48286e] transition-colors"
className="text-[#865edf] text-xl font-semibold hover:text-[#48286e] transition-colors"
style={{ fontFamily: "'Inter', sans-serif" }}
>
info@loaftx.org
@@ -250,16 +250,16 @@ const ContactUs = () => {
</Card>
{/* Address Card */}
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg">
<Card className="p-6 bg-white rounded-2xl ">
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-[#e8e0f5] rounded-full flex items-center justify-center flex-shrink-0">
<MapPin className="h-6 w-6 text-[#664fa3]" />
<div className="flex items-center justify-center flex-shrink-0">
<PiMapTrifoldBold className="size-12 text-[#664fa3]" />
</div>
<div>
<p className="text-[#48286e] text-lg font-semibold mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
<p className="text-[#48286e] text-[28px] font-semibold mb-1" style={{ fontFamily: "'Poppins', sans-serif" }}>
LOAF
</p>
<p className="text-[#664fa3] text-base leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-[#48286e] text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
P.O. Box 7207<br />
Houston, Texas 77248-7207
</p>