52 lines
2.4 KiB
React
52 lines
2.4 KiB
React
|
import React from 'react';
|
||
|
|
|
||
|
|
const ContactPage = () => {
|
||
|
|
async function contactForm(formData) {
|
||
|
|
"use server";
|
||
|
|
const rawFormData = {
|
||
|
|
name: formData.get('name'),
|
||
|
|
email: formData.get('email'),
|
||
|
|
message: formData.get('message'),
|
||
|
|
};
|
||
|
|
console.log(rawFormData);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-gray-100 mx-auto text-gray-900 px-4 pt-8">
|
||
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-6">Contact Techaro Computing Canada</h1>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
|
|
<div className="text-gray-900">
|
||
|
|
<h2 className="text-xl font-semibold mb-4">Get in Touch</h2>
|
||
|
|
<p className="mb-4">We would love to hear from you. Please fill out the form below or use our contact information.</p>
|
||
|
|
|
||
|
|
<h3 className="text-lg font-semibold mb-2">Contact Information</h3>
|
||
|
|
<p>Email: sales@techaro.lol</p>
|
||
|
|
<p>Phone: (123) 456-7890</p>
|
||
|
|
<p>Address: 123 Tech Street, Toronto, ON M5V 1J2</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="pb-4">
|
||
|
|
<h2 className="text-xl font-semibold mb-4">Contact Form</h2>
|
||
|
|
<form className="space-y-4" action={contactForm}>
|
||
|
|
<div>
|
||
|
|
<label htmlFor="name" className="block mb-1">Name</label>
|
||
|
|
<input disabled type="text" id="name" name="name" className="w-full px-3 py-2 border rounded" required />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label htmlFor="email" className="block mb-1">Email</label>
|
||
|
|
<input disabled type="email" id="email" name="email" className="w-full px-3 py-2 border rounded" required />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label htmlFor="message" className="block mb-1">Message</label>
|
||
|
|
<textarea disabled id="message" name="message" rows="4" className="w-full px-3 py-2 border rounded" required></textarea>
|
||
|
|
</div>
|
||
|
|
<button type="submit" disabled className="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">Send Message</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ContactPage;
|