diff --git a/src/app/_components/layout/Navigation.tsx b/src/app/_components/layout/Navigation.tsx index f12ad89..e03b56a 100644 --- a/src/app/_components/layout/Navigation.tsx +++ b/src/app/_components/layout/Navigation.tsx @@ -25,6 +25,7 @@ const navigation: NavigationItem[] = [ { name: 'About', href: '/about', current: false }, { name: 'Faqs', href: '/faqs', current: false }, { name: 'Talent', href: '/talent', current: false }, + { name: 'Contact', href: '/contact', current: false }, // { // name: 'Speakers', // href: '#', diff --git a/src/app/api/contact/route.ts b/src/app/api/contact/route.ts new file mode 100644 index 0000000..96274f4 --- /dev/null +++ b/src/app/api/contact/route.ts @@ -0,0 +1,16 @@ +export async function POST(req: Request) { + + const reqBody = await req.json(); + + try { + return new Response('Success!', { + status: 200, + }) + } catch (error) { + console.error(error); + return new Response('Error!', { + status: 500, + }) + } +} + diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx new file mode 100644 index 0000000..d1a4e42 --- /dev/null +++ b/src/app/contact/page.tsx @@ -0,0 +1,209 @@ +'use client' + +import { BuildingOffice2Icon, EnvelopeIcon, PhoneIcon } from '@heroicons/react/24/outline' +import { useState } from 'react'; + +export default function ContactFormPage() { + + const [firstName, setFirstName] = useState(''); + const [lastName, setLastName] = useState(''); + const [email, setEmail] = useState(''); + const [phoneNumber, setPhoneNumber] = useState(''); + const [message, setMessage] = useState(''); + + async function handleSubmit(event: React.FormEvent) { + event.preventDefault(); + + const response = await fetch(`/api/contact`, { + method: 'POST', + body: JSON.stringify({ + firstName, + lastName, + email, + phoneNumber, + message + }), + headers: { + 'Content-type': 'application/json' + } + }); + + if (response.ok) { + window.alert('Success!'); + } else { + window.alert('Error'); + } + } + + + return ( +
+
+
+
+
+ +
+

+ Get in touch +

+

+ Connect with us! We have a full staff ready and willing + to assist and get you plugged into out network. Leave your + information and a team member will be in contact soon. +

+
+
+
+ Address +
+
+ {/* 545 Mavis Island */} +
+ Miami, Florida 33231 +
+
+
+
+ Telephone +
+
+ + +1 (555) 234-5678 + +
+
+
+
+ Email +
+
+ + info@grammerhub.com + +
+
+
+
+
+
+
+
+
+ +
+ setFirstName(e.target.value)} + value={firstName} + className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" + /> +
+
+
+ +
+ setLastName(e.target.value)} + value={lastName} + className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" + /> +
+
+
+ +
+ setEmail(e.target.value)} + value={email} + className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" + /> +
+
+
+ +
+ setPhoneNumber(e.target.value)} + value={phoneNumber} + className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" + /> +
+
+
+ +
+