280 lines
11 KiB
JavaScript
280 lines
11 KiB
JavaScript
import React, { useState } from 'react';
|
|
import PublicNavbar from '../components/PublicNavbar';
|
|
import PublicFooter from '../components/PublicFooter';
|
|
import { Button } from '../components/ui/button';
|
|
import { Card } from '../components/ui/card';
|
|
import { Input } from '../components/ui/input';
|
|
import { Label } from '../components/ui/label';
|
|
import { Textarea } from '../components/ui/textarea';
|
|
import { Checkbox } from '../components/ui/checkbox';
|
|
import { Mail, MapPin, Loader2 } from 'lucide-react';
|
|
import api from '../utils/api';
|
|
import { toast } from 'sonner';
|
|
|
|
const ContactUs = () => {
|
|
const [formData, setFormData] = useState({
|
|
firstName: '',
|
|
lastName: '',
|
|
email: '',
|
|
subject: '',
|
|
message: '',
|
|
consent: false
|
|
});
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleChange = (e) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: value
|
|
}));
|
|
};
|
|
|
|
const handleConsentChange = (checked) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
consent: checked
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
|
|
// Validation
|
|
if (!formData.firstName.trim()) {
|
|
toast.error('Please enter your first name');
|
|
return;
|
|
}
|
|
if (!formData.lastName.trim()) {
|
|
toast.error('Please enter your last name');
|
|
return;
|
|
}
|
|
if (!formData.email.trim()) {
|
|
toast.error('Please enter your email');
|
|
return;
|
|
}
|
|
if (!formData.subject.trim()) {
|
|
toast.error('Please enter a subject');
|
|
return;
|
|
}
|
|
if (!formData.message.trim()) {
|
|
toast.error('Please enter your message');
|
|
return;
|
|
}
|
|
if (!formData.consent) {
|
|
toast.error('Please consent to LOAF storing your information');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
await api.post('/contact', {
|
|
first_name: formData.firstName,
|
|
last_name: formData.lastName,
|
|
email: formData.email,
|
|
subject: formData.subject,
|
|
message: formData.message
|
|
});
|
|
|
|
toast.success('Message sent successfully! We\'ll get back to you soon.');
|
|
|
|
// Reset form
|
|
setFormData({
|
|
firstName: '',
|
|
lastName: '',
|
|
email: '',
|
|
subject: '',
|
|
message: '',
|
|
consent: false
|
|
});
|
|
} catch (error) {
|
|
console.error('Failed to send message:', error);
|
|
toast.error(error.response?.data?.detail || 'Failed to send message. Please try again.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<PublicNavbar />
|
|
|
|
<main className="bg-gradient-to-b from-[#e8e0f5] to-[#f1eef9] px-6 py-16">
|
|
<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" }}>
|
|
Contact Form
|
|
</h1>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{/* First Name & Last Name */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<Label htmlFor="firstName" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
First Name <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input
|
|
id="firstName"
|
|
name="firstName"
|
|
value={formData.firstName}
|
|
onChange={handleChange}
|
|
className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="lastName" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Last Name <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input
|
|
id="lastName"
|
|
name="lastName"
|
|
value={formData.lastName}
|
|
onChange={handleChange}
|
|
className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Email */}
|
|
<div>
|
|
<Label htmlFor="email" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Email <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Subject */}
|
|
<div>
|
|
<Label htmlFor="subject" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Subject <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input
|
|
id="subject"
|
|
name="subject"
|
|
value={formData.subject}
|
|
onChange={handleChange}
|
|
className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Message */}
|
|
<div>
|
|
<Label htmlFor="message" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Your Message <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Textarea
|
|
id="message"
|
|
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"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Consent Checkbox */}
|
|
<div className="flex items-start gap-3">
|
|
<Checkbox
|
|
id="consent"
|
|
checked={formData.consent}
|
|
onCheckedChange={handleConsentChange}
|
|
className="mt-1 border-2 border-[#ddd8eb] data-[state=checked]:bg-[#664fa3] data-[state=checked]:border-[#664fa3]"
|
|
/>
|
|
<Label htmlFor="consent" className="text-[#48286e] text-sm font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
I consent to LOAF storing my submitted information so they can respond to my inquiry <span className="text-red-500">*</span>
|
|
</Label>
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<Button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full py-6 text-lg font-semibold disabled:opacity-50"
|
|
style={{ fontFamily: "'Inter', sans-serif" }}
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<Loader2 className="h-5 w-5 animate-spin mr-2" />
|
|
Sending...
|
|
</>
|
|
) : (
|
|
'Submit'
|
|
)}
|
|
</Button>
|
|
</form>
|
|
</Card>
|
|
|
|
{/* Contact Information */}
|
|
<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" }}>
|
|
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">
|
|
<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>
|
|
<div>
|
|
<a
|
|
href="mailto:info@loaftx.org"
|
|
className="text-[#664fa3] text-xl font-semibold hover:text-[#48286e] transition-colors"
|
|
style={{ fontFamily: "'Inter', sans-serif" }}
|
|
>
|
|
info@loaftx.org
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Address Card */}
|
|
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg">
|
|
<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>
|
|
<div>
|
|
<p className="text-[#48286e] text-lg font-semibold mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
LOAF
|
|
</p>
|
|
<p className="text-[#664fa3] text-base leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
P.O. Box 7207<br />
|
|
Houston, Texas 77248-7207
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<PublicFooter />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContactUs;
|