marketing / sections / contact-sections
With Testimonial
07-with-testimonial.jsx
export default function Example() {
return (
<div className="relative isolate bg-white px-6 py-24 sm:py-32 lg:px-8 dark:bg-gray-900">
<svg
aria-hidden="true"
className="absolute inset-0 -z-10 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200 dark:stroke-white/10"
>
<defs>
<pattern
x="50%"
y={-64}
id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527"
width={200}
height={200}
patternUnits="userSpaceOnUse"
>
<path d="M100 200V.5M.5 .5H200" fill="none" />
</pattern>
</defs>
<svg x="50%" y={-64} className="overflow-visible fill-gray-50 dark:fill-gray-800/40">
<path
d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M299.5 800h201v201h-201Z"
strokeWidth={0}
/>
</svg>
<rect fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" width="100%" height="100%" strokeWidth={0} />
</svg>
<div className="mx-auto max-w-xl lg:max-w-4xl">
<h2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl dark:text-white">
Let’s talk about your project
</h2>
<p className="mt-2 text-lg/8 text-gray-600 dark:text-gray-400">
We help companies and individuals build out their brand guidelines.
</p>
<div className="mt-16 flex flex-col gap-16 sm:gap-y-20 lg:flex-row">
<form action="#" method="POST" className="lg:flex-auto">
<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 dark:text-white">
First name
</label>
<div className="mt-2.5">
<input
id="first-name"
name="first-name"
type="text"
autoComplete="given-name"
className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 backdrop-blur-sm placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
/>
</div>
</div>
<div>
<label htmlFor="last-name" className="block text-sm/6 font-semibold text-gray-900 dark:text-white">
Last name
</label>
<div className="mt-2.5">
<input
id="last-name"
name="last-name"
type="text"
autoComplete="family-name"
className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 backdrop-blur-sm placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
/>
</div>
</div>
<div>
<label htmlFor="budget" className="block text-sm/6 font-semibold text-gray-900 dark:text-white">
Budget
</label>
<div className="mt-2.5">
<input
id="budget"
name="budget"
type="text"
className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 backdrop-blur-sm placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
/>
</div>
</div>
<div>
<label htmlFor="website" className="block text-sm/6 font-semibold text-gray-900 dark:text-white">
Website
</label>
<div className="mt-2.5">
<input
id="website"
name="website"
type="url"
className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 backdrop-blur-sm placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
/>
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="message" className="block text-sm/6 font-semibold text-gray-900 dark:text-white">
Message
</label>
<div className="mt-2.5">
<textarea
id="message"
name="message"
rows={4}
className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 backdrop-blur-sm placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
defaultValue={''}
/>
</div>
</div>
</div>
<div className="mt-10">
<button
type="submit"
className="block w-full rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500"
>
Let’s talk
</button>
</div>
<p className="mt-4 text-sm/6 text-gray-500 dark:text-gray-400">
By submitting this form, I agree to the{' '}
<a href="#" className="font-semibold whitespace-nowrap text-indigo-600 dark:text-indigo-400">
privacy policy
</a>
.
</p>
</form>
<div className="lg:mt-6 lg:w-80 lg:flex-none">
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/workcation-logo-indigo-600.svg"
className="h-12 w-auto dark:hidden"
/>
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/workcation-logo-indigo-500.svg"
className="h-12 w-auto not-dark:hidden"
/>
<figure className="mt-10">
<blockquote className="text-lg/8 font-semibold text-gray-900 dark:text-white">
<p>
“Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias
molestiae. Numquam corrupti in laborum sed rerum et corporis.”
</p>
</blockquote>
<figcaption className="mt-10 flex gap-x-6">
<img
alt=""
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=96&h=96&q=80"
className="size-12 flex-none rounded-full bg-gray-50 dark:bg-gray-800"
/>
<div>
<div className="text-base font-semibold text-gray-900 dark:text-white">Brenna Goyette</div>
<div className="text-sm/6 text-gray-600 dark:text-gray-400">CEO of Workcation</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
)
}