From 13eea186834af49968afd941d995948258950e18 Mon Sep 17 00:00:00 2001
From: Emily Neighbour <emily.neighbour@dyson.com>
Date: Mon, 28 Apr 2025 12:35:18 +0100
Subject: [PATCH] Contact Us page

---
 src/app/contact-us/page.tsx | 185 +++++++++++++++++++++++++++++++++++-
 1 file changed, 181 insertions(+), 4 deletions(-)

diff --git a/src/app/contact-us/page.tsx b/src/app/contact-us/page.tsx
index dbc1370..42c71ef 100644
--- a/src/app/contact-us/page.tsx
+++ b/src/app/contact-us/page.tsx
@@ -1,6 +1,183 @@
 "use client";
+import React, { useState } from "react";
 
-export default function Page()
-{
-    return( <p>Contact Us</p>)
-}
+const ContactUs = () => {
+  const [formData, setFormData] = useState({
+    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;