Contact Us page
This commit is contained in:
Emily Neighbour
parent
a9b6824efa
commit
13eea18683
@ -1,6 +1,183 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
import React, { useState } from "react";
|
||||||
|
|
||||||
export default function Page()
|
const ContactUs = () => {
|
||||||
{
|
const [formData, setFormData] = useState({
|
||||||
return( <p>Contact Us</p>)
|
name: "",
|
||||||
}
|
email: "",
|
||||||
|
message: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleChange = (e) => {
|
||||||
|
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log("Form submitted with data:", formData);
|
||||||
|
// Handle form submission, like sending data to a server
|
||||||
|
alert("Thank you for reaching out! We will get back to you soon.");
|
||||||
|
setFormData({ name: "", email: "", message: "" }); // Clear form
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-100 flex flex-col items-center py-10">
|
||||||
|
<div className="max-w-4xl mx-auto p-5 bg-white shadow-md rounded-lg">
|
||||||
|
<h1 className="text-3xl font-bold text-center text-gray-800 mb-6">
|
||||||
|
Contact Us
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-gray-600 text-center mb-6">
|
||||||
|
Have questions or concerns about earthquake preparedness? Contact us
|
||||||
|
using the form below or through the provided contact details.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Flexbox Layout for Form and Contact Details */}
|
||||||
|
<div className="flex flex-col md:flex-row">
|
||||||
|
|
||||||
|
{/* Contact Form */}
|
||||||
|
<div className="flex-1 mb-6 md:mb-0 md:mr-4">
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
className="bg-gray-50 p-6 rounded-lg shadow-lg"
|
||||||
|
>
|
||||||
|
<div className="mb-4">
|
||||||
|
<label
|
||||||
|
htmlFor="name"
|
||||||
|
className="block text-gray-700 font-medium mb-2"
|
||||||
|
>
|
||||||
|
Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
id="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Your Name"
|
||||||
|
className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-4">
|
||||||
|
<label
|
||||||
|
htmlFor="email"
|
||||||
|
className="block text-gray-700 font-medium mb-2"
|
||||||
|
>
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
id="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Your Email"
|
||||||
|
className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-4">
|
||||||
|
<label
|
||||||
|
htmlFor="message"
|
||||||
|
className="block text-gray-700 font-medium mb-2"
|
||||||
|
>
|
||||||
|
Message
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
name="message"
|
||||||
|
id="message"
|
||||||
|
value={formData.message}
|
||||||
|
onChange={handleChange}
|
||||||
|
rows="5"
|
||||||
|
placeholder="Your Message"
|
||||||
|
className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition duration-200"
|
||||||
|
>
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Details */}
|
||||||
|
<div className="flex-1 bg-gray-50 p-6 rounded-lg shadow-lg">
|
||||||
|
<h2 className="text-xl font-bold text-gray-800 mb-4">
|
||||||
|
Get in Touch
|
||||||
|
</h2>
|
||||||
|
<div className="mb-4">
|
||||||
|
<h3 className="text-gray-700 font-medium">Email</h3>
|
||||||
|
<p className="text-gray-600">support@earthquakesafety.org</p>
|
||||||
|
</div>
|
||||||
|
<div className="mb-4">
|
||||||
|
<h3 className="text-gray-700 font-medium">Phone</h3>
|
||||||
|
<p className="text-gray-600">+1 800 123 4567</p>
|
||||||
|
</div>
|
||||||
|
<div className="mb-4">
|
||||||
|
<h3 className="text-gray-700 font-medium">Address</h3>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
123 Earthquake Ave, Prepared City, CA 98765
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="text-xl font-bold text-gray-800 mb-4 mt-6">
|
||||||
|
Follow Us
|
||||||
|
</h2>
|
||||||
|
<div className="flex space-x-4">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-blue-600 hover:text-blue-800 transition duration-200"
|
||||||
|
>
|
||||||
|
<span className="sr-only">Twitter</span>
|
||||||
|
<svg
|
||||||
|
className="h-6 w-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M24 4.56a9.83 9.83..." />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-blue-600 hover:text-blue-800 transition duration-200"
|
||||||
|
>
|
||||||
|
<span className="sr-only">Facebook</span>
|
||||||
|
<svg
|
||||||
|
className="h-6 w-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M22.675 0h-21.35..." />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-blue-600 hover:text-blue-800 transition duration-200"
|
||||||
|
>
|
||||||
|
<span className="sr-only">LinkedIn</span>
|
||||||
|
<svg
|
||||||
|
className="h-6 w-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M22.23 0H1.77C0.8..." />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ContactUs;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user