contact us styling
This commit is contained in:
Emily Neighbour
parent
13eea18683
commit
2feb2434c2
BIN
public/facebook.webp
Normal file
BIN
public/facebook.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/insta.webp
Normal file
BIN
public/insta.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
BIN
public/linkedIn.png
Normal file
BIN
public/linkedIn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
public/tsunamiWaves.jpg
Normal file
BIN
public/tsunamiWaves.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 464 KiB |
BIN
public/x_logo.jpg
Normal file
BIN
public/x_logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
const ContactUs = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
@ -15,163 +16,152 @@ const ContactUs = () => {
|
||||
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
|
||||
setFormData({ name: "", email: "", message: "" });
|
||||
};
|
||||
|
||||
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"
|
||||
<div
|
||||
className="h-screen relative text-white py-10 border border-black">
|
||||
<Image height={5000} width={5000} alt="Logo" className="border border-neutral-300 absolute z-10" src="/tsunamiWaves.jpg"/>
|
||||
|
||||
{/* Overlay for readability */}
|
||||
<div className="absolute overflow-hidden w-full h-full bg-black bg-opacity-40 flex flex-col items-center z-20">
|
||||
{/* Container */}
|
||||
<div className="max-w-4xl mx-auto p-5">
|
||||
{/* Header */}
|
||||
<h1 className="text-4xl font-bold text-center text-white mb-6">
|
||||
Contact Us
|
||||
</h1>
|
||||
<p className="text-lg text-center text-gray-300 mb-6">
|
||||
Have questions or concerns about earthquake preparedness? Contact us
|
||||
using the form below or through the provided contact details.
|
||||
</p>
|
||||
|
||||
{/* Content Section */}
|
||||
<div className="flex flex-col md:flex-row gap-6">
|
||||
{/* Contact Form Section */}
|
||||
<div className="flex-1 bg-white bg-opacity-90 text-gray-800 rounded-lg shadow-lg p-6">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<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"
|
||||
>
|
||||
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>
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</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"
|
||||
{/* Contact Details Section */}
|
||||
<div className="flex-1 bg-white bg-opacity-90 text-gray-800 rounded-lg shadow-lg p-6">
|
||||
<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 justify-around items-center">
|
||||
<a
|
||||
href="#"
|
||||
className="w-20 h-20 text-blue-600 hover:text-blue-800 transition duration-200"
|
||||
>
|
||||
<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"
|
||||
<span className="sr-only">Instagram</span>
|
||||
<Image height={200} width={200} alt="Logo" className="z-10" src="/insta.webp"/>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="w-20 h-20 text-blue-600 hover:text-blue-800 transition duration-200"
|
||||
>
|
||||
<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"
|
||||
<span className="sr-only">Facebook</span>
|
||||
<Image height={200} width={200} alt="Logo" className="z-10" src="/facebook.webp"/>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="w-20 h-20 p-4 text-blue-600 hover:text-blue-800 transition duration-200"
|
||||
>
|
||||
<path d="M22.23 0H1.77C0.8..." />
|
||||
</svg>
|
||||
</a>
|
||||
<span className="sr-only">X</span>
|
||||
<Image height={200} width={200} alt="Logo" className="z-10 rounded-lg" src="/x_logo.jpg"/>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="w-20 h-20 flex items-center text-blue-600 hover:text-blue-800 transition duration-200"
|
||||
>
|
||||
<span className="sr-only">LinkedIn</span>
|
||||
<Image height={200} width={200} alt="Logo" className="z-10" src="/linkedIn.png"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -180,4 +170,4 @@ const ContactUs = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactUs;
|
||||
export default ContactUs;
|
||||
Loading…
x
Reference in New Issue
Block a user