hd-awesome-app/dist/pages/ContactUs.js

A React project with professional components for e-commerce websites

import React from "react";
const ContactUs = () => {
  return /*#__PURE__*/React.createElement("div", {
    className: "p-8 bg-gray-50"
  }, /*#__PURE__*/React.createElement("div", {
    className: "max-w-4xl mx-auto bg-white rounded-lg shadow-md p-6"
  }, /*#__PURE__*/React.createElement("h1", {
    className: "text-3xl font-bold text-blue-600 mb-4 text-center"
  }, "Contact Us"), /*#__PURE__*/React.createElement("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."), /*#__PURE__*/React.createElement("form", {
    className: "space-y-6"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
    htmlFor: "name",
    className: "block text-sm font-medium text-gray-700"
  }, "Full Name"), /*#__PURE__*/React.createElement("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: true
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
    htmlFor: "email",
    className: "block text-sm font-medium text-gray-700"
  }, "Email Address"), /*#__PURE__*/React.createElement("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: true
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
    htmlFor: "message",
    className: "block text-sm font-medium text-gray-700"
  }, "Your Message"), /*#__PURE__*/React.createElement("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: true
  })), /*#__PURE__*/React.createElement("button", {
    type: "submit",
    className: "w-full bg-blue-500 text-white py-3 rounded-md hover:bg-blue-600 transition"
  }, "Send Message")), /*#__PURE__*/React.createElement("div", {
    className: "mt-8"
  }, /*#__PURE__*/React.createElement("h2", {
    className: "text-2xl font-semibold text-blue-500 mb-3"
  }, "Our Contact Details"), /*#__PURE__*/React.createElement("ul", {
    className: "space-y-3 text-gray-700"
  }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("strong", null, "Address:"), " 123 E-Commerce Street, Suite 456, New York, NY 10001"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("strong", null, "Email:"), " ", /*#__PURE__*/React.createElement("a", {
    href: "mailto:support@ecommerce.com",
    className: "text-blue-500"
  }, "support@ecommerce.com")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("strong", null, "Phone:"), " ", /*#__PURE__*/React.createElement("a", {
    href: "tel:+1234567890",
    className: "text-blue-500"
  }, "+1 (234) 567-890")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("strong", null, "Business Hours:"), " Mon - Fri: 9:00 AM - 6:00 PM")))));
};
export default ContactUs;