Skip to content

contact page and api #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sause668 wants to merge 4 commits into
base: staging
Choose a base branch
from
Open

contact page and api #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
91caa14
contact page and api
Feb 9, 2025
9e6626e
error handling
Feb 21, 2025
cda025e
error handling 2
Feb 21, 2025
686caad
error handing removed
Feb 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/app/_components/layout/Navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: '#',
Expand Down
16 changes: 16 additions & 0 deletions src/app/api/contact/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
})
}
}

209 changes: 209 additions & 0 deletions src/app/contact/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<HTMLFormElement>) {
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 (
<div className="relative isolate bg-white">
<div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
<div className="relative px-6 pb-20 pt-24 sm:pt-32 lg:static lg:px-8 lg:py-48">
<div className="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
<div className="absolute inset-y-0 left-0 -z-10 w-full overflow-hidden bg-gray-100 ring-1 ring-gray-900/10 lg:w-1/2">
<svg
aria-hidden="true"
className="absolute inset-0 size-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
>
<defs>
<pattern
x="100%"
y={-1}
id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527"
width={200}
height={200}
patternUnits="userSpaceOnUse"
>
<path d="M130 200V.5M.5 .5H200" fill="none" />
</pattern>
</defs>
<rect fill="white" width="100%" height="100%" strokeWidth={0} />
<svg x="100%" y={-1} className="overflow-visible fill-gray-50">
<path d="M-470.5 0h201v201h-201Z" strokeWidth={0} />
</svg>
<rect fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" width="100%" height="100%" strokeWidth={0} />
</svg>
</div>
<h2 className="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
Get in touch
</h2>
<p className="mt-6 text-lg/8 text-gray-600">
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.
</p>
<dl className="mt-10 space-y-4 text-base/7 text-gray-600">
<div className="flex gap-x-4">
<dt className="flex-none">
<span className="sr-only">Address</span>
<BuildingOffice2Icon aria-hidden="true" className="h-7 w-6 text-gray-400" />
</dt>
<dd>
{/* 545 Mavis Island */}
<br />
Miami, Florida 33231
</dd>
</div>
<div className="flex gap-x-4">
<dt className="flex-none">
<span className="sr-only">Telephone</span>
<PhoneIcon aria-hidden="true" className="h-7 w-6 text-gray-400" />
</dt>
<dd>
<a href="tel:+1 (555) 234-5678" className="hover:text-gray-900">
+1 (555) 234-5678
</a>
</dd>
</div>
<div className="flex gap-x-4">
<dt className="flex-none">
<span className="sr-only">Email</span>
<EnvelopeIcon aria-hidden="true" className="h-7 w-6 text-gray-400" />
</dt>
<dd>
<a href="mailto:info@grammerhub.com" className="hover:text-gray-900">
info@grammerhub.com
</a>
</dd>
</div>
</dl>
</div>
</div>
<form onSubmit={handleSubmit} className="px-6 pb-24 pt-20 sm:pb-32 lg:px-8 lg:py-48">
<div className="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
<div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label htmlFor="first-name" className="block text-sm/6 font-semibold text-gray-900">
First name
</label>
<div className="mt-2.5">
<input
id="first-name"
name="first-name"
type="text"
autoComplete="given-name"
onChange={(e)=>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"
/>
</div>
</div>
<div>
<label htmlFor="last-name" className="block text-sm/6 font-semibold text-gray-900">
Last name
</label>
<div className="mt-2.5">
<input
id="last-name"
name="last-name"
type="text"
autoComplete="family-name"
onChange={(e)=>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"
/>
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="email" className="block text-sm/6 font-semibold text-gray-900">
Email
</label>
<div className="mt-2.5">
<input
id="email"
name="email"
type="email"
autoComplete="email"
onChange={(e)=>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"
/>
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="phone-number" className="block text-sm/6 font-semibold text-gray-900">
Phone number
</label>
<div className="mt-2.5">
<input
id="phone-number"
name="phone-number"
type="tel"
autoComplete="tel"
onChange={(e)=>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"
/>
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="message" className="block text-sm/6 font-semibold text-gray-900">
Message
</label>
<div className="mt-2.5">
<textarea
id="message"
name="message"
rows={4}
onChange={(e)=>setMessage(e.target.value)}
value={message}
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"
/>
</div>
</div>
</div>
<div className="mt-8 flex justify-end">
<button
type="submit"
className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Send message
</button>
</div>
</div>
</form>
</div>
</div>
)
}