← back to Sdcc Awards
cypressaward/frontend/app/contact/page.tsx
198 lines
'use client'
import { useState } from 'react'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Mail, Phone, MapPin, Send, Clock } from 'lucide-react'
export default function ContactPage() {
const [formData, setFormData] = useState({
name: '',
email: '',
subject: '',
message: '',
organization: ''
})
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
// Send email to steve@designerwallcoverings.com
const emailData = {
to: 'steve@' + 'designerwallcoverings.com', // Obfuscated
subject: `Cy Pres Contact: ${formData.subject}`,
body: `
Name: ${formData.name}
Email: ${formData.email}
Organization: ${formData.organization}
Subject: ${formData.subject}
Message: ${formData.message}
`
}
// In production, this would send via an API endpoint
console.log('Sending to:', emailData.to)
alert('Thank you for your message. We will respond within 1-2 business days.')
// Reset form
setFormData({
name: '',
email: '',
subject: '',
message: '',
organization: ''
})
}
return (
<div className="min-h-screen bg-gray-50 py-12">
<div className="max-w-6xl mx-auto px-4">
<div className="text-center mb-12">
<h1 className="text-4xl font-bold mb-4">Contact Us</h1>
<p className="text-xl text-gray-600">
Get in touch with our cy pres awards team
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
{/* Contact Information */}
<div className="md:col-span-1 space-y-6">
<Card className="p-6">
<Mail className="h-8 w-8 text-blue-600 mb-3" />
<h3 className="font-bold text-lg mb-2">Email Us</h3>
<p className="text-gray-600">support@cypresawards.org</p>
<p className="text-sm text-gray-500 mt-2">Response within 24-48 hours</p>
</Card>
<Card className="p-6">
<Phone className="h-8 w-8 text-green-600 mb-3" />
<h3 className="font-bold text-lg mb-2">Call Us</h3>
<p className="text-gray-600">1-800-CY-PRES-1</p>
<p className="text-sm text-gray-500 mt-2">Mon-Fri, 9am-5pm EST</p>
</Card>
<Card className="p-6">
<MapPin className="h-8 w-8 text-purple-600 mb-3" />
<h3 className="font-bold text-lg mb-2">Office Location</h3>
<p className="text-gray-600">
123 Legal Plaza<br />
Suite 456<br />
New York, NY 10001
</p>
</Card>
<Card className="p-6">
<Clock className="h-8 w-8 text-orange-600 mb-3" />
<h3 className="font-bold text-lg mb-2">Business Hours</h3>
<div className="text-sm text-gray-600 space-y-1">
<p>Monday - Friday: 9:00 AM - 6:00 PM EST</p>
<p>Saturday: 10:00 AM - 2:00 PM EST</p>
<p>Sunday: Closed</p>
</div>
</Card>
</div>
{/* Contact Form */}
<div className="md:col-span-2">
<Card className="p-8">
<h2 className="text-2xl font-bold mb-6">Send Us a Message</h2>
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium mb-2">Your Name *</label>
<input
type="text"
required
className="w-full p-3 border rounded-md"
value={formData.name}
onChange={(e) => setFormData({...formData, name: e.target.value})}
/>
</div>
<div>
<label className="block text-sm font-medium mb-2">Email Address *</label>
<input
type="email"
required
className="w-full p-3 border rounded-md"
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
/>
</div>
</div>
<div>
<label className="block text-sm font-medium mb-2">Organization</label>
<input
type="text"
className="w-full p-3 border rounded-md"
value={formData.organization}
onChange={(e) => setFormData({...formData, organization: e.target.value})}
/>
</div>
<div>
<label className="block text-sm font-medium mb-2">Subject *</label>
<select
required
className="w-full p-3 border rounded-md"
value={formData.subject}
onChange={(e) => setFormData({...formData, subject: e.target.value})}
>
<option value="">Select a subject</option>
<option value="general">General Inquiry</option>
<option value="nonprofit">Nonprofit Registration</option>
<option value="lawfirm">Law Firm Services</option>
<option value="opportunity">Cy Pres Opportunity</option>
<option value="technical">Technical Support</option>
<option value="media">Media Inquiry</option>
<option value="partnership">Partnership Opportunity</option>
</select>
</div>
<div>
<label className="block text-sm font-medium mb-2">Message *</label>
<textarea
required
rows={6}
className="w-full p-3 border rounded-md"
value={formData.message}
onChange={(e) => setFormData({...formData, message: e.target.value})}
placeholder="Please provide details about your inquiry..."
/>
</div>
<div className="flex justify-between items-center">
<p className="text-sm text-gray-600">* Required fields</p>
<Button type="submit" className="px-6 py-3">
<Send className="h-4 w-4 mr-2" />
Send Message
</Button>
</div>
</form>
</Card>
{/* FAQ Section */}
<Card className="p-8 mt-8">
<h3 className="text-xl font-bold mb-4">Frequently Asked Questions</h3>
<div className="space-y-4">
<div>
<p className="font-medium mb-1">What is the typical response time?</p>
<p className="text-sm text-gray-600">We typically respond to all inquiries within 1-2 business days.</p>
</div>
<div>
<p className="font-medium mb-1">How can I register my nonprofit?</p>
<p className="text-sm text-gray-600">Visit our <a href="/register-organization" className="text-blue-600 hover:underline">registration page</a> to submit your organization's information.</p>
</div>
<div>
<p className="font-medium mb-1">Are consultation calls free?</p>
<p className="text-sm text-gray-600">Yes, initial consultations for nonprofits and law firms are complimentary.</p>
</div>
</div>
</Card>
</div>
</div>
</div>
</div>
)
}