hd-awesome-app/src/pages/ContactUs.jsx

A React project with professional components for e-commerce websites

import React from "react";

const ContactUs = () => {
  return (
    <div className="p-8 bg-gray-50">
      <div className="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-6">
        <h1 className="text-3xl font-bold text-blue-600 mb-4 text-center">
          Contact Us
        </h1>
        <p className="text-lg text-gray-700 mb-6 text-center">
          Have a question, feedback, or need assistance? We're here to help!
          Reach out to us using the form below or through our contact details.
        </p>

        {/* Contact Form */}
        <form className="space-y-6">
          <div>
            <label
              htmlFor="name"
              className="block text-sm font-medium text-gray-700"
            >
              Full Name
            </label>
            <input
              type="text"
              id="name"
              placeholder="Enter your full name"
              className="mt-1 block w-full p-3 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
              required
            />
          </div>

          <div>
            <label
              htmlFor="email"
              className="block text-sm font-medium text-gray-700"
            >
              Email Address
            </label>
            <input
              type="email"
              id="email"
              placeholder="Enter your email address"
              className="mt-1 block w-full p-3 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
              required
            />
          </div>

          <div>
            <label
              htmlFor="message"
              className="block text-sm font-medium text-gray-700"
            >
              Your Message
            </label>
            <textarea
              id="message"
              rows="5"
              placeholder="Write your message here"
              className="mt-1 block w-full p-3 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
              required
            ></textarea>
          </div>

          <button
            type="submit"
            className="w-full bg-blue-500 text-white py-3 rounded-md hover:bg-blue-600 transition"
          >
            Send Message
          </button>
        </form>

        {/* Contact Details */}
        <div className="mt-8">
          <h2 className="text-2xl font-semibold text-blue-500 mb-3">
            Our Contact Details
          </h2>
          <ul className="space-y-3 text-gray-700">
            <li>
              <strong>Address:</strong> 123 E-Commerce Street, Suite 456, New
              York, NY 10001
            </li>
            <li>
              <strong>Email:</strong>{" "}
              <a href="mailto:support@ecommerce.com" className="text-blue-500">
                support@ecommerce.com
              </a>
            </li>
            <li>
              <strong>Phone:</strong>{" "}
              <a href="tel:+1234567890" className="text-blue-500">
                +1 (234) 567-890
              </a>
            </li>
            <li>
              <strong>Business Hours:</strong> Mon - Fri: 9:00 AM - 6:00 PM
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default ContactUs;