81 lines
3.9 KiB
TypeScript
81 lines
3.9 KiB
TypeScript
import { Phone, Mail, MapPin } from 'lucide-react';
|
|
|
|
export default function Contact() {
|
|
return (
|
|
<section className="relative bg-white py-24 sm:py-32">
|
|
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div className="mx-auto max-w-2xl space-y-16 divide-y divide-gray-100 lg:mx-0 lg:max-w-none">
|
|
<div className="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-3">
|
|
<div>
|
|
<h2 className="text-3xl font-bold tracking-tight text-gray-900">Get in Touch</h2>
|
|
<p className="mt-4 leading-7 text-gray-600">
|
|
Ready to elevate your financial strategy? Let's discuss how we can help you achieve your goals.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2 lg:gap-8">
|
|
<div className="rounded-2xl bg-gray-50 p-10">
|
|
<h3 className="text-base font-semibold leading-7 text-gray-900">Nationwide Financial Services</h3>
|
|
<dl className="mt-3 space-y-1 text-sm leading-6 text-gray-600">
|
|
<div className="flex gap-x-4">
|
|
<dt className="flex-none">
|
|
<span className="sr-only">Coverage</span>
|
|
<MapPin className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
|
</dt>
|
|
<dd>Headquartered in Albuquerque, New Mexico<br/>Serving clients across all 50 states</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|