<div class="bg-gray-100 lg:h-screen relative">
<div class="container mx-auto h-full flex flex-row justify-center items-center">
<div class="w-full mx-auto h-3/4 flex flex-col lg:flex-row justify-center items-center bg-white">
<div class="hidden lg:block lg:w-5/12 h-full p-4">
<div class="h-full bg-indigo-800 rounded-lg p-8 flex flex-col justify-between relative overflow-hidden">
<div>
<h3 class="text-white font-black text-3xl mt-12">
Contact Information
</h3>
<p class="text-gray-200 mt-4">
Fill up the form and our team will get back to you within 24 hours.
</p>
</div>
<div class="relative z-20">
<div class="w-72">
<ul class="grid grid-cols-5 gap-4">
<li class="flex flex-row justify-center">
<a href="https://facebook.com" target="_blank">
<svg
height="100%"
class="h-5 w-5 text-gray-100"
fill="currentColor"
style="
fill-rule: evenodd;
clip-rule: evenodd;
stroke-linejoin: round;
stroke-miterlimit: 2;
"
version="1.1"
viewBox="0 0 512 512"
width="100%"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:serif="http://www.serif.com/"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
d="M512,257.555c0,-141.385 -114.615,-256 -256,-256c-141.385,0 -256,114.615 -256,256c0,127.777 93.616,233.685 216,252.89l0,-178.89l-65,0l0,-74l65,0l0,-56.4c0,-64.16 38.219,-99.6 96.695,-99.6c28.009,0 57.305,5 57.305,5l0,63l-32.281,0c-31.801,0 -41.719,19.733 -41.719,39.978l0,48.022l71,0l-11.35,74l-59.65,0l0,178.89c122.385,-19.205 216,-125.113 216,-252.89Z"
style="fill-rule: nonzero"
/>
</svg>
</a>
</li>
<li class="flex flex-row justify-center">
<a href="https://instagram.com" target="_blank">
<svg
class="h-5 w-5 text-gray-100"
fill="currentColor"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 56.7 56.7"
enable-background="new 0 0 56.7 56.7"
xml:space="preserve"
>
<g>
<path
d="M28.2,16.7c-7,0-12.8,5.7-12.8,12.8s5.7,12.8,12.8,12.8S41,36.5,41,29.5S35.2,16.7,28.2,16.7z M28.2,37.7
c-4.5,0-8.2-3.7-8.2-8.2s3.7-8.2,8.2-8.2s8.2,3.7,8.2,8.2S32.7,37.7,28.2,37.7z"
/>
<circle cx="41.5" cy="16.4" r="2.9" />
<path
d="M49,8.9c-2.6-2.7-6.3-4.1-10.5-4.1H17.9c-8.7,0-14.5,5.8-14.5,14.5v20.5c0,4.3,1.4,8,4.2,10.7c2.7,2.6,6.3,3.9,10.4,3.9
h20.4c4.3,0,7.9-1.4,10.5-3.9c2.7-2.6,4.1-6.3,4.1-10.6V19.3C53,15.1,51.6,11.5,49,8.9z M48.6,39.9c0,3.1-1.1,5.6-2.9,7.3
s-4.3,2.6-7.3,2.6H18c-3,0-5.5-0.9-7.3-2.6C8.9,45.4,8,42.9,8,39.8V19.3c0-3,0.9-5.5,2.7-7.3c1.7-1.7,4.3-2.6,7.3-2.6h20.6
c3,0,5.5,0.9,7.3,2.7c1.7,1.8,2.7,4.3,2.7,7.2V39.9L48.6,39.9z"
/>
</g>
</svg>
</a>
</li>
<li class="flex flex-row justify-center">
<a href="https://youtube.com" target="_blank">
<svg
enable-background="new 0 0 32 32"
class="h-5 w-5 text-gray-100"
fill="currentColor"
version="1.1"
viewBox="0 0 32 32"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g id="OUTLINE_copy_2">
<g>
<g><polygon points="13.83,19.259 19.262,16 13.83,12.741 " /></g>
<g>
<path
d="M16,0C7.164,0,0,7.163,0,16s7.164,16,16,16s16-7.164,16-16S24.836,0,16,0z M24.688,16.701c0,1.5-0.174,3-0.174,3 s-0.17,1.278-0.69,1.839c-0.661,0.738-1.401,0.742-1.741,0.786C19.651,22.512,16,22.518,16,22.518s-4.518-0.044-5.908-0.186 c-0.387-0.077-1.254-0.055-1.916-0.792c-0.521-0.562-0.69-1.839-0.69-1.839s-0.174-1.499-0.174-3v-1.406 c0-1.5,0.174-2.999,0.174-2.999s0.17-1.278,0.69-1.841C8.837,9.716,9.577,9.712,9.917,9.67c2.431-0.188,6.079-0.188,6.079-0.188 h0.008c0,0,3.648,0,6.079,0.188c0.339,0.042,1.08,0.046,1.741,0.784c0.521,0.563,0.69,1.841,0.69,1.841s0.174,1.5,0.174,3V16.701 z"
/>
</g>
</g>
</g>
</svg>
</a>
</li>
<li class="flex flex-row justify-center">
<a href="https://github.com" target="_blank">
<svg
height="512px"
class="h-5 w-5 text-gray-100"
fill="currentColor"
id="Layer_1"
style="enable-background: new 0 0 512 512"
version="1.1"
viewBox="0 0 512 512"
width="512px"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g>
<path
class="st0"
d="M256,32C132.3,32,32,134.8,32,261.7c0,101.5,64.2,187.5,153.2,217.9c11.2,2.1,15.3-5,15.3-11.1 c0-5.5-0.2-19.9-0.3-39.1c-62.3,13.9-75.5-30.8-75.5-30.8c-10.2-26.5-24.9-33.6-24.9-33.6c-20.3-14.3,1.5-14,1.5-14 c22.5,1.6,34.3,23.7,34.3,23.7c20,35.1,52.4,25,65.2,19.1c2-14.8,7.8-25,14.2-30.7c-49.7-5.8-102-25.5-102-113.5 c0-25.1,8.7-45.6,23-61.6c-2.3-5.8-10-29.2,2.2-60.8c0,0,18.8-6.2,61.6,23.5c17.9-5.1,37-7.6,56.1-7.7c19,0.1,38.2,2.6,56.1,7.7 c42.8-29.7,61.5-23.5,61.5-23.5c12.2,31.6,4.5,55,2.2,60.8c14.3,16.1,23,36.6,23,61.6c0,88.2-52.4,107.6-102.3,113.3 c8,7.1,15.2,21.1,15.2,42.5c0,30.7-0.3,55.5-0.3,63c0,6.1,4,13.3,15.4,11C415.9,449.1,480,363.1,480,261.7 C480,134.8,379.7,32,256,32z"
/>
</g>
</svg>
</a>
</li>
<li class="flex flex-row justify-center">
<a href="https://dribbble.com" target="_blank">
<svg
enable-background="new 0 0 56.693 56.693"
class="h-5 w-5 text-gray-100"
fill="currentColor"
height="56.693px"
id="Layer_1"
version="1.1"
viewBox="0 0 56.693 56.693"
width="56.693px"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
clip-rule="evenodd"
d="M52.43,24.152c-0.324-1.588-0.811-3.152-1.441-4.646 c-0.619-1.467-1.387-2.879-2.279-4.199c-0.885-1.309-1.9-2.539-3.018-3.656c-1.117-1.119-2.348-2.135-3.656-3.018 c-1.32-0.895-2.734-1.66-4.199-2.281c-1.494-0.629-3.057-1.117-4.646-1.439c-1.627-0.334-3.303-0.504-4.977-0.504 c-1.676,0-3.35,0.17-4.979,0.504c-1.588,0.322-3.152,0.811-4.645,1.439c-1.465,0.621-2.879,1.387-4.201,2.281 c-1.309,0.883-2.539,1.898-3.656,3.018c-1.118,1.117-2.132,2.348-3.016,3.656c-0.893,1.32-1.66,2.732-2.279,4.199 C4.805,21,4.32,22.564,3.995,24.152c-0.333,1.625-0.502,3.301-0.502,4.976c0,1.678,0.169,3.354,0.502,4.98 c0.325,1.588,0.811,3.152,1.442,4.645c0.619,1.465,1.387,2.881,2.279,4.201c0.884,1.309,1.898,2.537,3.016,3.656 c1.117,1.117,2.348,2.131,3.656,3.016c1.322,0.893,2.736,1.66,4.201,2.279c1.492,0.633,3.057,1.115,4.645,1.441 c1.629,0.336,3.303,0.504,4.979,0.504c1.674,0,3.35-0.168,4.977-0.504c1.59-0.326,3.152-0.809,4.646-1.441 c1.465-0.619,2.879-1.387,4.199-2.279c1.309-0.885,2.539-1.898,3.656-3.016c1.117-1.119,2.133-2.348,3.018-3.656 c0.893-1.32,1.66-2.736,2.279-4.201c0.631-1.492,1.117-3.057,1.441-4.645c0.334-1.627,0.502-3.303,0.502-4.98 C52.932,27.453,52.764,25.777,52.43,24.152z M49.316,28.919c-0.305-0.066-7.449-1.604-14.703-0.692 c-0.148-0.361-0.299-0.725-0.455-1.09c-0.439-1.033-0.912-2.057-1.404-3.062c8.338-3.402,11.723-8.297,11.762-8.355 C47.477,19.314,49.268,23.908,49.316,28.919z M42.156,13.285c-0.053,0.082-3.059,4.658-11.027,7.645 c-3.609-6.631-7.574-11.898-7.891-12.316c1.596-0.387,3.26-0.596,4.975-0.596C33.559,8.018,38.436,10.01,42.156,13.285z M23.156,8.631c0,0.002-0.004,0.004-0.004,0.004s-0.023,0.006-0.062,0.014C23.111,8.643,23.135,8.639,23.156,8.631z M19.205,10.035 c0.281,0.377,4.186,5.67,7.84,12.164c-10.137,2.693-18.934,2.588-19.492,2.578C8.925,18.238,13.318,12.816,19.205,10.035z M7.102,29.128c0-0.225,0.01-0.445,0.018-0.667c0.372,0.008,10.804,0.245,21.673-3.008c0.605,1.184,1.184,2.387,1.713,3.589 c-0.279,0.078-0.557,0.162-0.832,0.252c-11.393,3.682-17.172,13.934-17.172,13.934s0.008,0.006,0.008,0.01 C9.149,39.497,7.102,34.552,7.102,29.128z M28.213,50.241c-5.109,0-9.795-1.816-13.447-4.838c0.277,0.225,0.473,0.369,0.473,0.369 s4.047-8.826,16.566-13.188c0.047-0.018,0.094-0.031,0.141-0.045c2.971,7.719,4.197,14.184,4.51,16.029 C33.922,49.646,31.137,50.241,28.213,50.241z M40.01,46.64c-0.215-1.275-1.34-7.471-4.109-15.08 c6.814-1.09,12.721,0.779,13.156,0.922C48.117,38.364,44.75,43.438,40.01,46.64z"
fill-rule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div class="rounded-full w-24 h-24 absolute bottom-16 right-16 bg-green-600 z-10"></div>
<div class="rounded-full w-72 h-72 absolute -bottom-32 -right-32 bg-purple-500"></div>
</div>
</div>
<div class="w-full lg:w-7/12 pr-8 pl-4">
<h1 class="text-gray-800 font-black text-xl lg:text-3xl mt-16">
Love to hear from you,
<span class="inline-block lg:block">Get in touch.</span>
</h1>
<form method="POST" class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-3">
<div class="mb-4">
<label class="mb-1 block text-gray-500" for="name">Name*</label>
<input type="text" name="name" id="name" placeholder="Enter your name.." class="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-12" />
</div>
<div class="mb-4">
<label class="mb-1 block text-gray-500" for="email">Email Address*</label>
<input type="email" name="email" id="email" placeholder="Enter your email address.." class="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-12" />
</div>
<div class="mb-4">
<label class="mb-1 block text-gray-500" for="phone">Phone Number*</label>
<input type="number" name="phone" id="phone" placeholder="Enter your phone number.." class="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-12" />
</div>
<div class="mb-4">
<label class="mb-1 block text-gray-500" for="name">What are you interested in?*</label>
<select name="interested" id="interested" class="w-full bg-white px-3 h-12 border border-gray-200 rounded-md text-gray-500">
<option value="Design & Branding">Design & Branding</option>
<option value="Web Development">Web Development</option>
<option value="SEO">SEO</option>
<option value="Digital Marketing">Digital Marketing</option>
</select>
</div>
<div class="mb-4 md:col-span-2">
<label class="mb-1 block text-gray-500" for="message">Message*</label>
<textarea name="message" id="message" class="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-32"></textarea>
</div>
<div class="py-4">
<button type="submit"
class="group relative w-full flex justify-center p-4 border border-transparent font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Submit
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block ml-2 -rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
const Contact = () => {
return (
<div className="bg-gray-100 lg:h-screen relative">
<div className="container mx-auto h-full flex flex-row justify-center items-center">
<div className="w-full mx-auto h-3/4 flex flex-col lg:flex-row justify-center items-center bg-white">
<div className="hidden lg:block lg:w-5/12 h-full p-4">
<div className="h-full bg-indigo-800 rounded-lg p-8 flex flex-col justify-between relative overflow-hidden">
<div>
<h3 className="text-white font-black text-3xl mt-12">
Contact Information
</h3>
<p className="text-gray-200 mt-4">
Fill up the form and our team will get back
to you within 24 hours.
</p>
</div>
<div className="relative z-20">
@include('partials.social', ['dark' =>
'100'])
</div>
<div className="rounded-full w-24 h-24 absolute bottom-16 right-16 bg-green-600 z-10" />
<div className="rounded-full w-72 h-72 absolute -bottom-32 -right-32 bg-purple-500" />
</div>
</div>
<div className="w-full lg:w-7/12 pr-8 pl-4">
<h1 className="text-gray-800 font-black text-xl lg:text-3xl mt-16">
Love to hear from you,
<span className="inline-block lg:block">
Get in touch.
</span>
</h1>
<form
method="POST"
className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-3"
>
<div className="mb-4">
<label
className="mb-1 block text-gray-500"
htmlFor="name"
>
Name*
</label>
<input
type="text"
name="name"
id="name"
placeholder="Enter your name.."
className="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-12"
/>
</div>
<div className="mb-4">
<label
className="mb-1 block text-gray-500"
htmlFor="email"
>
Email Address*
</label>
<input
type="email"
name="email"
id="email"
placeholder="Enter your email address.."
className="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-12"
/>
</div>
<div className="mb-4">
<label
className="mb-1 block text-gray-500"
htmlFor="phone"
>
Phone Number*
</label>
<input
type="number"
name="phone"
id="phone"
placeholder="Enter your phone number.."
className="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-12"
/>
</div>
<div className="mb-4">
<label
className="mb-1 block text-gray-500"
htmlFor="name"
>
What are you interested in?*
</label>
<select
name="interested"
id="interested"
className="w-full bg-white px-3 h-12 border border-gray-200 rounded-md text-gray-500"
>
<option value="Design & Branding">
Design & Branding
</option>
<option value="Web Development">
Web Development
</option>
<option value="SEO">SEO</option>
<option value="Digital Marketing">
Digital Marketing
</option>
</select>
</div>
<div className="mb-4 md:col-span-2">
<label
className="mb-1 block text-gray-500"
htmlFor="message"
>
Message*
</label>
<textarea
name="message"
id="message"
className="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-32"
defaultValue={""}
/>
</div>
<div className="py-4">
<button
type="submit"
className="group relative w-full flex justify-center p-4 border border-transparent font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Submit
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 inline-block ml-2 -rotate-45"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M13 7l5 5m0 0l-5 5m5-5H6"
/>
</svg>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
);
}
export default Contact;