Update contact form

This commit is contained in:
TheMaddax 2024-11-29 10:41:39 -06:00
parent c4c3388133
commit 4ef2181d17

View file

@ -1,5 +1,3 @@
import Contact from '../../components/home/Contact';
export default function ContactPage() {
return (
<div className="bg-white">
@ -13,8 +11,52 @@ export default function ContactPage() {
</p>
</div>
<div className="mt-16">
<Contact />
<div className="mt-16 max-w-xl mx-auto">
<form className="rounded-2xl bg-gray-50 p-10">
<div className="grid grid-cols-1 gap-y-6">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-900">
Name
</label>
<input
type="text"
name="name"
id="name"
className="mt-2 block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-800 sm:text-sm sm:leading-6"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-900">
Email
</label>
<input
type="email"
name="email"
id="email"
className="mt-2 block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-800 sm:text-sm sm:leading-6"
/>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-gray-900">
Message
</label>
<textarea
name="message"
id="message"
rows={4}
className="mt-2 block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-800 sm:text-sm sm:leading-6"
/>
</div>
<div>
<button
type="submit"
className="block w-full rounded-md bg-blue-800 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
>
Send Message
</button>
</div>
</div>
</form>
</div>
<div className="mt-10 flex flex-col items-center gap-4 text-base text-gray-600">