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";
|
"use client";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
const ContactUs = () => {
|
const ContactUs = () => {
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
@ -15,163 +16,152 @@ const ContactUs = () => {
|
|||||||
const handleSubmit = (e) => {
|
const handleSubmit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log("Form submitted with data:", formData);
|
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.");
|
alert("Thank you for reaching out! We will get back to you soon.");
|
||||||
setFormData({ name: "", email: "", message: "" }); // Clear form
|
setFormData({ name: "", email: "", message: "" });
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-100 flex flex-col items-center py-10">
|
<div
|
||||||
<div className="max-w-4xl mx-auto p-5 bg-white shadow-md rounded-lg">
|
className="h-screen relative text-white py-10 border border-black">
|
||||||
<h1 className="text-3xl font-bold text-center text-gray-800 mb-6">
|
<Image height={5000} width={5000} alt="Logo" className="border border-neutral-300 absolute z-10" src="/tsunamiWaves.jpg"/>
|
||||||
Contact Us
|
|
||||||
</h1>
|
{/* Overlay for readability */}
|
||||||
<p className="text-lg text-gray-600 text-center mb-6">
|
<div className="absolute overflow-hidden w-full h-full bg-black bg-opacity-40 flex flex-col items-center z-20">
|
||||||
Have questions or concerns about earthquake preparedness? Contact us
|
{/* Container */}
|
||||||
using the form below or through the provided contact details.
|
<div className="max-w-4xl mx-auto p-5">
|
||||||
</p>
|
{/* Header */}
|
||||||
|
<h1 className="text-4xl font-bold text-center text-white mb-6">
|
||||||
{/* Flexbox Layout for Form and Contact Details */}
|
Contact Us
|
||||||
<div className="flex flex-col md:flex-row">
|
</h1>
|
||||||
|
<p className="text-lg text-center text-gray-300 mb-6">
|
||||||
{/* Contact Form */}
|
Have questions or concerns about earthquake preparedness? Contact us
|
||||||
<div className="flex-1 mb-6 md:mb-0 md:mr-4">
|
using the form below or through the provided contact details.
|
||||||
<form
|
</p>
|
||||||
onSubmit={handleSubmit}
|
|
||||||
className="bg-gray-50 p-6 rounded-lg shadow-lg"
|
{/* Content Section */}
|
||||||
>
|
<div className="flex flex-col md:flex-row gap-6">
|
||||||
<div className="mb-4">
|
{/* Contact Form Section */}
|
||||||
<label
|
<div className="flex-1 bg-white bg-opacity-90 text-gray-800 rounded-lg shadow-lg p-6">
|
||||||
htmlFor="name"
|
<form onSubmit={handleSubmit}>
|
||||||
className="block text-gray-700 font-medium mb-2"
|
<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
|
Send Message
|
||||||
</label>
|
</button>
|
||||||
<input
|
</form>
|
||||||
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>
|
</div>
|
||||||
|
|
||||||
<h2 className="text-xl font-bold text-gray-800 mb-4 mt-6">
|
{/* Contact Details Section */}
|
||||||
Follow Us
|
<div className="flex-1 bg-white bg-opacity-90 text-gray-800 rounded-lg shadow-lg p-6">
|
||||||
</h2>
|
<h2 className="text-xl font-bold text-gray-800 mb-4">
|
||||||
<div className="flex space-x-4">
|
Get in Touch
|
||||||
<a
|
</h2>
|
||||||
href="#"
|
<div className="mb-4">
|
||||||
className="text-blue-600 hover:text-blue-800 transition duration-200"
|
<h3 className="text-gray-700 font-medium">Email</h3>
|
||||||
>
|
<p className="text-gray-600">support@earthquakesafety.org</p>
|
||||||
<span className="sr-only">Twitter</span>
|
</div>
|
||||||
<svg
|
<div className="mb-4">
|
||||||
className="h-6 w-6"
|
<h3 className="text-gray-700 font-medium">Phone</h3>
|
||||||
fill="currentColor"
|
<p className="text-gray-600">+1 800 123 4567</p>
|
||||||
viewBox="0 0 24 24"
|
</div>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<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..." />
|
<span className="sr-only">Instagram</span>
|
||||||
</svg>
|
<Image height={200} width={200} alt="Logo" className="z-10" src="/insta.webp"/>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-blue-600 hover:text-blue-800 transition duration-200"
|
className="w-20 h-20 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..." />
|
<span className="sr-only">Facebook</span>
|
||||||
</svg>
|
<Image height={200} width={200} alt="Logo" className="z-10" src="/facebook.webp"/>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-blue-600 hover:text-blue-800 transition duration-200"
|
className="w-20 h-20 p-4 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..." />
|
<span className="sr-only">X</span>
|
||||||
</svg>
|
<Image height={200} width={200} alt="Logo" className="z-10 rounded-lg" src="/x_logo.jpg"/>
|
||||||
</a>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -180,4 +170,4 @@ const ContactUs = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ContactUs;
|
export default ContactUs;
|
||||||
Loading…
x
Reference in New Issue
Block a user