2024-08-19 13:01:20 +00:00
<!--
This example requires some changes to your config:
```
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
],
}
```
-->
< div class = "relative isolate mt-20" > >
< div class = "mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2" >
< div class = "relative px-6 pb-20 lg:pt-4 pt-32 lg:static lg:px-8 lg:py-48" >
< div class = "mx-auto max-w-xl lg:mx-0 lg:max-w-lg" >
< h2 class = "text-3xl font-bold tracking-tight text-white" > Get in touch< / h2 >
< p class = "mt-6 text-lg leading-8 text-gray-300" > Whether you have a question about our services, need assistance, or just want to share feedback, our team is ready to help.< / p >
< dl class = "mt-10 space-y-4 text-base leading-7 text-gray-300" >
< div class = "flex gap-x-4" >
< dt class = "flex-none" >
< span class = "sr-only" > Address< / span >
< svg class = "h-7 w-6 text-gray-400" fill = "none" viewBox = "0 0 24 24" stroke-width = "1.5" stroke = "currentColor" aria-hidden = "true" >
< path stroke-linecap = "round" stroke-linejoin = "round" d = "M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" / >
< / svg >
< / dt >
< dd > Warehouse 88:89, Al Jaddaf Dry Docks< br > Dubai, United Arab Emirates, P.O Box 283182< / dd >
< / div >
< div class = "flex gap-x-4" >
< dt class = "flex-none" >
< span class = "sr-only" > Email< / span >
< svg class = "h-7 w-6 text-gray-400" fill = "none" viewBox = "0 0 24 24" stroke-width = "1.5" stroke = "currentColor" aria-hidden = "true" >
< path stroke-linecap = "round" stroke-linejoin = "round" d = "M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" / >
< / svg >
< / dt >
< dd > < u > < a class = "hover:text-indigo-400" href = "mailto:info@threefold.io" > info@threefold.io< / a > < / u > < / dd >
< / div >
< / dl >
< / div >
< / div >
< form action = "#" method = "POST" class = "px-6 pb-24 pt-20 sm:pb-32 lg:px-8 lg:py-48" >
< div class = "mx-auto max-w-xl lg:mr-0 lg:max-w-lg" >
< div class = "grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2" >
< div >
< label for = "first-name" class = "block text-sm font-semibold leading-6 text-white" > First name< / label >
< div class = "mt-2.5" >
< input type = "text" name = "first-name" id = "first-name" autocomplete = "given-name" class = "block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6" >
< / div >
< / div >
< div >
< label for = "last-name" class = "block text-sm font-semibold leading-6 text-white" > Last name< / label >
< div class = "mt-2.5" >
< input type = "text" name = "last-name" id = "last-name" autocomplete = "family-name" class = "block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6" >
< / div >
< / div >
< div class = "sm:col-span-2" >
< label for = "email" class = "block text-sm font-semibold leading-6 text-white" > Email< / label >
< div class = "mt-2.5" >
< input type = "email" name = "email" id = "email" autocomplete = "email" class = "block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6" >
< / div >
< / div >
< div class = "sm:col-span-2" >
< label for = "phone-number" class = "block text-sm font-semibold leading-6 text-white" > Phone number< / label >
< div class = "mt-2.5" >
< input type = "tel" name = "phone-number" id = "phone-number" autocomplete = "tel" class = "block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6" >
< / div >
< / div >
< div class = "sm:col-span-2" >
< label for = "message" class = "block text-sm font-semibold leading-6 text-white" > Message< / label >
< div class = "mt-2.5" >
< textarea name = "message" id = "message" rows = "4" class = "block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6" > < / textarea >
< / div >
< / div >
< / div >
< div class = "mt-8 flex justify-end" >
< button type = "submit" class = "rounded-md bg-indigo-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500" > Send message< / button >
< / div >
< / div >
< / form >
< / div >
< / div >
